Figma → Tailwind Design Kit
Export your Figma design tokens — colours, typography, spacing, shadows — and generate a matching Tailwind CSS config with one command. Close the gap between your design system and your codebase.
Export your Figma design tokens — colours, typography, spacing, shadows — and generate a matching Tailwind CSS config with one command. Close the gap between your design system and your codebase.
Open for personal & commercial use
What is Figma → Tailwind Design Kit?
The gap between design and development is expensive. Designers define a colour palette in Figma, developers hard-code slightly different hex values in Tailwind. Type scales drift between Figma frames and CSS. Spacing tokens get renamed. The result is a living inconsistency between what was designed and what was built — caught in design reviews, fixed one-by-one, and broken again next sprint. The Figma → Tailwind Design Kit closes that gap. A Figma plugin exports your design tokens (colours, typography, spacing, border radius, shadows) as a structured JSON file. A Node.js CLI reads that JSON and generates a tailwind.config.ts with all your tokens mapped to Tailwind's theme extension format. Run it once to bootstrap, or add it to your design system workflow to stay in sync. Free, zero dependencies on the CLI side, and 1,450+ teams use it in their workflow.
Everything in the package.
Figma Plugin
Figma plugin that extracts colour styles, text styles, effect styles, and spacing values from your Figma file and exports them as a structured JSON token file.
CLI Token Converter
Node.js CLI that reads the exported JSON and generates a tailwind.config.ts file with all tokens mapped to the correct Tailwind theme sections.
Colour Token Mapping
Figma colour styles become Tailwind colour tokens. Supports nested naming (brand/primary → colors.brand.primary) and hex, RGB, and HSL colour formats.
Typography Token Mapping
Figma text styles map to Tailwind's fontFamily, fontSize, fontWeight, lineHeight, and letterSpacing — all in one pass.
Spacing & Sizing Mapping
Figma spacing tokens map to Tailwind's spacing scale. Supports both numeric (4px → 1) and named (spacing/md) token formats.
Shadow & Border Radius Mapping
Effect styles (drop shadows) and corner radius values map to Tailwind's boxShadow and borderRadius sections.
Tailwind v3 & v4 Support
Generates correct config syntax for both Tailwind v3 (tailwind.config.ts) and Tailwind v4 (CSS @theme). Select your target version with a CLI flag.
Built for production, not demos.
One-Command Sync
figma-to-tailwind generate --input tokens.json --output tailwind.config.ts. Run it whenever your design tokens change — the config is regenerated in under a second.
Nested Token Namespacing
Figma naming conventions like 'brand/primary/500' become nested Tailwind token objects: colors.brand.primary[500]. Your Tailwind classes match your Figma layer names.
Dark Mode Token Support
If your Figma file uses light/dark mode variables, the CLI generates Tailwind dark mode variants automatically.
Diff Output
Run with --diff to see exactly what changed between your last generated config and the new one — before overwriting. Catch unintentional token changes.
Watch Mode
Run with --watch to monitor the token JSON file for changes and regenerate the Tailwind config automatically. Useful when your Figma plugin exports on save.
CSS Variables Output
Alternative output mode generates CSS custom properties instead of (or alongside) a Tailwind config — useful for design systems that need CSS variable access.
Who is this for?
Developers, indie hackers, and product teams who want to skip the boilerplate and ship faster.
Design Systems Teams
The canonical use case. Your Figma file is the source of truth for design tokens. This kit makes your Tailwind config a generated artefact — always in sync, never manually maintained.
Agencies Working with Designer-Developer Handoff
Designers export tokens from Figma, developers run one command to update the Tailwind config. No more 'what's the exact hex for brand primary?' in Slack.
Solo Founders Designing in Figma then Building in Tailwind
Define your brand colours and type scale in Figma, export once, and your Tailwind config is ready. No manual translation of values between tools.
Teams Migrating an Existing Product to Tailwind
Export your current Figma design system as tokens, generate the Tailwind config, and use it as the starting point for migrating your CSS to Tailwind utility classes.
Technologies used.
Figma Side
CLI
Output
Token Formats
Common questions.
Is this really free?
Completely free. MIT licensed. No account required — download the plugin from the Figma Community and install the CLI from the GitHub repository.
Does it work with Figma Variables (not just Styles)?
Yes — the plugin exports both Figma Styles (the old system) and Figma Variables (the new token system). The CLI handles both export formats.
Does it overwrite my existing tailwind.config.ts?
By default it writes to a new file (tailwind.generated.ts) that you import into your main config. This way your hand-written Tailwind config isn't overwritten. You can opt in to full overwrite with a flag.
Can I use this with Tailwind v4?
Yes — pass --target v4 to generate a CSS @theme block for Tailwind v4's new config format instead of a tailwind.config.ts file.
What if my Figma naming conventions are inconsistent?
The CLI has a --normalize flag that applies consistent naming rules before mapping. There's also a config file where you can define custom mapping rules for edge cases in your token names.
Need something custom-built?
Need a fully automated design token pipeline — Figma to Tailwind, Figma to Style Dictionary, multi-brand theme generation, or integration with your CI/CD so the Tailwind config updates automatically when designers update tokens in Figma? We build design system infrastructure for product teams.
Ready to ship faster?
Get Figma → Tailwind Design Kit today and keep your design system and codebase in perfect sync — for free.
Setup and implementation
Review prerequisites, installation steps, and configuration before integrating this product.
Read the setup documentation