若是要用一句最簡單的話來解釋 Figma 是啥,它是一個能夠同時在瀏覽器和本地客戶端使用的 Sketch(設計工具)。css
對於前端的我來講,它最吸引人的點就在於能夠在瀏覽器端運行。由於以前也開發過兩個 Sketch 插件:html
可是介於以前 Sketch 插件是相似開發客戶端的感受,文檔也很凌亂,而且處於新舊 API 共存的狀況,整個開發體驗是很是糟糕的(不知道如今狀況有沒有改善)。前端
而對於能夠在瀏覽器端運行的 Figma 插件,它的開發就是 HTML+CSS+JS。因此對於前端來講開發體驗會相對來講好不少,幾乎沒有上手成本。官方文檔也是很詳細,基本按照如下 4 個步驟,要不了 10 分鐘你就能跑起來一個官方 Demo。node
npm install -g typescript
「若是有忽略」;若是隻是想跑一個DEMO 到這裏基本就已經結束了。本文的重點仍是會想要從一個小白的角度,幫你們減輕一些上手成本和一些官方沒有提到的坑。webpack
在具體講內容以前,可能會先要嘗試解答一下這個問題。我本身主要有如下幾個緣由:git
margin
的概念? 在個人另外一個文章裏有嘗試解答 CSS 佈局與「倉庫管理」的關係。在你寫 Figma 插件的時候,你會關注到這些以前其實能夠不用考慮的問題;Figma 插件的 UI 界面是相似一個浮窗。這個 UI 界面紅框的部分,實際上是一個 web 的 iframe 頁面。因此理論上,在 figma UI 界面裏面可使用瀏覽器的全部 API。github
此外 Figma 還提供了不須要 UI 界面的插件。好比用戶選擇某個元素,而後調用插件將元素旋轉 180 度之類不須要用戶輸入內容的一次性操做。web
code.js 這個文件能夠調用 figma 自己提供的 API,好比對於多餘元素的獲取建立修改均可以作到。固然這個 API 也是有限制的,這個具體要看官方的文檔。或者是查看 figma.d.ts 這個文件,這個文件其實只是一個 figma API 的接口文件,幫助你在本地開發的時候會有代碼提示。typescript
ui.html 文件就是會被 figma 插件 iframe 顯示的web 頁面。因此理論上是支持瀏覽器的全部API。可是這裏有一個限制是,全部的 CSS 和 js 文件都只能內聯使用。因此通常會藉助打包工具,把 CSS 或者 script 打包進去。使用 gulp 的同窗能夠考慮使用 gulp-usemin 這個插件,webpack 的同窗能夠忽略。npm
ui.html 個文件也是不能直接訪問 figma 內部的 API 的,你只能經過 figma.postmessage 向 code.js 發送信息,而後經過調用 code.js 去訪問 figma 自己的 API,再經過 figma.postmessage 返回結果到 ui.html。
這邊再推薦兩個,能夠減小你們平常重複勞動的插件。
這個就是你在figma裏面導圖標的時候,若是設計師並無幫你疊好矩形在圖標的後面,每每導出來的圖片尺寸會有問題。 Icon-zone 會幫你在圖標後面疊加一個 4 的倍數的矩形。並幫你呼出導出圖片的面板,而後你只須要再點擊一下 export 按鈕便可導出。也就是說原來至少要5,6步的操做如今只須要兩步。
ACSS 就是幫你自動生成選中的文本元素 CSS 和 html。若是你文本的樣式是來自於設計師定製 local styles
, 你還能夠爲這個定製想要的CSS 選擇器,而不走 ACSS
的邏輯。
由於 Figma 插件自己的邏輯設計的就比較的簡單,因此能夠介紹的也比較少。有幾個遺留的問題是我沒有找到方案的。知道的同窗也能夠幫忙解答一下。
figma 自身是能夠直接導出文本,和 CSS 樣式到粘貼板的。可是 figma 自己卻不提供,複製內容到粘貼板的功能。以致於咱們須要在 ui.html 再經過傳統的方式實現一個複製到粘貼板的功能。
而且我也沒有找到,能夠直接獲取 Figma 導出 CSS 的接口,明明 figma 都已經能夠導出 CSS,可是這邊仍是要本身去經過屬性值去拼接出全部的樣式這一點也是讓人有點疑惑。
我這邊也是在摸索的階段,感興趣的同窗歡迎一塊兒研究。