Token Exporter / Importer

Figma Variables are powerful, but getting them into code is tedious. The Token Exporter / Importer module generates production-ready output directly from your variable collections — with validation, dependency detection, and multi-mode support built in. And with Figma Transfer, it migrates entire token systems between Figma files with alias chains kept live.

Export Formats

FormatExtensionUse Case
PTB JSON.ptb.tokens.jsonCalibrateDS CLI — feeds ptb generate-tokens and AI context
CSS Variables.tokens.cssStandard web projects (var(--color-brand))
JS Tokens.tokens.jsJavaScript/Node projects
React TS.tokens.tsxReact + TypeScript with typed token objects
Tailwind.tailwind.tokens.jsTailwind CSS theme.extend configuration
Style Dictionary.style-dictionary.tokens.jsonStandard design token pipelines (W3C format)
CSV.tokens.csvRaw variable data with resolved alias names — opens directly in Google Sheets or Excel

Validation Report

Before exporting, the plugin runs a full validation pass and surfaces:

  • Unresolved aliases — a token references a variable that doesn't exist
  • Circular references — token A references token B which references token A
  • Missing mode values — a token has a value in Light mode but not Dark mode
  • Duplicate code names — two tokens would generate the same property name after transformation

Validation issues are shown inline with severity levels. You can export anyway or fix first.

Dependency Detection

If you select the "Brand Colors" collection but those colors reference a "Primitives" collection you didn't include, the plugin detects the dependency chain and warns you. A one-click Add Required button includes the missing collection automatically.

Multi-Mode Support

The exporter fully supports Light/Dark themes, responsive breakpoints, and any custom modes you've defined. Each mode gets its own output block or file (depending on format). The default mode is used as the fallback when a mode value is missing.

Preview Before Export

Before downloading, a live code preview updates as you change format or collection selections. Verify the output looks right, then:

  • Download as File — saves to your downloads folder
  • Copy to Clipboard — paste directly into your codebase

PTB JSON Format

When you export using the PTB JSON format, the output is compatible with the CalibrateDS CLI's token pipeline. Place the file in your project and run:

ptb generate-tokens

The CLI reads the token file, resolves aliases, and generates platform-specific token outputs (CSS, TypeScript) plus embeds token bindings into every component's ComponentContext for AI implementation.


Figma Transfer — migrate tokens between files

Every export format above resolves aliases to concrete values, because code needs values. Figma Transfer is different: a dedicated round-trip format for moving a token system from one Figma file to another with the alias structure intact.

  • Aliases stay live. VARIABLE_ALIAS references are preserved verbatim — never flattened to static values. Cross-collection chains (e.g. mapped → alias → brand) survive the transfer and remain live, editable aliases in the target file.
  • Everything travels. Collections, modes, and variables are all captured in one Transfer JSON.

The Import Tab

Drop a Transfer JSON onto the Import tab in the target file to rebuild everything in one click:

  • Two-pass build — every variable is created first, then all alias links are wired in a second pass, so declaration order in the file never matters.
  • External library detection — variables that reference published Figma libraries not included in the export are detected before the build and clearly flagged, with a tip to connect the missing libraries via the Figma Assets panel.
  • Collections, modes, and values land exactly as they were in the source file.

Use it for: duplicating a design system into a client file, splitting a monolithic file, or versioning a token system across team files — without an external tool and without losing the alias graph.


Next Steps

See how tokens flow into the CLI in Setup & Scanning, or learn the full token resolution model in Token Resolution.