B端设计师必看!3分钟教你搞定Design Token搭建

B端设计师必看!3分钟教你搞定Design Token搭建

评论有奖

收藏 2 点赞 32

1️⃣ Design Token是什么?
Design Token 是设计系统中的视觉设计原子。它们是一组有着统一命名规则的实体,用于存储视觉设计部分的具体参数,比如颜色、间距、文字等。使用它可以帮助UI、开发维护一套灵活可扩展性的、一致性的设计系统。
 
2️⃣什么是全局token、别名token、组件token
全局Token是我们设计语言中的原始值,由与上下文无关的名称表示。我们的颜色、字体、间距、圆角等都可以被标记为全局token。他们可以直接使用,并由所有其他令牌类型继承。
别名token限定了全局Token的使用场景,这样可以让Token灵活调用,在后续的更改中自由替换。例如:下图中 cta-background-color 是用于背景色,而不是前景色。
组件token是对特定组件进行样式化的值,从名称可以表明的使用场景特别具体,看了就知道Token是什么。它的值一般从别名Token调取,在特殊情况下也会从全局Token中调取。
 
3️⃣如何创建 Token,如图👆
 
喜欢的话可以点赞收藏关注哦~~

XUEMEIAIGC达人

人气 95.4w 文章 46
B端设计师必看!3分钟教你搞定Design Token搭建
B端设计师必看!3分钟教你搞定Design Token搭建
B端设计师必看!3分钟教你搞定Design Token搭建
B端设计师必看!3分钟教你搞定Design Token搭建
B端设计师必看!3分钟教你搞定Design Token搭建
B端设计师必看!3分钟教你搞定Design Token搭建
B端设计师必看!3分钟教你搞定Design Token搭建
B端设计师必看!3分钟教你搞定Design Token搭建
B端设计师必看!3分钟教你搞定Design Token搭建
收藏 2干货满满
点赞 32
对标P6!大厂UX设计岗面试问题及答案汇总
😘 立即查看 >
下一篇 对标P6!大厂UX设计岗面试问题及答案汇总

发评论!每天赢奖品

点击 登录 后,在评论区留言,系统会随机派送奖品

2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们

本期奖品

发表评论 为下方 1 条评论点赞,解锁好运彩蛋

{{ moreBtnTxt }}
阅读相关文章
{{comTitle}} {{comSubtitle}}