Material 3 Expressive: What’s New and Why it Matters for Designers

What's new in Material 3 Expressive

Material Design 3 (M3) builds on the core philosophy of Material You, introducing new tools and guidelines that empower designers to create more personal, expressive, and accessible experiences—across platforms and devices. This evolution focuses on how things look and how they feel, move, and function in context.

Here’s what’s new and why it matters.

Dynamic color

M3 creates new opportunities for brand colors and personal color choices to blend into unique experiences. This color system allows colors to match an app’s design while respecting users’ individual preferences.

When an app enables dynamic color, it can maintain the colors that define and identify a product while also giving users more control over the styles that matter most to them.

Motion physics

Material introduced the motion physics system with M3 Expressive. This system makes interactions feel alive, fluid, and natural. It offers a new motion language for Google products. Plus, it is easier to apply and customize than ever.

The physics system is replacing the previous system based on easing and duration.

Shape system overhaul

Shapes now play a much stronger role in branding and visual rhythm. The latest M3 Expressive update added 35 new shapes and shape morphing to the Material Shapes Library (Figma) and Jetpack Compose. It also introduced new shape principles and a fresh art direction. Corner radii tokens were added, and fully rounded corners were updated to use full. Before, this was set at 50% of the component size. All these updates mean that you can now use shapes and text in harmony.

Focus on accessibility and inclusivity in every element

One key update in Material Design 3 is its focus on accessibility and inclusivity. Every part of M3, including color, typography, motion, and components, aims to create experiences that are usable by as many people as possible. This applies to different abilities, environments, and devices.

This isn’t just an add-on, it’s built into the system.

Introducing M3 Expressive

Today, people are seeing their devices more and more as a part of themselves rather than just tools. This is because interfaces that look and feel good can get to you on an emotional level. They create a connection by giving you a certain feeling or mood through how they look and interact. Material 3 Expressive is the next step in the Material 3 design system. It’s a set of new features, updated components, and some new design approaches to make user experiences that really resonate emotionally.

It's also important to mention that M3 Expressive isn’t a new version of the system, as stated in the company’s blog.

We'll go through all the new components introduced in a bit, but first, let's review the Google I/O 2025 highlights.

Google I/O 2025 highlights - how M3 Expressive fits into their vision

At Google I/O 2025, the team showcased M3 Expressive as a key evolution of Material Design's role in the future of digital products. M3 Expressive is backed by more user research than any previous update to Google's design system ever. They conducted 46 research studies and had more than 18,000 participants from all around the world. The studies showed that people prefer M3 Expressive designs. What’s interesting is that this preference spans all age groups (see the image below). They also found that expressive designs were more usable.

Example use cases for modern apps

So, how can you use Material 3 Expressive in practice? Here are a few common use cases that make the most of its new visual and structural freedom:

• Use a variety of shapes

• Apply rich and nuanced colors

• Guide attention with typography

• Contain content for emphasis

• Add fluid and natural motion

• Leverage component flexibility

• Combine tactics to create hero moments

New Material 3 Expressive components

You must be wondering by now what the new components featured in Material 3 Expressive are. Let's go through all the new/updated components. They now feature more configuration capabilities, shape options, emphasized text, and other expressive updates.

Brand-new components introduced in the M3 Expressive update:

Button groups

Button groups are a new component in the Material 3 Expressive update. They apply shape, motion, and width changes to buttons and icon buttons to make them more interactive. Think of them as containers that hold buttons of different shapes and sizes. Button groups work with all button sizes, from XS to XL.

FAB menu

The FAB menu adds more options to the FAB and should replace the speed dial and any usage of stacked small FABs. It uses contrasting colors and large items to focus attention. An FAB menu can open from any size FAB and is compatible with any FAB color style.

Differences from M2:

• M2: The speed dial used small round FABs

• M3: The FAB menu uses dynamic color and a larger item size

Loading indicator

The loading indicator is a new component in the Material 3 Expressive update. It is designed to show the progress that loads in under five seconds. Loading indicators are used in the pull-to-refresh behavior and should replace most uses of the indeterminate circular progress indicator. 

Split button

The split button has a separate menu button that spins and changes shape when activated. You can use them alongside other buttons of the same size. Split buttons have the same five recommended sizes as label and icon buttons. They have elevated, filled, tonal, and outlined color styles.

Toolbars

The bottom app bar is being deprecated and should be replaced with the docked toolbar, which functions similarly but is shorter and more flexible. The floating toolbar was created for greater versatility, greater number of actions, and more variety in placement. The bottom app bar is still available but not recommended. Toolbars are flexible, which means they can hold many elements and components and be paired with FAB.

Differences from M2:

• Color: New color mappings and compatibility with dynamic color

• Elevation: No shadow

• Layout: Container height is taller, and the FAB is now contained within the app bar container

Updated components:

• Top app bars

• Carousel

• Common buttons

• Extended FAB

• FABS

• Icon buttons

• Navigation bar

• Navigation rail

• Progress indicators

XR additions:

• XR App bars

• XR Dialogs