Design for watches
Watches have special design considerations and interaction patterns
Overview · Foundations · Styles · Layout
Resources
| Type | Resource |
|---|---|
| Design | About M3 Expressive |
| Design | M3 Expressive on Wear OS |
| Design | Figma Design Kits for Wear OS |
| Implementation | Android Developers: Wear OS |
| Implementation | Jetpack Compose for Wear OS |
New in GM3 Expressive
Design expressive layouts for watches with harmonious shape, animation, color, and typography treatments. All examples shown here are based on Material for Wear OS. More on M3 Expressive on Wear OS
Designed for round screens
A new shape system with edge-hugging containers and buttons creates variety and visual balance on round screens.
More on shape system for Wear OS
Controls for smartwatches can adapt to the form factor
Expressive motion & springs
A new physics-based system makes interactions and transitions feel more alive, fluid, and natural.
More on M3 motion physics
Use motion to make interactions intuitive
Shape morphing
With shape morphing, controls respond to show interaction. Containers change corner radius.
More on M3 shape morphing
Selected buttons change shape to show interaction
Rich color
Dynamic color and deep tonal palettes are applied in a system of color roles to create depth and variety.
The color system includes three main colors and specific color roles to create depth and variety
New type roles
Along with an updated and optimized type scale, new styles serve specific use cases for watches:
More on typography for Wear OS
The baseline type scale is optimized for round screens to keep text legible in a compact space