寫給小白的Figma外掛開發教程(1)

語言: CN / TW / HK

1、為什麼有這一篇?

  • 作為一個前端,肯定會有 UI 給你出設計圖,大概率會用到 Figma,或者 類似的產品,簡單來說你就是需要將這個圖還原到網頁/app內

  • Figma 大概這樣(登陸後)

Kapture 2022-09-29 at 18.04.43.gif

ps: 如果 UI 沒有給你相關的東西,直接給圖片,我建議你趕緊跑! 開始的需求都非常不規範,後續肯定都是問題 !

2、如何開發外掛 ?

1、環境配齊

vscode(官方推薦) npm + node.js (自行安裝) ts sudo npm install -g typescript Figma desktop app

Figma desktop apphttps://www.figma.com/downloads/

2、登陸上

Kapture 2022-09-29 at 18.00.04.gif

3、開啟桌面 figma ,add New Plugin

Kapture 2022-09-29 at 18.12.32.gif

npm install --save-dev @figma/plugin-typings

4、vscode 開啟 並且 安裝 @figma/plugin-typings

  • 安裝這個將非常迅速,如果不迅速,考慮換個網路

image.png

3、跑起來

此時我們的 plugin 其實 已經可用,雖然 我們還沒有修改任何東西,我們拿到的是 預設的模版

  • 嘗試引入 使用

Kapture 2022-09-29 at 18.38.38.gif

  • 如何 解決 這個錯誤 ? 我們 去看看 Read.ME 檔案

image.png

  • 等下 別急著罵 讓我幫你找找有效的解決方案

簡單來說 需要 build 一下

image.png

4、效果

Kapture 2022-10-08 at 17.38.15.gif

  • very good ! 一個好的入門

  • 當然 可以做更多修改 比如

image.png

  • 此時 頁面 效果這樣 , 你可以 隨意自定義你的 外掛

image.png

5、參考文件

Figma document