Why Figma Auto Layout Is a Game-Changer for Web Design
If you have ever spent hours manually repositioning elements in your web designs every time the content changes, Figma Auto Layout is about to become your best friend. Auto Layout is a powerful feature that lets you create frames where child elements automatically resize, reposition, and adapt based on rules you define. Think of it as the Figma equivalent of CSS Flexbox, but visual and interactive.
In this tutorial, we will walk through everything you need to know about Figma Auto Layout for web design. By the end, you will be able to build responsive navigation bars, flexible card grids, and reusable UI components that behave exactly the way a developer would expect them to in code.
Whether you are brand new to Figma or looking to level up your workflow, this guide covers padding, spacing, nested frames, resizing behavior, and real-world use cases you can start applying today.
What Is Auto Layout in Figma?
Auto Layout is a property you can add to any frame in Figma. Once applied, the frame will automatically arrange its children in a horizontal row or vertical column, with consistent spacing and padding. When you add, remove, or resize a child element, the parent frame adjusts accordingly.
Here is what Auto Layout handles for you:
- Direction: Stack items vertically, horizontally, or wrap them into multiple lines.
- Spacing: Define consistent gaps between child elements.
- Padding: Set internal spacing between the frame border and its children.
- Resizing: Control whether the frame or its children grow, shrink, or stay fixed.
- Alignment: Position children within the frame (top-left, center, space-between, etc.).
This makes Auto Layout indispensable for building web design components that need to be flexible and responsive.
How to Add Auto Layout in Figma
There are three quick ways to enable Auto Layout on a frame or selection:
- Keyboard shortcut: Select a frame or group of elements and press Shift + A.
- Right-click menu: Right-click on a frame or selected objects and choose Add Auto Layout.
- Design panel: In the right-side design panel, click the + icon next to “Auto Layout.”
The fastest method? Select your elements and hit Shift + A. Figma will wrap them in an Auto Layout frame instantly.
Understanding the Core Auto Layout Properties
Before building anything, let’s break down the key properties you will interact with every time you use Auto Layout for web design.
1. Direction
Auto Layout frames arrange children in one of three directions:
- Horizontal: Items sit side by side in a row (like a navigation menu).
- Vertical: Items stack on top of each other (like a list or a card’s content).
- Wrap: Items flow horizontally and wrap to a new line when they run out of space (like a responsive grid).
2. Spacing Between Items
This is the gap between each child element inside the Auto Layout frame. It works exactly like the CSS gap property. You set one value, and Figma applies it uniformly between all children.
Pro tip: You can also set spacing to “Auto” to achieve a space-between effect, where items spread out evenly across the available space.
3. Padding
Padding is the internal space between the edge of the Auto Layout frame and its children. Figma lets you set padding independently for each side (top, right, bottom, left), or you can use uniform padding for simplicity.
4. Resizing Behavior
This is where Auto Layout gets truly powerful. Each element, both the parent frame and its children, can have one of three resizing modes:
| Resizing Mode | What It Does | Web Design Equivalent |
|---|---|---|
| Hug Contents | Frame shrinks or grows to fit its children. | width: fit-content |
| Fill Container | Element stretches to fill the available space in its parent. | width: 100% or flex: 1 |
| Fixed | Element stays at a specific pixel width or height. | width: 300px |
Understanding when to use each mode is the key to building truly responsive web design components in Figma.
5. Alignment
Within an Auto Layout frame, you can align children along both axes. For a horizontal layout, you control vertical alignment (top, center, bottom). For a vertical layout, you control horizontal alignment (left, center, right). You also have the option to distribute space between or around items.
Step-by-Step: Building a Responsive Navigation Bar
Let’s put theory into practice. A navigation bar is one of the most common web design components, and Auto Layout makes it simple to build one that behaves responsively.
Step 1: Create the Logo
Place a text layer or image for your logo on the canvas. For this example, type your brand name as a text layer.
Step 2: Create the Navigation Links
- Create individual text layers for each menu item: Home, About, Services, Contact.
- Select all four text layers.
- Press Shift + A to wrap them in a horizontal Auto Layout frame.
- Set the spacing between items to 32px (a comfortable gap for nav links).
Step 3: Create the CTA Button
- Type “Get Started” as a text layer.
- Press Shift + A to add Auto Layout to it.
- Set horizontal padding to 24px and vertical padding to 12px.
- Add a background fill color and round the corners to your preference.
You now have a button that automatically resizes when you change the label text.
Step 4: Combine Everything into the Nav Bar
- Select the logo, the nav links frame, and the CTA button.
- Press Shift + A to wrap them in one horizontal Auto Layout frame.
- Set the spacing mode to Space Between (click the spacing value and select “Auto”).
- Set horizontal padding to 64px and vertical padding to 16px.
- Set the nav bar frame width to Fill Container or a fixed width like 1440px.
The result: a fully responsive navigation bar where the logo sits on the left, the links center themselves, and the button stays on the right. If you change the frame width, the items redistribute automatically.
Step-by-Step: Building a Responsive Card Grid
Card layouts are everywhere in modern web design. Here is how to build a card grid using nested Auto Layout frames.
Step 1: Design a Single Card
- Create a rectangle for the card image placeholder (set it to a fixed height, like 200px, and width to Fill Container).
- Below it, add a text layer for the title and another for the description.
- Select the title and description, press Shift + A to stack them vertically with 8px spacing.
- Select the image placeholder and the text group, press Shift + A again to create the full card frame.
- Set the card direction to Vertical, spacing to 16px, and padding to 16px on all sides.
- Add a background fill and a subtle border radius.
- Set the card width to Fixed at 320px (we will change this later for responsiveness).
Step 2: Duplicate and Arrange Cards
- Duplicate the card three times so you have a row of cards.
- Select all cards and press Shift + A.
- Set the direction to Horizontal and the spacing to 24px.
Step 3: Make It Responsive with Wrap
- On the parent Auto Layout frame, switch the direction to Wrap.
- Set each card’s width to Fill Container with a minimum width of 280px.
- Now, when the parent frame is narrower, cards will wrap to the next row automatically.
This approach mirrors how CSS Grid or Flexbox wrap works in actual front-end development, making your designs much easier to translate into code.
Nesting Auto Layout Frames: The Secret to Complex Layouts
The real power of Auto Layout for web design comes from nesting. Almost every web page is a hierarchy of containers inside containers. Auto Layout handles this beautifully.
Here is a typical nesting structure for a web page section:
- Outer frame (vertical Auto Layout): The full-width section with vertical padding.
- Inner container (vertical Auto Layout): A max-width wrapper (e.g., 1200px, centered) holding the section title and the content area.
- Content row (horizontal Auto Layout with wrap): The row of cards, features, or columns.
- Individual items: Each card or feature block, also using vertical Auto Layout internally.
When you nest Auto Layout frames this way, each level controls its own spacing and resizing. The result is a design that behaves almost identically to a real coded website.
Common Auto Layout Mistakes to Avoid
Even experienced designers run into issues with Auto Layout. Here are the most frequent mistakes and how to fix them:
- Forgetting to set “Fill Container” on children: If a child element stays at a fixed width inside a responsive parent, it will not stretch. Always check the resizing mode.
- Using absolute positioning inside Auto Layout: You can set a child to “Absolute Position” within an Auto Layout frame, but that element will be removed from the flow. Use this sparingly.
- Over-nesting frames: While nesting is powerful, unnecessary layers make your file harder to manage. Keep your layer structure as flat as reasonably possible.
- Ignoring minimum and maximum width: Figma supports min/max width and height on Auto Layout children. Use these to prevent elements from becoming too small or too large at different screen sizes.
- Not using components with Auto Layout: If you build a card with Auto Layout but do not turn it into a component, you lose the ability to make global updates. Always componentize reusable elements.
Auto Layout Settings Cheat Sheet
Keep this reference handy while working on your web designs:
| Property | Where to Find It | Typical Values for Web |
|---|---|---|
| Direction | Auto Layout section, direction arrows | Vertical for sections, Horizontal for rows |
| Spacing | Gap value between direction arrows | 8, 16, 24, 32, or 48px |
| Padding | Padding inputs (click to expand for individual sides) | 16-64px horizontal, 16-80px vertical |
| Horizontal resizing | Dropdown next to width value | Fill Container for fluid, Fixed for constrained |
| Vertical resizing | Dropdown next to height value | Hug Contents for most sections |
| Alignment | 9-dot grid in Auto Layout section | Top-left or Center for most cases |
| Wrap | Wrap icon next to direction | Enable for card grids and tag lists |
Practical Use Cases for Auto Layout in Web Design
Beyond nav bars and card grids, here are more components where Auto Layout shines:
Buttons
Every button should use Auto Layout. Set horizontal and vertical padding, and the button will resize perfectly when you edit the label text. This ensures consistent padding regardless of the text length.
Form Fields
Wrap a label, an input field, and a helper text in a vertical Auto Layout frame. Spacing of 4-8px between elements keeps things clean, and the group stays organized when you reuse it across pages.
Hero Sections
A typical hero has a heading, a subheading, and a row of buttons. Stack the text vertically, place the buttons in a horizontal Auto Layout, then nest everything in a centered vertical frame with generous padding.
Footer Layouts
Footers usually have multiple columns. Create each column as a vertical Auto Layout frame, then wrap all columns in a horizontal Auto Layout frame with wrap enabled. The footer will reflow gracefully at smaller widths.
Testimonial Carousels
Design a single testimonial card with Auto Layout (avatar, quote text, name, and role stacked vertically). Duplicate it, arrange the cards in a horizontal row, and you have a layout ready for prototyping carousel interactions.
How Auto Layout Improves Designer-Developer Handoff
One of the less talked about benefits of using Auto Layout consistently in your web designs is how much it improves communication with developers. When you use Auto Layout, your Figma file inherently documents:
- The intended flex direction of each container.
- Exact spacing and padding values.
- How elements should resize at different screen widths.
- The alignment behavior of child elements.
Developers inspecting your file in Figma Dev Mode will see CSS-like properties that map directly to Flexbox. This reduces guesswork, speeds up development, and results in a final product that matches your design more closely.
Tips for Practicing Auto Layout
If you want to get comfortable with Auto Layout quickly, try these exercises:
- Recreate existing websites: Pick a simple landing page and rebuild it in Figma using only Auto Layout frames. No absolute positioning allowed.
- Use the Figma Auto Layout Playground: Figma offers a community file specifically designed for experimenting with Auto Layout. Duplicate it and play with the settings.
- Start from the inside out: When building a complex section, start with the smallest element (a button or a tag), apply Auto Layout, then work your way out to the parent containers.
- Challenge yourself with constraints: Try building a component where every frame uses “Fill Container” for width. This forces you to think responsively from the start.
Frequently Asked Questions
What is the keyboard shortcut for Auto Layout in Figma?
Select your frame or elements and press Shift + A. This is the fastest way to add Auto Layout in Figma. To remove it, select the Auto Layout frame and press the same shortcut or click the minus icon next to Auto Layout in the design panel.
Can I use Auto Layout for full web page designs?
Yes. In fact, it is recommended. You can build entire responsive web page layouts using nested Auto Layout frames. This approach produces designs that are closer to how websites are actually coded with CSS Flexbox and Grid.
What is the difference between “Hug Contents” and “Fill Container”?
Hug Contents means the frame shrinks to fit its children tightly. Fill Container means the element stretches to take up all available space inside its parent. Use Hug for elements like buttons and tags, and Fill for sections and content wrappers that need to be fluid.
How do I create space-between alignment in Figma Auto Layout?
Select the Auto Layout frame, then click the spacing value between items and change it to Auto. This distributes the children evenly across the available space, exactly like justify-content: space-between in CSS.
Does Auto Layout work with Figma components and variants?
Absolutely. Auto Layout and components work perfectly together. You can create a component with Auto Layout, define variants (such as different button sizes or states), and each variant will respect its Auto Layout settings. This is essential for building scalable design systems.
Can I make responsive designs for mobile and desktop using Auto Layout?
Yes. By combining Auto Layout with the wrap property and min/max width constraints, you can simulate responsive behavior within Figma. For a complete responsive workflow, pair Auto Layout with Figma’s variables and breakpoint frames to show how your design adapts across screen sizes.
Is Auto Layout in Figma similar to CSS Flexbox?
Very similar. Auto Layout maps closely to CSS Flexbox concepts. Direction is flex-direction, spacing is gap, padding is padding, and Fill Container behaves like flex: 1. If you understand one, learning the other becomes much easier.
Wrapping Up
Mastering Figma Auto Layout for web design is one of the highest-impact skills you can develop as a designer in 2026. It transforms static mockups into flexible, responsive design systems that communicate clearly to developers and adapt to real-world content.
Start small. Add Auto Layout to your next button. Then a card. Then a full section. Before you know it, you will be building entire page layouts that feel alive and responsive, all without writing a single line of code.
Have questions or want to share what you have built? Drop us a message. We love seeing creative uses of Auto Layout in the wild.