Figma Auto Layout

Auto Layout is one of Figma's most powerful features. It makes frames that automatically resize and rearrange their contents when something inside changes. Buttons grow when you add more text. Lists expand when you add more items. No manual adjusting needed.

The Problem Auto Layout Solves

Imagine you design a button that says "Save". You manually set the button width to 100px to fit the word "Save". Your developer later changes the label to "Save and Continue". The text is now longer than the button, and everything breaks. You have to resize the button manually.

With Auto Layout, the button automatically grows to fit whatever text is inside it — always. This mirrors how real CSS (Flexbox) works in actual code, making developer handoff far more accurate.

Adding Auto Layout to a Frame

1. Select a frame or a group of objects.
2. Press Shift + A to apply Auto Layout instantly.

The frame now has an Auto Layout badge in the Design Panel, and two new controls appear: Direction and Spacing.

Auto Layout Direction

Auto Layout arranges children in one of three directions:

Direction Diagram

  HORIZONTAL (row)         VERTICAL (column)       WRAP
  +--[A]--[B]--[C]--+     +-------+               +--[A]--[B]--+
                          |  [A]  |               +--[C]--[D]--+
                          |  [B]  |
                          |  [C]  |
                          +-------+

• Horizontal – Children line up side by side (like a navigation bar).
• Vertical – Children stack top to bottom (like a settings list).
• Wrap – Children flow horizontally and wrap to the next row when they run out of space (like tags on a blog post).

Spacing Between Items (Gap)

The gap setting controls the space between child elements inside an Auto Layout frame. In the Design Panel, look for the field with arrows pointing apart. Type a pixel value to set the gap.

You can also set the gap to Auto, which distributes available space evenly between items — like setting justify-content: space-between in CSS.

Padding

Padding adds space between the frame's edge and its content. Auto Layout frames have four padding values: top, bottom, left, and right.

Padding Diagram

  +--[   Padding Top   ]--+
  |                       |
  [Padding Left]  [Button Label]  [Padding Right]
  |                       |
  +--[  Padding Bottom ]--+

Click the padding field in the Design Panel. You can set all four sides equally by typing one number, or click the four-square icon to set each side independently.

Alignment Inside Auto Layout

The alignment grid in the Design Panel controls where children sit inside the Auto Layout frame. It has a 3×3 grid of options — top-left, center, bottom-right, etc.

Alignment Grid Diagram

  [TL] [TC] [TR]
  [ML] [MC] [MR]    TL=Top Left, TC=Top Center, TR=Top Right
  [BL] [BC] [BR]    ML=Middle Left, MC=Middle Center...

Resizing Behavior: Hug vs. Fill vs. Fixed

Each child element inside an Auto Layout frame has a resizing behavior that controls how it responds to space changes.

Hug vs. Fill Diagram

  HUG (frame wraps content)       FILL (child fills parent)
  +-----------+                   +---------------------------+
  | [  Save  ]|                   |[         Save            ]|
  +-----------+                   +---------------------------+
  Button is only as wide           Button is as wide as parent
  as its content                   frame allows

Building a Button with Auto Layout

1. Press T and type "Get Started".
2. Select the text layer and press Shift + A to wrap it in Auto Layout.
3. Set padding to: Top 12, Bottom 12, Left 24, Right 24.
4. Set Fill to a blue color.
5. Set Corner Radius to 8.

Now change the button text to "Get Started Today" — the button automatically grows wider to fit the new label. No manual resizing.

Nesting Auto Layout Frames

Auto Layout frames work inside other Auto Layout frames. This mirrors how real HTML and Flexbox layouts nest inside each other.

Nested Auto Layout — Product Card

  [Card Frame — Vertical Auto Layout, padding 16px]
  |
  +-- [Image placeholder — Fixed 300 × 180]
  |
  +-- [Info Row — Horizontal Auto Layout]
  |     +-- [Product Name text — Fill width]
  |     +-- [$29.99 price text — Hug]
  |
  +-- [Add to Cart Button — Hug, centered]

When the product name gets longer, the Info Row stretches, the name text fills the available space, and the price stays next to it on the right. Everything adjusts automatically.

Absolute Position Inside Auto Layout

Sometimes you need one element to float freely inside an Auto Layout frame — like a badge or notification dot. Select that child element and enable Absolute Position in the Design Panel. It now ignores the Auto Layout flow and can be positioned anywhere inside the frame using X and Y coordinates.

Absolute Position Example

  +--[Avatar Image]--+
  |                  |
  |             [99+]|  <-- Badge is Absolute Position
  +------------------+      pinned to top-right corner

Auto Layout and Real Code

Auto Layout maps directly to CSS Flexbox properties that developers write in code:

Designers who understand Auto Layout create specs that developers can implement with minimal guesswork.