Building modern UI designs from scratch can be tedious. If you've ever taken on a large project — whether an app, website design, or complex dashboard — that is actually going to get built, you quickly realize that it's not just a task of creating a couple of Macbook and iPhone X screens that look great... Under the surface of high-quality products and websites, there is always a growing library of thousands of individual UI components, reusable components, elements, design files, responsive screen designs, brand guidelines, design tokens, and dozens of other project needs. These are just as important to the long-term success of the project.
Hundreds of hours of "hidden" work are spent on creating these design assets and Figma templates. It's not enough to create a nice-looking home page, modern UI and websites need to have good usability, be consistent, follow clear and consistent brand guidelines, and stand out in the competitive design industry. When you're tasked with creating beautiful user interfaces in a real-life project with a limited budget and time, getting this design workflow right can be extremely challenging.
Thankfully, design assets have come a long way in the last few years and there's a shortcut when starting a new project to really speed up your design workflow... They're called UI kits. Whether you're designing a simple home page, a creative agency landing page, or a complex mobile app, chances are there's a high-quality Figma UI kit and design system out there to help you.
UI kits and design systems are more than just style guides. Taking advantage of a Figma UI kit can help you get ahead early and deliver beautiful, consistent, accessible designs on time and within budget that meet the new project needs. If you're working on a large project, UI kits are a great way to start building a design system and team library with reusable components.
What is a UI kit?
So, what exactly is a UI kit? A good UI kit is a vast collection of reusable UI components (such as buttons, inputs, navigations), font and typography styles, color style palettes, and other useful design assets and elements. UI kits contain everything you need to design great websites or apps. If you're working in a team, they can be published as a team library and act as a single source of truth.
You don’t realize the power of a good quality Figma UI kit, Figma template, or good design system until you start using one. A good UI kit saves you time and money usually spent on meticulously building the same components over and over again. It can 10-100x your workflow and become the building blocks for a complete design system. A good UI kit is more than just a component library, but also contains an in-depth style guide, color styles, design tokens, icons, and everything else you need.
A good way to assess whether or not you need a UI kit or wireframe kit in your design process is to ask the question, “will this UI kit save me a few hours of work in a design project?” If the answer is YES, it’s probably worth the investment. Then, it becomes an asset you can use in unlimited future design projects.
There are hundreds of Figma UI kits, but they're not all created equal...
If you’re looking for the absolute best Figma UI kits and design systems, look no further. We’ve done an extensive search for the highest-quality Figma UI kits and compiled them here for you in one place!
1. Untitled UI
untitledui.com – Free version or $109
Untitled UI is the largest UI kit and design system for Figma in the world. It's meticulously crafted with 100% Auto Layout 4.0, super-smart variants, interactive components, and with accessibility in mind.
It's a great example of Figma design system best practices and is the most popular and highest-rated Figma UI kit on the internet with 1,000+ 5-star reviews!
Untitled UI was designed to be the "ultimate" UI kit and the perfect starting point for any kind of project — from beautiful marketing landing pages, all the way to complex dashboards and web apps — Untitled UI has thought of absolutely everything so you don't have to.
The team behind Untitled UI are constantly making updates and improvements to the UI kit and recently announced they've completely refactored Untitled UI to take advantage of Figma's latest component property features announced at Config 2022.
You can check out a full preview of the design kit, or check out the 100% free UI kit here (which is more advanced than most UI kits in its own right!). If you're short on time, here's a 60-second overview:
While researching the market for Untitled UI, it became clear that not all UI kits are created equal... The most popular UI kits for Figma on the market today lack in size, flexibility, or quality — usually all three. Untitled UI was built to solve this. This design system includes 10,000+ components and variants, 500+ useful global typography and color styles, and a whopping 420+ beautiful mobile and desktop page examples.
2. UI Prep
"Battle-tested, no fluff design system UI kit for Figma."
UI Prep is a Figma UI kit and design system created by Molly Hellmuth and Jake Tsacudakis. It's a well-built UI kit, consisting of 100+ styles, 100+ icons, and multiple layout examples and UI elements.
UI Prep does a great job at utilizing Figma's Auto Layout and Variants features, making it easy to create beautiful user interfaces fast.
One thing we love about UI Prep is their back-to-basics approach. While it's not the largest or most advanced Figma UI kit, it focuses on best practices, simplicity, and is well organized. It includes well-crafted interactive components with Auto Layout, icons, color styles, and even a couple of example UI layouts.
The team behind UI prep also makes updates to the kit and have been focusing on expanding components, integrating dark mode variants, and improving the file structure. They also include a couple of useful "quick start" tutorial videos to get you up and running as soon as possible.
3. Frames X UI Kit + Handbook
"Frames X is the one Figma UI kit and eBook to skyrocket your career and save thousands of hours."
Launched in late December 2021 by Dmitriy Bunin, Frames X is a Figma UI kit and component library that also includes a design handbook. The Frames X handbook is a 94-page eBook of best practices and useful tips to help you improve your design workflow and build design systems that scale.
The accompanying Figma UI kit includes 5,500+ reusable components and variants built with Auto Layout and dark mode, color styles, icons, and 420+ "building blocks" to help you get started on websites and apps.
Frames X is a great example of a mid-weight Figma UI kit and Figma design system. Whether you're new to Figma, looking to quickly launch new ideas, or build the foundations of a scalable design system, it ticks all the right boxes!
4. Cabana for Figma
"A better way of designing starts here."
Cabana is a Figma UI kit and collection of Figma templates. It consists of 1,000+ essential UI components, and design "blocks" that you can use to construct page layouts fast.
Cabana have recently dropped their prices, possibly to compete with newer UI kits being released. Their "Standard" license now starts at $59, but unfortunately doesn't include page examples. Cabana is a good option for quickly mocking up landing page designs and for simple projects.
5. Disy Design System
"Simple and modern Design System."
Disy is a beautiful Figma UI kit and design system by French designer, Yoan Almeida. Launched in January 2022, Disy is a super minimal and simple design system and UI kit. Even the price is minimal — at just $48, it's a small investment to speed up your design process and workflow.
While it's by far the smallest UI kit on this list, we love it because of its quality. It certainly won't have everything you need for a large project, but the included Figma components are high-quality and follow Figma best practices.
Disy comes with 280+ icons, 400+ basic components with Auto Layout, color styles, and a couple of beautifully-crafted example pages to explore new ideas or kickstart that new project.
6. Ant Design System for Figma
"Speed up your design process with pixel-perfect UI elements."
Ant is a large Figma UI kit made by Matt Wierzbicki. It is based on the most popular React UI library, Ant Design. It's been around for years and is a growing library that is great to use to design well-documented desktop and mobile apps, particularly if you're using React to build the designs.
Ant Design System is also available as an Adobe XD UI kit and they have a free demo version available to download and explore.
7. Pegasus Design System
"Design System crafted for scale in Figma."
Pegasus Design System is a popular multi-purpose UI kit. It's made up of 2,000+ components and 100+ styles, with both dark and light themes.
The team at Pegasus have made a Figma and Adobe XD version. You can also check out their "lite" version free UI kit on Figma Community. It's unclear if the Pegasus team are still working on this design system.
"Figma UI kit built for integration with Tailwind CSS."
FlowBite is great if you're working with Tailwind, but is also a solid standalone UI kit to use as a base for your design system or project. It consists of 27 responsive page examples and the team has released a free version to demo on Figma Community.
9. Karma Wireframe Kit
"A collection of practical and carefully crafted pages helps get your website up as quickly as possible."
The purpose of wireframing is to quickly iterate on new ideas before starting on the "final" designs. Instead of focusing on the tiny details, wireframing allows you to generate many low-fidelity solutions quickly.
There are a bunch of Figma wireframe UI kits floating around the internet, but we've found they are almost always low-quality and don't use Figma best practices and Auto Layout. Karma is the exception.
Karma Wireframe kit is a website Figma component library by Burcu Doyran. It includes 900+ blocks to help you kickstart new projects and new ideas. With color styles and basic components, it includes everything you need to quickly spin up content and designs to share with clients before getting bogged down in the finer details. If wireframing is an important part of your design process and workflow, definitely check it out!
10. Landify Landing Page UI Kit for Figma
"A collection of practical and carefully crafted pages helps get your website up as quickly as possible."
Landify is a landing page UI kit for Figma consisting of 170+ "blocks", 500+ components, icons, color styles, and 5 sample pages. It's a great asset to quickly spin up beautiful marketing websites in no time.
Originally launched in 2020, designer Aravind Little Jack has spent countless hours updating this UI kit with tablet and mobile breakpoints and relaunched v2.0 in January 2022. Check out the free UI kit on Figma Community.
It's well-organized and includes color styles, text styles, as well as some great examples of landing page components. While it's focused purely on website designs and missing application components, one thing we love about this UI kit is that it comes with tablet breakpoints. Most UI kits skip this as it can quickly bloat design files, but Landify is slim enough to include this breakpoint.
11. Shipfaster UI Design System
"Get instant access to over 6,000+ easy-to-customize components to supercharge your design workflow."
It's important to note that Shipfaster UI do not offer refunds, which is legally questionable in some countries and in general a red flag. Just make sure you thoroughly preview the UI kit before you purchase. It's also unclear whether or not you'll receive free updates as their FAQs state "you will gain access to free updates to the design system until stated otherwise."
Shipfaster UI is a mid-weight design system and is reasonably well-built. They have taken a bunch of assets from Figma Community files and repurposed them into their UI kit. It's mainly focused on marketing website design and intended for beginner and educational users, which ties in well with their beginner Figma course. It comes with 150+ color styles, icons, and 6,000+ components and variants. There are a few page section examples included to get you started, but unfortunately no mobile versions of these pages, so it's up to the designer to make them as they go. You can preview the UI kit via their website.
12. The Designership Design System
"Access over 200 every-day components within our Figma Design System. Loved by 650+ designers."
The Designership Figma Design System is a well-crafted and lightweight Figma UI kit created by by The Designership team. It has a focus on essential components — 200+ interactive UI component, mostly built with Auto Layout.
This Figma UI kit is a slimmer "version 1.0" design system and was launched alongside their Figma course. It's unclear whether or not the Designership team will continue shipping updates to people who have already purchased this design system which they've previously indicated that they would.
13. Tetrisly Figma UI Library
"Starter kit to create design system's UI library for Figma."
Tetrisly is a light Figma UI kit, designed as a starting point for larger design systems. It consists of 2,500+ components, 55 predefined color styles, and 700+ icons.
The team at Tetrisly have created a Figma and Sketch version of their UI kit, and you can preview a demo Figma UI kit via their website.
14. Venus Design System
"Design what you want with less effort at another level!"
Venus is a Figma UI kit by Simmmple. It's a great example of clean modern design and is based on Atomic Design Methodology. It consists of 2,000+ of the most common UI/UX components and is designed to speed up your design workflow. The kit also includes color styles and 1,400+ of Google's Material Design icons and is a great option as either an iOS UI kit or as an Android UI kit for designing Android apps.
15. 73 px Design System
"The Most Powerful Figma Design System"
73 px is a multi-purpose Figma UI kit and design system created by Jordan Banafsheha and Źmicier Aqua. It's designed as a wireframe kit to quickly wireframe design products without needing to design everything from scratch.
73 px was launched in May 2020 and contains common and useful UI components, organized layers, 185 styles, and utilizes Figma's smart Auto Layout features.
They don't offer a demo version, but you can preview the UI kit.
16. Layers Design System
"An accessibility-first design system. Build products for everyone."
Layers is a Figma UI kit and design system that contains over 350 components, blocks, icons, color styles, and example products.
Their design system has a particular focus on accessibility. As part of their annual subscription, you also get access to their other product, Flows, which help you build and annotate flow charts in Figma.
They don't offer a demo version, but you can preview certain pages from their Figma UI kit on their website.
17. Nucleus UI iOS UI Kit
"Create mobile app mockups or prototypes in Figma at speed."
Designing social media apps? Nucleus UI is a 100% free mobile app UI kit and component library made by Thomas Budiman, Juinal William, and Salmun Barnabas. It's based on iOS Human Interface Guidelines and contains 300+ components and variants across 50+ categories. It also includes 36 screen examples.
The team at Nucleus UI have made a Figma and Adobe XD version. It can be tricky to find good app UI kits, especially free ones, so Nucleus is a real gem. You can find the free UI kit on Figma Community.
18. Stratum UI Design Kit
"Quickly create top-notch UI design the product deserves."
Stratum UI Design kit is a comprehensive Figma UI kit created by Denis Danilov. It consists of 9,000+ consistent Figma components and variants, color styles, and icons.
Stratum UI Design kit is well-crafted with Figma best practices and includes all the building blocks you need to create modern user interfaces and websites. You can preview the entire kit directly from their website.
19. Module UI Kit
"Connect simple in use design system for Figma. Flexible UI components customizable in a few clicks."
Module is a super simple and modern UI kit and design system for Figma. It takes full advantage of Figma's Auto Layout features, includes color styles and icons, responsive sizes for components, and a consistent spacing system based on a 4px baseline grid.
The team has created a preview Figma file which you can explore on their website. They've also recently drastically reduced their pricing structure, likely to compete with newer and more advanced UI kits being released.
20. The Design Encyclopedia
"The World's Largest Figma Design System."
The Design Encyclopedia is a large Figma library created by Jon Moore. It includes hundreds of reusable UI components, color styles, icons, and page templates, with a particular focus on charts. We're not sure it's the "world's largest" or the "world's only" anymore, but it's a great asset nonetheless.
You can free preview the entire file in Figma via their website.
"Design faster with an adaptable design system."
As the name suggests, Simplekits is a Figma UI kit with a focus on simplicity. The team behind Simplekits kept it as "simple and easy to use as possible".
If you're after a light UI kit to lay the foundation for your design system, definitely check it out. Simplekits have also released a free demo version.
"BetaCRM is the largest UI kit for SaaS customer relationship management dashboards."
If you're after a great dashboard UI kit and CRM Figma templates, BetaCRM could be a good choice. It's a Figma UI kit and collection of wireframe kits consisting of 99 desktop pages, 86 mobile screens, and 200+ components. It's also a great foundation to use as a mobile UI kit.
The team have made a version for Figma, Sketch, Adobe XD, and even Photoshop (if that's your thing). It's pretty rare to find high-quality Sketch UI kits, so this is a great effort from the BetaCRM team.
23. iOS 15 UI Kit for Figma
"I'm unbelievably excited to share this year's iOS 15 UI Kit on the Figma Community, where my goal was to include everything one might need to begin designing."
This (unofficial) iOS 15 UI kit is an awesome resource created by Joey Banks. Joey has been generous enough to release this free UI kit on Figma Community. If you're working on a mobile app or need an iOS UI kit, look no further — this has everything you need and is much higher quality than the rest. Use it to speed up your design process when designing social media apps or as a base for your mobile UI kit.
24. Figma Material Design 2 UI Kit
"Starter Kit for your Figma Material UI Design project."
Material Design UI Kit is a collection of ready-made components for your next Mobile App Design based on the famous Google Material Design guidelines.
This is a great UI kit if you're looking to design Android apps. It consists of 150+ components, 25 prebuilt layouts, and 5 examples app user flows. A solid Android UI kit to start from.
Missing a Figma UI kit or design system?
There are dozens of Figma UI kits and design systems being released every month. We've reviewed hundreds of these kits to pick out the highest-quality examples and regularly update this post if we find one that makes the cut.
If you're releasing a Figma UI kit or design system and would like to include to be included on this list, let us know! We'd love to check it out.