A good UI kit is not a shortcut. That's the thing designers who haven't used a genuinely excellent one don't understand.
A bad UI kit is a shortcut — a collection of components thrown together that you fight against as soon as your design requirements diverge from what the kit assumed. You spend more time customizing around the kit than you would have spent building from scratch.
A good UI kit is a foundation. It encodes design system thinking — token structures, component hierarchies, state management, spacing systems — that would take months to build well from scratch. Using a great UI kit teaches you as much as it saves you.
The kits on this list fall into the second category. Every one of them has been used in real projects where real clients saw real results. I'll tell you not just what they are but exactly which ones to use for which types of projects — and which ones to avoid for contexts they're not designed for.
Before the list, let's cover the things that separate genuinely excellent Figma UI kits from the ones that look good in screenshots and fail in production.
What Makes a Figma UI Kit Actually Good
Auto Layout: All the Way Down
The first test I apply to any Figma UI kit: pick a button component and resize it. Does it stretch gracefully? Do the padding values hold? Does the text remain centered?
Then pick a card component and change the content. Does it grow to accommodate the text? Does the layout adapt intelligently?
Then try a complex component — a data table, a navigation menu, a modal. Does it hold together when you fill it with real content?
Kits that pass all three tests are built with Auto Layout throughout, not just in some components. Kits that fail reveal that the creator built components for screenshots, not for actual use. The difference is enormous in practice.
Design Tokens and Variables
Figma released Variables in 2023, and it changed what "good" means for design systems.
A kit built before Variables can be excellent in other ways, but it lacks the ability to switch between light and dark mode in a single click, or to change the primary brand color and watch every component update. These aren't features — they're fundamental to what design systems are supposed to do.
When evaluating any kit, check: does it use Figma Variables for colors, spacing, and typography? If yes, it's built for 2024 and beyond. If no, it may be excellent but it's built for 2022.
Real Component States
Every interactive component needs states: Default, Hover, Focused, Disabled, Error, Success, Loading. At minimum. Some components need more.
Kits that only have Default and Hover states leave you to build the others yourself — which defeats the purpose. Before committing to a kit, open a critical component (a form input is a good test) and count the states. If it doesn't have at least 5 meaningful states, you'll be building the gaps yourself.
Documentation Inside the File
The best kits include documentation inside the Figma file itself — a Getting Started page, a Design Tokens page, explanations of how components are structured and why.
This documentation serves two purposes: it helps you use the kit correctly, and it reveals the thinking behind it. A kit with thoughtful internal documentation was built by someone who understood design systems. A kit with no documentation was built by someone who was primarily focused on how it looks in screenshots.
Understanding Figma UI Kit Types
Before choosing a kit, understand which category your project falls into:
General-purpose kits are designed to work for any product type. They make no assumptions about your industry or use case. Best for projects without strong existing design constraints.
Platform-specific kits are designed for a specific platform (iOS, Android, Web). They follow the platform's design language and conventions. Essential when platform consistency matters.
Framework-specific kits are designed to match a specific code framework (shadcn/ui for React, Polaris for Shopify). The value is design-to-code alignment.
Industry-specific kits are designed for a specific context (fintech, healthcare, e-commerce). They include domain-specific components and solve domain-specific problems.
Choose the kit type that matches your project requirements, not just the one that looks best in the preview.
The 18 Best Free Figma UI Kits in 2026
1. Untitled UI — The Best Free Design System Available
By: Jordan Hughes
Available at: Figma Community
License: Free tier available, Pro version paid
Components: 1,000+
Variables: ✓ Full color, spacing, and typography variables
Dark mode: ✓ Built-in via variables
Best for: SaaS products, dashboards, internal tools, any product needing professional quality fast
There is a before and after for free Figma UI kits. Before Untitled UI, the best free options were competent but incomplete — good for inspiration and starting points, but requiring significant extension. After Untitled UI, the standard shifted.
What Untitled UI provides isn't primarily the 1,000+ components — it's the design system those components are built on. A 9-shade color scale for every semantic color (primary, success, warning, error, info, gray). A complete typographic scale with desktop and mobile sizes. A spacing system based on a 4px grid. Shadow definitions. Border radius tokens. And then — built on top of that system — components that are all internally consistent because they all draw from the same token pool.
Using Untitled UI correctly means engaging with the system, not just the components. Open the Design Tokens page first. Understand the color scale structure. Understand how the spacing works. Then start designing.
What makes it genuinely different from alternatives: The component states. Every interactive component in Untitled UI has a full state set — Default, Hover, Focused, Filled, Disabled, Error, Success. Input fields have 8+ states. Buttons have 5. Dropdown menus have contextual states. This completeness is what production-ready means.
The free vs. paid distinction: The free version is comprehensive enough for most projects. The Pro version adds more page templates, additional components, and early access to new features. If you're building complex products regularly, the Pro version is worth it. If you're evaluating whether the kit is right for you, the free version will answer that question conclusively.
2. Material Design 3 — Google's Official Figma Kit
By: Google Material Design Team
Available at: Figma Community
License: Apache 2.0 — free for commercial use
Components: 200+
Variables: ✓ Dynamic color system (Material You)
Dark mode: ✓ Built-in with one-click switching
Best for: Android apps, Flutter apps, cross-platform products targeting Google's ecosystem
Google's official Material Design 3 Figma kit represents something rare: the actual design system used to build Gmail, Google Maps, and Google Drive — available for free, with proper Figma Variables implementation.
The dynamic color system (Material You) is the technically impressive piece. You define a "seed color" — your brand's primary — and the system generates a complete, harmonious color scheme across your entire component set. Switch from a blue seed to a purple seed and every component updates: buttons, cards, navigation, dialogs. All automatically, all correctly.
This is genuinely sophisticated design system thinking. The algorithm behind Material You's color generation was developed by Google's color science team and is based on the HCT color space (Hue, Chroma, Tone) — a perceptually uniform color model that produces more harmonious results than HSL.
The technical advantage for Flutter developers: Material Design 3's Figma kit was designed alongside the Flutter Material 3 implementation. The components in the Figma kit map to Flutter widgets with higher fidelity than almost any other design-code pairing available. For Flutter projects, this alignment reduces implementation time significantly.
When not to use it: When you're designing for iOS or web and need the design to feel native to those platforms. Material's design language is distinctly Google/Android. Using it on iOS creates friction for users who expect iOS conventions.
View Material Design 3 on Mantlr →
3. shadcn/ui Figma Kit — For React Developers Who Design
By: Community-maintained
Available at: Figma Community
License: MIT
Components: 40+
Variables: ✓
Dark mode: ✓
Best for: React/Next.js projects, design-development handoff, teams using the shadcn/ui React library
The shadcn/ui approach to components — copy the source code rather than install a package — has been the most significant shift in React component library philosophy in years. The Figma kit reflects this approach: it's designed to be the design-side partner of a codebase, not an independent design artifact.
Every component in this kit maps precisely to a shadcn/ui React component. When you design a Dialog in Figma, the developer installs the Dialog component. When you design a Select, they install the Select. The visual design, the interaction states, and the component API are all aligned.
The design-code parity in practice: I've used this kit on projects where the designer-developer handoff was reduced from 2-day review cycles to same-day implementation. When the developer can see the Figma component, look at the shadcn/ui component, and know they're the same — the translation overhead disappears.
Limitation: The kit has fewer components than Untitled UI or Material Design. If your application needs components not in shadcn/ui's library, you'll need to build those yourself. For teams already using shadcn/ui in code, this is not a problem — you'd be building those components in code anyway.
View shadcn/ui Kit on Mantlr →
4. Primer Design System — GitHub's Open Source System
By: GitHub Design Team
Available at: Figma Community
License: MIT
Components: 300+
Variables: ✓ Partial
Dark mode: ✓
Best for: Developer tools, admin interfaces, data-dense products, anything that needs GitHub's visual authority
GitHub's Primer design system has been public and open source for years, but the Figma implementation has improved significantly with recent updates.
Primer is designed for information-dense interfaces where you need to show significant amounts of data without the UI feeling cluttered. The component density — how many elements can be presented in a given space without overwhelming the user — is higher than most general-purpose design systems. This reflects GitHub's use case: showing code, diffs, issues, pull requests, and project data in a compact, scannable format.
The component I use most from Primer: The data table components. Showing sortable, filterable, actionable tabular data is one of the hardest UI design problems, and Primer has thought about it more carefully than most systems. The column types, the row actions, the filter interface — all handled with patterns refined through years of GitHub.com use.
The icon system: Primer comes with Octicons — GitHub's icon library of 450+ icons. The icon set is excellent for developer-facing contexts, and having the icons integrated into the design system means components with icons look right without manual icon selection.
5. Polaris — Shopify's E-commerce Design System
By: Shopify Design Team
Available at: Figma Community
License: Polaris license (free for Shopify app development)
Components: 200+
Variables: ✓
Dark mode: Limited
Best for: Shopify app development, e-commerce admin interfaces, merchant-facing tools
Polaris is the design system that powers the Shopify admin — the interface that millions of merchants use daily to manage their businesses. Years of refinement based on real merchant feedback show in every component.
What Polaris does better than any general-purpose design system: Merchant task flows. Adding products. Processing orders. Managing inventory. Reviewing analytics. These workflows involve specific patterns — loading states for operations that take time, confirmation dialogs calibrated to the severity of irreversible actions, error messages calibrated to help merchants recover quickly — that general-purpose systems don't address as specifically.
The badge system alone is worth studying. Every merchant-relevant status — paid, pending, refunded, partially fulfilled, disputed — has a specific badge color, label, and tooltip that communicates not just status but next action. This specificity is what years of real-world use produces.
License reality: Polaris is freely available for building Shopify apps. For products outside the Shopify ecosystem, verify licensing applies to your use case. The design patterns are instructive for any e-commerce context regardless of whether you use the kit directly.
6. Carbon Design System — IBM's Enterprise Foundation
By: IBM Design Team
Available at: Figma Community
License: Apache 2.0 — free for commercial use
Components: 300+
Variables: ✓
Dark mode: ✓ (4 themes: white, g10, g90, g100)
Best for: Enterprise B2B products, data visualization, complex data management interfaces
IBM's Carbon Design System is among the most comprehensively documented design systems in the world. The component quality reflects IBM's investment in enterprise product design across decades.
The four theme system is uniquely sophisticated: White (light, for primary interfaces), G10 (slightly gray, for secondary surfaces), G90 (dark gray, for sidebars and panels), and G100 (near-black, for full dark mode). Using multiple themes within a single interface — a white main content area, a G90 sidebar panel — creates depth and visual hierarchy that single-theme systems can't achieve.
The data visualization foundation: Carbon includes design foundations for charts, graphs, and data displays that most design systems don't address. For any product where data visualization is a primary interface element, Carbon's guidance and components provide a head start that's difficult to replicate from scratch.
View Carbon Design System on Mantlr →
7. Flowbite Figma Kit — The Tailwind CSS Match
By: Flowbite / Themesberg
Available at: Flowbite.com and Figma Community
License: MIT — free for commercial use
Components: 500+
Variables: Partial
Dark mode: ✓
Best for: Tailwind CSS projects, rapid web application prototyping, full-stack developers who design
Flowbite's Figma kit is designed to match the Flowbite component library — which is itself a Tailwind CSS component library. The implication: every spacing value, color value, and layout decision in the Figma kit corresponds to a Tailwind CSS class that the developer can type.
A card with p-6 padding in Flowbite corresponds to 24px in Tailwind. A primary button in Flowbite corresponds to bg-blue-600 hover:bg-blue-700. The translation layer between design and development is thin.
The marketing component coverage is exceptional: Flowbite includes complete marketing page sections — hero blocks, feature sections, pricing tables, testimonials, FAQ sections, team pages, contact forms — alongside application components. Most UI kits are one or the other. Flowbite covers both.
8. iOS 18 UI Kit — Apple's Official Figma Kit
By: Apple Design Team
Available at: Figma Community
License: Free for personal and commercial design use
Components: 300+
Variables: ✓ Full light/dark mode
Dark mode: ✓ One-click switching
Best for: iOS app design, native mobile interfaces, anything that will be built in Swift/SwiftUI
If you're designing for iOS, this kit is not optional. It's the baseline.
Apple's official iOS Figma kit contains every native component — navigation bars, tab bars, list cells, table views, action sheets, alerts, keyboards, pickers — drawn to pixel-perfect accuracy against the actual iOS system. Using this kit means your designs show exactly what the native iOS implementation will look like.
The Variables implementation: The iOS kit uses Figma Variables for its color system, which means switching between light and dark mode is a single-click operation on any frame. This is crucial for iOS design where both modes must be considered from the beginning.
What the kit includes that's often overlooked: The keyboard layouts. Showing a realistic iOS keyboard in your mockups might seem like a minor detail. In client presentations and portfolio work, it's the difference between mockups that look like concepts and mockups that look like production screens.
Keep it current: Apple releases a new iOS version annually and updates the Figma kit with each release. Make sure you're using the current version. Third-party iOS kits on the Figma Community often lag the official kit by 6-12 months.
9. Android UI Kit — Google's Official Material 3 Mobile Kit
By: Google Material Design Team
Available at: Figma Community
License: Apache 2.0
Components: 150+
Variables: ✓ Dynamic color
Dark mode: ✓
Best for: Android app design, cross-platform mobile design, Flutter development
The Android-specific Material Design 3 kit is more focused than the broader M3 kit — centered on the specific components and patterns of Android's native interface rather than the web or cross-platform implementations.
For Android app design, this kit provides the exact navigation patterns (bottom navigation, navigation rail, navigation drawer), the exact notification patterns, and the exact interaction models that Android users expect. Deviating from these patterns without a specific reason frustrates Android users who have built strong mental models around platform conventions.
View Android UI Kit on Mantlr →
10. Chakra UI Kit — Accessibility-First Components
By: Community contributors
Available at: Figma Community
License: MIT
Components: 60+
Variables: Partial
Dark mode: ✓
Best for: Accessibility-focused products, React projects using Chakra UI, inclusive design work
Chakra UI has built its reputation on one thing: accessibility as a first-class concern. The Figma kit reflects this philosophy — every component includes proper focus states, every interactive element has keyboard navigation patterns documented, every color combination is checked against WCAG standards.
In 2026, accessibility isn't a nice-to-have — it's a legal requirement in many markets and an ethical baseline everywhere else. Chakra's kit makes designing accessibly the path of least resistance rather than an additional effort.
What specifically Chakra does better than alternatives: Focus visible states. The visible focus ring — the outline that appears when navigating with a keyboard — is one of the most neglected components in most design systems. It's either invisible (failing accessibility) or ugly (chosen to be hidden). Chakra's focus states are beautiful and prominent. They demonstrate that accessible doesn't mean ugly.
View Chakra UI Kit on Mantlr →
11. Ant Design Figma Kit — The Enterprise Asia Standard
By: Ant Design Team (Alibaba)
Available at: Figma Community
License: MIT
Components: 400+
Variables: Partial
Dark mode: Partial
Best for: Enterprise B2B products, Asian market products, admin dashboards, data management tools
Ant Design is the most widely used enterprise design system in Asia and increasingly globally. Originally developed by Alibaba, it powers Alibaba's own products, Taobao, and thousands of enterprise applications worldwide.
The component coverage for enterprise use cases is comprehensive: complex data tables, tree views, cascader selects, transfer lists, timeline components — patterns that enterprise users need and most Western design systems don't address.
View Ant Design Kit on Mantlr →
12. Radix UI Figma Kit — The Headless Component Reference
By: Community contributors
Available at: Figma Community
License: MIT
Components: 30+
Variables: ✓
Dark mode: ✓
Best for: React developers building on Radix primitives, custom design system development
Radix UI provides unstyled, accessible React components — the behavior without the visual design. The Figma kit provides a reference design layer on top of those primitives.
For teams building custom design systems on Radix primitives (which is increasingly common as it's the foundation beneath shadcn/ui, Radix Themes, and dozens of custom systems), this kit provides a starting point that's already aligned with the component behavior model.
Browse Figma UI Kits on Mantlr →
13. MUI (Material UI) Figma Kit — The React Material Standard
By: MUI Team
Available at: MUI.com
License: Free tier available (MIT), Pro version paid
Components: 1,000+ (Pro), 50+ (free)
Variables: ✓
Dark mode: ✓
Best for: React projects using MUI, teams maintaining existing MUI codebases
MUI is the most popular React component library, with tens of millions of downloads per week. The official Figma kit from MUI provides design-side alignment with the code-side reality.
The important distinction: The free Figma kit has approximately 50 components. The full kit with 1,000+ components requires a paid MUI subscription. If your team is already paying for MUI Pro or MUI X, the Figma kit is included. If not, evaluate whether the free component coverage meets your design needs before committing.
Browse Figma UI Kits on Mantlr →
14. Basecamp Figma Design Kit — Minimal and Thoughtful
By: Community contributors
Available at: Figma Community
License: Free
Components: 80+
Variables: Limited
Best for: Project management tools, collaboration software, productivity applications
Inspired by Basecamp's minimalist approach to software design, this kit prioritizes function over form — every component exists because it serves a purpose, not because it looks impressive in a preview.
The result is a kit that helps you think about information hierarchy and user task completion rather than visual polish. For products where "getting work done" is the user goal, this philosophy produces better designs than systems that emphasize visual sophistication.
Browse Figma UI Kits on Mantlr →
15. SaaS Dashboard UI Kit — The Dashboard Specialist
By: Various creators on Figma Community
Available at: Figma Community
License: Free for commercial use (verify per creator)
Components: 100+
Variables: Varies by version
Best for: Analytics dashboards, admin panels, business intelligence tools, internal tools
Dashboard design is a specialty. The patterns that work for marketing pages or consumer applications don't translate well to the dense, data-rich environments of analytics dashboards and admin interfaces.
This kit was built specifically for this context. Chart components (line, bar, area, donut) with realistic data that you can modify. Metric cards with trend indicators. Data tables with sort and filter states. Sidebar navigation with multi-level nesting. Filter panels. All the patterns that make dashboard design genuinely complex, handled in a single kit.
View SaaS Dashboard Kit on Mantlr →
16. Wireframe Kit — For Early-Stage Exploration
By: Multiple creators on Figma Community
Available at: Figma Community
License: Free
Components: 100+
Variables: Minimal
Best for: Early ideation, client presentations before visual design, user testing with low-fidelity prototypes
Wireframe kits serve a specific and important purpose: they provide enough structure to communicate layout and information architecture without the visual design detail that can distract stakeholders from structural feedback.
When a client sees a polished, colored UI mockup, they often focus on aesthetic decisions ("can we make that button more orange?") instead of structural decisions ("is this the right information hierarchy?"). Wireframes keep the conversation on structure where it belongs in early stages.
The best wireframe kits use grayscale, simple geometry, and placeholder content to communicate layout with no visual design signal.
Browse Figma Resources on Mantlr →
17. Banking and Fintech UI Kit
By: Community creators
Available at: Figma Community
License: Free for commercial use (verify)
Components: 80+
Variables: Partial
Dark mode: Partial
Best for: Fintech apps, banking interfaces, payment products, wealth management tools
Financial product design has specific requirements that general-purpose kits don't address: the visual vocabulary of trust (blues, greens, conservative layouts), the data display patterns for financial information (account balances, transaction histories, portfolio performance), and the careful handling of sensitive operations (confirming high-stakes transactions, showing account numbers).
This kit was built with those requirements in mind. The color palette defaults to trust-building tones. The transaction list components handle every state (completed, pending, failed, reversed). The number display handles edge cases (negative values, foreign currency, large numbers) that generic number display components ignore.
View Banking App Kit on Mantlr →
18. Design System Starter Kit — Build Your Own System
By: Various creators
Available at: Figma Community
License: Free
Components: 30–50 core components
Variables: ✓ Full token structure
Best for: Teams building a custom design system from scratch
Sometimes the right choice isn't an existing design system — it's building your own. But "build from scratch" is a misleading instruction. A design system has a structure — token layers, component layers, pattern layers — and starting without that structure is like building a house without a foundation plan.
The Design System Starter Kit provides the structure without the visual decisions. It has the token architecture, the component template structure, and the documentation pages pre-built. You supply the visual design on top of that foundation.
Browse Figma Resources on Mantlr →
How to Choose the Right Kit for Your Project
This is the question the list doesn't answer by itself. Here's the decision tree I use:
Building a web application? → Start with Untitled UI. It's the best-balanced general-purpose kit available.
Building for iOS specifically? → Apple's iOS kit. Non-negotiable. Deviate from platform conventions intentionally, not accidentally.
Building for Android or Flutter? → Material Design 3. Google's official implementation is the right foundation.
Working with React and Tailwind? → shadcn/ui kit for design-code alignment.
Building a Shopify app? → Polaris. The component vocabulary is matched to what merchants expect.
Building an enterprise B2B tool? → Primer (developer tools), Carbon (data-heavy products), Ant Design (Asia-market products).
Building a dashboard or admin panel? → SaaS Dashboard UI Kit as supplement to any general-purpose system.
Starting a new custom design system? → Design System Starter Kit as foundation, then build on top.
Where to Find More UI Kits
Beyond this list, there are several reliable places to discover high-quality Figma UI kits.
Figma Community is the primary source. Filter by "UI Kits" and sort by "Most Popular" — then sort by "Most Recent" to find newer kits that haven't yet accumulated the social proof of older ones. Good kits don't always surface quickly.
Mantlr is where we've curated the best design resources across all categories — including UI kits — saving you the discovery work. Every kit is reviewed before being listed.
The product's own website is often the best source for official kits. Material Design, Polaris, Primer, Carbon — all publish their official Figma kits on their product documentation sites, not just on Figma Community.
The One Mistake That Makes Every Kit Less Valuable
Installing a UI kit and using components without understanding the system underneath it.
A button from Untitled UI looks good in isolation. But Untitled UI's button system — the 4 variants, 5 sizes, 6 states, and the color token logic connecting all of them — produces interfaces that feel systematically designed rather than assembled. That systematicness only emerges if you engage with the system, not just the components.
Before using any kit from this list in a real project, spend one hour with the documentation. Open the Design Tokens page. Understand what the color scales mean. Understand how spacing is structured. Then start designing.
The designers who get the most from excellent tools are the ones who understand how those tools work. The components are the output. The system is the input.