Unit 14｜Figma Plugin 大集合

Figma 的 Plugin 系統極為強大，透過 Plugin 可大幅加速相關的設計工作，且 Plugin 囊括各類型的流程輔助，從設計規劃、元件生成、到設計稿標註等等都有對應的 Plugin 支援；本書系統性介紹許多好用 Plugin，並將其區分為七大類做整做，分別為：「元件生成類型」、「圖樣生成類型」、「動態元件生成」、「色彩與影像後製工具」、「設計稿管理與標註工具」、「網頁交互轉換」、「文字輔助工具」等類型之外掛。

元件生成類型外掛

• Unsplash：快速產生高品質圖片

• Iconify：快速生成向量 icon 的好用工具

• Vector Maps：快速插入向量地圖

• Content Reel：強大的內容填充資料庫

• Vectary 3D：快速合成高品質 3D 產品示意圖

• Humaaans for Figma：輕鬆插入向量人物圖

• Material Design Icons：眾多好用 PNG 和 SVG 圖標

• Chart：數據圖表生成

• Charts：數據圖表生成

圖樣生成類型外掛

• Blobs ：快速建立不重複的向量色塊

• Confetti：建立五彩帶亂撒效果

• Get Waves：建立波浪向量效果

• Hero Patterns for Figma：建立重複性圖樣元件

• Pattern Hero：產生簡易重複圖樣工具

動態元件生成

• Gifs：快速插入 GIF 動圖

• LottieFiles：高質感動態效果社群資源

• FigMotion：用時間軸編輯動畫

色彩與影像後製外掛

• Image Palette：從圖像提取相關配色

• Chroma Colors：快速建立顏色樣式

• Webgradients：快速生成優美漸層色彩

• Remove BG：快速移除物件背景

• Wire Box：將高擬真圖轉為線框圖

• TinyImage Compressor：進行圖片檔壓縮

設計稿管理與標註外掛

• Rebame-It：快速命名圖層工具

• Autoflow：快速拉出圖層間的線條

• Measure：絕佳的屬性標示工具

• Site Map：生成網站地圖

• Design Lint：自動標註設計錯誤

與網頁交互轉換外掛

• Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)

• Anima - Export to React, HTML & Vue code：將網頁轉換 Figma 工具

• Chinese Font Pickers：預覽中文字型

• Lorem ipsum｜生成經典假字好用工具