The Foundation generates Figma spacing, color, and typography variables based on Tailwind CSS’s utilities, ensuring consistency across your design and code.

This is a pretty wild experiment, started with a question: ​“What if you could design like a developer?” Name your layers with Tailwind classes, then run the plugin to instantly update the style. Why? Because you can, that’s why!

While the makers of Tailwind Figma sponsor this issue, I also wanted to mention their free design kit with basic elements like spacing, typography, and icons from the Tailwind CSS framework.

Great guest post by David Luhr at Figma’s blog on what it takes to ship a commercial UI kit with over 1,400 components and 10,000 distinct elements, all while keeping quality and usability top of mind. I love the work the Tailwind team is doing, and this is a great look into their process.

A free preview of the official Tailwind UI Figma Kit, containing all the Text, Color, and Effect Styles found in Tailwind UI, along with 40+ complete components that use the latest Auto Layout and Variants features. See also a blog post on its creation above.

Update from November 2nd, 2021: Figma assets have been discontinued.

Live-building Sign-in and Registration components for the official Tailwind UI Figma kits.

Convert Figma layouts into responsive webpages (in Tailwind) or mobile apps (in Flutter and SwiftUI). The plugin takes Auto Layout into account, and even when it’s not applied, but objects are aligned, it will make them responsive.

Add color styles straight out of your Tailwind CSS config file.

Figma Design Kit for Tailwind CSS, a utility-first CSS framework for rapidly building custom designs.

Great article by Ollie Jackson covering a lot of ground, including how to make prototypes more maintainable, communicate effectively with comments, organize text styles, and even integrate Tailwind CSS framework into a Figma design project. (If Tailwind CSS is your jam there is also a design kit for it in Community Projects section.)