Figma 是一款基於雲端的 UI/UX 設計工具，支援即時多人協作，免費版即可開始設計。 本文從零開始，完整教學 Figma 的介面操作、Auto Layout、Wireframe、Prototype 原型製作到 Dev Mode 輸出交付，並附上快捷鍵清單、外掛推薦與自學路線圖。
Figma 是什麼？
Figma 是一款基於瀏覽器的介面設計工具，讓設計師在雲端完成從草圖到互動原型的完整設計流程。 與傳統桌面軟體不同，Figma 不需要安裝任何程式，打開瀏覽器就能開始設計，所有檔案自動儲存在雲端。
Figma 之所以成為全球最受歡迎的 UI/UX 設計工具，在於它同時解決了設計師的五大核心需求：
- UI 設計：提供向量繪圖工具、樣式系統、元件庫，從按鈕到完整頁面都能精準設計
- 網頁設計：內建響應式 Frame 尺寸、佈局網格、Auto Layout，直接模擬不同裝置的顯示效果
- App 原型製作：Prototype 模式支援點擊、滑動、拖曳等互動觸發，搭配 Smart Animate 產生流暢動畫
- 設計系統建立：透過 Component 元件和 Variables 變數，建立可跨專案共用的設計規範
- 團隊即時協作：多人同時編輯同一檔案，游標即時可見，搭配評論功能讓溝通直接發生在設計稿上
Figma 在 2024 年也推出了多項 AI 功能，包括 Make Designs（用文字描述自動生成設計稿）、Rename Layers（AI 自動命名圖層）和 Visual Search（以圖搜圖找元件）。這些功能目前仍在持續迭代中，但已經能顯著加速設計流程中的重複性工作。
此外，Figma 旗下還有一款協作白板工具 FigJam，專為腦力激盪、心智圖整理和會議記錄設計。FigJam 內建便利貼、投票、計時器等協作功能，適合在設計專案啟動前進行需求釐清和創意發想。如果你對 FigJam 有興趣，可以參考我們的 FigJam 專文了解更多。
Figma 免費版夠用嗎？
一句話結論：個人學習和 3 人以下的小型協作，免費版完全夠用。
Figma 的 Starter 免費方案提供 3 個協作設計檔案和無限個人草稿，涵蓋完整的設計編輯器、基礎 Prototype 功能和 30 天版本歷史。對於正在自學 Figma 或進行小型專案的設計師來說，這些功能已經足以完成從 Wireframe 到互動原型的完整流程。
當你的團隊超過 3 人、需要無限檔案數量或進階的 Variables 功能時，再考慮升級付費方案即可。本文後段的費用比較章節有詳細的方案對比。
Figma vs. Adobe XD vs. Sketch vs. Penpot：4 款工具比較
選擇設計工具前，先了解市場上主要選項的差異，才能做出最適合自己工作流程的決定。
| 功能/特性 | Figma | Adobe XD | Sketch | Penpot |
|---|---|---|---|---|
| 平台支援 | 網頁版 + 桌面版（Win/Mac） | 已停止更新（2023 年底） | 僅 macOS | 網頁版（開源自架） |
| 即時協作 | ✅ 原生多人即時協作 | ⚠️ 有限協作（已停更） | ❌ 需第三方工具 | ✅ 多人即時協作 |
| 原型互動 | Smart Animate + Variables + 條件邏輯 | 語音互動（已停更） | 基礎原型功能 | 基礎互動連結 |
| 外掛生態 | 豐富（數千款外掛） | 已停止發展 | 豐富 | 發展中 |
| 設計系統 | Component + Variables + 設計系統分析 | 基礎元件庫 | 強大的 Symbol 系統 | 基礎元件庫 |
| 費用 | 免費版可用；付費 Full seat $16-90/月／Dev seat $12-35/月（2025 年 3 月改版後） | 已併入 Creative Cloud | 訂閱制 $10/月/編輯器（年繳）或 $120/年；Business $22/編輯器/月 | 完全免費（開源） |
| 開發交付 | Dev Mode 內建 | Inspect 模式（已停更） | 需搭配 Zeplin 等工具 | 內建 Inspect |
什麼情況選 Figma？以下 3 個判斷情境：
- 需要跨平台協作：團隊成員使用不同作業系統（Windows + macOS），或需要與非設計師（PM、工程師、客戶）共享設計稿即時查看，Figma 的瀏覽器原生體驗是最佳選擇
- 預算有限但需要專業功能：免費版已涵蓋完整設計工具和基礎 Prototype，對個人設計師和小團隊來說，不需要花一毛錢就能開始專業設計
- 需要完整的原型到交付流程：從 Wireframe → 高保真設計 → 互動原型 → Dev Mode 交付，全部在同一工具內完成，不需要在多個軟體間切換
補充說明：Adobe XD 已於 2023 年底停止功能更新，Adobe 官方建議用戶遷移至 Figma。如果你目前仍在使用 Adobe XD，現在是轉換到 Figma 的最佳時機。Penpot 則是開源替代方案，適合對資料隱私有高度要求、希望自行架設的團隊。
如果你完成 Figma 設計後需要將作品轉化為實際網站，Webflow 是設計導向用戶的最佳架站選擇——它的視覺編輯器讓你能以接近 Figma 的操作方式直接建構網站，設計自由度在所有架站平台中最高。
Figma 新手入門：註冊 + 介面操作完整說明
如何註冊 Figma 帳號
註冊 Figma 帳號只需要 2 分鐘，以下是完整步驟：
步驟 1：前往 Figma 官網，點擊右上角「Get started for free」
步驟 2：選擇註冊方式——可以使用 Google 帳號一鍵註冊，或輸入 Email 和密碼
步驟 3：填寫姓名和使用目的（選擇「Design」即可）
步驟 4：確認 Email 驗證信（如果使用 Google 帳號則自動跳過）
步驟 5：選擇 Starter 免費方案，進入 Figma 工作區
關於中文介面：
Figma 目前官方支援的介面語言包含英文、日文、韓文、西班牙文、葡萄牙文、法文、德文，以及簡體中文（zh-CN）。目前尚未提供繁體中文介面，台灣用戶若在 Account Settings → Language 切換，只能選擇「简体中文」。好消息是，Figma 的介面設計高度直覺，即使使用英文版也能快速上手。
Figma 操作介面完整導覽
打開 Figma 檔案後，你會看到四個主要區域。掌握這四個區域的功能，就能有效率地進行設計工作。
1. 文件區（Files Area）
這是登入 Figma 後的首頁，顯示所有專案和檔案。你可以在這裡建立新檔案、管理團隊專案，或快速存取最近編輯的設計稿。
最常用的 3 個操作：
- 點擊「+ New design file」建立新設計檔案
- 使用搜尋列快速找到特定檔案
- 右鍵檔案 → 「Move to project」整理檔案歸屬
2. 中間畫布（Canvas）
畫布是放置所有設計元素的無限空間。你可以在上面建立多個 Frame（畫框），每個 Frame 代表一個頁面或元件。
最常用的 3 個操作：
- 按住空白鍵 + 拖曳滑鼠來平移畫布
- Ctrl/Cmd + 滾輪縮放畫布
- 雙擊空白處取消所有選取
3. 上方工具列 + 左側圖層面板
上方工具列包含所有繪圖工具（矩形、圓形、文字、畫筆等）和模式切換（Design / Prototype / Inspect）。左側圖層面板則顯示所有元素的層級結構。
最常用的 3 個操作：
- 按 F 鍵快速選取 Frame 工具
- 在圖層面板中拖曳調整元素順序
- 點擊圖層旁的眼睛圖示隱藏/顯示元素
4. 右側屬性面板（Design Panel）
選取任何元素後，右側面板會顯示該元素的所有可調整屬性：尺寸、位置、填充顏色、描邊、陰影、字型設定等。
最常用的 3 個操作：
- 調整 Fill（填充）和 Stroke（描邊）的顏色與透明度
- 設定 Auto Layout 的方向、間距和 Padding
- 在 Export 區塊設定輸出格式和倍率
Frame、Section、Group 的差異與使用時機
這三個概念是 Figma 中最容易混淆的，但理解它們的差異對於建立良好的設計結構至關重要。
| 特性 | Frame（畫框） | Section（區段） | Group（群組） |
|---|---|---|---|
| 用途 | 設計容器，可設定獨立屬性 | 畫布組織工具，用於分類管理 | 臨時群組，方便同時移動多個元素 |
| Auto Layout | ✅ 可啟用 | ❌ 不影響 Auto Layout | ❌ 不支援 |
| Clip Content | ✅ 可裁切超出範圍的內容 | ❌ 不支援 | ❌ 不支援 |
| 獨立屬性 | ✅ 有自己的填充、描邊、圓角 | ⚠️ 僅有背景色和標題 | ❌ 無獨立屬性 |
| 轉為 Component | ✅ 可以 | ❌ 不可以 | ❌ 需先轉為 Frame |
| 適用場景 | 頁面、卡片、按鈕、任何 UI 元件 | 整理畫布上的不同設計階段或版本 | 臨時選取多個元素一起移動或對齊 |
判斷規則：
- 需要設定 Auto Layout、Clip Content 或獨立樣式 → 用 Frame
- 需要在畫布上整理不同區域（例如「桌面版」和「手機版」分區）→ 用 Section
- 只是暫時把幾個元素綁在一起方便移動 → 用 Group（快捷鍵 Ctrl/Cmd + G）
注意：Figma 已在 2022 年正式推出 Section 功能，它是獨立的畫布組織工具，與 Frame 有明確差異。Section 不會影響內部元素的 Auto Layout 計算，也不能設定 Clip Content，專門用於在大型專案中分類管理不同的設計區域。
Auto Layout 基礎操作
Auto Layout 是 Figma 中最核心的進階功能，它讓 Frame 內的元素能根據預設規則自動排列和調整大小——這正是實現響應式設計的關鍵。
為什麼 Auto Layout 重要？
沒有 Auto Layout，你需要手動調整每個元素的位置和大小。一旦內容變動（例如按鈕文字變長），所有相關元素都要重新對齊。Auto Layout 讓這些調整自動發生，大幅減少重複性工作。
3 個步驟啟用 Auto Layout：
步驟 1：選取你想要自動排列的元素（可以是多個元素，或一個已有子元素的 Frame）
步驟 2：按 Shift + A 啟用 Auto Layout（或右鍵 → Add Auto Layout）
步驟 3：在右側屬性面板設定：
- 方向：水平排列（→）或垂直排列（↓）
- 間距（Gap）：元素之間的距離
- Padding：Frame 邊緣到內容的距離（可分別設定上下左右）
常見錯誤：忘記設定 Hug / Fill 導致元素跑版
Auto Layout 中的每個子元素都有兩種尺寸模式：
- Hug contents：元素大小由內容決定（例如按鈕寬度隨文字長度變化）
- Fill container：元素自動填滿父層 Frame 的可用空間
最常見的錯誤是將所有子元素都設為 Fixed（固定尺寸），導致在不同螢幕寬度下元素溢出或留白過多。建議的做法是：外層容器用 Fill，內層內容用 Hug。
Figma Wireframe 教學：網頁設計從草圖開始
Wireframe 是網頁設計流程中不可跳過的步驟。它是低保真度的設計草圖，用簡單的線條和色塊勾勒出頁面的結構和佈局，不涉及顏色、字型等視覺細節。
什麼時候該畫 Wireframe？
- 需求確認前 → 畫低保真 Wireframe（灰階色塊 + 文字佔位符），用於與客戶或 PM 確認頁面架構和資訊層級
- 視覺設計前 → 畫中保真 Wireframe（加入真實文案、基礎互動邏輯），作為高保真設計的藍圖
以下是在 Figma 中繪製Wireframe 草圖的完整步驟：
步驟 1：建立新檔案
打開 Figma，點擊「+ New design file」建立新檔案。建議在檔案名稱中加入專案名稱和日期，例如「品牌官網_Wireframe_v1」。
步驟 2：設定畫布尺寸
按 F 鍵選取 Frame 工具，在右側屬性面板選擇預設裝置尺寸。常用尺寸：
- 桌面版：1440 × 900（設計區域 1200px 置中）
- 平板：768 × 1024
- 手機：375 × 812（iPhone 標準）
常見錯誤：忘記選正確的裝置尺寸，導致後期響應式設計時需要大幅調整佈局。建議一開始就建立桌面版和手機版兩個 Frame，同步設計。
步驟 3：繪製基本佈局
使用矩形工具（R 鍵）繪製頁面的主要區塊：Header、Hero 區、內容區、Footer。用淺灰色填充代表不同區域，深灰色代表圖片佔位。
步驟 4：設定佈局網格
在 Frame 上設定 12 欄網格（右側面板 → Layout Grid → Columns → Count: 12），確保所有元素對齊一致的網格系統。
常見錯誤：沒有設定網格就直接開始排版，導致元素間距不一致，後續轉為高保真設計時需要大量微調。
步驟 5：添加文字和互動元素
使用文字工具（T 鍵）添加標題、內文佔位符。用矩形 + 文字組合出按鈕和輸入欄。Wireframe 階段不需要選擇字型和顏色，統一使用灰階即可。
步驟 6：建立頁面連結
切換到 Prototype 模式，將按鈕和導航連結到對應的頁面 Frame，建立基本的用戶流程。
步驟 7：命名圖層並分享
確保所有 Frame 和關鍵元素都有清楚的命名（例如「Header」「CTA-Button」「Footer」），然後使用 Share 功能邀請團隊成員查看和評論。
常見錯誤：圖層全部使用預設名稱（Rectangle 1、Rectangle 2…），導致團隊成員無法理解設計結構，也讓後續的開發交接變得困難。
Figma Prototype 教學：互動原型製作完整流程
基礎 Prototype：建立頁面連結與轉場效果
Prototype（原型）讓你的靜態設計稿變成可互動的模擬體驗。在 Figma 中製作原型不需要寫任何程式碼，只需要在 Prototype 模式下建立元素之間的連結。
步驟 1：確保設計稿已完成基本 UI 設計，每個可互動的元素（按鈕、選單、連結）是獨立的 Frame 或 Group
步驟 2：點擊上方工具列的「Prototype」切換到原型模式
步驟 3：選取要設定互動的元素（例如一個按鈕），你會看到元素右側出現一個藍色小圓點
步驟 4：按住藍色圓點，拖曳到目標 Frame（例如另一個頁面），建立連結
步驟 5：在右側面板設定互動細節：
- 觸發條件：On Click（點擊）、On Hover（滑過）、On Drag（拖曳）等
- 動作：Navigate to（導航到指定頁面）、Open Overlay（開啟彈窗）、Back（返回上一頁）
- 轉場效果：Dissolve（淡入淡出）、Move In（滑入）、Push（推移）等
- 動畫時間：建議 200-300ms，太快會感覺突兀，太慢會讓使用者等待
步驟 6：點擊右上角的「▶ Present」按鈕預覽原型，測試所有互動是否符合預期
進階 Prototype：Smart Animate 與 Variables 設定
Smart Animate 是 Figma 最強大的動畫功能之一。它會自動偵測兩個 Frame 之間的差異，並產生流暢的過渡動畫。
Smart Animate 的關鍵規則：兩個 Frame 中的元件名稱必須相同，Figma 才能辨識它們是同一個元素並產生動畫。例如，Frame A 中有一個名為「icon-menu」的圖示在左上角，Frame B 中同名的圖示移到了右上角，Smart Animate 就會自動產生位移動畫。
Variables（變數） 是 Figma 的進階功能，讓你用變數控制設計中的動態行為。
實際範例：用 Variables 切換深色/淺色模式
- 建立一個 Color Variable Collection，定義兩組模式：Light 和 Dark
- 在 Light 模式中設定：背景色 #FFFFFF、文字色 #1A1A1A
- 在 Dark 模式中設定：背景色 #1A1A1A、文字色 #FFFFFF
- 將這些變數套用到設計元素上
- 在 Prototype 中設定一個切換按鈕，Action 選擇「Set Variable」來切換模式
分享與測試原型
完成原型後，你需要分享給團隊成員、客戶或利益相關者進行測試和反饋。
分享 Prototype 連結： 1. 在 Present 預覽模式中，點擊右上角的「Share」 2. 設定權限：「Anyone with the link」→「can view」 3. 複製連結發送給對方——他們不需要 Figma 帳號就能在瀏覽器中體驗原型
在手機上預覽 Prototype： 1. 在手機上安裝 Figma Mirror App（iOS / Android 皆可） 2. 登入與電腦相同的 Figma 帳號 3. 在電腦端選取手機尺寸的 Frame，手機上會即時同步顯示 4. 直接在手機上操作原型，體驗最接近真實的互動效果
Figma 輸出與交付：設計稿轉工程師
輸出圖片與 PDF（PNG / JPG / SVG / PDF）
設計完成後，你經常需要將設計稿輸出為不同格式的檔案。以下是各格式的適用情境：
| 格式 | 適用情境 | 設定建議 |
|---|---|---|
| SVG | Icon、Logo、向量圖形 | 保持向量可縮放，檔案最小 |
| PNG | 截圖展示、含透明背景的圖片 | 輸出 2x 倍率確保高解析度 |
| JPG | 照片類圖片、社群媒體素材 | 品質設定 80-90% 平衡畫質和檔案大小 |
| 簡報、設計規格文件 | 適合列印或正式文件交付 |
輸出步驟：選取 Frame → 右側面板最下方「Export」區塊 → 選擇格式和倍率 → 點擊「Export」
Dev Mode：讓工程師直接取得 CSS 數值
Dev Mode 是 Figma 專為設計師與工程師交接而設計的模式，讓工程師不需要猜測設計稿中的間距、顏色和字型數值。
如何開啟 Dev Mode： 1. 在編輯器右上角，將模式從「Design」切換到「Dev Mode」（開發模式） 2. 介面會切換為工程師視角，顯示程式碼相關資訊
工程師在 Dev Mode 中可以做的事：
- 複製 CSS：點選任何元素，右側面板直接顯示對應的 CSS 程式碼（包含 width、height、padding、font-size、color 等），一鍵複製
- 查看間距數值：選取元素後，將滑鼠移到其他元素上，自動顯示兩者之間的精確間距（px）
- 下載切圖資源：直接在 Dev Mode 中下載設計師已標記為可輸出的圖片資源，支援 PNG、SVG、JPG 等格式
注意：Dev Mode 自 2024 年起為付費功能，需要 Professional 方案的 Dev seat（$12/月）或 Full seat（$16/月）。Starter 免費版不包含 Dev Mode，僅提供設計檔案中的基本元件檢視（如尺寸、顏色、間距），無法存取完整的 CSS/iOS/Android 代碼生成與資源匯出功能。
Figma 轉 HTML：3 種方法比較
Figma 本身不直接輸出 HTML 程式碼，但有多種方式可以將設計稿轉化為可用的網頁。如果你想了解更多網頁設計的基礎知識，可以參考我們的架站教學。
| 方法 | 適用情境 | 優點 | 缺點 |
|---|---|---|---|
| Figma 外掛（Anima、Builder.io） | 快速 Demo、Landing Page | 速度快，幾分鐘產出 | 程式碼品質參差不齊 |
| 手動切版 | 正式專案、需要高品質程式碼 | 最精準、最優化的結果 | 耗時，需要前端開發技能 |
| 第三方工具（Webflow、Builder.io） | 預算充足的團隊、設計導向專案 | 視覺化操作，接近設計稿效果 | 可能需要額外費用 |
Builder.io 是近年崛起的 Figma 轉程式碼工具，支援將 Figma 設計直接轉換為 React、Vue、HTML 等多種框架的程式碼，品質優於多數舊有外掛。
如果你不想處理程式碼，想直接將設計轉化為上線的網站，Webflow 提供了最接近 Figma 設計體驗的視覺化架站方式——設計自由度在所有架站平台中最高，50% 第一年佣金的方案也讓入門成本相對合理。
Figma 外掛推薦：提升設計效率的必裝清單
如何安裝與管理外掛
安裝外掛 3 步驟：
- 在 Figma 編輯器中，點擊上方工具列的 Resources 圖示（或按 Shift + I）
- 切換到「Plugins」分頁，搜尋你需要的外掛名稱
- 點擊「Run」直接使用，或點擊「Save」加入常用清單
管理已安裝的外掛：右鍵畫布 → Plugins → 選擇已儲存的外掛快速啟動，或進入 Manage plugins 卸載不需要的外掛。
最推薦的 10 個 Figma 外掛
以下是根據實際設計工作流程篩選的高效外掛，每個都附上具體的適用情境：
| 外掛名稱 | 適用情境 | 說明 |
|---|---|---|
| Iconify | 需要快速插入 icon 時 | 整合超過 15 萬個免費 icon 素材，支援 Material、Font Awesome 等主流圖示庫 |
| Unsplash | 需要高品質佔位圖片時 | 直接在 Figma 中搜尋並插入免版稅照片 |
| Builder.io | 設計稿需要轉為程式碼時 | 將 Figma 設計轉換為 React、Vue、HTML 等框架程式碼 |
| Autoflow | 繪製用戶流程圖時 | 自動在元件之間繪製箭頭，快速標示流程關聯 |
| Content Reel | 需要真實內容填充設計時 | 提供姓名、地址、頭像等擬真數據，讓設計更接近真實效果 |
| Figmotion | 需要在 Figma 內製作動畫時 | 直接在 Figma 中建立和編輯動畫效果 |
| A11y – Color Contrast Checker | 檢查無障礙設計時 | 驗證配色對比度是否符合 WCAG 標準 |
| Mockuuups Studio | 製作產品展示圖時 | 快速將設計稿套入手機、筆電等裝置模型 |
| Design Lint | 設計稿交付前品質檢查時 | 自動偵測設計中的不一致性（顏色、字型、間距偏差） |
| Stark | 全面的無障礙設計檢查時 | 提供色盲模擬、對比度檢查、焦點順序檢查等完整無障礙工具 |
Figma 模板與設計資源：快速開始設計
哪裡找 Figma 模板？
- Figma Community：官方社區，數千個免費模板，品質有保障
- Figma 內建模板：建立新檔案時可直接選用
- UI8 / Creative Market：付費高品質模板，適合商業專案
- Dribbble / Behance：設計師作品集中常附帶 Figma 原始檔
- GitHub：開源設計系統（如 Ant Design、Material Design）的 Figma 版本
推薦 Figma 模板清單（依用途分類）
網頁設計用：
- Material 3 Design Kit：Google 官方 Material Design 元件庫，適合 Android 和網頁設計
- Bootstrap 5 UI Kit：基於 Bootstrap 框架的響應式元件，前端工程師熟悉的設計語言
- 50+ Landing Page Designs：各行業的 Landing Page 模板，快速啟動新專案
App 設計用：
- iOS Design Kit：包含最新 iOS 元件和模板，符合 Apple Human Interface Guidelines
- Ant Design Open Source：企業級產品設計元件庫
Wireframe 用：
- Free Online Wireframe Kit：低保真原型設計專用，灰階色塊和基礎元件
設計系統用：
- Dashboard UI Kit：數據儀表板專用元件，適合 SaaS 產品設計
- Figma eCommerce UI Kit：電商專案的完整元件庫，包含產品頁、購物車、結帳流程
選擇模板時，建議優先使用與你的專案技術棧一致的模板（例如用 Bootstrap 框架開發就選 Bootstrap UI Kit），這樣設計稿轉交給工程師時，元件命名和結構都能直接對應。更多免費設計素材和中文字體推薦，可以參考我們的專文。
Figma 費用方案：免費版 vs. 付費版怎麼選？（NT$ 換算版）
| 項目 | Starter（免費） | Professional | Organization | Enterprise |
|---|---|---|---|---|
| 月費 | 免費 | Full $16／Dev $12（約 NT$512／384） | Full $55／Dev $25（約 NT$1,760／800） | Full $90／Dev $35（約 NT$2,880／1,120） |
| 設計檔案 | 3 個協作檔案 + 無限個人草稿 | 無限檔案 | 無限檔案 | 無限檔案 |
| Prototype | 基礎互動 | Variables + 條件邏輯 | 全部功能 | 全部功能 |
| Dev Mode | 基本程式碼檢視 | 進階程式碼生成 | 私有外掛 + 集中管理 | 進階管理 + 專用工作區 |
| 版本歷史 | 30 天 | 無限 | 無限 | 無限 |
| 設計系統 | 基本元件和樣式 | 元件 + 4 種模式 | 組織級設計系統 | 自定義工作區 |
| 團隊協作 | 基本多人協作 | 私有專案 | 分支和合併 + 無限團隊 | 客人訪問控制 |
價格僅供參考，以官網為準。匯率以 1 USD = 31 TWD 換算。
選擇建議：
- 個人學習 / 自由接案 → Starter 免費版即可，3 個協作檔案對個人專案綽綽有餘
- 2-5 人小團隊 → Professional（Full seat 約 NT$512/人/月，Dev seat 約 NT$384/人/月），無限檔案和進階 Prototype 功能是團隊協作的剛需
- 10 人以上設計團隊 / 企業 → Organization，需要設計系統分析、分支合併和集中管理
免費版的 3 個主要限制（幫你快速判斷是否需要升級）： 1. 只能建立 3 個協作設計檔案（個人草稿不限） 2. 版本歷史只保留 30 天（付費版無限） 3. Variables 在 Starter 最多支援 10 個模式；Professional 最多 20 個，Organization/Enterprise 無限制
Figma 快捷鍵完整清單
掌握快捷鍵是提升 Figma 操作效率最直接的方式。以下先列出最重要的 10 個快捷鍵，建議優先記住這些：
最重要的 10 個快捷鍵
| 快捷鍵（Mac） | 快捷鍵（Win） | 功能 | 使用頻率 |
|---|---|---|---|
| V | V | 選擇工具 | ⭐⭐⭐⭐⭐ |
| F | F | Frame 工具 | ⭐⭐⭐⭐⭐ |
| R | R | 矩形工具 | ⭐⭐⭐⭐ |
| T | T | 文字工具 | ⭐⭐⭐⭐ |
| Shift + A | Shift + A | 啟用 Auto Layout | ⭐⭐⭐⭐ |
| Cmd + D | Ctrl + D | 複製選取的物件 | ⭐⭐⭐⭐ |
| Cmd + G | Ctrl + G | 群組 | ⭐⭐⭐ |
| Cmd + Z | Ctrl + Z | 撤銷 | ⭐⭐⭐⭐⭐ |
| Cmd + \ | Ctrl + \ | 隱藏/顯示介面 | ⭐⭐⭐ |
| I | I | 吸管工具 | ⭐⭐⭐ |
完整快捷鍵表格
| 功能類別 | 快捷鍵（Windows） | 快捷鍵（macOS） | 功能描述 |
|---|---|---|---|
| 通用 | Ctrl + N | Cmd + N | 新建文件 |
| 通用 | Ctrl + Z | Cmd + Z | 撤銷 |
| 通用 | Ctrl + Shift + Z | Cmd + Shift + Z | 重做 |
| 通用 | Ctrl + C | Cmd + C | 複製 |
| 通用 | Ctrl + V | Cmd + V | 貼上 |
| 通用 | Ctrl + X | Cmd + X | 剪切 |
| 通用 | Ctrl + A | Cmd + A | 全選 |
| 通用 | Ctrl + G | Cmd + G | 群組 |
| 通用 | Ctrl + Shift + G | Cmd + Shift + G | 取消群組 |
| 通用 | Ctrl + F | Cmd + F | 查找 |
| 畫布 | 空白鍵 + 拖動 | 空白鍵 + 拖動 | 移動畫布 |
| 畫布 | Ctrl + 滾輪 | Cmd + 滾輪 | 縮放畫布 |
| 畫布 | 1 | 1 | 縮放至 100% |
| 畫布 | 2 | 2 | 縮放至 200% |
| 畫布 | Ctrl + 1 | Cmd + 1 | 縮放以適應畫布 |
| 畫布 | Ctrl + 2 | Cmd + 2 | 縮放至選中物件 |
| 物件 | Ctrl + D | Cmd + D | 複製選擇的物件 |
| 物件 | Ctrl + [ | Cmd + [ | 向下移動圖層 |
| 物件 | Ctrl + ] | Cmd + ] | 向上移動圖層 |
| 物件 | Ctrl + Shift + [ | Cmd + Shift + [ | 移動到最底層 |
| 物件 | Ctrl + Shift + ] | Cmd + Shift + ] | 移動到最頂層 |
| 工具 | T | T | 文字工具 |
| 工具 | R | R | 矩形工具 |
| 工具 | O | O | 圓形工具 |
| 工具 | L | L | 線條工具 |
| 工具 | P | P | 鉛筆工具 |
| 工具 | F | F | Frame 工具 |
| 工具 | H | H | 移動工具 |
| 工具 | V | V | 選擇工具 |
| 工具 | I | I | 吸管工具 |
| 文字 | Ctrl + B | Cmd + B | 粗體 |
| 文字 | Ctrl + I | Cmd + I | 斜體 |
| 文字 | Ctrl + U | Cmd + U | 底線 |
| 文字 | Ctrl + Shift + O | Cmd + Shift + O | 文字轉路徑 |
| 對齊 | Shift + 方向鍵 | Shift + 方向鍵 | 以 10px 移動物件 |
| 對齊 | Ctrl + Shift + L | Cmd + Shift + L | 左對齊 |
| 對齊 | Ctrl + Shift + R | Cmd + Shift + R | 右對齊 |
| 對齊 | Ctrl + Shift + H | Cmd + Shift + H | 水平居中 |
| 對齊 | Ctrl + Shift + V | Cmd + Shift + V | 垂直居中 |
| 其他 | Ctrl + Shift + K | Cmd + Shift + K | 建立/解除元件 |
| 其他 | Ctrl + Alt + K | Cmd + Option + K | 建立元件實例 |
| 其他 | Ctrl + \ | Cmd + \ | 隱藏/顯示介面 |
| 其他 | Ctrl + Shift + E | Cmd + Shift + E | 輸出選定項目 |
| Auto Layout | Shift + A | Shift + A | 啟用 Auto Layout |
Figma 自學路線圖 + 學習資源
如果你是 Figma 新手，以下的 4 週自學計畫能幫你有系統地掌握核心技能。這個計畫假設你每天投入 1-2 小時練習。
第 1 週：介面熟悉 + Frame / Auto Layout 基礎
- 目標：能獨立建立 Frame、使用基本繪圖工具、設定 Auto Layout
- 練習：模仿一個簡單的卡片元件（包含圖片、標題、描述、按鈕），用 Auto Layout 讓它能自動調整大小
- 資源：Figma 官方「Getting Started」教學
第 2 週：Component 元件系統建立
- 目標：理解 Component 和 Instance 的關係，能建立可重用的設計元件
- 練習：建立一組按鈕元件（包含 Primary、Secondary、Disabled 三種狀態），並在多個頁面中使用
- 資源：Figma 官方「Components」教學
第 3 週：Prototype 互動原型
- 目標：能建立完整的頁面流程、設定轉場效果和 Smart Animate
- 練習：為第 1-2 週的設計稿加上互動，建立首頁 → 產品頁 → 結帳頁的完整流程
- 資源：Figma 官方「Prototyping」教學
第 4 週：完成一個完整的網頁設計專案
- 目標：從 Wireframe 到高保真設計到互動原型，獨立完成一個 3-5 頁的網站設計
- 練習：選擇一個真實的網站（例如你喜歡的咖啡店官網），重新設計它的桌面版和手機版
- 資源：Figma Community 的模板作為參考
推薦學習資源：
- Figma 官方學習中心：Figma Learn — 最完整的官方教學文件
- Figma 官方 YouTube 頻道：涵蓋從基礎到進階的影片教學
- Coursera Figma 入門課程：Get Started with Figma — 結構化的線上課程，適合偏好系統學習的人
- 中文 YouTube 頻道推薦：六角學院、PAPAYA 電腦教室都有 Figma 中文教學系列
如果你想更深入學習 UI/UX 設計的完整知識體系，可以參考我們整理的 UI/UX 自學課程推薦，其中包含 Google UX Design Certificate 等高品質免費課程。想了解 UI 設計師必備技能的完整清單，也可以參考我們的 UI 設計專文。
結論
Figma 作為當前最主流的 UI/UX 設計工具，從個人學習到企業級團隊協作都能勝任。以下是本文的核心重點：
- Figma 免費版即可開始：Starter 方案提供 3 個協作檔案和完整設計工具，個人學習和小型專案不需要花一毛錢
- Auto Layout 是核心技能：掌握 Auto Layout 的 Hug / Fill 邏輯，是實現響應式設計和高效率工作流程的關鍵
- Frame、Section、Group 各有用途：Frame 用於設計容器、Section 用於畫布組織、Group 用於臨時群組，選對工具讓設計結構更清晰
- Prototype + Smart Animate 讓設計活起來：不需要寫程式碼，就能建立流暢的互動原型，用於驗證設計概念和客戶提案
- Dev Mode 是設計師與工程師的橋樑：讓工程師直接取得 CSS 數值和切圖資源，大幅減少交接過程中的溝通成本
下一步行動：前往 Figma 官網，用 Google 帳號一鍵註冊免費帳號，建立你的第一個 Frame，試著用 Auto Layout 做出一張卡片元件——整個過程不到 10 分鐘。
如果你完成了 Figma 設計，想將作品轉化為實際上線的網站，可以考慮使用 Webflow 這類設計導向的架站平台，它的視覺編輯器讓你能以接近 Figma 的操作方式直接建構網站。或者，如果你需要更大的擴充性和外掛生態系，WordPress.com 是全球 43% 網站使用的架站平台，免費方案即可開始建站，不需要信用卡。
Figma 常見問題（FAQ）
Figma 是什麼？可以做什麼用？
Figma 是一款基於雲端的 UI/UX 設計工具，支援即時多人協作。它可以用於 UI 介面設計、網頁設計、App 原型製作、設計系統建立和團隊協作。與傳統桌面軟體不同，Figma 在瀏覽器中即可使用全部功能，所有檔案自動儲存在雲端。
Figma 有中文版嗎？
有部分支援。Figma 官方介面語言目前包含英文、日文、韓文、西班牙文、葡萄牙文、法文、德文，以及**簡體中文**（zh-CN）——**但尚未提供繁體中文介面**。台灣用戶若在 Account Settings → Language 切換，只能選擇「简体中文」。介面直覺，英文版也能快速上手；中文教學資源可參考六角學院、PAPAYA 電腦教室等 YouTube 頻道。
Figma 免費版有什麼限制？
Figma 免費版（Starter）提供 3 個協作設計檔案、無限個人草稿、基礎 Prototype 功能和 30 天版本歷史。主要限制是協作檔案數量上限為 3 個、Variables 在 Starter 最多支援 10 個模式（Professional 20 個、Organization/Enterprise 無限制），以及 Dev Mode 需要付費 seat 才能使用（免費版僅能在設計檔案中查看基本元件屬性）。個人學習和 3 人以下小團隊使用免費版已經足夠。
不會寫程式可以用 Figma 嗎？
完全可以。Figma 是視覺化的設計工具，所有操作都透過拖放、點擊和屬性面板完成，不需要寫任何程式碼。即使是 Prototype 互動原型的製作，也只需要在介面上拖曳連結線和設定觸發條件。
Figma 可以直接輸出網頁嗎？
Figma 本身不直接輸出完整的 HTML 網頁，但可以透過三種方式實現：使用外掛（如 Anima、Builder.io）自動轉換、手動根據設計稿切版、或使用 Webflow 等第三方工具將設計轉化為上線網站。Dev Mode 也能讓工程師直接複製 CSS 程式碼，加速開發過程。
Figma 和 Adobe XD 哪個比較好？
Adobe XD 已於 2023 年底停止功能更新，Adobe 官方建議用戶遷移至 Figma。目前 Figma 在即時協作、外掛生態、Prototype 功能和社群資源等方面都明顯領先。如果你是新手，直接選擇 Figma 即可。
如何在 Figma 中建立元件（Component）？
選取你想轉化為元件的設計元素，使用快捷鍵 Ctrl + Alt + K（Windows）或 Cmd + Option + K（Mac）即可建立 Component。建立後，你可以在任何地方拖曳該元件建立 Instance（實例），對原始 Component 的修改會自動同步到所有 Instance。
Figma 付費版值得升級嗎？
取決於你的需求。如果你是個人設計師且專案數量不多，免費版已經夠用。但如果你的團隊超過 3 人、需要無限檔案數量、Variables 多模式功能或完整的 Dev Mode，Professional 方案（Full seat $16/月或 Dev seat $12/月）是值得的投資。
Auto Layout 和手動排版有什麼差別？
Auto Layout 讓 Frame 內的元素根據預設規則自動排列和調整大小。當內容變動時（例如文字變長、新增元素），其他元素會自動重新排列。手動排版則需要你逐一調整每個元素的位置和大小。在響應式設計和需要頻繁修改的專案中，Auto Layout 能節省大量時間。
Figma 的學習曲線陡嗎？
Figma 的基礎操作（繪圖、排版、文字）對有任何設計軟體經驗的人來說，通常 1-2 天就能上手。進階功能（Auto Layout、Component、Variables、Prototype）則需要 2-4 週的持續練習。相較於 Sketch 或 Adobe 系列工具，Figma 的學習曲線是最平緩的。
Figma 支援哪些平台？
Figma 主要在瀏覽器中運行，支援 Chrome、Firefox、Safari、Edge 等主流瀏覽器。同時提供 Windows 和 macOS 的桌面應用程式。手機端有 Figma Mirror App（iOS / Android），用於即時預覽設計稿和測試 Prototype。
