不容錯過的 19 個免費 Figma Plugins — 2024

BoSyuan
設計丸物製
Published in
7 min readJul 1, 2024

在 Figma 成為設計界主流工具的時代,插件推薦文章層出不窮,但是實際下載後,經常發現不是不實用,就是需要付費。為了避免大家在插件海洋中迷失,本篇文章將分享幾個工作中真正會用到,且完全免費的 Figma 插件!

總共推薦 19 個常用插件,分成 5 大類別,分別從 AI 一鍵生成、設計流程圖 & Wireframe、設計技巧、快速替換內容 、交付開發等類別分享。

AI 一鍵生成

1. AI image generator by Freepik

使用方式跟一般 AI 繪圖工具一樣,撰寫提示詞產出圖片,可產出三種尺寸圖片,每天有 16 次生成機會 (一次4張圖)。

對 AI 繪圖有更多需求可參考這篇:免費仔的 AI 繪圖工具 — Playground AI

✨ Figma Config 2024 已更新圖片生成功能:Make an image

AI image generator by Freepik

2. UI Faces — Free AI avatars

AI 人像分成 5 個類別:Human、Alien、Cartoon、Abstract、Robot。點擊物件,再點擊插件內的圖片,即可直接替換。

✨ Figma Config 2024 已更新圖片生成功能:Make an image

UI Faces – Free AI avatars

設計流程圖 & Wireframe

3. Autoflow

每個文件可以免費使用 50 次,在連接畫板畫 UI Flow 時很好用。

Autoflow

4. Flow chart

就是專門來畫 Flow Chart。

Flow chart

5. Grayscale

快速將畫板/物件灰階,以便在測試階段獲得更針對性的回饋,排除色系干擾,從外掛程式中選擇「Remove All Grayscale」,即可移除灰階效果。

Grayscale

設計技巧

6. Remove BG

註冊帳號,並使用 remove.bg API,即可無限次數免費使用插件。

✨ Figma Config 2024 已更新圖片去背功能:Remove background

Remove BG

7. Noise & Texture

可以把文字或圖形添加噪點跟特殊質感。選擇一個圖層並點擊添加,更改設定的同時,可查看即時更新的圖層。刪除效果的方式很簡單,將右側 Fill 內新增的 image 刪除即可。

Noise & Texture

8. Beautiful Shadows

通過拖曳光源方向調整光源角度,輕易創造出優美的陰影樣式

Beautiful Shadows

9. Confetti

選取多個元素,並勾選隨機透明度、大小、旋轉,點擊 Run 生成隨機效果。生成五彩紙屑或隨機圖樣背景時很好用!

Confetti

10. Image Tracer

在 Figma 中輕鬆將影像轉換為向量圖層,彩色跟黑白都可以套用,圖像模糊的時候效果較差。

Image Tracer

11. oblique

可以快速創建任何形狀的傾斜投影、視覺透視等。選取物件點擊 project,生成的區塊會跟物件本身相同顏色,自行調整顏色後,即可看出產出效果。

oblique

快速替換內容

12. Translate

翻譯內容由百度提供,目前每月免費次數為 100 萬字符,有 6 種語言可以相互翻譯,點選文字後點擊翻譯即可完成。

✨ Figma Config 2024 已更新多國語言翻譯功能:Translate to…

Translate

13. Content Catalog

快速替換假資料,可稍微調整隨機產出的資料格式。

✨ Figma Config 2024 已更新自動替換資訊功能:Replace content

Content Catalog

14. Taiwan Data Generator

中文(台灣)假資料專用,中文姓名跟手機資料都符合台灣格式。

✨ Figma Config 2024 已更新自動替換資訊功能:Replace content(中文還不太穩定,可能需要按一鍵翻譯)

Taiwan Data Generator

交付開發

15. Find in page

搜尋圖層和文字,瀏覽結果並一鍵替換。建議不要搜尋會大量結果的內容,外掛程式可能會停止運作。若結果包含不同頁面的圖層,您將無法全選/替換多個圖層。

✨ Figma 已更新搜尋功能:Select layers and objectsFind assets

Find in page

16. Rename It

重新命名多個圖層和 Frams,也可以選定圖層中的任何詞替換掉。可搭配 Find in page 使用,批次找到圖層、選取後,再用外掛Rename it 取代。

✨ Figma Config 2024 已更新重新命名功能:Rename Layers

Rename It

17. Redlines

交付設計稿的時候,標注規範尺寸簡單好用。

Redlines

18. Anno-tation

在 Figma 中輕鬆撰寫設計文檔,簡單就是好用!

Anno-tation

19. TinyImage Compressor

在輸出設計稿前,先使用外掛壓縮過大檔案的圖片!圖像輸出比 Figma 預設輸出小了高達 95%。

TinyImage Compressor

同場加應:額外推薦酷酷的插件 html.to.design

輸入網址即可將網站轉換為可編輯的 Figma 設計稿,圖片、文字、按鈕都可以完整復刻,參考競品版型時很方便!免費版每 30 天可使用 10次(Tip:過於複雜的網站可能會跑版)。

html.to.design

感謝你的耐心閱讀!如果有更棒的免費插件想要推薦,歡迎留言回饋~

如果想了解更多產品設計 / UIUX / 敏捷設計內容,歡迎訂閱 設計丸物製&追蹤 設計丸 IG ,我們下次見 👋

--

--

BoSyuan
設計丸物製

從文學背景 ( 台文系不是中文系! ) 切入做產品設計,誤打誤撞進入敏捷開發世界。喜歡美的事物,喜歡分享交流,相信人生的意義在於熱愛生活。