隨著近幾年 Figma 等一系列在線設(shè)計工具的崛起，相信設(shè)計師對設(shè)計系統(tǒng)的都有了更深的了解。其實設(shè)計系統(tǒng)的建設(shè)是一個非常龐大而復(fù)雜的工程。我們通過各種設(shè)計規(guī)范等對產(chǎn)研流程提效，但還是會經(jīng)常遇到一些棘手的問題。

1. 開發(fā)用的顏色/字體樣式/投影等與設(shè)計稿存在差距；

2. 顏色選擇困難。不同設(shè)計師之間在用各種層級的文本顏色時，到底用 Gray1 還是用 Gray2，不知道該選哪一種；

3. SaaS 類的產(chǎn)品需要根據(jù)客戶的品牌色調(diào)整產(chǎn)品的主色，設(shè)計和開發(fā)都面臨巨大的工作量；

4. 設(shè)計稿的更新無法及時在開發(fā)者的代碼中體現(xiàn)，一是因為開發(fā)首先需要拿到新的設(shè)計稿，再根據(jù)標注甚至肉眼判斷區(qū)別后更新代碼；另一方面，設(shè)計稿中看似簡單的改動可能導(dǎo)致較大范圍的代碼改動，例如字體大小等；

為了解決和優(yōu)化上述的問題，Design Token 應(yīng)運而生。它可以高效地解決產(chǎn)品設(shè)計和開發(fā)過程中的細節(jié)和風格一致性的問題，提高產(chǎn)研團隊設(shè)計質(zhì)量和協(xié)作效率。

什么是 Design Token

"Token"原本的意思是"令牌，指令"，與 Design 連在?起指"設(shè)計變量"。在工程邏輯中用于用戶身份與服務(wù)器端進行驗證，而在設(shè)計體系中，Design Token 則可以簡單理解為封裝的視覺樣式參數(shù)。它通過規(guī)定樣式參數(shù)，并通過一套符合設(shè)計師、工程師理解的統(tǒng)一的命名規(guī)則，為這些樣式參數(shù)的定義名稱。

原子設(shè)計理論提出者 Brad Frost （布拉德 · 弗羅斯特）在《Atomic Design》中提到：原子設(shè)計理論從原子（Atoms）、分子（Molecules）、組織（Organisms）、模板（Templates）、頁面（Pages）、標準流程（Patterns）再到更完善的設(shè)計體系（Design Systems），這一切都是為了產(chǎn)品設(shè)計、研發(fā)效率和一致性提供幫助。同時，它們也是傳達設(shè)計原則、構(gòu)成產(chǎn)品獨特氣質(zhì)的基石。Design Token 就是原子級的最基礎(chǔ)的構(gòu)成要素。

根據(jù)北美頂級 SaaS 企業(yè)的開源設(shè)計系統(tǒng) Saleforce Lightning Design System 的解釋，Design Token 是設(shè)計系統(tǒng)中的可視化原子，是設(shè)計屬性的命名實體，使用它們代替具體編碼值（如顏色的 16 進制、間距的像素值等），以便于維護一套可擴展且一致性的設(shè)計系統(tǒng)。

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

Design Token 的優(yōu)勢

基于上述關(guān)于 Design Token 的基礎(chǔ)解釋，可以將 Design Token 的好處可總結(jié)為：

• 設(shè)計語義-更易理解
• 設(shè)計方案-更加一致
• 主題皮膚-一鍵替換
• 設(shè)計變更-高效維護
• 設(shè)計成果-精準還原

1. 設(shè)計語義-更易理解

每一個組件的基礎(chǔ)元素都可以用 Token 進行語義化的命名，幫助設(shè)計師和開發(fā)建立統(tǒng)一的描述語言。例如#91d5ff 這個色值按照傳統(tǒng)的設(shè)計規(guī)范命名的方式，它可能叫 Blue-3。在實際應(yīng)用的時候，設(shè)計師和開發(fā)并不能直接通過 Blue-3 來理解這個顏色到底是用在什么具體場景當中。而當我們通過 Token 語義的方式讓它達到組件級別的精度時，它會叫：color-primary-brand-light-disable，不同的設(shè)計師和開發(fā)就能迅速的理解這個顏色應(yīng)用在什么具體場景當中。

2. 設(shè)計方案-更加一致

當使用組件庫實際運用到項目當中時，我們有時候會有不同設(shè)計師合作產(chǎn)出一個項目的情況。對于一些不熟悉設(shè)計規(guī)范或新加入的設(shè)計師來說，就會困惑，當使用二級文本色的時候，究竟是用 Gray2、還是 Gray3、Gray4。而這個時候，我們定義一個 Token 名稱叫：color-text-secondary，這個 Token 嵌套的顏色是 ：Gray3，這樣我們設(shè)計師在使用的時候，只需要選擇 color-text-secondary 這個 Token 變量即可，能選擇的顏色就是唯一的，這就能在一定程度上確保不同設(shè)計師在同一個場景當中的設(shè)計稿保持高度一致性。

3. 主題皮膚-一鍵替換

主題皮膚的替換可以用在兩個維度，一是淺色模式和暗色模式的替換，二是不同品牌色之間的替換。我們可以將不同主題的同一個場景下的顏色使用同一個 Token 命名，例如變量名都叫：color-primary-brand-light-default，藍色皮膚下對應(yīng)的值為：#165DFF；紅色皮膚對應(yīng)的值為：#F53F3F。然后通過插件面板的一鍵操作即可完美切換。同時這種切換模式也可以帶入 tokn.josn 代碼（后面會具體講如何輸出 json 文件交付開發(fā)）中，與開發(fā)進行同步。

4. 設(shè)計變更 高效維護

還是上面的例子，當我們的二級文字顏色 color-text-secondary 需要進行變更，從 Gray-600 變?yōu)? Gray-500。如果沒有"color-text-secondary"這個 Token，我們可能需要手動去選中所有用了 Gray-600 的二級文字的圖層，一個一個地將它們改為 Gray-500，而當我們有了"color-text-secondary"這么一個 Token 時，我們只需要將 color-text-secondary 的值一鍵從 Gray-600 變?yōu)?Gray-500 便可以完成產(chǎn)品全局的顏色變更。進而設(shè)計師可以將 token.json 代碼（后面會具體講如何輸出 json 文件交付開發(fā)）同步更新給開發(fā) ，開發(fā)直接一鍵替換，線上的界面就能半自動地迅速應(yīng)用到變更后的色值。

5. 設(shè)計成果-精準還原

設(shè)計稿能否被開發(fā)精準還原，這幾乎是每一個設(shè)計師在實際項目中會遇到的問題。我們在進行設(shè)計驗收的時候，即便花了很多時間進行走查，在表格上列舉了很多細節(jié)問題，但最終的還原效果并不能得到保障。甚至在一些時候會感覺做驗收比重新做一遍設(shè)計稿還要費勁「emo」，有的時候甚至會直接按 F12 在網(wǎng)頁上改代碼給開發(fā)提示「狗頭」。

例如，在常規(guī)不使用 Token 的情況下，開發(fā)同學(xué)使用的是硬代碼的模式，代碼編輯器無法判斷這個顏色是否正確，如果開發(fā)不小心輸錯了一位數(shù)，就很可能導(dǎo)致線上運行時候的不一致。而使用了 Token 之后，開發(fā)只需要輸入這個場景的 Token 名稱的前綴，代碼編輯器便會自動化地提示有哪幾個顏色供選擇就可以了，如果不正確，代碼編輯器還會給出報錯提示，開發(fā)同學(xué)可以在寫代碼的過程中完成基礎(chǔ)的檢驗工作，這樣一來，設(shè)計師的成果便能夠一定程度上的精準還原，設(shè)計師驗收的工作量也會小很多。

在設(shè)計系統(tǒng)中應(yīng)用 Design Token

上面講了這么多理論，接下來開始實戰(zhàn)，準備好～

1. 提煉 Token 組成元素

Design Token 是構(gòu)成設(shè)計語言的基本構(gòu)建塊，是設(shè)計系統(tǒng)中最核心、最基礎(chǔ)的影響視覺風格的元素。根據(jù) Figma Tokens 插件默認提供的面板中，可以將分別以下組成元素：

Color 顏色、Shadow 投影、Typography 字體樣式、Size 尺寸、Space 間距、Border Radius 描邊圓角、Border Width 描邊寬度、Opacity 透明度等

2. 定義 Token 命名規(guī)則

關(guān)于 Token 的命名規(guī)則，不同的團隊有不同的定義方式，但其本質(zhì)都是為了提高產(chǎn)品的一致性和工作效率。因此在對 Token 命名規(guī)則進行分類整理時，設(shè)計需要與開發(fā)同事達成一致，以確保能夠更好地落地。

在制定自己產(chǎn)品的 Token 命名規(guī)則前，帶大家看一下大廠的 Design Token 都是怎么命名的

騰訊文檔 Token 變量表：https://mp.weixin.qq.com/s/sRRPlsxaUZj7220PLoFiRw

騰訊 TDesign 開源設(shè)計系統(tǒng) Token：https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less

:root,
:root[theme-mode="light"] {

// 文字 & 圖標 顏色
--td-font-white-1: rgba(255, 255, 255, 100%);
--td-font-white-2: rgba(255, 255, 255, 55%);
--td-font-white-3: rgba(255, 255, 255, 35%);
--td-font-white-4: rgba(255, 255, 255, 22%);
--td-font-gray-1: rgba(0, 0, 0, 90%);
--td-font-gray-2: rgba(0, 0, 0, 60%);
--td-font-gray-3: rgba(0, 0, 0, 40%);
--td-font-gray-4: rgba(0, 0, 0, 26%);

// 基礎(chǔ)顏色
--td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作
--td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
--td-error-color: var(--td-error-color-6); // 色彩-功能-失敗
--td-success-color: var(--td-success-color-5); // 色彩-功能-成功

// 基礎(chǔ)顏色的擴展 用于 hover / 聚焦 / 禁用 / 點擊 等狀態(tài)
--td-brand-color-hover: var(--td-brand-color-7); // hover 態(tài)
--td-brand-color-focus: var(--td-brand-color-2); // focus 態(tài)，包括鼠標和鍵盤
--td-brand-color-active: var(--td-brand-color-9); // 點擊態(tài)
--td-brand-color-disabled: var(--td-brand-color-3); // 禁用態(tài)
--td-brand-color-light: var(--td-brand-color-1); // 淺色的選中態(tài)

// 警告色擴展
--td-warning-color-hover: var(--td-warning-color-4);
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-active: var(--td-warning-color-6);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-light: var(--td-warning-color-1);

// 失敗/錯誤色擴展
--td-error-color-hover: var(--td-error-color-5);
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-7);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);

// 成功色擴展
--td-success-color-hover: var(--td-success-color-4);
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-6);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);

// 遮罩
--td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-彈出
--td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用

// 文本顏色
--td-text-color-primary: var(--td-font-gray-1); // 色彩-文字-主要
--td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要
--td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/說明
--td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用
--td-text-color-anti: #fff; // 色彩-文字-反色
--td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌
--td-text-color-link: var(--td-brand-color-8); // 色彩-文字-鏈接

// 分割線
--td-border-level-1-color: var(--td-gray-color-3);
--td-component-stroke: var(--td-gray-color-3);
// 邊框
--td-border-level-2-color: var(--td-gray-color-4);
--td-component-border: var(--td-gray-color-4);

// 內(nèi)投影 用于彈窗類組件（氣泡確認框 / 全局提示 / 消息通知）的內(nèi)描邊
--td-shadow-inset-top: inset 0 .5px 0 #dcdcdc;
--td-shadow-inset-right: inset .5px 0 0 #dcdcdc;
--td-shadow-inset-bottom: inset 0 -.5px 0 #dcdcdc;
--td-shadow-inset-left: inset -.5px 0 0 #dcdcdc;

// table 特定陰影
--td-table-shadow-color: rgba(0, 0, 0, 8%);

// 滾動條顏色
--td-scrollbar-color: rgba(0, 0, 0, 10%);
}

Element-Plus：https://element-plus.org/zh-CN/

--el-bg-color: #ffffff;
--el-bg-color-page: #ffffff;
--el-bg-color-overlay: #ffffff;
--el-text-color-primary: #303133;
--el-text-color-regular: #606266;
--el-text-color-secondary: #909399;
--el-text-color-placeholder: #a8abb2;
--el-text-color-disabled: #c0c4cc;
--el-border-color: #dcdfe6;
--el-border-color-light: #e4e7ed;
--el-border-color-lighter: #ebeef5;
--el-border-color-extra-light: #f2f6fc;
--el-border-color-dark: #d4d7de;
--el-border-color-darker: #cdd0d6;

Ant Design：https://ant.design/components/overview-cn/

Html {
--ant-primary-color: #1890ff;
--ant-primary-color-hover: #40a9ff;
--ant-primary-color-active: #096dd9;
--ant-primary-color-outline: rgba(24, 144, 255, .2);
--ant-primary-1: #e6f7ff;
--ant-primary-2: #bae7ff;
--ant-primary-3: #91d5ff;
--ant-primary-4: #69c0ff;
--ant-primary-5: #40a9ff;
--ant-primary-6: #1890ff;
--ant-primary-7: #096dd9;
--ant-primary-color-deprecated-PURe: ;
--ant-primary-color-deprecated-l-35: #cbe6ff;
--ant-primary-color-deprecated-l-20: #7ec1ff;
--ant-primary-color-deprecated-t-20: #46a6ff;
--ant-primary-color-deprecated-t-50: #8cc8ff;
--ant-primary-color-deprecated-f-12: rgba(24, 144, 255, .12);
--ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, .3);
--ant-primary-color-active-deprecated-d-02: #dcf4ff;

以上截取的部分 Token 基本是在 Github 上開源社區(qū)能找到相關(guān)的代碼。如果我們想要找一個非開源的設(shè)計系統(tǒng)的 Token 怎么找呢？

這里以飛書為例，個人覺得飛書整體的配色非常舒適，想要研究一下其中的 Token 是怎么制定的。

首先打開飛書網(wǎng)頁，按 F12，選中任意元素，便可在"樣式"中找到飛書產(chǎn)品所有的 Token 是如何命名，以及可以分析研究其中的色彩運用規(guī)律。

飛書 Token：www.feishu.cn

--bg-base: var(--N100);
--bg-base-raw: var(--N100-raw);
--bg-body: var(--N00);
--bg-body-raw: var(--N00-raw);
--bg-body-overlay: var(--N50);
--bg-body-overlay-raw: var(--N50-raw);
--bg-content-base: #f8f9fa;
--bg-content-base-raw: 248,249,250;
--bg-filler: var(--N200);
--bg-filler-raw: var(--N200-raw);
--bg-float: var(--N00);
--bg-float-raw: var(--N00-raw);
--bg-float-base: var(--N100);
--bg-float-base-raw: var(--N100-raw);
--bg-float-overlay: var(--N50);
--bg-float-overlay-raw: var(--N50-raw);
--bg-float-push: rgba(var(--N00-raw),0.8);
--bg-mask: rgba(0,0,0,0.4);
--bg-mask-raw: 0,0,0;

Token 命名規(guī)則總結(jié)

通過上面的大廠 Token 參考我們可以分析出一些普適性的規(guī)則：

1. 單詞之間用"-"分隔；

2. Token 前綴可自定義添加自己產(chǎn)品的簡稱，例如："–el-xx"、"–ant-xx"、"–td-xx"；

3. Token 可以套 Token，例如：–td-brand-color-hover: var(–td-brand-color-7)；

3. 整理 Design Token 資產(chǎn)表

分析完各個大廠的 Token 規(guī)則之后，接下來正式開始對自己產(chǎn)品的 Design Token 開始建設(shè)，首先便是整理一份 Design Token 資產(chǎn)表，可以用文檔、表格等形式整理。

這里以 TDesign 為例，需要包含 3 列：Token、Value、Describe。這份 Token 資產(chǎn)表整理好之后，可以在設(shè)計團隊內(nèi)部進行評審，通過之后再與開發(fā)進行對齊。

來源： https://tdesign.tencent.com/design/color

通過工具創(chuàng)建 Token 并聯(lián)動設(shè)計文件

以上主要講的是在思維層面 Design Token 是怎么推導(dǎo)的，接下來重點講一下怎么借助一些實用的工具將 Design Token 實現(xiàn)自動/半自動化的落地。

這里主要推薦的工具是 Figma Tokens 插件，它是一款基于 Figma 的插件，相對于 Figma 右側(cè)面板原生自帶的樣式外，能夠?qū)崿F(xiàn)多層級的 Token 管理，同時插件內(nèi)容能夠與 Figma 設(shè)計文件實現(xiàn)實時聯(lián)動。

1. 安裝并運行插件

插件安裝地址：https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens

安裝完成后，在 Figma 文件中打開 Figma Tokens 插件面板，并點擊"Get started"，開始創(chuàng)建。

2. 創(chuàng)建 Token 變量

在 Color 分類處點擊"+"號，將之前整理的 Design Token 資產(chǎn)表里的內(nèi)容一個一個錄入進插件當中。如何實現(xiàn) Token "套娃"呢？例如我們需要創(chuàng)建一個"–td-brand-color"，值為"–td-brand-color-8"，只需要在 Color 值的輸入框輸入"{–td-brand-color-8}"或"$–td-brand-color-8"，這里通過和開發(fā)溝通，推薦使用"{ }"大括號的形式進行賦值。全部 Token 創(chuàng)建完成之后，點擊"Create Styles"便可將插件中的樣式生成到 Figma 右側(cè)的樣式面板中。同時，插件中的修改也能夠與樣式進行實時同步。

3. 通過 JSON 代碼快捷導(dǎo)入 Token

上面的方法是需要根據(jù) Token 對照表，通過手動的方式一個一個錄入 Token，如果團隊的設(shè)計師有一點代碼功底，或者前端同學(xué)能夠提前介入進來，直接根據(jù) Token 對照表寫一份 JSON 文件，那么也可以直接通過復(fù)制 JSON 文件里面對應(yīng)到代碼粘貼到 Figma Tokens 的插件當中，能夠直接讀取代碼生成 Token 樣式，并聯(lián)動 Figma 文件。

4. 導(dǎo)入 Figma 文件中已有的樣式

除了使用 Figma Tokens 插件一個一個創(chuàng)建樣式以外，插件還支持從我們的 Figma 文件中已經(jīng)有樣式導(dǎo)入，我們也可以點擊"Import"，再勾選"Color"、"Text"、"Shadows"一鍵導(dǎo)入文件中的樣式并生成 Token。

向研發(fā)交付 Design Token

1. 輸出 Token.json 代碼文件

點擊頂部"JSON"，再點擊"Export"，即可將插件面板的創(chuàng)建的 Token 導(dǎo)出為一個 token.json 文件，將 json 文件交付給開發(fā)，開發(fā)便可使用。若開發(fā)不知道如何使用，可以分享這個 Figma Tokens 作者發(fā)布在 Github 上的代碼稍加學(xué)習，便知道如何使用了。

github 地址： https://github.com/six7/figma-tokens-example-tailwindcss

2. 如何更新 Token

當之前定義好的 Design Token 需要增刪改時，插件官方推薦的更新同步方式主要有 JSON、 http://JSONBin.io 、URL、GitHub 等幾種方式，具體可查閱官方文檔： https://docs.tokens.studio/sync/sync 。由于后面集中同步方式涉及到一些小門檻，這里簡單介紹第一種最為通俗的更新方式就是直接通過更新 JSON 文件，可以在企業(yè) IM 中和研發(fā)創(chuàng)建一個共享空間，每次 Token 有更新只需要將導(dǎo)出的 JSON 文件替換原有的文件即可，開發(fā)再應(yīng)用新的 JSON 文件，便可實現(xiàn)高效便捷的更新 Token。

使用 Design Token 在產(chǎn)品中一鍵換膚

在一些 To B SaaS 產(chǎn)品當中，產(chǎn)品的主色可能會跟隨客戶公司的品牌色進行調(diào)整。使用 Design Token 便能夠便捷高效地實現(xiàn)一鍵換膚。

1. 首先我們會定義一個"global"基礎(chǔ)主題，在這里將所有后面不同皮膚的顏色都寫入進來；

2. 在"blue"和"red"主題皮膚下，品牌色命名都為："tr-color-primary-brand-light-default"，但是他們兩個皮膚的值不同，一個是 global 中的"{–color-blue-light-6}"，一個是 global 中的"{–color-red-light-6}"；

3. 在藍色皮膚下將"blue"勾選，切換至紅色皮膚，只需要勾選"red"，即可實現(xiàn)文件內(nèi)的所有變量全局替換，同時 Figma 右側(cè)的樣式也能實時聯(lián)動。

結(jié)語

近幾年，越來越多的團隊開始搭建自己公司產(chǎn)品的設(shè)計系統(tǒng) Design System 賦能到具體產(chǎn)品中落地。我所在的團隊也在建設(shè)一套適用于自己公司業(yè)務(wù)的設(shè)計系統(tǒng)，在推動設(shè)計系統(tǒng)落地時，便運用了 Design Token 進行落地，極大提高了公司設(shè)計和研發(fā)團隊的協(xié)作效率。Design Token 給 Design System 帶來了新的方式和新的可能，未來希望能夠不斷擴大 Design Token 的應(yīng)用價值，賦能到更多的業(yè)務(wù)和產(chǎn)品當中，讓設(shè)計系統(tǒng)的應(yīng)用變得更便捷、更高效。

作者：設(shè)計師波波 Bobby He，深耕 B 端體驗設(shè)計