Figma Variables to Tailwind
Paste what your plugin or the Figma REST API produced and get Tailwind v4 custom properties, with colours converted to OKLCH. Three export shapes are recognised; anything else is reported rather than guessed at.
Exported variables
Tailwind v4 @theme
Paste an export and the theme block appears here. Slashes in a Figma name become nesting, so colour/brand/500 turns into --color-brand-500.
Frequently asked
Which export formats does this read?
Three. A Figma REST API response from the local variables endpoint, a W3C design-tokens file with $value and $type (which is what Tokens Studio and most plugins produce), and a plain nested object of names and values. If none of them match, the tool says so instead of producing a half-correct theme.
What happens to slashes in a variable name?
They become nesting. Figma's colour/brand/500 turns into --color-brand-500, which is exactly the name Tailwind v4 needs in order to generate bg-brand-500. Spaces and punctuation are stripped for the same reason — a custom property name cannot contain them.
Why are some variables missing from the output?
Almost certainly aliases. A Figma variable can point at another variable rather than holding a value, and that link only resolves inside the file. Those are skipped rather than exported with a meaningless id. Resolve them in Figma first, or set an explicit value for the mode you are exporting.
My file has light and dark modes. What do I do?
Convert them one at a time. Tailwind expects one block per mode: the light values in :root and the dark ones under .dark. The tool shows the modes it found and lets you switch between them, so you can copy each block into the right place.
Why convert colours to OKLCH?
Because that is what Tailwind v4's own palette uses, and a theme that mixes hex with oklch is harder to reason about when you start deriving shades. The conversion is lossless for anything inside the sRGB gamut, so the colour you picked in Figma is the colour you get.