Generate design-token JSON for Figma workflows — Tokens Studio plugin format and the W3C DTCG draft format — from a brand color, with radius and spacing tokens included.
Settings
Generated locally in your browser — your settings and results never leave this page.
Bridging code tokens and Figma
Design drifts from code when each maintains its own colors. This generator emits the same token system as its code-side siblings, in the two JSON dialects Figma workflows consume: Tokens Studio format ({value, type} — the widely-used Figma plugin) and the W3C DTCG draft ({$value, $type} — the emerging interchange standard).
Honest scope
“Figma-compatible” here means those formats. Figma has no single native token file format — its Variables feature imports via plugins or the REST API. This page says so rather than implying a magic .fig import; the Tokens Studio path is: plugin → Tools → Load from file/JSON.
Worked example (Tokens Studio)
{
"color": {
"brand": {
"500": { "value": "#6366f1", "type": "color" }
}
},
"borderRadius": {
"md": { "value": "8px", "type": "borderRadius" }
}
}What is included
- An 11-shade OKLCH-generated color scale under your group name, three radius tokens from your base, five spacing steps — a Variables starter matching the Design Token Generator‘s code exports from the same inputs.
Limitations
- Composite tokens (typography, shadows) and theme sets are Tokens Studio features beyond this starter — add them in the plugin after import.
- DTCG is a draft spec; this export tracks it for color and dimension types and is labeled accordingly.
How to use the Figma Token JSON Generator
- Pick the brand color and name the token group.
- Set the radius base.
- Choose the format: Tokens Studio (Figma plugin) or W3C DTCG draft.
- Download the JSON and import it — in Tokens Studio: Tools → Load from file.
Frequently asked questions
Is this JSON directly importable into Figma?
Into Figma via the Tokens Studio plugin, yes — that is the {value, type} format this tool emits. Figma itself has no single native token file format; its Variables import goes through plugins or the REST API. The tool states this scope honestly rather than claiming generic "Figma compatibility".
What is the difference between the two formats?
Tokens Studio uses value/type keys and its own type names (borderRadius, spacing); the W3C DTCG draft uses $value/$type with standard types like color and dimension. Same data, different dialects — pick whichever your pipeline consumes.
What tokens are included?
An 11-shade color scale under your group name, three radius tokens derived from your base, and five spacing tokens — enough to bootstrap a Figma variables setup that matches your code tokens from the Design Token Generator.
Can I round-trip these tokens back to CSS?
Yes — the same inputs in the Design Token Generator produce matching CSS variables, SCSS and Tailwind formats, so design and code stay on one source of truth.
Turn a palette into design tokens
The same palette as named tokens, as CSS custom properties, and as a Figma token file.
- Color Palette GeneratorProduce the palette the tokens will describe.
- Semantic Color Token GeneratorGive the colours role names rather than colour names.
- Design Token GeneratorBuild the token set from those roles.
- CSS Variables GeneratorEmit the tokens as CSS custom properties.
- Figma Token JSON Generator you are hereEmit the same tokens in the format Figma reads.
