2026 Figma Plugin 推薦懶人表
2026 年要找 figma plugin推薦,先用「必裝、看需求、進階」分級最省時間:新手先裝 Iconify、Unsplash、Content Reel、Autoflow,再依工作補 TinyImage、Remove BG、Tokens Studio 或 html.to.design。
Figma 外掛推薦不該只看熱門度,還要看你的設計情境。我的判斷是:每天會用、能減少重複操作、輸出結果可控的外掛才值得常駐;只在提案或測試時用到的工具,放在看需求清單就好。
| 分類 | 外掛 | 主要用途 | 適合誰 | 成本提醒 | 推薦程度 |
|---|---|---|---|---|---|
| 圖示 | Iconify | 匯入大量開源 SVG 圖示 | 新手、UI 設計師 | 官方說明為免費 | 必裝 |
| 圖片 | Unsplash | 快速放入照片情境 | 新手、網頁設計師 | 注意照片授權與品牌適配 | 必裝 |
| 內容 | Content Reel | 填入假文、姓名、圖片、圖示 | 產品設計、UI 練習 | 部分功能需登入或有站內購買 | 必裝 |
| 流程 | Autoflow | 快速連接流程線 | UX、PM、設計師 | 免費額度後可能需付費 | 必裝 |
| 壓縮 | TinyImage Compressor | 壓縮 JPG、PNG、SVG、WebP、AVIF | 網頁設計、交付前整理 | 免費試用有限,進階功能付費 | 看需求 |
| 去背 | Remove BG | 透過 remove.bg API 去背 | 電商、行銷視覺 | 需帳號、API key 與額度 | 看需求 |
| 圖示 | Material Symbols | Google Material 風格圖示 | Android、Google 風格產品 | 免費,但需確認外掛維護狀態 | 看需求 |
| 圖示 | Phosphor Icons | 多粗細、較細緻的圖示系統 | SaaS、內容型介面 | 使用前看授權與版本 | 看需求 |
| 插圖 | Blush | 客製化插圖素材 | Landing Page、提案 | 免費方案可用,SVG 等進階功能可能付費 | 看需求 |
| 插圖 | Humaaans | 人物插圖組合 | 簡報、產品情境圖 | 免費,仍需確認原素材授權 | 看需求 |
| 配色 | WebGradients | 快速套用背景漸層 | 網頁視覺、活動頁 | 免費,但更新較久遠 | 看需求 |
| 裝飾 | Blobs | 產生有機形狀背景 | 視覺設計師 | 免費 | 看需求 |
| 配色 | Image Palette | 從圖片擷取 5 色色票 | 品牌、視覺探索 | 免費,結果需人工校正 | 看需求 |
| 字體 | Font Preview | 預覽字體效果 | 需要比較字體的設計師 | 外掛頁已標示多數功能已成原生能力 | 不建議優先 |
| 設計系統 | Tokens Studio | 管理 design tokens | 設計系統、工程協作 | 可免費開始,進階功能需 Pro | 進階 |
| 網頁匯入 | html.to.design | 把網站匯入成可編輯設計稿 | 改版、競品分析 | 團隊版與大量匯入需看方案 | 進階 |
| 轉程式碼 | Builder.io | 將設計稿轉成程式碼草稿 | 產品團隊、前端協作 | 通常需帳號與方案限制 | 進階 |
| 轉程式碼 | Locofy | Figma 設計轉前端程式碼 | 設計轉開發流程 | 需登入,輸出仍要工程檢查 | 進階 |
| 轉程式碼 | Anima | 輸出 React、Vue、HTML 等程式碼 | 原型與交付參考 | 需帳號,進階輸出看方案 | 進階 |
| 向量 | Image Tracer | 點陣圖轉向量 | Logo 草圖、素材整理 | 結果需人工清線 | 看需求 |
新手必裝外掛
新手先裝 Iconify、Unsplash、Content Reel、Autoflow 就夠。用途分別是補圖示、放照片、填假資料、畫流程線;適合剛開始做 UI 練習或作品集的人。免費提醒要分開看,Iconify 官方標示免費,Autoflow 則有免費流程數限制。替代方案可用 Material Symbols、Pexels、Lorem Ipsum 類外掛。
UI 視覺素材外掛
UI 視覺設計師常用 Iconify、Material Symbols、Phosphor Icons、Unsplash、Blush、Image Palette。這些 Figma 外掛解決的是素材取得與風格探索,不是取代視覺判斷。照片、插圖、圖示都要回頭檢查授權,替代外掛可依團隊品牌風格改成 Coolors、Humaaans、Pictomate 或 Boxicons。
UX 流程與原型外掛
UX 流程外掛優先看 Autoflow、Wireframe Pilot、Mockup 類工具。它們適合在開會前把流程與線框稿快速整理出來,特別是 user flow、Landing Page 初稿、App Prototype。成本上要注意 AI wireframe 類工具常有每日生成額度,替代方案可以用 FigJam、Figma 原生 Prototype 與元件庫。
設計交付與圖片優化外掛
交付前常見需求是標註、壓圖、去背、輸出素材與 token 對齊。TinyImage、Remove BG、Tokens Studio、Measure / Annotate 類外掛可以補上這一段,但不要把外掛輸出當成完整規格。工程交付仍需要清楚命名、元件狀態、RWD 說明與素材規則。
如果你只想先裝 5 個,優先選這幾款
第一次整理 Figma Plugin,先裝 5 個就好:Iconify、Unsplash、Content Reel、Autoflow,再從 TinyImage 或 Remove BG 選一個。這組能覆蓋圖示、圖片、假資料、流程與基本圖片處理。
-
Iconify:圖示最快補齊
Iconify 適合所有 Figma 新手,解決的是「找不到可用圖示」的問題。做按鈕、側邊欄、表單狀態、空狀態時都會用到。官方文件標示可匯入大量開源 SVG 圖示並且免費,安裝後可以直接搜尋關鍵字。替代外掛是 Material Symbols、Phosphor Icons、Boxicons;我的建議是先用 Iconify,等品牌風格確定後再縮小圖示系統。
-
Unsplash:快速放入情境圖片
Unsplash 適合做 Landing Page、活動頁、作品集與 App 情境稿的人。它解決的是「版面看起來太空」的問題,什麼時候用最適合?早期視覺探索、客戶提案、產品情境示意。免費與商用授權仍要回到 Unsplash 與圖片作者條款確認。替代外掛可用 Pexels 或直接使用品牌自有圖庫。
-
Content Reel:假文與假資料更像真產品
Content Reel 適合產品設計師、UI 練習與作品集整理。用途是把假姓名、Email、電話、頭像、短文案塞進設計稿,避免每個卡片都寫 Lorem ipsum。它在列表、會員頁、表單、評論區最有感。官方頁提到可建立自訂文字與圖片內容,部分功能會牽涉登入或站內購買。替代方案是 Faker 類資料外掛或自己建立內容元件庫。
-
Autoflow:流程線與 user flow 快速完成
Autoflow 適合 UX 流程、頁面轉換圖與簡報前整理。用途是選兩個物件後快速畫出連接線,比手動畫線更穩。它不是 UX 判斷工具,流程對不對仍要靠你理解任務、路徑與例外狀態。外掛頁顯示免費可用到一定流程數,超過後可能付費。替代方案是 FigJam connector、Flowkit 或 Figma 原生連線。
-
TinyImage / Remove BG:圖片處理看需求選一個
TinyImage 適合網頁設計與交付前壓縮,Remove BG 適合商品照、人物照與行銷素材去背。新手不一定兩個都要裝,因為圖片處理常牽涉成本、額度與外部服務。TinyImage 可輸出 WebP / AVIF 等格式;Remove BG 需 remove.bg 帳號與 API key。替代方案是 Icons8 Background Remover、Squoosh、ShortPixel 或設計團隊既有圖片流程。
圖示與素材類 Figma 外掛推薦
圖示與素材類 Figma 外掛要先看風格一致性,再看數量。Iconify 適合作為第一個圖示庫;Material Symbols 適合 Google 風格;Phosphor Icons 適合需要細緻線條的產品介面。
Iconify:最大眾、最適合作為第一個圖示庫
Iconify 的用途是把大量開源 SVG 圖示直接匯入 Figma,適合新手、UI 設計師與需要快速補齊介面狀態的人。它最適合用在表單、導覽、資料表、設定頁與後台系統。免費提醒上,Iconify 官方文件寫明 Figma 外掛可免費使用,且匯入 SVG。替代外掛是 Material Symbols、Phosphor Icons、Boxicons。我的做法通常是先用 Iconify 快速找方向,再把同一專案收斂到一套圖示風格。
Material Symbols:適合 Google / Android 風格介面
Material Symbols 的用途是加入 Google Material 風格圖示,適合 Android App、Google 生態產品或偏系統工具感的介面。什麼時候用?當你的版面已經使用 Material Design 語彙,或需要清楚、穩定、辨識度高的 icon。它通常可免費使用,但外掛頁最後更新時間與社群回報要檢查。替代方案是 Iconify 裡的 Material 圖示集,或直接從 Google Fonts Icons 取得 SVG。
Phosphor Icons:適合需要較細緻圖示風格的介面
Phosphor Icons 適合 SaaS、內容平台、金融科技與需要更輕盈視覺的產品。它的用途是提供多種線寬與風格,讓圖示能配合字重與介面密度。使用時機是品牌不想太 Google,也不想每個 icon 都長得很工具化。免費與授權要看當前官方說明。替代外掛是 Lucide、Feather Icons、Heroicons 或 Iconify 內的同類圖示集。
| 圖示外掛 | 優點 | 適合情境 | 選擇提醒 |
|---|---|---|---|
| Iconify | 數量多、開源圖示多、搜尋快 | 新手、快速找 icon、後台介面 | 要避免混用太多不同圖示集 |
| Material Symbols | Google 風格一致、辨識度高 | Android、工具型產品、Material UI | 風格很明確,不適合所有品牌 |
| Phosphor Icons | 線條細緻、重量選擇多 | SaaS、內容產品、較精緻的介面 | 設計稿要統一線寬與尺寸 |
Unsplash:快速放入照片情境
Unsplash 的用途是把照片快速放進設計稿,適合網頁設計師、社群視覺與作品集展示。最適合用在 hero 區塊、卡片封面、人物情境與品牌 moodboard。免費提醒是:照片平台授權可能允許廣泛使用,但品牌專案仍要確認可商用、肖像權與是否符合客戶產業。替代方案是 Pexels、品牌自有圖庫或付費圖庫。
Blush / Humaaans:插圖類素材補充
Blush 與 Humaaans 適合需要插圖氛圍但沒有插畫師支援的專案。用途是快速組合人物、情境與裝飾插圖,適合 Landing Page、空狀態、簡報與概念稿。Blush 有免費方案與進階付費功能;Humaaans 類素材雖然常見為免費或開源,仍要回頭看授權。替代外掛是 Storyset、Open Peeps 或直接委託插畫建立品牌資產。
圖示外掛怎麼選:風格一致性比數量更重要
圖示不是越多越好。真正會影響設計品質的是線寬、圓角、填色規則、尺寸、命名與狀態一致性。我的判斷是,個人作品可以用 Iconify 快速補齊;商業產品最好在前 20 個常用 icon 定稿後,就建立元件與命名規則。延伸閱讀可參考站內 元件庫建立流程,避免每頁都重新找圖示。
UI 視覺設計與配色外掛推薦
UI 視覺類 Figma 外掛適合加速配色、背景、字體與裝飾探索。WebGradients、Blobs、Image Palette、Font Preview 都能省時間,但最後仍要回到品牌一致性與中文字體可讀性。
WebGradients:快速產生背景漸層
WebGradients 的用途是提供現成漸層背景,適合活動頁、Landing Page、視覺探索與簡報封面。它適合視覺設計師快速試氣氛,不適合直接把整個品牌感交給模板。外掛頁顯示免費,但更新時間較早,2026 使用前要確認是否仍能正常執行。替代方案是 Mesh Gradient、Coolors 或自己建立品牌漸層樣式。
Blobs:適合做輕量裝飾圖形
Blobs 用途是產生有機形狀,適合做背景塊、插圖底座、空狀態裝飾。它適合 UI 視覺設計師在早期探索版面層次時使用,特別是教育、生活、活動頁。成本上外掛頁顯示免費;但裝飾圖形很容易讓版面變得模板化。替代方案是 Get Waves、Blobmaker 或手動畫向量形狀。
Image Palette:從圖片抓主要色彩
Image Palette 的用途是從選取圖片擷取 5 個主要色彩,適合品牌 moodboard、攝影風格延伸、活動視覺配色。它適合有參考圖片但還沒整理色票的人。免費提醒是外掛頁顯示免費,但它使用演算法估算主要色,結果不一定等於圖片中的精確 HEX。替代外掛是 Coolors、Palette 或 Figma 原生取色器。
Font Preview:快速比較字體可讀性
Font Preview 用途是預覽字體,適合早期比較英文字型與標題語感。但 2026 要先看 Figma 原生字體預覽是否已足夠,因為外掛頁已標示多數需求可由原生功能取代。台灣設計稿更重要的是中文字體可讀性,尤其是 14 到 16px 的手機內文、繁體標點、數字與英文混排。替代方案是 Figma 原生 Font Library、團隊共享字體規範與實機截圖檢查。
視覺外掛的風險:不要讓模板感蓋過品牌感
視覺外掛最容易讓設計變快,也最容易讓設計變像別人。我的判斷是:配色、漸層、blob、插圖只能拿來探索,不該成為品牌決策本身。若你正在做商業網站,先定義品牌色、文字層級、按鈕狀態與圖片方向,再用外掛補速度;如果反過來,最後常會得到好看但沒有記憶點的設計稿。
UX 流程、Wireframe 與原型外掛推薦
UX 流程類 Figma Plugin 最適合用來溝通頁面關係、線框稿與 prototype,不適合取代研究、訪談與產品判斷。Autoflow、Wireframe Designer、Mockup 類外掛要放在討論前的整理階段。
Autoflow:快速畫出頁面流程
Autoflow 的用途是快速連接兩個 frame、物件或流程節點,適合 UX flow、網站架構圖、頁面跳轉圖。它適合產品設計師、PM 與需要在會議前整理流程的人。免費限制要看外掛頁,目前常見資訊是免費額度後可能需要付費解鎖。替代方案是 FigJam、Flowkit 或 Figma Prototype 連線。
Wireframe Designer:初期線框稿更快成形
Wireframe Designer 或 Wireframe Pilot 類外掛用途是用模板或 AI 輔助產生初期線框,適合沒有時間從空白畫布開始的設計師。使用情境是需求討論、低擬真探索、頁面段落排序。成本上常見 AI 生成工具會有每日額度、登入或付費限制。替代方案是自己的 wireframe 元件庫、FigJam whiteboard 或站內 Figma 新手基礎建立的基本框架。
Mockup 類外掛:提案展示用,不是設計決策本身
Mockup 類外掛用途是把設計稿放進手機、筆電、包裝或場景圖,適合提案、作品集、社群貼文。它適合需要展示成果的人,不適合拿來決定資訊架構或互動邏輯。免費方案常有限制,商用授權也要看清楚。替代方案是 Clay Mockups 3D、Mockuuups Studio、Rotato 或手動建立展示框。
Landing Page / App Prototype 的外掛組合
Landing Page 可以用 Unsplash 找情境圖、WebGradients 試背景、Iconify 補 icon、Autoflow 標示轉換路徑。App Prototype 則建議用 Content Reel 填資料、Autoflow 畫 user flow,再用 Figma 原生 Prototype 做互動。這套流程的重點是讓討論有畫面,不是讓外掛替你決定使用者路徑。延伸可看 Figma Prototype 教學。
圖片處理、壓縮與網站速度相關外掛
圖片處理類 Figma 外掛要看輸出目的:TinyImage 適合壓縮與轉 WebP / AVIF,Remove BG 適合去背,Image Tracer 適合向量化。涉及網站速度時,Figma 只是前處理的一環。
TinyImage Compressor:壓縮圖片與轉 WebP / AVIF
TinyImage Compressor 的用途是直接從 Figma 匯出壓縮後的 JPG、PNG、SVG、WebP、AVIF 等格式,適合網頁設計師與交付前整理素材的人。使用時機是 hero 圖、卡片縮圖、插圖與 icon 匯出前。Hypermatic 官方頁提到 TinyImage 可壓縮多種格式並有免費試用,進階使用通常牽涉付費。替代方案是 Squoosh、ShortPixel、ImageOptim 或交給工程端圖片 pipeline。
Remove BG:快速去背,但要注意免費額度
Remove BG 的用途是透過 remove.bg API 在 Figma 內去背,適合商品圖、人物圖、活動素材與社群視覺。它適合臨時處理少量圖片,不適合大量商品圖全靠手動執行。官方流程要求註冊 remove.bg、取得 API key、安裝外掛後貼入金鑰;成本要看 remove.bg 額度與方案。替代方案是 Icons8 Background Remover、Figma 內建 AI 圖片工具或 Photoshop 類專業流程。
Image Tracer:把點陣圖轉向量的進階用途
Image Tracer 用途是把點陣圖轉成向量路徑,適合 Logo 草圖、簡單黑白圖、掃描圖或舊素材重整。它適合設計師需要快速取輪廓時使用,但轉出來的路徑常有雜點與多餘節點。成本與免費狀態要依你選用的 tracer 外掛確認。替代方案是 Illustrator Image Trace、Vectorizer 類工具或請設計師重繪。
什麼情況不要在 Figma 裡處理圖片
如果圖片需要精修膚色、大量商品批次、色彩管理、壓縮策略、CDN 尺寸規則,就不要全部塞在 Figma 裡做。我的判斷是:Figma 適合設計階段預覽與少量處理,正式網站素材仍應交給清楚的圖片流程。TinyImage 能幫助前期交付,但 Core Web Vitals、lazy loading、srcset、CDN 與實際頁面速度仍要在開發環境驗證。
網頁設計、設計系統與工程交付外掛推薦
交付類 Figma 外掛的核心是讓設計稿更接近工程可讀規格。Tokens Studio 管理 design tokens,CoDesign 類工具輔助標註與切圖,Measure / Annotate 類工具補足溝通資訊。
Tokens Studio:設計 token 與設計系統進階使用
Tokens Studio 的用途是管理顏色、字體、間距、圓角等 design tokens,適合有設計系統、多人協作或多品牌主題的團隊。使用時機是元件庫穩定後,需要把設計決策同步到工程語言。官方文件寫明外掛可免費開始,部分進階功能需要 Pro license。替代方案是 Figma Variables、GitFig、Style Dictionary 流程。延伸閱讀可看 Figma Design Token 指南。
CoDesign 類協作工具:標註、切圖與研發交付
CoDesign 類協作工具的用途是補上標註、切圖、研發交付與團隊討論,但在這篇 Figma 外掛推薦裡,它只能作為交付觀點,不應變成替代 Figma 的主軸。適合誰?產品團隊、設計主管、需要與工程師密集交付的設計師。成本與權限通常和團隊方案有關。替代方案是 Figma Dev Mode、Zeplin、Measure、Annotate 類外掛。
Measure / Annotate 類工具:適合補足交付資訊
Measure / Annotate 類外掛用途是補充尺寸、間距、狀態說明與設計註解,適合工程師需要在設計稿旁看到清楚條件時使用。什麼時候用?複雜表單、互動狀態、RWD 斷點、空狀態與錯誤狀態。免費或付費狀態依外掛而定。替代方案是 Figma 原生 annotations、Dev Mode、元件文件與站內 元件庫建立流程。
交付外掛的風險:不要把外掛輸出當成完整規格
交付外掛能把資訊攤開,但不會自動補齊產品邏輯。設計稿交付工程師前,仍要確認元件名稱、互動狀態、錯誤訊息、空資料、RWD、可及性與圖片尺寸。Tokens Studio 也不是裝了就有設計系統,它需要命名規則與團隊共識支撐。設計系統脈絡可接著看 設計系統指南。
AI / Design to Code 類 Figma Plugin 要不要裝?
AI / Design to Code 類 Figma Plugin 可以裝,但要把它當原型、參考與溝通工具,不建議直接輸出正式環境。html.to.design 適合匯入網站,Builder.io、Locofy、Anima 適合產碼草稿。
html.to.design:把現有網頁匯入 Figma 的實用情境
html.to.design 的用途是把現有網站匯入成可編輯 Figma 設計稿,適合網站改版、競品拆解、舊站重整與視覺盤點。官方文件說明它由 Figma plugin 與瀏覽器 extension 組成,可用 URL 匯入網頁。成本上要看匯入次數、團隊版與私人網站需求。替代方案是截圖加手動重建、Visily 類匯入工具或請設計師重畫乾淨架構。
Builder.io / Locofy / Anima:設計轉程式碼的適用邊界
Builder.io、Locofy、Anima 的用途是把 Figma to code 流程變成可討論的初稿,適合 prototype、概念驗證、工程估時與早期前端參考。它們不適合直接取代正式開發,因為真實產品還有元件架構、狀態管理、無障礙、效能、安全與後端串接。成本通常牽涉帳號、方案、匯出限制或 AI credits。替代方案是 Figma Dev Mode、手寫元件、Storybook 與設計系統文件。
| 工具 | 可以做什麼 | 適合用法 | 不要怎麼用 |
|---|---|---|---|
| html.to.design | 把網站匯入 Figma | 改版參考、競品拆解、內容盤點 | 不要把匯入稿當最終設計系統 |
| Builder.io | AI 輔助產生程式碼 | 原型、樣式參考、工程討論 | 不要直接上正式環境 |
| Locofy | 輸出多種前端程式碼 | 快速驗證畫面結構 | 不要略過工程重構 |
| Anima | 輸出 React、Vue、HTML 等 | 互動原型與 code preview | 不要期待一次輸出可維護架構 |
AI 外掛的驗收清單:工程師仍需重構與檢查
AI 外掛輸出後,至少要檢查六件事:語意 HTML、RWD、元件拆分、命名、無障礙、圖片與字體載入。工程師還要確認程式碼是否符合團隊框架、lint、測試與部署規則。我的觀察是,AI 產碼最適合縮短「從 0 到可討論」的時間,但從可討論到可上線,仍然是工程品質問題。
不寫成「一鍵取代前端工程師」
Figma AI 外掛與 Design to Code 工具可以提高溝通速度,但不要寫成一鍵取代前端工程師。設計稿只描述視覺結果,正式產品還有資料、狀態、錯誤處理、SEO、權限與效能。若團隊真的想導入,建議先拿一頁行銷頁或內部工具做試點,驗收後再決定是否放進交付流程。
依使用情境選外掛:4 套工作流程組合包
如果不想自己拼工具棧,可以照任務選 Figma 外掛組合:新手入門、UI 視覺、網頁設計交付、設計轉開發。每套 4 到 5 個外掛就夠,不需要全部安裝。
新手入門組:Iconify + Unsplash + Content Reel + WebGradients
順序建議先裝 Iconify 補圖示,再用 Unsplash 放入照片,接著用 Content Reel 填假資料,最後用 WebGradients 試背景。這套適合設計學生、作品集練習與剛轉職 UI 的人。成本低、上手快,但要記得把圖示與圖片風格收斂,否則作品會看起來像素材拼貼。
UI 視覺設計組:Blobs + Image Palette + Font Preview + Remove BG
順序建議先用 Image Palette 從主視覺抓色,再用 Font Preview 或原生字體功能比較標題與內文,接著用 Blobs 補背景層次,需要商品或人物素材時再開 Remove BG。這套適合活動頁、品牌探索、行銷視覺。成本風險主要在去背額度與素材授權,正式稿不要只依賴外掛結果。
網頁設計交付組:html.to.design + TinyImage + Autoflow + Tokens Studio
順序建議先用 html.to.design 匯入舊站或競品作參考,再用 Autoflow 標示頁面流程,視覺定稿後用 Tokens Studio 對齊設計 token,交付前用 TinyImage 輸出壓縮素材。這套適合網站改版、Landing Page、產品頁與內容網站。若團隊已有 Auto Layout 規範,交付品質會穩很多。
設計轉開發組:Builder.io + CoDesign + Tokens Studio
順序建議先用 Tokens Studio 把 token 整理乾淨,再用 Builder.io 產生可討論的程式碼草稿,最後用 CoDesign 類工具或 Dev Mode 補交付標註。這套適合產品團隊與工程協作者,不適合完全沒有設計系統的早期草稿。真正的重點是讓工程師看懂設計意圖,而不是把產碼外掛當交付終點。
Figma Plugin 安裝、管理與安全注意事項
Figma Plugin 可從 Resources、Plugins 或 Figma Community 搜尋並執行。安裝前要看維護狀態、收費模式、權限與資料安全,團隊檔案更要優先使用已核准外掛。
怎麼從 Resources / Plugins 搜尋外掛
在 Figma 檔案內可以打開 Resources,切到 Plugins 搜尋外掛名稱,也可以到 Figma Community Plugins 找外掛。找到後通常可以 Run 或 Save 到帳號。Figma 官方說明提到外掛可從 Community、檔案瀏覽器或檔案內執行,而且每次需要手動執行,不能在背景自動運作。
- 打開 Figma 檔案。
- 點 Resources 或使用 Actions 搜尋。
- 輸入外掛名稱,例如 Iconify 或 Tokens Studio。
- 點 Run 測試,常用再 Save。
- 若是團隊檔案,先確認組織是否有限制或核准清單。
怎麼判斷外掛是否還值得用
先看最後更新時間、安裝數、近期留言、支援聯絡方式與資料安全資訊。Figma 官方說明指出外掛是第三方程式,可能存取使用者與檔案相關資訊,也可能有網路存取範圍。我的做法是:會碰到圖片、客戶資料、程式碼、私有網站的外掛,一律比圖示或配色外掛更嚴格檢查。
免費、Credit、訂閱制要先看清楚
2026 年很多 Figma 外掛採用免費入口加站內購買、credit、月費或一次買斷。Autoflow 這類流程工具可能有免費額度,Remove BG 牽涉 remove.bg API credits,Tokens Studio 可免費開始但進階功能需 Pro,AI 產碼工具通常要登入與方案。不要在客戶專案進行到一半才發現輸出被額度卡住。
團隊檔案不要隨便安裝不明外掛
團隊檔案通常包含產品規劃、未公開 UI、客戶資料或商業資訊。Figma 官方說明提到組織管理員可以限制只能使用已核准外掛;這不是形式問題,而是交付風險控管。建議團隊建立一份可用外掛清單,分成素材、交付、圖片處理、AI 類,並定期檢查是否仍需要保留。
不建議優先安裝的外掛類型
不建議優先安裝的 Figma 外掛通常有四類:功能重複、太久沒更新、權限不清楚、輸出只適合展示。外掛越多,設計流程未必越快,常見結果是檔案與決策更混亂。
功能重複但沒有明確優勢
如果你已經有 Iconify,就不一定要再裝 5 個圖示外掛;如果 Figma 原生功能已能預覽字體,也不一定要優先裝 Font Preview。功能重複不是不能裝,而是要有明確理由,例如特定品牌圖示、特定格式匯出、特定交付規格。沒有理由的外掛只會讓搜尋與管理變慢。
太久沒更新或評價異常
外掛太久沒更新不代表一定不能用,但涉及 API、外部服務、匯出、登入、AI 或圖片處理時風險較高。檢查方式是看最後更新時間、近期留言、外掛是否仍可執行、作者是否有支援方式。我的判斷是,純配色或向量小工具可以容忍更新較慢;會把資料送到外部服務的工具,就要更保守。
要求過多權限但用途不清楚
如果一個簡單配色外掛要求大量網路存取、登入、上傳檔案,卻沒有清楚說明用途,就不建議放進團隊流程。Figma 官方安全說明已提醒外掛可存取檔案中的圖層、選取物件與使用者資訊。設計師不需要變成資安專家,但至少要能分辨「這個功能是否真的需要這些存取」。
只適合展示,不適合正式交付
Mockup、AI 產碼、快速 wireframe、插圖模板都很適合展示與討論,但不一定適合正式交付。提案漂亮不等於規格清楚,匯出的程式碼能跑不等於可維護。若外掛輸出會進入客戶交付、工程排程或正式網站素材,就要多一層人工檢查。這是工具管理,也是專業設計師該守住的品質線。
Figma Plugin 怎麼安裝?
可以從 Figma 檔案內的 Resources / Plugins 搜尋外掛,也可以到 Figma Community 的 Plugins 頁面搜尋。找到外掛後先 Run 測試,常用再 Save 到帳號。團隊或公司帳號要先確認管理員是否限制只能使用已核准外掛。
Figma 外掛是免費的嗎?
不一定。很多 Figma 外掛可以免費開始,但可能有免費額度、Credit、站內購買、月費或一次買斷。像 Iconify 官方說明為免費;Remove BG 需要 remove.bg 帳號與 API 額度;Tokens Studio 可免費開始,但進階功能需 Pro。
新手第一次用 Figma,最建議先裝哪幾個外掛?
先裝 Iconify、Unsplash、Content Reel、Autoflow,再依需求選 TinyImage 或 Remove BG。這 5 個能處理圖示、照片、假資料、流程線與基本圖片處理。新手不要一次裝太多,先把常用流程跑順比較重要。
Iconify、Material Symbols、Phosphor Icons 有什麼差別?
Iconify 最大優勢是圖示集多,適合作為第一個通用圖示外掛。Material Symbols 適合 Google / Android / Material Design 風格介面。Phosphor Icons 線條較細緻,適合 SaaS、內容產品與需要多線寬選擇的設計稿。真正選擇時要看風格一致性,不只看數量。
Remove BG 在 Figma 裡可以免費用嗎?
要看你使用的是哪一個去背外掛。Remove BG 官方流程需要 remove.bg 帳號與 API key,實際可用額度與費用依 remove.bg 帳號方案為準。若只是少量臨時去背,也可以比較 Icons8 Background Remover、Figma 內建 AI 圖片工具或其他免費去背外掛。
TinyImage Compressor 對網站速度真的有幫助嗎?
有幫助,但它只處理圖片檔案大小與格式輸出的一部分。TinyImage 可從 Figma 匯出壓縮圖片與 WebP / AVIF 等格式,對網站素材交付很實用。不過正式網站速度還要看圖片尺寸、CDN、lazy loading、srcset、快取與前端實作。
外掛裝太多會不會讓 Figma 變慢?
外掛通常需要手動執行,不會像背景程式一直跑,但裝太多會讓搜尋、選擇與團隊管理變慢。真正會拖慢工作的是外掛造成的檔案複雜度,例如過多未命名圖層、大量向量節點、重複素材與未整理的輸出物。
Figma 外掛可以商用嗎?圖片和圖示授權要注意什麼?
Figma Community 對免費與付費外掛有授權規則,但外掛內提供的圖片、圖示、插圖素材可能另有條款。商用前要檢查三件事:外掛本身授權、素材來源授權、客戶產業是否有額外限制。照片還要留意人物肖像、品牌 Logo 與敏感場景。
AI 轉程式碼外掛可以直接交給工程師上線嗎?
不建議。Builder.io、Locofy、Anima 這類工具可以產生原型或程式碼參考,但正式上線前仍要由工程師檢查元件架構、RWD、語意 HTML、無障礙、效能、安全與專案規範。它適合縮短討論時間,不適合跳過工程流程。
團隊共用檔案可以隨便安裝外掛嗎?
不建議。團隊檔案可能包含未公開產品、客戶資料、設計系統與商業資訊。外掛屬於第三方程式,使用前要看權限、網路存取、資料安全資訊與維護狀態。公司團隊最好建立核准清單,尤其是圖片處理、AI、匯入網站與 design to code 類外掛。
2026 還需要裝 Figma Plugin 嗎?Figma 內建功能會不會已經夠用?
仍然需要,但不需要裝很多。Figma 內建功能已經涵蓋字體預覽、Prototype、Dev Mode、Variables、AI 圖片工具等需求;外掛價值在於特定情境加速,例如大型圖示庫、圖片壓縮、去背、網站匯入、design tokens 與批次處理。
有沒有 20 個以上的免費 Figma 外掛延伸清單?
可以從這些方向延伸:Iconify、Material Symbols、Phosphor Icons、Boxicons、Unsplash、Pexels、Content Reel、Autoflow、Blobs、Get Waves、Image Palette、Coolors、WebGradients、Humaaans、Storyset、Clay Mockups 3D、Pixel Perfect、Batch Styler、Contrast、Lorem Ipsum 類外掛。安裝前仍要逐一確認 2026 的維護狀態、授權與是否仍免費。