Figma Auto Layout: A Practical Guide for Beginners

Figma Auto layout is the feature that makes designs behave like real interfaces. Instead of placing every element by hand, you tell a frame how to arrange its children: in which direction, with how much space between them, and how they should resize. Add a word to a button and it grows. Remove an item from a list and the rest close the gap. Change a card’s width and the content reflows.

If you have ever spent ten minutes nudging layers one pixel at a time after a copy change, Figma Auto layout will save you hours. It is also the foundation for good components and for clean developer handoff. This guide covers the settings you will use every day, based on Figma’s current help documentation.

Adding and removing Auto layout

• Select one or more layers and press Shift + A to wrap them in an auto layout frame. You can also click the Auto layout button in the right sidebar.
• Select an existing frame and press Shift + A to add Auto layout to it.
• To remove Auto layout, use Alt + Shift + A on Windows (Option + Shift + A on Mac).

Once a frame has Auto layout, its children are no longer positioned freely. You reorder them by dragging or with the arrow keys, and Figma recalculates their positions.

The core settings

Direction (flow)

Auto layout has several flows:

Gap

Gap is the space between children. You can type a fixed value (for example 8 or 16) or set it to Auto, which distributes children across the available space. With Auto gap you can choose Between, Around or Evenly, similar to space-between, space-around and space-evenly in CSS. With wrap turned on, there is a separate gap for the space between rows (or columns).

Padding

Padding is the space between the frame’s edges and its children. You can set it uniformly, horizontally and vertically, or per side. A button might use 12 vertical and 20 horizontal padding.

Alignment

The alignment box decides where children sit inside the frame: top left, centre, bottom right and so on. For horizontal rows that mix icons and text of different sizes, Figma also offers baseline alignment, which lines up text baselines rather than boxes.

Resizing: Hug, Fill and Fixed

This is the part that confuses most beginners, so take it slowly. Every layer inside or as an auto layout frame has a width setting and a height setting, each of which can be one of three values:

You can also add minimum and maximum width or height from the width and height dropdowns. For example, a card can fill its container but never become wider than 480. This is very useful for responsive designs.

Example: building a button in two minutes

1. Create a text layer with the label “Book now”.
2. Add an icon (for example an arrow) to the right of it.
3. Select both and press Shift + A. Figma creates a horizontal auto layout frame.
4. Set gap to 8, horizontal padding to 20 and vertical padding to 12.
5. Set alignment to centre and the frame width and height to Hug.
6. Add a fill colour and a corner radius.
7. Change the label to “Confirm booking”. The button grows automatically.

Turn it into a component (Ctrl + Alt + K on Windows, Cmd + Option + K on Mac) and add variants for states such as default, hover and disabled. Read more in design systems for beginners.

Example: a responsive product card

1. Create a vertical auto layout frame with padding 16 and gap 12.
2. Inside it, add an image (width: Fill, height: Fixed), a title, a price row and a button.
3. Make the price row a horizontal auto layout with Auto gap so the price sits on the left and a “Save” icon on the right.
4. Set the title text to Fill width so long product names such as “Handwoven Kanchipuram silk saree” wrap instead of overflowing.
5. Set the button width to Fill so it spans the card.
6. Resize the card. Everything inside adapts.

Place several cards in a parent frame with horizontal flow and wrap turned on, or use the grid flow, and you have a product listing that reflows when you change the parent’s width.

Nesting: the real power

Most real layouts are auto layout frames inside auto layout frames. A page is a vertical stack of sections. A section is a vertical stack of a heading and a row. A row is a horizontal set of cards. Each card is a vertical stack. You can mix horizontal, vertical and grid flows at each level.

A good habit is to name frames clearly (“Card”, “Card / Body”, “Price row”) so your layer panel stays readable for you and for developers.

Other useful settings

• Ignore auto layout (absolute position): lets one child, such as a “New” badge on a card corner, sit freely while staying inside the frame. You can then use constraints to pin it.
• Canvas stacking: choose whether the first or last child appears on top when children overlap, for example with negative gap in an avatar stack.
• Strokes: choose whether strokes are included in or excluded from the layout calculation.
• Text truncation: limit text to a maximum number of lines so long titles end with an ellipsis instead of breaking the card.

How Figma Auto layout maps to CSS

Auto layout was designed with CSS concepts in mind, which makes handoff easier. Developers inspecting your file in Dev Mode will see these properties translated into code.

Here is the button from earlier written as HTML and CSS. Try changing the label text to see it “hug” its content.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hug button</title>
<style>
  body { font-family: system-ui, sans-serif; padding: 24px; }
  .btn {
    display: inline-flex;   /* horizontal auto layout, hug width */
    align-items: center;    /* centre alignment */
    gap: 8px;               /* gap */
    padding: 12px 20px;     /* vertical 12, horizontal 20 */
    background: #1d4ed8;
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 16px;
  }
  .row { display: flex; gap: 12px; flex-wrap: wrap; }
</style>
</head>
<body>
  <div class="row">
    <button class="btn">Book now <span aria-hidden="true">→</span></button>
    <button class="btn">Confirm booking <span aria-hidden="true">→</span></button>
  </div>
</body>
</html>

To learn these properties properly, see our lessons on CSS Flexbox and CSS Grid, and the comparison post Flexbox vs Grid.

Common mistakes and fixes

Checklist for clean Figma Auto layout

• Every repeated element (buttons, list items, cards) uses Auto layout.
• Spacing values come from a small, consistent scale such as 4, 8, 12, 16, 24, 32. Better still, store them as number variables.
• No invisible spacer rectangles.
• Text layers inside cards are set to Fill width so they wrap.
• Frames are named meaningfully.
• You have tested each component with very short and very long content.

Frequently asked questions

Further reading

• help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout
• help.figma.com/hc/articles/31289464393751
• help.figma.com/hc/articles/31289469907863
• help.figma.com/hc/en-us/articles/18894664907287-Create-a-responsive-card-with-auto-layout-and-constraints