Frontend Academy · 课时

使用 Style Dictionary 定义设计令牌

在 JSON 中定义颜色、间距和字体排版令牌，并使用 Style Dictionary 将其转换为 CSS 变量、JS 常量或 iOS/Android 格式。

使用 Style Dictionary 定义设计令牌 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是设计令牌

设计令牌是设计系统中命名的基础值：颜色、间距、字体大小、边框圆角和阴影。它们是唯一事实来源——每个组件都根据它们派生样式。

设计令牌为何重要

令牌将设计决策与实现解耦。只需将 color.primary 从蓝色改为绿色，所有使用它的组件都会更新。它们还可以让您将同一套设计交付到 Web、iOS 和 Android。

令牌存储

将令牌存储为 JSON 或 YAML——这是一种可供跨平台工具使用的中立格式。JSON 最为常见。

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary（Amazon）是事实上的设计令牌构建工具。它读取令牌，并将其转换为多种输出格式：CSS 变量、SCSS、JS 常量、iOS Swift 和 Android XML。

npm install -D style-dictionary

配置

创建 style-dictionary.config.js，描述输入令牌和输出平台。

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

运行构建

运行 CLI，生成所有平台的输出。

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

生成的 CSS 输出

使用一致命名方案的 CSS 变量（带命名空间的短横线命名法）。

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

生成的 JS 输出

供 JS/TS 代码使用的 JS 对象（Tailwind 配置、CSS-in-JS）。

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

令牌命名约定

优先使用语义名称（color.primary），而不是字面名称（color.blue-500）。语义令牌让您可以更改值而无需重命名。两层系统：字面调色板（blue-500）→ 语义别名（primary）。

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

使用令牌实现主题

使用不同的输入构建多个平台，以支持主题（浅色/深色）——名称相同，值不同。

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

令牌类别

常见类别包括：颜色、间距、排版（字体系列、大小、行高、字重）、边框（圆角、宽度）、阴影、过渡（持续时间、缓动）、z-index 和断点。

令牌管理工具

除了 Style Dictionary，还有：Tokens Studio（Figma 插件）、Specify 和 Supernova。它们可以让设计师在 Figma 中管理令牌，并自动同步到代码库。

快速检查

使用 Style Dictionary 配合设计令牌的主要好处是什么？

回顾：设计令牌

令牌是命名的基础值（颜色、间距、字体）——设计系统的唯一事实来源。以 JSON 格式存储。Style Dictionary 可将其转换为 CSS 变量、JS、iOS 和 Android 格式。优先使用语义命名（primary），而不是字面命名（blue-500）。两层结构：调色板 → 语义别名。通过单独构建支持主题。通过 Tokens Studio 从 Figma 同步。

常见问题解答

「使用 Style Dictionary 定义设计令牌」课时是免费的吗？

是的 — 「使用 Style Dictionary 定义设计令牌」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「使用 Style Dictionary 定义设计令牌」这节课中我会学到什么？

在 JSON 中定义颜色、间距和字体排版令牌，并使用 Style Dictionary 将其转换为 CSS 变量、JS 常量或 iOS/Android 格式。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 Style Dictionary 定义设计令牌」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy