Figma Auto Layout Tutorial: A Beginner-Friendly Walkthrough for 2026
If you have ever resized a button in Figma and watched the text spill out of it, you already know why Auto Layout exists. It is the feature that turns static rectangles into flexible, responsive components that behave like real UI elements in code.
In this tutorial, we will walk through Auto Layout from zero to confident, using three components every designer builds weekly: a responsive button, a product card, and a navigation bar. No prior experience needed, just Figma open in another tab.
What Is Figma Auto Layout?
Auto Layout is Figma’s flexbox-style system. It allows frames to:
- Resize automatically based on their content
- Maintain consistent spacing and padding
- Reflow when items are added, removed, or reordered
- Adapt to different screen sizes without manual adjustments
If you are familiar with CSS Flexbox, Auto Layout maps directly to properties like flex-direction, gap, padding, and align-items. That makes it easier to hand off designs that developers can actually build.
Auto Layout Shortcuts You Should Memorize
| Action | Mac | Windows |
|---|---|---|
| Add Auto Layout | Shift + A | Shift + A |
| Remove Auto Layout | Shift + Option + A | Shift + Alt + A |
| Wrap selection in frame | Option + Cmd + G | Ctrl + Alt + G |
| Resize to fit | Shift + Cmd + Click handle | Shift + Ctrl + Click handle |
Tutorial 1: Build a Responsive Button with Auto Layout
The button is the “hello world” of Auto Layout. Let’s build one that grows and shrinks with its label.
Step-by-Step
- Type your label. Press T and type “Get Started”.
- Apply Auto Layout. Select the text and press Shift + A. Figma wraps it in a frame.
- Set padding. In the right panel, set horizontal padding to 24 and vertical padding to 12.
- Add a fill. Choose a brand color, for example a deep navy or accent shade.
- Round the corners. Set corner radius to 8 px (or 999 for a pill shape).
- Set resizing behavior. Make sure both width and height are set to Hug contents.
Now double-click the text and change it to “Book a Free Consultation”. The button expands automatically. That is Auto Layout doing its job.
Pro Tip: Add Variants for States
Turn your button into a component (Cmd/Ctrl + Alt + K), then add variants for Default, Hover, Disabled, and Loading. Each variant inherits the Auto Layout, so they all stay responsive.
Tutorial 2: Build a Responsive Product Card
A card combines vertical Auto Layout with nested horizontal Auto Layouts. This is the moment Auto Layout starts feeling powerful.
Step-by-Step
- Drop in an image placeholder. A 320 x 200 rectangle works well.
- Add the content. Below the image, add a title (“Velvet Lounge Chair”), a short description, a price, and a button.
- Group the text block. Select title and description, press Shift + A, set gap to 4 and padding to 0.
- Group the price row. Place the price and button on the same row, apply Auto Layout horizontally, and set Space between alignment.
- Wrap everything. Select the image, the text block, and the price row. Press Shift + A to create a vertical Auto Layout.
- Set padding and gap. Padding 16, gap 12.
- Configure resizing. Width: Fill container. Height: Hug contents.
Now drag the card wider or narrower. The image stretches, the text reflows, and the price row stays aligned. One card can serve mobile, tablet, and desktop.
Tutorial 3: Build a Responsive Navigation Bar
Nav bars are where Auto Layout really earns its keep. The trick is using Space between alignment to push the logo and links to opposite ends.
Step-by-Step
- Create the logo. A text element or a small icon plus brand name.
- Build the link group. Type four nav items: Home, Projects, About, Contact. Select all, press Shift + A, set gap to 32.
- Add a CTA button. Reuse the responsive button from Tutorial 1. Place it after the link group.
- Group links and CTA. Select both, apply horizontal Auto Layout with a 24 gap.
- Wrap logo and right side. Select both, press Shift + A.
- Switch alignment to Space between. In the alignment grid, choose the icon that pushes items to the edges.
- Set width to Fill container. Place the nav inside a frame matching your desktop width (1440 px).
- Add padding. Horizontal 64, vertical 20.
Resize the parent frame from 1440 to 1024. The nav adapts. To handle mobile, duplicate the nav, remove the link group, and replace it with a hamburger icon.
Common Auto Layout Mistakes (and How to Fix Them)
- Items not stretching: Check that resizing is set to Fill container, not Fixed.
- Random extra padding: You probably have a nested frame with its own padding. Drill in and reset it.
- Text getting cut off: Set the text layer to Auto width until it is inside Auto Layout, then switch to Fill container.
- Components shifting unexpectedly: Verify alignment in the 9-point grid in the right panel.
- Negative gaps not working: Make sure the parent has Clip content turned off if you want overlapping avatars.
Auto Layout vs Frames vs Groups
| Container Type | Best For | Responsive? |
|---|---|---|
| Group | Quickly bundling unrelated items | No |
| Frame | Layouts with constraints | Partially |
| Auto Layout Frame | Components, lists, sections, pages | Yes |
Why This Matters for Interior Design Studios
At Acanthus Design Interiors, we use Figma Auto Layout for our client mood boards, project proposals, and digital portfolios. The same principles that make a button responsive also keep our presentation decks looking sharp on any screen our clients open them on. Mastering Auto Layout is not just a UI skill, it is a workflow upgrade for any visual professional.
Frequently Asked Questions
Is Auto Layout free in Figma?
Yes. Auto Layout is part of Figma’s free Starter plan, so anyone can use it without a subscription.
What is the difference between Hug and Fill in Auto Layout?
Hug contents shrinks the frame to fit its children. Fill container expands the child to fill its parent. Fixed keeps a set value regardless of content.
Can I nest multiple Auto Layouts inside each other?
Absolutely. Most production-grade components use 3 to 5 levels of nested Auto Layouts. Cards, modals, and navigation bars all rely on nesting.
Does Auto Layout support wrapping in 2026?
Yes. Figma added the Wrap property in 2024, which lets items break onto a new line when they run out of horizontal space, similar to flex-wrap in CSS. It is now standard for tag clouds and responsive grids.
How do I convert an existing design to Auto Layout?
Select the layers you want to group, then press Shift + A. Figma will guess the direction and spacing based on current positions. You can refine padding and gap afterward.
Should I learn Auto Layout before Variants and Components?
Yes. Auto Layout is the foundation. Once your components are built with Auto Layout, adding variants and properties on top becomes much easier and more predictable.
Final Thoughts
Auto Layout takes about 30 minutes to learn and a few projects to master. Start with the button, move to the card, then tackle the nav bar. By the time you have built all three, you will be designing responsive components without thinking about it. That is when Figma stops being a drawing tool and becomes a real interface design system.