What is Auto Layout in Figma? A complete explanation
Introduction
Auto Layout is arguably Figma's most important feature for modern interface design. It allows frames to grow, shrink, and reflow their content automatically, mirroring how code works (like CSS Flexbox).
Instead of treating a button as a rectangle with text on top, Auto Layout treats it as a container with padding and a text child. If you change the text, the button resizes. This shift from 'drawing' to 'structuring' is key to scalable design.
Guide Steps
The Container Model
Think of an Auto Layout frame as a magical box. You don't tell the box how big to be; you tell it how much padding it has and how far apart the items inside should be. The box then calculates its own size based on the content inside it. This is the 'Hug contents' property.
Direction and Flow
Auto Layout can only flow in one direction at a time: Horizontal (Row) or Vertical (Column). To build complex layouts like a whole webpage, you nest these frames inside each other. A horizontal navbar sits inside a vertical page frame.
Alignment vs. Distribution
Alignment controls where items sit within the box (e.g., Top Left, Center). Distribution controls how they spread out. 'Packed' keeps them close together with a specific gap. 'Space between' pushes them to the edges of the box, filling the available space.
Pro-Level Design Tips & Workflows
💡 Canvas Shortcut: Select any parent Auto Layout frame and double-click the inner padding lines directly on the canvas to set sizing values visually without clicking the sidebar.
💡 Spacing Variables: Always bind padding and gap spacings to dynamic variables (e.g. space/8 or space/16) to support system theming scaling.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.