設(shè)計從來不是一成不變的東西。優(yōu)秀的設(shè)計師往往都明白一個道理：想要通過一勞永逸的設(shè)計創(chuàng)造一個偉大產(chǎn)品是不現(xiàn)實的。設(shè)計存在的終極目的是解決問題，市場在不斷的變化，那么設(shè)計也會隨之不斷的適應(yīng)和更迭，所以怎樣保證產(chǎn)品團(tuán)隊能快速高效的完成更迭才是重中之重。一般而言，產(chǎn)品研發(fā)團(tuán)隊會依靠統(tǒng)一的設(shè)計系統(tǒng)（Design System）去實現(xiàn)更快速的產(chǎn)品設(shè)計和構(gòu)建流程，而“Design Tokens”就是現(xiàn)代設(shè)計系統(tǒng)的中基本的組成部分。
Design Tokens翻譯過來可以叫做“設(shè)計指令”或者“設(shè)計變量”，是一種設(shè)計師和開發(fā)之間一種表達(dá)設(shè)計決策的通用語言，它可以確保構(gòu)建的產(chǎn)品在不同平臺和設(shè)備上都與設(shè)計稿一致，確保設(shè)計稿被高效、準(zhǔn)確地還原。
本篇文章，我們會全面的介紹和了解什么是Design Tokens，它的重要性，以及如何利用它為你的產(chǎn)品建立一套高效完整的設(shè)計系統(tǒng)！
什么是Design Tokens？
Design Tokens 是一種定義產(chǎn)品屬性的代碼語言。通常會用來指代一些反復(fù)在不同的設(shè)計稿，代碼，工具和平臺中使用的某種設(shè)計屬性，如顏色、排版和間距等。它可以取代硬編碼常量，快速高效的實現(xiàn)所有產(chǎn)品設(shè)計和體驗的一致和統(tǒng)一！
舉個例子，比如你在一個產(chǎn)品中使用藍(lán)色作為主色，這個藍(lán)色色值是＃508BFF。那么你可以將該色值通過硬編碼的方式添加到設(shè)計元素中，將其用作常量。但這樣做其實效率極低，因為每次想要更改顏色時，您需要手動去調(diào)整所有使用此色值的每個實例的代碼。要是遇到在大規(guī)模項目中，這樣繁瑣而巨大的工作量可能會直接讓你崩潰，而且還容易因為遺漏修改部分代碼導(dǎo)致設(shè)計上不一致。但如果使用Design Tokens就能實現(xiàn)高效快速的修改，首先你需要為顏色代碼＃508BFF定義一個Token值。這個值在設(shè)計和開發(fā)過程都會被使用，如果需要更換一個其他色值的顏色，開發(fā)只需重新輸入每一個 Token 對應(yīng)的新色值，就可以做到產(chǎn)品全局的自動顏色更換！
Design Token的概念最初是由salesforce(一家硅谷的saas企業(yè),2021年收購了slack)的lightning design system團(tuán)隊在14年提出并在團(tuán)隊內(nèi)部落地的，它的初衷是幫助確保 Salesforce 產(chǎn)品的設(shè)計一致性，自那以后，設(shè)計令牌變得越來越普遍，時至今日國內(nèi)國外的很多互聯(lián)網(wǎng)大廠都已經(jīng)在自己的項目中使用，包括adobe、Google、騰訊，Mockplus 等設(shè)計團(tuán)隊。
Design Tokens是如何被應(yīng)用的?
其實Design Tokens已經(jīng)被廣泛應(yīng)用到了像Mockplus RP這樣的設(shè)計工具中。首先我們已經(jīng)知道Design Tokens是定義產(chǎn)品設(shè)計屬性的變量，如果我們能將它的原理直接應(yīng)用和整合到設(shè)計系統(tǒng)的組件庫上，那它就能成為產(chǎn)研團(tuán)隊使用的設(shè)計系統(tǒng)中重要的組成部分，從而在產(chǎn)品設(shè)計和開發(fā)過程中幫助設(shè)計師，開發(fā)實現(xiàn)快速修改和信息同步，當(dāng)設(shè)計師使用Mockplus RP產(chǎn)出原型和線框的時候，實際上他們已經(jīng)在使用Design Tokens了。比如，我們把一個色#508BFF定義為“blue-200”的Token，設(shè)計和開發(fā)過程中當(dāng)需要使用這個顏色的時候都使用“blue-200”的這Token，這樣就能保證在產(chǎn)品的不同的地方，以及在不同產(chǎn)品開發(fā)進(jìn)程中都使用的是同一個顏色，當(dāng)Design Tokens被修改過后，在設(shè)計中所有對應(yīng)Token的實例都會自動同步修改。
Design Tokens有哪些種類？
一般而言Design Tokens的值可以指代顏色、字體、間距等。
根據(jù)使用目的，主要可以分為以下幾個類別：
顏色Tokens：用于定義產(chǎn)品中使用的顏色值，包括設(shè)計中使用的主要顏色、次要顏色和其他顏色。
字體Tokens：用于定義產(chǎn)品的字體相關(guān)的屬性，包括字重和字號等。
間距Tokens：用于定義設(shè)計中元素之間的間距，包括外邊距和內(nèi)邊距。
視圖高度Tokens：用于定義產(chǎn)品中元素之間的景深。
動效Tokens：用于定義動畫效果，包括動畫時長和緩動曲線。
圖標(biāo)Tokens：用于定義產(chǎn)品中使用的圖標(biāo)的樣式，包括大小、顏色和形狀。
品牌Tokens：用于定義品牌的視覺元素，包括品牌Logo、品牌字體、品牌顏色調(diào)色板和其他品牌相關(guān)屬性。
Design Tokens的優(yōu)勢是什么呢？
我們可以將Design Tokens當(dāng)成構(gòu)建設(shè)計系統(tǒng)的一塊關(guān)鍵拼圖。它提供了一種將設(shè)計元素的屬性標(biāo)準(zhǔn)化的方式，確保它們在設(shè)計和開發(fā)中，不同平臺和設(shè)備上都能保持一致。它的主要優(yōu)勢有幾點：
共享的設(shè)計語言：Tokens為設(shè)計師和開發(fā)人員提供了一個共同的設(shè)計語言，使他們更容易的協(xié)作和理解彼此的決策。
一致性：可以幫設(shè)計師和開發(fā)人員共同創(chuàng)建視覺和體驗上的一致和統(tǒng)一。
易維護(hù)性：便于團(tuán)隊高效快速做批量修改，當(dāng)一個Token被修改時，該變更會自動應(yīng)用到產(chǎn)品中所有該Token的實例上。
資源高效復(fù)用：Tokens是可以直接在多個產(chǎn)品和設(shè)計中快速復(fù)用的，從而減少重復(fù)工作。
什么時候用Design Tokens？
一般而言，在以下三種情況是最適合使用Deisign Tokens去提高效率的：
計劃構(gòu)建一個新產(chǎn)品或重新設(shè)計現(xiàn)有產(chǎn)品的時。
產(chǎn)品需要適配多個平臺時。
產(chǎn)品設(shè)計經(jīng)常更改，希望維護(hù)更方便的時候。
但是如果您在設(shè)計中都是使用硬編碼的方式，又或者產(chǎn)品設(shè)計在接下來的幾年中不會有太大變化，那Deisgn Tokens可能不太適合你，也不會對你有多大的幫助。
使用Design Tokens一般有哪些步驟？
總結(jié)下來大概有以下幾個步驟：
整理出界面元素清單
當(dāng)你需要新建Design Tokens時，首先需要將你的產(chǎn)品和設(shè)計組件進(jìn)行拆解到很微小的元素，比如按鈕和輸入框這樣的很小的界面組成部分，此外你還需要整理出他們的對應(yīng)的視覺風(fēng)格。當(dāng)做完這一系列的清單整理，你就能對構(gòu)成整個產(chǎn)品界面的所有元素和風(fēng)格有一個清晰的認(rèn)識。
定義您的設(shè)計系統(tǒng)
當(dāng)您完成界面清單整理后，下一步就可以著手定義產(chǎn)品的元素了（例如菜單、CTA按鈕等這樣的功能性元素）并定義它們的視覺屬性。包括它們的顏色、字體、間距、動畫和其他設(shè)計屬性。
這里需要注意，不要一股腦的把設(shè)計中所有顏色、字體或間距都定義為Tokens。你需要有一套明確的標(biāo)準(zhǔn)：具體什么樣的元素和屬性才需要被定義為Tokens。把那些只會在設(shè)計中使用一次的顏色或字體轉(zhuǎn)定義為Token并沒有多大意義。一個過來人的經(jīng)驗是可以把使用次數(shù)作為標(biāo)準(zhǔn)去判斷該元素是否需要被定義為Token。比如，如果樣式被使用了10次，那就需要被定義為Tokens了。
此外還有一個建議是：最好有一個管理Token的負(fù)責(zé)人，負(fù)責(zé)檢查和審核設(shè)計系統(tǒng)進(jìn)行更新的需求。所有團(tuán)隊成員提出的新的Token需求需要他統(tǒng)一把控，避免不必要的Tokens添加到設(shè)計系統(tǒng)。
創(chuàng)建Tokens
接下來就可以開始創(chuàng)建添加Tokens了。Token的命名方式建議最好能清晰的記錄每個Token的相關(guān)信息，比如Token名稱、值、用例，以及創(chuàng)建它目的的以及如何使用的介紹，以及團(tuán)隊成員需要了解的關(guān)于這個Token的其他信息，這樣能可以讓你團(tuán)隊中的每個人都能清晰的了解如何使用它們。
設(shè)計師經(jīng)常會犯的一個錯誤就是給Tokens的命名太過隨意。一個好的Token命名應(yīng)該直觀的告訴其他團(tuán)隊成員它的預(yù)期使用場景或方式。比如，如果你將一個CTA按鈕的顏色Token命名為“mysuperblueelement-400”，對于第一次看到這個名稱的人來說，它并沒有傳達(dá)太多有用信息。但是如果你將它命名為“cta-primary-background-blue-400”，它就清楚地說明這個Token用于主要CTA按鈕上，作為一個背景顏色。這里建議命名方式可以參考這樣的形式：[分類] - [類型] - [屬性]，分類對應(yīng)一個元素的類別（如按鈕、輸入框等），類型是指定元素的具體類型（如主按鈕、次級按鈕等），屬性就是該元素的顏色和其他的一些視覺屬性。
將Design Tokens應(yīng)用到你的設(shè)計中
你可以使用Mockplus DS中創(chuàng)建Tokens，快速復(fù)用完成產(chǎn)品原型和線框的構(gòu)建。這里就會涉及到選擇不同的格式了，雖然可以使用許多不同的格式，但建議最好用JSON格式，因為該格式可以存儲項目-值對（item-value pairs），并且可以根據(jù)開發(fā)人員的需求輕松做出優(yōu)化調(diào)整。
在代碼中實現(xiàn) Design Tokens
接下來就是在代碼中實現(xiàn)Design Tokens了。Design Tokens應(yīng)該集中存儲在一個地方，方便開發(fā)人員導(dǎo)入他們的代碼庫中。導(dǎo)入之后，非常重要的一步是將硬編碼的值替換為Design Tokens，接下來還需要二次確認(rèn)代碼中每個設(shè)計元素使用的是正確的Token。
為了方便查找和使用，最好是把不同類別的Tokens用不同的文件或子目錄進(jìn)行管理，比如可以將顏色Tokens分組到名為“colors.scss”的文件中。
同一元素的Design Tokens保持全局使用
產(chǎn)品中同樣的元素不應(yīng)存在一部分是Token化的，而另一部分不是，因為這種情況很容易導(dǎo)致設(shè)計上的視覺不一致。始終一致地在整個產(chǎn)品中使用Design Tokens， 后期修改上也會方便很多。
結(jié)論
Design Tokens是團(tuán)隊在構(gòu)建產(chǎn)品時用于設(shè)計決策的通用語言。用它來代替硬編碼可以確保構(gòu)建的產(chǎn)品在不同平臺和設(shè)備上都與設(shè)計稿保持一致，讓產(chǎn)品設(shè)計更迭和修改過程也更加高效流暢。如今，Design Tokens 已經(jīng)成為了設(shè)計師和開發(fā)之間的單一事實來源（a single source of truth），真正意義上的幫助設(shè)計和開發(fā)實現(xiàn)設(shè)計的一致性！
