设计工程化——使用Design Token构建设计系统

一、前言

一个问题：一个已经开发完成的APP要如何更换主色？

在Photoshop年代，这是一个近乎推翻重做的庞大工程。设计要逐个设计稿更换颜色，开发同样要一一对照，逐个调整。

在Sketch年代，难度降低了许多。设计师们通常会制定字体、色彩上的设计规范，熟练的开发则会使用CSS样式之类的方式进行一一对应，所以如果是变动不大的修改，直接进行一键换色即可。

但是在更多时候，一键换色并不能解决问题。下图是Ant Design的定制主题效果，显而易见对主题色有着较大的限制。如果想要更加丰富的色彩 ，能且只能对对应的组件进行一一调整，耗时耗力。

所以经过无数前人的踩坑，出现了Design Token这个概念。

二、什么是Design Token

Design Token的概念最早是由Salesforce在2014年提出的。“Token”原本的意思是“令牌，指令”，而Design token可以翻译为设计令牌，是设计系统中的最小单位，也是连接设计与开发的桥梁。

大家都知道原子设计理论（Atomic Design）。2013年，Brad基于化学领域的原子理论，创建了一套非常经典的学说以阐释网页设计的构成。

原子设计认为颜色、字体、图标构成了设计的最小颗粒，即原子。而Design Token可以认为是将原子进行了进一步的“拆分”，在这里可以类比做夸克。

它将颜色、字体、间距、甚至平台切换时的尺寸缩放作为基本颗粒，进行更进一步的细化。

在这里以颜色为例，通常我们要么像ant design或者material design这种具有普适性的设计系统一样，设置阶梯分布的全局色彩。要么像自有的设计系统，根据具体功能对颜色的用处进行进一步的细化。而Design Token则将这二者进行了结合。

下图是Adobe的设计规范Spectrum的色彩配置方式。它将色彩配置分为3层，分别是全局token、别名token、组件token。

全局token顾名思义，是我们设计语言中的基本值，用上下文无关的名称表示。我们的调色板、动画、版式和维度值都被记录为全局token。它们可以直接使用，并被所有其他token类型继承。

别名token则与特定的上下文或抽象相关。别名有助于传达token的预期用途，并且在具有单一意图的值出现在多个位置时有效。

组件token则是与组件相关的每个值的详尽表示。它们通常继承自别名token，但在别名token的基础上更加具体，具体到用于什么组件。

在实际应用中，也有仅采用2层token的情况。比如采用全局token+别名token（比如IBM出品的Carbon Design System），或全局token+组件token（比如华为出品的DevUI）。

三、Design Token的作用

Design Token最大的作用显而易见，就是用于主题样式的一键变换。通常有3种情况：

①暗色模式，通常用于夜间；

②黑白模式，又叫禅定模式，常用于专注阅读或电子设备防沉迷；

③实现整个主题的设计风格的一键切换。比如一套成熟的B端组件库，进行颜色、圆角、间距、字体、字重的各种配置的修改之后，就可以变成另一套完全不同的组件库，用于另一套B端平台的研发。比如下图中的四种设计风格，就是以Semi Design这一设计系统为蓝本，进行修改后衍生出来的。

除此之外，Design Token也是提升设计与开发协同效率的桥梁。

设计团队与开发团队采用一致的元素命名方式，可以极大地降低开发使用错误样式的可能性，从而降低设计验收的时间成本。另外，由于Design Token会对元素用于哪个组件做清晰的定义，也可以提升设计稿的一致性，即使发生错误，也可以仅通过元素名称进行发现和纠正。

四、哪些系统使用了Design Token

国外的设计系统中，Adobe的Spectrum是做的比较好的设计规范。其中对于Token的概念讲解的非常详细，Token结构严谨，命名规则清晰，甚至可以作为教程来进行查阅。

国内的设计系统中，腾讯的TDesign在Design Token方面也很具有参考意义。TDesign同样使用了3层Token结构，每个组件的尺寸、圆角、阴影、字号、大小、颜色都有对应的Token进行控制。

链接见下方，感兴趣的读者可以进行查阅。

DevUI：https://devui.design/design-cn/start

TDesign： https://tdesign.tencent.com/design/color

semi design：https://semi.design/dsm/landing

Carbon Design System：https://carbondesignsystem.com/guidelines/color/overview/

Spectrum：https://spectrum.adobe.com/page/design-tokens/

Material Design 3：https://m3.material.io/foundations/design-tokens/how-to-read-tokens

五、Design Token的局限性

虽然Design Token有很多优势，但同样有其局限性，具体如下。

第一， 学习成本高。Design Token的命名方式目前没有统一的标准，每个规范都有不同的命名方式。目前Design Token相关的学习资料大多是英文，所以想要学习如何制定合理的命名规则，必须有良好的英文阅读能力。

第二， 搭建难度高。使用Design Token命名的样式动辄有五六个词缀，几百个样式。如果命名混乱，不但起不到提升后期维护修改效率的作用，反而会沦为鸡肋。因此这方面必须由设计与开发共同研讨，制定符合团队需要的科学合理的命名规则。

第三， 降低设计效率。目前Figma是唯一一个支持配置Design Token规范的设计软件，而即使是Figma，也必须借助插件，才能使用这一功能。因此，许多Figma原生的便捷功能，比如一键修改选中内容的颜色、字体、大小、间距等功能，会变得难以使用，短期内势必会降低视觉设计的效率。但是随着Design Token概念的快速火热，相信Figma未来也会将开发原生的Design Token功能纳入开发计划。

六、总结

Design Token的本质其实就是设计工程化，即以开发的思维来做设计。

其实现在有很多开发团队已经有了根据组件类型分别配置色彩、间距、字体样式的意识。而设计团队本可以与开发团队进行协同，从开发的命名方式获得启发，进而制定出可供二者同时使用的视觉规范，转换为CSS样式供开发使用。这就是最近出现的C2D2C（Code to Design to Code）的概念。