design-token 是什么样式方案?

news/2025/3/16 22:28:09/文章来源:https://www.cnblogs.com/longmo666/p/18775838

Design Tokens 是一种用于存储和管理设计系统中视觉风格(如颜色、字体、间距等)的值的方法。
它们作为设计决策的基本单位,可以跨不同平台和工具(包括但不限于Web、iOS、Android等)保持一致的设计语言。
Design Tokens并不是一种样式方案,而是一种概念或方法论,它帮助设计师和开发者以一种可维护且一致的方式定义、管理和使用设计属性。

主要特点

  1. 统一性:确保在不同的平台上实现一致的用户体验。无论是网站还是移动应用,通过使用相同的tokens,能够保证品牌的一致性。
  2. 可扩展性:随着设计系统的成长,可以通过添加新的tokens来支持更多的组件和用例,而无需改变现有的代码。
  3. 灵活性:易于更新和修改设计细节。如果需要更改全局的颜色或者字体大小,只需在一个地方进行修改,然后重新生成或发布tokens即可。
  4. 自动化工作流:可以集成到构建流程中,自动从源文件生成适用于不同环境的样式输出(例如CSS, SCSS, JSON等)。

实施方式

  • 格式:Tokens通常以结构化数据的形式存在,如JSON、YAML等,便于解析和转换为各种格式。
  • 工具支持:有许多工具可以帮助创建和管理design tokens,比如Style Dictionary、Theo、Treat等。这些工具允许你定义一次tokens,并将其编译成适合不同前端技术栈的格式。
  • 使用场景:除了直接应用于UI开发外,design tokens还可以用于文档生成、测试脚本编写等方面,有助于提高团队协作效率。

总之,Design Tokens提供了一种标准化的方式来处理设计元素,使得设计与开发之间的沟通更加顺畅,同时提高了产品的可维护性和一致性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/900023.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

测试驱动开发(TDD)浅析

测试驱动开发(TDD:Test Driven Development)是敏捷开发中的一项核心实践,推崇通过测试来驱动整个开发的进行。TDD有别于传统“先编码,后测试”的开发过程,而是要求在编写业务代码之前,先编写测试用例。TDD的概念大致在上世纪90年代随着极限编程(XP:Extreme Programmin…

(18).命令模式

命令模式 命令模式的核心思想是将请求封装为个对象,将其作为命令发起者和接收者的中介,而抽象出来的命令对象又使得能够对一系列请求进行操作,如对请求进行排队,记录请求日志以及支持可撤销的操作等。命令模式参与者:◇命令的执行者(接收者Receiver):它单纯的只具体实现了功…

学嵌入式C语言,看这一篇就够了(5)

C语言的运算符 学习编程语言,应该遵循“字-->词-->句-->段--->章”,对于一条有意义的语句而言,是离不开标点符号的运算符指明要进行的运算和操作,操作数是指运算符的操作对象,根据运算符操作数的数目不同,C语言标准把运算符分为三种:单目运算符(一元运算符…

20242313 2024-2025-2 《Python程序设计》实验一报告

20242313 2024-2025-2 《Python程序设计》实验一报告 课程:《Python程序设计》 班级:2423 姓名:曾海鹏 学号:20242313 实验教师:王志强 实验日期:2025年3月16日 必修/选修:公选课 1.实验内容 1.熟悉Python开发环境; 2.练习Python运行、调试技能;(编写书中的程序,并…

nn.Embedding()函数详解

nn.Embedding()函数详解 nn.Embedding()函数:随机初始化词向量,词向量在正态分布N(0,1)中随机取值 输入: torch.nn.Embedding(num_embeddings, embedding_dim, padding_idx=None, max_norm=None, norm_type=2.0, scale_grad_by_freq=False, sparse=False, _weight=None) num…

htb Authority

端口扫描 nmap -sC -sV -p- -Pn -T4 10.10.11.222 Starting Nmap 7.92 ( https://nmap.org ) at 2024-10-04 19:42 CST Nmap scan report for 10.10.11.222 (10.10.11.222) Host is up (0.40s latency). Not shown: 65506 closed tcp ports (reset) PORT STATE SERVICE …

蓝桥杯14届省B

蓝桥杯14届省赛B组A:int a[105]; int day[]={0,31,28,31,30,31,30,31,31,30,31,30,31};//记录每个月有多少天 set<int> st;//记录不重复的日期void check(int mm,int dd){if (mm>12||mm<1||dd<1||dd>day[mm]) return;else st.insert(mm*100+dd);//st存日期 …

docker 安装 oracle database 问题记录

pre本地docker (WSL)安装运行 Oracle1. 镜像处理参考链接:https://www.cnblogs.com/wuchangsoft/p/18344847 oracle 镜像获取:https://container-registry.oracle.com/ords/f?p=113:10:::::: (Oracle官网,由于部分问题导致直接pull无法拉取) 阿里云,参考链接里有个个人19…

20242103 实验一《Python程序设计》实验报告

20242103 《Python程序设计》实验1报告 课程:《Python程序设计》 班级: 2421 姓名: 李雨虓 学号:20242103 实验教师:王志强 实验日期:2025年3月12日 必修/选修: 公选课 1.实验内容: 1.熟悉Python开发环境; 2.练习Python运行、调试技能;(编写书中的程序,并进行调试…

20241313 2024-2025-2 《Python程序设计》实验一报告

20241313 2024-2025-2 《Python程序设计》实验一报告 课程:《Python程序设计》 班级: 2413 姓名: 刘鸣宇 学号:20241313 实验教师:王志强 实验日期:2025年3月12日 必修/选修: 公选课 1.实验内容 1.熟悉Python开发环境; 2.练习Python运行、调试技能;(编写书中的程序…