如何建立 Design token?

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

Design token 的架構

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

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

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

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

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

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

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

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

/政府網站營運交流平台授權轉載/

原文作者：Able Studio

原文出處medium：跨越設計與程式的鴻溝—Design Tokens