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

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

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

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

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

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

什么是 Design Token

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

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

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

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

Design Token 的優(yōu)勢(shì)

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

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

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

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

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

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

3. 主題皮膚-一鍵替換

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

4. 設(shè)計(jì)變更 高效維護(hù)

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

5. 設(shè)計(jì)成果-精準(zhǔn)還原

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

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

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

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

1. 提煉 Token 組成元素

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

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

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

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

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

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

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

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

// 文字 & 圖標(biāo) 顏色
--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ǔ)顏色的擴(kuò)展 用于 hover / 聚焦 / 禁用 / 點(diǎn)擊 等狀態(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)，包括鼠標(biāo)和鍵盤
--td-brand-color-active: var(--td-brand-color-9); // 點(diǎn)擊態(tài)
--td-brand-color-disabled: var(--td-brand-color-3); // 禁用態(tài)
--td-brand-color-light: var(--td-brand-color-1); // 淺色的選中態(tài)

// 警告色擴(kuò)展
--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);

// 失敗/錯(cuò)誤色擴(kuò)展
--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);

// 成功色擴(kuò)展
--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)投影 用于彈窗類組件（氣泡確認(rèn)框 / 全局提示 / 消息通知）的內(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%);

// 滾動(dòng)條顏色
--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)的代碼。如果我們想要找一個(gè)非開源的設(shè)計(jì)系統(tǒng)的 Token 怎么找呢？

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

首先打開飛書網(wǎng)頁，按 F12，選中任意元素，便可在"樣式"中找到飛書產(chǎn)品所有的 Token 是如何命名，以及可以分析研究其中的色彩運(yùn)用規(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)品的簡(jiǎn)稱，例如："–el-xx"、"–ant-xx"、"–td-xx"；

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

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

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

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

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

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

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

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

1. 安裝并運(yùn)行插件

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

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

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

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

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

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

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

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

向研發(fā)交付 Design Token

1. 輸出 Token.json 代碼文件

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

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

2. 如何更新 Token

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

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

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

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

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

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

結(jié)語

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

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