A·All Concepts
03
A

Auto-Layout

Constraints that set you free.

1 min read·Community

Auto-layout is Figma's implementation of constraint-based design — a system that lets components resize and reflow intelligently based on their content, mirroring how CSS Flexbox works in the browser.

The Thought

Before auto-layout, Figma components were static. A button was a fixed-width rectangle with text on top. Changing the label meant manually resizing the container. Auto-layout changed this by introducing the same model that frontend developers use: a parent that knows how to arrange its children, with rules for direction, spacing, padding, and sizing behaviour.

The real shift auto-layout introduced was not technical but conceptual. It forced designers to think in systems rather than compositions. A component built with auto-layout has rules — it behaves. A frame without auto-layout is just a picture. The discipline of building "behaviourally correct" components in Figma directly reduces the gap between design and engineering.

Nested auto-layout is where the power compounds. A button is auto-layout. A button group is auto-layout. A toolbar containing button groups is auto-layout. Each layer inherits and extends the logic of the one below it, creating compositions that are genuinely responsive within the design tool — not just in the browser.

Key Principles
  1. 01

    Think in layout rules, not in fixed positions — components should behave, not just sit.

  2. 02

    Use hug-contents for elements whose size should follow their content.

  3. 03

    Use fill-container for elements that should stretch to fill available space.

  4. 04

    Nested auto-layout mirrors nested Flexbox — design and code share the same mental model.

  5. 05

    Fixed dimensions in auto-layout are a smell — they usually mean the component has not been fully considered.

Related