跨越設計與程式的鴻溝 — Design Tokens

ABLE

發佈於Able Studio

2022/11/28閱讀時間約 8 分鐘

我覺得這個顏色太淺了，可能需要調整一下～
好的，沒問題！

於是你在設計系統中開始尋找使用到這個顏色的所有元件，然後一個一個修改，改完一個檔案還有另一個，好不容易改完了卻在測試的時候發現還有幾個地方沒有改到⋯⋯天阿～瘋掉！！！

這樣令人抓狂的場景不只有在設計的時候會發生，當我們交付設計稿之後的開發階段，工程師也有可能面對相同的問題，這樣毫無效率的修改方式，不僅花費了設計師們大把的時間，也很容易讓我們設計出的產品在不同的平台上有不一致的表現。

好，那該怎麼辦呢？今天我們就要來介紹 Design Tokens 的這個概念，幫助大家進行有效的溝通，讓設計開發流程更加順利。

Design token 是什麼？

Design token 的中文有很多種說法，可以翻譯成設計令牌、設計權杖、或是設計變量，但我們覺得上述用語不是很容易理解，最終我們選擇了設計標籤來稱呼。

設計標籤是一種幫助設計師和開發人員能進行有效溝通的代碼化語言，透過將數值（例如色碼、字體、間距等）編寫至設計標籤中，建立統一的代碼化語言，讓組件和設計系統可以被快速的管理，並有效的運用至 UI 設計中。

舉例來說，為了保持統一性，一個顏色可能會被用在品牌旗下的許多產品中，當我們需要去更改這個顏色時，如果沒有使用設計標籤，就會需要一個一個去整，在溝通上也會比較不方便（因為你不會在講話的時候用十六進位來表示顏色：”給我來點#E8DEF8”……）。

但如果你使用了設計標籤，就只需要更改對應的標籤內容即可。以Figma工具為例，在建立與更改完設計標籤之後，可以直接輸出成JSON檔案，就能更新至設計系統，並應用在各個產品、裝置上。

設計標籤的使用也能有效的幫助開發人員，利用設計標籤來取代數值，不僅可以減少錯誤輸入色碼，開發時也能夠使用 IDE 的自動提示來選擇現有的設計標籤，輸入錯誤時也能更有效率的除錯。

如何建立 Design token?

目前設計標籤還沒有一個統一的格式能夠遵循，日前 W3C Design Token Community Group 在 2022 Figma schema 中便提出了初步的命名架構建議，另外 Google 在 Material Design 3 中也有提供他們對於設計標籤的建立指南。

Design token 的架構

想要建立一套比較完整的設計標籤，就必須包含他的名稱、數值、還有他的類別。

當然你也可以加上關於這個標籤的描述，以便其他夥伴（協同作業者）更好的理解與使用。

同樣的名字可能會被用在很多的物件上，這個時候我們就能將設計標籤分組，可以依據品牌、類別、使用方式等等來進行分組。

隨著群組的不同，每個標籤的路徑也會不同，這樣的架構能為設計標籤產生出一個獨一無二的名字。

在設計標籤中還有一個很重要的概念，那就是 Aliases（別名）。同樣的數值可能會被用在許多不同的元件上，使用別名可以幫助你在需要更改單一元件的內容時，不會更動到其他也使用這個內容的元件，如下圖所示，你只需要調整箭頭所指的方向就好了。

這樣的架構在設計不同模式的時候非常好用，舉例來說，當你想設計夜間模式的時候，只需要改變元件設計標籤所指的參考標籤，除了能讓設計開發流程變得更簡單，也能夠更有效的管理整個設計系統。

在Google的Material Design當中，是將設計標籤分為 Reference、System、和 Component 三種類型，並對三個類型之間的層級關係提供近一步說明。

我們也可以將不同的設計標籤組合為一個排版組合，因為同樣的數值可能會被運用在多種元件之中。舉例來說，標題一和標題二使用相同的字型，當我們想要更改字型的時候，只需要修改標籤內容即可。

Design token 的命名步驟（以 Material Design 為例）

Step 1. 將數值轉換為最基礎的 token — Reference tokens
Reference token 包含了設計系統中可用的所有樣式選項，有時候會稱作 global token。將數值轉換為 Reference token 能夠幫助我們更好的去管理設計系統中所使用到的樣式與數值。

Step 2. 定義 token 的實際屬性 — System tokens
System token 是語意化的 token，他定義了設計標籤的實際屬性，通過語意化的命名，定義了設計標籤的使用場景。在命名的時候，可以避免使用會和程式碼互相衝突的文字，舉例來說 type 在技術端能夠被解釋為很多意思，所以在命名的時候應該盡量避免使用。

Step 3. 將 token 指定給元件 — Component tokens
以元件為單位去限定設計標籤的使用。一個 System token 可以應用在很多個元件上，但是當我們想要更改其中一個元件的顏色時該怎麼辦？Component token 將語意化的 System tokens 劃分為更細的群組，方便大家能夠更靈活的使用設計標籤。