How do you express web layouts with Figma components and auto layout?
Make design parts adapt to text and space rather than fit only one fixed screenshot.
Auto layout arranges Figma content using direction, gaps, padding, and alignment rules. It helps designs adapt to changing text and parts and makes them easier to reuse than fixed positioning.
Keep these basics in mind
- Hug contents lets an area grow to fit its content. Fill container uses space provided by the outer area.
- Nesting places one layout inside another, such as text and action groups within a card.
- Use component properties for necessary changes, such as editable text or replaceable icons. Each label does not need its own version.
- Try long text, added or removed items, and different widths to check that structure adapts as intended.
See Figma’s auto-layout guide for layout relationships and its component-property guide for options.
From fixed placement to adaptable structure
Illustrative component changes
This is a hypothetical service card.
| Change | Fixed-position problem | Rule-based result |
|---|---|---|
| Longer heading | Covers the description | Area grows after heading wraps |
| More explanation | Conflicts with the button | Content and actions arrange sensibly |
| Narrower card | Content exceeds boundaries | Agreed size relationships guide adjustment |
Walk through an example
A designer separates a service card into text and action groups and sets their gap. A long heading makes the card grow. They check narrow width and an optional hidden icon, record the adjustable behaviour, and pass it to a developer for implementation and browser checks.
Limits and common misunderstandings
Figma auto layout is not a browser layout engine. Flexible designs do not prove wrapping, breakpoints, or zoom are implemented in code. Fixed sizes are not always wrong, but need clear reasons and checks with changing content.