基于设计令牌的用户界面架构

主要观点:设计令牌(design tokens)是表示为数据的基本设计决策,是设计系统的基础构建块。自 2022 年设计令牌规范的第二版编辑草案发布和呼吁工具制造商开始实施并提供反馈以来,设计令牌工具的领域迅速发展。文章介绍了设计令牌的作用、建立单一真相源、自动化设计令牌分发、分层组织令牌以及令牌范围等方面。

关键信息

  • 2017 年在大型项目中,使用微前端架构时,组件堆叠问题导致使用魔法数字控制层叠顺序,项目增长后难以扩展,最终用设计令牌解决。
  • 设计令牌可作为跨学科协作的共同语言,集成到各种工具中,实现技术适应性,确保设计一致性。
  • 翻译工具可将设计令牌文件转换为特定平台的代码和文档,如 Style Dictionary 等工具。
  • 自动化设计令牌分发可通过部署管道实现,包括完全自动化的 trunk-based 工作流和包含手动审批的管道。
  • 设计令牌可分层组织,包括选项令牌(定义可用设计选项)、决策令牌(定义样式应用方式)和组件令牌(定义样式应用位置)。
  • 令牌范围可分为私有和公共,虽未纳入设计令牌规范,但一些设计系统已开始分离,可通过文件路径或添加范围标志来实现。

重要细节

  • 设计令牌文件示例,如 z-index 的设计令牌文件和颜色相关的各种令牌文件。
  • 完全自动化管道的各个作业,如检查、构建、测试、发布和通知。
  • 包含手动审批的管道,通过预览环境和 pull-request 工作流实现。
  • 不同类型令牌的作用和示例,如选项令牌的颜色调色板定义,决策令牌的样式应用决策,组件令牌的样式应用位置映射。
  • 不同实现令牌范围的方法,如通过 Style Dictionary 的过滤器和添加范围标志。
阅读 3
0 条评论