Most Figma files break the moment content changes. Labels overflow buttons, cards collapse, spacing drifts, and what looked perfect at fixed dimensions falls apart the second a real word count hits it.
This Figma auto layout guide covers everything from frame resizing behavior to nested components and CSS flexbox mapping, so your designs hold up under real content and hand off cleanly to developers.
By the end, you will know how to use auto layout properties, build a responsive button component, fix the most common layout mistakes, and structure components that scale across a full design system.
What Is Figma Auto Layout?
Figma auto layout is a frame property that controls how child elements stack, space, and resize relative to each other and their container. It removes the need to manually reposition elements every time content changes.
Auto layout only applies to frames, not groups. That distinction trips up a lot of new Figma users. If you try applying it to a group, nothing happens.
Figma introduced auto layout in 2019. The feature went through a major overhaul with Auto Layout 3.0 in 2022, adding wrap support, negative gap values, and absolute positioning. Config 2024 added the Suggest Auto Layout feature, which builds nested frames automatically.
Figma now holds 40.65% of the design tools market and is used by 90% of designers surveyed in 2023 (UX Tools). Auto layout is one of the core reasons teams stick with it over alternatives.
How Auto Layout Differs from Groups and Standard Frames
Standard frame: a fixed container. Children sit wherever you place them. Resize the frame and nothing inside moves.
Group: a loose collection of layers. Figma treats a group as a single unit. No layout logic, no padding control.
Auto layout frame: a container with rules. Gap, padding, direction, and alignment all control how children behave when content changes or the frame resizes.
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →The practical difference shows up fast. Build a button as a standard frame, change the label text, and you’re manually adjusting padding again. Build it as an auto layout frame and the button grows with the text automatically.
| Container Type | Responds to Content | Gap Control | Padding Control |
|---|---|---|---|
| Standard Frame | No | No | No |
| Group | No | No | No |
| Auto Layout Frame | Yes | Yes | Yes |
What Are the Auto Layout Properties in Figma?
Auto layout frames expose a set of configurable properties in the right panel. These properties control how children are arranged, spaced, and aligned inside the container.
Knowing what each property does before touching the settings saves a lot of undo history.
Direction and Wrap Settings
Horizontal direction stacks children left to right, like a row of buttons in a toolbar or a set of tags in a component.
Vertical direction stacks children top to bottom, which works for card content, list items, or any stacked UI structure.
Wrap is only available in horizontal direction. When children overflow the container width, wrap pushes them to the next line. Think of a tag group that reflows when the container gets narrower.
Figma also added a grid flow in later updates. Grid auto layout places children in columns and rows, with individual span controls for each child.
Padding and Gap Controls
Gap sets the distance between child elements. Padding sets the space between the children and the frame edge.
Both can be set independently. Padding supports 4 separate values (top, right, bottom, left) or uniform values applied to all sides at once.
Gap accepts negative values, introduced in Auto Layout 3.0. Negative gap creates overlap between children, useful for avatar stacks and layered card designs. Gap can also be set to “Auto,” which distributes space evenly between items, equivalent to CSS justify-content: space-between.
Alignment Options
Alignment is controlled through a 9-point grid in the right panel. It sets where children sit within the parent frame.
The available alignment options depend on the direction. In a horizontal layout, you can align children to the top, center, or bottom of the frame. In a vertical layout, you control left, center, or right alignment.
One thing to know: you set alignment on the parent frame, not on individual children. If you need one child to break from the group alignment, absolute position handles that case.
How Do You Add Auto Layout to a Frame in Figma?
Auto layout is applied in 3 ways. The fastest is the keyboard shortcut Shift + A on any selected frame or group of objects. Figma wraps the selection in an auto layout frame immediately.
The second option is the “+” button next to the Auto layout label in the right panel, visible when a frame is selected.
The third is right-clicking the selection and choosing “Add auto layout” from the context menu.
You can also select multiple objects (not yet grouped or framed) and hit Shift + A. Figma wraps all of them into a new auto layout frame and spaces them based on the existing distances between them.
What Happens to Existing Content When Auto Layout Is Applied
Figma reads the position of existing children and attempts to set the gap value to match. It doesn’t always get this right, especially if children are unevenly spaced.
After applying, check the gap and padding values in the right panel. Adjust them to match your spacing system before moving forward.
Removing auto layout is done through the right panel. Click the minus icon next to the Auto layout label. The frame structure stays intact, but all layout rules are removed. Children revert to their last absolute positions inside the frame.
What Is the Difference Between Fixed, Hug, and Fill in Figma Auto Layout?
These 3 resizing modes control how frames and children respond when content changes. Getting them wrong causes most of the sizing problems people run into with auto layout.
| Mode | Behavior | CSS Equivalent | Best For |
|---|---|---|---|
| Fixed | Holds a set size regardless of content | width / height | Fixed-size wrappers, images |
| Hug | Shrinks or grows to fit children exactly | fit-content | Buttons, tags, labels |
| Fill | Expands to fill remaining space in parent | flex: 1 | Responsive containers, columns |
Hug Contents vs. Fixed Width on Parent Frames
Hug on a parent frame means the frame wraps its children tightly. Add a child, the frame grows. Remove one, it shrinks. This is the correct setting for most component frames like buttons and chips.
Fixed on a parent means the frame holds its dimensions no matter what happens inside. This is right for containers with a defined width, like a card at 320px or a modal at 480px.
The two modes produce very different behaviors when you start editing content. Using fixed on a button component causes text to overflow the frame rather than pushing the frame to resize.
Fill Container on Child Elements
Fill only works when the direct parent is also an auto layout frame. Set a child to fill and it expands to take up whatever space the parent has available after accounting for other children and padding.
This is the setting you use for input fields inside a form row, or for a text column inside a card. The parent controls the width, the child fills it.
A common mistake: setting a child to fill inside a parent that is set to hug. The fill has nothing to expand into because the parent is shrinking to fit its children. The result is a zero-width or zero-height element. Figma won’t warn you, it just collapses the element.
How Does Figma Auto Layout Handle Nested Frames?
Nested auto layout frames are the foundation of every scalable Figma component. A button nested inside a card row, inside a list, inside a page section, each frame can have its own layout rules.
73% of design-to-development handoffs require multiple rounds of revision due to unclear spacing and responsive behavior (Medium, 2024). Components built with properly nested auto layout dramatically cut that back-and-forth.
Direction Combinations in Nested Layouts
Parent and child frames can use different directions. A horizontal parent containing vertical children is one of the most common patterns in UI design. Think of a row of cards where each card stacks its content vertically inside.
Figma handles these direction combinations without restriction. The parent manages horizontal spacing between cards. Each card manages vertical spacing between its own children independently.
The key behavior to understand: children inherit the layout context of their direct parent only. A deeply nested child has no relationship to grandparent frames. Each auto layout frame is responsible for its own children.
Fill Container Behavior in Nested Structures
Fill container only works one level deep at a time. A child set to fill expands within its direct parent. That parent, if it is also set to fill, expands within its own parent.
This chain works well for building responsive column layouts. Set the outermost frame to a fixed width. Set each column to fill. Set content blocks inside each column to fill. The width distributes down through the hierarchy automatically.
Over-nesting is the most common auto layout mistake. Stack 6 or 7 levels of auto layout frames and you will spend more time debugging layout conflicts than building. Most UI patterns need 3 to 4 levels of nesting at most.
What Is Absolute Position in Figma Auto Layout?
Absolute position removes a specific child from the auto layout flow while keeping it inside the auto layout frame. The remaining children reflow as if the absolutely positioned element does not exist, but it stays visible in the frame.
This was added in Auto Layout 3.0 in 2022. Before it existed, the standard workaround was to place overlapping elements in separate frames stacked on top of each other, which created messy layer structures.
When to Use Absolute Position
3 use cases cover the majority of real-world scenarios:
- Badge overlays: a notification count pinned to the top-right corner of an icon or avatar
- Decorative elements: a background shape or illustration behind a card’s content area
- Floating actions: a close button or edit icon that should stay anchored regardless of card content length
An absolutely positioned child still responds to the parent’s constraints. You can pin it to any corner or edge of the auto layout frame using the constraint controls that appear when absolute position is active.
How Absolute Position Differs from Standard Frame Constraints
In a standard frame, all children use constraints by default. In an auto layout frame, constraints are disabled for children that are part of the flow.
Absolute position re-enables constraint controls for that specific child only. The child behaves like it is inside a standard frame, while all other children continue to follow the auto layout rules.
One detail worth knowing: absolutely positioned children sit on top of flow children in z-order by default. You can adjust the stacking order in the Layers panel, but the absolute position child will always render above the flow unless you manually change the layer order.
In Config 2024, Figma updated this behavior. Holding Ctrl while dragging an element into an auto layout frame now sets it to absolute position immediately, without going through the right panel.
How Does Auto Layout Work with Figma Components and Variants?
Auto layout set on a main component carries through to every instance automatically. Change the padding on the main component and all instances update. This is the behavior that makes using components in Figma worth the upfront setup time.
Figma’s Forrester study found organizations achieve a 328% ROI using Figma with an 11-month payback period, with a large portion of that coming from component reuse and faster iteration cycles (Forrester, 2023).
Auto Layout in Main Components vs. Instances
The main component holds the auto layout rules. Instances inherit them. Detaching an instance breaks that connection and converts the frame back to a standard auto layout frame that no longer updates when the main component changes.
Instance overrides work within the bounds of the main component’s auto layout rules. You can change text content, swap nested instances, and toggle boolean properties. You cannot override the auto layout direction, padding, or gap from an instance without detaching.
Most teams working on larger Figma design systems set auto layout rules at the main component level and treat those values as locked. Spacing adjustments happen via component properties or variants, not instance overrides.
Using Boolean Properties with Auto Layout Frames
Boolean component properties toggle child layers on or off. When a child inside an auto layout frame is hidden via a boolean property, the remaining children reflow automatically to fill the space.
This is the standard pattern for optional icons in buttons. The label and icon sit side by side in a horizontal auto layout frame. Toggle the icon off and the label recenters. Toggle it back on and the spacing restores. No manual adjustment needed.
The same pattern works for optional badges, supporting text, and expandable sections inside cards. Boolean properties combined with auto layout are what make single-component variants flexible enough to handle most real-world content variations.
Teams building variants in Figma should keep auto layout consistent across all variant states. Switching between a default and hover state in a component should not change the layout direction or padding values, only visual properties like color and border.
What Are the Spacing and Padding Rules for Auto Layout?
Gap and padding are separate controls that serve different purposes. Mixing them up produces layouts that look right at first and break the moment content changes.
Gap controls space between child elements. Padding controls space between the children and the frame’s inner edge. Both are required to build layouts that translate cleanly to CSS.
Gap vs. Padding in Practice
A common mistake on teams: using only padding to fake the spacing between items. It looks fine with 2 children. Add a third and the spacing breaks completely.
Gap handles multi-child spacing automatically regardless of how many children are in the frame. Padding stays consistent at the container edge no matter what.
Space between mode (gap set to Auto) pushes children to opposite ends of the frame, distributing remaining space evenly. This is the correct setting for navbar layouts, where the logo sits at one end and the links at the other.
Negative gap values, added in Auto Layout 3.0, create controlled overlap between children. A stack of avatar images with a -8px gap is one of the cleanest real-world uses. The stacking z-order can be reversed in the advanced layout settings if needed.
Independent Padding and the 8-Point Grid
Independent padding unlocks separate values for top, right, bottom, and left. Click the chain icon in the padding section of the right panel to enable it.
Aligning auto layout padding values to the 8-point grid system keeps spacing consistent across components. Common padding values: 8, 12, 16, 24, 32. Figma’s official design system documentation recommends setting the big nudge value to 8 so keyboard adjustments snap to the grid automatically.
Tokens Studio and Figma Variables both support binding spacing values to named tokens. When a spacing token updates, every auto layout frame referencing that token updates across the entire file. This is the setup large teams like those using IBM Carbon and Google Material 3 use to keep spacing consistent at scale (Medium, 2025).
How Does Figma Auto Layout Map to CSS Flexbox?
Auto layout is a graphical interface for CSS flexbox. Every auto layout property has a direct flexbox equivalent. Developers inspecting auto layout frames in Figma Dev Mode see CSS-like output they can implement directly.
73% of design-to-development handoffs require multiple revision rounds due to unclear spacing and responsive behavior (Medium, 2024). Teams using auto layout consistently reduce that significantly because the specs are already in a format developers recognize.
| Auto Layout Property | CSS Flexbox Equivalent |
|---|---|
| Direction (Horizontal) | flex-direction: row |
| Direction (Vertical) | flex-direction: column |
| Gap (Fixed) | gap: [value]px |
| Gap (Auto / Space Between) | justify-content: space-between |
| Hug Contents | width: fit-content; / height: fit-content; |
| Fill Container | flex: 1 |
| Fixed Width/Height | width: [value]px; / height: [value]px; |
Auto Layout Property to CSS Flexbox Translation
Direction maps to flex-direction. Horizontal auto layout is a flex row. Vertical is a flex column. There is no ambiguity here.
Padding maps directly to CSS padding. Independent padding in Figma produces individual padding-top, padding-right, padding-bottom, padding-left values in code.
Figma Dev Mode outputs auto layout frames as flex containers automatically. Developers reading the inspect panel see gap, padding, and alignment values without needing to measure anything manually. That alone cuts redline documentation time significantly on teams with a proper Figma developer handoff workflow.
Wrap mode in auto layout maps to flex-wrap: wrap in CSS. One difference worth flagging: Figma’s inspect panel translates auto layout wraps to flex-wrap, but does not automatically output CSS Grid, even when a grid-style layout would be more appropriate (LogRocket, 2024).
What Are Common Auto Layout Mistakes and How to Fix Them?
Most auto layout problems come down to 5 recurring errors. They’re not tricky. They’re just easy to miss when you’re moving fast.
Groups Instead of Frames
Auto layout does not apply to groups. Full stop.
If Shift + A seems to do nothing, check the Layers panel. You probably have a group selected. Right-click the group and choose “Frame Selection” first, then apply auto layout.
This trips up designers who default to Cmd/Ctrl + G for grouping. Get into the habit of using Cmd/Ctrl + Alt + G (frame selection) when you know auto layout is coming next.
Fill Container With a Hug Parent
Setting a child to fill container inside a parent set to hug contents collapses the child to zero width or height. Figma won’t error. The element just disappears visually.
The fix: change the parent to fixed width before setting any child to fill. Figma’s own help documentation notes this directly, as the most common cause of unexpectedly invisible elements in auto layout frames (Figma Help, 2024).
Forgetting Clip Content on Hug Frames
Hug frames shrink to their children. If a child overflows, it renders outside the frame boundary. Without clip content enabled, the overflow is visible and creates layouts that look broken in design reviews.
Enable clip content in the frame settings (bottom of the Design panel). This is especially relevant for card components where images or background fills extend to the frame edge.
Resizing Instances Instead of Editing Components
Dragging an instance to resize it overrides the auto layout rules from the main component. The instance stops behaving responsively. Every future content change requires manual correction on that specific instance.
The right approach: resize through component properties, variant switches, or by editing the main component directly. If you need a one-off size, detach the instance consciously and document why.
Z-Order Problems With Absolute Position
Absolute position children sit above flow children by default. This causes unexpected overlap if you add an absolutely positioned background element after the content children are already in place.
Fix it in the Layers panel. Drag the absolutely positioned element below the flow children in the layer order. The constraint positioning stays intact regardless of layer order.
How Do You Build a Responsive Button Component with Auto Layout?
The button is the right place to learn auto layout. It’s small, it’s used everywhere, and it fails in obvious ways when the layout is set up wrong.
Figma’s official learning materials use the responsive button as the primary auto layout teaching example (Figma Learn, 2024). This is the correct build sequence.
Frame Setup and Resizing
Start with a text layer. Type the label, then press Shift + A to wrap it in an auto layout frame. Set direction to horizontal.
Set both width and height to Hug contents. The frame now grows and shrinks with the label automatically. Change “Submit” to “Submit and Continue to Checkout” and the button expands without touching a single padding value.
Padding, Gap, and Minimum Width
Standard button padding: 12px top and bottom, 24px left and right. This matches a 44px minimum touch target height when using a 16px base font size, consistent with Apple HIG and Material Design 3 touch target guidelines.
Set gap to 8px for the space between an optional icon and the label. Then add a min-width constraint of 80px to prevent the button collapsing below a readable size on very short labels like “OK.”
Adding the Boolean Icon Toggle
Add an icon layer (16px SVG) to the left of the text inside the auto layout frame. Gap handles the spacing automatically.
Create a boolean component property called “Show icon” and bind it to the icon layer’s visibility. When the icon is hidden, auto layout reflows the label to center. No manual adjustment needed.
Turn the frame into a main component with Cmd/Ctrl + Alt + K. Add variants for Default, Hover, Focused, and Disabled states. Each variant inherits the auto layout setup. Changing padding on one variant does not affect others unless you update the main component. Teams building buttons in Figma this way maintain a single source of truth across all states and screen sizes.
How Does Figma Auto Layout Support Design System Scalability?
Auto layout is the structural layer that makes design systems work at scale. Without it, components are static boxes that require manual updates every time content or screen size changes.
Design tokens are only as useful as the components that carry them. Auto layout is what allows a spacing token to actually propagate through a component’s padding and gap values consistently (Atomize, 2025).
Spacing Tokens and Auto Layout Gap
Figma Variables (introduced in 2023) let you bind auto layout gap and padding values to named spacing tokens. Update the token and every component using that token updates simultaneously.
This is the workflow IBM Carbon and Google Material Design 3 both use internally. Token-first component libraries with automated JSON export rely on auto layout values being variable-driven, not hardcoded (Medium, 2025).
Without variable-bound spacing, a brand refresh that changes the base spacing unit from 8px to 10px requires touching every component individually. With it, the change takes seconds.
Single-Source Components Across Screen Sizes
Components built with auto layout serve mobile, tablet, and desktop from a single main component. The frame uses fill container width, so it adapts to whatever screen context it is placed in.
No duplication needed. One card component. One button. One nav pattern. Each adjusts its layout based on the parent container’s width.
Teams at Stripe and Shopify use this pattern to maintain component libraries that ship across multiple platforms without maintaining separate mobile and desktop component sets, reducing library maintenance overhead significantly.
Dev Mode Output and Reduced Handoff Friction
Figma Dev Mode reads auto layout frames and outputs their properties as flex container CSS automatically. Gap values, padding, alignment, and resizing modes are all visible in the inspect panel without any additional annotation.
Developers no longer need to measure spacing manually or ask designers for clarification on padding intent. According to the webdesigndev Figma-to-code handoff guide (2026), auto layout is the single most important feature for handoff quality because spacing and alignment values map directly to CSS without interpretation.
Teams building a full Figma design system should treat auto layout as a non-negotiable requirement on every component, not an optional layer added later. Retrofitting auto layout onto a large existing library is significantly more time-consuming than building with it from the start.
FAQ on Figma Auto Layout Guide
What is auto layout in Figma?
Auto layout is a frame property that controls how child elements stack, space, and resize relative to each other. It removes manual repositioning when content changes. It applies to frames only, not groups, and mirrors how CSS flexbox works in code.
How do you add auto layout in Figma?
Select any frame or group of objects and press Shift + A. Figma wraps the selection in an auto layout frame instantly. You can also use the “+” button in the Auto layout section of the right panel, or right-click and choose “Add auto layout.”
What is the difference between hug, fill, and fixed in Figma auto layout?
Hug shrinks the frame to fit its children. Fill expands a child to fill its parent frame. Fixed holds a set size regardless of content. Each mode maps to a CSS equivalent: fit-content, flex: 1, and a hard pixel value.
Can you nest auto layout frames in Figma?
Yes. Auto layout frames can be placed inside other auto layout frames without restriction. Parent and child frames can use different directions. This nesting is the foundation of responsive components like cards, navbars, and list items in a Figma component library.
What does absolute position do in Figma auto layout?
Absolute position removes a specific child from the auto layout flow while keeping it inside the frame. Other children reflow as if it does not exist. It is used for badges, overlays, and decorative elements that need to stay pinned to a corner.
How does Figma auto layout relate to CSS flexbox?
Auto layout is a visual interface for CSS flexbox. Direction maps to flex-direction, gap maps to the gap property, padding maps to CSS padding, fill container maps to flex: 1, and hug maps to fit-content. Figma Dev Mode outputs these as flex container CSS automatically.
What is the difference between gap and padding in auto layout?
Gap controls spacing between child elements. Padding controls spacing between children and the frame edge. They are separate properties. Using only padding to fake item spacing breaks when a third child is added. Both values support the 8-point grid system.
Why is my fill container not working in Figma?
Fill container only works when the direct parent is also an auto layout frame. If the parent is set to hug contents, the child has nothing to expand into and collapses to zero. Fix the parent to a fixed width first, then set the child to fill.
How does auto layout work with Figma components and variants?
Auto layout set on a main component carries through to every instance. Variant switching respects the layout rules as long as frame structure stays consistent. Boolean properties toggle child visibility and auto layout reflows remaining children automatically, with no manual spacing adjustment needed.
What are the most common auto layout mistakes in Figma?
The top 5 mistakes are: applying auto layout to groups instead of frames, setting fill container inside a hug parent, forgetting clip content on overflow elements, resizing instances instead of editing the main component, and misunderstanding z-order with absolute position children.
Conclusion
This conclusion is for an article presenting the full picture of Figma auto layout, from frame resizing modes to nested component structures and design token integration.
Auto layout is not a feature you learn once and forget. It is the difference between a component library that scales and one that requires constant maintenance.
Understanding hug contents, fill container, absolute position, and spacing modes gives you direct control over how every component behaves under real content conditions.
The CSS flexbox mapping means your design decisions translate to code without interpretation. Developers get gap values, padding, and alignment rules directly from Figma Dev Mode.
Apply these principles consistently and your Figma dev mode handoffs get faster, your component variants stay predictable, and your design system holds up at any scale.
