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.
Hamish O’Neill is working on a new Figma UI kit and shares some of the advanced features included in his library. Love seeing a strong focus on accessibility, customizability, and theming!
Over the last few months, I’ve been toiling away on a passion project 🤓
— Hamish O'Neill (@hamishoneill) August 28, 2023
Something I feel will set a new standard for what a production-ready Figma UI kit is. The below thread details some of the advanced features you won’t find together in any other library 🚀 pic.twitter.com/KKiUpLufLe
First the iOS kit, and now the official design library and templates for macOS Sonoma from Apple!
Matan Rosen on how creating starter kits in Figma can help deliver products faster by letting designers focus on user experience instead of pushing pixels and doing repetitive design work.
A highly customizable component library of onboarding and activation components. “This template takes the most commonly used onboarding patterns in modern software products (checklists, cards, etc) and makes them super easy to customize for your next feature launch or app refresh.”
A useful freebie from Luis Ouriach — 360 badges, pills, and tags in the full-color palette range.
NewsKit is the design system of News UK and is designed for helping build experiences across web products. It includes a Web Component Library and supporting themes. Check out the full website as well.
All-in-one free and open-source wireframe kit for quickly designing and prototyping ideas by Vijay Verma. The library contains more than 250+ components supporting dark mode and 150+ ready-to-use mobile screens.
Joey Banks is back with this year’s iPadOS 16 UI Kit for Figma! “This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iPadOS. Each component uses the latest version of Auto Layout, supports Component Properties, variants, Light and Dark Mode, and much more.”
A ready-to-use web UI kit with predefined components and a few page libraries by Vijay Verma.
The folks at Flowbite open-sourced their collection of Figma components based on the Flowbite Design System featuring variants, Auto Layout, dark mode, examples, style guide, and seamless integration with Tailwind CSS.
Carbon is IBM’s open-source design system for products and digital experiences. The Carbon kit for Figma contains all resources you need to get started.
That’s a really smart idea — browse a library of pre-made UI elements and copy-paste them straight to Figma. Categories make browsing the collections very easy. May be valuable for rapid prototyping at the early stages or for exploring ideas. (Keep in mind it didn’t work for me in Safari, but works perfectly in Chrome.)