編輯導語：Design Tokens對于產(chǎn)品設計來說是個十分有用的工具和方法，本篇文章作者詳細介紹了Design Tokens在設計系統(tǒng)中的意義與應用，講述了其優(yōu)勢以及具體的使用方法，一起來學習一下吧。

一、什么是 Design Tokens

Design Tokens 并不是一個新概念，它是一種設計師和開發(fā)共同使用的工作思維和方法。Tokens 的本意是“令牌 /指令”，與 Design 連起來可以被理解為“設計變量”。

如下圖，我們可以分別將 button 的背景色、文字色、文字屬性定義成 Token，用代碼化的語言，將組件的每一部分屬性進行有規(guī)律的代碼化命名。

大家應該都對設計系統(tǒng)有一定的了解（關于組件庫和設計系統(tǒng)的相關概念可以閱讀：B

端組件設計及工作經(jīng)驗系列文章），盡管我們可以通過設計規(guī)范、組件庫、素材庫等手段，對設計和開發(fā)的流程進行提效，但實際上卻經(jīng)常遇到令人頭疼的細節(jié)問題，比如：

• 開發(fā)所用的字號 / 顏色 / 間距等細節(jié)和設計稿不一樣；
• 設計師根據(jù)新的業(yè)務需求設計了一張組件庫中沒有的卡片，但不確定卡片的背景和邊框應該用哪個顏色；
• 產(chǎn)品新增了暗黑模式，設計和開發(fā)都面臨巨大的工作量；
• 老板用了已上線的產(chǎn)品，覺得主題色的藍色太重，想換主題色為淺藍色。

以上這些問題，其實都可以通過 Token 進行優(yōu)化解決。Design Tokens 相當于將設計組件進一步拆解，使其原子化，將組件的每一種屬性都轉(zhuǎn)變?yōu)橐粋€前端變量。

可以說，Token 本質(zhì)上就是找到了組件、屬性和代碼之間的對應關系，統(tǒng)一了樣式和前端語言，使組件和設計系統(tǒng)可以被快速管理。

二、Design Tokens 有哪些優(yōu)勢

Design Tokens 在設計系統(tǒng)中相當于一種正確且唯一的設計決定，在使用時有四大優(yōu)勢：

1. 設計語義更易理解；
2. 設計產(chǎn)出更加一致；
3. 設計成果更準還原；
4. 設計改進更易維護。

1. 設計語義 更易理解

每一個組件中的復雜屬性都可以被 Token 進行語義化的描述，幫助設計師和開發(fā)建立“畫面感”。

舉個例子：#495FDF 這個顏色，按照設計系統(tǒng)中的命名方式，它可能會被叫做 Blue 60。而當我們通過Token語義的方式讓它達到組件級別的精度時，它會被叫做：color-button-border-focused。設計師和開發(fā)在使用時，就能迅速了解到這個顏色應用在哪里：

2. 設計產(chǎn)出更加一致

在實際設計過程中，一款產(chǎn)品通常會有不同的設計師參與產(chǎn)出設計稿。對于不熟悉設計規(guī)范的設計師，經(jīng)常會有這樣的困惑：“組件庫的組件不全，我新設計的卡片，背景色應該使用設計系統(tǒng)中的哪一個紅色？Red50 還是 Red60？”。

這時如果我們給卡片背景色定義一個 Token，不同設計師根據(jù) Token來選擇顏色，在卡片背景色上使用的顏色就一定是唯一的，這就能確保不同設計師產(chǎn)出設計稿的一致性。

3. 設計成果更準還原

當設計師在驗收開發(fā)內(nèi)容時，往往會花很多時間去檢查開發(fā)結(jié)果與設計稿的一致性。使用 Token 就能確保設計稿被高效、準確地還原。

舉個例子，在不使用 Token 的情況下，開發(fā)使用的是一個硬代碼的模式，當輸入不正確的色彩代碼的時候，系統(tǒng)無從判斷這個顏色是否使用正確，也就不會報錯。

而在使用了 Token 之后，如果開發(fā)引用了錯誤的或根本不存的色值時，系統(tǒng)就會給出報錯提示，開發(fā)由此得以自行檢驗，設計師的驗收成本也會大幅降低：

4. 設計改進更易維護

設計的變更和迭代將變得更加輕松。舉個例子，你的產(chǎn)品需要更新主題色，如果沒有 Token，對于設計和開發(fā)來說將會是極大的工作量，需要一個個組件修改，還很容易漏掉或混淆一些細節(jié)。

但如果用 Token，開發(fā)只需重新輸入每一個Token對應的新色值，就可以做到產(chǎn)品全局的顏色更換，不需要一個個組件的排查和更改，省時、高效、準確。

三、如何使用 Design Tokens

1. Token 的命名方式

關于 Token 的命名，不同的公司、團隊、產(chǎn)品有不同的定義方式，但都遵循一定的邏輯和規(guī)則，且設計和前端要達成信息同步。這種命名的思路和給組件命名很相似，都需要先對組件的屬性進行分類和整理。

我們可以從組件系統(tǒng)中的核心元素入手，將整個組件系統(tǒng)拆解出“形、色、字、構(gòu)、質(zhì)”這幾個大的方面，并依照不同的類別、元件、屬性、等級和狀態(tài)，對 Token 進行命名上的規(guī)范定義：

舉個例子，下圖中的 button，它的背景色 Token 使用上圖中的命名方式，從左到右分別是它的類別、元件、屬性、等級、狀態(tài)，所以這個 button 的背景色所對應的 Token 就是：color-button-background-primary-nomal：

有了這樣一個系統(tǒng)性的命名規(guī)則之后，我們就可以以表格的形式，將設計系統(tǒng)中所有涉及到 Token 的元素特征都整理出來，作為設計和開發(fā)拉通提效的基準：

2. Token 的應用方式

通常設計和開發(fā)是需要使用一套完整的 Token 列表來實現(xiàn)信息對齊。

如果你的團隊在使用 Figma 作為設計協(xié)同工具，也可以使用插件：Figma Tokens。設計師將整理好的 Token 文檔導入到這個插件中，而開發(fā)可以利用這個插件高效生成Token 對應的JSON 文件，直接復制用于編寫代碼，這樣就可以很好的保證設計與開發(fā)協(xié)作的一致性和準確率：

作者：元堯；公眾號：長弓小子；

本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。