Figma 中文完整教學：UI/UX 設計入門到精通，自學必看指南
Figma 是一款以瀏覽器為核心的雲端向量設計工具，把 UI 介面設計、Wireframe 線框稿、可點擊的 Prototype、多人即時協作、設計到程式碼交接收進同一個分頁，打開…
Figma 是一款以瀏覽器為核心的雲端向量設計工具，把 UI 介面設計、Wireframe 線框稿、可點擊的 Prototype、多人即時協作、設計到程式碼交接收進同一個分頁，打開網頁就能開始設計。根據 Figma 官方方案頁，免費版個人專案檔沒有數量上限 [來源：〈Figma Pricing〉〈https://www.figma.com/pricing/〉〈2026〉]。它與 Sketch 只能跑 macOS、Adobe XD 進入維護模式的根本差別，在於原生把協作與跨平台做進了核心，不必靠外掛補強。
重點先看：判斷要不要投入 Figma，真正要問的是工作流卡在哪，功能強弱反而是次要問題。只要瓶頸是檔案傳來傳去、設計跟工程對不攏，Figma 幾乎是現在唯一合理的選擇；只要需求落在這兩個場景，免費版就能撐很久，真正會逼你升級的是長期團隊協作與 Dev Mode [來源：〈Guide to Dev Mode〉〈https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode〉〈2026〉]。
Figma 的定位：把設計、原型、協作、交接收攏的工作流樞紐
這套工具的核心其實很清楚：它把設計、原型、協作、交接全部收攏在同一個瀏覽器分頁，不只是多了一套設計軟體。不用安裝、打開網頁就能多人同時編輯，是它跟 Sketch、Adobe XD 最根本的差別。如果你還在想 Figma 中文完整教學入門到精通 從哪裡看起，先把它當成一個工作流樞紐，而不是另一套畫圖工具，後面的學習路線會順得多。
很多人會問 UI Prototype 原型設計與 Wireframe 差異 到底在哪。簡單講，Wireframe 是骨架示意，Prototype 是會動的流程演示，而 Figma 兩者都能做，還能在同一份檔案裡切換。對 網頁設計完整指南 UIUX 與響應式 這類需要反覆驗證版面的專案來說，這種一條龍的整合省下的不只是時間，還有反覆匯出匯入造成版本錯亂的風險。
新手最容易混淆的其實是 Figma 跟 Photoshop 的關係。Figma 處理的是向量，擅長 UI 元件、Wireframe、Icon、Prototype；Photoshop 處理的是點陣，擅長照片修圖、合成、精細像素編輯。兩者是分工而不是取代：要做介面排版選 Figma 順手得多，要做海報級的相片處理，Photoshop 仍是王道。這也是為什麼 Figma 能直接匯入 Illustrator／PS 檔，Adobe 用戶轉換門檻很低。
跟 Sketch 相比，根據 Sketch 官方系統需求頁的說明，Sketch 至今只支援 macOS，單機為主、協作要靠額外的外掛或檔案傳遞；Figma 跨平台、瀏覽器即開即用，協作是原生功能。跟 Adobe XD 相比，Adobe 在 2023 年的 MAX 大會與官方公告中宣布 XD 不再新增主要功能、進入維護模式，加上 Sketch 仍只在 macOS 上運作，這兩件事讓 Figma 實質上成為 UI/UX 協作設計的主流標準，新進設計師幾乎沒有不學的理由。
| 比較項目 | Figma | Sketch | Adobe XD |
|---|---|---|---|
| 運作平台 | 瀏覽器、Windows、macOS、Linux（桌面版） | 僅 macOS | Windows、macOS（已進入維護模式） |
| 多人即時協作 | 原生功能，游標可見、可留言 | 需靠雲端檔案與外掛輔助 | 支援但已停止主要功能更新 |
| 免費方案 | Starter 免費，個人檔案無上限 [來源：〈Figma Pricing〉〈https://www.figma.com/pricing/〉〈2026〉] | 提供試用，正式版需付費 | 有限免費，已無新功能 |
| 設計到程式碼 | Dev Mode 可產出 CSS/iOS/Android 程式碼片段（付費完整功能）[來源：〈Guide to Dev Mode〉〈https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode〉〈2026〉] | 需第三方外掛 | 支援有限且不再擴充 |
適用場景比你想的廣：網頁設計、App 介面、Wireframe、可點擊的 Prototype、設計系統，甚至簡報與白板（FigJam）都在它的涵蓋範圍內。順帶一提，如果你在找 最新網頁設計趨勢風格解析 或 網頁設計趨勢與 AI 設計工具應用 的靈感，Figma Community 上的現成模板是很方便的起點。
為什麼大家都在換 Figma
Figma 值得投入，因為它把免費、即時協作、豐富外掛生態、原型演示、設計交接這五件事整合在同一個介面。多數人從 Sketch 或 XD 換過來，最直接的原因是協作與交接的摩擦成本大幅下降，功能多寡反倒不是重點。檔案不用再傳來傳去、版本不會再搞混，這兩件事的殺傷力比任何酷炫功能都大。
免費版夠用是第一個誘因。個人檔案數量無上限、可用多數外掛與模板、可與團隊共用，光這三點就讓它門檻低於絕大多數付費設計軟體。對還沒決定要不要投人投錢的小團隊來說，這是最低風險的試水方式。
即時多人協作是 Figma 真正的殺手鐧。看得到每個人的游標、能直接在畫面上留言註解，省下反覆傳檔與開會對焦的時間。這對前端工程師、PM 與設計師三角溝通的場景特別有感，搭配 免費 UIUX 自學資源完整學習地圖 一起看，協作流程會更順。
把這幾件事攤開比，會發現 Figma 吸引人的地方不是任何單一功能多酷，而是這些能力彼此咬合的方式：免費額度讓人願意試、即時協作讓人離不開、外掛把重複勞動吃掉、Prototype 把溝通具象化、Dev Mode 把交接成本壓低。任何一塊單獨抽走，整套流程就會出現破口。
| 能力 | 解決的破口 | 免費版是否完整 |
|---|---|---|
| 個人檔案無上限 | 練習與接小案的試水成本 | 完整 [來源：〈Figma Pricing〉〈https://www.figma.com/pricing/〉〈2026〉] |
| 即時多人協作 | 傳檔與開會對焦的摩擦 | 完整（游標可見、留言註解） |
| 外掛生態 | 去背、Icons、AI Wireframe 等重複勞動 | 多數免費，少數進階付費 |
| Prototype 連線 | 設計稿到擬真流程的距離 | 完整（拖曳連線＋裝置 Mockup） |
| Dev Mode | 設計師與工程師的交接成本 | 完整功能屬付費 [來源：〈Guide to Dev Mode〉〈https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode〉〈2026〉] |
外掛生態是另一個讓人離不開的原因。Figma Community 上的去背、Icons、AI Wireframe 外掛，能把重複性工作自動化，連 免費 Icon 圖示網站推薦 與 AI 去背工具免費軟體實測比較 這類需求都能直接在畫面內完成。AI Wireframe 外掛尤其值得一提，一句中文描述就能吐出整頁線框稿，三年前這幾乎不可能。
Prototype 演示也是很多人轉投 Figma 的關鍵。切到 Prototype 模式，把按鈕畫框連到目標頁面，設定觸發與轉場動畫，就能在 Figma 內播放擬真流程。想讓流程更生動，可以參考 Figma 動態按鈕轉場動畫教學、Figma 載入動畫 Loading 原型製作、Figma 滑塊互動輪播設計 這幾類進階互動的實作。
誰適合 Figma、誰該留在 Illustrator
判斷的標準只有一個：你的瓶頸是檔案傳來傳去、設計跟工程對不攏，還是單機畫圖？前者 Figma 解決，後者未必。前者涵蓋 網頁設計自學路線圖從零到接案 上會遇到的設計師、前端、PM 三方協作；後者比較接近純創作，工具順手感比協作功能重要。
多數文章把 Figma 講成設計師專屬神器，但它的價值集中在兩個場景：多人即時協作，以及設計到程式碼的交接鏈。缺了這兩個場景，免費版的好處只發揮一半。單人接案、只做平面或 Logo 的人，Illustrator 加 Affinity 反而更划算，硬上 Figma 只是換個地方開向量工具。
- 強烈建議用：UI/UX 設計師、前端工程師、PM、需要做介面原型的接案者
- 也很適合：非設計師拿來做靈感筆記、白板討論、簡易素材、作品集頁面（搭配 FigJam）
- 不建議硬學：純插畫、純印刷平面、複雜相片後製，這些 Photoshop、Illustrator 更擅長
- 與 Canva 的差別：Canva 偏模板套用，Figma 偏自由排版與元件系統，深度不同（可搭配 Canva 新手設計技巧教學 比較）
非設計師同樣能用，FigJam 更適合拿來當團隊白板與靈感筆記。要把練習成果上線，可順著 作品集網站設計與履歷網站 與 作品集網站製作實戰教學 把它變成真的作品集頁面。至於需不需要 Canva 那種模板導向的體驗，就看你想做的是套版還是從零排版。
有一個坑值得先講：剛開始把 Figma 當 Illustrator 用的人，多半會被鋼筆工具的順手感絆住，做精細曲線時會覺得卡。把心態切成「這是介面與協作工具，不是插畫工具」，整個體驗會完全不一樣。若還在猶豫 Canva 夠不夠用，Canva Pro 進階專業設計技巧 可交叉比較。
Figma 免費版能做多少事？3 個共用檔案限制與升級時機
Figma 免費版個人專案檔無上限，但根據 Figma 官方方案頁，與團隊共用的專案檔最多 3 個、協作專案每個檔最多 3 個頁面 [來源：〈Figma Pricing〉〈https://www.figma.com/pricing/〉〈2026〉]。只要你開始需要長期團隊協作、版本歷史或 Dev Mode，就是考慮升 Professional 的訊號。這個天花板聽起來寬鬆，但一旦多人同時改同一份設計變成日常，通常一兩個月就會撞到。
免費版（Starter）涵蓋的能力其實比多數人預期的多：個人設計檔無上限、可用基本工具與多數外掛、3 個共用團隊檔案。對還在練習或接單人小案的人來說，這個額度幾乎用不完。真正的限制藏在協作與版本管理的細節裡。
| 方案 | 適合對象 | 主要限制／特色 |
|---|---|---|
| Starter（免費） | 個人、學生、接案新手 | 個人檔案無上限；共用團隊檔最多 3 個；協作檔每檔最多 3 個頁面；無完整版本歷史；無 Dev Mode 完整功能 [來源：〈Figma Pricing〉〈https://www.figma.com/pricing/〉〈2026〉] |
| Professional | 需要無限專案與無限協作者的團隊 | 無限專案檔、無限協作者、完整版本歷史；按人頭計費，價格以官網為準 [來源：〈Figma Pricing〉〈https://www.figma.com/pricing/〉〈2026〉] |
| Organization | 中大型團隊、需要統一管理 | 團隊權限控管、設計系統治理；價格以官網為準 |
| Enterprise | 大型企業、需要資安與合規 | SSO、進階權限與審計；價格以官網為準 |
升級判斷的關鍵只有一個問題：「多人同時改同一份設計」是不是你的日常？功能多寡在這裡幫不上忙。如果是，免費版的 3 個共用檔案與 3 個頁面會很快見底，這時再升 Professional 才划算。如果只是單人作業或偶爾分享，把錢省下來投在 Figma 必裝外掛清單新手推薦 這類效率工具上反而更實際。
以一個剛開始接案或自學的小型內容團隊為例，這類情境常見的狀況是：設計師、前端、PM 三個人共編同一份設計檔，免費 Starter 的 3 個共用檔案額度大約在前一到兩個專案就會用滿，3 個頁面的限制也會在一份檔案裡同時放桌電、筆電、手機三種版型時見底。依這類站的典型表現，共用檔案用量通常在正式上線第一個專案之後就逼近上限，幅度大約落在 2 到 3 個滿檔之間。實務上常見的失誤是，團隊為了省預算硬把多個專案塞進同一份共用檔，結果頁面命名混亂、版本對不上，反而比升 Professional 的按人頭月費花掉更多溝通時間。判斷的切入點不在「省不省錢」，而在「多人同時改同一份設計」是不是已經變成每週日常：如果是，免費版的額度本來就是設計來給單人或偶爾分享用的，這時升級才會真的把錢花在瓶頸上。
方案計價我不寫死金額，因為 Figma 的定價會調整，而且按人頭算，團隊規模一變總價就變。要查最新價格直接到 Figma AI 功能 Make 與 Design Agent 實戰 提到的官方資源入口，或以 Figma 官網 pricing 頁面為準。Organization／Enterprise 適合中大型團隊需要統一管理、權限控管、SSO 與設計系統治理的場景，一般人用不到。
從註冊到熟悉介面的第一次操作
進入 Figma 官網點 Get Started，用 Google 或 Email 註冊並完成認證信驗證就能登入，接著點右上角 New design file 建立第一份設計檔。介面分四塊：左方圖層、右方樣式調整、上方工具列、中央工作區。有設計軟體經驗的人很快上手，沒有的話大約一個下午就能摸熟。
註冊方式有兩種，Google 一鍵登入或 Email 註冊。Email 註冊會收認證信，務必填可以收信的信箱，不然卡在驗證這一步很浪費時間。登入後點左上角可改暱稱、大頭貼、介面語言與色系；暱稱會顯示在協作游標上，所以取一個團隊認得出來的名字比較好。
- 進入 Figma 官網，點 Get Started 開啟註冊視窗
- 選 Google 一鍵登入或 Email 註冊，Email 需收認證信驗證
- 登入後到左上角設定暱稱、大頭貼、介面語言與色系
- 點右上角 New design file（＋Design file）建立第一份設計檔
- 熟悉四個區塊：左方圖層、右方面板、上方工具列、中央工作區
左方圖層區像 Illustrator 的圖層面板，可命名、可建多頁面（Pages）分類設計。Figma 圖層也能自訂名稱，找不到元素時在畫板上點一下，工具列會自動選取對應圖層，這個小細節省下很多翻找的時間。免費版個人設計檔可新增多頁面，但與團隊多人協作的專案檔有最多 3 個頁面的限制。
右方面板分 Design 與 Prototype 兩種模式。Design 模式調顏色、線條、透明度、對齊，最下方 Export 可匯出 PNG/JPG/SVG/PDF，也能設定輸出大小並預覽。想了解 Figma 網格系統 Layout Grid 設定 怎麼用、以及排版觀念，可以對照 網頁版面設計 RWD 排版觀念 與 排版設計技巧字體與視覺層次 一起看，會更有整體感。
上方工具列齊全：選取、畫框、圖形、鋼筆、文字、外掛、註解等工具。畫框工具分 Section 與 Frame，Section 用來框住工作區，Frame 可套裝置尺寸（桌電、筆電、手機），建立時直接挑對應的 Mockup 尺寸即可。這對做 網頁排版設計範例與靈感、Bento Grid 網頁版面配置設計 這類需要固定框架的版型很方便。
匯出圖檔是新手最常忽略但超實用的功能。不論 PNG、JPG、SVG 或 PDF，在右方面板最下方的 Export 區都能處理，還能預覽輸出結果。做作品集範本與模板大全時，把不同尺寸匯出成圖檔交件是很基本的流程，建議一開始就練熟。
建立畫框：Section 與 Frame 的差別（新手最常踩雷）
Section 是用來分組與管理設計的工作容器，Frame 才是實際進行設計、且唯一能掛 Prototype 互動的畫框。要做可點擊原型，一定要在 Frame 內完成，這是多數教學沒講清楚、卻決定設計能不能動的關鍵。搞錯這一條，前面畫再多都不會跑。
先把兩者的定位一次說清楚。Section 像是大收納箱，可以裝 Frame、圖形、文字、照片，用於大型多頁面設計的分區管理與命名；Frame 則是設計單位，新增時可一鍵套用桌電、筆電、手機、社群貼文等裝置尺寸。一個設計檔內可有多個 Section，每個 Section 內可含多個 Frame，但 Frame 內不能再放 Section。
| 比較項目 | Section | Frame |
|---|---|---|
| 定位 | 工作容器、分區管理 | 設計單位 |
| 可含內容 | Frame、圖形、文字、照片 | 圖形、文字、照片 |
| 裝置尺寸預設 | 無 | 桌電/筆電/手機/社群貼文 |
| 能否做 Prototype | 否（點進去空無一物） | 是（唯一能掛互動） |
| 階層規則 | 內可含多個 Frame | 內不可再放 Section |
關鍵限制：Section 無法做 Prototype
這是最多人踩的雷。你以為在 Section 裡畫完就會動，結果切換到 Prototype 模式發現空無一物，無法新增任何效果。原因很簡單：根據 Figma 官方文件的說明，互動只能掛在 Frame 上。所以做動態設計前，先確認你的內容是放在 Frame 裡，放在 Section 裡則完全不會觸發。
實務上的判斷流程可以這樣走：如果只是設計一個 Hero Section 或單一元件，直接新增 Frame 就好；如果是要做多頁面、多區塊的網站，先用 Section 分區命名，再把 Frame 放進 Section 內設計。這樣事後找人、改稿都順。一句鐵律記起來就夠：設計只在 Frame，Section 只管分組。這條規則也解釋了為什麼有些人的設計永遠跑不起來：問題往往出在一開始放錯容器，邏輯本身沒錯。
圖形、鋼筆與文字工具：組出 UI 元件的三個主力
Figma 的圖形、鋼筆、文字三個工具與 Illustrator 操作邏輯相近：點工具拉出形狀，再到右側面板微調，任何想得到的 UI 元件都能用這三個工具組合出來。對 Adobe 用戶來說，這幾乎是無痛轉移，建議先把基本工具練熟，遇到真的重複勞動時再上外掛，效率才會真的翻倍。
- 圖形工具：含矩形、圓形、線條、箭頭、多邊形、星形。一個好用的小技巧是用 Polygon 拉出形狀後，到右側調整區改邊數，六角形填 6、八角形填 8，以此類推；要做圓角矩形也是從矩形工具出發再調圓角。
- 鋼筆與鉛筆工具：鋼筆用線條與曲線精準描繪任意形狀，曲線長度事後可再調整，跟 Illustrator 的鋼筆工具幾乎一樣；鉛筆則依繪畫路徑產生線條，適合手繪感圖形。
- 文字工具：點文字工具後在畫框任一處點一下就能輸入，行高、字距、對齊、底線、刪除線皆可調；字體挑選可參考 中文字體設計推薦字體清單 與 英文字體推薦與下載，避免一開始就選了不適合 UI 的裝飾字體。
變更樣式：尺寸、配色、透明度、線條、陰影與模糊
Figma 所有視覺樣式都集中在右側 Design 面板：尺寸在 W/H 欄、顏色與透明度在 Fill 區、外框在 Stroke、陰影與模糊在 Effects，點 + 號即可新增效果並用圖示細調。把這個面板當成你的調色盤，比記十幾個快速鍵還管用。
尺寸欄的 W/H 可直接輸入數值，也能鎖定長寬比等比例縮放，輸入框還支援四則運算：想設 30 的兩倍就輸入 30*2，Figma 會自動算成 60；要 165 的三分之一就輸入 165/3 得到 55。這個小功能很多人用半年都沒發現，卻能省下心算時間。
| 樣式類型 | 面板位置 | 可調項目 |
|---|---|---|
| 尺寸 | W / H 欄 | 數值、鎖定長寬比、四則運算 |
| 填色 | Fill | 單色、四種漸層（線性/放射/角度/鑽石）、圖片填滿、透明度 |
| 外框 | Stroke | 顏色、粗細、實線/虛線、間距 |
| 陰影 | Effects（Drop shadow） | 顏色、模糊度、位置 |
| 模糊 | Effects（Layer blur） | 模糊數值，越大越糊 |
填色 Fill 區支援單色、線性／放射／角度／鑽石四種漸層、圖片填滿；色碼旁的百分比就是透明度，0% 全透明、100% 不透明。陰影在 Effects 區點 + 號即預設套用，可調顏色、模糊度、位置；模糊則切換為 Layer blur，數值越大越模糊，能做出毛玻璃與霧透卡片質感。想深入這類質感技法，可看 Figma 毛玻璃 Glassmorphism 質感效果，配色則可搭配 網頁配色工具網站推薦 與 色彩學對比色互補色配色技巧。
這裡要承認一個事實：樣式面板的選項很多，第一次看會眼花。建議先只動 Fill 與尺寸，把畫面做出來，再回頭補陰影與模糊。質感屬於加分項，能把畫面先做出來才是入場券，別為了追求毛玻璃而卡住整個進度。
用 Figma 做可點擊 Prototype 與 RWD 響應式設計
做完畫面後切到 Prototype 模式，把對應畫框用連線拉起來、設定觸發與動畫，就能在 Figma 內播放擬真流程。要做 RWD 則善用 Layout Grid 排版，再搭配 Breakpoints 之類外掛預覽不同螢幕寬度的版面變化。整個流程的核心是「先有結構，再做互動」，順序反了會一直返工。
Prototype 的連線邏輯像連連看。把按鈕畫框連到目標頁面，再設觸發類型（點擊、滑鼠懸浮、滑鼠離開或延遲）與轉場動畫（Ease out 由快而慢、Linear 等速等，秒數自己填），設定完直接在 Figma 內播放預覽。內建桌電、筆電、手機等 Mockup 可直接套用 Frame 尺寸，想進階做出 Figma 視差效果滑鼠追蹤互動、Figma 環形文字圓弧標籤設計 這類細節互動，也有現成的教學可參考。
- Preview：在原頁面開小視窗，載入快，適合快速確認連線有沒有接對
- Present：另開視窗，可套手機或電腦 Mockups，能重複播放、逐格檢查流暢度
- Figma Mirror：手機 App 即時同步設計稿到行動裝置查看
Layout Grid 是做響應式設計的基礎。用網格系統建立一致欄位，排版才會整齊，後續調整斷點也才有規則可循。這部分想深入，Figma 響應式設計行動版排版 與 響應式網頁設計 RWD 手機版 兩篇可以對著看。如果你對 RWD 與 AWD 的差異還有疑問，RWD 響應式網頁設計實戰案例 與 AWD 自適應與 RWD 響應式差異 會講得更清楚。
Breakpoints 外掛能設多組斷點，任何寬度或高度都能設定，完成後放大縮小畫框邊界，排版就會跟著變化，即時預覽 RWD 效果。這對做 網頁設計必備關鍵元素 UI 與 UX 與網頁設計完整指南 UIUX 與響應式時驗證版面很有幫助。不過 Breakpoints 只能輔助預覽，真正上線的響應式還是得靠前端實作，設計稿是設計稿、程式是程式，這條界線要清楚。
輸出與分享：把作品交給客戶與團隊
輸出只要選取元素到右側面板最下方 Export 區，選 PNG/JPG/SVG/PDF 即可；分享則點右上角 Share 設定觀看或編輯權限，複製連結就能交給團隊，且協作人數不受限。這兩件事是設計完成後的最後一哩路，做對了交付才順。
- 輸出格式看用途：SVG 交工程師、PNG/JPG 用在提案簡報、PDF 給客戶存檔，輸出時可設定尺寸並預覽。
- 分享權限：能設「擁有連結者可觀看或編輯」，也能用 email 邀請特定成員進來。
- 協作人數：沒有上限，根據 Figma 官方功能說明，一份稿子可同時分享給數十、甚至上百人查看或編輯。
Figma Community 與必裝外掛清單
Figma Community 是官方的資源平台，設計師在上面分享免費與付費的 UI 套件、網頁模板與外掛。新手最該先裝的是去背、免費圖庫與 AI Wireframe 這三類外掛，能立刻把重複性工作自動化。平台上有超過上千款資源，涵蓋 Icons、去背、素材圖庫與各種網頁設計工具。
外掛從上方工具列的 Plugins 入口搜尋安裝，點選即用、可按珍藏鍵固定常用項，安裝路徑只有一步：工具列 → Plugins → 搜尋 → 點選開啟。Community 不只是下載區，更是挖寶庫，點開模板可以查看每個圖層，參考專業 UI/UX 設計師怎麼組織設計，有些作者還允許你直接修改模板變成自己的設計。想找更多素材，可以對照 Figma 圖示 Icon 外掛免費匯入、Figma 免費圖庫 Unsplash Pexels 外掛、Figma 免費圖片素材外掛推薦。
| 外掛名稱 | 用途 | 免費與否 |
|---|---|---|
| Icons8 Background Remover | AI 去背，點選圖片後一鍵移除背景 | 免費，不限次數；累計使用量達數十萬次（截至擷取日，以該外掛 Figma Community 頁面現況為準） |
| Unsplash / Pexels 外掛 | 直接在畫面內搜尋並插入免費圖庫照片 | 免費 |
| Storyset by Freepik | 客製化向量插圖，五種風格可選 | 免費，數萬張素材 |
| WebGradients | 上百種漸層配色，一鍵複製 CSS background-image | 免費 |
| Humaaans for Figma | 可拆解頭手脚的人物插圖，大量設計師採用 | 免費 |
| Wireframe Designer | 輸入文字描述（支援部分中文）生成線框稿 | 免費版每月 10 次，付費版不限次數 |
| html.to.design | 把網站 URL 轉成可編輯設計檔，做競品分析或改版參考 | 免費版一次轉一個網址；累計使用者達數十萬（截至擷取日，以該外掛 Figma Community 頁面現況為準） |
| Breakpoints | 設定 RWD 斷點，即時預覽伸縮時的排版變化 | 免費 |
Icons8 Background Remover 由國外素材網站 Icons8 推出，操作很直覺：點選要去背的圖片、開啟外掛、點 Remove Background，幾乎都不超過一分鐘就能完成，去背效果乾淨、細節保留得也不錯。它完全免費、不限次數，是創作者很實用的工具，與 AI 去背工具免費軟體實測比較裡的其他方案相比也算堪用。Unsplash、Pexels 這類圖庫外掛則是 免費商用圖庫網站總整理 在 Figma 內的延伸，省下另開分頁找圖的時間。
Wireframe Designer 搭載 AI 功能，輸入「A French restaurant website」這類簡短描述，選 Mobile 或 Desktop，一分鐘內就能生成完整線框稿；實測輸入中文「健身 App」也能生成架構相符的版本，雖然文字仍是英文，但內容結構對得上。html.to.design 則能把現成網站 URL 轉成可編輯設計檔，做競品分析或改版參考很實用，不過一次轉多網址需要付費。對做 網頁設計靈感網站收藏 與 免費 3D 素材與 Mockup 資源 整理的人來說，這兩個外掛能把參考流程大幅加速。
要特別提醒的是，外掛數字會變動。Icons8 Background Remover 與 html.to.design 的累計使用量，精確數字請以該外掛 Community 頁面現況為準，這裡用「數十萬」保守標示，避免寫死過時的數字。外掛裝太多會拖慢載入速度，建議常駐不超過五個，其他用到再開。如果你連素材管理也想數位化，Eagle 素材管理工具設計師資產 是設計師圈常被推薦的搭配方案。
Figma 學習資源與常見問題：從零到上手的路線
學 Figma 最快的方式是官方的 Figma 學習資源頁面，點開就能在 Figma 裡邊學邊做。中文讀者可搭配國內設計教學頻道與文章，從基礎工具、Prototype 到外掛逐步累積，大約一到兩週能完成第一份可用作品。學習曲線不陡，但需要實作，光看影片不動手會學得很慢。
官方資源之外，Figma 也有官方 YouTube 頻道，建立從零開始的播放清單，新功能推出時也會示範操作。不過頻道上的教學影片多為英文，只有少數有中文翻譯字幕，但因為是圖文示範操作，看著畫面跟著做不難懂。中文讀者可找國內設計教學網站與頻道提供的手把手中文教學，適合不熟悉英文的人。
學習路線建議這樣排：先熟悉介面與工具，再做 Wireframe，接著學 Prototype 與元件系統，最後才碰 Dev Mode 與進階協作。這條路徑與 網頁設計自學路線圖從零到接案、免費 UIUX 自學資源完整學習地圖 的邏輯一致，先有手感再談效率。配色、字體等進階主題可對照 網頁配色工具網站推薦、色彩學對比色互補色配色技巧 與 中文字體設計推薦字體清單。對已經在接案的人，網頁設計費用行情公開 與 網站架設費用完整解析 能幫你把學會的技能換成報價；想補齊報價背後的 SEO 觀念，《SEO 白話文》實體書與電子書購買通路 搭配 SEO 陪跑班以 Ahrefs 搭配的學習路線 較能避免只會操作工具卻不知道為什麼。
如果你已經會 Figma，想往網頁設計整條鏈延伸，可以順著 品牌網站設計關鍵建議 與 CTA 行動呼籲按鈕設計指南 走，把設計能力接到實際的商業網站上。要用視覺化工具加速落地，Elementor 頁面編輯器完整教學 與 Bricks Builder 新世代視覺化編輯器 都是把 Figma 設計稿變成網站的常見路徑；想把設計稿直接轉成可維護的程式碼，Codex AI 程式助理怎麼用 提供了一條讓前端交接更省事的思路。
把視角拉遠一點，Figma 值得學的真正原因是它接上了設計、協作、開發三個環節，萬不萬能反倒不是重點。想讓這條鏈完整，AI 工具能幫上忙：AI Logo 產生器免費付費推薦、AI 網站建立工具實測比較、網頁製作平台 WordPress Wix 比較 都是在 Figma 之外的互補選項。要不要找設計公司幫忙，可對照 網頁設計公司推薦與挑選 再決定；網站上線後想追蹤品牌在搜尋結果的能見度，Ahrefs Brand Radar 指標怎麼看 是值得認識的觀測工具。
工具畢竟只是手段，能不能把設計變成上線的產品才是目的。設計稿做完後，遇到 404 頁面設計與優化技巧、Fonts Ninja 網頁字型辨識工具 這類細節，還是得靠完整的工具鏈搭配。為接案或作品集而學的人，SEO 工具完整評比比較 也值得放進學習清單，因為會做網站還要會讓人找到，才算完整能力。實務上先把 Google Search Console 安裝設定 接好，再用 2026 年 SEO 軟體指南 挑一套主力工具，新手可從 Ranking SEO 工具這類對新手友善的選項 開始熟悉報表。
結論：先問自己缺哪一塊，再決定要不要投入
回顧整篇的核心主張：Figma 的價值在於它把向量設計、原型互動、多人即時協作、開發者交接收進同一個瀏覽器分頁，功能強弱反倒在這裡幫不上忙。判斷要不要投入，真正該問的是工作流缺哪一塊：瓶頸在檔案傳來傳去、設計跟工程對不攏，Figma 幾乎是現在唯一的合理選擇；只是單機畫圖，Illustrator 反而更順手。決定方向之前，先看看 2023 年最熱門的 100 個搜尋關鍵字 比較容易抓到市場在找什麼，再回頭想設計要往哪邊投入。
答案因此很直接：你是 UI/UX 設計師、前端工程師、PM，或需要做介面原型的接案者，現在就開始學；你是單人平面、插畫或純印刷輸出，把預算留給 Illustrator 或 Affinity。Figma 晚一個月學不會變難，但硬用在它不擅長的場景，只會浪費時間。先把需求問清楚，再決定要不要投入，這樣判斷會比盯著功能清單看準得多。
Figma 常見問題 FAQ
Figma 免費嗎？免費版有哪些限制？
Figma 有免費的 Starter 方案，個人設計檔沒有數量上限。主要限制是與團隊共用的專案檔最多 3 個、協作檔每個最多 3 個頁面，且沒有完整版本歷史與 Dev Mode 完整功能 [來源：〈Figma Pricing〉〈https://www.figma.com/pricing/〉〈2026〉]。設計功能、Prototype 互動與 PNG/JPG/SVG/PDF 輸出皆完整可用，多數自學者不需付費。
Figma 要安裝嗎？可以離線用嗎？
不用安裝也能用，打開瀏覽器登入帳號就能設計。有提供桌面版應用程式，但核心運作仍以雲端為主，離線編輯功能有限，重新連線後會同步變更。
Figma 怎麼做 Prototype 互動原型？
完成畫面後切換到 Prototype 模式，把按鈕畫框用連線拉到目標頁面，設定觸發類型與轉場動畫，就能在 Figma 內播放擬真流程，並可套用內建的裝置 Mockup 預覽。記得內容必須放在 Frame 裡，Section 在這個模式下不會出現可連線的節點。
Figma 的 Dev Mode 開發者模式是什麼？
Dev Mode 讓工程師能檢視設計稿的尺寸、間距、色彩與程式碼片段，可產出 CSS、iOS、Android 程式碼，縮短設計到開發的溝通成本，完整功能屬於付費方案 [來源：〈Guide to Dev Mode〉〈https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode〉〈2026〉]。
Figma 方案怎麼選？什麼時候該升級付費？
單人練習或接小案用免費 Starter 就夠。等到團隊頻繁共編、需要完整版本歷史或 Dev Mode 時，再升 Professional；中大型團隊若要統一管理與權限控管，則評估 Organization 或 Enterprise，定價以 Figma 官網為準。
Figma 能用中文操作嗎？
Figma 介面以英文為主，但社群資源、教學與命名習慣已大量中文化，輸入指令時用中文也不影響操作，搭配國內中文教學頻道與文章幾乎沒有閱讀障礙。