The Tailwind CSS Variable Generator is a powerful Figma plugin designed to bridge the gap between design and development. It automatically generates Figma variables based on Tailwind CSS's design system, ensuring consistency across your design and code.

Never start a design system from scratch again. Foundation instantly generates Figma variables that perfectly match Tailwind's Utility Classes, turning hours of setup into seconds.

Hey everyone! I am Dylan, founder of Foundation. I hope you get as much joy from Foundation as I do. It is the one tool I needed to help me kickstart small design systems for new projects. Give Foundation a try and let me know what you think. Your feedback will help me shape the future of Foundation and speed up designers and engineers alike when creating a design system from scratch.

Foundation

Generate Figma Variables based on Tailwind Utility Classes

Generate Figma Variables based on Tailwind Utility Classes

Foundation

Generate Figma Variables based on Tailwind Utility Classes

Generate Figma Variables based on Tailwind Utility Classes

Similar Products

Foundation 2.0

Foundation Launches

Do you use Foundation?

Foundation Launches

Do you use Foundation?