Figma Auto Layout for Beginners: Build Buttons That Don't Break

By the end of this tutorial, you'll have buttons that stretch, shrink, and wrap automatically — no more manually dragging corners every time your designer changes the copy.

What We're Building

A button component that works in any context: nav bar, sidebar, modal, mobile card. One button to rule them all.

This is the magic of Auto Layout in Figma — your components actually respond to their content instead of fighting it.

Step 1: Create Your Button Frame

Open Figma. Create a new frame (press F) — make it small, like 120×40. This is your button's starting state.

Add a text layer inside. Write "Click me". Center it, pick a font (Inter or DM Sans works well).

Now apply Auto Layout: select the frame, press Shift + A.

You'll see:

A purple padding ring around your text

Resize properties appear in the right panel

The frame now "hugs" its contents.

Step 2: Set the Resizing Behavior

Here's where most people get confused.

For the parent frame (the button):

Horizontal resizing → Hug contents

Vertical resizing → Hug contents

For the text inside:

Horizontal resizing → Hug contents

Vertical resizing → Hug contents

This sounds backwards. But here's what happens: the text sets its own size. The frame hugs that size. Add padding. The button grows.

Set your padding — 16px on all sides is a good starting point.

Step 3: Test It Like a Real Component

Change "Click me" to "Get Started Free Today". Watch the button expand horizontally. No dragging. No manual resize.

Change it to "OK". Watch it shrink.

This is the foundation of responsive components in Figma.

Step 4: Add States

Duplicate your button (hold Option and drag). Change the background color. Update the text.

Now you've built two states: default and hover.

For pressed state: duplicate again, shift the background slightly, maybe add a slight inset shadow.

For disabled: desaturate the background, drop the opacity of the text to 50%.

Step 5: Make the Button Part of a Component

Select your default button. Right-click → Create component (or press Cmd + Option + K). Name it "Button".

Now drop an instance of "Button" on your canvas. It's linked — change the main component, all instances update.

Want to override the text? Just click the text layer and type. The auto layout still works.

Pro Tips

Nested Auto Layout for complex buttons: If your button has an icon + text, wrap the icon and text in a horizontal Auto Layout frame first, then wrap THAT inside your button frame. The icon will always stay at the right or left, and the text will take up the remaining space.

Use "Fill container" for icon holders: If your button has a leading icon, set the icon's horizontal resizing to Fill container and constrain its width. This prevents it from growing when you change text.

Wrap for mobile: Set your button's direction to Wrap in the Auto Layout panel. On mobile nav bars, this means a row of buttons wraps to two lines instead of overflowing off-screen.

Alignment matters: Auto Layout respects your alignment settings. A Center aligned button with Hug contents will center the text inside itself perfectly, no matter the size.

Spacing gets smarter with wrap: When you set direction to Wrap and add a gap of 12px, Figma automatically spaces elements into rows. Drop three buttons in there — they'll form rows and columns all on their own.

What You Learned

How to apply Auto Layout (Shift + A)

Hug contents vs Fill container and when to use each

How text drives the frame size

How to create component instances that stay linked

How to build a button that works in nav bars, modals, and mobile cards

This one concept — Auto Layout — separates Figma users who fight their tools from Figma users who let their tools work for them.

Next Tutorial Teaser

Next week: we're going deeper. Cards, form fields, and navigation components — how to build entire layouts that respond to content without you touching a single corner handle.

If Auto Layout clicked for you today, you already know 80% of what makes a real design system tick.

See you next Monday.