Figma variables to Tailwind, without the mistakes

Designers define variables in Figma. Developers need Tailwind classes and rem values. The translation between the two is dull, repetitive, and exactly the kind of work people get wrong.

So we automated it. Tailwind Translator is a free Figma plugin that does one job and does it well.

What it does

• Reads your variables — point it at the Figma variables or values you want to translate.
• Maps to Tailwind — get the correct utility classes, with px and % converted to rem.
• Copy and paste — clean, accurate output, ready for your codebase. No manual conversion.

One job, done well

We didn't turn it into a platform. It translates variables to classes, and that's the whole product. It's completely free; donations help keep it maintained.

Install it from Figma Community.