Design Tokens

前言

在什麼是設計系統？提到自己參與了組件庫的建置。一開始，我的方法其實非常直接，對照著設計稿的顏色、字體大小、行高等等，一個一個照著做，幾乎是原封不動地複製貼上！並且在第一次與設計師校稿時很自豪的透過 Storybook 展示組件的各種狀態，一邊喃喃地介紹：「這是錯誤狀態，這是禁用樣式...」心裡想著：我一次就把所有狀態都做出來了，帥吧！

但就在我沾沾自喜時，設計師突然指出某個組件的錯誤狀態顏色怪怪的，應該是 #FF0000，並請我幫忙確認一下。我頓時一愣，心跳加速地仔細檢查，結果還真的被他抓到，主要是我在填色碼時打錯了。那一刻，我內心除了震驚，更湧現出對設計師火眼金睛的滿滿敬佩。

校稿結束後，我跟主管分享剛剛設計師的超能力。主管看著我，半開玩笑地問「你是不是眼睛有問題 😂？」我點了點頭，坦白說自己有色弱。他則是笑著說：「Jing, 沒關係啦，軟體工程師還有很多不同領域可以發展一定要做前端啊！」

接著他向我展示，他早已將所有設計標籤（如顏色、字體）定義在全域的 CSS 變數裡，並提醒我：不要再直接寫 Hex code。他形容設計系統是工程師與設計師之間的語言橋樑，有了這層抽象層，我們就能避免直接使用具體值，確保設計一致性與可維護性。

什麼是設計標籤？

"
Design tokens represent the small, repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hexcodes for color, with self-explanatory names.
— Material Design

設計標籤最簡單的解釋就是將視覺元素 (e.g. color - hexcode, size - pixel, ...) 透過鍵值對的方式，將這些數值轉化成標籤，讓設計師與工程師有用同一種共通的語言。

在什麼是設計系統？，我提到組件庫的建置可以參考「原子設計（Atomic Design）」的方法論。在這個模型裡，組件（Component）被視為系統中最基本的模塊——也就是「原子（Atom）」。如果照這個邏輯延伸，那麼設計標籤（Design Token）就像是附著在原子上的粒子，賦予它們顏色、字體、間距等視覺與風格屬性，讓每個原子不只具有功能，也能表現出一致的設計語言。

為什麼要使用設計標籤？

如同前面提到的，是設計師與工程師之間的共通語言。透過它，雙方不再需要用 Hex code 或對齊像素（Pixel）來溝通細節，而是以統一的語意化名稱協作，大幅降低溝通成本並提升一致性。

除此之外，設計標籤本質上是一組單一來源（Single Source of Truth）的鍵值對。當一個產品需要同時維護多個平台（例如 Web、iOS 和 Android）時，一但產品有更換品牌色的需求，在沒有設計標籤的情況下，有可能得讓每位工程師分別手動更新程式碼，還得檢查是否有遺漏或誤改。若有導入設計標籤，只要設計師修改並發布新的設計標籤，所有平台就能自動同步更新相關樣式，大幅減少溝通與維護成本，也降低人為錯誤的風險。

根據 Google 設計系統指南 - Material Design 的建議，以下情況適合導入設計標籤：

計劃重新設計現有產品，或正在打造新產品
團隊的設計系統需應用於多個產品或跨平台（如 Web、iOS、Android）
希望更輕鬆地維護與更新樣式，提升一致性與效率

相對地，以下情況則不太適合導入設計標籤：

現有應用的樣式皆採 hardcode，且預計在 1～2 年內不會有重大變更
團隊或產品尚未建立設計系統，缺乏統一的設計語言

如何設計標籤？

前面提到，設計標籤是以鍵值對的形式，將視覺元素轉換為語意化的變數名稱。那麼在實務操作中，我們該如何定義這些標籤的層級與結構呢？

定義設計標籤的層級

讓我們看看幾個大型設計系統是如何拆解與實作設計標籤的：

Google - Material Design: 其將設計標籤拆分為四個層級：Value、Reference Token、System Token、Component Token

Pinterest - Gestalt: Pinterest 的設計系統也定義了四層結構：Value、Base Variable、Common、Component Token

https://uxdesign.cc/design-tokens-cheatsheet-927fc1404099

我們可以觀察到一個共同的設計原則：層級越低的設計標籤越抽象，層級越高則越具體，也更貼近實際使用情境。

三層常見設計標籤的說明

Reference Token / Base Variable
這一層是最底層、也最抽象的設計標籤，通常直接對應實際的數值（value），例如：
- color-red-900 👉 #FF0000
- spacing-4 👉 16px
- text-sm 👉 14px
這些標籤的命名不具語意，僅是視覺屬性的抽象化表示，常見於色彩、間距、字體等設計變數的底層定義。
System Token
這一層是在 Reference Token 的基礎上加入語意層次，將抽象的值對應到具體的設計用途，例如：
- color-red-900 👉 color-error
- spacing-4 👉 spacing-form-padding
如此一來，即使底層數值（如色碼、間距）變動，語意命名仍然一致，設計師與工程師也能更直觀地理解其實際用途與設計語境。
Component Token
最上層的 Component Token 與具體元件（Component）樣式綁定，具高度語意性，常用於元件的狀態與變體設定，例如：
- button-primary-background-hover
- input-error-border
這類標籤命名方式可以提升樣式語意清晰度與一致性，尤其適用於大型設計系統中。