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.
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.
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.”
“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.”
A new design system from Meng To with hundreds of customizable Figma and Framer components and templates. Looks incredible, and the kit is meticulously organized with variables, variants, and adaptive layouts. See also his recent livestream with a discussion around key challenges while building the design system, the experience of using Figma variables and components, and tips for transitioning from Figma to Framer.
Ridd points out two common problems with UI kits (manual updates of shared attributes and maintaining multiple breakpoint variants) and shares a variable system to make your life way easier.
Ready to see how variables in @figma can level up your UI Kit?
— Ridd 🤿 (@ridd_design) October 17, 2023
Here's my system 👇 pic.twitter.com/IfiMnS1FHx
The brand new kit with the evolution of Microsoft’s design system. Supports variables, theme switching, and uses memory more efficiently.