# Figma Tokens 导出

粘贴 Figma / Tokens Studio 变量 JSON，导出为 Tailwind、shadcn CSS 变量、Style Dictionary 或 SCSS。通过类型推断保留颜色、间距与字体 token。

> 标准页面: https://elysiatools.com/zh/tools/figma-tokens-export

- **分类:** Design

- **关键词:** figma, 设计 token, tokens studio, tailwind, shadcn, style dictionary, w3c dtcg, scss, css 变量, 主题, 设计系统, 变量导出, token 转换

## 概述

粘贴 **Figma / Tokens Studio 变量 JSON**，导出为四种流行目标之一：

- **Tailwind** `theme.extend`——自动映射 `color/*` → `colors`、`spacing/*` → `spacing`、`fontSize/*` → `fontSize`、`fontFamily/*` → `fontFamily` 等。嵌套路径变成嵌套对象，必要时用 `DEFAULT` 键。
- **shadcn/ui CSS 变量**——HSL 空格分隔约定（`--background: 0 0% 100%`），开箱即配合 Tailwind 的 `hsl(var(--x))` 包装。
- **Style Dictionary / W3C DTCG**——重新输出规范的 `{ $value, $type }` 形状，作为通用交换格式。
- **SCSS 变量**——`$color-brand-primary: #2563eb;` 风格。

**接受的输入形态**
- Tokens Studio / W3C：`{ color: { brand: { $value: "#fff", $type: "color" } } }`
- 旧版 Tokens Studio：`{ color: { brand: { value: "#fff", type: "color" } } }`（无 `$`）
- 纯嵌套值：`{ color: { brand: "#fff" } }`
- Figma REST API rgba 对象：`{ r: 0.5, g: 0.3, b: 0.9 }`

**类型推断**——当 token 没有显式 `$type` 时，工具会推断：`#hex` / `rgb()` / 命名色 → color；带 `px/rem/em/%` 单位 → dimension；纯数字 → number；其余 → string。**颜色格式**选项把每个颜色 token 重新渲染为 `hex`、`rgb()`、`hsl`（shadcn 风格空格分隔）或 `hsl()` CSS，无论原值如何书写。

## 输入项

- **Figma tokens JSON** (textarea): Figma variables or Tokens Studio JSON. Accepts $value/$type, value/type, plain nested values, or Figma REST rgba objects.
- **目标格式** (select): Which target format to export the tokens to.
- **颜色格式** (select): How to re-render color tokens in the output. HSL space-separated is the shadcn convention.

## 适用场景

- 当设计师通过 Figma Variables 或 Tokens Studio 交付了 JSON 格式的设计系统，需要将其快速集成到前端项目中时。
- 当需要将设计 Token 转换为 shadcn/ui 兼容的 HSL 空格分隔 CSS 变量，以实现动态主题切换时。
- 当需要将混乱的嵌套 Token 统一规范化为 Style Dictionary (W3C DTCG) 标准格式或 SCSS 变量时。

## 工作原理

- 在输入框中粘贴 Figma 导出的变量 JSON，支持 Tokens Studio 规范、纯嵌套键值对或 Figma REST API 的 rgba 对象。
- 选择目标输出格式（如 Tailwind theme.extend、shadcn CSS 变量、Style Dictionary 或 SCSS）以及所需的颜色输出格式（如 Hex、RGB 或 HSL）。
- 工具自动解析并推断未声明类型的 Token（如根据单位推断间距，根据格式推断颜色），并实时生成转换后的代码。

## 使用案例

- Tailwind 项目快速配置：将 Figma 导出的颜色和间距 Token 一键转换为 Tailwind CSS 的 theme.extend 配置文件。
- shadcn/ui 主题定制：将设计系统中的品牌色转换为 shadcn 规范的 HSL 变量，直接粘贴至全局 CSS 文件中。
- 跨平台设计系统同步：将不规范的 JSON 转换为 Style Dictionary 标准格式，以便在 Web、iOS 和 Android 平台间共享。

## 常见问题

### 支持哪些输入 JSON 格式？

支持 Tokens Studio/W3C 标准格式（含 $value/$type）、旧版格式（含 value/type）、纯嵌套键值对以及 Figma REST API 的 rgba 颜色对象。

### 它是如何推断未声明类型的 Token 的？

工具会根据值进行推断：十六进制或 RGB 格式推断为颜色，带 px/rem/% 等单位的值推断为尺寸，纯数字推断为数值，其余推断为字符串。

### 导出的 shadcn 格式有什么特别之处？

它会将颜色转换为 HSL 空格分隔的格式（例如 221 83% 53%），以便直接配合 Tailwind 的 hsl(var(--variable)) 语法使用。

### 导出的 Tailwind 配置会自动映射分类吗？

是的，工具会自动将 color/* 映射到 colors，spacing/* 映射到 spacing，fontSize/* 映射到 fontSize 等，并生成嵌套对象。

### 是否支持将颜色统一转换为特定的格式？

支持。您可以通过“颜色格式”选项，将所有颜色 Token 统一输出为 Hex、RGB、HSL（空格分隔）或标准 HSL CSS 格式。

## 相关工具

- [灰度转换器](https://elysiatools.com/zh/tools/color-grayscale-converter): 将颜色转换为灰度，支持多种转换方法和强度控制
- [颜色 Token 级联生成器](https://elysiatools.com/zh/tools/color-token-cascade-generator): 输入一个主色 Hex，自动生成主色、辅助色、中性色和语义化设计 token，并输出 CSS 变量与 Style Dictionary JSON
- [ECharts 主题 Token 抽取器](https://elysiatools.com/zh/tools/echarts-theme-token-extractor): 从 ECharts 主题 JSON 抽取设计 token——颜色、数字、字号与字符串——并直接导出到你的设计系统。粘贴一个主题对象（即通过 echarts.init(dom, themeName) 注册的那种），工具遍历每个叶子节点，为每个颜色（可选地将命名色/rgb 规范化为 hex）、间距数字、字号与字符串打标，然后输出干净的 CSS 变量、Tailwind theme.extend 配置、Style Dictionary tokens.json 或 SCSS 变量。在 ECharts 可视化主题与 Figma/CSS/Tailwind 设计 token 之间架桥，无需逐个手抄。
- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
- [API 延迟预算规划器](https://elysiatools.com/zh/tools/api-latency-budget-planner): 规划并可视化 API 延迟预算。输入 P99 目标（如 ≤ 300ms）和各阶段分配（DNS、TCP、TLS、TTFB、Processing、Network），查看实时瀑布图、预算占用和超标告警。可选粘贴 OpenTelemetry 或 Datadog trace，反推基于真实测量的分配建议。
- [CSV 转数据库迁移规划器](https://elysiatools.com/zh/tools/csv-to-database-migration-planner): 根据 CSV 数据推断关系型 schema，并为 PostgreSQL、MySQL、SQLite 或 SQL Server 生成建表和 ALTER 迁移计划
- [JSONata 查询转换工作室](https://elysiatools.com/zh/tools/jsonata-query-transform-studio): 预览 JSONata 风格查询与转换，支持多数据对比，并导出 JSON、CSV、YAML 或 Markdown。
- [JWK 生成与解析器](https://elysiatools.com/zh/tools/jwk-generator): 生成 RSA、EC（P-256/P-384/P-521/secp256k1）与 OKP（Ed25519/Ed448/X25519/X448）的 JSON Web Key，或解析已有 JWK 以查看参数、指纹与元信息

## 示例

- [JWT 示例](https://elysiatools.com/zh/samples/jwt-samples): 从基础令牌结构到高级安全实现的全面JWT示例
- [Postman Collections - API 测试](https://elysiatools.com/zh/samples/postman-collections): 全面的 Postman collection 示例，包括 API 测试、自动化脚本、环境变量、mock 服务器和 REST API 的高级测试模式
- [Terraform Plan JSON 样本](https://elysiatools.com/zh/samples/terraform-plan-json-samples): 用于依赖可视化和变更审查的 Terraform plan JSON 文件样本，贴近 terraform show -json 输出结构
- [分布式追踪示例](https://elysiatools.com/zh/samples/distributed-tracing-samples): 使用 Jaeger、OpenTelemetry 和其他现代可观测性工具的综合分布式追踪示例，适用于微服务架构