figma 安装插件
Designers often run into manual tasks when using design tools. For example, renaming or resizing a dozen frames in a hurry, creating the same set of elements at the start of any projects, show or hide certain elements on the page, and many more. I often think about ways to improve or automate our design process, similar to how developers like to automate theirs. Instead of tweaking things manually, why not building tools ourselves.
设计人员在使用设计工具时通常会遇到手工任务。 例如，急于重命名或调整一打帧的大小，在任何项目开始时创建相同的元素集，显示或隐藏页面上的某些元素等等。 我经常考虑改进或自动化我们的设计过程的方法，类似于开发人员喜欢使其设计自动化的方法。 与其手动调整，不如自己构建工具。
After all, we know clearly what our pain points are and even better, what the solution might look like.
毕竟，我们清楚地知道我们的痛点是什么，甚至更好，解决方案将是什么样子。
Last month, I joined Xero as a designer on the XUI Design System team. Soon, I learned that at the end of each two-week sprint, we have a jog day. On a jog day, we get to run wild and do something we are interested in as designers. Of course, the topics are design system related.
上个月，我以XUI设计系统团队的设计师身份加入Xero 。 很快，我得知在每两个星期的冲刺结束时，我们都有慢跑的一天。 在慢跑的日子里，我们变得疯狂起来，做一些我们作为设计师感兴趣的事情。 当然，主题与设计系统有关。
As you have guessed, I went down the Figma plugin rabbit hole and created two simple ones: Spaxer and Ixon.
就像您猜到的那样，我走了Figma插件的兔子洞，创建了两个简单的插件： Spaxer和Ixon 。
The experience of creating Figma plugins was quite intuitive and joyful. I would like to share how I went about creating the plugins, and in hope it might help you decide if you would like to give it go.
创建Figma插件的经验非常直观和愉快。 我想分享一下我如何创建插件，并希望它可以帮助您决定是否要放弃它。
Before we get started, here’s what you need to know about me:
在我们开始之前，这是您需要了解的有关我的信息：
- I have some experience with HTML and CSS (SASS if you will) 我对HTML和CSS有一定的经验(如果愿意，请使用SASS)
- I have some basic programming knowledge (i.e. if else statement and array) 我有一些基本的编程知识(即if语句和数组)
- I can go as far as writing a couple of functions in vanilla JavaScript and get them running 我可以尝试用香草JavaScript编写几个函数并使它们运行
- I have never written a line of code in a TypeScript file 我从未在TypeScript文件中编写过代码行
- I have used terminal and git before 我以前用过terminal和git
简单的设置 (An easy setup)
To start writing a plugin, go follow Figma’s setup guide. It took me around 10 minutes getting everything ready on my new work laptop.
要开始编写插件，请遵循Figma的设置指南 。 我花了大约10分钟的时间才能在新工作笔记本电脑上准备好一切。
In a nutshell, what you need are:
简而言之，您需要的是：
- Figma’s desktop app Figma的桌面应用
- Visual Studio Code Editor Visual Studio代码编辑器
- Node.js and npm Node.js和NPM
- TypeScript 打字稿
Figma的示例插件 (Figma’s example plugin)
Figma populates an example when you create a new plugin. I recommend taking a look at the example before make a start.
创建新插件时，Figma会填充一个示例 。 我建议在开始之前先看一下示例。
The example files give you a clear idea of the file structure:
示例文件为您提供了文件结构的清晰思路：
code.ts: the typescript file where you write the functionalities, which later get compiled into code.js
code.ts ：您在其中编写功能的打字稿文件，该文件随后被编译为code.js
ui.html: the HTML file where you define the interface for users to interact with
ui.html ：用于定义用户与之交互的界面HTML文件
The example code also offers some guidance on common scenarios you might encounter:
该示例代码还为您可能遇到的常见情况提供了一些指导：
- How to trigger the plugin interface 如何触发插件界面
- How does the interface connect with the functionality 接口如何与功能连接
- How to define and create elements (for example, rectangles) on the canvas 如何在画布上定义和创建元素(例如，矩形)
- How to automatically shift the focus (viewport) to the element you have created 如何自动将焦点(视口)移动到您创建的元素
从React开始 (Starting with React)
You can, of course, bundle React if you have a complex set of states to manage for your plugin.
当然，如果您需要管理一组复杂的状态集，则可以捆绑React 。
My colleague recommended this React template on Github. Though, I definitely need to learn React first.
我的同事在Github上推荐了这个React模板 。 不过，我绝对需要先学习React。
Figma的现场文档 (Figma’s spot-on documentation)
Figma’s comprehensive documentation is what really makes writing a plugin easy.
Figma全面的文档真正使编写插件变得容易。
There are two parts in the doc:
该文档分为两部分：
Introduction: What you need to know about Figma plugin in general
简介 ：关于Figma插件的一般知识
API references: Details on objects, properties and functions
API参考 ：有关对象，属性和函数的详细信息
介绍 (Introduction)
Here are the things I find most useful in the Introduction section:
以下是我在“ 简介”部分发现的最有用的内容：
How to edit properties
如何编辑属性
API参考 (API references)
This part of the documentation gives you all of the nitty gritty on the objects, properties and functions you can use and manipulate when writing the plugin.
文档的这一部分为您提供了编写插件时可以使用和操作的对象，属性和函数的所有细节。
What’s interesting for me was to get familiar with the different types of node in Figma, for example:
对我而言，有趣的是熟悉Figma中不同类型的节点 ，例如：
- DocumentNode DocumentNode
- PageNode PageNode
- FrameNode 框架节点
- GroupNode 组节点
- ComponentNode ComponentNode
- InstanceNode 实例节点
- and more specific nodes like RectangleNode and VectorNode 还有更具体的节点，例如RectangleNode和VectorNode
The search bar on the documentation site also comes in handy from time to time.
文档站点上的搜索栏有时也会派上用场。
在Figma中打开控制台 (Open console in Figma)
I rely on console.log() a lot when writing JavaScript.
我依靠console.log() 编写JavaScript时需要花费很多。
Luckily, you can open the console right away in the Figma desktop app and see the console log. The experience is no difference to opening the developer tools on the Google Chrome browser.
幸运的是，您可以立即在Figma桌面应用程序中打开控制台，并查看控制台日志。 体验与在Google Chrome浏览器上打开开发人员工具没什么不同。
打字稿和警告 (Typescript and warnings)
One thing I learned the hard way was that the warnings or errors thrown by TypeScript do not mean your plugin is not working.
我很难学到的一件事是TypeScript引发的警告或错误并不意味着您的插件无法正常工作。
I spent 3 hours trying to get TypeScript happy about how I was accessing the opacity property on a rectangle. While I am still getting errors in Visual Studio Code Editor at the moment, my plugin runs just fine.
我花了3个小时尝试让TypeScript对如何访问矩形上的opacity属性感到满意。 尽管目前在Visual Studio Code Editor中仍然出现错误，但我的插件运行得很好。
I certainly have a lot of learning to do for TypeScript. My point here is not asking you to ignore the warning or errors, but simply remember your code might actually work even if you get a lot of red lines in the editor.
对于TypeScript，我当然有很多学习要做。 我的意思不是要您忽略警告或错误，而要记住，即使在编辑器中出现很多红线，您的代码也可能会真正起作用。
My suggestion is that always test and run your plugin first.
我的建议是始终先测试并运行您的插件。
Edit: Check out The type filing in Figma documentation for TypeScript annotation (Suggested by Andrea Epifani).
编辑：在Figma文档中检查TypeScript注释的类型文件 ( 由 Andrea Epifani 建议 )。
从示例项目中获取灵感 (Get inspiration from sample projects)
The community for writing Figma plugins is still growing. It might not be easy to find direct answers to your questions. However, there are some sample projects floating in Github provided by the Figma team and other awesome developers.
编写Figma插件的社区仍在增长。 找到问题的直接答案可能并不容易。 但是，Figma团队和其他出色的开发人员在Github中提供了一些示例项目。
I often found answers and inspiration through these samples. Let’s take a look the ones from the Figma team:
我经常从这些样本中找到答案和灵感。 让我们看一下Figma团队的成员 ：
Bar chart illustrates how users can use an input to generate charts
条形图说明了用户如何使用输入来生成图表
Document statistics provides a practical example of how to traverse through all the nodes in a Figma file and tally up the stats
文档统计信息提供了一个实践示例，说明如何遍历Figma文件中的所有节点并汇总统计信息
Text search shows how to work with a selected node, and how to keep Figma responsive during long-running operations
文本搜索显示了如何使用选定的节点，以及如何在长时间运行的操作中使Figma保持响应
版本控制 (Version control)
Using version control is a simple but good practice. Make sure you use Github or an alternative platform to help control versions in your code.
使用版本控制是一个简单但好的做法。 确保使用Github或其他平台来帮助控制代码中的版本。
If you are not familiar with the concept of version control, here’s a guide from Atlassian.
如果您不熟悉版本控制的概念，请参阅Atlassian的指南 。
发布插件 (Publish the plugin)
Your plugin can be in 3 different states:
您的插件可以处于3种不同的状态：
- Live on your local machine and is only available to you 驻留在本地计算机上，仅对您可用
- Published to your organisation (on Figma’s enterprise plan) and is available to your team and organisation 已发布到您的组织(根据Figma的企业计划)，可供您的团队和组织使用
- Published to the entire Figma community and is available to the public 已发布到整个Figma社区，并向公众开放
The publishing process is quite simple. You can follow this guide.
发布过程非常简单。 您可以按照本指南进行操作 。
What you need are:
您需要的是：
- A plugin name 插件名称
- A description (This is where you can put all the details and links) 说明(您可以在其中放置所有详细信息和链接)
- Cover art (1920 x 980) 封面(1920 x 980)
- Avatar (128 x 128) 头像(128 x 128)
- Up to 12 tags 最多12个标签
- Support contact 支持联系人
- A decision around making it available to your organisation or to the entire Figma community 关于将其提供给您的组织或整个Figma社区的决定
You can instantly publish your plugin within your organisation, while making it available to the public will trigger a review process from the Figma team.
您可以在组织内立即发布插件，而将其公开发布将触发Figma团队进行审核。
✌就是这样 (✌That’s it)
Hopefully, this gives you a good overview of how to create a Figma plugin.
希望这可以为您提供有关如何创建Figma插件的很好的概述。
As a designer, I do find it super exciting to be able to create some simple tools with plain HTML, CSS and basic JavaScript. Figma has done an awesome job in removing the complexity by providing out-of-box API and amazing documentation.
作为一名设计师，我确实发现能够使用纯HTML，CSS和基本JavaScript创建一些简单的工具非常令人兴奋。 Figma通过提供现成的API和出色的文档，在消除复杂性方面做得非常出色。
I would also hope that the Figma team will continue improving the experience of managing and updating the plugins. More importantly, the community aspect of Figma plugins is what going to support and encourage more designers to take charges and make more awesome creations.
我也希望Figma团队将继续改善管理和更新插件的经验。 更重要的是，Figma插件的社区方面是要支持和鼓励更多的设计师付费并做出更出色的创作。
🔗方便的链接和资源 (🔗 Handy links and resources)
To wrap it up, here is a list of links and resources I found very helpful.
总结一下，这是我发现非常有用的链接和资源列表。
Thank you for reading! 👋 Hi, I am Lennon Cheng, an Interaction Designer and a Freelancer, currently living in Melbourne, Australia.
感谢您的阅读！ 👋您好，我是互动设计师兼自由职业者Lennon Cheng ，目前居住在澳大利亚墨尔本。
翻译自: https://uxdesign.cc/writing-my-first-figma-plugin-as-a-designer-who-can-barely-code-2ce03c20c133
figma 安装插件
1969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
