資深網頁設計師常用的 Figma Plugin 推薦 2026

資深網頁設計師推薦的 Figma 外掛清單，大幅提升網頁視覺設計過程的執行效率、團隊協作的順暢、降低時間與跨部門的溝通成本，而且外掛的免費版本通常就夠用了！完全適用對象為網頁設計師、UIUX 設計師或本來就是用來專案管理、腦力激盪發想、行銷工作的使用者等

「實戰經驗分享，非只是網路資料整理」- Irving 爾文

現今使用 Figma 進行網頁設計或 UI 介面設計是相當主流且普遍的，我通常搭配用 Photoshop 處理影像合成或圖片色調、Illustrator 用來製作編輯品牌標誌 Logo 或小圖示 Icon、向量插圖等，匯出圖檔後再匯入到 Figma 進行網頁排版。此篇分享我在執行網頁設計時常用的 Figma 外掛，大大提升執行效率、降低時間成本。若想進一步了解網頁設計的基本概念與實作經驗交流與分享，無論是行銷人、工程師、平面設計師等其他領域的人想要了解更多「網頁設計」都歡迎加入網頁設計的學習 Line 社群。

🍉 若你還沒有 Figma 帳號，可以前往註冊免費帳號，免費版就很好用了！我自己試用了好一陣子，最後直接升級為 Professional 版本，解開頁數與檔案限制，目前完全成為我的設計專案中心。

Photoshop 或 Illustrator 這兩套軟體發展是越來越強大，但也越來越「肥大」，交換檔案時還不時會遇到「掉圖、掉字體」的問題，無論是開個檔案或團隊協作是相當麻煩且瑣碎；而 Figma 的出現，立即解決了「團隊遠端討論、線上即時協作、操作靈敏、使用體驗極佳」，尤其是完全為了 UIUX 設計而生的功能與格式，加上持續擴大的外掛資源，可說是網頁設計師或 UIUX 設計師的最佳工具。

以下我用影片搭配文字快速簡介一下 13 款 Figma 外掛，未來會持續新增內容，主要紀錄在此頁中，歡迎蒐藏此頁（Mac：command + D、Windows：Ctrl + D）並隨時回來瀏覽 ^^

外掛目錄

• PDF 檔匯入
• 網頁截圖
• 圖片修正
• 圖層管理
• 圖庫匯入
• 擷取顏色
• 色碼顯示
• 圖示 Icon
• 品牌 Logo
• 背景圖
• 漸層色
• 示意圖和示意文字

PDF 檔匯入

外掛名稱

PDF to Figma

外掛簡介

Figma 支援 PDF 文件的拖拽匯入，匯入後會轉成圖片。

使用情境

因為遇過不少甲方（品牌方、客戶）或公司內部的其他部門的人會傳有關「網站地圖、網頁視覺或排版 Wireframe 線框圖」的 PDF 檔案給網頁設計師或工程師，這對我來說使用上相當不便。身為網頁設計師，一邊要開啟 Figma，一面要開啟 PDF 檔查看需求細節，兩者切換挺麻煩的。而用 PDF 軟體放大縮小也很卡、不順暢，時常令人懊惱，所以透過此外掛 PDF to Figma 可以將「需求檔」直接匯入 Figma，縮放瀏覽超順暢。

若發現 PDF 匯入時卡住了，外掛會提示說「檔案過大之類的訊息」，那應該是 PDF 的寬高像素真的太太太大了，Figma 也會限制以防當掉，這時候我改將 PDF 用 Photoshop 開啟，再快速切成兩三個部分將 PDF 圖檔複製貼上到 Figma 中。

若希望匯入 PDF 後還可以編輯「文字」，那可以改用這款 Figma 外掛：pdf.to.design – divRIOTS，另一個選擇是直接使用 Canva 的免費 PDF 線上編輯器 Free Online PDF Editor

小訣竅：若想將 Figma 中的這些畫面「合併成一個 PDF 檔」輸出，那該怎麼做呢？首先須將你的內容全部分別設定在 Frame 中並依序命名編號，並全選，然後點擊工具列的 File > Export Frames to PDF，完成！

---

網頁截圖

外掛名稱

html to design

外掛簡介

將任何網站轉換為完全可編輯的 Figma 設計。利用現有網站，將其 HTML 匯入到 Figma 中，以便開始您自己的設計，而無需從頭構建每個元素。

使用情境

我們在研究其他競品網站或蒐集相關的優質網站頁面設計時通常就安裝瀏覽器 Chrome 的擴充套件如 捕捉網頁擷圖- FireShot 去抓整頁的圖，但有時因頁面太長，所以即使整頁截圖到了，但畫質解析度變差了。後來發現 html to design 外掛不僅能將超長的網頁擷取出來，直接存在 Figma 檔案中，網頁中有圖片或圖示都是可以獨立選取使用，亦即「順便切好圖」，這太神了！

網頁中若有影片或動態特效如視差滾動等會很有可能無法截圖到，這時候就只能將該段回去使用 Chrome 擴充套件截圖了。解決方案就多種方式綜合使用、互補有無。免費方案每個月可以「使用 10 次」，所以若用完了，需要等下個月重新開始計次，或，用另一個 Figma 帳號繼續使用 ^_^

---

圖片修正

外掛名稱

Pixel Cleaner

外掛簡介

一個點擊就可以清除小數點後所有數字，包括自動佈局、排版、位置、尺寸等。

使用情境

很多人應該有遇過將圖片上傳到網站時，圖片有莫名的白邊出現，然後回去檢查圖片時又找不出原因，其實出現圖片白邊的原因有幾種可能：圖片本身的邊緣有一條 1 像素的淺灰色、圖片在原始檔中長寬有小數點、圖片在原始檔中 XY 位置有小數點等。發現問題後，又要將圖片一張一張丟回 Photoshop 細修後匯出，很麻煩對不對？那有沒有一次解決這些所有問題的方式？使用 Figma 外掛：Pixel Cleaner 一鍵消除所有圖檔方方面面的小數點問題，而其中「圖片本身邊緣的淺灰色 1 像素」這問題就得手動移除，其他秒殺解決。

若只有修正一兩張圖片可能無感，但若一次要修十幾二十張圖片以上，那你會發現，在 Figma 中可以一次選取所有圖片，按下外掛按鈕一次完成修正，當下節省了至少半小時以上乏味的重複動作與時間。

---

圖層管理

外掛名稱

Sort Layers

外掛簡介

按照名稱或位置對圖層進行排序。

使用情境

有關圖片排列整理，我最常使用的情境有兩種：一來我將每個網頁切圖後的所有圖片需要一次命名與由上到下或由左到右排序；二來我得將數十張攝影素材直接匯入 Figma 中分類後，也是需要分區塊排序與匯出使用。光這兩種需求，Sort Layers 就幫了我很大的忙。我以往還懶得找解決方案就手動慢慢排序，其實有夠浪費青春一大把，這類重複動作的任務真的要能自動化才是王道啊！

圖層命名小訣竅：先搭配 Sort Layers 將檔案排序後，選取相關的圖層，在「圖層上方」按右鍵跳出選單後選擇「Rename」，在 Rename to 的欄位上填上檔案名稱，名稱接著可以點擊 Number ↑ 或 Number ↓ 新增數字編號遞增或遞減排序。

有關圖層命名設定可以參考官方文件 Rename Layers – Figma，通常 Figma、Sketch 等網路內容比較偏向手機應用程式的行動介面設計或非常 UIUX 領域的格式，而我更專注在「網頁設計與 SEO」時的網站實務，不同領域有不同需求的產出與作法，有關網頁圖片如何優化可閱讀這篇文章：如何製作與優化網頁圖片 SEO

---

圖庫匯入

外掛名稱

Unsplash

外掛簡介

在設計中插入來自 Unsplash 的精美圖像。

外掛名稱

Pixels

外掛簡介

直接從 Pexels 添加完全免費的圖像到您的設計中。

使用情境

進行網頁視覺設計或撰寫部落格文章時常會需要用到免費可商用圖庫，網路上熱門圖庫不少，這邊列出我自己滿喜歡的、可以提升文章美感與質感的 Unsplash、Pixels，國內外品牌網站部落格其實也滿常見。

以往在進行網站專案時，網頁設計排版會需要文案和圖片素材、撰寫部落格時文章也會有圖文，於是將文案存在 Word 或 Google Doc 中，然後圖片另外存放本機或雲端資料夾。但自從有了 Figma 後，我的作法改成 Figma 存放統一彙整圖片，必要的話還可以試排版一下或調整圖片尺寸與裁切。直接透過此外掛將我常用的 Unsplash、Pixels 圖庫在 Figma 中直接匯入相當便利，不用切換畫面，省下了下載圖片再上傳的繁瑣步驟。

有發現某些 Figma plugin 有 All in one 的圖庫匯入功能，但匯入圖片的速度稍微慢了一下，所以我還是選用速度快多了的單一圖庫匯入 Plugin

---

擷取顏色

外掛名稱

Get Palette

外掛簡介

Get Palette 可以幫助使用圖像創建美麗的顏色調色板。

使用情境

有時我們會為配色感到煩惱，對吧？有時我們需要配色的靈感，有時我們在進行品牌設計創造的靈感板就會需要整體配色的配色盤（colour palette），有時我們發現某些影像、照片、圖片配色相當迷人且適合，但只能用軟體或 Chrome 擴充元件的顏色滴管工具大概吸取畫面中的幾個部分、大概配色組合一下。現在我直接使用 Figma 外掛：Get Palette 秒速滿足這個需求，將任意一張圖片匯入 Figma，啟用外掛，立即顯示該圖片的幾種主要顏色，馬上可以感受到配色的方式所營造的氛圍，讓我們直接使用或蒐藏或微調。

此外掛只能使用在 JPG、PNG 圖片，無法使用在 SVG 圖檔。有的 Plugin 在顯示顏色時會同時顯示色碼的值，但這款不會，只能一個一個點擊然後複製右邊參數顯示的色碼。我會選這款是因為發現其有個功能我滿喜歡的，就是可以自己決定想要產生幾個顏色數，區間是 1 – 10 個。

若真的一時沒有安裝或使用 Figma，也是有不少類似功能的線上工具可以使用，例如 Image picker – Coolors 就可以上傳圖片或貼近任意圖片網址 URL 就可以自動建立該圖的關鍵色碼。至於網頁程式常用的顏色代碼 HEX / RGB 的值我是搭配另一款 Plugin 可以快速顯示在檔案中：ColorLabels

---

色碼顯示

外掛名稱

ColorLabels

外掛簡介

能夠以單擊的方式將色彩樣式建立顏色代碼。

使用情境

設計過程中會透過圖片搜尋、情緒板（Mood Board）建立等視覺資料找靈感，而顏色所營造的視覺印象與情感傳遞是相當重要的，透過 Figma plugin：Get Palette 將圖片的色系建立出色塊，然後為了方便後續設計和網站開發使用，再用 Figma plugin： ColorLabels 快速將這些色塊產生顏色代碼，這兩種外掛組合可說是合作無間。格式可以選擇 HEX、RGB、HSL、HSB 等，網頁常用的則是 HEX、RGB，我自己則主要使用 HEX 色碼，例如白色 #FFFFFF、黑色 #000000 等

有注意到 ColorLabels 一直在更新中，之前使用時色碼格式還沒有那麼多選擇，現在新增了功能，除了快速顯示色碼，還可以顯示該色碼的「顏色名稱」，這挺有趣的！

---

圖示 Icon

外掛名稱

Iconify

外掛簡介

將 Material Design Icons、FontAwesome、Jam Icons、EmojiOne、Twitter Emoji 等眾多圖標（包括超過 100 個圖標集，總共包含超過 100,000 個圖標）作為向量形狀匯入到 Figma 中。

使用情境

網頁設計中除了圖片之外，圖示、小圖示的使用也是相當重要的存在，可以是自己創作的、也可以用熱門的圖示資源庫如 Bootstraps Icons、Google Material Icons、Font Awesome 等。而 Figma plugin：Iconify 就同時彙整了這些資源，讓使用者可以自由選擇與插入 SVG 檔案到設計畫面中使用，節省了很多力氣，免切換視窗以及免到處瀏覽下載。

網站使用的圖示 Icon 我通常選用 SVG 格式，放大縮小解析度都能保持清晰，也由於是 SVG 格式，所以可以根據內容透過撰寫網頁語法 CSS 任意調整顏色、互動、態等設定，網站開發友善。

---

品牌 Logo

外掛名稱

Brandfetch

外掛簡介

品牌隨手可得 ✨ 跟尋找最新品牌資產說再見 — Brandfetch 立即提供數百萬個標誌、顏色、字體等資源，幫助您優化設計流程。確保您的品牌符合品牌形象，並輕鬆存取，只需將其添加到全球品牌平台 Brandfetch 即可。

使用情境

我們會在設計中用各種圖示 Icon 作閱讀引導、畫面點綴等，還有一種情況也常碰到：就是可能會使用其他品牌或服務的 Logo 圖示，畢竟不是每家公司都會將自己的品牌資產 Brand Assets 保存好或是放在官網上給人下載，有些很好找，有些很難找、甚至找到後畫質不好比較難用。

這款 Figma plugin：Brandfetch 多多少少有幫助，有彙整大部分知名品牌 Logo 的 SVG 檔，如 Google、Nike、LV、Apple、Amazon、Shopify 等，尤其是電商網站常用到的付款圖示有些找得到如 Visa、Master Card、PayPal 等，對於找不到的就回網路上找檔案了，例如維基百科 Wikipedia 中有不少品牌的 Logo 圖檔可以下載使用，或直接到 Figma Community 搜尋關鍵字：payment icons 就會找到爆多的資源可以使用。

因為不希望用到模糊低畫質的圖檔，會破壞整個畫面的質感，我以前的作法就是到處搜尋 Google 看有沒有辦法找到原始檔並蒐藏，例如 SVG 或 ESP ，找不到的話至少要找到解析度高一點的 PNG 透明背景圖檔，最後的選擇則是 JPG 檔（要去背比較麻煩），從其中可知，最好編輯的檔案是 SVG 檔。

---

背景圖

外掛名稱

Subtle Patterns

外掛簡介

從 Subtle Patterns 獲取圖案圖像。

使用情境

好久以前應該是網路誕生開始到 2014 年前後會常常看到網頁設計背景很喜歡用「重複排列的圖騰」，現代網頁設計趨勢似乎比較少見了，改為大圖背景或純色、漸層色打底、大量的留白、巨大的標題等，這之後可以另外專門分享。

那 Figma plugin：Subtle Patterns 什麼時候會用到呢？其實我還是有的，只是我搜尋的素材是不過於花俏的圖騰當背景使用，可能是細緻灰色或黑色顆粒質感、淺細灰階方格之類的，妥善納入排版還是增加視覺的豐富度而不單調。

有時候全白背景或全單色背景看起來有點說不上的空洞，當然這還是看設計的內容是什麼而定。另外，我也常用在設計社群媒體的貼文使用，例如 Facebook (Meta)、Instagram、Twitter 等，意外地好用！這方式滿推的。

---

漸層色

外掛名稱

CoolHue – Gradient Color Palette

外掛簡介

CoolHue 精選漸變色板，提供 60 多種現成的漸變效果，可以通過單擊 CoolHue 調色板上的漸變來使用漸變效果，或者隨時生成新的隨機漸變效果。

使用情境

漸層色用得好，可以讓設計畫面非常新穎、有活力。若你比較偏好用漸層背景，或只是想要快速套用某種漸層色然後再去調整一下，那此外掛 CoolHue – Gradient Color Palette 可以滿足這個需求。無論是用來做網頁設計、社群貼文素材等使用皆可。

---

示意圖和示意文字

外掛名稱

Content Catalog

外掛簡介

Content Catalog 可以幫助設計生成頭像和文本字符串。只需選擇一個或多個圖層，然後從目錄中選擇一種內容類型應用即可。

使用情境

網頁設計師或平面設計師應該都有用過這樣的情況：就是沒有文案或素材時，但專案已經啟動，行銷或對方正在準備內容中，而我們設計師也不太可能空等，每一分每一秒都在流逝，所以雖然這不是最佳執行設計的狀態，但也是會採取一些行動，至少先起個頭、拉個排版框架出來都好。

以前我常去圖庫或是乾脆用灰階色塊充當圖片區域、亂打幾串文字或使用線上工具自動產生一堆沒有任何意義的示意文字，而現在我直接使用 Figma plugin：Content Catalog 處理，大量選取指定區塊、一鍵生成「示意文字」，類型包含隨機頭像圖片如人物或狗或貓、英文名字、電子郵件、電話、數字等；而若是需要隨機圖片如背景、風景等之類的，則另外搭配圖庫匯入相關的 Figma plugin Unsplash、Pixels 即可。

常聽到的先放假圖假文字排版吧！我是比較習慣改用「示意圖」和「示意文字」稱呼之 ^^，「假」聽起來有負面的感覺。

---

此篇文章會持續更新、汰舊換新，以及新增更多用過好用的 Figma plugin，在設計實務中提升執行效率，會陸續紀錄在此份外掛推薦清單中，除了當作分享之外，其實也是作為自己的線上筆記，隨時可以翻閱 ^^ 若有網頁設計相關的任何問題都歡迎來信討論 irving@irvinglab.com

---

新增內容中：先錄製影片講解，之後再找時間寫成文字。需求：如何複製網頁中的 CSS 樣式直接轉換成 Figma 的設計圖

外掛名稱

Code to Design Playground

---

🟡 開始免費試用 Shopify 建立電商網站，可享精選方案優惠，免費使用 3 天，然後接下來三個月內每個月只要 $1 美元，過了之後才會恢復原價，前往立即註冊。這是 Shopify 官方目前的優惠活動，若試用後不想用，也可以隨時取消訂閱。

🚀 預約諮詢：網站設計與建置

若你有 Shopify 電商網站或 WordPress 品牌形象、部落格設計與建站的需求，可以前往填寫表單預約諮詢，Irvinglab 爾文實驗室是一家深度經驗的網頁設計公司，專注打造 Shopify 和 WordPress 網站以及提供 SEO優化與內容規劃的服務。若想進一步了解服務內容，可以加入 Irvinglab 爾文實驗室 Line@官方帳號留下訊息給我們。

爾文打造的客製化 ChatGPT

• SEO 搜尋引擎優化
  • 名稱：與文同行 SEO 搜尋引擎優化師
  • 簡介：Chat and Learn – 透過對話學習 SEO
  • 網址：https://share.irvinglab.com/gpt-seo-mentor
• Shopify Liquid Dev 程式開發
  • 名稱：Liquid 程式開發 AI 顧問
  • 簡介：針對初學者 Shopify Liquid 程式撰寫的專業輔助，含豐富範例及詳細解說
  • 網址：https://share.irvinglab.com/gpt-shopify-liquid-expert
• Web Design 網頁設計
  • 名稱：成為網頁設計師
  • 簡介：你的網頁設計學習諮詢顧問
  • 網址：https://share.irvinglab.com/gpt-web-design-advisor
• 備註：歡迎前往試用，接下來會持續更新與優化，也可隨時給我回饋 ^^ 感恩！GPTs 已可以設定即時搜尋其他網站上的資料，確切地說，原本使用 Bing，並使用另一個 ChatGPT Plugin 來執行任務，該工具允許使用者提供一個（或多個）URL，並可以選擇請求與 URL 進行交互，提取特定資訊或如何處理 URL 中的內容，請求可能包括重寫、翻譯等。若遇到任何使用上的問題可隨時來訊息或截圖跟我說。