我們?cè)谠O(shè)計(jì)工作的開展過程中，時(shí)常會(huì)因?yàn)閰⑴c人數(shù)多、業(yè)務(wù)背景雜而面臨諸多考驗(yàn)。本文從概念、背景、類型、命名和應(yīng)用五大方面來介紹視覺設(shè)計(jì)的原子Design Token，為大家解答在設(shè)計(jì)環(huán)節(jié)如何巧妙化解團(tuán)隊(duì)協(xié)作的難題。推薦設(shè)計(jì)伙伴們閱讀了解～

提到Design Token，很多同學(xué)可能第一反應(yīng)是這是什么？其實(shí)這不是什么新名詞，早在2014年，salesforce就開始在這塊進(jìn)行研究，它的名字來源于Jina Anne。

Design Token 是設(shè)計(jì)系統(tǒng)中的視覺設(shè)計(jì)原子。它們是一組有著統(tǒng)一命名規(guī)則的實(shí)體，用于存儲(chǔ)視覺設(shè)計(jì)部分的具體參數(shù)，比如 HEX 色值、間距、尺寸的像素等。使用它可以有幫助為 UI 開發(fā)工作維護(hù)一套具備可擴(kuò)展性、一致性的視覺體系。

在我們實(shí)際工作中，經(jīng)常會(huì)面臨參與成員眾多以及業(yè)務(wù)背景的復(fù)雜性以及設(shè)計(jì)趨勢(shì)變化的等問題和考驗(yàn)，你是否有以下的疑問：

• 設(shè)計(jì)團(tuán)隊(duì)加入新人，因?yàn)閷?duì)規(guī)范的不了解，經(jīng)常會(huì)不知道不同場(chǎng)景對(duì)應(yīng)色值的應(yīng)用。
• 開發(fā)同學(xué)代碼碎片化，在遇到新業(yè)務(wù)時(shí)，需要二次開發(fā)，迭代以及維護(hù)成本增加。
• 隨著公司戰(zhàn)略升級(jí)，品牌色做了調(diào)整，因?yàn)檎{(diào)整頁(yè)面眾多，經(jīng)常因?yàn)槟承┥始?xì)節(jié)而忘記調(diào)整。

那么接下來讓我們一起了解下Design Token吧~

一、概念

從本質(zhì)上來講，Design Token是一種設(shè)計(jì)與開發(fā)共同使用的工作思維和方法?！盩oken“的意思是令牌或者指令，簡(jiǎn)單的可以理解為對(duì)視覺樣式封裝的屬性參數(shù)。在設(shè)計(jì)師以及開發(fā)都理解的命名規(guī)則上，對(duì)組件中的每一個(gè)元素進(jìn)行有規(guī)律的代碼化命名，統(tǒng)一了兩個(gè)不同工種（前端與設(shè)計(jì)）的交流語(yǔ)言，保證設(shè)計(jì)系統(tǒng)可以被快速管理，確保了產(chǎn)品體驗(yàn)的靈活性一致性。

上面解釋如果還覺得復(fù)雜的話，你可以把Design Token理解為設(shè)計(jì)以及前端都認(rèn)可的外號(hào)。例如當(dāng)前按鈕背景色值的外號(hào)是”colour-button-backgroung-primary-normal“，這樣即使以后按鈕背景色再怎么變化，前端都可以根據(jù)這個(gè)外號(hào)來應(yīng)用顏色，這樣的話，按鈕在系統(tǒng)中的背景色就是唯一的。

二、使用場(chǎng)景

我們可以設(shè)想一下假如沒有Token，我們開發(fā)是如何工作的。

例如我們之前的品牌色#00704a，在頁(yè)面中會(huì)大量被使用，那么當(dāng)每個(gè)頁(yè)面出現(xiàn)該顏色的時(shí)候，開發(fā)得重復(fù)編寫，那后續(xù)品牌色升級(jí)，開發(fā)改起來會(huì)特別麻煩。

這個(gè)時(shí)候我們假如使用了Token，開發(fā)在實(shí)際工作的時(shí)候就不需要輸入這個(gè)顏色的色值，而只需要這個(gè)顏色的Token“color-primary：blue-7”即可。即使后續(xù)這個(gè)品牌色值再怎么調(diào)整，也不需要開發(fā)做重復(fù)的工作。

三、類型

Token在實(shí)際的應(yīng)用中可以分為3類，全局Token（Global Token）、別名Token(Alias Token)以及組件Token(Component Token)。

1. 全局Token

作為全局Token，通過字面意思就知道它并沒有限定使用的范圍，也就是項(xiàng)目中所有的Token都可以從這里調(diào)取，無(wú)論是顏色、字體、行高還是圓角等。例如顏色Token通常被命名為Blue-7、Blue-8等。

2. 別名Token

它的存在是為了限定全局Token的使用場(chǎng)景，這樣可以讓Token更加場(chǎng)景化，可以被靈活調(diào)用，在后續(xù)的更改中自由替換。它的值都是從全局Token中調(diào)取過來。例如colour-primary：$blue-7。

3. 組件Token

這一步就是特別具體的，一般添加組件的的名稱以及屬性，可以直接進(jìn)行開發(fā)，通常作為特定名稱，大家基本上看了Token就知道它是什么。它的值一般從別名Token調(diào)取，在特殊情況下也會(huì)從全局Token中調(diào)取。例如：button-color-primary-background:$colour-primary。

四、命名

1. 拆解Token

要想對(duì)Token進(jìn)行合理命名，我們就需要對(duì)其進(jìn)行原子級(jí)別的拆解。拆解為類別、元件、屬性、等級(jí)、狀態(tài)這5類。

不同公司針對(duì)Token有著不同的定義方式，只要設(shè)計(jì)師與前端達(dá)成一致就好。

例如產(chǎn)品設(shè)計(jì)中的Lightning Design System在對(duì)Token進(jìn)行原子級(jí)拆解的時(shí)候就包含了12種：

1. Background Color
2. Text Color
3. Border Color
4. Font
5. Font Size
6. Opacity
7. Line Height
8. Spacing
9. Radius
10. Sizing
11. Shadow
12. Time
13. Media Query
14. Z-index

（1） 類別

類別指在Token中有著最廣泛應(yīng)用場(chǎng)景，最基礎(chǔ)的組件元素。

我們對(duì)常用的組件圍繞形、色、字、構(gòu)、質(zhì)這5個(gè)維度對(duì)其進(jìn)行拆解，分為圓角、色彩、文字、間距以及陰影這5類

（2） 元件

元件指具體的單一的組件種類，例如按鈕這個(gè)類別下就包含了主按鈕、默認(rèn)按鈕、虛線按鈕、文本按鈕、鏈接按鈕。

（3）屬性

這里的屬性通常分為背景或者邊框兩種?？赡軙?huì)有同學(xué)疑問，為什么只有2種屬性，因?yàn)檫@里我們的樣式不與具體組件綁定，僅僅以樣式本身的性質(zhì)來做區(qū)分，所以在屬性這里我們羅列了2種樣式。

例如下圖的彈窗，線框的描邊、輸入框的描邊以及按鈕的描邊都可以調(diào)取統(tǒng)一的Token，將原本相同元件但不同樣式的組件進(jìn)行統(tǒng)一化管理。

（4） 等級(jí)

等級(jí)的狀態(tài)由組件的基本功能以及具體的使用場(chǎng)景決定，有部分組件只有一個(gè)等級(jí)，例如”面包屑”，這時(shí)候在Token命名的時(shí)候就可以不體現(xiàn)，而有的組件例如“按鈕””導(dǎo)航“等則有多個(gè)等級(jí)；

（5）類別

狀態(tài)則是組件在交互時(shí)候的不同樣式，通常有默認(rèn)、懸停、點(diǎn)擊、禁用等，有時(shí)候還會(huì)根據(jù)場(chǎng)景的不同，有危險(xiǎn)以及幽靈等狀態(tài)。

2.Token的命名

Token的命名沒有唯一的表達(dá)方式，只需前端與設(shè)計(jì)保持約定一致即可。這里Token的命名方式與組件基本一致，都是按照”類別-元件-屬性-等級(jí)-狀態(tài)“的順序依次往下。不同單詞之間采用“–“或者”.“符號(hào)相連是可以通用的。

上面按鈕的命名雖然看起來很復(fù)雜，但是它也可以很明確的告訴設(shè)計(jì)師以及前端它的使用場(chǎng)景。例如它告訴我們可能用于按鈕的背景，它還表達(dá)了它當(dāng)前的等級(jí)是什么，以及它的具體狀態(tài)是什么。

3. 整理Design Token

有了統(tǒng)一的命名規(guī)則后，我們可以把涉及到Token編寫的組件全部以表格的形式整理出來，開發(fā)在編寫的時(shí)候可以對(duì)照?qǐng)D表中組件的名稱，直接在導(dǎo)出的json文件中調(diào)用該組件的詳細(xì)信息。

五、應(yīng)用

因?yàn)槲覀兊脑O(shè)計(jì)軟件是Figma，因此挑選了與之匹配的插件“Figma Tokens”來輔助我們協(xié)同。

1.手動(dòng)輸入Token

我們以下圖為例，嘗試下怎么根據(jù)Token值在在該插件中手動(dòng)輸入。

2.批量導(dǎo)入Token

手動(dòng)輸入大家可能覺得太麻煩，那么我們可以嘗試下如何批量導(dǎo)入Token，這里以顏色的梯度色板為例，首先我們先在Figma里面利用Foundation插件建立Gobal梯度色板（也可以自己手動(dòng)在Figma中輸入產(chǎn)品的基礎(chǔ)色值），隨后將其導(dǎo)入Figma Token中。這些導(dǎo)入后的顏色作為全局Token，后續(xù)將會(huì)被引用。

在過去開發(fā)利用藍(lán)湖編寫組件的時(shí)候，需要選中這個(gè)組件，然后復(fù)制代碼后輸入該組件相對(duì)應(yīng)的顏色值。現(xiàn)在就不需要知道這些具體的值，只需要知道組件的token名稱就可以在調(diào)出的json文件中該組件的詳細(xì)信息，大大提升了工作效率。

3. 新建主題

接下來我們?cè)诓寮髠?cè)新建別名Token（這里的命名建議采用英文，以防后續(xù)導(dǎo)出json出現(xiàn)問題），并根據(jù)顏色的應(yīng)用場(chǎng)景分為背景色、反饋色、文字色等（具體根據(jù)當(dāng)前項(xiàng)目所需命名）。

這些命名好之后我們就可以開始通過簡(jiǎn)單的樣式進(jìn)行應(yīng)用，例如我們想更換視窗中的按鈕背景顏色，這時(shí)只需選中Figma操作區(qū)的按鈕背景后再選擇別名Token中對(duì)應(yīng)的藍(lán)色即可進(jìn)行聯(lián)動(dòng)替換（這里要注意的是主題順序，選中下方主題，則會(huì)對(duì)上方主題進(jìn)行覆蓋）。

4. 導(dǎo)出Json

導(dǎo)出Json后，開發(fā)在編寫代碼的時(shí)候可以對(duì)這個(gè)文檔直接進(jìn)行直接復(fù)制 ，確保設(shè)計(jì)與開發(fā)的一致性。

六、寫在最后

以上是有關(guān)Design Token的介紹以及落地的相關(guān)內(nèi)容，它對(duì)還未建立公司組件庫(kù)且想提高團(tuán)隊(duì)的協(xié)作特別有幫助。

Token提供的可操作性空間很大，可支持自定義的操作很多，其實(shí)目前做到文字以及顏色的自定義就可以很快提升我們的效率了。

在未來的產(chǎn)品發(fā)展中我相信Token的應(yīng)用不單單是作為輔助插件的支撐，會(huì)成為這些設(shè)計(jì)軟件內(nèi)部的標(biāo)配，賦能更多的產(chǎn)品。不知道你們公司是如何應(yīng)用Design Token，歡迎一起討論~

我是江鳥，一個(gè)愛學(xué)習(xí)愛分享的設(shè)計(jì)師。

我們下期見~

本文由 @江鳥的設(shè)計(jì)生活 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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