我們在設計工作的開展過程中，時常會因為參與人數多、業務背景雜而面臨諸多考驗。本文從概念、背景、類型、命名和應用五大方面來介紹視覺設計的原子Design Token，為大家解答在設計環節如何巧妙化解團隊協作的難題。推薦設計夥伴們閱讀了解～

提到Design Token，很多同學可能第一反應是這是什麼？其實這不是什麼新名詞，早在2014年，salesforce就開始在這塊進行研究，它的名字來源于Jina Anne。

Design Token 是設計系統中的視覺設計原子。它們是一組有着統一命名規則的實體，用于存儲視覺設計部分的具體參數，比如 HEX 色值、間距、尺寸的像素等。使用它可以有幫助為 UI 開發工作維護一套具備可擴展性、一緻性的視覺體系。

在我們實際工作中，經常會面臨參與成員衆多以及業務背景的複雜性以及設計趨勢變化的等問題和考驗，你是否有以下的疑問：

• 設計團隊加入新人，因為對規範的不了解，經常會不知道不同場景對應色值的應用。
• 開發同學代碼碎片化，在遇到新業務時，需要二次開發，叠代以及維護成本增加。
• 随着公司戰略升級，品牌色做了調整，因為調整頁面衆多，經常因為某些色彩細節而忘記調整。

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

一、概念

從本質上來講，Design Token是一種設計與開發共同使用的工作思維和方法。”Token“的意思是令牌或者指令，簡單的可以理解為對視覺樣式封裝的屬性參數。在設計師以及開發都理解的命名規則上，對組件中的每一個元素進行有規律的代碼化命名，統一了兩個不同工種（前端與設計）的交流語言，保證設計系統可以被快速管理，确保了産品體驗的靈活性一緻性。

上面解釋如果還覺得複雜的話，你可以把Design Token理解為設計以及前端都認可的外号。例如當前按鈕背景色值的外号是”colour-button-backgroung-primary-normal“，這樣即使以後按鈕背景色再怎麼變化，前端都可以根據這個外号來應用顔色，這樣的話，按鈕在系統中的背景色就是唯一的。

二、使用場景

我們可以設想一下假如沒有Token，我們開發是如何工作的。

例如我們之前的品牌色#00704a，在頁面中會大量被使用，那麼當每個頁面出現該顔色的時候，開發得重複編寫，那後續品牌色升級，開發改起來會特别麻煩。

這個時候我們假如使用了Token，開發在實際工作的時候就不需要輸入這個顔色的色值，而隻需要這個顔色的Token“color-primary：blue-7”即可。即使後續這個品牌色值再怎麼調整，也不需要開發做重複的工作。

三、類型

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

1. 全局Token

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

2. 别名Token

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

3. 組件Token

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

四、命名

1. 拆解Token

要想對Token進行合理命名，我們就需要對其進行原子級别的拆解。拆解為類别、元件、屬性、等級、狀态這5類。

不同公司針對Token有着不同的定義方式，隻要設計師與前端達成一緻就好。

例如産品設計中的Lightning Design System在對Token進行原子級拆解的時候就包含了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中有着最廣泛應用場景，最基礎的組件元素。

我們對常用的組件圍繞形、色、字、構、質這5個維度對其進行拆解，分為圓角、色彩、文字、間距以及陰影這5類

（2） 元件

元件指具體的單一的組件種類，例如按鈕這個類别下就包含了主按鈕、默認按鈕、虛線按鈕、文本按鈕、鍊接按鈕。

（3）屬性

這裡的屬性通常分為背景或者邊框兩種。可能會有同學疑問，為什麼隻有2種屬性，因為這裡我們的樣式不與具體組件綁定，僅僅以樣式本身的性質來做區分，所以在屬性這裡我們羅列了2種樣式。

例如下圖的彈窗，線框的描邊、輸入框的描邊以及按鈕的描邊都可以調取統一的Token，将原本相同元件但不同樣式的組件進行統一化管理。

（4） 等級

等級的狀态由組件的基本功能以及具體的使用場景決定，有部分組件隻有一個等級，例如”面包屑”，這時候在Token命名的時候就可以不體現，而有的組件例如“按鈕””導航“等則有多個等級；

（5）類别

狀态則是組件在交互時候的不同樣式，通常有默認、懸停、點擊、禁用等，有時候還會根據場景的不同，有危險以及幽靈等狀态。

2.Token的命名

Token的命名沒有唯一的表達方式，隻需前端與設計保持約定一緻即可。這裡Token的命名方式與組件基本一緻，都是按照”類别-元件-屬性-等級-狀态“的順序依次往下。不同單詞之間采用“–“或者”.“符号相連是可以通用的。

上面按鈕的命名雖然看起來很複雜，但是它也可以很明确的告訴設計師以及前端它的使用場景。例如它告訴我們可能用于按鈕的背景，它還表達了它當前的等級是什麼，以及它的具體狀态是什麼。

3. 整理Design Token

有了統一的命名規則後，我們可以把涉及到Token編寫的組件全部以表格的形式整理出來，開發在編寫的時候可以對照圖表中組件的名稱，直接在導出的Json文件中調用該組件的詳細信息。

五、應用

因為我們的設計軟件是Figma，因此挑選了與之匹配的插件“Figma Tokens”來輔助我們協同。

1.手動輸入Token

我們以下圖為例，嘗試下怎麼根據Token值在在該插件中手動輸入。

2.批量導入Token

手動輸入大家可能覺得太麻煩，那麼我們可以嘗試下如何批量導入Token，這裡以顔色的梯度色闆為例，首先我們先在Figma裡面利用Foundation插件建立Gobal梯度色闆（也可以自己手動在Figma中輸入産品的基礎色值），随後将其導入Figma Token中。這些導入後的顔色作為全局Token，後續将會被引用。

在過去開發利用藍湖編寫組件的時候，需要選中這個組件，然後複制代碼後輸入該組件相對應的顔色值。現在就不需要知道這些具體的值，隻需要知道組件的token名稱就可以在調出的json文件中該組件的詳細信息，大大提升了工作效率。

3. 新建主題

接下來我們在插件左側新建别名Token（這裡的命名建議采用英文，以防後續導出json出現問題），并根據顔色的應用場景分為背景色、反饋色、文字色等（具體根據當前項目所需命名）。

這些命名好之後我們就可以開始通過簡單的樣式進行應用，例如我們想更換視窗中的按鈕背景顔色，這時隻需選中Figma操作區的按鈕背景後再選擇别名Token中對應的藍色即可進行聯動替換（這裡要注意的是主題順序，選中下方主題，則會對上方主題進行覆蓋）。

4. 導出Json

導出Json後，開發在編寫代碼的時候可以對這個文檔直接進行直接複制 ，确保設計與開發的一緻性。

六、寫在最後

以上是有關Design Token的介紹以及落地的相關内容，它對還未建立公司組件庫且想提高團隊的協作特别有幫助。

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

在未來的産品發展中我相信Token的應用不單單是作為輔助插件的支撐，會成為這些設計軟件内部的标配，賦能更多的産品。不知道你們公司是如何應用Design Token，歡迎一起讨論~

我是江鳥，一個愛學習愛分享的設計師。

我們下期見~

本文由 @江鳥的設計生活 原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部