Oct 18, 2022

Introducing the M3 design kit for Figma

Jumpstart your designs with ready-to-use components and styles in Figma

Posted by


Tabula rasa – a clean slate… Sounds great, right? Sometimes a fresh, empty Figma artboard feels full of opportunity, but sometimes it can feel too empty.

On a design team, creativity is communal and contextual. We experiment with forms, fonts, and colors; we ingest and layer onto ideas and sources around us.

With the M3 design kit, UX building blocks are ready to use and customize in your Figma workflow. With premade UI elements and a library of connected components and styles, you can build from a foundation of the latest in Material 3.

Check out the new design kit in Figma and make a copy to start using M3 in your files.

link
Copy link Link copied

More than a sticker sheet

What’s in the M3 design kit? Starting today, you get…

  • 28 UI components
  • 169 Figma components in total
  • 1,984 variants
  • 429 styles

And the design kit is still growing – it’s up-to-date and kept in sync with the design guidelines on Material.io.

Beyond components, variants, and interaction states, the M3 design kit lets you inspect elements and apply semantic color roles. Color roles in the design kit are compatible with Material Theme Builder so you can easily integrate a custom color scheme into your Figma workflow.

link
Copy link Link copied

How it works

The new design kit uses Figma's most advanced features – we’ve added metadata showing accessibility, color values, token names, robust variants, and interaction state details.

Inspect elements to identify Material component specs within your Figma workflow
link
Copy link Link copied

Get started

To start using the design kit, visit the Figma Community page for Material 3 Design Kit and select Get a copy.

To get started, visit the Material Design community page: In the Material Design 3 design kit, select Get a copy.

You’ll get a copy of the file, components, and styles to start using in Figma. Publish the file as a library to make the design kit available through the assets tab to you and your team.

Let us know what you think!

A lot of care, craft, and expertise went into the M3 design kit – we hope you try it out and send any feedback to the team. The Figma Community page for the design kit includes a changelog and more details on support; you can also get in touch with us via Twitter.

Last but not least…Thank you to everyone on the Material design system team for contributing and building out the design kit together.