如何寫一個 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，可是這邊仍是要本身去經過屬性值去拼接出全部的樣式這一點也是讓人有點疑惑。

我這邊也是在摸索的階段，感興趣的同窗歡迎一塊兒研究。