FLOW library from Little Miss Robot is meant to be used for wireframing, but it can also easily be transformed into a small design system and evolve with your project simply by adjusting the variables.

Speaking of shadcn/​ui, Matt Wierzbicki published a new plugin using Claude 3.5 Sonnet (requires an API key) to convert Figma designs into production-ready shadcn/​ui and Tailwind CSS code. It’s tailored to work best with his commercial shadcn/​ui kit for Figma, but I’d expect it to work with Luis’ kit as well.

Luis Ouriach released a free shadcn/​ui Figma kit, including Tailwind colors, semantic light/​dark colors, typographic variables and styles, effects, components, example pages, and space utility variables. If you’re curious how it was made, Luis documented every step of the process, starting back in September of last year.

Luis has been working on his version of the kit for over a month, and now it’s finally available in the Figma community. Even includes a new Sidebar component that was released last Friday!

After the Figma library recommended by shadcn wasn’t updated in 2 years, I love all the new resources popping up! Yauheni created a free and open-source Figma library for the shadcn/​ui component and documented his process on X.

For those of us missing the good old days of iOS 6 and Corinthian leather: ​“Relive the golden era of skeuomorphic design with the Legacy iOS UI Kit.”

Shu Ha Ri is a robust design system meticulously crafted for Figma, offering many essential features and a generous free version. It revolves around modularity and empowers designers to efficiently create diverse instances with a single master component.

Apple updated their iOS 18 UI kit to include iPhone 16 Pro bezels (in all colors), updated templates to match new display dimensions, and several other bug fixes and improvements.

For a recent project at work, I reviewed popular UI libraries, and it was clear that shadcn/​ui is one of the most comprehensive, customizable, and common choices. I had only a few concerns, one being a lack of a modern Figma library companion — the community file hadn’t been updated in 2 years, didn’t support variables or customization, and missed new components and properties.

I braced myself to spend a week recreating all components in Figma from scratch when Matt Wierzbicki announced his commercial Figma library of shadcn/​ui components. Matt spent years developing Ant Design System, so he is not new to projects of this scale. We licensed the library for our team, and so far, it seems to be very well-made and highly customizable. The product is very new and doesn’t even have a website yet, but it came out at such a perfect moment for me that I still want to shout it out.

A base UI kit from Advocates Luis and Jake is available in the Figma assets panel by default. It’s backed with a fully Code Connected React codebase. See Luis’ thread on how and why it was made.

“Find Apple iOS, Google Material Design 3, and Figma’s Simple Design System UI Kits directly in your assets panel. Each UI Kit includes component sets and example mockups, which allow you to start from full layouts. Just drag in an entire example screen as a starting point, and it’s fully editable with components from the library. Plus, each of these UI Kits is backed by Code Connect.”

A nicely organized UI kit for an open-source platform for commerce.

Free website UI kit made by Framer?! You got my interest. ​“Easily transform your ideas into a fully functional, responsive, no-code SaaS website design within minutes using these free components for Framer and Figma.”

Blank is ​“the fastest Figma UI kit and design system for your projects.” It includes weekly updates, an extensive component library equipped with all the necessary stuff for your next project, tokens and variables support, light and dark modes, open-source icons, and ready-to-use layouts.

“Droit UI is a highly customizable Figma design system with over 7,000 UI components, specifically designed to streamline the workflow of creative professionals, agencies, startups, and SaaS businesses.”

Alex Yakir put a grant from the Figma Creator Fund to good use by building a free design system that makes both designers and developers happy. All Figma variables and components have matching CSS variables and React components with stories in Storybook. It’s designed with Dev Mode in mind, from built-in Annotations to unified prop names and Auto Layout mirroring the box model structure. An impressive amount of work and superb attention to detail!

Figarc is a design system for floor plans. You start by setting up a foundation with walls and load-bearing pillars, then add doors and windows from 100+ fixtures. After aligning early-stage structural elements like water pipes and electrical cords with wall layouts, you can drag-and-drop 150+ furniture pieces with component overrides to unlock a plethora of options. Love so much about this project!

Danial Siddiki started building a UI kit by replicating Vision Pro interfaces made by Apple.

A free and ever-expanding design system and UI kit for Figma from Lemon Squeezy. Fantastic resource from a talented team!

CVS Health Inclusive Design team: ​“Accessibility annotations help capture design intent that cannot be conveyed through visual design alone. This can help prevent many accessibility issues earlier and create more usable digital experiences. After 2 years of testing with over 65 design teams at CVS Health, we’re releasing our Web Accessibility Annotation Kit to the public.”