Figma Auto Layout: Encoding Layout Rules That Survive Content Changes

The Redraw Problem

You build a button. Then the product manager asks for a longer label. Then a shorter one. Then an icon on the left. Then no icon. Without Auto Layout, each variation is a manual redraw: nudge the text, recenter the icon, adjust the padding by eye. Multiply that across a design system and every content change becomes a pixel hunt.

Auto Layout removes the manual redraw. It attaches layout rules to a frame so children reflow when content changes. The useful takeaway: treat Auto Layout as a contract between design and code, not just a convenience. When configured deliberately, the numbers in the Inspect panel map directly to CSS flexbox properties, so the implementation matches the intent.

What Auto Layout Actually Encodes

Auto Layout applies to frames. Once enabled, the frame becomes a container with a direction, internal padding, spacing between children, and alignment rules. These are not arbitrary preferences; they correspond to CSS flexbox concepts.

Direction controls whether children stack horizontally or vertically. Padding sets the internal inset. Item spacing sets the gap between children. Alignment and distribution control how children sit along the cross and main axes; packed and space-between modes behave like flexbox's align-items and justify-content.

There is also a resizing behavior. A frame can hug its contents, fill a parent, or use fixed width and height. This is the part that makes components responsive: if the text grows, a frame set to hug contents grows with it.

A Worked Example: The Button That Refuses to Break

Consider a primary button used across a product. It contains an icon and a label. The label changes per screen, and some screens need the icon hidden.

Start with a frame containing the icon and text layers. Select the frame and enable Auto Layout in the right-hand properties panel (exact labels vary slightly by version). Set direction to horizontal. Add item spacing so the icon and label have a consistent gap. Set padding to the button's internal inset. Set the frame's resizing behavior to hug contents horizontally so the button width tracks the label length.

Now add Component Properties. Create a boolean property for the icon visibility and expose it as an instance swap. When an instance toggles the icon off, the frame reflows: the gap disappears, the width shrinks, and the padding stays intact. No manual adjustment.

To verify the behavior, select the frame, open the Inspect panel, and compare the displayed gap and padding values against the Auto Layout settings. They should match. For a code handoff, copy the CSS snippet from Inspect. The gap, padding, and flex-direction should align with what you configured. If they do not, the frame may be nested inside another Auto Layout parent that is overriding values, or a child may have fixed constraints fighting the parent rule.

The Handoff Contract

The real value appears during implementation. An engineer selecting the button in Inspect sees computed values: flex-direction, gap, padding, and alignment. These are not approximations. They are the same numbers the designer set.

This creates a checkable contract. If the design specifies 12px item spacing and 16px horizontal padding, the CSS should use gap: 12px and padding: 0 16px. When the design changes, the numbers in Inspect change. The code review becomes a comparison of two sets of values, not a debate about whether the button "looks right."

Where Auto Layout Stops

Auto Layout handles linear arrangements. It cannot express two-dimensional grids, overlapping elements, or masonry layouts. For those, you still need layout grids, constraints, or manual positioning. A card with a badge absolutely positioned over an image corner is outside Auto Layout's scope.

Performance is the other limit. A frame with hundreds of children, or Auto Layout nested many layers deep, can make the editor sluggish. The feature is doing real layout math on every edit. For large design systems, flattening unnecessary nesting or splitting complex screens into smaller Auto Layout islands helps.

An Actionable Check

Before you hand off a component, do this: select the outermost Auto Layout frame, open Inspect, and read the gap and padding values. Then change the text content inside a child and resize the frame. If children reflow and spacing stays constant, the contract holds. If something drifts, check whether a child has fixed width or height fighting the parent, or whether the frame's resizing mode is set to fixed instead of hug.

To revert, select the frame and toggle Auto Layout off. The children remain visually in place but lose the responsive rules, turning the frame back into a static group.