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.

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 2^nd, 2021: Figma assets have been discontinued.

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.

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.)