---
title: "Auto Layout in Figma: Building Components That Grow with Their Content"
url: "https://insideuxdesign.com/en/blog/auto-layout-in-figma-building-components-that-grow-with-their-content"
language: "en"
description: "How auto layout in Figma works: hug, fill, wrap, grid and nesting. Learn to build flexible buttons, cards and lists that map to CSS. Includes a checklist."
published: "2026-08-05T09:00:00+02:00"
updated: "2026-10-15T00:09:52+02:00"
---

# Auto Layout in Figma: Building Components That Grow with Their Content

Auto layout turns rigid mockups into components that respond to their content. How direction, spacing, hug, fill, wrap and grid work, and how to use them to build a button, a card and a list.

Picture a team designing “Fieldfresh,” an app that lets people order from farm shops in their area. In the mockup, the product card looks perfect: photo, product name, farm, price and an “Add to basket” button. Then real content arrives. “Pumpkin” becomes “Organic Hokkaido pumpkin, home-grown,” and the text runs over the edge. The button slides on top of the price. For the German version, someone has to adjust every card by hand, because “Add to basket” turns into “In den Korb” and nothing lines up anymore. And when the team wants to switch the list from two to three columns, one hour of work turns into three.

The problem is not the content. It is how the card is built. Every element sits at a fixed position inside a frame, and none of them knows it should respond to the others. This is exactly what auto layout in Figma is for.

This article explains how auto layout works, which settings it offers and how to use it to build a button, a card and a list that grow with their content. It also shows how all of this maps to CSS flexbox, and where it does not. Fieldfresh serves as a running example throughout. It is made up, but typical. The descriptions follow the current Figma Help Center. Figma keeps developing the feature, so individual labels may change.

## What auto layout is

Auto layout is a property of frames in Figma. A frame with auto layout arranges its contents according to rules: in which direction, with how much space between items, with how much padding, with which alignment and with which resizing behavior. When content changes, Figma recalculates the arrangement. If a label gets longer, the button grows. If a list item is added, the list grows.

Figma itself lists typical use cases: buttons that resize with their label, lists that adapt when items are added, removed or hidden, bento layouts and dashboards, and pages that fit different screen sizes. Auto layout is available on all Figma plans. If you are still deciding on a tool, the comparison [Sketch vs. Figma in 2026](https://insideuxdesign.com/en/blog/sketch-vs-figma-in-2026-which-one-you-should-choose) may help.

There are two ways to add it: select one or more layers and press `Shift` + `A`, or click “Add auto layout” in the right sidebar. Figma automatically picks a suitable direction, which you can change at any time.

## The basic settings

### Direction

Figma calls these “flows.” There are three: “Vertical” stacks content on top of each other, “Horizontal” places it side by side, and “Grid” arranges it in rows and columns. More on grid below. “Wrap” is not a separate flow but an option for horizontal and vertical layouts.

### Gap

The gap defines how much space sits between child elements. You can enter a fixed value or choose “Auto.” With Auto, Figma distributes the available space evenly. According to the Help Center, there are three variants that match the CSS values of the same name: “Between” is the default and leaves no space at the edges, “Evenly” spreads space equally across gaps and edges, and “Around” makes the gaps twice as large as the edges. Figma notes that Evenly and Around are being rolled out gradually.

Auto is ideal for rows where one thing should sit on the left and another on the right, such as the price on the left and the button on the right.

### Padding

Padding is the space between the edge of the frame and its contents. You can set it uniformly, separately for horizontal and vertical, or individually for each side. Figma also understands CSS shorthand, so `12, 20, 12, 20` sets top, right, bottom and left. According to the Help Center, a frame cannot become smaller than its padding.

### Alignment

The alignment box with its nine positions defines where content sits inside the frame, for example top left or centered. A useful detail is baseline alignment: it aligns elements by the baseline of their text, for example two text layers in different sizes or an icon next to a label. You will find it in the auto layout settings, or you can toggle it by pressing `B` on the alignment box.

## Resizing: hug, fill and fixed

Resizing is where most of the important decisions in auto layout happen. Width and height can be set independently, each with three options.

**“Hug contents”** means the frame is as small as possible while still wrapping its contents, including spacing. The Help Center walks through an example: a 40-pixel text layer with 10 pixels of padding on the left and right results in a 60-pixel frame. If the text grows to 50 pixels, the frame grows to 70. Hug only works on auto layout frames.

**“Fill container”** means the element stretches to take up all available space in its parent frame. One important detail: if you set a child to fill while its parent is set to hug, the parent can no longer hug. According to Figma, it switches to fixed on that axis.

**“Fixed width” and “Fixed height”** keep a dimension constant, no matter what happens inside the frame. As soon as you type in a width or height manually, that axis switches to fixed.

On top of that, you can set limits. From the width or height dropdown, you can add “Min width,” “Max width” and the height equivalents. These limits combine with the other options. A card set to fill that never gets narrower than 240 pixels is easy to build this way.

### Text in auto layout

Text layers have their own resizing options: “Auto width” grows horizontally and only breaks lines at manual line breaks, “Auto height” keeps the width fixed and grows downward, and “Fixed size” does not resize at all. Fixed size is particularly tricky in auto layout, because the text does not adapt to its content and can overlap other elements.

For long text, there is “Truncate text”: whatever does not fit is cut off and marked with an ellipsis. “Max lines” defines after how many lines this happens. For text inside auto layout frames, this works when the height is set to hug contents.

## Wrap and grid

With Wrap, elements move to a new row when they run out of space, for example in a row of filter chips. In a vertical layout, a new column starts instead once the frame’s height is reached. That is why vertical wrap needs a fixed height: otherwise there is no point at which to break. With Wrap, you can set two gaps: one within a row and one between rows. Figma stresses that Wrap does not create a masonry layout, so there are no staggered tiles.

Since the Config conference in May 2025, there is also “Grid” as a third flow. Grid arranges content in two dimensions, in rows and columns, and according to Figma it suits bento layouts, dashboards, editorial layouts and tables. The key settings as they currently stand:

- You set the number of columns and rows. The row count defaults to “Auto,” so rows are added or removed as the content requires.
- Tracks, meaning rows and columns, can have a fixed size, hug their content or fill the available space. Filling tracks share the space in fractions, like the `fr` unit in CSS grid.
- You set the gaps between rows and between columns separately.
- An element can span several cells. To do that, it has to be set to fill container.
- Elements are placed in order from left to right and top to bottom. You can turn this off if you want to keep empty cells on purpose.

Do not confuse grid with the layout grids Figma has offered for a long time. Those are a visual aid for alignment, not a rule that arranges content.

## Taking elements out of the flow

Sometimes an element should sit inside the frame without being part of the arrangement, such as a “New” badge floating over the photo in the corner of a product card. That is what “Ignore auto layout” is for. Figma used to call this feature “Absolute position.” Select the child element and enable the option in the right sidebar. The element then behaves as it would in a regular frame: you can place it freely and pin it to a corner with constraints. Children in the normal flow, by the way, cannot have constraints.

When elements overlap, for example with negative spacing in a stack of profile pictures, “Canvas stacking” decides which one sits on top. By default, it is the last element. “First on top” reverses this. The order in the layers panel stays the same either way.

## Nesting: from button to list

The real power of auto layout comes from nesting. Every auto layout frame can contain more auto layout frames, each with its own direction, gap and padding. Figma’s documentation demonstrates this with a four-level newsfeed. For Fieldfresh, it looks like this.

### 1. The button

The button is a horizontal frame with an icon and a label. Padding of 12 pixels at the top and bottom, 20 pixels on the left and right, and a gap of 8 pixels. Width and height are set to hug contents.

- **Before:** A rectangle with a text layer on top, both centered. When “Add to basket” becomes “In den Korb,” or a longer translation, the text spills over the rectangle.
- **After:** The button grows with its label. If the icon is hidden, the label moves over, because hidden elements take up no space in auto layout.

### 2. The card

The card is a vertical frame with three parts: photo, text area and footer. The photo is set to fill container in width, with a locked aspect ratio so it does not distort when resized. The text area is a vertical frame with the product name and the farm, width set to fill, height set to hug. The product name is limited to two lines with “Truncate text” and “Max lines,” so very long names do not break the card. The footer is a horizontal frame with the price and the button, with the gap set to Auto so the price sits on the left and the button on the right. The “New” badge floats over the top right of the photo with ignore auto layout.

The Help Center recommends exactly this combination of fill for width and hug for height: children fill the width of their parent and grow in height with their content.

### 3. The list

For a single-column list, a vertical frame with a gap of 16 is enough, with the cards set to fill. For a product grid, you have two options: a horizontal frame with Wrap, where the cards have a fixed width or a minimum width, or Grid with a fixed number of columns. Grid fits when you want to set the number of columns deliberately. Wrap fits when as many cards as possible should sit side by side.

- **Before:** Twelve cards aligned in two columns by hand. Switching to three columns means repositioning every card.
- **After:** Change the column count in the grid or drag the list frame wider. Everything else arranges itself.

Two tips from the Help Center make building easier: temporarily give frames a background color so you can see how they behave. And test every component by dragging the outer frame larger and smaller. If something overflows or jumps, the resizing is off somewhere.

Breaking components down into small, composed building blocks reflects the thinking behind [atomic design](https://insideuxdesign.com/en/blog/what-is-atomic-design): the button is an atom, the card a molecule, the list an organism.

## Auto layout and CSS flexbox

If you work with developers, it helps that auto layout resembles the CSS flexbox model. Figma draws this connection itself in several places. The main equivalents:

- Horizontal and vertical correspond to `flex-direction: row` and `column`.
- Gap corresponds to `gap`, and padding to `padding`.
- Auto with Between, Evenly and Around corresponds to `justify-content: space-between`, `space-evenly` and `space-around`.
- Wrap corresponds to `flex-wrap: wrap`.
- Fill container roughly corresponds to `flex: 1` along the main axis and `align-self: stretch` across it.
- Min and max correspond to `min-width`, `max-width` and their height counterparts.
- Baseline alignment corresponds to `align-items: baseline`.
- Ignore auto layout resembles `position: absolute` inside a positioned parent.
- Grid broadly corresponds to CSS grid, including fractions with `fr`.

The match is not complete, though. Four differences keep causing questions during handoff.

**Default behavior.** In CSS, flex items stretch along the cross axis by default, because the initial value of `align-items` is `stretch`. They also shrink by default when space runs out. In Figma, an element only fills if you choose fill container, and an element with a fixed size stays fixed.

**Negative spacing.** Figma allows stacks with negative spacing. The CSS `gap` property, on the other hand, does not accept negative values. In code, this is usually solved with negative margins.

**Strokes.** By default, Figma counts inside strokes toward an element’s size. The Help Center itself notes that this does not always reflect how CSS renders borders during handoff. That is why you can exclude inside strokes from the calculation in the auto layout settings.

**Overflow.** An auto layout frame adapts to its content. If you want to clip content or make it scroll in a [prototype](https://insideuxdesign.com/en/glossar/prototype), Figma says you need a regular frame wrapped around the auto layout frame.

For handoff, this means: auto layout makes the intent of a layout easy to read, but it does not replace a conversation about how a component should behave with extreme content.

## Auto layout, variants and variables

Components in Figma are frames too, so they can use auto layout. Figma points out that you have to add it to each component individually. In instances, meaning the copies of a component, you can adjust padding and gap, but you cannot reorder or add layers. Deleting a layer in an instance only hides it.

This works well with variants and component properties. A variant property “Size” with the values S, M and L can define its own padding and spacing for each size. A boolean property, an on/off switch, shows or hides the icon in the button. Because hidden elements take up no space in auto layout, the gap closes automatically.

Spacing and sizes can also be linked to number variables. Figma lists gap, padding, width and height as well as the minimum and maximum size limits, among others. That way, all components use the same spacing values, and a change takes effect everywhere. In a [design system](https://insideuxdesign.com/en/glossar/design-system), this saves a lot of back and forth. The Help Center explicitly flags one pitfall: if you change padding or gap with the handles directly on the canvas, the linked variable gets detached. The article [Design Systems for Small Teams](https://insideuxdesign.com/en/blog/design-systems-for-small-teams) covers how variables and spacing fit into a bigger system.

## Common mistakes

**Resizing by hand.** Dragging a frame by its corner or typing in a value sets that axis to fixed. The same applies to text: a text box resized by hand switches to fixed size. When a component suddenly stops growing with its content, this is the most common cause.

**Fill inside a hug frame.** A child set to fill and a parent set to hug contradict each other. Figma resolves this by switching the parent to fixed. For every layer, decide what determines its size: the content from the inside or the container from the outside.

**Spacing with invisible rectangles.** Empty rectangles as spacers work until someone moves or forgets them. Gap and padding exist for this purpose, and they can be linked to variables.

**Too many wrappers.** Every layer that only exists to wrap another one makes the component harder to understand. A good rule of thumb: every auto layout frame should have a job of its own, such as a direction, a group or a background.

**Expecting constraints in the flow.** Children of an auto layout frame cannot be pinned to edges with constraints. If you need that, take the element out of the flow with ignore auto layout.

**Vertical wrap without a fixed height.** Without a fixed height, the frame does not know when to start a new column.

**Testing only with placeholder text.** A card that works with “Pumpkin” also has to work with “Organic Hokkaido pumpkin, home-grown,” with translated text and without a photo. Test components with extreme content before others start using them.

## Conclusion

Auto layout turns static designs into components that respond to their content. The basics are manageable: direction, gap, padding, alignment and resizing with hug, fill and fixed. On top of that come wrap and grid for multi-row layouts, minimum and maximum sizes, and the option to take individual elements out of the flow.

The real work lies in the structure. At Fieldfresh, the product card now consists of a few clearly named layers, each with its own job. Longer product names, a translated version or a third column no longer take hours, just seconds. And because auto layout is close to the flexbox model, the development team understands faster how the card is meant to behave. If you know the differences, you avoid the typical misunderstandings during handoff.

## Checklist

- Every component that holds content uses auto layout instead of fixed positions.
- For every layer, you have decided whether the content (hug) or the container (fill) determines its size.
- Fixed sizes are set on purpose, not created by dragging a corner.
- Spacing comes from gap and padding, not from empty rectangles.
- Long text has a plan: wrapping, max lines or a minimum and maximum width.
- Floating elements such as badges use ignore auto layout and constraints.
- Grids use wrap or grid, depending on whether the column count should be fixed or flexible.
- Spacing and sizes are linked to number variables where it makes sense.
- Every component has been tested with extreme content and by resizing the outer frame.
- Differences from CSS, for example with strokes or negative spacing, have been discussed with the development team.

## Sources

- [Figma Learn: Guide to auto layout in Figma](https://help.figma.com/hc/en-us/articles/360040451373)
- [Figma Learn: Use the horizontal and vertical flows in auto layout](https://help.figma.com/hc/articles/31289464393751)
- [Figma Learn: Use the grid auto layout flow](https://help.figma.com/hc/articles/31289469907863)
- [Figma Learn: Combine vertical, horizontal, and grid auto layout flows](https://help.figma.com/hc/articles/31441443713047)
- [Figma Learn: Explore text properties](https://help.figma.com/hc/en-us/articles/360039956634)
- [Figma Learn: Adjust text dimensions and resizing](https://help.figma.com/hc/en-us/articles/27378154668951-Adjust-text-dimensions-and-resizing)
- [Figma Learn: Explore component properties](https://help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties)
- [Figma Learn: Apply variables to designs](https://help.figma.com/hc/en-us/articles/15343107263511-Apply-variables-to-designs)
- [Dylan Field, Figma Blog (2025): Config 2025 recap](https://www.figma.com/blog/config-2025-recap/)
- [MDN Web Docs: Basic concepts of flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
- [MDN Web Docs: gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)