Design Token：可替換版型與識別形象的前置設計

這真的是奠定一套識別形象很重要的觀念，也是製作一套可替換版型風格很重要的前置設計，更是一個與工程師達成共識高速溝通的利器。

Token 這個詞彙最早是用於服務之間溝通的一把金鑰，用於辨識這個使用者對象。但拉來設計界變成是一個類似key word alias的標籤。那到底什麼是 design token?

先來看看這個例子：

heading-color: #\xxxxxx

heading-hover-color: #\xxxxxx

大概像這樣，定義了未來什麼場景要用什麼顏色。如果今天要換成 Dark Mode 時只需要換掉 Design Token 就好。

那引用一般的顏色表不行嗎？

這其實只會增加自己麻煩，因為你的場景就不夠面向因應各種應用場景，今天如果theme要替換，你必須檢查每一個地方，不然極容易出現顏色違和的情況。或是有些顏色不想換色，有些卻要，但用 design token 和一般的顏色系統直接區分，非常好辨識。

這套系統廣泛應用在 UI 開發上，像是 Ant Design 就有使用。應用的公司像 Adobe，就有建立自己的 Design Token。這套系統定義的是規範，使用者會覺得被拘束不自由，但你可以省去「我該用什麼顏色」的煩惱，把更多精力放在使用者研究和優化使用者體驗。

其實我相信平常在設計時內心也有默默建立一套自己的Design Token 而不自覺。好比「這個是標題就這顏色吧」、「這個button 的hover 就這個顏色吧」、「這個tip文字就這麼大吧」各種內心自言自語。但從現在開始你可以嘗試著練習使用 Design Token 完成你的 UI，慢慢讓你的設計形成一套準則規範。