Figma auto layout is the feature that lets frames resize and rearrange themselves when their content changes. Instead of nudging every button, card and list item by hand each time a label gets longer, you set a few rules once and Figma keeps the spacing consistent for you. For small design teams, that means fewer broken mockups, faster revisions and files that are far easier to hand over. This guide walks through how Figma auto layout works, the settings that matter most, and a practical way to build components with it.

Who this guide is for

This guide is written for small business owners, solo founders and small in-house teams who produce their own marketing graphics, landing pages or app screens, or who review files from a freelance or subscription designer. You do not need to be a full-time designer. If you open Figma a few times a week to update a banner, adjust a pricing card or check a designer’s work, understanding auto layout will save you time and make your requests to designers far more precise.

What Figma auto layout actually does

Figma’s own guide to auto layout describes it as a way to arrange the contents of a frame based on direction, spacing, padding and alignment. When content changes, or when elements are added, removed or resized, the layout adjusts without you repositioning anything manually.

In everyday terms, auto layout turns a frame into a container with rules. A button grows when its label grows. A list makes room when you add a row. A card keeps the same gap between its image, heading and text, however long the text becomes.

To add it, select the layers you want to group and press Shift + A, the shortcut Figma lists in the same guide.

The five settings that do most of the work

1. Direction

Direction decides how child layers flow. Figma offers three options:

• Vertical stacks items top to bottom, which suits lists, forms and news feeds.
• Horizontal places items side by side, which suits button rows and navigation bars.
• Grid arranges items in rows and columns for galleries or dashboards.

2. Gap between items

The gap is the space between each child. You can set a fixed value, or use automatic spacing so items spread out across the frame. A fixed gap is usually the right starting point for components such as cards and menus, because it keeps rhythm consistent.

3. Padding

Padding is the space between the edge of the frame and its contents. Figma lets you set one value for all sides or separate values per side. Buttons often use more horizontal padding than vertical padding so the label has room to breathe.

4. Resizing

Resizing settings decide how a frame and its children respond to change. The guide describes three behaviours:

• Hug contents: the frame shrinks or grows to fit its children.
• Fill container: a child stretches to use the available space in its parent.
• Fixed: the size stays the same whatever the content does.

You can also set minimum and maximum dimensions, which is useful for text blocks that should wrap at a readable width instead of stretching across a wide screen.

5. Alignment and wrap

Alignment controls where children sit inside the frame, for example centred or pinned to the left. Wrap lets items move onto a new row or column when they run out of space, which is handy for tag lists and chip groups.

Breaking out of the flow

Sometimes one element should not follow the rules, such as a notification badge that sits on the corner of an icon. Figma lets you exclude an object from the auto layout flow while keeping it inside the frame, so you can position it precisely. The guide compares this to absolute positioning in CSS. Use it sparingly: every excluded element is one more thing you have to adjust by hand later.

How to build a button with Figma auto layout

A button is the classic first component, because it shows every core setting in one small object.

1. Create the label. Add a text layer with your button text.
2. Add auto layout. Select the text and press Shift + A. Figma wraps it in a frame.
3. Set direction to horizontal. This leaves room for an icon beside the label later.
4. Add padding. Give the frame comfortable horizontal and vertical padding.
5. Set the frame to hug contents. Now the button grows when the label gets longer.
6. Style the frame. Add a fill, corner radius and, if needed, a stroke.
7. Test it. Type a much longer label and check that the padding stays even on both sides.

Once the button behaves, turn it into a component so every instance across your files shares the same rules.

Nesting auto layout frames

Real layouts are built from auto layout frames inside other auto layout frames. A card might be a vertical frame containing an image, a heading, a paragraph and a horizontal row of buttons. Each level has its own gap and padding.

A few habits keep nested layouts manageable:

• Name every frame. “Card / Body” and “Card / Actions” are easier to work with than “Frame 214”.
• Keep spacing values consistent. Pick a small set of spacing steps and reuse them, rather than inventing a new number for each frame.
• Use fill container for flexible children. A text block set to fill the card’s width will wrap neatly when the card resizes.
• Check the layer panel often. If a layout behaves strangely, the cause is usually a child set to the wrong resizing option.

Common Figma auto layout problems and fixes

• The frame will not shrink. Check whether it, or one of its children, is set to fixed width instead of hug contents.
• Text does not wrap. Set the text layer to fill container, or give the parent a maximum width.
• Spacing looks uneven. Look for an invisible or empty layer sitting in the flow and taking up a slot.
• An icon sits off-centre. Review the alignment setting on its parent frame, and make sure the icon frame itself has no stray padding.
• Everything jumps when you edit one item. That is auto layout working as designed. If one element should stay put, exclude it from the flow instead of fighting the rules.

Converting an existing file to Figma auto layout

Most teams do not start fresh; they inherit files full of hand-placed layers. Converting everything at once is rarely worth it. A gradual approach works better:

1. Start with the components you edit most. Buttons, form fields and cards change constantly, so they repay the effort first.
2. Work from the inside out. Add auto layout to the smallest groups, such as an icon and its label, before wrapping larger sections.
3. Measure the existing spacing. Note the gaps the original design used and round them to your chosen spacing steps, so the converted version still looks the same.
4. Swap instances, not copies. Once a component uses auto layout, replace pasted copies across screens with instances so future changes spread automatically.
5. Leave one-off marketing layouts alone if nobody will edit them again. Effort spent there rarely pays back.

After a few weeks, the parts of the file people touch most will behave predictably, and the rest can follow when it next needs work.

Why auto layout saves time for small teams

The benefit is not only speed on the first draft. Because the layout rules live in the file, the next designer who opens it can change copy, add a menu item or translate a screen without rebuilding anything. Revisions become edits rather than redraws, and handoff conversations shift from “why is this 3 pixels off?” to whether the design solves the problem.

If you are setting up shared design files for a team, treat auto layout rules as part of your documentation. Our business systems articles cover how to turn decisions like spacing scales and naming conventions into checklists everyone can follow.

Key takeaways

Figma auto layout turns frames into containers that follow rules for direction, gap, padding, resizing and alignment, so layouts adjust themselves when content changes. Start with a simple button, set it to hug its contents, and test it with long and short labels. Build larger components by nesting auto layout frames, name every layer, reuse a small set of spacing values, and exclude elements from the flow only when they truly need to sit apart.

Written by the Design Productive Editorial desk. Disclosure: this guide contains no affiliate or sponsored links, and Design Productive is not affiliated with Figma.