Figma 教學完整指南：從基礎功能到高效協作，打造專業 UI/UX 設計流程

Figma 基本介紹

Figma 是一款基於雲端的 UI/UX 設計工具，徹底改變了團隊協作模式。它允許設計師、開發者及相關成員在同一檔案中即時編輯、評論與預覽，無需頻繁傳輸檔案或擔心版本衝突。本 figma 教學將從核心優勢、版本差異切入，幫助你快速掌握為什麼 Figma 成為現代產品設計的必備平台，並為後續實戰技巧建立正確觀念。

1.1：什麼是 Figma？

Figma 是什麼？Figma 是運行於瀏覽器的矢量設計軟體，所有檔案儲存在雲端，支援 Mac、Windows、Linux 及 iOS 裝置。其即時協作功能讓多人同時編輯同一設計稿，變更立即同步，類似 Google Docs 的體驗。這消除了傳統本地軟體需手動存檔、傳輸的麻煩，大幅提升團隊效率。

1.2：為何選擇 Figma？

選擇 Figma 的主要原因包括：無需安裝任何軟體，打開瀏覽器即可使用；即時多人編輯與評論，溝通成本極低；設計稿分享簡單，可生成唯讀連結給客戶或開發者；內建強大的設計系統工具，如 Components 與 Styles，確保一致性；豐富的插件生態系，能擴展功能，想知道有哪些好用的工具，可參考這份 Figma 外掛（plugin）推薦清單。若你正在評估不同設計工具，這份 Figma vs Sketch 比較 也能幫助你做出更全面的判斷。這些特性使其成為跨職域協作的首選工具。

1.3：免費版 vs Pro 版

Figma 免費版適合個人學習與小型團隊，但限制專案數量、版本歷史天數（30 天）及團隊編輯者人數（最多 2 人）。想了解完整方案差異，可參考 Figma 定價方案（每位編輯者每月約 15 美元）提供 unlimited 專案、完整版本歷史、更詳細的權限控制及優先支援。企業版則加入安全性與管理功能。根據團隊規模與需求選擇，初學者可從免費版開始熟悉操作。

Figma 介面功能說明

熟悉 Figma 介面是高效設計的第一步。畫布中央是工作區，左側面板管理圖層與 asset，右側面板調整屬性與樣式，頂端工具列提供各種繪圖與原型工具；若你剛接觸 Figma，建議先閱讀 Figma 基礎操作入門；新手必會介面、工具與快捷鍵，建立基礎操作概念。本節將詳細解析各面板功能與實用技巧，幫助你快速導航，避免在複雜介面中迷失。

2.1：左側面板 – 圖層與組

左側面板顯示目前檔案的所有圖層、頁面與 component。圖層以樹狀結構呈現，可拖曳重新排序、群組（Group）或建立框架（Frame）。使用搜尋框快速定位圖層，並透過眼睛圖示隱藏/顯示。組合（Group）與框架不同，框架具有自定尺寸，更適合響應式佈局。熟悉圖层面板是組織複雜設計的基礎。

2.2：右側面板 – 樣式 & 變量

選取物件後，右側面板顯示其屬性：位置、尺寸、填充、描邊、效果等。此處可建立與管理「樣式」（Styles），包括色彩、文字、效果，一次修改即可全域更新。最新版本引入「變量」（Variables），能動態控制色彩、數字、字串，適用於深色模式、多尺寸適配，是設計系統進階應用的核心。

2.3：工具列 – 形狀、文字、畫筆、原型

頂端工具列包含基本工具：矩形（R）、橢圓（O）、直線（L）、文字（T）、鋼筆（P）與原型（Prototype）模式。熟記快速鍵能大幅提升效率，例如按 V 切換選擇工具，按 A 建立自動排版框架。原型工具用於連接畫面設定互動，將靜態設計轉為可點擊的原型。

Frame vs Section 的差異

Frame 與 Section 是 Figma 中兩種常見的容器，但用途截然不同。初學者常混淆兩者，導致佈局混亂。本節將清晰定義各自的特性與適用場景，讓你在組織設計稿時做出正確選擇，特別是面對多頁面或複雜儀表板時。

3.1：Frame（框架）

Frame 是具有明確尺寸的容器，類似 artboard。它常用於代表單一畫面（如手機畫面、網頁頁面），可設定固定或弹性尺寸。Frame 內的物件若超出邊界會被裁切，且 Frame 本身可套用自動排版（Auto Layout），Behaviour 設定為「內容」時會隨內容擴展。Frame 也是原型連結的目標單位。

3.2：Section（區段）

Section 是僅用於視覺組織的無尺寸容器，不會影響佈局或導出。它常用來劃分大型畫布上的不同區域，例如在完整網站線框中標示「Header」、「Footer」區域。Section 不會被匯出為資產，也不參與自動排版計算，純粹是設計師的組織工具。

3.3：實際使用場景比較

當你設計一個 iPhone App 畫面時，應使用 Frame 設定為 375x812 像素；若在同一畫布上繪製多個手機畫面，可用 Section 將它們分組標註。在 Component 變體中，Frame 用於定義每個狀態的尺寸，而 Section 可用來分類變體屬性。總之，需要尺寸、導出或原型時選 Frame；僅為畫布組織選 Section。

基本設計元素

無論多複雜的介面，皆由形狀、文字、圖像等基本元素構成。扎實掌握這些元素的屬性與操作技巧，是建立精緻設計稿的關鍵。本節將從創建、編輯到最佳化，一步步教你如何靈活運用 Figma 內建的設計元素。

4.1：形狀（矩形、圓形、折線）

使用工具列或快速鍵建立形狀後，可於右側調整填充、描邊、圓角（Corner Radius）。按住 Shift 可維持比例，按 Alt 從中心縮放。多重選取多個形狀後，可對齊、分布或合併（Boolean operations）。技巧：為常用形狀建立 Component，例如按鈕基底，後續直接拖入實例使用。

4.2：文字

文字工具（T）建立文字框後，可設定字體家族、字重、大小、行高、對齊。Figma 支援字體樣式（Text Styles），將常用組合儲存為樣式，方便全域應用。段落文字框可自動換行，並調整縮排與間距。注意：嵌入字體可能影響協作，盡量使用系統字體或 Figma Fonts。

4.3：圖像

透過拖曳或貼上匯入圖像（支援 PNG、JPG、SVG、WebP）。選取圖像後，可填充（Fill）為圖片，並使用裁切（Crop）或圖層遮罩（Mask）控制顯示範圍。SVG 檔案在 Figma 中會轉為矢量圖層，可個別編輯路徑。技巧：使用「校色」效果快速調整圖像色調，或結合「混合模式」創造特殊視覺。

可重用元件（Components），設計一致性

Components 是 Figma 設計系統的心臟，能確保 UI 元素的一致性並大幅提升修改效率。本節將從基礎概念到進階變體管理，全面解析如何建立、使用與維護 Component，让你的設計稿易於擴展與迭代。

5.1：什麼是 Component？

Component 由一個「主元件」（Master Component）和無數「實例」（Instances）組成。主元件是定義藍本，任何修改只在此處進行；實例是主元件的複本，可局部覆寫屬性（如文字、顏色），但當主元件更新時，所有實例會同步變更，除非該屬性已被覆寫。這種層級關係是保持設計體系統一的關鍵。

5.2：建立元件的流程

選取要重用的圖層群組或 Frame，右鍵選擇「Create Component」或按 Ctrl/Cmd+Alt+K。系統會自動將該圖層轉為 Component，並在圖层面板中顯示鑽石圖示。建議立即為 Component 命名並分類至特定頁面，方便搜尋。建立後，從左側面板拖拽到畫布即可創建實例。

5.3：實例變體（Variants）

變體（Variants）讓單一 Component 集合管理多種狀態，例如按鈕的預設、懸停、禁用狀態；這正是 Figma Component 元件建立；用 Variants 與 Properties 控制架構 的核心應用。建立時，先為主元件添加屬性（Property），如「State」並設定值（default、hover）。然後複製主元件，修改不同狀態，全部選中後右鍵「Combine as variants」。實例面板會出現下拉選單，切換狀態一目了然。

5.4：主元件修改自動同步

當你修改主元件的任何層級（如形狀顏色、文字字體），所有實例會即時更新，除非該屬性已被實例局部覆寫。例如，主元件按鈕顏色改為藍色，所有實例跟進；但若某實例的文字已被改為自定內容，則文字不會恢復。這機制允許全局控制與局部彈性並存。

5.5：Component 版本控制

Figma 內建版本歷史（Version History），可查看每次儲存的快照，並恢复到任意版本。在 Component 頁面，右鍵 Component 可「Show version history」。團隊協作時，建議在重大修改前建立版本備註，避免錯誤修改影響全體。若需長期分支開發，可複製 Component 頁面到新檔案，完成後再合併。

原型功能（Prototype）與互動設計

原型功能將靜態設計轉化為可互動的原型，用於使用者測試與內部演示。本節將說明如何連接畫面、設定觸發事件與動畫，並分享給他人收集回饋，完整呈現設計流程的最後一哩。

6.1：設定互動

切換到原型模式（Prototype）後，選取 Frame 或物件，右側會出現連接節點。拖曳節點到目標 Frame 以建立連結。設定觸發事件（Trigger），如「On Click」、「On Hover」、「While Pressed」或「After Delay」。動作（Action）主要是「Navigate to」切換畫面，或「Open Overlay」顯示浮層。

6.2：過渡動畫

連結後可設定動畫：過渡（Transition）類型包括「Instant」、「Dissolve」、「Slide」、「Push」等，調整持續時間（Easing）與速度（Duration）。例如，頁面切換使用「Smart Animate」能保留物件的運動軌跡，實現流暢的視覺效果。適度的動畫能提升體驗，但避免過度裝飾而分散注意力。

6.3：共享與預覽

完成原型後，點擊右上角「Share」按鈕，生成分享連結。可設定權限為「Anyone with the link can view」或限制為團隊成員。在瀏覽器打開連結即可進行互動預覽。開發者也可在此模式下檢查設計細節與代碼，若想了解完整的設計稿交付流程，可參考 Figma Dev Mode 開發者模式 的說明。使用评论功能直接在高保真原型上標註問題。

從設計到開發：Figma 自動生成 CSS 代碼

設計交接是團隊協作的關鍵環節。Figma 能自動生成 CSS、iOS、Android 等平台代碼，減少開發者手動測量的時間，確保視覺還原度。本節將指導如何提取精確代碼，並探討 API 自動化的可能性。

7.1：為何需要 CSS 匯出？

傳統設計交接依賴标注工具，開發者需自行計算間距、顏色值，易產生誤差。Figma 直接提供 CSS 屬性，包含尺寸、顏色（HEX/RGBA）、字體、間距、陰影等，開發者可直接複製貼上到樣式表，大幅縮短實作時間，同時保持設計系統的一致性。

7.2：查看 CSS 代碼

選取單一物件或群組後，右側屬性面板底部有「Code」標籤。切換到 CSS 即可看到對應代碼，支援 CSS、SwiftUI、XML 等格式。Figma 會智能合併重複屬性，例如多重陰影會以逗號分隔。若物件使用 Auto Layout，CSS 會包含 flexbox 相關屬性。

7.3：複製到開發環境

在 Code 面板點擊「Copy」即可複製全部代碼。貼入專案的 CSS 或 SCSS 檔後，可能需要微調，例如將 hex 顏色轉為變數，或調整 flex 屬性以符合既有佈局。建議開發者與設計師事先約定命名與單位慣例，減少後續調整成本。對於圖像資產，使用「Export」功能匯出多種尺寸。

7.4：使用 Figma API 進一步自動化

Figma API 允許程式化存取設計稿，開發者可撰寫腳本自動提取所有元件的 CSS、顏色變量、字體清單，並生成風格的代碼庫。例如，結合 CI/CD 流程，每次設計更新時自動同步設計 token 到專案。這需要基本程式知識，但能實現設計與開發的真正無縫銜接。

AI 功能與 Material Design 色彩系統整合

Figma 近年積極整合 AI 輔助設計，並與 Material Design 等標準色彩系統深度結合，加速創意發想與規範化流程。本節將介紹實用的 AI 工具，以及如何導入 Material Palette 建立可變色彩變量，提升設計效率與一致性。

8.1：Wireframe Designer

Wireframe Designer 是 Figma 內建的 AI 工具（需啟用），根據文字描述自動生成低保真線框圖。輸入「用戶登入頁面，包含 email、密碼輸入與登入按鈕」，AI 會產出多種佈局選項。這些線框可作為起點，再手動調整細節，大幅節省初期構圖時間。

8.2：自動版型生成

AI 還能根據內容自動套用 Auto Layout 與約束（Constraints）。選取多個物件，使用「Auto layout」後，AI 建議間距與對齊方式。或是使用插件如「Magician」根據提示生成圖片、文案填充，快速豐富原型內容。雖需最終審核，但對快速迭代極有幫助。

8.3：Material Design 色彩系統整合

Material Design 提供經過無障礙測試的色彩調色板。從 Google 官方下載 Material Theme Builder 或直接匯入 Figma Community 的 Material Design 檔案。將 Primary、Secondary 等色彩定義為變量（Variables），並套用至 Components。這樣可確保所有 UI 元素遵守品牌規範，且切換深色模式時只需更新變量值。

8.4：結合 AI 與色彩系統的實戰案例

假設要建立一支新產品的設計系統：先用 AI 生成多種首頁線框，選定佈局後套用 Material 色彩變量快速上色，將按鈕、文字欄轉為 Component 並建立變體。過程中，AI 協助填充內容，色彩變量確保一致性。最終輸出完整設計文檔與開發代碼，全程節省數小時工時。

多人協作工作流程

Figma 的核心優勢在於即時協作，但若無規範流程，易導致混亂；想了解完整的 Figma 協作流程，可參考從權限設定到 Dev Mode 交付的實戰指南。本節涵蓋評論、版本控制與權限管理的最佳實務，幫助團隊在多人編輯時保持高效溝通，同時保護設計資產完整性。

9.1：評論功能

評論（Comment）是異步溝通的關鍵。在畫布任意位置按 C 新增評論，可標記特定圖層、@隊友、附加檔案。評論可設為「Resolved」避免重複處理。技巧：在原型模式下評論會綁定到特定狀態，方便測試時回饋。定期清理已解決評論，保持畫布潔淨。

9.2：版本歷史

檔案右上角可查看「Version history」，每次手動儲存（Enter 鍵）會產生快照，可命名並添加說明。團隊成員可對比不同版本的差異，恢復到任一時間點。建議每天結束工作前儲存版本，並注明主要更改內容，如「更新按鈕變體」、「修正首頁佈局」。

9.3：權限管理

在團隊專案中，管理員可設定成員權限：Viewer（僅查看）、Editor（可編輯）、Admin（管理員）。對於外部合作夥伴，建議給予 Viewer 或 Commenter 權限，防止誤改。檔案層級也可設定「Prototype sharing」是否允許匯出或複製，保護智慧財產。

9.4：最佳實務

為確保協作順暢，應建立命名慣例（如 Button/Primary/Default），使用頁面分類（Design System、Pages、Screens）。重大修改前先複製頁面到新分支，避免影響主線。遭遇編輯衝突時，利用版本歷史恢复，並即時溝通。定期整理左側面板，刪除未使用圖層，維持檔案健康度。