Material 3 Expressive changes motion and color tokens: what to review in Figma
Material Design's official documentation details how M3 Expressive's physics-based motion tokens, more vibrant palette, and new shapes affect accessibility and design system handoff in Figma.
Material Design's official site, m3.material.io, describes M3 Expressive as Material 3's "emotion-driven" layer: more vibrant colors, physics-driven motion, adaptive components, flexible typography, and shapes with sharper contrast. The proposal was born at Google I/O in May 2025 and keeps receiving updates: the Figma M3 Design Kit is listed as updated in the official documentation, and a post published on May 19, 2026 reinforces that Material for Android is now "Compose-first." It's not a sudden arrival, it's a set of changes that has already been in production for more than a year and that design system squads are still absorbing.
For those who maintain their own library in Figma, this isn't just "swapping the visual skin." The documentation lists 14 new or updated components in the Expressive cycle, including Toolbars, Split button, Button groups, and a reworking of Progress indicators with customizable waveform and thickness. Each of these carries tokens that didn't exist in the kit's previous version, and ignoring them means the team's library is already misaligned with the official reference without anyone noticing.
From duration and easing to spring physics
The most structural change, and the one that breaks traditional handoff the most, is in the motion system. Material has historically specified transitions with two simple values: duration in milliseconds and an easing curve. That's how design redlines have been standardized for years: "300ms, ease-in-out."
The "Using motion physics" post, linked on Material's own page, describes a token-driven "motion physics" system, with explicit changes to existing APIs. Instead of a fixed duration, motion now responds to physics parameters, such as stiffness and damping, designed to produce the "bounce" feel that characterizes Expressive.
In practice, this has three direct consequences for anyone who designs and documents components:
- Old specs become incomplete. A "200ms ease-out" annotation no longer describes the component's actual behavior; it's necessary to document the physics parameters (not just time and curve).
- Handoff plugins and AI code generation may not understand the new token. If the Dev Mode tool, Anima, or any design-to-code assistant only knows how to read
durationandeasing, the generated code falls back to a generic CSS transition and loses Expressive's motion identity. - Figma's variables library needs a new token category, separate from the existing color and spacing structure, to store these physics parameters in a way the engineering team can consume without manually reinterpreting them.
Shapes that transform, more vibrant color, contrast at risk
The shape library has also grown: the documentation mentions 35 shapes, with shape morph built into the component itself. A button can change shape during an interaction without this being a separate animation, it's part of the component's token. Combined with a color palette described as more vibrant, the visual result is more expressive, but also riskier from a contrast standpoint.
In short: visual vibrancy and WCAG compliance pull in opposite directions, and Material's documentation doesn't resolve that conflict for you. More saturated system colors, designed for emotional engagement, can reduce the contrast margin that more conservative "classic" Material 3 palettes guaranteed by default. Squads that adopt the Expressive palette without re-auditing text/background color pairs risk inheriting an accessibility regression along with the new visuals.
The built-in shape morph raises the same question for anyone dealing with motion sensitivity. A shape transition that's more pronounced than a simple icon swap tends to have greater amplitude than Material's classic motion token, which makes the prefers-reduced-motion variant non-optional: it's not enough to zero out the duration, you also need to turn off or tone down the physics intensity, otherwise the "bounce" effect remains present even with the flag active.
The Figma kit changed, but your team's library doesn't change on its own
The Figma M3 Design Kit, made available as an official community file, was updated to include Expressive's components and styles. This solves the problem for those starting a project from scratch, but doesn't solve the problem for those who already have a forked or customized library running in production for months.
In those cases, the work is manual auditing: comparing the updated kit component by component against the internal library, identifying which of the 14 new/updated components make sense for the product, and deliberately deciding what gets in and what stays out, instead of inheriting everything by inertia. It's also worth remembering that typography got its own chapter: the Google Sans Flex variable font was open-sourced as part of this same wave, and any design system that still locks into fixed font weights loses the flexibility Expressive assumes.
Compose-first: a signal for those doing handoff with AI
The May 19, 2026 post announcing Material Android as "Compose-first" isn't just a note for Android teams. It signals where the Material team is investing API priority, and that matters for anyone using AI-assisted design-to-code tools.
If the reference implementation of the new tokens (motion physics, morphable shapes) is born first in Compose, it's reasonable to expect that plugins and assistants generating web code from Figma will lag a step behind in coverage of those specific tokens. Before blindly trusting code automatically generated from an Expressive component, it's worth manually checking whether the tool actually interpreted the physics token or just approximated it as a generic CSS transition.
What to put on the review list
For a squad that already uses Material 3 and is deciding whether to adopt Expressive now, the practical checklist that emerges from the documentation itself is:
- Audit the 14 new/updated components against the internal Figma library.
- Redefine the motion token structure, moving from duration/easing to the physics parameters documented in the motion theming blog post.
- Run a new round of contrast testing on the expressive system's vibrant colors, don't assume that what passed in "standard" Material 3 still passes.
- Define the
prefers-reduced-motionvariant for shape morph and motion physics, not just for durations. - Manually validate the output of any AI handoff pipeline on components that use the new tokens, before trusting the generated code.
None of these points appears as an explicit warning on Material Design's homepage, they remain implicit in how the documentation describes the changes. It's exactly this kind of gap that separates adopting Expressive only visually from adopting it in a way that doesn't break accessibility or the contract between design and engineering.
Source 1: Material Design 3 (official site) (https://m3.material.io/)
Title: Material Design 3 - Google's latest open source design system
URL Source: https://m3.material.io/
Markdown Content: link
Copy link Link copied
Material at Google I/O 2026
May 19, 2026 Material Android is Compose-first Start migrating to Compose to get the latest from MaterialGoogle I/O 2026 Check out all the announcements, keynotes, sessions, and fireside chats on the main site for Google I/O 2026
M3 Expressive: Design with emotion
Build more usable and engaging products with emotion-driven UX. M3 Expressive adds vibrant colors, intuitive motion, adaptive components, flexible typography, and contrasting shapes.
Updated: Figma M3 Design Kit Quickly create design mockups and prototypes with the latest Material 3 Expressive components and stylesNew: Motion physics Easier-to-implement motion system for more customizable transitions—powered by tokens
Expanded: Shape library New set of 35 shapes to add decorative visual elements, with built-in shape morph motionBlog: Guide to our latest update Get a full introduction to the latest evolution of Material, including new components and style updatesGoogle Design: Making Google Sans Flex How seven design problems shaped Google's iconic typeface — from inception to going open-source
Expressive components
New: Toolbars Flexible component to display frequently used actions. Toolbars hold a variety of controls like buttons, and can also be paired with a FAB.New: Split button Pair a button with related actions in a connected menu. Split buttons leverage expressive shape and motion strategies.
Updated: Progress indicators An eye-catching way to show the status of a process in real time. Customize waveform and thickness to show progress with style.New: Button groups A new way to organize related buttons—with shape-shifting buttons that bump and react to each otherSee all expressive components Check out all 14 new and updated M3 Expressive components
How to apply M3 Expressive
Blog: Using motion physics Learn how the motion scheme works, the changes to existing APIs, and what you need to know to leverage itWatch: Build with M3 Expressive Discover how to use Material's emotional design patterns to boost usability and desire for your product
Latest in Material & Google Design
Material Design blog Discover what's new, tutorials, and inspiration from the Material teamGoogle Design Learn about the craft of design at Google, with articles written by designers and developers, how-to guides, and podcasts
Next steps
Get started Guides, videos, and tools to start building with MaterialFigma M3 Design Kit Customizable styles and components to help you design with Material 3
Develop Code and developer documentation for building with Material
Translated from the Brazilian Portuguese original · Read the original
AI Tools Don't Give a Founder the Judgment They Lack
The narrative of the solo founder who builds everything alone with AI conflates two things: being able to produce a product and knowing whether that product is good. These are different skills, and only the second one decides who survives after the MVP.
