什么是Design Tokens原子设计(Atomic Design)告诉我们，界面的元素都是由文字、颜色等最基本的元素构成的，如颜色、文字、边框框、图标等等。这些基本元素构成组件，进而构成页面。
设计体系(Design system)强调，设计和开发要共享语言，以相同的方法为界面元素命名，为设计模式下定义，并能让设计文件和前端代码使用相同的名称。
那么如何制作并管理繁杂的样式元素，从而保证产品的一致性？salesforce团队早在14年提出并落地了一种设计工作方法：Design Tokens，用以完善设计和开发之间的协作流程。
什么是Design Tokens#
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes.[1]
Design tokens是一种存储视觉设计属性的命名实体。Token直译为“令牌、象征、标志”，参考编程中的赋值功能，可将“Design tokens”翻译为“设计变量”。
举个例子，当设计采用蓝色＃508BFF作为主色时，为确保所有使用该蓝色的组件颜色一致性，最好的办法就是创建一个颜色变量$blue，并在需要时调用它。就算后续需要将其改成红色#FF3149时，也只需要修改其对应的token变量值，即可实现全局调整，从而避免出现遗漏代码的情况。
为什么要使用Design tokens#
我们可以从设计、开发、管理三个角度了解Design tokens对工作生产的价值：
共享设计语言：提高设计内部、设计与开发、开发内部的沟通效率。使用token准确表达，而非“浅蓝”“深蓝”“这种蓝色”等模糊字眼。
完善产品设计：促进设计初期对产品视觉元素的把控，减少设计遗漏需要后续增补的情况，避免重复做工。
保持一致性：保持设计和开发的一致性，保持视觉元素的一致性。设计修改后，开发也能及时并高效地做出对应调整。
提高传播性：新入职的开发和设计都能通过design tokens了解产品的视觉元素属性，便于复用和学习。
便于管理：对于一次较大的版本迭代，适用design token易于修改和维护，同时保存上一版本作为历史资料，便于查询。
适合使用Design tokens的场景#
在工作过程中，遇到以下情景时，需要考虑使用Design Tokens:
- 计划构建一个全新的产品时；
- 计划重塑现有产品时；
- 现有产品存在更新迭代快，更新效率低的问题时；
- 现有产品元素数量多，复用频率高但修改效率低时；
- 现有产品需要适配多个平台时；
在以下情形中，可以不使用Design Tokens:
- 暂无计划的新产品时；
- 现有产品较为完善，未来的变化不大时；
总的来说，类似Design tokens的设计方法只会更加频繁地出现在工作领域中。缺少组织性、管理性的纯粹设计和纯粹编码无法适应越来越快的更新速度，终将会被更高效的方法取代。
Design tokens的对象#
理论上，产品的所有设计元素都可以被归类为token。以下分别是salesforce、Canvas、semi design归纳的token对象类型：
Colors,Background Color,Text Color,Border Color,Font,Font size,Opacity,Line Height,Spacing,Radius,Sizing,Shadow,Time,Touch,Media Query,Z-index.[1]
Color,Depth,Motion,Shape,Space,Type.[2]
基础色、功能色、字体排版、圆角、阴影、尺寸、间距、Z-index、动画。[3]
salesforce现共采用了16种对象，我们在工作过程中，实际创建多少种对象取决于设计体系所采用的元素种类有多少。
也可根据使用的频率和复用情况，判断是否将某个元素作为token。如果某个特殊定制需求的设计元素，不会复用第二次，那就不需要放进设计体系中。
虽然上述描述的基本都是视觉设计元素（绝大多数信息都通过视觉传达），但也不排除其他有特殊目的的产品，例如为视障人士设计的软件，其重点则应该放在触摸、多平台适配、声调、旋律、音量、语速等对象上。
Design tokens的类型#
Global tokens,Alias tokens,Component-specific tokens.[4]
Adobe的Spectrum设计体系将Token细分为三类：全局变量、别名变量、组件变量。
全局变量
作为设计语言的基本值，与上下文内容无关，也无限定的使用范围。所有token都可以调取该变量值，并由其他token继承。
别名变量
与特定的上下文或抽象概念相关，有助于传达token的预期目的，便于开发和设计识别并使用。
组件变量
通过添加组件的名称和属性，便于判断该token的具体用途。对于数量较少的元素，有时也可直接跳过别名变量，直接调用全局变量。
注意事项
- 尽量多使用别名变量，而非全局变量
- 不可混用别名变量和组件变量
如何应用Design tokens#
0、前提
设计与开发达成共识。不同的公司、团队、产品有不同的定义方式，但都会遵循一定的逻辑和规则。通常情况下，可以由设计提供完整的设计文档，附上相关变量，促进开发同步使用，从而达到共享设计语言的目的。
1、提炼元素
将现有产品的所有设计元素进行拆解，或按照原子设计方法提炼出最小的设计元素，包括所有颜色、字体、字号、形状、轮廓、间距等等。
2、创建Tokens
按照一定规则，对全局变量进行命名。使用token列表帮助检查和完善内容。
Token列表
使用列表的形式罗列产品涉及到的design tokens，有助于设计和开发人员查询并使用。常见的token列表内容包括变量名称、变量值、用途、示例。
| 变量名称 | 变量值 | 用途 | 示例 |
| 1 | 1 | 1 | 1 |
3、实际应用
根据建立的token，调整现有的设计原型。交付给开发，督促建立对应的元素样式库。
4、维护
保持产品相同的元素使用了相同的token，需要时常检查和剔除多余的变量。同时，对于新增的token也需要仔细斟酌。
参考链接
下一篇：blog