How to Master Figma Auto Layout (2026) — Build Responsive Designs Without the Drag

You know that moment when you finally get a button looking perfect, and then someone changes the label from "Submit" to "Submit Application" — and suddenly your design breaks? The padding explodes. The icon shifts. You spend ten minutes dragging things back into place.

That's the exact problem Auto Layout solves. It tells Figma: "Hey, this thing? It's alive. Adjust itself based on what goes inside."

The feature has been in Figma for years. Most beginners either don't know it exists or open it, see red/blue resize handles for the first time, and close it in panic. I was one of those people. It took a real client project — where I had to hand over a 47-screen prototype with three different button states — before I finally sat down and actually learned it.

This is the tutorial I wish someone had made for me. By the end, you'll know exactly how Auto Layout works, when to use it, and how to build components that stay consistent even when content changes.

What You'll Be Able to Do After This

By the end of this tutorial, you'll be able to:

Apply Auto Layout to any frame and control how it resizes

Build buttons that stay centered no matter how long the label gets

Create cards that stretch horizontally or vertically without manual adjustment

Design form layouts that breathe when content is added or removed

Export responsive prototypes without exporting 14 different screen sizes

Prerequisites

You need Figma or Figma Desktop (free tier works fine). A basic understanding of frames and layers helps, but we're starting from the actual beginning here.

Step 1: Create Your First Auto Layout Frame

Open Figma and create a new file. Press F to draw a frame, or click the Frame tool in the left toolbar. Choose any size — let's start with an iPhone 14 frame (390 × 844 px).

Here's the first thing most tutorials skip over: you can apply Auto Layout to the frame itself OR create a nested frame inside. For buttons and cards, select the frame, then press Shift+A. Or — the faster way — right-click the frame and choose "Add Auto Layout."

You'll see a purple layout bar appear at the top of the right panel. That's the Auto Layout section. If you've never used it, it might look intimidating. Don't worry — we're only touching three things at first: Direction, Spacing, and Padding.

The Three Settings That Actually Matter

Direction: Horizontal or Vertical. Horizontal means children line up left-to-right. Vertical means top-to-bottom. Most beginners forget to check this and spend twenty minutes wondering why their layout isn't working.

Spacing: The gap between each child element. You can type a number directly or use the arrow keys for micro-adjustments.

Padding: The space between the frame border and its contents. Top, bottom, left, and right — or click the icon to set uniform padding on all sides at once.

Step 2: Build a Button That Resizes With Its Label

Let's apply this to the most common UI element: a button.

Draw a rectangle inside your frame. Give it a fill color — let's go with a nice Philippine blue: #0038A8. With the rectangle selected, press Shift+A to add Auto Layout.

Set direction to Horizontal. Add a text layer inside the rectangle — "Submit" — in white. With Auto Layout, the rectangle automatically adjusts to fit whatever text you put inside.

Change the label to "Submit Application." The rectangle grows. Change it to "Cancel." It shrinks. No dragging. No manual resize handles. The parent frame responds to its children.

Set horizontal padding to 24 px on each side. Vertical padding to 12 px top and bottom. You now have a button that matches production specs — and took thirty seconds to build.

Step 3: Control the Resize Behavior

Here's where most people get stuck. Auto Layout gives each child a resize behavior — Hug Contents, Fixed Width, or Fill Container. You'll see this as three small icons in the right panel.

Hug Contents means the element shrinks to fit whatever's inside. Use this on buttons and labels. Fixed Width means the element stays the same size regardless of content. Use this on icons or fixed-width dividers. Fill Container means the element grows to fill available space. Use this when you want a button to stretch across a card.

The red/blue arrow handles you might have seen? Those appear when a frame has children that don't fit. Red means something is being clipped. Blue means there's extra space. Once everything has the right resize behavior, those handles disappear.

Step 4: Build a Card That Adapts Across Breakpoints

This is where Auto Layout stops being a nice-to-know feature and becomes genuinely impressive.

Create a product card: a horizontal frame with an image on the left, product name and description stacked vertically on the right, and a "Buy Now" button anchored to the bottom right of the text area.

Apply Auto Layout to the whole card frame (Shift+A, set to Horizontal). Set the image to Fixed Width (120 px). Set the text container to Fill Container — it will stretch to fill available space. The button stays anchored right because it's inside a Fill Container that has Hug Contents for the button itself.

Now duplicate this card and change the product name to something longer. The card height adjusts automatically. The button stays bottom-aligned. The image doesn't stretch. No manual work.

This is the real power of Auto Layout: you design ONE card, and it handles infinite content variations. When you hand this to a developer, the CSS output is clean — because the layout logic is already baked in.

Step 5: Stack and Nest for Complex Layouts

Real UIs are built from nested Auto Layout frames. A form isn't one frame — it's a vertical stack of horizontal row frames, each containing a label and an input.

Build a form: create a vertical Auto Layout frame. Add rows for Name, Email, and Message. Each row is a horizontal Auto Layout with a fixed-width label (120 px, right-aligned) and a Fill Container text input. Add a textarea input that spans full width and set it to Fill Container in the parent vertical frame.

The result: you can add a new row by pressing Enter inside the parent frame. The whole form re-flows. Each row's label and input stay perfectly aligned. This is how production design systems work.

Pro Tips

Use it on everything — but not everything at once

The temptation is to add Auto Layout to every single frame in your file. Resist. Apply it to components that actually need to adapt: buttons, form inputs, cards, navigation bars, list items. Static layouts — hero sections, illustration containers, decorative frames — are fine without it.

Watch for the blue gap bug

If you see blue resize handles with arrows pointing outward, the parent frame has extra space it doesn't know how to distribute. Check your children's resize behavior — one of them is probably set to Fill Container when it should be Hug Contents.

Combine with Components for design systems

Auto Layout shines brightest inside Components. Build a Button component with Auto Layout, then use it across your file. Any instance of that button automatically inherits the responsive behavior. Change the base component once, and every button updates.

What's Next

Now that you know Auto Layout, the next logical step is Variables — Figma's feature for storing design tokens, managing dark/light mode, and creating multi-language layouts. Next Monday, we'll connect Auto Layout with Variables to build a component library that switches themes and languages without duplicating a single frame.

If you get stuck on anything in this tutorial, drop a comment below. Auto Layout has a few edge cases we didn't cover here — responsive text truncation, absolute positioning inside Auto Layout frames — and we'll tackle those too.