铭鸿体育资讯网

大厂都在用的DesignToken是什么

最近几年大厂都在聊 Design Token,听起来很高级,其实原理很简单。
📌 一句话解释: Design Token 就是把设计中的基础属性(颜色、字号、间距、圆角等)定义成「变量」。
📌 举个例子: 你在设计稿里用的蓝色 1677FF,不直接叫「蓝色」,而是命名为 color-brand-primary。 按钮的圆角不叫「6px」,而是叫 border-radius-medium。
📌 这样做有什么好处?
① 一改全改 要换品牌色?改一个 Token 值,整个产品的品牌色全部同步更新。
② 设计和开发统一语言 设计师说 color-brand-primary,开发也用同一个变量名,不会出现色值对不上的问题。
③ 多主题支持 深色模式、多品牌皮肤,只需要切换一套 Token,不用改组件本身。
📌 Token 的分层: 全局 Token(Global)→ 语义 Token(Alias)→ 组件 Token(Component) 比如:Blue-600 → color-brand-primary → button-color-bg-primary
上手建议:先从颜色和字体开始定义,逐步扩展到间距和圆角。

📚下面这份《UIUX 学习指南》,是我花 1 年时间整理,萃取苹果、谷歌等大厂设计智慧搭建而成的:
• 体系完整又系统,从视觉、交互到用研、产品,覆盖 UI/UX 全链路
• 不管是零基础入门、中级进阶还是冲资深,都能精准适配
• 每天花 5~10 分钟,就能稳步搭建起专业认知框架
爬出低谷,不需要惊天动地的顿悟。👇文末加入「UIUX 学习指南」,每天 5~10 分钟,去学、去拆解、去浸泡。
你会发现,焦虑和迷茫会被“坚实的确定性”一点点挤出去,你重新理解了设计的重量。