(2026) Figma Plugin 推薦:36 個好用外掛整理,做社群圖、Mockup、動畫到設計交付都有
Figma Plugin(外掛,也有人叫插件)裝對了,重複的工作會少很多;裝錯了,圖層被批次改亂,或圖片被傳到你不知道的伺服器,都是常見狀況。這篇整理 36 個外掛與 Figma 整合工具,前五組給做社群圖、平面設計、簡報的人,最後一組是產品團隊才需要的設計系統與交付工具,有特別標出來喔!
作者:郭政佑 Kevin · ·
打開 Figma Community 想找一個去背外掛,搜尋結果會跳出一整排:Remove BG、Icons8 Background Remover、Free BG Remover、Bgwrap⋯⋯名字都差不多,光看名字很難知道差在哪。
所以挑外掛前,我自己會先確認三件事:
(1) 它解決的是不是我每週都在重複的步驟
(2) 它會不會把我的圖片、文字傳到別的伺服器
(3) 免費能做到哪裡,要付費的是哪一段
今年還多了一件要先確認的事!6 月 Config 之後,Figma 內建了 Shader 特效和 Figma Motion 動畫,以前要另外裝外掛才做得到的網格漸層、半色調、簡單的進場動畫,現在有一部分原生就有了。所以這次更新,除了補上 7 到 9 月新上架的外掛,也會先講哪些效果不用再另外裝。
這篇整理 36 個 Figma 外掛,我按照做圖的流程分成六組:
❶ 素材:去背、圖示、插圖、圖表
❷ 版面特效與出圖檢查
❸ Mockup、簡報與 PDF
❹ 動畫與互動原型
❺ AI 生圖與設計稿轉程式碼
❻ 產品團隊常用:設計系統、交付與測試
第六組是給有工程師協作的產品團隊用的,如果你主要做社群圖、平面設計或簡報,可以依需要挑著看!
*備註:如果你想自己做外掛,我之前靠 AI 做了 4 個 Figma 外掛,從寫程式到上架的過程都寫在〈程式小白,靠 AI 成功製作了 4 個 Figma Plugin〉。
先看分類:不要看到推薦就全裝
分組 | 收錄外掛 | 適合誰 |
|---|---|---|
素材:去背、圖示、插圖、圖表 | Icons8 Background Remover、Unsplash、Keyline Icons、Blush、UI Faces、Chart | 做社群圖、平面設計 |
版面特效與出圖檢查 | Perspectivo、Sticker maker、Gridcraft、Framedrop、Stark、Automator | 做社群圖、平面設計、Logo |
Mockup、簡報與 PDF | Mockuuups Studio、Artboard Studio、Pitchdeck、Featherweight、Claude Design to Figma | 做作品集、提案、簡報 |
動畫與互動原型 | SVGator、Figmotion、Jitter、LottieFiles、ProtoPie | 做動態貼文、網站動效、互動原型 |
AI 生圖與設計稿轉程式碼 | Magnific、Locofy、Builder.io、Figma to Webflow、Codia AI、Figma to Lovable | 要生圖修圖、要把設計做成網頁 |
【產品團隊常用】設計系統、交付與測試 | Tokens Studio、Material Theme Builder、Specify、Supernova、Zeroheight、Zeplin、Maze、Useberry | 有工程師協作的產品團隊 |
各外掛的進階功能、團隊協作、高解析匯出多半要付費,方案也常變,裝之前看一下官網的價格頁。下面每個外掛只寫它自己特別要注意的地方。
安裝 Figma Plugin 前先問 5 件事
這個外掛解決哪個重複任務?如果只是偶爾用一次,可以先不裝。
它會不會讀取設計稿內容、上傳圖片、同步 token 或連到第三方服務?
團隊有沒有命名、元件、樣式規則?沒有規則,自動化只會加速混亂。
免費功能夠不夠?團隊協作、匯出、報告、API 往往在付費方案。
外掛輸出的素材、程式碼、Mockup、人物圖,有沒有另外的授權限制?
先看 Figma 內建:2026 年新增的 Shader 與生成式外掛
裝外掛之前,可以先看看原生功能夠不夠用。
官方 Shader(特效與填色):Figma 團隊做了 19 種特效,像 Dither 抖動、Halftone 網點、Bloom 光暈、Pixelate 像素化、Warp 扭曲,另外還有 9 種填色,包含 Mesh Gradient 網格漸層、Clouds 雲、Water Caustics 水波光影。目前是 open beta,所有方案、有檔案編輯權限就能免費用。
生成式外掛(Generative plugins):用對話告訴 Figma agent 你想要什麼小工具,它幫你生成一個可以在檔案裡用的外掛,做好的也能發布到 Community 給別人用。Config 當天就有第一批社群作品上架,例如把 3D 形狀轉成 2D 向量的 3D-to-2D perspective、排 Bento 格狀版面的 Bento grid builder、把圖片轉成 ASCII 字元畫的 ASCII art generator、做逐格動畫的 Flipbook、在兩個向量之間做漸變的 Vector path blender。8 月底也有人做了讓物件沿路徑移動的 Motion path。Figma 官方另外做了 Mock Data Lab,可以用一個版型批次填入假資料。
生成式外掛目前是 open beta,所有方案都能用。用 agent 生成或修改外掛時會扣 AI 點數,執行別人做好的外掛不扣。想看完整的 Config 2026 更新,可以看〈Figma Config 2026 重點功能〉。
素材:去背、圖示、插圖、圖表
做社群圖最常卡的是素材:照片要去背、畫面缺 icon、需要一張插圖或假頭像。這組外掛讓你不用切出 Figma 找素材。要注意的是授權,尤其人物圖和插圖,免費不一定能商用。
1. Icons8 Background Remover
一次選好幾張圖、按一下就去背,輸出保留原圖尺寸。Figma 外掛版標示完全免費、不用註冊、不限張數;同一家的網頁版只有 3 張免費,兩者別搞混。想比較更多 AI 去背工具,可以看〈AI 設計素材工具整理〉。
價格:免費(Figma 外掛版)|官網|在 Figma 安裝
2. Unsplash
老牌必裝,在 Figma 裡搜 Unsplash 的照片、點一下就放進選取的圖框。Unsplash 的照片可以免費商用,但照片裡的品牌、人物肖像還是要自己留意。要找更多免費圖庫,可以看〈免費圖庫指南〉和〈圖庫網站大全〉。
價格:免費|官網|在 Figma 安裝
3. Keyline Icons

1,000 個圖示,有線條、雙色、實心幾種樣式,圓角和直角可以切換,每個都做成 component,換樣式不用重拉。MIT 授權,商用免費,也不用標出處。更多圖示庫整理在〈Icon 圖示資源〉。
價格:免費|官網|在 Figma 安裝
4. Blush

一套可以調整的插畫人物與場景,換姿勢、換配色都在外掛裡完成。不同插畫家的插畫套件授權不一樣,商用前看清楚方案。想找免費插畫,可以看〈6 個免費插畫素材圖庫〉和〈插圖素材網站〉。
價格:免費+付費|官網|在 Figma 安裝
5. UI Faces

幫介面設計稿補上假頭像。現在收的是 AI 生成的人像,不是真人照片,用在 mockup 很方便。正式對外的作品要看它的使用條款;需要真實、多元族裔的人像素材,可以看〈多元族裔與代表性人像素材〉。
價格:免費|官網|在 Figma 安裝
6. Chart

把表格或 CSV 資料貼進去,就能生成長條圖、折線圖、圓餅圖等 20 種圖表,資料改了可以重新套用,不用整張重畫。匯入的數字記得自己核對一次。
價格:免費+付費|官網|在 Figma 安裝
版面特效與出圖檢查
素材備齊之後,這組處理「讓畫面好看一點」和「出圖前確認沒問題」。前四個都是 2026 年下半年才上架的新外掛,最後兩個是用了很久的老牌工具。
7. Perspectivo
把文字、圖形或整個 frame 做出 3D 透視傾斜,拉滑桿就能即時預覽。跟一般透視外掛最大的差別是做完仍是向量,不會變成圖片,之後還能改字。做海報、立體標題很好用。
價格:免費|在 Figma 安裝
8. Sticker maker
把 logo、插圖或一行字做成貼紙:沿著輪廓描白邊,還能加雷射膜、捲角、紙紋,輸出高解析 PNG 放回畫布。做社群貼文的裝飾元素很快。
價格:免費|在 Figma 安裝
9. Gridcraft
做 logo 提案時用的三種網格:構成網格(顯示圓弧、節點、輔助線)、安全留白網格,以及提案展示版面。以前這些都要手動畫輔助線。做品牌識別的話,也可以看〈Logo 設計參考網站〉。
價格:免費|在 Figma 安裝
10. Framedrop
選好做完的廣告圖或限動,它會畫出該平台的安全區,也就是會被 App 介面蓋住的地方。也可以從內建的 60 種尺寸開新版面。剛上架不久、使用的人還不多,可以先當輔助。各平台尺寸也可以查創作邦的〈社群尺寸表〉,素材則看〈社群貼文設計素材〉。
價格:免費|在 Figma 安裝
11. Stark
檢查文字和背景的對比度夠不夠、色盲使用者看不看得清楚。上線給大眾看的設計,交付前跑一次。挑配色時可以搭配〈配色網站與色票工具〉。
價格:免費+付費|官網|在 Figma 安裝
12. Automator
把常做的一串操作,像改名、排列、換色、匯出,錄成一個按鈕,之後一鍵重跑。批次處理前先存一份版本,改壞了才回得去。外掛從 2023 年後就沒有再更新,裝之前先試一下還能不能正常用。
價格:免費+付費|在 Figma 安裝
Mockup、簡報與 PDF
作品集、提案、社群宣傳圖常要把設計放進手機或電腦畫面裡,或是整理成簡報和 PDF。這組外掛讓你不用切到別的軟體排版。免費和付費的授權常常不一樣,商用前看清楚。
13. Mockuuups Studio
選好畫面,套進手機、平板、電腦的實景樣機,適合 App 截圖和行銷圖。不需要在 Figma 裡操作、只想下載樣機檔的話,可以看〈Mockup 網站與樣機素材〉。
價格:免費+付費|官網|在 Figma 安裝
14. Artboard Studio
跟 Mockuuups 比,它的場景更廣,除了裝置,還有包裝、服飾、品牌物件,也能做成動態樣機。要做產品截圖或 App Store 圖,另外整理在〈產品截圖與 App Mockup 工具〉。
價格:免費+付費|官網|在 Figma 安裝
15. Pitchdeck Presentation Studio
把 Figma 畫面轉成可以播放、加轉場的簡報,也能匯出 PowerPoint 或 PDF。簡報模板和素材整理在〈簡報設計素材與模板〉。
價格:免費+付費|官網|在 Figma 安裝
16. Featherweight
外掛作者提到,Figma 內建的 PDF 匯出會把文字轉成外框,文字多的文件檔案很大,也不能選取和搜尋。這個外掛保留真正的字型,還能把檔案壓到你指定的大小。做履歷、提案 PDF 的時候用得到。中文字型的嵌入效果建議先用自己的檔案試一次。
價格:免費|在 Figma 安裝
17. Claude Design to Figma
把 Claude Design 做好的簡報匯入 Figma,每一頁變成一個 frame,文字和圖形都能再編輯。要搭配同一位作者的 Chrome 擴充功能才能用,這是第三方開發,不是 Anthropic 官方。想先了解 Claude Design,可以看〈Claude Design 完整介紹〉。
價格:免費|在 Figma 安裝
動畫與互動原型
Figma 在 2026 年 6 月推出內建的 Figma Motion(open beta),把時間軸直接放進設計檔,簡單的進場、循環動畫可以先用原生功能做,官方的動畫範本整理在創作邦〈Figma Motion 範本展示〉。下面這幾個外掛,適合原生功能還做不到的情況:要匯出 SVG 或 Lottie 給網站用、要做社群短動畫、要做高互動的原型。
選動畫工具前,先確認它能匯出你要的格式:GIF、MP4、Lottie,還是程式碼。
18. SVGator
把 Figma 的向量圖做成 SVG 動畫,放在網站上檔案小、放大也不會糊。上線前要在不同瀏覽器測一下效能。
價格:免費+付費|官網|在 Figma 安裝
19. Figmotion
在 Figma 裡用時間軸做動畫,匯出 GIF、影片或程式碼。免費版就能用全部動畫功能,但輸出上限 720p。有了原生 Figma Motion 後,它比較適合需要匯出動畫程式碼的情況。
價格:免費+付費(免費版輸出 720p)|官網|在 Figma 安裝
20. Jitter

把 Figma 畫面匯入 Jitter,做社群用的短動畫和動態貼文,模板多、上手快。動畫在 Jitter 網站裡編輯,不是在 Figma 裡。
價格:免費+付費|官網|在 Figma 安裝
21. LottieFiles
找現成的 Lottie 動畫放進設計稿,也能把 Figma 做的動畫匯出成 Lottie 給網頁或 App 用。最近新增了 Figma Motion 匯出,用原生時間軸做好的動畫,可以透過這個外掛轉成 Lottie 檔。
價格:免費+付費|官網|在 Figma 安裝
22. ProtoPie
Figma 的原型做不出來的互動,例如感測器、條件判斷、真實的輸入框,匯入 ProtoPie 後可以做到,還能在手機上實際操作。匯入後的互動要在 ProtoPie 裡重新設定。
價格:免費+付費|官網|在 Figma 安裝
AI 生圖與設計稿轉程式碼
這組分兩類:Magnific 是在 Figma 裡生圖、修圖;其餘五個是把設計稿轉成網頁或 App 的程式碼。轉出來的都是初稿,RWD、語意 HTML、無障礙和程式碼好不好維護,還是要工程師看過。Figma 自己也在做這件事,Config 2026 發表的 Code Layers 讓程式碼直接成為畫布上的圖層,目前要排候補名單。
23. Magnific
Magnific(原 Freepik)官方外掛,在 Figma 裡生圖、生成可編輯向量、用 Magnific 的放大功能提升解析度,也能去背、重新打光、插入素材圖,可以單張或批次處理。外掛免費安裝,但要登入 Magnific 帳號,每次使用都會扣帳號點數,就算方案寫無限量也一樣。它是 Config 之後使用人數最多的新外掛之一。Magnific 的完整用法可以看〈Magnific(原 Freepik)使用指南〉。
價格:免費安裝,使用扣點|官網|在 Figma 安裝
24. Locofy.ai
把 Figma 畫面轉成 React、HTML 等前端程式碼,適合產品 MVP 和前端原型。轉之前把圖層命名、Auto Layout 整理好,結果會乾淨很多。
價格:免費+付費|官網|在 Figma 安裝
25. Builder.io
把 Figma 畫面轉成 React、Vue、Tailwind 或 HTML 初稿。跟 Locofy 比,它更偏行銷頁和內容型網站,也能接自己的元件庫。
價格:免費+付費|官網|在 Figma 安裝
26. Figma to Webflow
Webflow 官方外掛,把 Figma 的網站設計搬進 Webflow 繼續做。搬過去之後,class 命名、RWD 和互動仍要在 Webflow 裡整理,網站上線也要付 Webflow 的方案。
價格:免費+付費(網站上線需 Webflow 方案)|官網|在 Figma 安裝
27. Codia AI
用 AI 把截圖或設計稿轉成可編輯的 Figma 圖層,也能轉成程式碼。同一家另外有 Psd2Figma,可以把 Photoshop 檔轉成分層的 Figma 檔,收錄在創作邦〈Figma 插件資源〉。
價格:免費+付費|官網|在 Figma 安裝
28. Figma to Lovable
Lovable 官方外掛。選好 frame 按匯出,就會轉成 React+Tailwind 元件送進 Lovable,Figma 的 variables 也會變成 Tailwind 的設定,接著可以在 Lovable 裡用對話把它做成能用的 App。
價格:免費安裝(Lovable 依自家方案計費)|官網|在 Figma 安裝
【產品團隊常用】設計系統、交付與測試
如果你主要做社群圖、平面設計或簡報,這組可以挑著看。 這 8 個是給有工程師協作的產品團隊用的,其中 Specify、Supernova、Zeroheight、Maze、Useberry 是有 Figma 整合的外部服務,不是裝在 Figma 裡的外掛。導入前,團隊最好先定好元件和 token 的命名規則,工具不會幫你解決命名混亂。
工具 | 做什麼 | 價格 | 連結 |
|---|---|---|---|
29. Tokens Studio | 把顏色、字級、間距存成 token,同步到 GitHub 給工程師用 | 免費+付費 | |
30. Material Theme Builder | Google 官方工具,用一個主色產生整套 Material 3 色彩主題;非 Material 風格的品牌要自己調 | 免費 | |
31. Specify | 把 token 從 Figma 同步到多個平台和程式碼庫 | 免費+付費 | |
32. Supernova | 把設計系統接到文件和工程流程,適合已經有成熟設計系統的團隊 | 免費+付費 | |
33. Zeroheight | 把 Figma 元件整理成團隊都看得懂的設計系統網站 | 免費+付費 | |
34. Zeplin | 設計交付與規格標註;團隊如果已經用 Figma Dev Mode,先確認是不是重複 | 免費+付費 | |
35. Maze | 把 Figma 原型丟給使用者測試,產出量化報告;先把要測的任務寫清楚 | 免費+付費 | |
36. Useberry | Maze 的替代選項,除了原型測試,也能做問卷和熱點圖 | 免費+付費 |
創作邦自己做的 Figma 外掛
我自己也用 AI 做了幾個 Figma 外掛,都可以免費安裝:
Batch Export Frames:一次選好多個 frame 批次匯出,有縮圖預覽,點縮圖可以直接跳到畫布上的位置。在 Figma 安裝
IG Multi Image Splitter:把長圖切成 IG 輪播圖的每一張。在 Figma 安裝
更多創作邦收錄的 Figma 外掛,包含文字變形、玻璃質感、雜訊等特效類工具,整理在〈Figma 插件資源〉。
外掛安全與授權檢查清單
只裝常用的外掛,半年沒用的可以移除。
會上傳圖片、讀取文字、同步 token 的外掛,先看它怎麼處理資料。
外掛產出的圖像、Mockup、頭像、AI 內容,要另外查素材授權。
設計稿轉出來的程式碼只能當初稿,正式上線前要工程師審過。
導入批次整理或自動化外掛前,先定好檔案的命名和元件規則。
FAQ
Q1:Figma Plugin 免費嗎?
大部分可以免費安裝,但高解析匯出、團隊協作、報告、API 和 AI 點數常要付費。例如 Figmotion 免費版的輸出上限是 720p,Magnific 外掛本身免費,每次生圖都會扣帳號點數。
Q2:Figma 外掛怎麼安裝?免費版 Figma 可以用嗎?
在 Figma Community 找到外掛,按「Open in...」或「Try it out」就會加進你的外掛清單,之後在檔案裡從選單的 Plugins 叫出來。免費版 Figma 也可以用,限制多半來自外掛自己的付費方案。
Q3:外掛可以存取設計稿嗎?
會的,有些外掛會讀取圖層、文字、圖片或 token,有些還會把資料傳到第三方服務處理,像去背和 AI 生圖類。安裝前看它要求的權限,客戶案和還沒公開的產品更要小心。
Q4:Figma 已經內建 Motion 和 Shader,還需要裝特效和動畫外掛嗎?
看你要做到多細。簡單的進場動畫、網格漸層、抖動、半色調效果,原生功能已經做得到,先試原生;要匯出 SVG 動畫、Lottie,或做社群短動畫,還是 SVGator、LottieFiles、Jitter 這類外掛比較方便。原生功能的開放狀態可以看〈Figma Config 2026 重點功能〉。
Q5:哪些 Figma 外掛適合做社群圖?
去背用 Icons8 Background Remover,缺照片用 Unsplash,要放手機或電腦樣機用 Mockuuups Studio,缺插圖用 Blush,要把數據做成圖表用 Chart,檢查限動安全區用 Framedrop。標題字可以從創作邦的〈免費字型庫〉挑,商用授權整理在〈免費字體大補帖〉;尺寸不確定的話先查〈社群尺寸表〉。
Q6:AI 外掛適合做什麼?
本篇裡用到 AI 的主要有兩類:轉程式碼(Locofy、Codia AI、Builder.io)和生圖修圖(Magnific)。Figma 自己也在 Config 2026 推出了用對話生成外掛的功能。這些產出都要自己再檢查一次,特別是客戶資料有沒有被送出去、生成素材能不能商用。
Q7:Figma to code 外掛可以直接上線嗎?
不建議。它們適合做前端初稿或行銷頁雛形,正式上線前,RWD、效能、無障礙和程式碼結構都要工程師檢查。
Q8:可以自己做 Figma 外掛嗎?
可以,而且門檻比以前低很多。一種是用 Figma 的生成式外掛,用對話描述需求,Figma agent 幫你做出來;另一種是用 Cursor、ChatGPT 這類 AI 工具寫程式,再發布到 Community。我就是用後者做出 4 個外掛,完整過程在〈程式小白,靠 AI 成功製作了 4 個 Figma Plugin〉,上架的流程和審核要注意的地方在〈Figma Plugin 上架全攻略〉。
延伸整理
*重要補充:本文是設計資源整理,不取代各網站最新授權條款,另各外掛的價格和授權變動很快,同樣也要到官網確認最新資訊喔!