Skip to content

Scaffold ​

A fundamental UI design structure that provides a standard platform for assembling key components

Overview · Bars · Rails · Panes

Scaffold

  • The layout scaffold structures every piece of an adaptive layout into bars, rails, and panes
  • Bars can frame the page to help people navigate through a product
  • Rails create the perimeter space surrounding panes, creating space for elements like navigation and toolbars
  • Panes hold a product’s primary content, adapting to breakpoints (previously window size classes) and other conditions

Availability & resources ​

TypeResourceStatus
DesignM3 Design Kit (Figma)Available
Spacing system & tokensAvailable
ImplementationJetpack Compose: RulersAvailable

2 diagrams of mobile and desktop layouts, identifying the parts of a scaffold.

  1. Safety region
  2. Bar
  3. Pane
  4. Rail

Unofficial offline mirror. Content © Google, licensed under CC BY 4.0.