29 August 2026

Open source design systems for Figma: 10 free kits

The best open source design systems for Figma are Google's Material 3 Design Kit, IBM Carbon, GitHub Primer, Microsoft Fluent 2, and Chakra UI: systems where both the code and an officially maintained Figma library are free. Most "Figma design system" roundups mix paid UI kits, abandoned community files, and actual open systems into one list. This one separates them, and flags for every entry whether the Figma file is published by the system's own team or by the community, because that difference decides whether the file still matches the code a year from now.

This is the Figma companion to our open source design systems list, which ranks the same category by code, licenses, and maintenance status.

Why the official-vs-community distinction matters

Figma Community hosts thousands of free UI kits. What separates a design system kit worth adopting from a pretty artboard:

Official kits track the code. Microsoft's Fluent 2 kit is refactored so component variables align with what ships in the React library. Community forks drift the moment the maintainer loses interest.
Variables and styles are the real payload. A good kit encodes the token architecture (color, spacing, type, radius) as Figma variables, not just drawn rectangles. That is what makes it usable as a source of truth.
Licenses let you ship. The systems below publish code under MIT, Apache 2.0, or CC0. The Figma file is free to duplicate either way, but only an open code license makes the whole system yours.
Maintenance status is public. Official kits list their publisher and update history on the file page. If the publisher is the design system team, updates follow releases.

1. Material 3 Design Kit (Google)

The Material 3 Design Kit is the official Figma library for Material Design 3, published by Google's Material team.

What it does:

Official kit, published and maintained by Material Design
Core component set plus the M3 color system and type styles, announced on the Material blog
Dynamic color theming that mirrors how M3 tokens work on Android and the web
Sibling kits for Android releases from the same publisher
Google Design has a write-up on how the kit is built, and reports it is the most used design kit on Figma Community by a wide margin

Best for: Android and cross-platform product teams, and anyone studying how a token system should be encoded as Figma variables

Why it makes the list: the most influential design system ever published, with a first-party Figma kit that tracks the spec. One caveat from our code-side review: the Material Web component library is in maintenance mode, so verify your target platform before betting on M3 for web.

Tip: pairing the kit with a DESIGN.md of your actual brand values keeps agents from defaulting every project to stock Material purple.

2. Carbon Design System (IBM)

Carbon publishes its Figma libraries the same way it publishes code: versioned and official. The main library is the (v11) Carbon Design System file.

What it does:

Official kits, documented on the Carbon site with instructions per library
Component library plus separate theme libraries for Carbon's light and dark themes
The visual assets are versioned in the open carbon-design-kit repository, so kit releases are traceable like code releases
Backed by Apache 2.0 code: React, Web Components, Angular, Vue, and Svelte implementations
IBM Plex, the system typeface, is open source and free to use in your Figma files

Best for: data-heavy enterprise products and teams that want the Figma layer under the same governance as the code layer

Why it makes the list: Carbon treats the Figma kit as a release artifact, not a marketing asset. For agent workflows, our extracted design system examples use Carbon as the organization benchmark.

3. Primer Web (GitHub)

Primer is GitHub's design system, and Primer Web is the official Figma library GitHub's own teams use to design GitHub.

What it does:

Official kit from Figma's @primer publisher page, with setup docs on primer.style
Components match what ships in Primer React, Primer ViewComponents, and Primer CSS
Shared styles and the full Octicons icon set are published alongside the component library
The Figma side has its own open repository, primer/figma
MIT-licensed code across the Primer implementations

Best for: developer tools and dense, text-heavy product UI

Why it makes the list: the tightest public example of a Figma library that mirrors production components one-to-one. If your product should feel like GitHub, this is the reference, and the duply library has the extracted-token version for your agent.

4. Fluent 2 (Microsoft)

Fluent 2 is Microsoft's open design system, with official Figma kits per platform: Fluent 2 Web and Fluent 2 iOS among them.

What it does:

Official kits, linked from the Fluent 2 design docs
The web kit was refactored so component variables align with the Fluent UI React code
A separate design language file carries the global and alias variables: color, stroke, radius, spacing, and size tokens
Companion kits for Fluent iconography and emoji from the Microsoft publisher page
MIT-licensed Fluent UI code on GitHub

Best for: productivity software, Microsoft-ecosystem products, and multi-platform token architecture study

Why it makes the list: the variables-aligned-to-code refactor is exactly what a design system Figma kit should be, and few vendors have done it this thoroughly.

5. Chakra UI Figma Kit

Chakra UI shipped its official v3 Figma kit in 2025: the Chakra UI Figma Kit (v3).

What it does:

Official kit, documented on chakra-ui.com
Pre-built components with variants and sizes already configured
Design tokens that match Chakra's semantic token system in code
Free on Figma Community, with the MIT-licensed React library on GitHub
Replaces years of unofficial community Chakra kits

Best for: React app teams that want design and code speaking the same token names

Why it makes the list: Chakra crossed from community-kit chaos to a first-party kit, which is the single biggest quality jump a system can make on this list.

6. U.S. Web Design System (USWDS)

USWDS is the U.S. federal government's design system, public domain by law, with an official USWDS Design Kit on Figma Community.

What it does:

Official kit from the USWDS team, shipped in late 2024, currently labeled beta
42 components built with USWDS design tokens, using Figma variables and auto layout
Also distributed as a direct download alongside Sketch assets
CC0 public domain code, so there is no license question at all
Long-running community predecessors (like the Truss library) are now superseded by the official kit

Best for: government and civic tech, forms-heavy services, and accessibility-first products

Why it makes the list: the accessibility documentation is the deepest of any system here, and public domain means zero license risk.

7. Cloudscape (AWS)

Cloudscape is AWS's open design system for the consoles that run a large share of the internet, and its Figma assets are listed among the open design systems on Figma Community.

What it does:

Apache 2.0 code with React components built for dense, data-heavy cloud interfaces
Design resources published for the Cloudscape component set
The deepest public patterns for tables, filtering, split panels, and dashboards
Dark mode and compact density modes as first-class features

Best for: dashboards, admin panels, and internal tools

Why it makes the list: nothing open source matches Cloudscape's coverage of hard dashboard patterns. It also anchors our best design systems for dashboards list.

8. Ant Design

Ant Design is the most used open source design system in the world by npm downloads, with MIT-licensed React code. Its Figma story is the caveat: the kits are community-maintained.

What it does:

Multiple free Figma libraries, including the "Ant for Figma" community kit listed on DesignSystems.com's open systems roundup
A community "Ant Design Open Source" library that, per a Figma Community review on Medium, is "always up to date with the latest changes to the official repo"
Enormous component coverage: tables, forms, date pickers, and the enterprise long tail
Full theme token system in code via CSS-in-JS design tokens

Best for: enterprise apps and internal tools where component breadth beats visual distinctiveness

Why it makes the list: the system itself is open and excellent; just check the update history on whichever Figma kit you pick, because none of them are first-party.

9. shadcn/ui

shadcn/ui is the copy-paste component system that took over AI-assisted development. Its Figma kits are community-built, but the project officially links them from its docs.

What it does:

The docs endorse community kits including the Obra shadcn/ui Community Edition (free, all components, theming system) and maintained libraries by community authors
Components in the kits mirror the Radix-based primitives and Tailwind styling of the code
MIT-licensed code that you own outright because it is copied into your repo, not installed
The default aesthetic of most AI coding tools, which is exactly why unstyled shadcn output all looks the same

Best for: AI-agent workflows and React teams that want full ownership of component code

Why it makes the list: it is the de facto UI layer of vibe-coded apps. Giving your agent a real design system on top of shadcn is the difference between shipping the default look and shipping your look.

10. GOV.UK Design System

The GOV.UK Design System pairs MIT-licensed frontend code with the best pattern writing in the industry. Like Ant, its Figma presence is community and government-team maintained rather than one canonical file.

What it does:

A GOV.UK Design System Figma kit maintained by the UK Ministry of Justice design team for service prototyping
Styles, components, and patterns matching govuk-frontend
Pattern documentation in the source system that explains when to use each component, not just how it looks
Battle-tested by services used by millions under legal accessibility requirements

Best for: forms, onboarding flows, and any service where clarity beats branding

Why it makes the list: the writing. Even if you never use the components, the pattern docs will improve the rules you write into your own design contract.

More official libraries worth a look

The DesignSystems.com open systems directory tracks dozens more first-party files on Figma Community. Standouts with open source code behind them: GitLab's Pajamas, Spotify's Backstage, Uber's Base, and Twilio's Paste. The Design Systems For Figma directory is another maintained index if you want the full landscape.

How to use these with an AI coding agent

A Figma library equips the humans. Your coding agent cannot open it. To get the same system into Claude Code, Cursor, v0, Lovable, or Bolt:

Pick the system that matches your product's density and tone (Carbon or Cloudscape for dashboards, Primer for dev tools, M3 for consumer).
Duplicate the Figma kit for design work, and pull the same system's tokens as a DESIGN.md file: one markdown contract with color tokens, type scale, spacing, and written rules.
Browse the duply library for 250+ real products already extracted into that format, like Linear, Stripe, and Notion.
Drop the file in your repo and wire it per tool using our agent setup guide, so generated UI matches the Figma file your designers use.

That closes the gap that breaks most Figma-to-code workflows: design and generation working from the same written values.

FAQ

What is the best free design system for Figma? The Material 3 Design Kit is the most complete and most used free kit on Figma Community, and it is officially maintained by Google. For enterprise UI, Carbon's v11 library is the strongest official alternative; for developer tools, Primer Web.

Are these Figma design system files really free? Yes. Every kit listed here is free to duplicate from Figma Community. The code behind them is MIT, Apache 2.0, or CC0 licensed. Paid kits like Untitled UI also rank for this query but are neither open source nor free, which is fine, just a different category.

Is the Material 3 Figma kit official? Yes. It is published by the Material Design team and announced on the official M3 blog. Several popular "Material" kits on Figma Community are community remixes, so check that the publisher is Material Design.

Does shadcn/ui have an official Figma kit? No first-party kit exists. The official docs link community-built kits, including a free complete community edition. Treat the docs page as the source of truth for which kits are current.

What is the difference between a design system and a Figma UI kit? A UI kit is drawn components. A design system adds the decisions: tokens, usage rules, accessibility requirements, and code that implements them. Everything on this list is a system with a kit attached; most files on Figma Community are kits only. Our design system examples post breaks down what complete looks like.

Can my AI coding tool read a Figma file? Mostly no, and even with Figma integrations the output drifts. Agents work best from written constraints in the repo. That is the job of a DESIGN.md file: the same tokens the Figma library encodes, in a format the model actually reads.

Which open source design system has the best Figma variables setup? Fluent 2 and USWDS are the strongest teaching examples right now: Fluent 2 for its global-and-alias variable architecture, USWDS for token-driven components built entirely on variables and auto layout.

Should I build my own Figma design system instead? Start from one of these and subtract. Forking an official kit and re-theming its variables is dramatically faster than drawing from zero, and you inherit accessibility and states work that took these teams years.

The list, ranked

Best overall Figma kit: Material 3 Design Kit, official and exhaustive
Best for enterprise and dashboards: Carbon, with Cloudscape for the hardest data-UI patterns
Best code-to-Figma fidelity: Primer Web and Fluent 2
Best newly official kit: Chakra UI v3
Best license: USWDS, public domain
Best for AI-agent workflows: shadcn/ui plus a real design contract on top

Pick the system, duplicate the kit, then give your agent the same values: browse the duply library and grab a DESIGN.md so the code your AI writes matches the Figma file your team designs in.

Related reading