Design Token 可以简单理解为封装的视觉样式参数。

  • 通过规定样式参数，并通过一套符合设计师、工程师理解的统一的命名规则，为这些样式参数的定义名称；
  • Token 就是最底层的原子，本质上就是找到了组件、属性和代码之间的对应关系；
  • 统一了设计样式和前端语言，使组件和设计系统可以被快速管理；
  • Design Tokens是一种设计师和开发人员都能够清晰明了的设计系统

design token如何在工作中落地
https://www.uisdc.com/design-token
https://zhuanlan.zhihu.com/p/512211811
https://www.uisdc.com/design-token-2

design token的好处

  1. 设计语义-更易理解
  2. 设计方案-更加一致
  3. 主题皮肤-一键替换
  4. 设计变更-高效维护
  5. 设计成果-精准还原

Design Token 是设计系统中的可视化原子，是设计属性的命名实体，使用Design Token代替具体编码值（如颜色的16进制、间距的像素值等），以便于维护一套可扩展且一致性的设计系统。

  • tokens意思是令牌，指令等，也是一种计算机术语，
  • 与Design连在一起使用有暗号、标记、语义的意思，也有设计变量的意味
  • Design Tokens是一种视觉原子化的设计系统，它将视觉控件和界面属性重新梳理归纳进行语义化命名，
  • 代替前端代码中的复杂代码，例如十六进制的颜色代码
  • 这样可以方便设计师进行统一的管理和扩展，保证产品的一致性，也大大提升开发效率

https://zhuanlan.zhihu.com/p/499465845
U.S. Web Design System https://designsystem.digital.gov/design-tokens
what-are-design-tokens https://css-tricks.com/what-are-design-tokens/

design token参考

material.io

https://m3.material.io/foundations/design-tokens/overview
image.png

Material Design

https://material.io/
image.png

Adobe Design Token

https://spectrum.adobe.com/page/design-tokens
image.png

Saleforce Lightning Design System

SaaS 企业的开源设计系统 Saleforce Lightning Design System
https://www.lightningdesignsystem.com/design-tokens/
https://github.com/salesforce-ux/theo
image.png

Sympli

Sympli 在线标注和协作工具，支持直接集成到Xcode和Android Studio，30天免费试用
https://sympli.io/design-systems
Adobe XD插件汇总 https://xdcns.com/zuixindongtai/167.html
image.png