如何写一个 Figma 插件

介绍

如果要用一句最简单的话来解释 Figma 是啥，它是一个可以同时在浏览器和本地客户端使用的 Sketch（设计工具)。

对于前端的我来说，它最吸引人的点就在于可以在浏览器端运行。因为之前也开发过两个 Sketch 插件：

Sketch-IconScope: 辅助你导出符合设计要求尺寸的图标
Sketch-topographic：帮你查看设计稿布局情况

但是介于之前 Sketch 插件是类似开发客户端的感觉，文档也很凌乱，并且处于新旧 API 共存的情况，整个开发体验是非常糟糕的（不知道现在情况有没有改善）。

而对于可以在浏览器端运行的 Figma 插件，它的开发就是 HTML+CSS+JS。所以对于前端来说开发体验会相对来说好很多，几乎没有上手成本。官方文档也是很详细，基本按照以下 4 个步骤，要不了 10 分钟你就能跑起来一个官方 Demo。

官方步骤

下载 : Visual Studio Code, Figma 客户端
创建 : 登陆 Figma > 菜单 Menu > Plugins > Development > New Plugin...
安装 : Node.js ，安装 npm install -g typescript「如果有忽略」；
开始 : 用 VS 代开自动生成的DEMO，照着官方教程 , 官方API 写就可以了；

如果只是想跑一个DEMO 到这里基本就已经结束了。本文的重点还是会想要从一个小白的角度，帮大家减轻一些上手成本和一些官方没有提到的坑。

为啥要写一个 Figma 插件？

在具体讲内容之前，可能会先要尝试解答一下这个问题。我自己主要有以下几个原因：

重复劳动力：在使用设计工具难免会有切图，复制粘贴文案之类的重复动作。插件或许可以减少这些操作的步骤；
设计师邀约：设计师在使用设计工具的时候也有很多繁琐的重复动作，他们自己又不太想学写代码，所以就找到了身为前端的你；
理解设计：在我看来编写设计工具插件的过程，是一个思考设计的过程。为什么设计工具大多数用了画板而非网页中流的概念？为什么设计工具中并没有网页中类似 margin 的概念? 在我的另一个文章里有尝试解答 CSS 布局与“仓库管理”的关系。在你写 Figma 插件的时候，你会关注到这些之前其实可以不用考虑的问题；
影响力：就是 Figma 刚出来，你写的插件比较容易火，也比较容易被人看到；
传递概念：ACSS 是我几乎在我所有文章都会提到的概念，但是不管我多努力的发声，都很难让其它的同学产生共鸣。如果能在设计工具上能帮到大家减轻工作量，让大家实际的体验到它的带来的好处，我想大家就能更自然的了解为啥我要极力推荐 ACSS 的了；

插件界面

Figma 插件的 UI 界面是类似一个浮窗。这个 UI 界面红框的部分，其实是一个 web 的 iframe 页面。所以理论上，在 figma UI 界面里面可以使用浏览器的所有 API。

此外 Figma 还提供了不需要 UI 界面的插件。比如用户选择某个元素，然后调用插件将元素旋转 180 度之类不需要用户输入内容的一次性操作。

基础原理

code.js 这个文件可以调用 figma 本身提供的 API，比如对于多余元素的获取创建修改都可以做到。当然这个 API 也是有限制的，这个具体要看官方的文档。或者是查看 figma.d.ts 这个文件，这个文件其实只是一个 figma API 的接口文件，帮助你在本地开发的时候会有代码提示。

ui.html 文件就是会被 figma 插件 iframe 显示的web 页面。所以理论上是支持浏览器的所有API。但是这里有一个限制是，所有的 CSS 和 js 文件都只能内联使用。所以一般会借助打包工具，把 CSS 或者 script 打包进去。使用 gulp 的同学可以考虑使用 gulp-usemin 这个插件，webpack 的同学可以忽略。

ui.html 个文件也是不能直接访问 figma 内部的 API 的，你只能通过 figma.postmessage 向 code.js 发送信息，然后通过调用 code.js 去访问 figma 本身的 API，再通过 figma.postmessage 返回结果到 ui.html。

我的插件

这边再推荐两个，可以减少大家日常重复劳动的插件。

Icon-zone

这个就是你在figma里面导图标的时候，如果设计师并没有帮你叠好矩形在图标的后面，往往导出来的图片尺寸会有问题。 Icon-zone 会帮你在图标后面叠加一个 4 的倍数的矩形。并帮你呼出导出图片的面板，然后你只需要再点击一下 export 按钮即可导出。也就是说原来至少要5，6步的操作现在只需要两步。

点我下载

ACSS

ACSS 就是帮你自动生成选中的文本元素 CSS 和 html。如果你文本的样式是来自于设计师定制 local styles，你还可以为这个定制想要的CSS 选择器，而不走 ACSS的逻辑。

点我下载

END

因为 Figma 插件本身的逻辑设计的就比较的简单，所以可以介绍的也比较少。有几个遗留的问题是我没有找到方案的。知道的同学也可以帮忙解答一下。

figma 自身是可以直接导出文本，和 CSS 样式到粘贴板的。但是 figma 本身却不提供，复制内容到粘贴板的功能。以至于我们需要在 ui.html 再通过传统的方式实现一个复制到粘贴板的功能。

并且我也没有找到，可以直接获取 Figma 导出 CSS 的接口，明明 figma 都已经可以导出 CSS，但是这边还是要自己去通过属性值去拼接出所有的样式这一点也是让人有点疑惑。

我这边也是在摸索的阶段，感兴趣的同学欢迎一起研究。