什么是设计令牌
了解设计令牌是什么，以及它们为何是可扩展设计系统的基础。
什么是设计令牌 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
定义
设计令牌是以命名变量形式存储设计决策（颜色、间距、排版和阴影）的值，并采用与技术无关的格式。它们连接设计工具与代码，确保不同平台之间的一致性。
令牌为何重要
如果没有令牌，值就会重复出现在 CSS、iOS 和 Android 代码库中。单一的令牌事实来源意味着，修改品牌颜色即可同时更新每个平台。
令牌类别
常见类别包括：颜色（品牌色、语义色、中性色）、排版（字体系列、大小、粗细、行高）、间距（4px 网格）、圆角、阴影和动画（时长、缓动）。
令牌格式
令牌以 JSON、YAML 或 W3C 设计令牌格式存储。每个令牌都有名称、值、类型和可选的描述。转换过程会将它们转换为特定平台的输出。
全局令牌与别名令牌
全局令牌是原始值：color-blue-500: #3b82f6。别名令牌以语义方式引用全局令牌：color-action-primary: {color-blue-500}。组件应引用别名令牌，而不是原始值。
CSS 中的令牌
CSS 自定义属性是网页令牌的自然输出形式。名为 spacing-4 的令牌会变成 --spacing-4: 1rem，并在整个样式表中通过 margin: var(--spacing-4) 使用。
设计工具集成
Figma Tokens 插件和 Tokens Studio 可在 Figma 与代码仓库之间同步设计令牌。设计师和开发人员使用相同的令牌词汇，从而消除交接时的转换错误。
令牌生命周期
令牌会不断演进：通过提供迁移映射来弃用旧值，同时不破坏使用方。令牌软件包的语义化版本控制会向使用团队发出破坏性变更的信号。
多平台令牌
同一份令牌 JSON 可以为网页输出 CSS 变量、为 iOS 输出 Swift 常量、为 Android 输出 XML 资源。一个定义文件即可消除不同平台在设计决策上的偏移。
逐步采用令牌
先从颜色和间距令牌开始。逐个文件替换硬编码值。在代码库中搜索原始十六进制值和像素字面量，以找出剩余的硬编码设计决策。
令牌与主题化
别名令牌支持主题化：切换别名所指向的全局令牌，即可在不修改组件代码的情况下改变整个主题。浅色、深色和品牌主题都源自同一层别名。
知识检查
全局令牌和别名令牌有什么区别？
总结
设计令牌是以与平台无关的格式编码设计决策的命名变量。全局令牌保存原始值，别名令牌赋予这些值语义。两者共同支持一致、易维护的多平台设计系统。
常见问题解答
「什么是设计令牌」课时是免费的吗？
是的 — 「什么是设计令牌」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「什么是设计令牌」这节课中我会学到什么？
了解设计令牌是什么，以及它们为何是可扩展设计系统的基础。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「什么是设计令牌」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。