Tailwind Sync

👋 Hey Hunters! I’m Youssef, Design Engineer at source.paris and one of the creators of Tailwind Sync, a free Figma plugin we’re launching today! 🤔 What it does and why we built it? We couldn’t find a market solution that streamlined the design-to-code process while properly handling theming and reusable tokens for complex projects. So, we created our own tool: a plugin to easily sync Figma variables to Tailwind. We’re releasing it for free, hoping it helps teams save time, avoid manual errors, and track design changes—from simple projects to complex design systems. 💡Key features: - Plug and play: Simply drag and drop the file into your code editor and start coding with the exact same theme as in Figma. - Variables, not values: Tailwind Sync outputs variables instead of hardcoded values. - Built-in changelog: Automatically tracks and documents changes to variables and text styles for versioning and communication. - Tailwind scoping: Ensures Tailwind scoping matches Figma’s, guiding developers to use values consistently, and maintain design integrity. 🙌 We’d love to hear what you think, how you’re using it, and any ideas for improvements. Thanks for checking it out! – Youssef & the team at source.paris

Hey Youssef, How does it handle complex design systems? Does it support nested variables or aliasing? Congrats on the launch!

Sounds amazing! Looking forward trying it 👏🏻

@marclou Check it out!

The built_ in changelog feature is a lifesaver, making it easy to track changes and keeps everyone on the same page. It's great for ensuring that the design integrity stays intact for.

The ability to sync Figma variables directly to Tailwind code saves so much time and ensures consistency across projects.

Congrats to the Tailwind Sync team on the launch! This plugin sounds like a fantastic way to streamline the design-to-development process. Does it support customization for different Tailwind configurations or design systems?