承昨日設計代幣的原始層、語意層、元件層三層架構,今天把這套架構「動起來」:主題化(theming)與換膚,以及把 Figma 裡的代幣同步進程式碼的那條管線。三層結構真正的價值,不在於畫出漂亮的階層圖,而在於它讓「換一套主題」變成只換語意層對應值、原始層與元件層一行不動的操作。深色模式、多品牌、季節限定配色,本質上是同一件事:語意代幣指向哪一組原始值。掌握這個切換點,設計系統才從靜態規格變成可治理的活資產。
📖 學
主題化的核心觀念是:語意代幣是一個「插槽」,主題是「插進去的那組值」。以深色模式為例,color.text.primary 這個語意代幣在淺色主題指向 gray.900,在深色主題指向 gray.50;元件永遠只綁定 color.text.primary,不碰任何原始色。這正是昨天三層架構的兌現時刻——當你在 Figma 或程式碼裡切換主題,變動只發生在語意層對原始層的指向關係上,元件層與原始層都保持不動。一個設計系統能支援幾套主題,取決於語意層抽象得夠不夠乾淨,而不是原始色盤有多大。
在 Figma 這一端,主題化落地為 Variables 的「模式(modes)」。2026 年業界收斂出的做法是兩個 collection 的架構:一個 Primitive collection 放原始值(色票、間距刻度、字級),一個 Semantic collection 用別名引用它們,並在同一列開出 Light 與 Dark 兩個 mode 欄位。元件只綁語意代幣,於是在某個 frame 上切一次 mode,所有綁定的填色會整批更新,不需要逐一手動覆蓋。這套機制原生內建於 Dev Mode,不必外掛。同樣的多欄 mode 也能承載多品牌與多密度,是 Figma 端主題治理的地基。
真正的難點在 Figma 與程式碼之間——兩者不會自動同步,你需要一條管線。2026 年這條管線的形狀已經穩定:設計端用 Figma Variables,交換格式用 W3C DTCG 的 JSON,建置步驟用 Style Dictionary。值得記住的一件大事是,2025 年 10 月 28 日 W3C 發布了 Design Tokens Format Module 2025.10,這是 DTCG 規格的第一個穩定版:用 $ 前綴的保留字($value、$type、$description、$deprecated)與大括號別名語法統一了 JSON 結構。這意味著「代幣的通用交換格式」從各家方言時代進入了標準時代,Figma、Penpot、Sketch、Tokens Studio、Style Dictionary、Terrazzo 都已支援。
Style Dictionary 是把這份標準 JSON 變成各平台可用產物的引擎:它讀入 DTCG(或自家舊格式),解析別名,再輸出 CSS custom properties、SCSS、JS/TS、iOS、Android 或自訂格式。從 v4 起,Style Dictionary 對 DTCG 格式有第一級支援,能原生解析 $value/$type。至於主題化,目前工具間仍有分歧:Style Dictionary 用 themes 的概念,而規格草案裡的 $mode 提案很可能最終勝出,但現階段你會同時看到多種寫法並存。實務上的橋接常靠 Tokens Studio 這個外掛——它能與 Figma Variables 雙向匯入匯出,讓設計師在 Figma 用原生 Variables,再透過 Tokens Studio 更完整的管線導出。
一條可維護的同步管線因此長這樣:Figma Variables 是唯一真實來源,經 Tokens Studio 或官方 REST API 導出成 DTCG JSON,推進版本庫;CI 觸發 Style Dictionary 建置,產出各平台的主題檔;深色模式與品牌變體在建置階段展開成 [data-theme="dark"] 之類的 CSS 選擇器或平台專屬資源。設計師改一個語意值,一次提交就能流到所有終端。這條管線也把版本治理的問題自然帶了出來:代幣一旦標準化、可被程式引用,它就成了 API,$deprecated 這類欄位存在的意義,正是為了讓代幣的汰換能被追蹤、被遷移,而不是無聲地打斷下游。
🧠 記
主題化不是「多做一套深色 UI」,而是讓語意代幣指向不同原始值的一次切換;元件只綁語意層,永不碰原始層。Figma 端用 Variables 的兩 collection、多 mode 架構承載淺深與多品牌;跨到程式碼要靠管線,標準格式是 2025.10 定案的 W3C DTCG($value/$type/別名語法),建置引擎是原生支援 DTCG 的 Style Dictionary v4。單一真實來源在 Figma,經 DTCG JSON 進版本庫,由 CI 展開成各平台主題檔。代幣一旦可被引用就是 API,$deprecated 是版本治理的起點。
✍️ 實踐
- 檢查你現有的語意代幣:任何一個語意名(如
text.primary)若在深色下需要「換掉另一個色」,確認元件綁的是語意代幣而非原始色;有直接綁原始色的地方,先改綁語意層。 - 在 Figma 建立(或整理)兩個 collection:Primitive 只放原始值,Semantic 用別名引用並開 Light / Dark 兩個 mode,拿一個真實頁面切一次 mode 驗證整批更新。
- 導出一份 DTCG 格式 JSON(用 Tokens Studio 或 Figma REST API),確認欄位是
$value/$type,別名用大括號語法。 - 跑一次 Style Dictionary v4:把那份 JSON 建置成 CSS custom properties,讓深色模式輸出為
[data-theme="dark"]選擇器,在瀏覽器切換data-theme驗證。 - 給一個要淘汰的舊代幣加上
$deprecated,想一遍下游要如何被通知與遷移——這就是版本治理的第一步。
🔗 延伸學習
- Design Tokens Community Group(W3C) — DTCG 規格與社群的官方入口。
- Style Dictionary:DTCG 支援說明 — v4 如何原生解析
$value/$type與別名。 - How to build a Figma-to-code design token pipeline — Part 1 — 2026 年 8 月的實作管線教學。
- Figma Dark Mode with Variables: Step-by-Step Guide (2026) — 兩 collection、多 mode 的深色模式落地步驟。
💬 問 AI
我有一套設計系統,已經分成原始層、語意層、元件層三層代幣。
現在要加深色模式與第二個品牌主題。請幫我:
1. 檢視我的語意代幣命名,指出哪些語意名在深色/換品牌時會出現「語意衝突」或需要新增插槽;
2. 設計 Figma Variables 的 collection 與 mode 結構(Primitive / Semantic、Light / Dark / BrandB);
3. 給出一條從 Figma 導出 DTCG JSON、經 Style Dictionary v4 建置成 CSS custom properties(含 [data-theme] 切換)的最小可行管線步驟;
4. 說明代幣汰換時 $deprecated 的使用時機與下游遷移通知策略。
請用繁體中文、台灣用語,並針對每一步給出可以今天就動手的具體動作。