Figma 元件設計：讓設計系統可以複用和維護

由 FeiYueh 親自審稿驗證 · 最後更新於 2026-07-06

Figma 元件（Component）的核心價值不在於「畫得好看」，而在於把設計決策封裝成可複用、可版本控管的單一真實來源（Single Source of Truth）。「Figma 全球月活用戶突破 400 萬，其中 80% 的企業團隊使用元件庫管理設計系統」（來源：Figma Config 2024 官方公告），

Figma 元件（Component）的核心價值不在於「畫得好看」，而在於把設計決策封裝成可複用、可版本控管的單一真實來源（Single Source of Truth）。 「Figma 全球月活用戶突破 400 萬，其中 80% 的企業團隊使用元件庫管理設計系統」（來源：Figma Config 2024 官方公告） ，但根據實務觀察，多數團隊的元件庫在 6 個月內就因為命名混亂、變體爆炸與 Override 失控而崩壞。本文以 2026 年 Figma 最新的 Variables、Code Connect 與 Dev Mode MCP Server 功能為基礎，拆解一套讓設計系統真正能維護的元件設計方法。 為什麼大多數 Figma 設計系統撐不過半年 設計系統失敗的主因不是工具，是結構債。 「47% 的設計師表示他們的團隊曾因元件失控而重建整套設計系統」（來源：Figma 2024 Design Systems Report） 。常見的崩壞模式包含：相同按鈕被重複建立 7 個變體、Auto Layout 設定不一致導致 RWD 行為不可預期、設計師因為找不到正確元件而直接複製貼上 Frame。 更隱性的問題是「Override 漂移」。當主元件（Main Component）更新後，使用方因為先前覆寫過顏色或文字，導致更新無法正確套用。實務上，每多一層 Override，未來維護成本約增加 30%。控制 Override 的廣度，比新增元件本身更重要。 用 Atomic Design 重新規劃元件層級 元件命名與層級必須在第一次建立時就決定，事後重整成本極高。建議採用 Brad Frost 提出的 Atomic Design 五層架構（Atoms / Molecules / Organisms / Templates / Pages） ，並在 Figma 中以 Page 與 Section 對應實際層級。 命名慣例：Slash 階層比扁平命名好維護 Figma 元件名稱中使用斜線「/」會自動產生資料夾結構。推薦的命名規則為： Category/Component/Variant/State 。例如 Form/Button/Primary/Hover 。這種結構讓 Asset Panel 自動分群，搜尋時也能快速定位。避免使用大寫混雜或符號（如 ✓、★），因為這些會破壞 API 與 Code Connect 的對應。 變體（Variants）數量上限：超過 32 個就該拆分 Figma 官方建議單一元件的變體組合不應超過 32 種。當變體數量爆炸時，應該將部分維度拆成獨立元件或改用 Boolean Property。例如按鈕同時有 Size（4）× Type（5）× State（4）× Icon（2）= 160 種組合，這時應該把 Icon 變成 Instance Swap、State 用 Variant 控制、Size 與 Type 才是真正需要 Variant 的維度。 Variables 是 2026 年設計系統的真正核心 Figma Variables 在 2024 年正式釋出後，徹底改變了設計 Token 的管理方式。 「Variables 支援 Color、Number、String、Boolean 四種型別，可建立 Mode 進行主題切換」（來源：Figma 官方文件） 。實務上，一個成熟的設計系統應該有三層 Variables： Primitive Tokens ：原始值，如 blue-500: #2563EB ，命名不帶語意。 Semantic Tokens ：語意層，如 color/action/primary ，引用 Primitive 而非直接寫死數值。 Component Tokens ：元件層，如 button/primary/background ，僅用於該元件內部。 這三層架構的價值在於：當品牌色從藍色換成紫色，只需要修改 Primitive Token 一個值，所有使用 Semantic Token 的元件會自動更新，而 Override 過顏色的特殊狀況也能透過 Component Token 個別微調，不需要改動全域。 Mode 切換：暗色模式不再需要重做元件 Variables 的 Mode 功能可以讓同一個元件在不同 Mode 下顯示不同數值。標準做法是建立 Light、Dark、High Contrast 三種 Mode，所有 Semantic Token 都定義對應數值。元件本身不需要做任何變體調整，只需要在 Frame 層級切換 Mode 即可預覽。這比舊有的「複製一份做暗色版」做法節省約 60% 的維護工時。 Auto Layout 與 Constraints 的標準設定 A

由 FeiYueh 親自審稿驗證 · 最後更新於 2026-07-06. Independently maintained — not AI-generated boilerplate.