隨著近幾年 Figma 等一系列在線設計工具的崛起，相信設計師對設計系統的都有了更深的了解。其實設計系統的建設是一個非常龐大而復雜的工程。我們通過各種設計規范等對產研流程提效，但還是會經常遇到一些棘手的問題。
1. 開發用的顏色/字體樣式/投影等與設計稿存在差距；
2. 顏色選擇困難。不同設計師之間在用各種層級的文本顏色時，到底用 Gray1 還是用 Gray2，不知道該選哪一種；
3. SaaS 類的產品需要根據客戶的品牌色調整產品的主色，設計和開發都面臨巨大的工作量；
4. 設計稿的更新無法及時在開發者的代碼中體現，一是因為開發首先需要拿到新的設計稿，再根據標注甚至肉眼判斷區別后更新代碼；另一方面，設計稿中看似簡單的改動可能導致較大范圍的代碼改動，例如字體大小等；
為了解決和優化上述的問題，Design Token 應運而生。它可以高效地解決產品設計和開發過程中的細節和風格一致性的問題，提高產研團隊設計質量和協作效率。
“Token”原本的意思是“令牌，指令”，與 Design 連在?起指“設計變量”。在工程邏輯中用于用戶身份與服務器端進行驗證，而在設計體系中，Design Token 則可以簡單理解為封裝的視覺樣式參數。它通過規定樣式參數，并通過一套符合設計師、工程師理解的統一的命名規則，為這些樣式參數的定義名稱。
騰訊出品的 Design Token 應用指南：設計篇
在線設計、研發協作工具和組件概念的普世化，讓設計、研發效率大大提升；數字產品發展到今天，數字產品對迭代速度、個性化品質要求也越來越強。
閱讀文章 >原子設計理論提出者 Brad Frost （布拉德 · 弗羅斯特）在《Atomic Design》中提到：原子設計理論從原子（Atoms）、分子（Molecules）、組織（Organisms）、模板（Templates）、頁面（Pages）、標準流程（Patterns）再到更完善的設計體系（Design Systems），這一切都是為了產品設計、研發效率和一致性提供幫助。同時，它們也是傳達設計原則、構成產品獨特氣質的基石。Design Token 就是原子級的最基礎的構成要素。
根據北美頂級 SaaS 企業的開源設計系統 Saleforce Lightning Design System 的解釋，Design Token 是設計系統中的可視化原子，是設計屬性的命名實體，使用它們代替具體編碼值（如顏色的 16 進制、間距的像素值等），以便于維護一套可擴展且一致性的設計系統。
可以說，Token 就是最底層的原子，本質上就是找到了組件、屬性和代碼之間的對應關系，統一了設計樣式和前端語言，使組件和設計系統可以被快速管理。
基于上述關于 Design Token 的基礎解釋，可以將 Design Token 的好處可總結為：
- 設計語義-更易理解
- 設計方案-更加一致
- 主題皮膚-一鍵替換
- 設計變更-高效維護
- 設計成果-精準還原
1. 設計語義-更易理解
每一個組件的基礎元素都可以用 Token 進行語義化的命名，幫助設計師和開發建立統一的描述語言。例如#91d5ff 這個色值按照傳統的設計規范命名的方式，它可能叫 Blue-3。在實際應用的時候，設計師和開發并不能直接通過 Blue-3 來理解這個顏色到底是用在什么具體場景當中。而當我們通過 Token 語義的方式讓它達到組件級別的精度時，它會叫：color-primary-brand-light-disable，不同的設計師和開發就能迅速的理解這個顏色應用在什么具體場景當中。
2. 設計方案-更加一致
當使用組件庫實際運用到項目當中時，我們有時候會有不同設計師合作產出一個項目的情況。對于一些不熟悉設計規范或新加入的設計師來說，就會困惑，當使用二級文本色的時候，究竟是用 Gray2、還是 Gray3、Gray4。而這個時候，我們定義一個 Token 名稱叫：color-text-secondary，這個 Token 嵌套的顏色是 ：Gray3，這樣我們設計師在使用的時候，只需要選擇 color-text-secondary 這個 Token 變量即可，能選擇的顏色就是唯一的，這就能在一定程度上確保不同設計師在同一個場景當中的設計稿保持高度一致性。
3. 主題皮膚-一鍵替換
主題皮膚的替換可以用在兩個維度，一是淺色模式和暗色模式的替換，二是不同品牌色之間的替換。我們可以將不同主題的同一個場景下的顏色使用同一個 Token 命名，例如變量名都叫：color-primary-brand-light-default，藍色皮膚下對應的值為：#165DFF；紅色皮膚對應的值為：#F53F3F。然后通過插件面板的一鍵操作即可完美切換。同時這種切換模式也可以帶入 tokn.josn 代碼（后面會具體講如何輸出 json 文件交付開發）中，與開發進行同步。
4. 設計變更 高效維護
還是上面的例子，當我們的二級文字顏色 color-text-secondary 需要進行變更，從 Gray-600 變為 Gray-500。如果沒有“color-text-secondary”這個 Token，我們可能需要手動去選中所有用了 Gray-600 的二級文字的圖層，一個一個地將它們改為 Gray-500，而當我們有了“color-text-secondary”這么一個 Token 時，我們只需要將 color-text-secondary 的值一鍵從 Gray-600 變為 Gray-500 便可以完成產品全局的顏色變更。進而設計師可以將 token.json 代碼（后面會具體講如何輸出 json 文件交付開發）同步更新給開發 ，開發直接一鍵替換，線上的界面就能半自動地迅速應用到變更后的色值。
5. 設計成果-精準還原
設計稿能否被開發精準還原，這幾乎是每一個設計師在實際項目中會遇到的問題。我們在進行設計驗收的時候，即便花了很多時間進行走查，在表格上列舉了很多細節問題，但最終的還原效果并不能得到保障。甚至在一些時候會感覺做驗收比重新做一遍設計稿還要費勁「emo」，有的時候甚至會直接按 F12 在網頁上改代碼給開發提示「狗頭」。
例如，在常規不使用 Token 的情況下，開發同學使用的是硬代碼的模式，代碼編輯器無法判斷這個顏色是否正確，如果開發不小心輸錯了一位數，就很可能導致線上運行時候的不一致。而使用了 Token 之后，開發只需要輸入這個場景的 Token 名稱的前綴，代碼編輯器便會自動化地提示有哪幾個顏色供選擇就可以了，如果不正確，代碼編輯器還會給出報錯提示，開發同學可以在寫代碼的過程中完成基礎的檢驗工作，這樣一來，設計師的成果便能夠一定程度上的精準還原，設計師驗收的工作量也會小很多。
上面講了這么多理論，接下來開始實戰，準備好～
1. 提煉 Token 組成元素
Design Token 是構成設計語言的基本構建塊，是設計系統中最核心、最基礎的影響視覺風格的元素。根據 Figma Tokens 插件默認提供的面板中，可以將分別以下組成元素：
Color 顏色、Shadow 投影、Typography 字體樣式、Size 尺寸、Space 間距、Border Radius 描邊圓角、Border Width 描邊寬度、Opacity 透明度等
2. 定義 Token 命名規則
關于 Token 的命名規則，不同的團隊有不同的定義方式，但其本質都是為了提高產品的一致性和工作效率。因此在對 Token 命名規則進行分類整理時，設計需要與開發同事達成一致，以確保能夠更好地落地。
在制定自己產品的 Token 命名規則前，帶大家看一下大廠的 Design Token 都是怎么命名的
騰訊文檔 Token 變量表：https://mp.weixin.qq.com/s/sRRPlsxaUZj7220PLoFiRw
騰訊 TDesign 開源設計系統 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%);
// 基礎顏色
--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); // 色彩-功能-成功
// 基礎顏色的擴展 用于 hover / 聚焦 / 禁用 / 點擊 等狀態
--td-brand-color-hover: var(--td-brand-color-7); // hover 態
--td-brand-color-focus: var(--td-brand-color-2); // focus 態，包括鼠標和鍵盤
--td-brand-color-active: var(--td-brand-color-9); // 點擊態
--td-brand-color-disabled: var(--td-brand-color-3); // 禁用態
--td-brand-color-light: var(--td-brand-color-1); // 淺色的選中態
// 警告色擴展
--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);
// 內投影 用于彈窗類組件（氣泡確認框 / 全局提示 / 消息通知）的內描邊
--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 上開源社區能找到相關的代碼。如果我們想要找一個非開源的設計系統的 Token 怎么找呢？
這里以飛書為例，個人覺得飛書整體的配色非常舒適，想要研究一下其中的 Token 是怎么制定的。
首先打開飛書網頁，按 F12，選中任意元素，便可在“樣式”中找到飛書產品所有的 Token 是如何命名，以及可以分析研究其中的色彩運用規律。
飛書 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 命名規則總結
通過上面的大廠 Token 參考我們可以分析出一些普適性的規則：
1. 單詞之間用“-”分隔；
2. Token 前綴可自定義添加自己產品的簡稱，例如：“--el-xx”、“--ant-xx”、“--td-xx”；
3. Token 可以套 Token，例如：--td-brand-color-hover: var(--td-brand-color-7)；
3. 整理 Design Token 資產表
分析完各個大廠的 Token 規則之后，接下來正式開始對自己產品的 Design Token 開始建設，首先便是整理一份 Design Token 資產表，可以用文檔、表格等形式整理。
這里以 TDesign 為例，需要包含 3 列：Token、Value、Describe。這份 Token 資產表整理好之后，可以在設計團隊內部進行評審，通過之后再與開發進行對齊。
來源： https://tdesign.tencent.com/design/color
以上主要講的是在思維層面 Design Token 是怎么推導的，接下來重點講一下怎么借助一些實用的工具將 Design Token 實現自動/半自動化的落地。
這里主要推薦的工具是 Figma Tokens 插件，它是一款基于 Figma 的插件，相對于 Figma 右側面板原生自帶的樣式外，能夠實現多層級的 Token 管理，同時插件內容能夠與 Figma 設計文件實現實時聯動。
1. 安裝并運行插件
插件安裝地址：https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens
安裝完成后，在 Figma 文件中打開 Figma Tokens 插件面板，并點擊“Get started”，開始創建。
2. 創建 Token 變量
在 Color 分類處點擊“+”號，將之前整理的 Design Token 資產表里的內容一個一個錄入進插件當中。如何實現 Token “套娃”呢？例如我們需要創建一個“--td-brand-color”，值為“--td-brand-color-8”，只需要在 Color 值的輸入框輸入“{--td-brand-color-8}”或“$--td-brand-color-8”，這里通過和開發溝通，推薦使用“{ }”大括號的形式進行賦值。全部 Token 創建完成之后，點擊“Create Styles”便可將插件中的樣式生成到 Figma 右側的樣式面板中。同時，插件中的修改也能夠與樣式進行實時同步。
3. 通過 JSON 代碼快捷導入 Token
上面的方法是需要根據 Token 對照表，通過手動的方式一個一個錄入 Token，如果團隊的設計師有一點代碼功底，或者前端同學能夠提前介入進來，直接根據 Token 對照表寫一份 JSON 文件，那么也可以直接通過復制 JSON 文件里面對應到代碼粘貼到 Figma Tokens 的插件當中，能夠直接讀取代碼生成 Token 樣式，并聯動 Figma 文件。
4. 導入 Figma 文件中已有的樣式
除了使用 Figma Tokens 插件一個一個創建樣式以外，插件還支持從我們的 Figma 文件中已經有樣式導入，我們也可以點擊“Import”，再勾選“Color”、“Text”、“Shadows”一鍵導入文件中的樣式并生成 Token。
1. 輸出 Token.json 代碼文件
點擊頂部“JSON”，再點擊“Export”，即可將插件面板的創建的 Token 導出為一個 token.json 文件，將 json 文件交付給開發，開發便可使用。若開發不知道如何使用，可以分享這個 Figma Tokens 作者發布在 Github 上的代碼稍加學習，便知道如何使用了。
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 文件，可以在企業 IM 中和研發創建一個共享空間，每次 Token 有更新只需要將導出的 JSON 文件替換原有的文件即可，開發再應用新的 JSON 文件，便可實現高效便捷的更新 Token。
在一些 To B SaaS 產品當中，產品的主色可能會跟隨客戶公司的品牌色進行調整。使用 Design Token 便能夠便捷高效地實現一鍵換膚。
1. 首先我們會定義一個“global”基礎主題，在這里將所有后面不同皮膚的顏色都寫入進來；
2. 在“blue”和“red”主題皮膚下，品牌色命名都為：“tr-color-primary-brand-light-default”，但是他們兩個皮膚的值不同，一個是 global 中的“{--color-blue-light-6}”，一個是 global 中的“{--color-red-light-6}”；
3. 在藍色皮膚下將“blue”勾選，切換至紅色皮膚，只需要勾選“red”，即可實現文件內的所有變量全局替換，同時 Figma 右側的樣式也能實時聯動。
近幾年，越來越多的團隊開始搭建自己公司產品的設計系統 Design System 賦能到具體產品中落地。我所在的團隊也在建設一套適用于自己公司業務的設計系統，在推動設計系統落地時，便運用了 Design Token 進行落地，極大提高了公司設計和研發團隊的協作效率。Design Token 給 Design System 帶來了新的方式和新的可能，未來希望能夠不斷擴大 Design Token 的應用價值，賦能到更多的業務和產品當中，讓設計系統的應用變得更便捷、更高效。
我是設計師波波 Bobby He，深耕 B 端體驗設計，持續學習輸出中，歡迎關注私信與我交流～
參考文章
https://mp.weixin.qq.com/s/9LJT89vqjdVwsafDckh6Pw
https://blog.prototypr.io/design-tokens-with-figma-aef25c42430f
https://didoo.medium.com/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 20 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓