From Figma Variables to Tailwind in one pipeline
How the tokens move from Figma to JSON to CSS without hand-copying a single value.
Design tokens only help if both sides read the same values. Here is the pipeline we use.
1. Variables in Figma
Colours, radius and spacing are Figma variables with Light and Dark modes.
2. Export to JSON
The export follows the W3C design-tokens format ($type, $value). Download it from the Tokens page.
3. Generate CSS
tokens.css defines the variables, and theme.css maps them into Tailwind with @theme inline. Components only ever use the semantic names.
Get new posts by email