Figma auto layout explained: Hug, Fill, Fixed and more

Auto layout is a Figma frame setting that arranges child layers in a row, a column or a grid, with padding and gap values you control. When the content changes, the frame resizes itself. Most confusion comes from the three resizing modes, Hug, Fill and Fixed. Once those click, you can build almost any interface with it.

I'm Hai Le, a UI/UX designer who has built design systems for Car From Japan, Oreka and Joyme, and who writes the code for this portfolio myself. My 7-day Figma plan for beginners introduces auto layout on day three. This post goes further: what each setting does, why layouts seem to break on their own, and which line of CSS each setting becomes.

How do you add or remove auto layout?

Select one or more layers and press Shift + A. Figma wraps them in a new auto layout frame, or turns auto layout on for the frame you selected. To remove it, press Option + Shift + A on Mac or Alt + Shift + A on Windows.

The right sidebar then gives you three flows:

Vertical and Horizontal also support Wrap. When children run out of room, they move to a new row (horizontal) or a new column (vertical).

What's the difference between Hug, Fill and Fixed?

Every layer in auto layout has one resizing mode for width and one for height, set independently.

The "Available on" column explains most of the confusion. Hug needs content to shrink around. Fill needs a parent to fill. A Fill child inside a Hug parent has nothing to stretch into.

The rule I work by: width flows from the outside in, height flows from the inside out. The outermost screen or column is Fixed. Blocks inside it Fill the width. Heights are almost always Hug, so longer text makes the block taller.

Text deserves a special mention. Figma warns that fixed-size text layers won't resize to fit their text, which can make them overlap other layers in an auto layout frame. For a paragraph inside a card, set width to Fill and height to Hug so the text wraps.

When should you use padding, gap and auto gap?

Padding is the space between the frame's edge and its content. Gap is the space between children. You can type a number, or, for vertical and horizontal flows, set gap to Auto and choose Between, Around or Evenly.

I use numeric gaps nearly everywhere and save Auto for cases where items should pin to both ends. A header with a logo on the left and a menu on the right is a horizontal frame, width Fill, gap Auto with Between.

Pull padding and gap values from a fixed scale, such as multiples of 4. Once that scale lives in variables, one change updates the whole file. What design tokens are covers how to name and organize that scale.

Wrap or grid: which one fits?

Both put children on more than one line. They treat columns differently.

For grid, set Number of columns and Number of rows from the grid picker in the right sidebar. Rows default to auto, so the grid adds rows as you add items. Each track can be Fixed, Hug or Fill, and Fill uses fr units, just like CSS grid.

How do you overlap something without breaking the layout?

Use Ignore auto layout, which Figma used to call absolute position. The name changed and the behavior didn't. Select the child and click Ignore auto layout in the right sidebar, or on Mac hold Control while dragging a layer into an auto layout frame.

The layer stays inside the frame, but it and its siblings ignore each other as they resize. I use it for notification dots on avatars, close buttons in popup corners and "New" labels on card images.

If you find yourself reaching for it on more than one or two layers in the same frame, the frame structure is the real problem.

What are min and max width for?

The Width and Height dropdowns in the right sidebar include Add min width, Add max width, Add min height and Add max height. They limit how far Hug and Fill can stretch or shrink.

Two places I always set them:

• Max width on body text. On a wide desktop frame, very long lines make it hard to find the start of the next one. A max width keeps the measure readable.
• Min width on buttons. An "OK" button set to Hug is too small to hit comfortably. A min width keeps a usable size while still letting longer labels grow.

Clear them with Remove min and max in the same dropdown.

Why does my auto layout keep breaking?

These are the problems I see most often when reviewing beginners' files:

What works for me: sketch the layer tree in plain text first, then apply Shift + A from the innermost block outwards. Each frame should answer two questions: which direction, and how far apart.

Example: structuring an inquiry popup

At Car From Japan I cut the vehicle inquiry popup down to a "Check availability" title, one line of car details, four contact fields (name, email and phone required, address optional), an "Add a coupon" button and a prefilled message. The reasoning behind each change is in the inquiry form case study.

If I rebuilt that popup with auto layout, I would frame it like this:

Popup            Vertical · Fixed width · Hug height · padding 24 · gap 16
├─ Header        Horizontal · Fill width · gap Auto (Between)
│  ├─ Title      Fill width
│  └─ Close      Fixed 24 × 24
├─ Car           Horizontal · Fill width · gap 12
│  ├─ Thumbnail  Fixed
│  └─ Name+price Vertical · Fill width · Hug height
├─ Contact       Vertical · Fill width · gap 12 (each field Fill width)
├─ Add a coupon  Hug
└─ Submit        Fill width · Hug height

A long car name only makes the Car row taller, and everything below moves down. Widen the popup and the fields and submit button widen with it.

How does auto layout map to CSS?

Auto layout maps to flexbox almost one to one. That's why I tell designers who want to learn code to start here.

The popup header above, in CSS:

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Clean auto layout also pays off with AI tools. When Claude Code reads a file through the Figma MCP server, well-structured frames give it far less to guess. Figma MCP with Claude Code walks through that setup, and Claude Code for designers covers writing the code yourself.

What should you learn after auto layout?

Turn the blocks you built into reusable pieces with components and variants. I cover that in Figma components and variants.

If you're hiring a designer who builds design systems and can talk to developers in CSS, my about page has my experience and contact details.

Sources

Checked October 4, 2026.

• Guide to auto layout, Figma Help Center
• Use the grid auto layout flow, Figma Help Center
• CSS flexible box layout, MDN Web Docs