Figma Tailwind Converter
Import your own Figma file and turn any layer into clean Tailwind markup — every spacing, colour and radius snapped to the closest token, with the off-scale values flagged so you decide what belongs in your theme.
What you get
Real conversion — reads your Figma file directly; your token is never stored.
- Reads your real Figma files — paste a file or frame link and a personal access token
- Exports HTML, React (with cva variants), Vue, a Tailwind theme config and W3C design tokens
- Every mapping is logged as exact, approximate or arbitrary, so nothing is a silent guess
- Flags WCAG contrast failures, missing alt text and non-semantic buttons as you inspect
Three steps to production code
No plugin to install and nothing to configure — it runs in the browser and reads your file directly from Figma.
Paste your Figma link
A whole file or a single frame — copy the link straight from Figma’s address bar. Linking one frame keeps big files fast.
Add a read-only token
A personal access token lets us read the file. It is used for one request, never logged, and only saved in your browser if you ask.
Take the code
Pick any layer and copy its Tailwind markup as HTML, React or Vue — or export the whole frame as a zip with a theme config and tokens.
Built to be honest about its output
A converter is only useful if you can trust what it produced. Every mapping is shown, labelled and reversible.
Snapped to your scale
Spacing, radii and type are matched to the nearest Tailwind step. Anything that misses the scale becomes an arbitrary value and is labelled as one, so nothing is a silent guess.
Colours resolved to the palette
Fills and strokes map to the closest palette colour, with off-palette values kept as exact hex rather than being rounded into something you did not choose.
Auto-layout becomes flexbox
Figma’s auto-layout, alignment, gaps and padding translate into flex utilities — including per-side padding when the sides differ.
Variants become cva
A component set with variants generates a class-variance-authority block, with variant names normalised into valid, unique identifiers.
Accessibility checks as you go
Text that fails WCAG AA contrast is flagged with the real ratio, alongside images whose layer names would produce meaningless alt text.
Every decision is logged
The conversion log records each mapping as exact, approximate or arbitrary, so you can see precisely why a class was chosen.
Five outputs from one layer
Copy a single snippet, or export the whole frame as a zip containing each file properly named and ready to drop into a project.
- HTMLPlain markup with sorted class lists.
- ReactA typed component, with cva variants where they exist.
- VueA single-file component template.
- Themetailwind.config.js, or a v4 @theme block.
- TokensColours and type in W3C design-token JSON.
About your Figma token
Figma’s API cannot be called from a browser, so the request is made from our server. That is the only thing your token is used for.
- Used for a single read request, then discarded
- Never written to our database or our logs
- Only saved in your own browser if you tick “remember”
- A read-only token is all the tool ever needs
You can revoke a personal access token at any time from Figma’s account settings, which immediately stops it working here.
Before you start
What the converter accepts, what it gives back, and how to get the cleanest result out of it.
Supported input & output
Accepts
- Figma file links — figma.com/design/…, /file/… or /proto/…
- A single frame: keep the ?node-id=… on the end to import just that frame
- A bare file key, if you would rather not paste the whole URL
- A read-only personal access token (figd_…) — nothing broader is needed
Good to know
- Very large files are capped at 4,000 layers and 12 levels deep — the tool tells you when it truncated
- Classes are snapped to the nearest Tailwind step; anything off-scale becomes an arbitrary value and is labelled
- Only solid fills convert — gradient and image fills are skipped, so those backgrounds will not carry over
- Bundled sample files let you try everything before you fetch a token
Tips for best results
The converter reads what your file actually says. A tidy layer tree converts far more cleanly than a pixel-perfect but loosely built one.
- 1Use auto-layoutAuto-layout frames become flex utilities with real gaps and padding. Absolutely-positioned layers have far less structure to translate.
- 2Link one frame, not the whole fileSelecting a frame and copying its link keeps the import well inside the size caps, so nothing gets truncated.
- 3Name your layersLayer names become component and alt text. “Hero image” reads properly; “Rectangle 47” gets flagged as meaningless.
- 4Build your styles on a scaleSpacing and type that already follow a consistent scale map to exact tokens. Ad-hoc values still convert, just as arbitrary ones.
Ready to convert a design?
Open the workspace and paste a Figma link — or try one of the built-in sample files first if you would rather look around before fetching a token.