無障礙系列告一段落,接著談設計代幣(design tokens)。這是把設計決策從「散落在檔案裡的色碼與數值」變成「一套有名字、有結構、可被程式與 AI 同時讀取的資料」的做法,也是 2026 年設計系統能不能規模化的分水嶺。過去一個品牌色改一次,設計師要在 Figma 手動翻找、工程師要在 CSS 全站搜尋取代;導入代幣後,同一個決策只存在一個地方,改一次就全站生效。今天把代幣的三層架構、命名與同步管線講到能實際落地。
📖 學
設計代幣的本質是「命名過的設計決策」。它不是色票,而是一個變數:color.brand.primary 指向 #2563EB,而介面裡任何需要主色的地方都引用這個名字,而不是直接寫死色碼。這一層抽象帶來的好處是,設計語意與具體數值解耦——當主色要從藍換成綠,你改的是代幣的值,不是幾百個元件。
2026 年的主流做法是三層代幣架構,務必分清楚。第一層是原始代幣(primitive / global tokens),單純記錄調色盤與尺標本身,例如 blue-500: #2563EB、space-4: 16px,它們沒有語意、不描述用途。第二層是語意代幣(semantic tokens),替原始值賦予意義,例如 color.action.primary 引用 blue-500、color.text.default 引用 gray-900。第三層是元件代幣(component tokens),綁定到特定元件情境,例如 button.primary.background 引用 color.action.primary。介面只引用語意層與元件層,永遠不直接碰原始層——這樣暗色模式、換膚、改品牌,都只是把語意代幣重新指向不同原始值而已。
命名是代幣工程裡最容易被低估、卻最決定成敗的部分。可用的命名慣例是「類別.用途.狀態.層級」由粗到細,例如 color.background.surface.hover、font.size.body.large。避免把顏色寫進語意名(不要叫 color.blue.button,主色改綠就名不符實),也避免過度巢狀到五六層讓人記不住。設計圈的共識是設計與工程共用同一套命名——Figma 變數的名字要和程式碼裡的鍵值一字不差,這樣兩邊對話才不會雞同鴨講。
真正發揮威力的關鍵是同步管線。代幣通常以 W3C Design Tokens 格式的 JSON 為單一真實來源(single source of truth),再透過 Style Dictionary 這類工具編譯成各平台需要的產物:Web 的 CSS 自訂屬性、iOS 的 Swift、Android 的 XML。設計端在 Figma 用變數維護,透過外掛把變數匯出成同一份 JSON;工程端在 CI 讀這份 JSON 自動產生程式碼。整條鏈打通後,設計師改一個變數,一次提交就能流到所有平台,不再靠人工同步與口頭交接。
🧠 記
- 三層架構:原始(數值)→ 語意(用途)→ 元件(情境);介面只引用語意與元件層。
- 不寫死:任何色碼、間距、字級都指向代幣名字,一處修改全站生效。
- 命名共用:Figma 變數名 = 程式碼鍵值,由粗到細,顏色別寫進語意名。
- JSON 是真相:以 W3C 格式 JSON 為單一來源,用 Style Dictionary 編譯到各平台。
- 換膚即換指向:暗色模式與品牌切換,只是語意代幣重新指向不同原始值。
✍️ 實踐
今天挑一個現有專案,做一次最小可行的代幣化。第一步,盤點目前散落的色碼:在程式碼裡搜尋所有 hex 色碼,你多半會發現同一個藍出現了三四個近似值(#2563EB、#2564EC、#2660EA),這正是缺代幣的證據。把它們收斂成一組原始代幣。
第二步,建語意層。針對最常見的用途各定一個語意代幣:color.text.default、color.text.muted、color.background.surface、color.action.primary、color.border.default,各自指向剛才收斂出的原始值。用 CSS 自訂屬性落地最快:在 :root 定義 --color-action-primary: var(--blue-500);,元件裡一律寫 background: var(--color-action-primary);。
第三步,驗證換膚是否成立。加一個 [data-theme="dark"] 區塊,只重新宣告語意代幣的指向(讓 --color-background-surface 指向深色原始值),不要動任何元件的 CSS。如果切換 data-theme 就能整站變暗、而你沒改過任何一個元件,代表你的抽象層切對了。若某個元件在暗色下壞掉,通常就是那裡偷偷寫死了色碼,回頭把它改成引用語意代幣。做完這三步,你就有了一份可以繼續長成 JSON 單一來源的代幣雛形。
🔗 延伸學習
- Design Token Architecture 2026: The Strategic Blueprint for Scalable Design Systems
- What Are Design Tokens? A Complete Guide (2026) — UXPin
- Design Tokens in 2026: Beyond Colors and Spacing — Design Systems Collective
- 7 Figma Design System Best Practices for 2026: Tokens, Sync & Scale
💬 問 AI
我正在把一個現有的 Web 專案導入設計代幣。以下是我目前散落在 CSS 裡的所有色碼與間距數值:
（貼上你搜尋到的 hex 與 px 清單）
請幫我:
1. 把近似的色碼收斂成一組原始代幣(primitive tokens),並用 blue-500 這類命名。
2. 依常見用途設計語意代幣(semantic tokens)命名,例如 text / background / action / border，並指出各自應引用哪個原始代幣。
3. 用 CSS 自訂屬性寫出 :root 與 [data-theme="dark"] 兩份宣告，示範換膚時只改語意層指向、不動元件。
最後提醒我有哪些常見的命名陷阱要避免。