Tailwind Tokens is your bridge between Tailwind CSS and Figma’s variables & styles. No more copy-pasting. No more design drift. Just clean, synced design systems in seconds.
Hey everyone! 👋
I built this plugin out of pure frustration—syncing Tailwind tokens into Figma manually felt like a never-ending chore. I wanted something that just *worked* and respected both the design system structure and the Figma variable setup. So I made it.
💡 What’s unique:
- It maps your full Tailwind config directly into native Figma variables & styles
- Variables are auto-scoped and organized into collections (no chaos)
- It lets you selectively sync, manage, or clean up tokens
- It’s built with performance in mind—handles large token sets smoothly
- Safe, non-destructive updates that don’t break your existing setup
I’m most proud of how this turned into a real workflow upgrade. It's saved me *hours* already, and I'm hoping it'll save other dev-design folks even more.
Would love to hear what you think, and how you manage tokens in your own workflow.
