PixelCake PixelCake
設計工具與工作流程

figma plugin推薦:2026值得先裝的Figma外掛清單

想找figma plugin推薦,可以先從必裝、看需求、進階三種情境挑選。整理Iconify、Unsplash、Content Reel、Autoflow、TinyImage等Figma 外掛推薦重點,並提醒2026年常見成本、授權與維護狀態,幫設計師少裝用不到的工具。

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 選一個。這組能覆蓋圖示、圖片、假資料、流程與基本圖片處理。

  1. Iconify:圖示最快補齊

    Iconify 適合所有 Figma 新手,解決的是「找不到可用圖示」的問題。做按鈕、側邊欄、表單狀態、空狀態時都會用到。官方文件標示可匯入大量開源 SVG 圖示並且免費,安裝後可以直接搜尋關鍵字。替代外掛是 Material Symbols、Phosphor Icons、Boxicons;我的建議是先用 Iconify,等品牌風格確定後再縮小圖示系統。

  2. Unsplash:快速放入情境圖片

    Unsplash 適合做 Landing Page、活動頁、作品集與 App 情境稿的人。它解決的是「版面看起來太空」的問題,什麼時候用最適合?早期視覺探索、客戶提案、產品情境示意。免費與商用授權仍要回到 Unsplash 與圖片作者條款確認。替代外掛可用 Pexels 或直接使用品牌自有圖庫。

  3. Content Reel:假文與假資料更像真產品

    Content Reel 適合產品設計師、UI 練習與作品集整理。用途是把假姓名、Email、電話、頭像、短文案塞進設計稿,避免每個卡片都寫 Lorem ipsum。它在列表、會員頁、表單、評論區最有感。官方頁提到可建立自訂文字與圖片內容,部分功能會牽涉登入或站內購買。替代方案是 Faker 類資料外掛或自己建立內容元件庫。

  4. Autoflow:流程線與 user flow 快速完成

    Autoflow 適合 UX 流程、頁面轉換圖與簡報前整理。用途是選兩個物件後快速畫出連接線,比手動畫線更穩。它不是 UX 判斷工具,流程對不對仍要靠你理解任務、路徑與例外狀態。外掛頁顯示免費可用到一定流程數,超過後可能付費。替代方案是 FigJam connector、Flowkit 或 Figma 原生連線。

  5. 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、檔案瀏覽器或檔案內執行,而且每次需要手動執行,不能在背景自動運作。

  1. 打開 Figma 檔案。
  2. 點 Resources 或使用 Actions 搜尋。
  3. 輸入外掛名稱,例如 Iconify 或 Tokens Studio。
  4. 點 Run 測試,常用再 Save。
  5. 若是團隊檔案,先確認組織是否有限制或核准清單。

怎麼判斷外掛是否還值得用

先看最後更新時間、安裝數、近期留言、支援聯絡方式與資料安全資訊。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 的維護狀態、授權與是否仍免費。