导出与代码

你的令牌不必只待在 Figma 里。从网页应用按代码库实际使用的格式导出（无需插件），或者让构建流程和 AI 工具以代码形式拉取最新令牌。

从网页导出

在项目列表中，打开项目卡片的 ⋯ 菜单并选择 导出；或者在项目内右键点击左侧边栏中的集合（或表格中的某一行），选择 导出此集合。会打开一个包含以下选项的对话框：

  • 范围 — 要导出的集合：勾选 所有集合，或逐个选择。从某个集合打开时，该集合默认已勾选。
  • 格式 — 下列六种之一。
  • 将引用解析为值 — 把 {Primitive/blue/500} 这样的别名替换为最终值。平台代码格式始终会解析，因此该复选框对它们保持勾选且不可更改。
导出对话框 — 格式下拉菜单已展开，列出 DTCG、JSON、CSV、CSS、SwiftUI 和 Jetpack Compose
导出对话框 — 格式下拉菜单已展开，列出 DTCG、JSON、CSV、CSS、SwiftUI 和 Jetpack Compose
格式输出
DTCG（.tokens.json）W3C 设计令牌社区组（DTCG）格式
JSON原始变量，每个令牌一条
CSV电子表格——每个变量一行，每个模式一列
CSS自定义属性——默认模式在 :root，其他模式在 [data-theme="…"]
SwiftUI每个集合一个类型，每个模式一个静态实例
Jetpack ComposeKotlin——每个集合一个类，每个模式一个值

可直接粘贴的平台代码

选择 CSS、SwiftUI 或 Jetpack Compose，就能得到可直接放进应用的代码。转换在服务器上进行，且是确定性的——相同的令牌总会产生相同的字节，因此差异清晰、便于缓存。含有 light 和 dark 模式的集合输出如下：

/* CSS custom properties */
:root {
  --colors-button-background: #18181b;
  --colors-radius-md: 8px;
}
[data-theme="dark"] {
  --colors-button-background: #fafafa;
}
// SwiftUI — one instance per mode
struct ColorsTokens {
  let buttonBackground: Color
  let radiusMd: CGFloat
  static let light = ColorsTokens(buttonBackground: Color(vjHex: 0x18181B), radiusMd: 8)
  static let dark  = ColorsTokens(buttonBackground: Color(vjHex: 0xFAFAFA), radiusMd: 8)
}
// Jetpack Compose (Kotlin)
class ColorsTokens(val buttonBackground: Color, val radiusMd: Dp)
val ColorsTokensLight = ColorsTokens(buttonBackground = Color(0xFF18181B), radiusMd = 8.dp)
val ColorsTokensDark  = ColorsTokens(buttonBackground = Color(0xFFFAFAFA), radiusMd = 8.dp)

引用始终会解析为最终值；无法解析的会保留为注释，绝不会编造数值。

重新导入令牌

项目卡片的 ⋯ 菜单中还有 导入。拖入 JSON 或 DTCG 文件后，会在创建任何内容之前显示预览——集合、变量和模式的数量以及警告。确认后会作为新集合添加（颜色解析较宽松：3 位或 6 位十六进制、rgb()、hsl() 都可以）。这次变更会以导入的形式记入历史。

无法表示的值——排版、阴影等复合令牌，单位不是 px 的尺寸，无法读取的颜色，以及与类型不符的值——不会被猜测，而是直接跳过；预览会显示跳过的数量和名称。再次导入同一文件会再添加一个新集合。

通过 API 与 MCP 拉取

对于 CI 流水线和 AI 编程工具，不必手动导出——直接拉取。同样的平台格式可通过 REST API 的 ?format=css|swift|compose 获取，@variablejar/mcp 服务器提供 get_tokens 工具，让 IDE 中的智能体以代码形式获取最新令牌。一个项目 API 令牌即可同时用于两者。