Principles
Predictable
Use intuitive and predictable layouts with consistent UI regions and spatial organization.
Consistent
Layouts should use grids, keylines, and padding consistently.
Responsive
Layouts are adaptive. They react to input from users, devices, and screen elements.
Layout anatomy
Layout regions are the foundation for interactive experiences. They’re a layout’s building blocks and are composed of elements and components that share a similar function. Layout regions can also group smaller containers such as cards.
A large screen layout has three main regions:
- App bars
- Navigation
- Body
When creating a responsive layout system, it’s helpful to establish minimum and maximum dimensions for the body and margins, as well as scaling behavior that allows each region to adapt to different form factors. The following guidance describes Material’s baseline dimensions and behavior.
Composition
Within each layout region, it’s important to arrange components and internal elements in a way that preserves visual and functional relationships between elements across all screen sizes.
Material measurements
To ensure that Material Design layouts are visually balanced, most measurements align to 8dp, which corresponds to both spacing and the overall layout. Components are sized in 8dp increments, ensuring a consistent visual rhythm across each screen.
Smaller elements, such as icons, can align to a 4dp grid, while typography can fall on a 4dp baseline grid, meaning that each line’s typographic baseline is spaced in increments of 4dp from its neighbor.
Resources
The Material Design Kit on Figma includes templates for working with the breakpoint, column grid, and margin guidance described above. To get started, download it from Material Design community page.