Design Tokens 应用记录

eOng2024-05-28 11:24

什么是 Design Tokens ？​

Design Tokens 是指在设计系统中使用的可重复使用的属性和值。它们通常用于定义颜色、字体、间距、边框等设计元素的属性和值。

Design Tokens 提供了一种在设计系统中组织和管理样式的方法。它们可以通过集中的样式文件或使用专门的 Design Token 工具来进行管理。使用 Design Tokens 可以提高样式的可维护性和可扩展性，使设计系统的样式更加一致，并且可以方便地进行主题切换。

举个例子，对于颜色，可以使用 Design Tokens 来定义各种颜色的属性和值，如主色、文字颜色、背景色等。当需要修改某个颜色时，只需要修改 Design Tokens 中的对应属性和值，就可以自动应用到整个系统的样式中，避免了逐个修改样式的麻烦。

Design Tokens 的优势在于它们的可重复使用性和一致性，帮助设计师和开发人员更好地协作，提高工作效率，并且可以轻松地进行样式的扩展和调整。

在编写样式代码时，项目存在的可优化的空间​

公司内不少的前端项目使用开源或自研的组件库进行二次开发。在对于样式的管理上，其实已经抽象出如间距、字体大小、颜色、动画等的一些常量值，但这些抽象出来的常量值的管理通常如下原因导致往往难以达到理想的效果：

  • UI 设计师的 UI 迭代未考虑当前版本或上一版本 UI 定下的设计规范来进行设计；

  • UI 设计师使用的 UI 协作设计工具（比如 Figma、蓝湖、MasterGo）及相关插件有过变更，存在隐性的信息丢失情况及增加前端开发的学习成本等问题；

  • 部分前端开发工程师出于如下若干原因，在新开发的功能模块内，未使用抽象出来的样式常量：

    1. 文档缺失
    2. 部门内信息沟通不畅
    3. 无代码评审机制
    4. 需要自己在脑海里将基于 UI 协作设计工具自动生成的样式代码，转换为项目里抽象后的常量值

一个理想的应用 Design Tokens 的工作流及注意事项​

UI 设计师​

  1. 先进行梯度的色版、间距、文字大小的设计，给出其定义的具体的基础常量值及其命名
  2. 使用语义化的方式（就是前端开发工程师容易识别出是在哪个组件或者说是在哪种场景下使用）重新定义这些常量值（就是 Design Tokens 了），再在这些常量值的基础上设计出各类基础组件及复合组件
  3. 在事先协商好的 UI 协作设计工具上使用自有功能或第三方插件将基础常量值及 Design Tokens 的清单（可以是 css、json 等文件，取决于前端开发工程师所需的文件格式）进行导出，并发送给前端开发工程师
  4. 如需进行设计上的变动，需要进行相关的基础常量值及 Design Tokens 的变更，再重新导出一份清单发送给前端开发工程师
  5. UI 协作设计工具的自动生成的样式代码，需基于定义的 Design Tokens ，便于前端开发工程师进行复制粘贴

前端开发工程师​

  1. 在项目中全局引用这份清单文件
  2. 在开发的过程中，可以使用 UI 协作设计工具的自动生成的样式代码
  3. 如需进行设计上的变动，换一份 UI 设计师设计并导出的新的清单文件即可

例子​

梯度色版清单​

css 复制代码 
--Colorpalette-Blue-blue-50: #EBF6FE;
--Colorpalette-Blue-blue-100: #C2E2FC;
--Colorpalette-Blue-blue-200: #A4D4FA;
--Colorpalette-Blue-blue-300: #7BC0F8;
--Colorpalette-Blue-blue-400: #61B4F6;
--Colorpalette-Blue-blue-500: #39A1F4;
--Colorpalette-Blue-blue-600: #3593DE;
--Colorpalette-Blue-blue-700: #2A71AD;
--Colorpalette-Blue-blue-800: #215986;
--Colorpalette-Blue-blue-900: #184466;
--Colorpalette-Brand-brand-50: #EBF4FE;
--Colorpalette-Brand-brand-100: #C0DCFC;
--Colorpalette-Brand-brand-200: #A1CBFB;
--Colorpalette-Brand-brand-300: #76B3F9;
--Colorpalette-Brand-brand-400: #5BA5F8;
--Colorpalette-Brand-brand-500: #328EF6;
--Colorpalette-Brand-brand-600: #2E81E0;
--Colorpalette-Brand-brand-700: #2465AF;
--Colorpalette-Brand-brand-800: #1D4E87;
--Colorpalette-Brand-brand-900: #153C67;
--Colorpalette-Green-green-50: #E6F8ED;
--Colorpalette-Green-green-100: #B0E9C7;
--Colorpalette-Green-green-200: #8ADEAB;
--Colorpalette-Green-green-300: #54CF85;
--Colorpalette-Green-green-400: #33C66D;
--Colorpalette-Green-green-500: #02B849;
--Colorpalette-Green-green-600: #01A741;
--Colorpalette-Green-green-700: #008334;
--Colorpalette-Green-green-800: #006528;
--Colorpalette-Green-green-900: #024D1F;
--Colorpalette-Grey-grey-50: #FAFAFA;
--Colorpalette-Grey-grey-100: #F0EFEF;
--Colorpalette-Grey-grey-200: #E7E8E8;
--Colorpalette-Grey-grey-300: #DCDDDE;
--Colorpalette-Grey-grey-400: #D5D6D7;
--Colorpalette-Grey-grey-500: #CBCCCD;
--Colorpalette-Grey-grey-600: #B9BABB;
--Colorpalette-Grey-grey-700: #909192;
--Colorpalette-Grey-grey-800: #707071;
--Colorpalette-Grey-grey-900: #555656;
--Colorpalette-Red-red-50: #FFECEC;
--Colorpalette-Red-red-100: #FFC4C5;
--Colorpalette-Red-red-200: #FFA9A9;
--Colorpalette-Red-red-300: #FF8282;
--Colorpalette-Red-red-400: #FF6969;
--Colorpalette-Red-red-500: #FF4344;
--Colorpalette-Red-red-600: #E83E3F;
--Colorpalette-Red-red-700: #B53130;
--Colorpalette-Red-red-800: #8C2425;
--Colorpalette-Red-red-900: #6B1D1D;
--Colorpalette-Yellow-yellow-50: #FFF8E9;
--Colorpalette-Yellow-yellow-100: #FEE9BB;
--Colorpalette-Yellow-yellow-200: #FEDE9B;
--Colorpalette-Yellow-yellow-300: #FDCF6C;
--Colorpalette-Yellow-yellow-400: #FDC651;
--Colorpalette-Yellow-yellow-500: #FCB825;
--Colorpalette-Yellow-yellow-600: #E5A722;
--Colorpalette-Yellow-yellow-700: #B3831B;
--Colorpalette-Yellow-yellow-800: #8B6515;
--Colorpalette-Yellow-yellow-900: #6A4E10;
--Colorpalette-black: #000000;
--Colorpalette-font-font-50: #E9E9E9;
--Colorpalette-font-font-100: #BABABB;
--Colorpalette-font-font-200: #98999A;
--Colorpalette-font-font-300: #6A6A6C;
--Colorpalette-font-font-400: #4D4E50;
--Colorpalette-font-font-500: #202123;
--Colorpalette-white: #FFFFFF;

Design Tokens 清单​

css 复制代码 
--Designtoken-background-color-bg-1: var(--Colorpalette-white);
--Designtoken-background-color-bg-2: var(--Colorpalette-Grey-grey-50);
--Designtoken-background-color-bg-3: var(--Colorpalette-Grey-grey-100);
--Designtoken-background-color-bg-4: var(--Colorpalette-Brand-brand-500);
--Designtoken-background-color-bg-disable: var(--Colorpalette-Grey-grey-100);
--Designtoken-background-color-bg-label-1: var(--Colorpalette-Blue-blue-50);
--Designtoken-background-color-bg-scroll: var(--Colorpalette-Grey-grey-600);
--Designtoken-background-color-erro: var(--Colorpalette-Red-red-500);
--Designtoken-background-color-info: var(--Colorpalette-Blue-blue-500);
--Designtoken-background-color-sucess-label: var(--Colorpalette-Green-green-50);
--Designtoken-background-color-sucess: var(--Colorpalette-Green-green-500);
--Designtoken-background-color-warning: var(--Colorpalette-Yellow-yellow-500);
--Designtoken-button-color-button-bg-primary-default: var(--Colorpalette-Brand-brand-500);
--Designtoken-button-color-button-bg-primary-disable: var(--Colorpalette-Brand-brand-200);
--Designtoken-button-color-button-bg-primary-hover: var(--Colorpalette-Brand-brand-400);
--Designtoken-button-color-button-bg-primary-selected: var(--Colorpalette-Brand-brand-600);
--Designtoken-button-color-dangerbutton-default: var(--Colorpalette-Red-red-500);
--Designtoken-button-color-dangerbutton-hover: var(--Colorpalette-Red-red-400);
--Designtoken-button-color-dangerbutton-selected: var(--Colorpalette-Red-red-600);
--Designtoken-button-color-datebutton-bg-selected: var(--Colorpalette-Brand-brand-50);
--Designtoken-button-color-linebutton-bg-disable: var(--Colorpalette-Grey-grey-50);
--Designtoken-button-color-linebutton-default: var(--Colorpalette-Grey-grey-400);
--Designtoken-button-color-linebutton-hover: var(--Colorpalette-Brand-brand-400);
--Designtoken-button-color-linebutton-selected: var(--Colorpalette-Brand-brand-600);
--Designtoken-button-color-textbutton-bg-hover: var(--Colorpalette-Grey-grey-50);
--Designtoken-button-color-textbutton-bg-selected: var(--Colorpalette-Grey-grey-100);
--Designtoken-icon-color-icon-1: var(--Colorpalette-Brand-brand-500);
--Designtoken-icon-color-icon-2: var(--Colorpalette-font-font-400);
--Designtoken-icon-color-icon-3: var(--Colorpalette-Grey-grey-700);
--Designtoken-icon-color-icon-4: var(--Colorpalette-white);
--Designtoken-icon-color-icon-disable: var(--Colorpalette-Grey-grey-300);
--Designtoken-line-color-alert-info: var(--Colorpalette-Brand-brand-300);
--Designtoken-line-color-alert-success: var(--Colorpalette-Green-green-300);
--Designtoken-line-color-erro: var(--Colorpalette-Red-red-500);
--Designtoken-line-color-input-line-default: var(--Colorpalette-Grey-grey-400);
--Designtoken-line-color-input-line-hover: var(--Colorpalette-Brand-brand-500);
--Designtoken-line-color-line-1: var(--Colorpalette-Grey-grey-100);
--Designtoken-line-color-line-dividing-1: var(--Colorpalette-Grey-grey-50);
--Designtoken-line-color-line-dividing-2: var(--Colorpalette-Grey-grey-100);
--Designtoken-line-color-success: var(--Colorpalette-Green-green-500);
--Designtoken-text-color-text-1: var(--Colorpalette-font-font-500);
--Designtoken-text-color-text-2: var(--Colorpalette-font-font-400);
--Designtoken-text-color-text-3: var(--Colorpalette-font-font-300);
--Designtoken-text-color-text-4: var(--Colorpalette-font-font-200);
--Designtoken-text-color-text-5: var(--Colorpalette-font-font-100);
--Designtoken-text-color-text-6: var(--Colorpalette-Brand-brand-500);
--Designtoken-text-color-text-7: var(--Colorpalette-white);
--Designtoken-text-color-text-err: var(--Colorpalette-Red-red-500)

Figma 上看到的自动生成的代码​

然后前端开发工程师直接复制粘贴即可

仍然存在的问题​

  • 在公司其中一个项目中进行实际应用时，在导出清单时，使用的是 Figma 上的第三方插件，未知其它平台是否较好的支持该工作流方式
  • 在已有项目上进行替代，成本较高，更建议在新项目中进行使用
相关推荐
用户9385156350713 小时前
从零在浏览器里跑 DeepSeek-R1：WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep13 小时前
稚晖君公司人事大变动，来了！
前端·后端·程序员
鱼樱前端14 小时前
用 AI 做内容变收入
前端·人工智能·ai编程
浮生望14 小时前
React + TypeScript 组件设计进阶：从类型约束到无状态组件的三次进化
前端
90后的晨仔14 小时前
Mac 开发 uni-app 终极方案：让安卓模拟器彻底脱离 Android Studio 独立运行
前端·vue.js
90后的晨仔15 小时前
别再搞混了！uni-app 中 node_modules 和 uni_modules 到底是什么关系？
前端
kyriewen15 小时前
面试官问"这段逻辑为什么这样写"——我才发现，这半年我写的代码，我自己都解释不了
前端·javascript·面试
谢小飞16 小时前
大文件上传很难？学会这招，GB文件秒传不是梦
前端·node.js
程序员黑豆16 小时前
Windows 系统 Java 环境变量配置全攻略：解决“不是内部或外部命令”
java·前端·ai编程
To_OC16 小时前
别只拿 useRef 绑 DOM 了，搭配 Web Worker 解决页面卡顿才是真的香
前端·react.js·dom
热门推荐
01VSCode+CodeX扩展，无法启动02GitHub 镜像站点03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）04如何新建文件夹？ 电脑新建文件夹的4种方法052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07历年考研数学一、数学二、数学三真题试卷及答案PDF08AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费102026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片