May 19, 2023

What’s new in the M3 design kit

New updates make it even easier to design and prototype Material apps in Figma

Posted by


Following the latest Material announcements at Google I/O ‘23 come even more resource and tooling updates to help you get started — from design kit prototyping to new tonal surface colors to tips on working with other Material plugins.

Components in the M3 design kit for Figma now have prototyping enabled! Watch your UI mocks come to life in Figma’s prototyping mode with components that respond to interactions like hover, focus, and press.

In addition to prototyping, we’ve added new components to the kit: side sheets, tooltips, and carousel. The new tone-based surface color roles are also newly available in the kit (surfaces 1-5 will remain in the kit for about a year to allow time to transition to tone-based surfaces.)

We’ve put effort into refactoring many of the components so that they are easy to use. All the configurations and states are at your fingertips, and customizing components is easier than ever!

Now featuring dozens of UI components and hundreds of styles, the M3 design kit is the best place to start your journey with Material – and it’s available on our community page for free. Make a copy to your Figma account today to get started!

These updates are brought to you by Material’s Systems Design team.

More than design system librarians, the Systems Design team has also been up to some creative projects. Check out our interactive illustrated Figma prototype that tells the story behind what goes into the making of the M3 design kit.

link
Copy link Link copied

Making mockups come to life

Prototyping can enhance design mockups with realism to communicate design intentions and even help cut down development iterations and documentation time! That’s why the new prototyping enabled components are so exciting.

To get started using them, simply drop the components into your design mockups and switch to Present mode, they are already set up with interaction states prototyped.

link
Copy link Link copied

What’s new this year, so far

It’s been a busy year so far, let’s explore some of those updates in some more detail.

Components added

The carousel, tooltips, and side sheets were added. The carousel was a brand new component for Material, built from extensive research and a spirited vision!

The new side sheet, carousel, and tooltip components.

Additions and Updates

There were some text updates: Two prominent label text styles, label/large-prominent and label/medium-prominent, were added and the Navigation Suite was updated to reflect the new roles.

Lists had an update to supporting text property.

Along with adding text property overrides to several components.

To reflect updates in the M3 color system, components have been updated with the new roles, and the style page has been updated with a new color schematic.

The latest update introduces Surfaces based on tone values, these are no longer read-only overlays.

Surfaces 1–5 will remain in the design kit and material theme builder for current users, but we recommend migrating to new surface tokens as soon as possible.

Fixed accents add a new set of colors that will remain consistent across light and dark themes.

To take advantage of the theming features of the design kit and Material Theme Builder for Figma, make sure to turn on generate State layers to allow creation and updating of these styles. Surfaces are needed to generate and update Surfaces 1–5. Updating or swapping themes across the full kit and state layers can take some extra time, try selecting smaller portions or curating the components.

Material Theme Builder settings

We’re evolving the Material tools and resources to help you create beautiful products with your input. If you have any questions, feedback, or bugs please let us know @MaterialDesign on twitter or goo.gle/MTB-submit-issue for MTB.

As of writing this post, over 300K of you are using the design kit – thank you for being a part of our community! 🎉

Go get started with the Material 3 design kit and try out the Material Theme Builder in Figma.