Subscribe
Sign in
Tailwind Sync
p/tailwind-syncFigma variables to Tailwind in one click
Start new thread
henry lim

Tailwind Sync - Figma variables to Tailwind in one click

by•

Tailwind Sync is a free plugin for Figma that synchronizes variables to Tailwind code, enhancing the design-to-dev handoff with speed, consistency, and scalability.

Add a comment

Replies

Best
Youssef
Maker
👋 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
Youssef
Maker
@arpanramtek Exactly! That’s what we’re aiming for – bridging the gap between design and development.
Kyrylo Silin
Hey Youssef, How does it handle complex design systems? Does it support nested variables or aliasing? Congrats on the launch!
Youssef
Maker
Hey @kyrylosilin, Yes, it absolutely does! The plugin was designed specifically to support both variables and aliases, which is essential for handling complex design systems. For example, in one of the largest design systems in France (BNPP), it only takes about 5 minutes to process and hand over thousands of variables from Figma to Tailwind.
Matei Convard
Sounds amazing! Looking forward trying it 👏🏻
Youssef
Maker
@matei_convard1 Thanks! We can’t wait for you to try it out. Let us know what you think once you’ve had a chance to test it! 👏
Salamatu Abdullahi
Syncing tools can be tricky. Hoping this one addresses those common issues effectively.
Youssef
Maker
@salamatu_abdullahi Absolutely, we’ve designed it with those challenges in mind! Looking forward to hearing how it works for you!
Michiel Haverlag
@marclou Check it out!
Sage Wang
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.
Yatheen Brahma
The ability to sync Figma variables directly to Tailwind code saves so much time and ensures consistency across projects.
Maxime Frere
Maker
@yatheen_brahma Thank you 🙏🏻
Jonathan Viet Pham
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?
Youssef
Maker
@vietpham Thank you! Yes, it definitely supports customization for different Tailwind configurations and design systems. You can easily adapt it to fit your specific setup, making it flexible for various projects.
Jai from Worksaga
Congrats and Thankyou Henry for bringing this idea to life. Definitely give a try!
Krati Parmar
Great initiative! Kudos on the launch 👏
Hamna Malik
Launching soon!
Having Figma variables sync with Tailwind code is incredible! It can ensure seamless consistency and saves a ton of time across all projects.
Koby Conrad
Exciting times ahead! Congrats on the launch @dobbo5 & team, and good luck with everything! 🎉🚀