設計從來不是一成不變的東西。優秀的設計師往往都明白一個道理，想要通過一勞永逸的設計創造一個偉大產品是不現實的。設計存在的終極目的是解決問題，市場在在不斷的變化，那么設計也會隨之不斷的適應和更迭，所以怎樣保證產品團隊能快速高效的完成更迭才是重中之重。一般而言，產品研發團隊會依靠統一的設計系統（Design System）去實現更快速的產品設計和構建流程，而“Design Tokens”就是現代設計系統的中基本的組成部分。

Design Tokens翻譯過來可以叫做“設計指令”或者“設計變量”，是一種設計師和開發之間一種表達設計決策的通用語言，它可以確保構建的產品在不同平臺和設備上都與設計稿一致，確保設計稿被高效、準確地還原。本篇文章，我們會全面的介紹和了解什么是Design Tokens，它的重要性，以及如何利用它為你的產品建立一套高效完整的設計系統！

什么是Design Tokens？

Design Tokens 是一種定義產品屬性的代碼語言。通常會用來指代一些反復在不同的設計稿，代碼，工具和平臺中使用的某種設計屬性，如顏色、排版和間距等。它可以取代硬編碼常量，快速高效的實現所有產品設計和體驗的一致和統一！

舉個例子，比如你在一個產品中使用藍色作為主色，這個藍色色值是＃508BFF。那么你可以將該色值通過硬編碼的方式添加到設計元素中，將其用作常量。但這樣做其實效率極低，因為每次想要更改顏色時，您需要手動去調整所有使用此色值的每個實例的代碼。要是遇到在大規模項目中，這樣繁瑣而巨大的工作量可能會直接讓你崩潰，而且還容易因為遺漏修改部分代碼導致設計上不一致。但如果使用Design Tokens就能實現高效快速的修改，首先你需要為顏色代碼＃508BFF定義一個Token值。這個值在設計和開發過程都會被使用，如果需要更換一個其他色值的顏色，開發只需重新輸入每一個 Token 對應的新色值，就可以做到產品全局的自動顏色更換！

Design Token的概念最初是由salesforce(一家硅谷的saas企業,2021年收購了slack)的lightning design system團隊在14年提出并在團隊內部落地的，它的初衷是幫助確保 Salesforce 產品的設計一致性，自那以后，設計令牌變得越來越普遍，時至今日國內國外的很多互聯網大廠都已經在自己的項目中使用，包括adobe、Google、騰訊，Mockplus 等設計團隊。

Design Tokens是如何被應用到實際生產中的？

其實Design Tokens已經被廣泛應用到了像Mockplus RP這樣的設計工具中。首先我們已經知道Design Tokens是定義產品設計屬性的變量，如果我們能將它的原理直接應用和整合到設計系統的組件庫上，那它就能成為產研團隊使用的設計系統中重要的組成部分，從而在產品設計和開發過程中幫助設計師，開發實現快速修改和信息同步，當設計師使用Mockplus RP產出原型和線框的時候，實際上他們已經在使用Design Tokens了。比如，我們把一個色#508BFF定義為“blue-200”的Token，設計和開發過程中當需要使用這個顏色的時候都使用“blue-200”的這Token，這樣就能保證在產品的不同的地方，以及在不同產品開發進程中都使用的是同一個顏色，當Design Tokens被修改過后，在設計中所有對應Token的實例都會自動同步修改。

Design Tokens都有哪些種類？

一般而言Design Tokens的值可以指代顏色、字體、間距等。根據使用目的，主要可以分為以下幾個類別：

- 顏色Tokens：用于定義產品中使用的顏色值，包括設計中使用的主要顏色、次要顏色和其他顏色。

- 字體Tokens：用于定義產品的字體相關的屬性，包括字重和字號等。

- 間距Tokens：用于定義設計中元素之間的間距，包括外邊距和內邊距。

- 視圖高度Tokens：用于定義產品中元素之間的景深。

- 動效Tokens：用于定義動畫效果，包括動畫時長和緩動曲線。

- 圖標Tokens：用于定義產品中使用的圖標的樣式，包括大小、顏色和形狀。

- 品牌Tokens：用于定義品牌的視覺元素，包括品牌Logo、品牌字體、品牌顏色調色板和其他品牌相關屬性。

Design Tokens的優勢是什么呢？

我們可以將Design Tokens當成構建設計系統的一塊關鍵拼圖。它提供了一種將設計元素的屬性標準化的方式，確保它們在設計和開發中，不同平臺和設備上都能保持一致。它的主要優勢有幾點：

- 共享的設計語言：Tokens為設計師和開發人員提供了一個共同的設計語言，使他們更容易的協作和理解彼此的決策。

- 一致性：可以幫設計師和開發人員共同創建視覺和體驗上的一致和統一。

- 易維護性：便于團隊高效快速做批量修改，當一個Token被修改時，該變更會自動應用到產品中所有該Token的實例上。

- 資源高效復用：Tokens是可以直接在多個產品和設計中快速復用的，從而減少重復工作。

什么時候適合使用Design Tokens？何時又需要避免使用它？

一般而言，在以下三種情況是最適合使用Deisign Tokens去提高效率的：

- 計劃構建一個新產品或重新設計現有產品的時。

- 產品需要適配多個平臺時。

- 產品設計經常更改，希望維護更方便的時候。

但是如果您在設計中都是使用硬編碼的方式，又或者產品設計在接下來的幾年中不會有太大變化，那Deisgn Tokens可能不太適合你，也不會對你有多大的幫助。

使用Design Tokens一般有哪些步驟？

總結下來大概有以下幾個步驟：

1. 整理出界面元素清單 

當你需要新建Design Tokens時，首先需要將你的產品和設計組件進行拆解到很微小的元素，比如按鈕和輸入框這樣的很小的界面組成部分，此外你還需要整理出他們的對應的視覺風格。當做完這一系列的清單整理，你就能對構成整個產品界面的所有元素和風格有一個清晰的認識。

2. 定義您的設計系統

當您完成界面清單整理后，下一步就可以著手定義產品的元素了（例如菜單、CTA按鈕等這樣的功能性元素）以及它們的視覺屬性，比如顏色、字體、間距、動畫和其他設計屬性。

這里需要注意，不要一股腦的把設計中中所有顏色、字體或間距都定義為Tokens。你需要有一套明確的標準：具體什么樣的元素和屬性才需要被定義為Tokens。把那些只會在設計中使用一次的顏色或字體轉定義為Token并沒有多大意義。一個過來人的經驗是可以用把使用次數作為標準去判斷該元素是否需要被定義為Token——比如，如果樣式被使用了X次，那就需要被定義為Tokens了。

此外還有一個建議是最好有一個管理Token的負責人，負責檢查和審核設計系統進行更新的需求。所有團隊成員提出的新的Token需求需要他統一把控，避免不必要的Tokens添加到設計系統。

3. 創建Tokens

接下來就可以開始創建添加Tokens了。Token的命名方式建議最好能清晰的記錄每個Token的相關信息，比如Token名稱、值、用例，以及創建它目的的以及如何使用的介紹，以及團隊成員需要了解的關于這個Token的其他信息，這樣能可以讓你團隊中的每個人都能清晰的了解如何使用它們。

設計師經常會犯的一個錯誤就是給Tokens的命名太過隨意。一個好的Token命名應該直觀的告訴其他團隊成員它的預期使用場景或方式。比如，如果你將一個CTA按鈕的顏色Token命名為“mysuperblueelement-400”，對于第一次看到這個名稱的人來說，它并沒有傳達太多有用信息。但是如果你將它命名為“cta-primary-background-blue-400”，它就清楚地說明這個Token用于主要CTA按鈕上，作為一個背景顏色。這里建議命名方式可以參考這樣的形式：[分類] - [類型] - [屬性]，分類對應一個元素的類別（如按鈕、輸入框等），類型是指定元素的具體類型（如主按鈕、次級按鈕等），屬性就是該元素的顏色和其他的一些視覺屬性。

4. 將Design Tokens應用到你的設計中

你可以Mockplus DS中創建Tokens，快速復用完成產品原型和線框的構建。這里就會涉及到選擇不同的格式了，雖然可以使用許多不同的格式，但建議最好用JSON格式，因為該格式可以存儲項目-值對（item-value pairs），并且可以根據開發人員的需求輕松做出優化調整。

5. 在代碼中實現 Design Tokens

接下來就是在代碼中實現Design Tokens了。Design Tokens應該集中存儲在一個地方，方便開發人員導入他們的代碼庫中。導入之后，非常重要的一步是將硬編碼的值替換為Design Tokens，接下來還需要二次確認代碼中每個設計元素使用的是正確的Token。

為了方便查找和使用，最好是把不同類別的Tokens用不同的文件或子目錄進行管理，比如可以將顏色Tokens分組到名為“colors.scss”的文件中。

6. 同一元素的Design Tokens保持全局使用

產品中同樣的元素不應存在一部分是Token化的，而另一部分不是，因為這種情況很容易導致設計上的視覺不一致。始終一致地在整個產品中使用Design Tokens， 后期修改上也會方便很多。

總結

Design Tokens是團隊在構建產品時用于設計決策的通用語言。用它來代替硬編碼可以確保構建的產品在不同平臺和設備上都與設計稿保持一致，讓產品設計更迭和修改過程也更加高效流暢。如今，Design Tokens 已經成為了設計師和開發之間的單一事實來源（a single source of truth），真正意義上的幫助設計和開發實現設計的一致性！