1.什么是Design Toke？

“Token”原本的意思是 “令牌”，在工程逻辑中 用于用户身份与服务器 端进行验证。

2.他能干什么

  • 将设计变量转化为语义化的符号，帮助使用者建立界面的“画面感” 。
  • 通过使用语义化的方式进行描述和管理，帮助设计师跟团队提效，建立工程化思维。

image.png

3.Design Toke的优势

设计寓意容易理解

讲设计变量转为语义化的符号（Token），帮助使用者建立界面的“画面感” 。

设计产出更一致

在公司设计团队内针对组件使用统一的Token，提升设计产出的一致性
image.png
image.png

设计变量易维护

通过对 JSON 文件的变更，任何改动都能够及时的变更所有设计中
image.png

设计还原度提升

只要确保正确的使用Token，设计能够高效安全还原落地
image.png

4.Design Toke 的类型image.png

5.如何在设计系统中创建Design Token image.png

image.png
image.png
腾讯颜色文档Token变量
image.png
image.pngimage.png
将Design Token整理成文档，作为提效的基准。
image.png
image.png

6.Design Token在以下情况不建议使用

  • 您现有的应用程序使用在未来 1-2 年内不会改变的硬编码值
  • 您的产品没有设计系统