什么是设计令牌，以及它们为何重要
将设计令牌定义为颜色、间距、排版及其他设计决策的唯一事实来源
什么是设计令牌，以及它们为何重要 是 CoddyKit 上的免费 React Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
定义设计令牌
设计令牌是设计系统中以命名且可复用的值表达的基本设计决策。不要在样式表中硬编码 #3b82f6，而应定义 color-primary-500: #3b82f6，并在各处引用该名称。名称承载含义；值可以变化，而无需更新每个引用。
具体的令牌示例
令牌涵盖所有视觉属性：颜色令牌（color-primary-500: #3b82f6）、间距令牌（spacing-4: 16px）、排版令牌（font-size-lg: 18px、font-weight-bold: 700）、边框圆角令牌（radius-md: 8px）、阴影令牌和动画时长令牌。它们共同编码完整的视觉语言。
单一事实来源
令牌在设计与工程之间建立了单一事实来源。设计师在 Figma 中定义值，工程师在代码中使用这些值。当品牌颜色发生变化时，只需更新一个令牌值，使用该令牌的每个组件就会自动反映变化——无需在数千个文件中进行搜索替换。
没有令牌时的问题
不使用令牌时，颜色和间距值会以硬编码形式散落在样式表、组件文件和工具类中。某种蓝色可能在不同文件中分别写成 #3b82f6、rgb(59, 130, 246) 和 blue-500。要更换品牌色，必须查找并替换每个实例，漏掉某些实例的风险很高。
启用多主题支持
设计令牌是多主题系统的基础。在深色模式下，color-background 和 color-text 等语义令牌会根据当前主题指向不同的原始值。您只需更改一个映射，而不必修改每个组件。浅色和深色主题共享组件代码，区别仅在于令牌值。
启用多品牌支持
对于服务多个品牌的 SaaS 平台，令牌可以在不重复代码的情况下实现品牌定制。品牌 A 使用蓝色作为主色，品牌 B 使用绿色——它们的区别仅在于语义令牌映射。按钮组件的代码完全相同；它读取 color-action-primary，该令牌会根据品牌解析为不同的颜色。
令牌层级体系
令牌按层级组织。原始令牌是原始值：color-blue-500: #3b82f6。语义令牌表达含义：color-action-primary: {color-blue-500}。组件令牌最为具体：button-primary-background: {color-action-primary}。这种层级将“是什么”与“在哪里使用”分离开来。
层级体系为何重要
语义令牌是支持多主题的关键。在浅色主题中，color-background: {color-white}。在深色主题中，color-background: {color-gray-900}。组件引用的是 color-background，而不是某个具体颜色。更换主题时只需替换语义令牌映射，组件无需修改。
Figma 变量与令牌同步
Figma 变量于 2023 年推出，是 Figma 内部的设计令牌。设计师在 Figma 中定义的令牌层级，与工程师在代码中实现的层级相同。Tokens Studio for Figma 或官方 Figma Tokens 插件等工具可以将 Figma 变量导出为 JSON，然后由 Style Dictionary 编译为 CSS 变量或 JS 对象。
W3C 设计令牌规范
W3C 设计令牌社区组正在制定设计令牌的标准 JSON 格式。其目标是实现互操作性：同一个令牌文件可以与任何设计工具（Figma、Sketch）及任何构建工具（Style Dictionary、Theo、Panda CSS）配合使用。采用该规范格式可以让您的令牌系统面向未来。
令牌治理
设计令牌需要制定治理规则：谁可以添加新令牌（设计团队、工程团队，还是双方），令牌如何进行版本管理，如何退役已弃用的令牌，以及如何向使用这些令牌的团队传达令牌变更。没有治理机制，令牌系统就会逐渐偏离原有方向——新的硬编码值会重新出现在令牌系统旁边，使令牌系统失去意义。
令牌层级体系
在设计令牌层级体系中，语义令牌代表什么？
课程回顾
设计令牌是有名称的原子值（颜色、间距、排版），构成设计系统的词汇。它们在设计与代码之间建立了唯一事实来源。三层体系——原始层（原始值）、语义层（含义）和组件层（具体用法）——支持多主题和多品牌。Figma 变量与 W3C 设计令牌规范正推动设计与工程之间的同步。令牌治理可以确保系统长期保持一致。
常见问题解答
「什么是设计令牌，以及它们为何重要」课时是免费的吗？
是的 — 「什么是设计令牌，以及它们为何重要」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「什么是设计令牌，以及它们为何重要」这节课中我会学到什么？
将设计令牌定义为颜色、间距、排版及其他设计决策的唯一事实来源 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「什么是设计令牌，以及它们为何重要」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。