Figma 進階設計 完全指南

Figma 在 2026 年第一季正式將 Dev Mode MCP Server 推向 GA 階段，讓 Claude、Cursor 等 AI 編輯器可以直接讀取設計檔的變數、元件與設計規格，把「設計稿轉前端程式碼」的平均工時從 6.4 小時壓縮到 1.8 小時。進階使用者真正的競爭力，已經不在於畫得多漂亮，而在於 Va

Figma 在 2026 年第一季正式將 Dev Mode MCP Server 推向 GA 階段，讓 Claude、Cursor 等 AI 編輯器可以直接讀取設計檔的變數、元件與設計規格，把「設計稿轉前端程式碼」的平均工時從 6.4 小時壓縮到 1.8 小時。進階使用者真正的競爭力，已經不在於畫得多漂亮，而在於 Variables、Auto Layout、Variants 與 Code Connect 的組合運用，讓設計檔成為可被 AI 直接消費的結構化資料。 Variables 與 Modes：取代 Style 的設計變數系統 Figma Variables 是 2024 年中正式 GA、2025 年大規模取代傳統 Color Style 的核心系統，它把顏色、數值、字串、布林四種型別納入版本控管，並支援 Mode 切換。 「Figma 官方統計顯示，啟用 Variables 的設計團隊在主題切換（如深淺色模式）的維護時間下降 73%」（來源：Figma Help Center） ，這是因為 Mode 允許同一個變數對應多組值，切換主題時不需要重新指派任何元件樣式。 進階使用方式是建立 4 層變數結構：Primitive（純色階，例如 blue-500）、Semantic（語意層，例如 color/action/primary）、Component（元件專用，例如 button/background/hover）、Brand（品牌層，可被多個產品線覆寫）。設計時只引用 Semantic 層以上的變數，讓 Primitive 改色時所有產品自動跟進。Mode 不要只切深淺色，建議再加一個 Density Mode（compact / comfortable）控制間距變數，行動端與後台使用同一份元件即可。 Number Variables 與 Boolean 的進階用法 Number Variables 可以綁定 Auto Layout 的 padding、gap、corner radius，搭配 Mode 即可在 Compact 與 Comfortable 之間一鍵切換整份設計稿的呼吸感。Boolean Variables 則能控制圖層的可見性，常用於「桌面顯示完整 Header / 行動端僅顯示 Logo」這類響應式變化，無需建立兩個獨立 Frame。 Auto Layout 4 與絕對定位的混用策略 Auto Layout 4 在 2024 年 Config 後新增 Wrap、Min/Max Width、Absolute Position 三大功能，正式讓 Figma 的版面引擎與 CSS Flexbox 對齊。 「Figma 官方資料指出，使用 Auto Layout 的設計檔在開發者實作時，UI 像素誤差從平均 4.7px 降至 0.6px」（來源：Figma Blog） ，這代表 Auto Layout 不只是設計師的便利，而是減少設計與工程落差的關鍵。 進階技巧是 Wrap + Min Width 的組合：建立卡片網格時，把容器設為 Wrap，子卡片設定 Min Width 280px、Max Width 360px、Fill Container，即可自動依容器寬度從 4 欄退到 2 欄再到 1 欄，完全模擬 CSS Grid 的 auto-fit 行為。Absolute Position 則保留給 Badge、Tooltip、Floating Action Button 這類覆蓋元素，避免污染主流布局結構。 常見的 Auto Layout 反模式 第一個錯誤是巢狀層級超過 5 層，會讓 Figma 在大檔案下卡頓。建議任何超過 4 層的結構拆成獨立元件。第二個錯誤是把 Hug Contents 與 Fixed Width 在同一條軸上混用，會導致子元素被截斷。第三個錯誤是用 Auto Layout 模擬絕對定位（透過負 padding），改用原生 Absolute Position 即可。 Component Properties 與 Variants 的 9 種組合上限 Figma 元件最佳實踐是單一元件不超過 9 個 Properties，包含 Variant Property、Boolean、Text、Instance Swap 四種型別。超過 9 個會讓設計師在 Properties Panel 找參數的時間明顯拉長，也會增加開發實作的對應成本。Button 元件的標準配置為：Variant（primary/secondary/ghost）、Size（sm/md/lg）、State（default/hover/disabled）、Has Icon（boolean）、Icon Position（left/