domains / families / design / better-layout

better-layout

separate

Helps with grouping, alignment, reading order, responsive structure and room for translated text, so a layout holds up when it is resized, translated or mirrored.

When to use

• grouping
• alignment
• reading order
• responsive structure
• room for translated text
• RTL mirroring
• spacing
• stress-testing layout structure

When not to use

• hit areas
• focus behavior
• radius
• shadows
• animation
• line length
• text spacing
• truncation mechanics

Skill page

Source