Shape
The M3 shape system includes original shapes, a corner radius scale, and built-in shape morphing
Overview & principles · Corner radius scale · Shape morph
- Use abstract shapes thoughtfully to add emphasis and decorative flair
- Leverage Material shapes for built-in shape morphing
- Rectangular shapes are fully rounded in all corners by default
- Individual corners can be adjusted to create asymmetrical rectangular shapes
Abstract shapes can help people express themselves
Availability & resources
| Type | Resource | Status |
|---|---|---|
| Design | Shape library (Figma Design Kit) | Available |
| Implementation | Jetpack Compose (Shape Library) | Available |
| Implementation | Android Views (MDC-Android) | Available |
M3 Expressive update
May 2025
Added 35 new shapes and shape morphing to Material Shape Library (Figma Design Kit) and Jetpack Compose.
Added new shape principles and a refreshed art direction.
Added corner radii tokens:
- Large increased (20dp)
- Extra large increased (32dp)
- Extra extra large (48dp)
- Updated fully rounded corners to use full. Previously, this was defined using 50% of the component size.
Overview of Material shapes
Shape library
M3 has 35 shapes to easily apply to designs
Use shapes and text in harmony
Shapes are expressive elements of Material 3 that echo key visual attributes of M3 typography.
Use shape and type together for products to feel cohesive and polished.
M3 shapes and Google Sans Flex share roundness visual attributes
Shape morphing should respond to user interaction
Morph shapes to connect function and feeling
Shapes should morph to improve understanding and add moments of delight. Use shape morph to better communicate:
- Interaction states, like when a button is selected
- Actions in progress, like a friend typing, or a page loading
- Changes in the environment, like sound, temperature, or time of day
Think about how shapes could react to different interactions, such as tapping, swiping, scrolling, releasing, and long pressing.
Be bold and dare to embrace tension
Tension happens when the shape story changes unexpectedly, such as when contrasting shapes are used. This can be created using both square and rounded shapes, unconventional shapes, and other contrasting elements.
Material historically focused on rounded shapes. However, using sharp shapes, thereby adding tension, creates more dynamic design, one that’s more memorable and expressive.
This tension can be used in many ways, like conveying states, drawing attention to an element, or to improve the visual aesthetic.
Create tension by using a combination of round and square shapes
Shapes and motion can communicate actions in progress
Shape is versatile, not semantic
Avoid making shapes literal or assigning a specific function or meaning to a single shape.
For example, the loading indicator can be wavy, but the waveform is not a strict symbol of progression. Progress could just as easily be shown using rotating shapes or shape morph.
Plus, waveforms could be used in other places unrelated to progress, like button containers.
Use abstract shapes sparingly
Be intentional when using shapes in product UI. Don’t compromise clarity for the sake of visual design.
When incorporating diverse shapes, think about how they fit into the overall design and consider how they balance with the entire composition. Ensure that shapes resonate with the product's narrative. Consider the 'why' behind their inclusion and the value they contribute to the overall user experience.
Caution
Shapes without clear meaning behind why they’re different can add more visual clutter than delight
Essential shapes can use shape morph to communicate change
Use abstract shapes on imagery and decorative UI
Emphasize aesthetic moments with shape
Get creative when using shape in graphics, for photography cropping, personalized avatar masking, and other non-interactive elements.
Decorative moments offer the most flexible and creative uses of shape.
Shape can be 2.5D
When effectively used, shape and motion can make 2D visuals feel 3D. They provide the illusion of depth and volume, making visuals more eye-catching and natural.
Apply motion and shape differently on each layer to give it the illusion of depth