如何写一个 Figma 插件

介绍

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

对于前端的我来讲，它最吸引人的点就在于能够在浏览器端运行。由于以前也开发过两个 Sketch 插件：

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

可是介于以前 Sketch 插件是相似开发客户端的感受，文档也很凌乱，而且处于新旧 API 共存的状况，整个开发体验是很是糟糕的（不知道如今状况有没有改善）。

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

官方步骤

1. 下载 : Visual Studio Code, Figma 客户端
2. 建立 : 登录 Figma > 菜单 Menu > Plugins > Development > New Plugin...
3. 安装 : Node.js ，安装 npm install -g typescript「若是有忽略」；
4. 开始 : 用 VS 代开自动生成的DEMO，照着 官方教程 , 官方API 写就能够了；

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

为啥要写一个 Figma 插件？

在具体讲内容以前，可能会先要尝试解答一下这个问题。我本身主要有如下几个缘由：

1. 重复劳动力：在使用设计工具不免会有切图，复制粘贴文案之类的重复动做。插件或许能够减小这些操做的步骤；
2. 设计师邀约：设计师在使用设计工具的时候也有不少繁琐的重复动做，他们本身又不太想学写代码，因此就找到了身为前端的你；
3. 理解设计：在我看来编写设计工具插件的过程，是一个思考设计的过程。为何设计工具大多数用了画板而非网页中流的概念？为何设计工具中并无网页中相似 margin 的概念? 在个人另外一个文章里有尝试解答 CSS 布局与“仓库管理”的关系。在你写 Figma 插件的时候，你会关注到这些以前其实能够不用考虑的问题；
4. 影响力：就是 Figma 刚出来，你写的插件比较容易火，也比较容易被人看到；
5. 传递概念：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，可是这边仍是要本身去经过属性值去拼接出全部的样式这一点也是让人有点疑惑。

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