What is Auto Layout?
Auto Layout is a Figma layout feature that arranges objects in a frame automatically by direction, spacing, padding and Alignment. When content is added, removed or resized, the layout adjusts without manual repositioning.
Its settings include direction (vertical, horizontal, and grid in open beta), gap between objects (fixed or Auto), padding, alignment, and wrap in horizontal flow. Frames can be nested to create multi-directional layouts.
Why use Auto Layout?
A button grows with its label, a list grows and shrinks with its items, a dashboard has to fit different screens. These are all cases where content changes. With manual placement every change means re-laying things out; Auto Layout writes that rule into the design file so the design adapts to content, and Figma's own guide lists supporting responsive design as a main benefit.
There is a second value for AI: Auto Layout states spacing and arrangement rules explicitly, so what an AI reads is "vertical, gap 16, padding 24" rather than layers whose arrangement it must guess from pixel positions.
How does Auto Layout work?
Child objects have three sizing modes. Fixed keeps its dimension. Hug contents makes the frame shrink or grow to fit its children plus spacing. Fill container makes the child stretch to take the remaining space in its parent. Minimum and maximum sizes can be combined with these.
Mapping to code, a third-party Figma-to-code document (figma-code-agent, not from Figma) lays out an approximate CSS flexbox correspondence: direction maps to flex-direction, gap to gap, Fill container to flex-grow: 1 with flex-basis: 0, Fixed to flex-shrink: 0 plus an explicit dimension, and wrap to flex-wrap. An object set to Ignore auto layout leaves the flow, equivalent to absolute positioning.
What does it mean for me?
If you want AI to turn designs into code, adding Auto Layout is one of the most effective cleanups: in a frame with Auto Layout, spacing and arrangement rules are explicit; without it, the AI can only infer from coordinates. The document above also notes that GROUP nodes have no Auto Layout and their children need absolute positioning.
Know the limits. Figma's own list includes that grid is still in beta, Auto Layout has to be added to each component individually, and instances can adjust padding and gap but cannot add or reorder layers. The conversion to flexbox is also not one-to-one: Figma has no native breakpoints, so frames for several breakpoints must be merged into media queries by hand.
A button component set to horizontal Auto Layout with padding 12 and 24 and width on "Hug contents": when the label changes from "Buy" to "Buy now and follow", the button widens by itself with no manual adjustment. A list set to vertical with children on "Fill container" grows in height automatically as items are added.
Pros: layout adapts to content, rules are explicit, and AI and engineers can map it to code more easily. Cons: it must be added to each component individually, it has several limits (grid in beta, fixed-size text can overlap), and it is not fully identical to CSS.