Figma Auto Layout
Auto Layout is one of Figma's most powerful features. It makes frames resize and reflow automatically when their content changes. Buttons that grow to fit longer text, lists that expand when items are added, and responsive columns all use Auto Layout.
The Problem Auto Layout Solves
Without Auto Layout, if you change button text from "OK" to "Save Changes," you must manually widen the button rectangle to fit the new text. With Auto Layout, the button resizes itself.
Without Auto Layout: [ OK ] ← you change text → [Save Changes] But button stays: [Save Changes] ← text overflows the box With Auto Layout: [ OK ] ← you change text → [ Save Changes ] Button automatically grows to fit
Adding Auto Layout
Select a frame or a group and press Shift + A, or click the + button next to "Auto Layout" in the right panel. Figma wraps the selected content in an Auto Layout frame.
Auto Layout Direction
Auto Layout arranges children in one of three ways:
- Horizontal – Children line up left to right.
- Vertical – Children stack top to bottom.
- Wrap – Children fill a row, then wrap to the next row (like CSS flexbox wrap).
Horizontal (row of items): [Icon] [Text] [Badge] Vertical (stack of items): [Item 1] [Item 2] [Item 3] Wrap (grid-like): [Item 1] [Item 2] [Item 3] [Item 4] [Item 5]
Auto Layout Properties
Auto Layout Frame – Right Panel
-----------------------------------------
Direction: Horizontal | Vertical | Wrap
Spacing: Gap between children (e.g., 8px)
Padding: Space inside the frame edges
Top: 12 Bottom: 12
Left: 16 Right: 16
-----------------------------------------
Alignment: Where children sit (top-left, center, etc.)
-----------------------------------------
Resizing:
Width: Hug (shrink to fit) | Fixed | Fill
Height: Hug (shrink to fit) | Fixed | Fill
-----------------------------------------
Hug vs Fixed vs Fill
Hug: Frame shrinks or grows to tightly wrap its children.
Use for buttons, labels, tags.
Fixed: Frame stays a set width or height regardless of content.
Use when exact dimensions matter.
Fill: Frame stretches to fill available space in a parent Auto Layout.
Use for columns that should share equal width.
Practical Example: A Button
- Draw a rectangle and add a text layer inside it.
- Select both, press Shift + A.
- Set direction: Horizontal.
- Set padding: 12px top/bottom, 20px left/right.
- Set spacing: 8px (space between icon and text if you add one).
- Set width and height to Hug.
Now change the button text to anything — the button expands and contracts perfectly around the text every time.
Spacing Modes
- Packed – Children cluster together with the spacing value between them.
- Space between – Children spread to fill the frame with equal gaps between them (like CSS justify-content: space-between).
Packed (8px gap): [A] [B] [C] ← items cluster left (or centered, based on alignment) Space Between: [A] [B] [C] ← items spread to fill the full width
Nesting Auto Layout Frames
You can place Auto Layout frames inside other Auto Layout frames. This is how complex UIs are built.
Outer Frame (Vertical Auto Layout – full screen) ├── Header Frame (Horizontal Auto Layout) │ ├── Logo │ └── Nav Links (Horizontal Auto Layout) ├── Content Frame (Horizontal Auto Layout) │ ├── Sidebar (Vertical Auto Layout) │ └── Main Area (Vertical Auto Layout) └── Footer Frame (Horizontal Auto Layout)
Adding and Removing Items
Drag any layer into an Auto Layout frame. The frame immediately makes space and places the new item according to the gap and direction settings. Drag an item out, and the frame closes the space automatically. This mirrors how real apps work when content is dynamically added or removed.
Absolute Position
Sometimes you need one layer to ignore Auto Layout and stay in a fixed position inside the frame (like a badge on an icon). Select the layer and check Absolute Position in the right panel. That layer floats freely while all other children still follow Auto Layout rules.