寫給小白的Figma外掛開發教程(1)
1、為什麼有這一篇?
-
作為一個前端,肯定會有 UI 給你出設計圖,大概率會用到 Figma,或者 類似的產品,
簡單來說你就是需要將這個圖還原到網頁/app內
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、登陸上
3、開啟桌面 figma ,add New Plugin
npm install --save-dev @figma/plugin-typings
4、vscode 開啟 並且 安裝 @figma/plugin-typings
- 安裝這個將非常迅速,如果
不迅速,考慮換個網路
3、跑起來
此時我們的 plugin 其實 已經可用,雖然 我們還沒有修改任何東西,我們拿到的是 預設的模版
- 嘗試引入 使用
- 如何 解決 這個錯誤 ? 我們
去看看 Read.ME 檔案
- 等下
別急著罵 讓我幫你找找有效的解決方案
簡單來說 需要 build 一下
4、效果
-
very good ! 一個好的入門
-
當然 可以做更多修改 比如
- 此時
頁面 效果這樣 , 你可以 隨意自定義你的 外掛
5、參考文件
「其他文章」