大家好,一周过去了是否对Design Token有初步认识呢？
上篇文章中我们对Design Token的基本了解有了清晰的认识（还没看过前置篇的同学可以点击前往观看～）

https://www.zcool.com.cn/article/ZMTU5NjU2NA==.html

那么本篇文章将为大家带来详细的Token命名规则及嵌套层级和Figma variable 的使用。

在此之前，我们先从简单的开始。比如说为什么Design Token会有三个层级，那能不能有两个呢？Figma Virable里是怎么建立Design Token的。

一、Design Token命名规范和嵌套

1.1 全局命名

1.1.1 Token的类型
参考各大品牌的设计系统我们得到一些基础的类型：Color 颜色、 Shadow 投影、 Typography 字体样式、Size 尺寸、 Space 间距、Radius 描边圆角、Border Width 描边宽度、Opacity透明度

1.1.2基础Token命名
我们以颜色为例，创建全局Token，也就是基础Token；设计中所有的值都是从这里调用；首先定义品牌使用的颜色创建梯度色板，根据色板中的颜色进一步定义颜色的使用范围，一般将颜色分为四类：品牌色、辅助色、功能色、中性色
例如：blue5:#618DFF，这样我们就得到了基础Token

梯度色板的创建有许多工具可以使用，这里我们推荐Ant Design的色版生成工具，需要的小伙伴可以点击链接使用

色彩 - Ant Design

1.2 语义化命名

有了全局Token后我们来添加第二层语义化Token，开始初次限定Token的使用场景，限定比较粗的颗粒，也就是赋予语义化，根据名宇就能知道Token的使用场景；它的值都是从全局Token中调取而来
例如，我们这里选择上面的blue5，为他赋予一个品牌色的含义，得到brand-color：blue5

这里的语义化命名可以从研发的角度去理解，它就是基础Token的别名

1.3 组件命名

接下来就是组件命名，以具体组件为单位的 Token，这里的Token样式只影响指定的组件；它的值可以从语义Token中调取，特殊情况下也可以从基础Token中调取。
例如：我们定义按钮的颜色使用品牌色，就可以得到button-bg：@brand-color

1.4 命名规则

关于Token的命名规则，不同的团队会有不同的定义方式，我们在输出整理命名和分类时可以设计同事与研发同事达成一致，方便确保后续可以更好的陆地
可以参考大厂的Token都是如何命名的，可以更好的制定自己产品的Token命名

这里为大家整理了大厂的部分设计系统

字节跳动

Bilibili

谷歌

通过上述内容我们可以总结一个命名规则：
1. 层级之间用“-”连接
2. 组件Token中元素顺序为：类别-组件-属性-状态

1.5 形成文档

将Token整理并形成资产表，形式不限可以是文档、是表格，或是一个Figma文件；它的存在是为了设计和研发同学查阅，并方便后续迭代更新。
这里参考腾讯TDesign，资产表分为三列，基础Token、全局语义Token、组件Token。

二、 Figma variable的使用

以上讲解了Token命名规范的底层逻辑，接下来我们将讲到如何使用工具创建Token并运用到设计中去。以往我们都是使用Figma的插件来实现Token的管理，如今Figma自己更新了variable功能，可以更好的与Figma自身联动，以及在设计中快速使用。

2.1 variable概述

variable（变量）功能对所有用户开发，但是创建的变量数量对于免费用户有一定限制，如果只是学习和了解功能，那也是够用了。
目前variableb支持四种类型的变量：Color（颜色）、Number（数）、String（字符串）以及Boolean（布尔）。

2.2 创建全局Toke

1. 从目标文件中中，单击“+ 创建变量”。

2. 从下拉列表中选择变量类型。

3. 在第一列中为变量指定名称，在第二列中指定变量值。

2.3 创建语义化Token

1. 在“Variables”中，右键单击变量的值并选择“创建别名”。
2. 从“Libraries”选项卡中，选择一个变量来设置别名。

2.4 编辑变量

1. 更改变量的名称
2. 添加说明以解释应如何使用变量
3. 修改变量的值
4. 使用复选框来确定变量的范围
5. 添加代码语法
6. 隐藏变量以防止发布

2.5 变量使用范围建议

目前无法在Text中使用变量；color（颜色）无法添加渐变，但相信后续Figma会及时更新这部分的支持。

2.6 对变量进行分组

为什么要对变量进行分组，主要是为了后续语义化命名时方便调用。

1. 从变量模式中，选择多个变量：

• 按住 ⌘ Command / Control 选择多个变量
• 按住 ⇧ Shift 选择变量范围

2. 右键单击所选内容并选择带有所选内容的新组。

3. 单击并拖动变量模式侧栏中的组以重新排序组。

4. 单击组并将其拖动到其他组中以将它们嵌套。

2.7 创建和管理变量集合

打开下拉列表可以重命名合集、删除合集、以及创建新集合。

这里主要是帮助我们更好的梳理Token嵌套层级，可以参考一下我目前使用的方式

三、 将Variable应用于设计

3.1 将颜色变量应用到选定的对象

1. 单击右侧边栏“Fill”或“Stroke”部分中的“Style”图标
2. 从样式选择器中，选择一个变量：
3. 颜色变量显示为正方形，而颜色样式显示为圆形
4. 使用搜索栏按名称查找变量或打开下拉列表按库过滤
5. 样式选择器可以以列表或网格的形式查看

3.2 将数字变量应用于选定的对象

将鼠标悬停在属性字段上并执行以下操作之一：
1. 对于独立的圆角半径和所有属性：打开下拉列表并选择应用变量

2. 对于宽度、高度、最小和最大宽度/高度以及间隙：打开下拉列表并选择应用变量

3.3 将数字或字符串变量应用于文本图层

例如，可以使用字符串变量更改语言模式

1. 从右侧边栏的文本部分，单击应用变量。
2. 从数字变量或字符串变量中进行选择。

3.4 应用布尔变量
Modes模式也就是可变模式，模式包含集合中变量的值列表，将每个变量存储一个值，可以满足更多的设计背景；但目前仅支持付费用户使用。
布尔变量应用于所选对象：
从右侧边栏的“Layer”部分，右键单击可见（visible）/隐藏（hidden）图标
从选取器中选择一个variable，点击使用布尔变量用打开或关闭图标
最后我们需要在prototype中设置其交互效果

这与我们之前使用组件集使用on/off来进行切换更加灵活，特别是进行原型预览时可直接实现点击变化的效果。

四、 如何与开发对接

4.1 导出Variable

这里我使用的是这款插件，它可以导出变量为CSS代码文件，方便研发同学使用

1. 启动插件
2. 选择需要导出的合集

3. 点击Export CSS

4. 得到结果后Copy text给到研发同学就可以啦～

4.2 更新Variable

我们的变量CSS可以和研发同学共同商定后保存在任意在线文档中，当有修改时只需更新CSS代码并同步信息给研发同学即可。

五、 写在最后

目前Design Token的工作方式已在各大公司使用，它对于未创建设计规范、或者想要提高工作效率的团队来说有很大帮助；Figma Vriable的更新也为这种方式带来了更便利的应用价值，希望大家可以学习并且好的使用它到业务中去，让设计系统变得更规范、更落地。
欢迎大家一起学习和讨论工作中使用Design Token的心得，以及对于Vriable的使用感受～
那么关于Design Token的系列到这里就结束了🥳，如果你觉得这些内容对你有用不妨点个赞吧！

参考文献：

https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676

https://www.youtube.com/watch?v=eWT394G04Os