Figma Auto Layout Tutorial: A Practical Walkthrough for Real Components
If you have ever resized a button in Figma and watched the text spill out of its frame, you already know why Auto Layout exists. Instead of theory and abstract concepts, this tutorial focuses on three components designers ship every single day: a flexible button, a content card, and a responsive navigation bar. By the end, you will have a clear mental model of how Auto Layout works in 2026 and how to use it without fighting the canvas.
What Is Auto Layout in Figma?
Auto Layout is a property you apply to a frame so its children align, space, and resize automatically. Think of it as Figma’s version of Flexbox. When the content changes, the container reacts. When the container changes, the content reacts. That two-way relationship is what makes components responsive.
To toggle it on, select any frame or group and use the shortcut Shift + A, or click the Auto layout option in the right panel.
Core Properties You Need to Know
- Direction: horizontal or vertical stacking
- Spacing: gap between items
- Padding: inner space between content and the frame edges
- Alignment: where children sit inside the frame (9-point grid)
- Resizing: Hug contents, Fill container, or Fixed width/height
Tutorial 1: Build a Responsive Button
The button is the simplest, most useful Auto Layout exercise. The goal: a button that grows and shrinks as the label changes, without manual resizing.
Step by Step
- Type a text layer, for example Get started.
- Select it and press Shift + A to wrap it in an Auto Layout frame.
- Set horizontal padding to 24 and vertical padding to 12.
- Add a fill color, a corner radius of 8, and a text color that contrasts.
- In the right panel, confirm both width and height are set to Hug contents.
- Now change the text to Sign up for free. The button resizes itself.
Adding an Icon
Drop an icon inside the same frame, set spacing between items to 8, and align items to center. You now have a button variant that handles icon + label without breaking. Convert it to a component (Ctrl/Cmd + Alt + K) and you can reuse it everywhere.
Tutorial 2: Build a Flexible Card
Cards are nested Auto Layouts. The trick is to work from the inside out: build the smallest pieces first, then wrap them.
Anatomy of the Card
| Layer | Auto Layout Direction | Resizing |
|---|---|---|
| Image | None | Fill width, fixed height |
| Text block (title + description) | Vertical | Fill width, hug height |
| Button row | Horizontal | Hug contents |
| Card wrapper | Vertical | Fixed width, hug height |
Build Order
- Create the title and description as separate text layers, select both, press Shift + A, set spacing to 8.
- Place an image above this text block, then select all and press Shift + A again. Set spacing to 16, padding to 16.
- Add the button you built in Tutorial 1 at the bottom.
- Set the wrapper to a fixed width of 320 and Hug on height. Resize the description text and watch the card adapt.
Tutorial 3: Build a Responsive Navigation Bar
A navbar is where Auto Layout truly shines because it uses the space between alignment option to push elements to opposite edges.
Step by Step
- Place a logo on the left, a row of menu links in the middle, and a CTA button on the right.
- Wrap the menu links in their own horizontal Auto Layout (spacing 24).
- Select all three groups and press Shift + A.
- Set the parent frame to Fill container width.
- In the spacing field, click the icon to switch to Auto (space between). The logo and CTA now hug the edges.
- Add horizontal padding of 32 and vertical padding of 16.
Resize the parent frame from 1440 down to 768 pixels. The navbar stretches and the spacing redistributes automatically.
Pro Tips for Faster Auto Layout Workflows
- Shift + A wraps any selection in Auto Layout. Shift + Alt + A removes it.
- Use Hug on content-driven elements (buttons, badges) and Fill on layout-driven elements (cards inside grids).
- Need a divider that stretches edge to edge? Set its width to Fill container.
- Wrap mode (released in Figma’s recent updates) lets rows break onto multiple lines automatically. Useful for tag lists and chip groups.
- Combine Auto Layout with Variants and Component Properties to expose toggles for icons, sizes, and states.
Common Mistakes to Avoid
- Setting every layer to Fixed: you lose all the responsiveness.
- Adding Auto Layout to the top frame first instead of building inside out.
- Forgetting padding and trying to fake it with empty rectangles.
- Mixing absolute positioning inside Auto Layout when you actually want a stacked structure (use Absolute position only for badges and overlays).
Frequently Asked Questions
What is the keyboard shortcut for Auto Layout in Figma?
Press Shift + A to add Auto Layout to a selected frame or group, and Shift + Alt + A to remove it.
Is Auto Layout the same as Flexbox?
It is heavily inspired by Flexbox and behaves similarly with direction, gap, padding, and alignment. The naming is different (Hug, Fill, Fixed instead of flex-grow and flex-shrink), but the mental model translates almost one-to-one for developers.
Should I use Auto Layout on every frame?
Use it on anything that needs to react to content changes or screen size: buttons, cards, lists, navbars, modals, forms. For decorative illustrations or pixel-perfect hero compositions, free positioning may be faster.
Why is my Auto Layout frame not resizing?
Check the resizing setting on both the parent and the children. If the parent is set to Fixed and the child is set to Fill, the child can only fill the fixed parent. Switch the parent to Hug to let it grow with content.
Can Auto Layout wrap to multiple lines?
Yes. Enable Wrap in the Auto Layout settings of a horizontal frame. Children will break onto a new line when they run out of horizontal space, perfect for tag clouds and responsive grids.
Wrapping Up
Auto Layout is the foundation of any modern design system in Figma. Once buttons, cards, and navbars become responsive by default, your mockups stop being static images and start behaving like the real product. Start small, build inside out, and reuse your components everywhere. At Arte en Linea, this is exactly how we structure UI libraries that scale across web and mobile projects.