不懂就要问系列 - 06

Design Token

Design Token

感想

基于之前 《现代 Web 开发的现状与未来（JSDC 2019 演讲全文）》的演讲，去深入了解了一下 Design Token 的相关内容，说一下我学习后的感想：

Design Token 是啥？

首先设计系统这个概念现在已经很火了。提出原子设计理念的 Brad Frost 曾说过：

“设计系统就是一个讲述我们如何构建一个产品的故事。”—— Brad Frost on Let’s Work Together! at SmashingConf Barcelona 2017

在一个公司内，设计系统可以提高团队间的协作效率。目前设计师和工程师遇到的一个普遍问题是，如何共享产品的品牌和界面信息。在开发过程中需要尽可能地按照设计产出还原，但是我们都知道这件事没那么简单。我们需要保持产品的品牌一致性，而设计规范和设计系统可以帮我们达成这个目标。

让我们先看一下 Nachos —— Trello 的设计系统。在大部分设计系统中，我们总能找到一个定义"核心样式"的章节。我所指的"核心样式"是指那些界面中不可拆分的部分，比如说颜色、字号、间隔、动画、阴影、层级、响应式断点等等。这些集中在一起的不可拆分的样式信息将会被应用于不同平台的产品设计中，它们就是——Design Token。

这个概念出自 Salesforce，Jina Anne 给其命名

Design Token 可以让产品设计团队更好地协作，同时保持产品跨平台的一致性。

可以想象，上图中这些颜色将被用在 Trello 不同平台的界面中，不同的是每一种平台都有其自己的格式和要求：

  • 在 Web 中是一个写满了 RGB 颜色的 CSS 文件

  • 在 iOS 中是一个写满 RGBA 颜色的 JSON 文件

  • 在 Android 中是写满 8 位十六进制色值的 XML 文件

当然，这些文件中的色值会随着时间不断变化，这也是为什么需要集中管理的原因，否则每次更新我们都需要到处寻找它们并修改，太浪费时间了。

现状

作为一个大前端，我假设设计师想要更换一些样式，比如说替换颜色，修改字号，或者其他一些样式。理想的状态是，他们更新之后在各个平台都可以立即看到修改后的效果，可事实并不是这样。

举个例子，假如现在我们需要替换一个颜色，现在的工作流程是这样的：

  • 设计师在设计工具中更新颜色

  • 设计师将设计更新提供给开发

  • 开发依据设计稿更改对应的代码

  • 设计师可以在开发环境中看到最新的结果

这个流程不好的地方在于：

  • 设计师想要看到最终实际效果如何，需要等待开发完成所有工作。这会阻碍设计流程，让设计师很难受

  • 在代码中更改一处色值不需要太多时间，但是如果把这个时间用在其他更有意义的事情上会更好。如果经常这样更改，开发也会很难过

  • 由于我们通常会把它记在任务管理工具中，这件「小事」会给人造成一定心理压力

  • 从一个更加普遍的视角来看，这些变更会推迟产品走向市场的时间

这个流程其实是可以被优化的

让 Design Token 来拯救你 现在闭上眼睛，想象你正在使用一个带有 Design Token 生成器的设计工具，理想的设计流程就像下面这样子：

  • 设计师在设计工具中更改颜色。

  • 设计工具自动将 Design Token 文件更新到指定平台。

  • 开发只需要拉取或更新这个文件到自己的项目中即可。

这将会给设计和开发节省大量时间，并保证产品整体一致性，无论是设计师还是开发或者产品负责人都会很开心

不过，正如我上面所说，这是一个理想的工作流程。如果要实现它，需要在设计工具和开发工具之间架起桥梁。目前据我所知可以生成 Design Token 的工具只有一个 Theo，这是由 Salesforce 开发的。Theo 做的事情很简单，它把一些原始的 JSON、YML 文件转换为适用于各个平台的代码文件，比如适用于 Web 的 Less 文件。

Theo 如果能在设计工具中使用的话，那么这个流程就有可能实现，尤其是自从 Sketch 可以导出 JSON 文件之后

想得更深远一些的话，这种中间工具应该可以直接让设计师在设计工具中生成 Design Token，接着这些变更被自动同步到设计系统中。

在这个例子中，Design Token 是颜色，其它属性诸如字号、投影或间隔都是一样的道理。

适合开发的相关工具

  • 24ways 的设计规范就是使用一个叫做 Fractal 的工具生成的。它的维护者 Paul Robert Lloyd 在构建规范的过程中就使用了 Design Token，这些 JSON 文件中的 Token 会被 postcss-map 插件导入到 CSS 中去。

  • EightShape 做了一个静态站点生成器，用来生成设计系统文档。他们通过一个 Gulp 任务来将 JSON 或 YAML 文件中的 Design Token 生成为一个叫 tokens.scss 的文件。

  • 还有一个叫做 Dragoman 的项目，它是一个 Gulp 插件，也可以帮助你将 Design Token 转换为不同平台的样式文件，可惜它现在已不再更新了。

总结一下

Design Token 是一些集中存储的 UI 元素信息，比如颜色、字体、间隔、动画等等。他们可以根据需要被转换为不同平台的代码，比如 Android、iOS 或 Web。

Design Token 让团队间的协作更加流畅，并且保证了不同平台间的品牌一致性。

然而，目前 Design Token 似乎只能在开发那边发挥作用，在设计工具内目前还没法直接和这些 Design Token 生成器产生联系，但目前 Sketch 可以导出 JSON 的数据了。另外 Figma 通过其开放 API 可以将 Design Token 导出，有一个插件叫做 CSSGen 甚至可以直接生成 Web 样式变量