Ultimate Guide To Auto Layout In Figma
A practical guide to Figma's Auto Layout: Creating a product card, a submission form & a full page with it
Nov 27, 2025
19 min
Contents:
What Is Auto Layout
Auto Layout is Figma's tool for automatically arranging and spacing elements inside a group based on rules you set. If you change something—like text length or image size—everything else adjusts automatically, so you don't have to fine-tune anything manually.
Instead of specifying exact values for various settings, you define rules:
- Flow (formerly called Direction): Horizontal, vertical, or wrap to a new line.
- Gap: Spacing between items, and padding inside the parent frame.
- Alignment & distribution of child elements.
- Resizing behavior (Hug, Fixed, Fill): To make components grow or shrink with the content.
How To Add Auto Layout In Figma
Auto Layout Shortcuts:
- Shift + A — apply Auto Layout.
- Shift + Alt/Option + A — remove Auto Layout.
- Ctrl/Cmd + Shift + G — ungroup elements.
- Ctrl/Cmd + D — duplicate (clone) an Auto Layout frame.
You can apply Auto Layout to a single frame—which may contain multiple elements such as text, shapes, and images—or to a selection of elements; Figma will wrap them in a new Auto Layout frame automatically. Examples of what Auto Layout can be applied to:
Let's see Auto Layout in action with frames. Create two frames, select them, and click the "Use Auto Layout" button or press Shift + A.
- Frame (single)
- Frame + Frame
- Element + Element (Figma will wrap them in a new frame)
Let's see Auto Layout in action with frames. Create two frames, select them, and click the "Use Auto Layout" button or press Shift + A.
You can find the Auto Layout setting in the right sidebar of the inspector when a frame or selection is active.
To check whether Auto Layout has been applied, open the Layers panel. An Auto Layout icon will appear next to the frame's name, and the selected frames will be wrapped into a single Auto Layout frame.
The Layers panel is located on the left. You can also open it using the shortcut Opt/Ctrl + 1.
If you already have a frame with elements inside, you can still apply Auto Layout. After that, you won't need to adjust the frame size manually—just set paddings and spacing, and the frame will resize automatically to fit its contents.
Auto Layout in action: If you resize the green rectangle, the frame will automatically adjust to fit the new size.
Key Auto Layout Properties
Let's review the main Auto Layout settings and how they behave in responsive layouts. You'll find these controls in the right-hand panel when an element with Auto Layout enabled is selected.
Flow
Flow defines how elements behave when there isn't enough space inside an Auto Layout frame. This setting lets you choose whether objects stay in a single row/column or automatically wrap to the next line when the frame runs out of space.
1
Freeform: You can move elements anywhere inside the frame. Although this option appears under Auto Layout, it effectively disables Auto Layout for those elements.
Freeform — place elements freely (disables Auto Layout).
2
Vertical: Elements are placed one under another.
Objects automatically stack in a column.
3
Horizontal: Objects are aligned horizontally. In this mode, an additional setting appears — Wrap. It determines whether elements overflow the frame (and get clipped) or wrap to the next line when space runs out.
Horizontal layout with wrap turned off.
Horizontal layout with wrap turned on.
4
Grid: A new mode that automatically places elements on a grid. A Grid panel appears so you can customize the grid, and elements update automatically when you change it.
When you change the grid, the elements adjust to it automatically.
Resizing
This section contains W (width) and H (height) controls. They set the width and height of the entire frame with Auto Layout applied.
You can choose between two modes:
- Fixed: The frame's width and height remain unchanged, regardless of other settings or the sizes of the items inside.
- Hug (fit to content): The frame's width and height adjust based on the configured padding and the sizes of the items inside.
When Hug is enabled, changing the spacing between the squares makes the frame grow or shrink.
Gap
This setting controls the spacing between items inside an Auto Layout. You can set horizontal and vertical gaps independently.
Example: The vertical and horizontal spacing between the squares inside the Auto Layout is 40 px.
Alignment
This setting controls how elements inside an Auto Layout are aligned—left, right, center, top, or bottom. It becomes available when the layout's Flow is set to Horizontal or Vertical.
If Wrap is enabled, Alignment also determines how uneven rows/columns are positioned. For example, the purple square may sit in the center by default, but you can pin it to the left or right instead.
Padding
This setting controls the spacing between the frame's edges and its content. Padding can be set individually for each side. Any new elements you add will snap into place and respect those padding settings.
Additional settings
Several additional settings are available for Auto Layout. Let's go through each one.
To access other settings, click "Auto layout settings" under "Auto layout."
1
Strokes: The outline around a frame or element. You can choose whether the outline is placed inside or outside the element's edges.
This is how the frame looks with the stroke enabled and disabled.
2
Canvas stacking: Defines how elements overlap when there's a negative gap. Choose whether the first or last element should be placed in front.
This setting is not available when the layout is set to Grid.
3
Align text baseline: Aligns text elements along the same baseline.
This setting is not available when the layout is set to Grid.
When enabled, the text elements line up neatly on the baseline.
Use Cases Examples
Let's be honest — all these terms can feel overwhelming. Without hands-on practice, they don't stick and don't make much sense. So instead of memorizing theory, let's see Auto Layout in action. We'll create three common interface elements: A button, a product card, and a sign-up form.
If you're new to no-code solutions, use this exclusive promo code to get one month of the Tilda Personal Plan instead of the standard 2-week trial.
See instructions on how to activate it
Button
Let's create a button using a frame and a text layer. Normally, you would manually adjust the frame width to match the length of the text. But what happens if the text gets longer? You'd have to resize the frame again. And if your interface or website has many buttons, this quickly becomes time-consuming.
As you can see, when the text length exceeds the frame, you have to manually adjust the second button.
Let's enable Auto Layout to reduce manual adjustments.:
- Apply Auto Layout to the frame (Shift + A).
- Set Hug so the button width adapts to the text length.
- Adjust the padding so the text doesn't stick to the edges of the frame.
With Auto Layout enabled, the button automatically adjusts to the caption length.
Product card
Product cards are used most often in online stores. There can be hundreds or even thousands of them. Each card contains titles and descriptions of different lengths, plus images of different sizes.
With Auto Layout, you can simply replace text and images — everything else adjusts automatically.
A card without Auto Layout: With a small amount of text, everything looks fine.
But if the text becomes longer, part of the content spills outside the card.
Inside the card, different elements require different spacing:
• the space between the title and the description is one value.
• the space between text and image is another.
To make the card resize automatically, we'll build it using multiple Auto Layout layers.
• the space between the title and the description is one value.
• the space between text and image is another.
To make the card resize automatically, we'll build it using multiple Auto Layout layers.
1
Start by applying Auto Layout to the title and description layer. Set a vertical flow and a 12-pixel gap so the height adjusts automatically to different text lengths.
2
Next, apply Auto Layout to the image and text elements together. This lets the card adapt to images of different sizes. Add padding around the card and set the background color to white.
Now you can replace the image or add longer text — Figma automatically adjusts the height of the card.
When we add another line of text, the card readjusts and nothing breaks.
Contact/submission form
A form on a website usually includes several input fields and a button. However, if you resize the frame, the fields won't stretch automatically, and the spacing between them can break.
A form without Auto Layout: The fields don't stretch, and nothing adjusts automatically.
Now let's apply everything we've learned and build a form with three standard input fields.
1
Add a field label and a frame that will act as the input.
Future input field label and the element that will act as an input.
2
Apply Auto Layout, then set Flow to Horizontal. Give the label a fixed width so all field names align neatly. Set the input field width to Fill — this way, when you resize the container, the input field automatically adjusts to its width.
3
Duplicate the field two more times (e.g., Last Name and Email).
4
Select all three fields, group them, and apply Auto Layout again. Set the group width to Fill. Now, when you resize the form container, the fields inside adjust automatically.
The form is ready. Add as many fields as you need, and place the Submit button underneath — just like the one we created earlier.
Creating a "Fluid" Layout With Auto Layout
Auto Layout makes it possible to build entire web pages with spacing that adjusts automatically. You begin by setting the distance between the title and description, then add spacing below the image, the button, and the rest of the frame. Step by step, you end up with a fully automated layout in Figma.
When creating any layout, it's very convenient when the content adapts automatically to different screen sizes. This is what's often referred to as responsive design. To achieve this, we need to create a fluid layout.
For this example, let's take our product card, duplicate it twice, and align all three cards to a grid. This will make them adapt to the frame's width.
1
First, create a frame, then add a 12-column grid.
2
Add three product cards and place them so each one spans four columns.
3
For each card's container, set the width to Fill so the cards stretch when you resize the main container.
4
For the container that holds all three cards, set a fixed width. Under the Constraints settings, choose the "L + R" option so the layout stretches with the frame's width.
Now you can quickly replace or add any elements, and even resize the main frame. All elements will automatically adjust to its width.
Keep in mind that in Figma, an element's width and constraints are connected, and some combinations won't work together.
If you set an Auto Layout frame's width to "Hug contents," it will resize based on the content inside. But if a layer inside that frame uses "Left + Right" constraints, it will stretch from one side of the parent container to the other. Those two settings contradict each other: In the first case, the content determines the size, and in the second, the container does. When that happens, Figma will automatically prioritize one of the settings.
If you need an element to stretch along with its parent frame (as in the previous example with product cards), first give the element a fixed width. Then you can enable the "Left + Right" constraints, and it will resize correctly together with the parent.
If you set an Auto Layout frame's width to "Hug contents," it will resize based on the content inside. But if a layer inside that frame uses "Left + Right" constraints, it will stretch from one side of the parent container to the other. Those two settings contradict each other: In the first case, the content determines the size, and in the second, the container does. When that happens, Figma will automatically prioritize one of the settings.
If you need an element to stretch along with its parent frame (as in the previous example with product cards), first give the element a fixed width. Then you can enable the "Left + Right" constraints, and it will resize correctly together with the parent.
How To Ignore Auto Layout Properties (Absolute Positioning)
What if you need to add a small element, like a discount label or a “Add to favorites” button, inside a product card that uses Auto Layout?
In this case, the Absolute positioning setting is the solution. It lets you freely place an element inside an Auto Layout frame while ignoring the layout rules applied to the other elements. This option becomes available once you enable "Ignore auto layout."
Let's take a closer look at an example where we need to add a small discount label to a product card.
1
First, create the discount label.
2
Add it to the product card. If you simply drop it inside the Auto Layout frame, it will readjust based on the existing layout rules and appear somewhere between the other elements.
3
Enable "Ignore auto layout." Now you can position the label anywhere you like.
The Absolute positioning setting overrides Auto Layout, letting you place elements anywhere you like—for example, right on top of the product image.
FAQ: Auto Layout Main Use Nuances
How to remove all Auto Layout
You can remove Auto Layout using the same toolbar button you used to apply it. You can also use the shortcut Shift + Option + A on Mac or Shift + Alt + A on Windows. This switches the Auto Layout frame back to a regular frame.
If you then want to ungroup individual elements that are grouped together, you can use the shortcut Cmd/Ctrl + Shift + G.
When to use Auto Layout
- You need elements to maintain consistent spacing. Example: A button with icons and text.
- You need to regularly update the content. Example: A list of services with a changing number of items.
- You need your layout to be fully responsive across different screen sizes. Example: Designing a page with desktop and mobile versions.
- You often modify the structure. Example: Menu items that you frequently add or remove.
- You use many repeating design elements. Example: Headers and footers that appear on multiple pages.
Why is the Fill container option available for some elements but not for others?
The Fill container resizing option appears only for elements placed inside an Auto Layout frame. This is because "Fill container" tells the child element to grow or shrink according to the parent Auto Layout's logic.
You cannot set Fill container on a top-level frame or on any element that is not inside an Auto Layout frame—because there is no Auto Layout parent whose space the element could "fill."
When not to use Auto Layout
Auto Layout isn't always necessary. For example, if you're creating something simple, like a one-off banner you don't plan to reuse, there’s no need to set up automatic spacing or layout rules. You only need to place the heading and the image inside the frame once at fixed distances. Setting up Auto Layout for a layout you'll never modify or repeat doesn't provide any real benefit.
A simple banner like this doesn't really need Auto Layout.
If you liked the article, share it with your friends. Thank you!
Read also:
Free coursebook on how to design, set up, and run
high-conversion landing pages
high-conversion landing pages
Free practical guide to web animation with examples, techniques,
and tips on how to use them
