前端开发 如何高效落地 Design Token

1. 什么是 Design Token

Token 是什么

“Token”常见的释义为“令牌、象征、记号、代币”等。

在计算机领域，“token”通常指的是用于身份验证、授权或表示特定操作权限的一种凭证或代码片段。例如，在登录系统时，服务器可能会颁发一个 token 给用户，用户在后续的操作中凭借这个 token 来证明自己的身份和权限。

为什么 UI 设计中要用 Token

想象一个场景：如果一个系统或产品的迭代更改了产品的风格，那么在 UI 设计、开发人员和测试人员之间如何完成这一主题风格的迭代呢？

UI 设计确定了新风格后，设计出一个版本给开发。开发人员根据 UI 设计稿，更改样式（各种颜色、尺寸等），修改完成后交给测试人员，测试人员根据 UI 设计稿，一个一个地核对开发人员的样式是否与设计稿一致。如果中间出现颜色偏差或间距与设计稿不一致，开发人员需要再修改，最后完成一次主题风格的更新迭代。如果领导在此过程中觉得需要调整主题风格，UI、开发和测试人员又要重新进行一次流程。

这一过程存在两个主要问题：

• 频繁变更需求导致的设计、开发、测试重复修改颜色和尺寸。
• 人的沟通成本，产品UI开发测试反复的确认；人工修改的不可靠性，容易出现遗漏。

从程序员的思维来看，程序中容易变动的常量会用变量代替，这样一个修改就能影响整个应用。UI 设计中也需要这种能够改变一个值就能改变整个项目风格的全局变量（design token）。如果开发和 UI 设计之间提取界面开发中的变量，预定一个对应的变量名，UI 在更新设计时只需更新变量对应的值，开发更新代码中对应变量的值，风格更新在开发流程中这一环节也能快速完成。这样不仅提高了 UI 更新的速度，加快了开发的实现，而且不容易出现人为低级遗漏，测试也只需核对变量是否替换正确。

这就是 design token 产生的原因，它加快了整个产品开发中设计、开发、测试更新迭代的速度。

在 UI 设计中，使用 token 有助于保持设计系统的一致性、可维护性和可扩展性。

2 前端如何落地 Design

变量/Token 归类

抽象才能包罗万象，对界面上风格的改变，一般可以分为以下几类：

Design Token 的命名规范

阿里是这样命名的

我们看看组件库 Vant 的命名方式

// Color Palette
--van-black: #000;
--van-white: #fff;
--van-gray-1: #f7f8fa;
--van-gray-2: #f2f3f5;

--van-red: #ee0a24;
--van-blue: #1989fa;
--van-orange: #ff976a;
--van-green: #07c160;

// Gradient Colors
--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors
--van-primary-color: var(--van-blue);
--van-success-color: var(--van-green);
--van-danger-color: var(--van-red);
--van-warning-color: var(--van-orange);
--van-text-color: var(--van-gray-8);
--van-active-opacity: 0.6;
--van-disabled-opacity: 0.5;
--van-background: var(--van-gray-1);
--van-background-2: var(--van-white);

// Padding
--van-padding-base: 4px;
--van-padding-xs: 8px;
--van-padding-sm: 12px;
--van-padding-md: 16px;
--van-padding-lg: 24px;
--van-padding-xl: 32px;

// Font
--van-font-size-xs: 10px;
--van-font-size-sm: 12px;
--van-font-bold: 600;
--van-line-height-xs: 14px;

// Animation
--van-duration-base: 0.3s;
--van-duration-fast: 0.2s;
--van-ease-out: ease-out;
--van-ease-in: ease-in;

// Border
--van-border-color: var(--van-gray-3);
--van-border-width: 1px;
--van-radius-sm: 2px;
--van-radius-md: 4px;
--van-radius-lg: 8px;
--van-radius-max: 999px;



// Component Button
--van-button-mini-padding: 0 var(--van-padding-base);
--van-button-mini-font-size: var(--van-font-size-xs);
--van-button-default-font-size: var(--van-font-size-lg);
--van-button-default-color: var(--van-text-color);
--van-button-default-background: var(--van-background-2);
--van-button-disabled-opacity: var(--van-disabled-opacity);

总结下来

Design token 就是 变量化 界面设计和实现中的属性设置。

落地的基本逻辑就是：先有一个调色板，然后定义语义化的基础token，如 颜色、尺寸、圆角、阴影等，然后在每个组件中根据功能属性状态等定义组件级别的token， 且引用语义化的token。