Figma 是什麼？一句話看懂它的定位
Figma 是一套雲端 UI/UX 介面設計與協作平台，常用來製作網站、App、後台系統的設計稿、原型與開發交付文件，讓設計師、PM、工程師能在同一份檔案中一起工作。
- 它的核心不是修圖，而是介面設計、Prototype 與團隊協作。
- 它主要跑在瀏覽器，也有桌面版，適合遠端與跨部門共同查看設計稿。
- 它從早期 UI 設計工具，延伸成包含白板、簡報、網站發布與品牌素材的產品生態。
Figma 不是單純畫圖軟體，而是協作式設計平台
用 Figma 畫按鈕、排版、做 App 畫面只是表面。真正讓它在產品團隊中普及的原因，是多人可以同時進入同一份設計稿、留言、看版本、確認元件規格。對新手來說，可以先把 Figma 理解成「專門做數位產品介面的雲端工作區」。
Figma 常用在哪些設計任務？
- 網站設計：首頁、活動頁、產品頁、後台管理介面。
- App 介面：登入流程、會員中心、購物車、付款流程。
- Wireframe：先用低保真線框稿整理資訊架構與頁面順序。
- Prototype：把靜態畫面串成可點擊流程，方便測試想法。
- 簡報與提案：透過 Figma Slides 整理設計提案、產品規劃與客戶簡報。
Figma 可以做什麼？主要功能總整理
Figma 可以做介面設計、Wireframe、互動原型、即時協作、元件管理、Auto Layout、設計系統與開發交付。它最適合需要把想法變成可檢視、可討論、可交付設計稿的團隊。
| 功能 | 主要解決的問題 | 最常受益的人 |
|---|---|---|
| UI 介面設計 | 把網站、App、後台系統畫成可討論的畫面 | 設計師、新手、PM |
| Prototype | 在開發前先測試操作流程與頁面跳轉 | 設計師、PM、使用者研究人員 |
| 即時協作與留言 | 減少截圖來回、會議後資訊散落的問題 | PM、工程師、客戶、主管 |
| Component 與 Auto Layout | 讓按鈕、卡片、表單等設計保持一致且可重複使用 | UI/UX 設計師、設計系統維護者 |
| Dev Mode | 讓工程師查看尺寸、間距、樣式、資產與設計變更 | 前端工程師、產品團隊 |
UI 介面設計：網站、App、後台系統
Figma 最核心的用途是介面設計。設計師會用 Frame 建立頁面尺寸，用 Layout 安排區塊，用 Component 製作可重複使用的按鈕、選單、卡片與表單。這對網站和 App 特別有用，因為介面不是單張圖片，而是一組會在不同狀態、不同裝置上重複出現的畫面規則。
Wireframe 與 Prototype：把想法變成可點擊流程
在還不確定視覺風格前，PM 或設計師可以先用 Wireframe 排出頁面結構，例如登入、填資料、送出、成功頁。接著用 Prototype 把畫面串起來，讓團隊在開發前先點一次流程。Alice Wang 會建議新手先練這一步，因為它比一開始追求漂亮畫面更接近真實產品工作。
即時協作與留言：多人一起看同一份設計稿
- PM 可以直接在畫面旁留言，指出需求疑問或文案調整。
- 工程師可以標記不清楚的狀態，例如錯誤提示、載入中、空資料畫面。
- 主管或客戶可以用分享連結檢視，不一定要下載檔案。
- 版本紀錄能協助團隊回看調整前後，不必靠檔名管理「final、final2、final3」。
元件、樣式與 Auto Layout：讓設計保持一致
Component 適合把常用元素做成元件，例如主要按鈕、商品卡、導覽列。Style 則能統一顏色、文字與效果。Auto Layout 會依內容長短調整間距與容器尺寸，對多語系、RWD 與後台表單很實用。若團隊開始整理設計系統，可延伸閱讀 Design Token 與 Figma 指南 和 元件庫建立方法。
Dev Mode：讓工程師看規格、尺寸與設計變更
Dev Mode 是給開發交付用的檢視模式，重點是讓工程師更快確認間距、尺寸、顏色、字體、資產與已準備開發的畫面。依 Figma 官方 Dev Mode 頁面 說明，Dev Mode 包含在付費方案的 Full seat 或 Dev seat 中。它能減少交付落差，但不代表會自動產出完整可上線程式碼。
Figma 目前有哪些產品模組？
2026 年看 Figma，不能只看 Figma Design。官方目前把它延伸成 Design、Dev Mode、FigJam、Slides、Draw、Make、Sites、Buzz 等模組，分別對應設計、開發交付、白板、簡報、網站與品牌素材工作流。
| 產品模組 | 定位 | 適合情境 |
|---|---|---|
| Figma Design | 主要設計與原型工作區 | 網站、App、後台、設計系統 |
| Dev Mode | 開發交付與規格檢視 | 工程師看規格、資產、變更 |
| FigJam | 線上白板 | 腦力激盪、流程圖、工作坊 |
| Figma Slides | 協作簡報 | 設計提案、產品簡報、利害關係人同步 |
| Figma Draw | 向量與插畫工具延伸 | 自訂插畫、圖形修飾、視覺表現 |
| Figma Make | AI 輔助的 prompt-to-app 工具 | 快速產生互動原型與概念測試 |
| Figma Sites | 網站設計與發布，仍需留意官方開放狀態 | 作品集、活動頁、行銷頁概念 |
| Figma Buzz | 品牌素材與行銷資產製作，仍需留意官方開放狀態 | 社群圖、廣告素材、品牌模板 |
Figma Design：主要設計工作區
Figma Design 是多數人說「用 Figma」時指的主產品。它負責畫介面、建立元件、做 Prototype、整理設計系統，官方也把它定位為建立、分享與測試網站、行動 App 和其他數位產品設計的主要工具。
FigJam：白板、腦力激盪與工作坊
FigJam 更接近線上白板，適合用便利貼、流程圖、投票、圖形和線條整理共識。PM 開需求會、設計師做使用者旅程、團隊跑工作坊時，用 FigJam 往往比直接打開設計稿更自然。
Figma Slides：簡報與設計提案
Figma Slides 是 Figma 生態內的簡報工具，適合把設計稿、Prototype 與提案內容放在同一個工作環境。對產品和行銷團隊來說，它的價值不是取代所有簡報工具，而是讓設計提案不必在截圖、貼圖、匯出之間來回搬運。
Figma Sites、Make、Buzz、Draw：新版工作流的延伸
Figma Sites、Make、Buzz、Draw 代表 Figma 正在往網站發布、AI 原型、品牌素材與插畫表現延伸。這些模組可以認識，但新手不必一開始全部學。先掌握 Figma Design、FigJam、Prototype 與基本協作，投資報酬率通常更高。官方產品與方案狀態可查看 What is Figma 與 Figma plans and features。
誰適合用 Figma？不同角色的使用情境
Figma 適合設計師、PM、工程師、行銷、學生與小型團隊。只要工作需要討論數位介面、確認流程、交付規格或共用品牌素材，Figma 就可能比單純用截圖、簡報或訊息溝通更有效率。
| 角色 | 常見用法 | 最該學的部分 |
|---|---|---|
| UI/UX 設計師 | 畫設計稿、做 Prototype、維護元件庫 | Frame、Auto Layout、Component、Style |
| PM / 企劃 | 整理需求、看流程、收回饋 | FigJam、Comment、Prototype 檢視 |
| 工程師 | 確認規格、狀態、切圖與變更 | Dev Mode、版本、Ready for dev |
| 行銷 / 品牌 | 簡報、品牌模板、活動素材 | Slides、Buzz、基礎排版 |
| 學生 / 新手 | 練作品集、理解介面設計流程 | 基本工具、Prototype、作品整理 |
UI/UX 設計師：從畫面設計到設計系統
- 製作網站與 App 的高保真設計稿。
- 建立按鈕、表單、導覽列等 Component，降低重複修改成本。
- 用 Auto Layout 處理不同內容長度與不同螢幕尺寸。
- 把 Style、Variable、Component library 整理成團隊可共用的設計系統。
PM / 企劃：整理需求、看流程、收回饋
- 在 FigJam 先整理 user flow、需求優先順序與討論結論。
- 直接在設計稿留言，避免需求散在通訊軟體裡。
- 用 Prototype 檢查流程是否符合商業規則與使用者情境。
- 把設計提案放進 Figma Slides，讓簡報內容和設計狀態更接近。
工程師：確認規格、狀態與變更
- 用 Dev Mode 查看間距、尺寸、顏色、字級與資產。
- 確認哪些畫面已標記為可開發，哪些仍在設計中。
- 比較設計變更，減少「我照舊版做了」的交付風險。
- 搭配 Code Connect 或設計系統規則，讓元件命名更貼近開發實作。
行銷 / 品牌團隊：簡報、社群素材、品牌模板
- 用 Figma Slides 製作設計提案與品牌簡報。
- 用 Buzz 類型的品牌素材工作流，讓非設計職也能套用既有模板。
- 把品牌色、字體與版型收進團隊資源，降低素材走樣機率。
- 若只是每天快速做社群圖，Canva 可能更省時間；若素材要接上產品設計與品牌系統，Figma 更有延展性。
Figma 和 Canva、Miro、Sketch、Adobe XD、Webflow、Framer 差在哪？
Figma 的定位是介面設計與協作，不等於 Canva 的快速視覺素材、Miro 的白板討論，也不同於 Webflow 或 Framer 的網站建置。選工具時先看任務：要畫產品介面、做原型與交付規格，Figma 通常更精準。
| 工具 | 主要定位 | 和 Figma 的差異 | 適合誰 |
|---|---|---|---|
| Canva | 快速做社群圖、簡報、海報 | 偏模板化視覺產出，不是產品介面交付主工具 | 行銷、社群經營者、小商家 |
| Miro | 線上白板與工作坊 | 偏討論與流程整理，UI 設計細節不如 Figma Design | PM、顧問、跨部門團隊 |
| Sketch | 介面設計工具 | 歷史上是 UI 設計主流之一，Figma 的雲端協作更強 | Mac 設計師、既有 Sketch 團隊 |
| Adobe XD | 介面與原型設計 | 同屬 UI 工具比較範圍，但市場討論度已明顯轉向 Figma | Adobe 生態既有使用者 |
| Webflow | 視覺化網站建置與發布 | 能產出正式網站，Figma 更偏設計與交付前段 | 網站設計師、行銷網站團隊 |
| Framer | 互動網站設計與發布 | 偏網站發布與動態呈現，Figma 偏產品設計協作 | 作品集、品牌頁、互動網站製作者 |
如果想看更完整的工具選擇脈絡，可延伸閱讀 設計軟體比較指南。
如果你要做介面設計，Figma 通常比 Canva 更適合
Canva 很適合快速做貼文、海報、簡報封面，但 UI 介面設計需要畫狀態、元件、RWD、Prototype 和開發規格。這些任務不是單張漂亮圖片能解決。若你的目標是網站或 App 介面，Figma 會比 Canva 更接近真實工作流程。
如果你要做白板討論，FigJam 比 Figma Design 更適合
需求還很混亂時，不一定要急著打開 Figma Design 畫畫面。FigJam 更適合貼便利貼、整理流程、拉線、投票與跑工作坊。我的判斷是：還在想清楚問題時用 FigJam；已經要定義畫面和元件時，再進 Figma Design。
如果你要直接架網站，Webflow / Framer 和 Figma 的定位不同
Webflow 和 Framer 更接近網站建置與發布工具，Figma 則主要負責設計、原型、協作和交付。雖然 Figma Sites 已經讓網站發布進入 Figma 生態，但正式商業網站仍要考慮 SEO、CMS、表單、效能、追蹤碼、權限與維護流程，不能只看畫面能不能發布。
Figma 免費版夠用嗎？什麼時候需要付費？
Figma 免費版通常足夠新手練習、做個人作品集和測試小型設計想法；但團隊專案、共用設計系統、進階 Dev Mode 交付、管理權限與多團隊協作，通常會進入付費方案評估。
| 情境 | 免費版是否通常夠用 | 可能需要付費的原因 |
|---|---|---|
| 新手練習 | 通常夠用 | 除非需要大量團隊檔案或進階協作管理 |
| 個人作品集 | 通常夠用 | 作品數量、分享權限與檔案管理需求變多時再評估 |
| 小型接案 | 視合作方式而定 | 客戶協作、版本管理、設計資源共用可能需要升級 |
| 正式產品團隊 | 通常不夠 | 需要 libraries、團隊檔案、進階交付與權限管理 |
| 工程交付 | 視 Dev Mode 需求而定 | 付費方案的 Full 或 Dev seat 才能完整使用 Dev Mode 權限 |
新手練習與個人作品集：免費版通常夠用
如果你只是想知道 Figma 是什麼、練習畫一個 App 畫面、做作品集初稿，Starter 免費版通常已經能開始。官方方案頁目前列出 Starter 為免費，並包含 unlimited drafts、UI kits and templates 等入門資源；實際限制仍以 Figma Pricing 為準。
團隊專案、設計系統、正式交付：通常會需要付費方案
- 需要多個正式專案與團隊檔案管理。
- 需要 team-wide design libraries，讓元件、樣式、變數能跨檔案共用。
- 需要更完整的 Dev Mode inspection 與開發交付流程。
- 需要管理不同席位、權限、部門與安全需求。
價格與方案要以官方頁面為準
Figma 的方案、席位、AI credits、beta 模組開放範圍都可能調整。寫預算或對內採購時，不建議引用二手整理文的價格，應直接查官方方案頁與管理後台。文章中的費用判斷只適合作為方向，不應當成採購報價。
一個真實專案會怎麼用 Figma？
真實專案通常會用 Figma 從需求討論、Wireframe、UI 設計、Prototype、Review，一路走到 Handoff 與 Design System。它的價值在於把討論、畫面、回饋與交付集中在同一條工作流。
需求討論與白板整理
- PM 先在 FigJam 整理目標、使用者、流程與已知限制。
- 設計師把散落需求轉成 user flow 或資訊架構。
- 工程師提早指出資料來源、狀態、例外情境與技術限制。
- 團隊先確認問題，再進入畫面設計，能少走很多重工路。
線框稿、視覺設計與互動原型
- 先用 Wireframe 排出頁面順序、欄位、按鈕與主要資訊。
- 再進入視覺設計，處理字級、顏色、間距、元件與狀態。
- 用 Prototype 串接主要流程，例如註冊、下單、查詢、送出表單。
- 測試時先看流程是否合理，再修細節。這比只看單張設計稿更接近使用者的真實感受。
設計審核、留言、版本與開發交付
- 利害關係人直接在畫面旁留言，設計師集中處理回饋。
- 版本紀錄協助團隊回看變更，不必猜哪一份才是最新版。
- 設計完成後標記開發狀態，工程師用 Dev Mode 看規格與資產。
- 專案成熟後，常見元件會被整理進 component library，讓下一個功能不用重畫。
Figma 有哪些限制？什麼情況不一定適合？
Figma 不適合取代正式前端開發、大型修圖、印刷排版，也不適合完全不需要協作的簡單素材任務。它很強，但強在數位介面設計與團隊交付，不是所有視覺工作都該放進 Figma。
不適合取代正式前端開發
- Prototype 可以模擬點擊流程，但不等於真正的後端資料、表單驗證與商業邏輯。
- Dev Mode 可以協助看規格和資產，但不能保證直接產出可維護的正式程式碼。
- Figma Sites 或 Make 可以支援概念與部分發布場景，正式產品仍要評估效能、安全、SEO、CMS 與維運。
不適合大型修圖或印刷排版主工作流
- 大量照片修飾、合成、去背與色彩校正，Photoshop 仍更適合。
- 長篇型錄、書籍、雜誌與精準印刷排版，InDesign 這類排版工具更完整。
- Figma Draw 能補強向量與插畫表現，但不代表 Figma 變成所有平面設計的主工作台。
網路與團隊權限會影響使用體驗
Figma 是雲端協作工具，網路穩定度會影響檔案開啟、同步、留言與多人協作。依 Figma 官方離線說明，Figma 沒有完整離線模式，只能在特定條件下保留部分已載入頁面與離線變更。企業團隊還要管理誰能編輯、誰能檢視、誰有付費席位。
Figma 為什麼會紅？簡短看它的市場地位
Figma 會紅，關鍵在於它把設計工具搬到雲端，讓多人即時協作成為產品設計的日常。它也因 2022 年 Adobe 宣布收購、2023 年雙方放棄交易而受到更廣泛市場關注。
從雲端協作切入，改變設計交付方式
Figma 於 2016 年公開推出，早期最鮮明的差異是 browser-based 與 multiplayer collaboration。過去設計稿常在本機檔案、雲端硬碟和截圖之間流動；Figma 則讓設計師、PM、工程師直接進同一份檔案討論。這個改變對遠端團隊尤其有感。
Adobe 收購案讓 Figma 更受市場關注
Adobe 在 2022 年 9 月 15 日宣布計畫收購 Figma，雙方又在 2023 年 12 月 18 日宣布終止交易，理由是看不到取得必要監管核准的明確路徑。這段歷史只需要知道到這裡就好，對「Figma 可以做什麼」的判斷，產品定位比財務新聞更重要。來源可參考 Adobe 官方公告。
如果你是新手，下一步可以怎麼開始？
新手學 Figma 不必一開始追進階技巧。先認識介面區域，再練 Frame、文字、形狀、Auto Layout、Prototype 這 5 個基本操作，就能理解大多數入門教學和設計稿結構。
先認識介面四大區域
| 區域 | 用途 | 新手觀察重點 |
|---|---|---|
| 工具列 | 選取、建立 Frame、畫形狀、加文字 | 先記住常用工具，不必背所有選項 |
| 左側面板 | 管理頁面、圖層、元件與資源 | 看懂圖層結構，比會畫漂亮圖更重要 |
| 畫布 | 放置設計稿、流程與 Prototype 畫面 | 用 Frame 當頁面，不要只把元素散在畫布上 |
| 右側屬性面板 | 調整尺寸、間距、顏色、文字、互動 | 大多數細節設定都在這裡 |
先練 5 個基本操作
- Frame：建立手機版、桌機版或區塊容器。
- Text：設定標題、內文、按鈕文字與層級。
- Rectangle：製作卡片、背景、輸入框與簡單圖形。
- Auto Layout：讓按鈕、清單、卡片能依內容自動調整。
- Prototype：把兩三個畫面串起來，理解互動流程。
想正式操作再看完整 Figma 教學
如果你已經知道 Figma 是什麼，也確定要開始動手，下一步適合看完整操作教學。可以從 Figma 教學入門指南 開始，先做出一個小型網站或 App 流程，再回頭補 Auto Layout、Component 與 Dev Mode。我的建議是先做出能點的流程，再追求視覺精修，學習速度會快很多。
Figma 是什麼？
Figma 是雲端 UI/UX 介面設計與協作平台，常用來製作網站、App、後台系統的設計稿、Prototype、元件與開發交付規格。
Figma 可以做什麼？
Figma 可以做 UI 介面設計、Wireframe、Prototype、即時協作、留言、版本管理、設計系統與 Dev Mode 開發交付，也能透過 FigJam、Slides、Buzz 等模組支援白板、簡報和品牌素材。
Figma 是免費的嗎？
Figma 有免費 Starter 方案，通常足夠新手練習與個人作品集。若是正式團隊、設計系統、進階 Dev Mode 或多專案管理，通常要評估付費方案，實際價格以官方頁面為準。
Figma 需要安裝嗎？
Figma 主要可以在瀏覽器使用，也提供 macOS 與 Windows 桌面版。新手可以先用瀏覽器開始；若需要使用本機字體或更接近桌面應用的體驗，再安裝桌面版。
Figma 適合完全沒有設計基礎的人嗎？
適合，但學習順序要正確。先練 Frame、文字、形狀、Auto Layout 和 Prototype，比一開始追求複雜視覺效果更實用。沒有設計基礎的人也能用它理解介面流程。
Figma 要學多久？
如果只想看懂設計稿和做簡單畫面，幾天到一兩週通常能上手。若要做完整 UI/UX 設計、元件庫、設計系統與開發交付，會是持續練習的專業能力。
Figma 可以做網站嗎？
Figma 可以設計網站介面、做互動原型，也有 Figma Sites 支援網站發布場景。但正式網站仍要考慮 SEO、CMS、效能、安全、表單與維護，不應把設計稿直接等同完整網站。
Figma 和 Canva 差在哪？
Canva 偏快速製作社群圖、海報、簡報和模板素材；Figma 偏網站、App、後台等數位產品介面設計、Prototype、元件與開發交付。要做 UI 介面，Figma 通常更適合。
Figma 和 Miro 差在哪？
Miro 偏線上白板、工作坊、流程整理與團隊討論；Figma Design 偏介面設計與原型。若只是發想與整理共識，用 FigJam 或 Miro；若要產出設計稿，用 Figma Design。
工程師需要會 Figma 嗎？
工程師不一定要會畫設計稿，但最好會看 Figma 檔案、留言、Prototype、版本與 Dev Mode。這能幫助確認間距、尺寸、狀態、資產與設計變更，減少交付誤差。
Figma 可以離線使用嗎？
Figma 沒有完整離線模式。已載入的頁面在特定情況下可以暫時編輯並等網路恢復後同步，但多人協作、開啟未載入檔案、版本紀錄與雲端資源仍需要網路。
Figma 是哪一間公司的產品？它怎麼賺錢？
Figma 是 Figma, Inc. 的產品。Figma 主要透過訂閱方案、不同席位、企業方案與附加功能收費。Figma 已於 2025 年宣布在紐約證券交易所上市，這裡只作產品背景說明，不涉及投資建議。