figma_export_tokens
Exports Figma variables to design token files for CSS, Tailwind, SCSS, TypeScript, JSON, and Tokens Studio, supporting config-driven sync with your codebase.
Instructions
Export Figma variables to design token files in your codebase. Bidirectional with figma_import_tokens — together they replace Style Dictionary and Tokens Studio's export pipeline for the popular styling methods.
FULLY-IMPLEMENTED OUTPUT FORMATS:
• dtcg — W3C DTCG JSON. Canonical pivot format. Round-trip safe via $extensions["figma-console-mcp"].
• css-vars — CSS custom properties with mode-aware selectors (:root, .dark, [data-theme=...]).
• tailwind-v4 — Tailwind v4 @theme inline block. Token-to-namespace mapping (color/, spacing/, radius/*, etc.) generates Tailwind utility classes.
• tailwind-v3 — tailwind.config.js theme.extend object grouped under Tailwind's theme keys (colors, spacing, fontFamily, etc.).
• scss — $var: value; declarations. Multi-mode emits a primary variable + a mode-keyed SCSS map for runtime access.
• ts-module — export const tokens = { ... } as const with derived Tokens type. Multi-mode tokens emit as { Light: ..., Dark: ... } objects.
• json-flat — flat key-value JSON ({"ds-color-primary": "#4085F2"}) for custom build scripts.
• json-nested — nested object JSON mirroring the token path tree.
• style-dictionary-v3 — SD v3 source format with bare value/type keys (back-compat for existing SD users).
• tokens-studio — Tokens Studio multi-file layout ($themes.json + $metadata.json + per-set files). Preserves Figma collection/mode bindings for round-trip with the TS plugin.
ZERO-ARG USAGE: With a tokens.config.json at your project root, just call the tool with no args — it picks up source dir, output formats, modes, prefix, etc. from config. See the response's suggestedScaffold payload when no config is detected — present it to the user, write the scaffold via your file tools, then call again.
WRITE SAFETY: Export REPLACES the contents of each target file with the current Figma state — it does not merge into it. Under the default strategy: "merge" the tool refuses to write (and changes nothing) when overwriting an existing DTCG file would delete tokens it does not manage: tokens added by hand, or tokens from collections outside this export. It also refuses when a requested collectionId is not in the file it read, or when the export is empty — both usually mean a different file is active in Figma than you intended. Variables deleted in Figma are removed from the file as normal. Use dry-run to preview, replace to overwrite unconditionally. Generated files record the Figma file they came from (a Source: Figma file <key> header line; figmaFileKey in DTCG), and the default strategy also refuses to overwrite a file that was generated from a DIFFERENT Figma file. Plain-JSON formats (json-flat, json-nested, style-dictionary-v3, tokens-studio) cannot carry that record — pin figmaFile in tokens.config.json for a hard guarantee. Every response includes source (the Figma file name/key the data was read from) — check it.
DTCG DIALECT (dtcgDialect, applies to dtcg/json-flat/json-nested outputs): legacy (default): hex-string colors, maximum compatibility (Style Dictionary v4, Tokens Studio). 2025: DTCG 2025.10 object colors/dimensions (Style Dictionary v5+). figma_import_tokens accepts BOTH dialects regardless of this setting.
ROUND-TRIP SAFETY: Figma variable IDs are preserved in DTCG $extensions["figma-console-mcp"] so renames on either side don't create duplicates. The same metadata enables non-destructive incremental sync via figma_import_tokens. Variable scopes (when non-default) and per-platform codeSyntax (when set) are stashed there too and round-trip through import.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| modes | No | Modes to include in the output. 'all' (default) exports every mode in every collection. Pass an array like ['Light', 'Dark'] to filter. | |
| scope | No | Whether to export the entire file's variables ('file', default) or just specific collections via collectionIds. | |
| format | No | Specific output format to emit. When omitted, formats come from tokens.config.json's generated.formats list. Common starting choices: 'dtcg' for the canonical JSON, 'css-vars' for runtime CSS custom properties, 'tailwind-v4' for Tailwind v4 @theme blocks. | |
| prefix | No | Prefix prepended to every output token name (e.g. 'ds-', 'al-'). Only affects formatters that emit named tokens — DTCG and JSON outputs use unmodified paths. | |
| remBase | No | Base font size in pixels for px→rem conversion. Default: 16. | |
| sizeUnit | No | Unit for dimension tokens. Default: 'rem' for web outputs, 'pt' for iOS, 'dp' for Android. | |
| strategy | No | How to handle existing output files. Export always replaces a target file's contents with the current Figma state — it does not merge token-by-token. 'merge' (default) is the SAFE mode: it refuses to write, leaving the file untouched, if overwriting an existing DTCG file would delete tokens the export does not manage (hand-added tokens, or tokens from collections not included in this export). 'replace' overwrites unconditionally. 'dry-run' reports what would be written without writing. | |
| configPath | No | Explicit path to a tokens.config.json file. When omitted, the tool walks up from cwd looking for one — typical case is zero-arg. | |
| outputPath | No | Where to write the output. Treated as a DIRECTORY by default — each generated file (e.g. tokens.tokens.json, tokens.css) is written inside it and the directory is created if missing. Treated as a FILE when it is an existing file or ends in a token-file extension (.json, .css, .scss, .less, .ts, .js): the export must then produce exactly ONE file (one format, no splitByMode/splitByCollection — combine with collectionIds to re-export a single collection into e.g. typography.tokens.json), which is written at exactly that path, overwriting it. A file path combined with a multi-file export is rejected with an explanatory error before anything is written. End the path with '/' to force directory handling. Relative paths resolve against the project root (the directory containing tokens.config.json) or cwd if no config. When omitted, the output is returned inline in the response (suitable for the AI to inspect or write via its own file tools). | |
| colorFormat | No | Color value format in the output. Default: 'hex'. Use 'oklch' for modern Tailwind v4 charts. | |
| dtcgDialect | No | DTCG dialect for dtcg/json-flat/json-nested outputs. legacy (default): hex-string colors, maximum compatibility (Style Dictionary v4, Tokens Studio). 2025: DTCG 2025.10 object colors/dimensions (Style Dictionary v5+). Other formats (css-vars, scss, tailwind, ts-module) render final code and ignore this option. | |
| splitByMode | No | Emit one file per mode (e.g. tokens-light.css, tokens-dark.css). Default false (single file with all modes). | |
| collectionIds | No | Specific Figma collection IDs to export. Required when scope is 'collection'. Use figma_get_variables to enumerate available collections. | |
| resolveAliases | No | If true, alias references are resolved to literal values in the output. Default is false for JSON formats (preserves alias semantics) and true for CSS/SCSS/Tailwind/etc. (which can't natively express aliases). | |
| splitByCollection | No | Emit one file per Figma collection. Default false. Useful when collections map to different runtime themes. |