浅谈 Design Token

Posted on:2022-07-4 11:00

我认为，在聊 Design Token之前，必须先理解什么设计系统（Design System）和 原子设计理论（Atomic Design)。

什么是设计系统

设计系统的定义是一系列文档元素、组件和区域、设计和前端指南的等完整的标准。有了设计系统，公司内各部门可以轻松地在应用程序的多个实例中重复使用样式和组件，快速构建一个或多个产品，从而简化大规模设计。

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications
——Design better

简单来说，设计系统就是一套完整的标准，提供可复用的组件和模式来管理和简化设计和开发。

业界已经有很多成功的案例，比如像Google的Material Design，Spotify 的 Encore System 抖音的Semi Design等等。这些公司借助他们的设计系统，成功的改变了他们设计和开发产品的方式，通过一组可重用的组件，以及一套指导这些组件使用的规范，可以快速的完成设计和开发工作。

为什么需要设计系统

设计的标准化带来的是更高的效率和更好的质量：

什么是原子设计（Atomic Design)

在2013年网页设计师Brad Frost从化学中受到启发提出了原子设计的概念。

化学反应由化学方程式表示，化学方程式通常显示原子元素如何结合在一起形成分子。在上面的例子中，我们看到了氢和氧如何结合在一起形成水分子。

在宇宙中，原子元素结合在一起形成分子。这些分子可以进一步结合形成相对复杂的有机体。反过来宇宙中的所有物质都可以分解为一组有限的原子元素。

类比Web开发，任何一个网页都是由许许多多相同和不同的HTML元素组成。

同理的，原子设计应运而生。原子设计是一种方法论，由原子、分子、组织、模板和页面共同协作以创造出更有效的用户界面系统的一种设计方法。

就像在化学中一样，原子是我们系统中最小的组成部分。而不是像氧或氢这样的原子，在设计中我们有按钮、输入、标签和其他在我们的设计中使用的小元素。

什么是 Design Token

而今天介绍的Design Token 则属于比原子还小的力度，是设计师可以创建的最小样式值。token映射的是构建和维护设计系统所需的所有值——间距、颜色、排版、对象样式、动画等。用于代替硬编码值，直接集成到我们的组件库和 UI 工具包，以确保所有产品体验的灵活性和统一性。

Design Token 这个概念最初由Salesforce设计系统团队创建。他们发现，如果在现有设计元素之上建立一个新的数据层并从一个地方管理它们，可以使用一个系统将其一致地扩展到所有平台。Salesforce 将 Design Token 运用在公司的 Lightning Design System 中，甚至开发了Theo来帮助他们更快捷地使用Design Token。Salesforce 定义的 Design Tokens 包含：

从前端开发的角度来看，Design Token 就是一个变量。

它是可存储的，可组织的，集中式的，可传播的。

自Design Token 这个概念诞生出来，很多团队都在研究并实践。不同团队的 Design Token 的设计和分类，以及使用的各类工具都是不尽相同。例如常见的设计工具包括 Photoshop，Sketch，Figma等。Token翻译工具也有很多，Theo，Style Dictionary，Dize，Specify 等。

在2019年七月，W3C社区发起了 Design Tokens Community Group 。目标是提供一套标准，让产品和设计工具可以按照这个标准共享设计系统的设计风格。

在W3C的现阶段的标准中，将 Design Token 定义为一种方法论：

Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies. They help establish a common vocabulary across organisations.

设计令牌是一种方法论，用于以与平台无关的方式表达设计决策，以便它们可以在不同的学科、工具和技术之间共享。它们有助于建立跨组织的通用词汇。

因为尚处于草案阶段 https://design-tokens.github.io/community-group/format/ ，就不在此赘述太多文档上的内容，有兴趣的朋友可自行阅读。

说了这么多，相信大家对 Design Token 应该有自己的理解了。已经知道“是什么“，接下来看看”该怎么做“。

创建和交付 Design Token

这里主要推荐的工具是 Figma Tokens 插件，它是一款基于 Figma 的插件，相对于 Figma 右侧面板原生自带的样式外，能够实现多层级的 Token 管理，同时插件内容能够与 Figma 设计文件实现实时联动。

使用插件后，设计师可以导出Token的JSON文件，文件内容大致如下：

{
  "colors": {
    "tokenset": "global",
    "accent": {
      "base": {
        "type": "color",
        "value": "#F8C307"
      },
      "bright": {
        "type": "color",
        "value": "#FFD63B"
      },
      "lower": {
        "type": "color",
        "value": "#A48105"
      },
      "lowest": {
        "type": "color",
        "value": "#776002"
      }
    },
    "bg": {
      "base": {
        "type": "color",
        "value": "#F9FAFB"
      },
      "highlight": {
        "type": "color",
        "value": "#353535"
      }
    },
    "text": {
      "base": {
        "type": "color",
        "value": "#EDEDED"
      },
      "dark": {
        "type": "color",
        "value": "#000000"
      },
      "lower": {
        "type": "color",
        "value": "#AAAAAA"
      }
    }
  }
}

随后将JSON文件交付给开发人员，开发人员将JSON转换成需要的文件格式，比如Web端可以转换成Scss文件、Less文件或者CSS自定义属性的文件。

结束语

Design Token 在提升团队协作效率的同时，还能保证产出的质量，快速落地设计规范。如果产品研发过程中，需要设计师重度参与，非常推荐在日常工作流中引入 Design Token，即使业务上没有多终端或多产品的需求。团队在尝试和设计师合作，一起落地公司级别的设计系统，Design Token作为系统的基座部分，正是当前研究的一个小点。

在对Design Token有一定的了解之后，接下来将介绍如何使用工具将Token翻译成开发人员可以使用的资源，以及如何优雅地将整套过程接入到日常开发流程中。

参考