Auto Layout in Figma: Responsive UI Rows, Stacks, and Spacing Systems

What Auto Layout Is (and Why You’ll Use It Constantly)

Auto Layout is Figma’s layout engine for arranging layers in a row or column with rules for spacing, padding, alignment, and resizing. Instead of manually nudging objects to keep them aligned, you define layout behavior once and let the frame adapt when content changes (longer text, different icon sizes, new items added, or a container resized).

Think of Auto Layout as a “stack” that can: (1) place items horizontally or vertically, (2) keep consistent gaps, (3) add internal padding, (4) align items to edges or center, and (5) control how each child resizes (Hug, Fill, Fixed).

Auto Layout Foundations: Direction, Spacing, Padding, Alignment

1) Add Auto Layout

• Select one or more layers (or a frame) you want to behave as a group.
• Apply Auto Layout (Shift + A).
• Figma wraps the selection into an Auto Layout frame (or converts the frame).

2) Direction: Row vs Column

Auto Layout direction defines the main axis:

• Horizontal (Row): items flow left-to-right (common for buttons with icon + label, list items with avatar + text + chevron).
• Vertical (Column): items stack top-to-bottom (common for form fields, card content, settings lists).

3) Spacing Between Items

Use a consistent spacing system so layouts feel intentional. In Auto Layout, set:

• Item spacing: the gap between children.
• Space between: distributes extra space between items (useful for “left content + right action” rows).

Practical tip: pick a base spacing unit (for example 8) and use multiples (8, 16, 24). This makes refactoring and scaling easier.

Continue in our app.

• Listen to the audio with the screen off.
• Earn a certificate upon completion.
• Over 5000 courses for you to explore!

Or continue reading below...

Download the app

4) Padding

Padding controls the space inside the Auto Layout frame around its children (top, right, bottom, left). Padding is what makes buttons feel tappable and cards feel breathable.

5) Alignment on the Cross Axis

Alignment controls how children align perpendicular to the direction:

• In a row, cross-axis alignment is vertical (top/center/bottom).
• In a column, cross-axis alignment is horizontal (left/center/right).

Use center alignment for mixed-height items (like an icon next to text). Use left alignment in vertical stacks for form labels and inputs.

Resizing Behaviors: Hug, Fill, Fixed (and When to Use Each)

Auto Layout becomes “responsive” when you set resizing rules for the container and its children.

How Hug/Fill Interact (Mental Model)

• Set the parent to define available space (fixed width, or fill within its own parent).
• Set the child to either hug its content or fill the parent’s available space.
• If multiple children are set to Fill on the same axis, they share the space (and you can control distribution with constraints like “Fill” plus min/max if you choose to add them).

Pattern 1: Button with Padding (Label + Optional Icon)

Goal

Create a button that grows with its label text, keeps consistent padding, and stays aligned when you add/remove an icon.

Step-by-step

• Create a text layer for the label (e.g., “Continue”).
• (Optional) Add an icon layer to the left of the label.
• Select icon + label and apply Auto Layout (Shift + A). Set direction to Horizontal.
• Set item spacing (e.g., 8) between icon and label.
• Set padding (e.g., 12 vertical, 16 horizontal).
• Set alignment to center on the cross axis.
• Set the button frame to Hug contents for width and height.

Quick iteration checks

• Change the label to a longer string (e.g., “Continue to checkout”) and confirm the button expands without manual resizing.
• Hide/remove the icon and confirm spacing collapses naturally (no leftover gap outside the Auto Layout spacing).

Pattern 2: Form Field Stack (Label + Input + Helper Text)

Goal

Build a vertical stack where each field block stays consistent, and the whole form can expand or compress cleanly.

Step-by-step: one field block

• Create a label text (e.g., “Email”).
• Create an input container (a frame or rectangle + text placeholder). Keep the input height fixed (e.g., 44–48).
• Create helper/error text (optional).
• Select label + input + helper and apply Auto Layout. Set direction to Vertical.
• Set item spacing (e.g., 6–8).
• Set alignment to Left (cross axis).
• Set the field block width to Fill container (so it stretches in the form).
• Set the input container width to Fill container, height to Fixed.
• Set label and helper to Hug contents height; width can be Hug or Fill depending on your layout.

Step-by-step: stack multiple fields

• Select multiple field blocks and apply Auto Layout (Vertical).
• Set item spacing (e.g., 12–16 between fields).
• Set the form stack width to Fill container.

Result: add a new field, reorder fields, or toggle helper text, and spacing stays consistent without manual alignment.

Pattern 3: Card Component (Header + Body + Actions)

Goal

Create a card that maintains padding, supports variable-length text, and keeps actions aligned.

Step-by-step

• Create a card frame and apply Auto Layout (Vertical).
• Set card padding (e.g., 16 all around) and item spacing (e.g., 12).
• Create a header row (Horizontal Auto Layout): title on the left, optional icon/menu on the right.
• For the header row, set Space between so left and right items separate automatically.
• Set the title text to Fill container (width) so it can take remaining space; set the right icon/menu to Fixed.
• Create a body text block below; set it to Fill container width and Hug height so it grows with content.
• Create an actions row (Horizontal Auto Layout): e.g., secondary + primary buttons. Use item spacing (e.g., 8) and align to the right if desired.
• Set the card frame width to Fill container (if it should stretch in a layout) or Fixed (if it’s a defined size).

Quick iteration checks

• Make the title very long and confirm it wraps or truncates according to your text settings (see troubleshooting for wrapping control).
• Add a third action button and confirm spacing remains consistent.

Pattern 4: Simple List Item (Leading Icon + Text + Trailing Action)

Goal

Build a row that works for settings lists, search results, or message previews.

Step-by-step

• Create a row frame and apply Auto Layout (Horizontal).
• Set padding (e.g., 12 vertical, 16 horizontal) and item spacing (e.g., 12).
• Add a leading icon/avatar (Fixed size).
• Add a text group (title + subtitle) as a Vertical Auto Layout stack.
• Add a trailing chevron/icon/button (Fixed size).
• Set the row’s main alignment to center (cross axis).
• Set the text group width to Fill container so it takes available space between leading and trailing items.
• For the row, consider using Space between only if you have exactly “left group” and “right action.” If you have three items (icon + text + chevron), standard spacing often behaves more predictably.

How Auto Layout Reduces Manual Alignment Work

• Adding content doesn’t break spacing: new helper text appears and pushes content down with consistent gaps.
• Localization-ready: longer labels expand buttons and rows without re-centering everything.
• Reordering is safe: drag items within the Auto Layout layer list to reorder; spacing and padding remain intact.
• Consistent rhythm: if your spacing system is 8-based, the UI feels cohesive and is faster to adjust.

Progressive Exercise: Refactor a Login Screen into Auto Layout Groups

Starting point

You have a login screen with a title, two fields, a “Forgot password?” link, and a primary CTA button. The elements are currently positioned manually.

Step 1: Create the Form Stack

• Select the email field block and password field block (each should already be a small vertical group: label + input + helper if needed).
• Apply Auto Layout (Vertical) to create Form Stack.
• Set spacing between fields (e.g., 16).
• Set Form Stack width to Fill container.

Step 2: Add the “Forgot password?” row

• Create a row for the link (Horizontal Auto Layout).
• If it should align right, set the row to Fill container width and align content to the right (or use a spacer approach by letting the link sit at the end with appropriate alignment settings).
• Keep the link text Hug height; width can be Hug.

Step 3: Create the CTA Section

• Create a vertical Auto Layout group named CTA Section.
• Add the primary button (Auto Layout button from earlier pattern) and any secondary text (e.g., “Don’t have an account? Sign up”).
• Set spacing (e.g., 12) and alignment (center or stretch depending on design).
• Set CTA Section width to Fill container.
• Set the primary button width to either Fill container (common for mobile) or Hug (common for desktop dialogs).

Step 4: Build the Screen Layout

• Select the title, Form Stack, and CTA Section and apply Auto Layout (Vertical) to the screen content group.
• Set overall spacing (e.g., 24) and padding (e.g., 24).
• Set the content group width to Fill container so it responds when the screen/frame width changes.

Step 5: Test responsiveness

• Resize the login frame wider and narrower: inputs and buttons set to Fill should adapt.
• Change the button label to a longer phrase: the button should remain consistent (either fill width or hug with padding).
• Toggle helper/error text in a field: the stack should expand without overlaps.

Progressive Exercise: Create a Reusable Card/List Component Using Auto Layout

Goal

Turn your card and list item patterns into reusable building blocks that can be dropped into multiple screens and still adapt to content.

Step 1: Build a “Card” base with Auto Layout

• Create the card structure from Pattern 3 (Vertical Auto Layout with padding and spacing).
• Ensure the header row uses Space between and the title is Fill width.
• Ensure body text is Fill width + Hug height.
• Ensure actions row buttons are Auto Layout buttons.

Step 2: Build a “List Item” base with Auto Layout

• Create the list item structure from Pattern 4.
• Ensure the text group is Fill width so it expands and pushes the trailing icon to the edge.
• Keep leading and trailing items Fixed.

Step 3: Make them reusable

• Convert each into a component.
• When you create instances, test variations by swapping text length, hiding subtitle, or changing trailing action.
• Verify the Auto Layout rules still hold: padding stays consistent, spacing remains predictable, and resizing behaves as intended.

Troubleshooting Auto Layout

Issue 1: “Unexpected spacing” or gaps you didn’t set

• Check for hidden layers: hidden items can still affect spacing depending on settings; confirm whether the layer is truly removed from layout or just invisible.
• Look for extra padding: you might have both padding on the parent and padding on a nested child frame.
• Confirm you’re editing the correct Auto Layout level: spacing can exist at multiple nested frames; click up the hierarchy and inspect item spacing at each level.
• Space between vs fixed spacing: if “Space between” is enabled, resizing the parent will create larger gaps. Switch back to a fixed item spacing if you want consistent gaps.

Issue 2: Nested Auto Layout feels “out of control”

Nested Auto Layout is normal (rows inside columns, columns inside rows). Problems usually come from conflicting resizing rules.

• Start from the outside in: set the outer container width/height behavior first (Fixed vs Fill).
• Then set key children: decide which child should Fill and which should Hug/Fixed.
• Avoid multiple Fill children unless you want sharing: if two siblings are both Fill on the same axis, they will split space. That’s great for two equal columns, but confusing if you expected one item to dominate.
• Use Fixed for icons and predictable elements: keep non-text UI elements from stretching unexpectedly.

Issue 3: Text wrapping, truncation, or weird line breaks

• Set text width behavior intentionally: if a text layer is set to Hug width, it may expand horizontally and push other items. If you want wrapping, set the text layer (or its container) to Fill width so it uses available space and wraps.
• Control the text box: ensure the text layer is not accidentally set to a very narrow fixed width, which forces early wrapping.
• In rows, give text the flexible space: set the text container to Fill and keep trailing icons Fixed so the text wraps before pushing icons off-screen.
• Check max lines behavior: if you’re using truncation (single-line ellipsis), confirm the text is configured for single-line and that the container width is constrained.

Quick debugging checklist (fast)

• Select the problematic element and inspect: direction, item spacing, padding, alignment.
• Check parent and child resizing: Hug/Fill/Fixed on the axis that’s behaving oddly.
• Temporarily set the parent to Fixed size to see whether “Space between” is causing expansion.
• Toggle visibility of suspected layers to find “phantom” spacing contributors.