Manually nudging boxes into place is slow, and it breaks the moment content changes. Auto layout fixes that. It lets frames grow, shrink, and realign automatically, much like real websites and apps do. Once you learn it, buttons stretch with their labels, lists expand with new rows, and whole screens adapt without extra work.

This Figma auto layout guide explains how it works, how to use each setting, and how to apply it to real UI components.

What Is Auto Layout in Figma?

Auto layout is a frame property that controls how child elements are arranged, spaced, and resized. Instead of fixed positions, items follow rules.

With auto layout, you can:

• Stack items horizontally or vertically
• Set consistent spacing between elements
• Add padding inside a container
• Let frames hug content or fill available space
• Build responsive components that adapt to content and screen size

Manual Layout vs. Auto Layout

Why Auto Layout Matters

Good layouts need to survive real content: longer names, extra items, translated text, and different screen sizes. Auto layout builds that flexibility into the design itself.

Using auto layout helps designers:

• Save time on repetitive spacing and alignment
• Keep designs consistent across screens
• Build reusable components with predictable behavior
• Test real content without breaking layouts
• Communicate better with developers through familiar layout logic

How to Add Auto Layout

Step 1: Select Your Elements

• Select one or more objects, such as text and an icon
• Or select an existing frame

Step 2: Apply Auto Layout

• Press Shift + A (Windows and Mac)
• Or click the plus icon next to Auto layout in the right panel
• Figma wraps the selection in an auto layout frame

Step 3: Adjust the Settings

Use the properties panel to tune direction, spacing, padding, alignment, and resizing.

Core Auto Layout Settings Explained

Direction

Direction controls how items are stacked.

• Vertical: items stack from top to bottom, ideal for forms, lists, and cards
• Horizontal: items sit side by side, ideal for buttons, tabs, and nav bars
• Wrap: items flow onto new rows when space runs out, ideal for tags and galleries

Spacing Between Items

• Enter a fixed number, such as 8, 12, or 16
• Use multiples of 4 or 8 for tidy, consistent layouts
• Choose Auto to distribute items evenly across the frame

Padding

Padding is the space between the frame edge and its contents.

• Set horizontal and vertical padding together
• Or set top, right, bottom, and left individually
• Use padding to control button size, card breathing room, and screen margins

Alignment

Alignment decides where items sit inside the frame.

• Pick from the alignment grid in the properties panel
• Align to start, center, or end on each axis
• Use baseline alignment for text of different sizes in a row

Resizing Behavior

Resizing rules are the heart of responsive design.

Advanced Auto Layout Features

Nesting Auto Layout Frames

Real interfaces use frames inside frames.

• A card (vertical) can contain an image, a text block (vertical), and a button row (horizontal)
• A page section can contain several cards in a wrapping horizontal layout
• Keep nesting logical and named so layers stay readable

Absolute Position

Some elements, such as badges or close icons, should sit on top of a layout without affecting it.

• Select the child element
• Turn on Absolute position in the properties panel
• Pin it to a corner or edge using constraints

Min and Max Width or Height

Set limits so layouts behave sensibly.

• Add a minimum width so buttons never become too small
• Add a maximum width so text lines stay readable
• Combine with Fill container for flexible but controlled components

Ignore Auto Layout Spacing and Canvas Stacking

• Control layer order with canvas stacking
• Use absolute positioning for decorative elements
• Keep the main content flow inside auto layout

Auto Layout in Real UI Components

Buttons

• Horizontal auto layout with icon and label
• Set padding (for example, 12 vertical and 20 horizontal)
• Use Hug contents so the button resizes with its text
• Add a minimum width for consistency

Cards

• Vertical auto layout for image, title, description, and action
• Use Fill container for text so it adapts to card width
• Keep consistent padding and spacing across all cards

Navigation Bars

• Horizontal auto layout with logo, links, and actions
• Use space between to push items apart
• Make link groups their own nested auto layout frames

Lists and Table Rows

• Vertical layout for the list and horizontal layout per row
• Set columns with Fill container and fixed widths where needed
• Add or remove rows without touching spacing

Forms

• Vertical stack of label, input, helper text, and error message
• Use consistent gaps between fields
• Test error states to confirm layouts expand correctly

Auto Layout Best Practices

• Plan structure first. Sketch the hierarchy before adding frames.
• Use a spacing scale. Stick to values such as 4, 8, 12, 16, 24, and 32.
• Name your frames. Labels like “Card / Content” make files easier to maintain.
• Pair with components. Auto layout and components together create scalable systems.
• Use variables for spacing and padding. Update values globally when design changes.
• Test with real content. Try long names, short names, and translations.
• Think responsively. Check how layouts behave when frames are resized.

Common Auto Layout Mistakes to Avoid

• Using fixed sizes everywhere, which prevents flexibility
• Over-nesting frames without a clear reason
• Mixing manual spacing with auto layout
• Forgetting min and max limits, which leads to broken extremes
• Ignoring wrap, then manually rearranging items
• Skipping real-content tests, which hides layout issues

Mini Project: Build a Responsive Card

Practice with a simple example.

• Create a vertical auto layout frame named “Card”
• Add an image placeholder (Fill container width)
• Add a text block with title and description (vertical, Fill container)
• Add a horizontal button row with a primary button
• Set padding to 16 and spacing to 12
• Turn the card into a component
• Place three instances in a horizontal wrapping frame
• Resize the parent and watch the cards adapt

How to Keep Improving Your Auto Layout Skills

Auto layout becomes natural with practice and review.

Audit Your Existing Files

A structured UI UX audit mindset helps you spot inconsistent spacing, fragile components, and layouts that break with real content. Reviewing your own files this way builds stronger habits.

Practice with Real Interfaces

• Rebuild one screen from a favorite app each week
• Convert old manual layouts to auto layout
• Create a small component library of buttons, cards, and inputs
• Test different content lengths in every component
• Share files for peer feedback

Grow with Expert Guidance

As projects get larger, working with a team that offers UI/UX design services shows how auto layout fits into research, wireframes, and production-ready interfaces. For long-term consistency, a scalable design system turns your auto layout components, tokens, and rules into a shared source of truth.

Measure Your Progress

• Do your components resize correctly with content?
• Can you add or remove items without manual fixes?
• Are your spacing values consistent?
• Do developers understand your layout logic quickly?
• Can you reuse components across multiple screens?

Frequently Asked Questions

What is auto layout in Figma?

Auto layout is a feature that automatically arranges, spaces, and resizes elements inside a frame based on rules you set, so designs adapt to content changes.

What is the shortcut for auto layout in Figma?

Press Shift + A to add auto layout to a selected element or frame.

What is the difference between Hug contents and Fill container?

Hug contents makes a frame shrink or grow to fit what’s inside it. Fill container makes an element expand to use the available space in its parent.

Is auto layout the same as CSS flexbox?

They are similar. Auto layout works on the same ideas of direction, spacing, alignment, and flexible sizing, which makes handoff to developers easier.

Final Thoughts

Auto layout is the feature that moves Figma from drawing screens to designing systems that behave like real products. When you set direction, spacing, padding, and resizing rules carefully, layouts adapt to content, stay consistent, and save hours of manual work.

Start with simple buttons and cards, then build toward full screens and component libraries. Test with real content and keep your structure clean. The result is faster workflows and designs that hold up in the real world.