一、什么是 Design Tokens

Design Tokens 不是一个新概念。它是设计师和开发人员共同使用的工作思维和方法。Tokens 的初衷是令牌 /指令Design 连接可以理解为设计变量

如下图所示,我们可以分别使用 button 的背景色、文字色和文字属性被定义为 Token,定期用代码语言命名组件的每个部分属性。

详解|Design Tokens 在设计系统中的意义与应用

每个人都应该对设计系统有一定的了解(可以阅读组件库和设计系统的相关概念:B

虽然我们可以通过设计规范、组件库、材料库等方式提高设计和开发过程的效率,但实际上我们经常遇到令人头疼的细节,如:

  • / 颜色 / 间距等细节与设计稿不同;
  • 设计师根据新的业务需求设计了组件库中没有的卡,但不确定卡的背景和边框应该使用哪种颜色;
  • 产品增加了黑暗模式,设计开发工作量巨大;
  • 老板用了已经上线的产品,觉得主题色的蓝色太重,想换主题色的浅蓝色。

其实这些问题都可以通过 Token 优化解决方案。Design Tokens 相当于进一步拆卸设计组件原子化,将组件的每个属性都变成了前端变量

可以说,Token 本质上就是找到了组件、属性和代码之间的对应关系,统一了样式和前端语言,使组件和设计系统可以被快速管理。

二、Design Tokens 有哪些优点?

Design Tokens 相当于设计系统中正确唯一的设计决策,使用时有四个优点:

  1. 设计语义更容易理解;
  2. 设计产出更加一致;
  3. 更准确地还原设计结果;
  4. 设计改进更容易维护。

1. 设计语义 更容易理解

每个组件中的复杂属性都可以 Token 语义化描述有助于设计师和开发人员建立画面感。

举个例子:#495FDF 这种颜色,根据设计系统中的命名,可以称为 Blue 60Token当语义使其达到组件级精度时,它被称为:color-button-border-focused。当设计师和开发人员使用时,他们可以快速了解颜色应用在哪里:

详解|Design Tokens 在设计系统中的意义与应用

2. 设计产出更加一致

在实际设计过程中,不同的设计师通常参与产生设计草案。对于不熟悉设计规范的设计师来说,经常会有这样的困惑:组件库的组件不完整,我的新设计卡,背景颜色应该在设计系统中使用哪种红色?Red50 还是 Red60?”。

此时,如果我们定义卡片的背景色Token,根据 Token为了选择颜色,卡片背景颜色中使用的颜色必须是唯一的,以确保不同设计师制作设计草案的一致性。

3. 设计结果更准确还原

设计师在验收开发内容时,往往会花大量时间检查开发结果与设计稿的一致性。Token 可以保证设计稿的高效准确还原。

例如,不使用 Token 在开发和使用硬代码模式时,当输入不正确的颜色代码时,系统无法判断颜色是否正确使用,也不会报告错误。

而在使用了 Token 之后,如果开发引用错误或根本没有色值,系统会给出错误报告提示,开发可以自行检查,设计师的验收成本会大大降低:

详解|Design Tokens 在设计系统中的意义与应用

4. 设计改进更容易维护

设计的变化和迭代会更容易。例如,如果没有 ,您的产品需要更新主题颜色Token,对于设计和开发来说,这将是一个巨大的工作量,需要逐个修改组件,很容易错过或混淆一些细节。

但如果用 Token,开发只需重新输入每一个Token相应的新色值可以实现产品的整体颜色更换,不需要逐个调查和更组件,省时、高效、准确。

详解|Design Tokens 在设计系统中的意义与应用

三、如何使用 Design Tokens

1. Token 命名方法

关于 Token 的名称,不同的公司,团队,产品有不同的定义,但都遵循某些方法逻辑和规则,设计与前端实现信息同步。这种命名的想法与组件命名非常相似,需要先对组件的属性进行分类和分类

我们可以从组件系统的核心元素开始,拆卸整个组件系统形、色、字、构、质这些大方面,根据不同类别、组件、属性、等级和状态,对 Token 命名规范定义:

详解|Design Tokens 在设计系统中的意义与应用

例如,下图中的 button,它的背景色 Token 使用上图中的命名方法,从左到右分别是其类别、元件、属性、等级和状态,因此 button 的背景色对应 Token 就是:color-button-background-primary-nomal:

详解|Design Tokens 在设计系统中的意义与应用

有了这样一个系统的命名规则,我们可以表格的形式设计所有涉及 的系统Token 的元素特征被整理出来,作为设计和开发的基准:

详解|Design Tokens 在设计系统中的意义与应用

2. Token 应用方法

通常需要一套设计和开发完整的 Token 列表实现信息对齐。

如果你的团队在使用 Figma 也可用作设计协同工具使用插件:Figma Tokens。 设计师整理 Token 文档导入插件,开发可以有效生成Token 对应的JSON 文件直接复制编写代码,确保设计与开发合作的一致性和准确性:

详解|Design Tokens 在设计系统中的意义与应用

相关新闻

联系我们

联系我们

888-888-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部