给设计师的 Design Token 指南（运用策略篇）

• delay;

• cubic bézier (timing function).

Sketch 和 Figma 都暂不支持 transition token 的落地:

• Figma 支持自定义动画，但不支持将其存储为复用样式;

• 在 Sketch 中，设计师只能调用 5 种预设的动画类型，不可自定义具体参数，且不支持将其存储为复用样式。

由此，我们建议设计师使用文档来管理 transition token。以下是我们在实践中的部分案例：

• 深色模式；

• 高对比度模式；

• 子品牌（sub-brand）；

• 特定域（domain，如 public、internal、partner）。

我们建议将不同模式的样式库分为多个文件，且与组件库解耦。这样做的好处是，设计师仅需制作一套模式的设计稿，即可通过一定的手段生成其他各种模式的设计稿。下面是我们探索出的具体做法（以浅色模式生成深色模式为例）。

在 Figma 中，将浅色模式组件库文件调用的浅色模式样式库（fundation）直接 swap 至深色模式样式库，即可生成深色模式组件库。

2. Component Token

在 Figma 中，property 有 4 种类型。除了最为基础的 variant property，boolean property、instance swap property、text property 都是是用来传达 component 中有哪些部分是可以被修改的（从开发的角度来看，就是表达哪些部分是可以配置的），如：

• Boolean property：用来表示可以显示/隐藏 component 中的哪些图层。其包括 true 和 false 这 2 个 value（也可以是 on 和 off），在 Figma 的面板中表现为一个开关；

• Instance swap property：用来表示可以替换 component 中的哪些 instance；

• Text property：用来表示可以修改 component 中的哪些文本。

• 尽可能使用阿拉伯数字（如「2 Icons」而不是「Two Icons」、「Double Icons」）；

• 避免使用实际参数命名（如「2A」而不是「16pt」）；

• Boolean property 的命名需使用「Show XX」的格式（如「Show Icon」「Show Title」）；

• 强调「仅有某元素」使用「XX Only」的格式（如「Icon Only」「Title Only」）；

• 表达「用于某元素之上」使用「On XX」的格式（如「On Dark」「On Light」）；

• 表达「相对常规的多出某元素」使用「+ XX」的格式（如「+ Icon」「+ Title」）；

• 表达「有多个元素复合而成」使用「XX + XX」的格式（如「Icon + Title」「Title + Description」）。

• 按逻辑关系排（如先放控制尺寸的 property、再放控制颜色的 property）。

对于 value 的排序，主要有以下两种思路：

• 按数值梯度排（如 S、M、L）；

• 按使用频次排（如将最常用的 default、pressed 排在前面，很少用的 focused 排在后面）。

由此，我们建议，尽可能将 variant property 设置为更简洁的 boolean property，但要在满足以下条件的情况下：

• 只有两个 values；

• 未来不大可能增加更多 values。

如以下的「Inputing」property：

转换为 boolean property 后，若担心 value 的表意不够清晰或有歧义，可备注于 description。如以下的「Filled」property：

若转换后 property 和 value 的表意不明，则可不转换。 

如上一个案例中的「Type」property 被转换为如下表述后，就很难清晰理解其含义了：

总结

3. Template Token

4. File Token

一般情况下，design system 需要以下类型的 file token：• text（如：国家名、月份、星座等）；

• image（如：用户头像、场景插画等）；

• video（如：教育视频等）；

• linked data（如：成组的综合类型数据等）。

 

在 Sketch 中，选用 data 作为 file token 的载体。

其中，text data 存放于 TXT 文件中，如：

北京
上海
广州
深圳
...

Image data 直接存放于文件夹中。Linked data 存放于 JSON 文件中，如：

[
   {
"Photo": "WeStore.jpeg",
"Location": "海珠区艺苑路",
"Title": "微信形象店 WeStore",
   },
   {
"Photo": "SUPERMONKEY.jpeg",
"Location": "海珠区新港中路",
"Title": "超级猩猩（客村全能店）",
   },
   {
"Photo": "Guangzhou Restaurant.jpeg",
"Location": "天河区体育东路",
"Title": "广州酒家（体育东路店）",
   }
 ]

如果需要更为复杂或自定义地托管 file token，可以委托开发同学制作 data supplier plugin。Sketch 官方也给到了插件的制作指引，详见Do more with Data: Building a Data Supplier plugin for Sketch。Figma 尚不支持 data。不过，我们仍能选用 color style 作为 file token 中指向 image 的 token 在 Figma 中的载体：