Token Exporter
Figma Variables are powerful, but getting them into code is tedious. The Token Exporter module generates production-ready output directly from your variable collections — with validation, dependency detection, and multi-mode support built in.
Export Formats
| Format | Extension | Use Case |
|---|---|---|
| PTB JSON | .ptb.tokens.json | CalibrateDS CLI — feeds ptb generate-tokens and AI context |
| CSS Variables | .tokens.css | Standard web projects (var(--color-brand)) |
| JS Tokens | .tokens.js | JavaScript/Node projects |
| React TS | .tokens.tsx | React + TypeScript with typed token objects |
| Tailwind | .tailwind.tokens.js | Tailwind CSS theme.extend configuration |
| Style Dictionary | .style-dictionary.tokens.json | Standard design token pipelines (W3C format) |
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.
Next Steps
See how tokens flow into the CLI in Setup & Scanning, or learn the full token resolution model in Token Resolution.