提效神器 Design Token 的探索与应用

​编者按：本文是蚂蚁集团体验设计师昱星&元尧在 SEE Conf 2022 的演讲内容，包括演讲视频及文字内容，欢迎享用。

视屏请微信搜索：”支付宝体验科技”视屏号观看

为什么我们要来聊聊 Design Token?

相信大家都对设计系统有所了解。其实设计系统的建设是一个非常庞大而复杂的工程。

尽管我们通过设计规范、组件库、素材库等手段，能够对产研流程进行提效，但是由于人员和项目的复杂性、产品不同生命周期的迭代和设计趋势的变化所带来的冲击，会让我们经常遇到一些比较微妙而有棘手的问题。举几个例子：

相信设计师很难去做选择，到底下图中的哪个灰色，才是你产品中用在边框上才是正确的颜色？

又比如每隔一段时间我们会对整个产品的品牌做一个升级和更新，下图中，左边是我们的设计稿，右边是我们的开发结果。其实从肉眼上来看，这两个蓝色并没有太大区别。但是经过我们检查代码之后，才发现这个蓝色的色值一直都是错误的。针对这种情况，设计师的验收成本是非常高的。

再比如随着产品设计趋势的变化，很多产品都开始支持“暗黑模式”，那是不是意味着我们设计师和开发的工作量要加倍呢？

因此我们也在思考如何去提升设计师的决策效率，以及如何在越来越丰富和多元的情景下，让设计定义应用得更快更准。

在这里就要给大家引入 Design Token 的概念了。它原有的定义是“令牌”，它在工程逻辑当中，用于用户的身份与服务器端的验证。比如用户第一次登录产品界面的时候需要输入用户名与密码，输入之后服务端会返回一个Token 的指令。这样下次用户再次登录的时候就不用重复输入用户名密码了。因此 Token 在设计系统当中的定义是：正确且唯一的设计决定。它能够助力整个大团队进行设计、感知与开发。

什么是 Design Tokens?

其实 Token 就像一个昵称，举个形象的例子，我们亲切的称呼易烊千玺为“四字弟弟”，那“四字弟弟”就是他的昵称。如果有一天易烊千玺的名字稍微改了一下，变成易烊万玺，当我们想起他时，在脑海中还是会直接浮现其昵称“四字弟弟”。

同样的道理，假设我们在我们的设计系统中，把我们的品牌色 #E5133A 这个颜色，设置一个昵称叫 WF-Primary，当有一天我们把品牌色升级成了绿色，它在系统当中的昵称是不会改变的，始终是 WF-Primary。

我们总结了 Design Token 的四大优势：

1. 设计语义更加容易理解；
2. 设计产出更加一致；

1. 设计变更更加容易维护；
2. 设计还原度有很好的有提升。

接下来我们一点点来看。

1. 设计语义更易理解

这指的是可以将复杂的“设计变量”变成一个简短的语义化的 Token，帮助我们的使用者建立一个界面的“画面感”。举一个例子，#495FDF 这个色值按照设计规范命名的方式，它可能就叫 Blue 60。如果我们通过语义的方式让它达到组件级别的准确度，它就会被描述为 color-button-border-focused。这样的话设计师在使用的时候就能非常迅速的了解到这个颜色应用在哪里。

2. 设计产出更加一致

在实际设计过程中，我们会有不同的设计师参与产出设计稿。对于不是特别熟悉设计规范的设计师来说，就会产生困惑：“按钮应该使用红色色阶中的 Red50 还是 Red60？”。这个时候，如果我们给 Red60 定义一个 Token,不同设计师使用 Token 在按钮上使用的颜色一定是一致的。这就能确保不同设计师产出设计稿的一致性。

3. 设计变更易维护

举个例子，还是上文提到的 #E5133A 这个红色，我们通过工具输出 Token 的 json 文件给到开发，开发部署到产品的 PC 和移动端来控制全局样式。假设这个颜色产生了变更，开发只需要更新 json 文件中的一条 Token，线上产品就能迅速的应用最新的这个色值。

4.设计还原度提升

这一点其实对于视觉设计师来说非常重要。因为我们验收开发内容的时候，往往会花很多的时间去确保开发结果与设计稿是一致的。使用 Design token 就能确保我们设计被高效、准确的还原。举个例子，在以前不使用的 Token 的情况下，开发同学使用的是一个硬代码的模式，当输入不正确的色彩代码的时候，系统无从判断这个颜色是否使用正确，是不会报错的。而在我们使用了 Token 之后，如果说开发同学引用了错误的或根本不存的色值时，系统就会报错提示。因此设计师的验收成本也会大幅的降低。

 如何在设计系统中创建 Design Token?

Design Token 在 WorldFirst 中的实战与展望

• 基础组件：

• 是非常单一的、原子级别的组件，不能再被拆分：比如说一个开关，一个按钮或一个输入框。
• 更为通用，可以无差别满足各类业务场景：比如 Ant Deisgn 就是一个具有代表性的基础组件库，所有的组件都具备普适性，可以被应用到不同的领域。
• 高级组件：

• 是基础的组件的合集，相对来说是复合的、区块型的组件。
• 更为专业化，更有业务属性。在业务的一些实操设计过程中，会更有针对性、更高效。