設計系統(Design System)的核心價值,是把「一次做對的決策」變成「整個團隊、跨所有平台都能重複使用的資產」。昨天談的無障礙設計(a11y),若只靠設計師逐頁把關,永遠追不上產品迭代的速度;唯有把可用性、無障礙、視覺一致性沉澱進設計系統,才可能規模化。今天我們就拆解設計系統的組成、設計代幣(Design Tokens)的分層架構,以及如何維持單一真相來源(single source of truth)。
📖 學
設計系統不等於元件庫
很多團隊把 Figma 元件庫或 React component library 當成「設計系統」,這是最常見的誤區。一個完整的設計系統至少包含五個層次:
- 原則(Principles):團隊共享的設計價值觀與決策依據,例如「清晰優先於精巧」。
- 設計代幣(Tokens):顏色、間距、字級、圓角、陰影等最小設計決策單位。
- 元件(Components):按鈕、輸入框、卡片等可重用的 UI 建構塊。
- 模式(Patterns):多個元件組合成的慣用解法,例如「表單驗證回饋」「空狀態」。
- 文件(Documentation):說明「何時用、為何用」,而不只是「長什麼樣」。
元件庫只是其中一層。缺了原則與文件,元件就只是一堆沒有脈絡的零件。
設計代幣的三層架構
Design Tokens 是設計系統的「原子貨幣」——把一個設計決策(如某個藍色、某個間距)抽象成有名字的變數。業界慣用的分層是三層:
- 第一層 Global / Primitive(基礎、原始代幣):存放實際數值,例如
color-blue-500 = #2563EB、space-4 = 16px。本身不帶語意,只是可靠的值來源。 - 第二層 Semantic / Alias(語意、別名代幣):賦予「用途」而非「數值」,例如
color-action-primary → color-blue-500、color-text-danger → color-red-600。這一層讓「這個顏色代表什麼意思」與「它實際是什麼顏色」解耦。 - 第三層 Component(元件代幣):針對特定元件的精確控制,例如
button-primary-background → color-action-primary。當元件需要偏離系統預設時提供彈性。
這個分層的威力在於:改語意層,所有元件跟著更新;改基礎層,整個主題(theme)跟著換皮。深色模式、品牌換膚,本質上就是替換基礎層與語意層的映射。
單一真相來源與跨平台同步
代幣最大的目的,是讓 Web、iOS、Android、Figma 都指向同一份定義。做法通常是把代幣寫成一份與平台無關的 JSON,再透過建置工具(如 Style Dictionary)編譯成各平台的格式:CSS 變數、Swift、Kotlin、XML。設計師改一個值,工程端各平台自動同步,避免「Figma 是一套、程式碼又是另一套」的漂移。
值得關注的是,W3C Design Tokens Community Group 在 2025 年 10 月 28 日發布了規格的第一個穩定版本(2025.10),提供廠商中立的 JSON 格式,支援主題化、現代色彩空間與跨工具互通,讓代幣不再需要為每個工具寫客製整合。
原子設計:把元件也結構化
Brad Frost 於 2013 年提出的原子設計(Atomic Design),用化學隱喻把 UI 拆成五層:原子(Atoms)→ 分子(Molecules)→ 組織(Organisms)→ 模板(Templates)→ 頁面(Pages)。原子是最小的按鈕、標籤、輸入框;分子是搜尋框這類簡單組合;組織是產品卡、頁首等完整區塊。它的核心主張是「build systems, not pages」——先建系統、再組頁面。這套心智模型和代幣分層互補:代幣管「值」,原子設計管「元件的組裝層級」。
元件 API、變體與治理
好的元件像好的函式:對外暴露清晰、穩定的 props(元件 API),對內隱藏實作細節。與其為每種樣式各做一個元件,不如用**變體(variants)**參數化,例如 <Button variant="primary" size="lg">。
設計系統是「活的產品」,需要治理(governance)與版本控制:誰能新增元件、如何提案、怎麼標記 breaking change、如何用語意化版本(SemVer)溝通升級成本。沒有治理的系統會快速腐化。
常見誤區
- 把元件庫當設計系統:缺了原則、模式與文件,只是零件堆。
- 過早抽象:規則之三:出現三次才抽象。太早把還沒穩定的東西做成代幣或元件,反而綁死團隊。
- 文件腐爛:元件更新了、文件沒跟上,團隊會失去信任而各做各的。文件要和程式碼同源、同步維護。
🧠 記
- 設計系統五組成:原則、代幣、元件、模式、文件——元件庫只是其中一層。
- 設計代幣三層:Global/Primitive(值)→ Semantic/Alias(用途)→ Component(元件微調)。
- 改語意層 = 全站元件更新;改基礎層 = 整個主題換膚。
- 單一真相來源:一份平台無關 JSON,編譯到各平台;W3C 代幣規格 2025.10 已達首個穩定版。
- 原子設計五層:Atoms → Molecules → Organisms → Templates → Pages;「建系統,不是建頁面」。
- 元件 API 要穩定,用變體(variant)參數化取代大量重複元件。
- 治理與 SemVer 是設計系統長期存活的關鍵。
- 三大誤區:把元件庫當系統、過早抽象、文件腐爛。
✍️ 實踐
今天用約 40 分鐘,替一個小介面建立最小可用的代幣分層:
1.（10 分鐘)挑一個你手上的小專案或一個常用畫面(例如登入頁)。列出畫面裡出現的所有顏色與間距值,寫成「基礎層」清單,例如 blue-500、gray-900、space-8、space-16。
2.（10 分鐘)為這些值定義「語意層」名稱,描述用途而非顏色,例如 text-primary、text-muted、action-primary、surface-default,並讓它們指向基礎層。
3.（10 分鐘)找出畫面中的主按鈕,建立一組「元件層」代幣:button-primary-bg → action-primary、button-primary-text → text-on-action。
4.（10 分鐘)做一個驗證:假裝要上深色模式,只改「語意層 → 基礎層」的映射,不動任何元件層。確認你能只改一處就換膚——如果不行,代表你的抽象漏了語意層,回頭補上。
完成後你會直覺理解「為什麼要有語意層」——它就是換膚、無障礙對比調整、品牌客製的那個開關。
🔗 延伸學習
- Design Tokens 規格達成首個穩定版(W3C Design Tokens Community Group, 2025.10) — 官方公告,理解代幣標準化的最新進展。
- Design Tokens Format Module 2025.10 — 代幣 JSON 格式的正式規格文件。
- Atomic Design by Brad Frost(線上全書) — 原子設計方法論的一手來源,免費線上閱讀。
- Shopify Polaris — 業界公認文件品質最佳的設計系統之一,值得研究它「解釋何時與為何用」的寫法。
💬 問 AI
想把觀念變成自己團隊能落地的東西,可以請 AI 幫你把現有畫面「代幣化」並找出抽象漏洞。試試這個提示詞:
我正在為一個 [產品類型] 建立設計系統的代幣分層。以下是我目前畫面用到的顏色與間距值:
[貼上你的值清單]
請幫我:
1. 依 Global/Primitive → Semantic/Alias → Component 三層,設計一份代幣命名結構。
2. 指出哪些地方我可能「過早抽象」或「該抽象卻沒抽象」。
3. 舉例說明:若要新增深色模式,我應該只改哪一層?
4. 用 W3C Design Tokens 的 JSON 格式,輸出前 5 個代幣作為範例。
請用繁體中文(台灣用語)說明,並解釋每個決策的理由。