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. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

Design tokens 是设计系统中的视觉设计原子。具体来说，它们是存储视觉设计属性的命名实体。我们用它们来代替硬编码的值(如颜色的十六进制值或像素值间距)，这样可以为 UI 开发提供一个可伸缩的、一致的视觉系统。

Design Tokens 在设计系统中的位置

Atomic Design Methodology by Brad Frost  调整后的design system

团队中的 Design Tokens 怎么来的 ？

拆分所有组件的样式，然后抽象成 Design Tokens 。

图1 图2

怎么划分通用变量/组件变量

DesignTokens 命名规范

各BU合作策略：控制

1、Design tokens 可以根据各个团队的情况灵活使用，可以考虑多个组件使用同一个样式，也可以每个组件对应一个样式。侧重规范还是灵活，这中间的度需要每个团队把控。

2、对于会前端技术的设计师来说，Design tokens 就是如何优化的使用 CSS，包括语义化的命名样式、CSS 的复用。

关注公众号“设计有一思”。