If you’ve ever resized a Figma frame and watched every element inside it stay exactly where it was — overlapping, spilling out, or leaving a huge gap — Auto Layout is the fix. It turns a static frame into one that resizes and rearranges itself as content changes, the same way a real webpage or app screen actually behaves.
What Auto Layout Actually Does
Elements inside an Auto Layout frame are arranged automatically based on direction, spacing, padding, and alignment. Add a new button, remove a line of text, or resize an element, and everything else in the frame adjusts on its own — no manual repositioning.
How to Add Auto Layout
Select one or more layers, then either press Shift+A or click Add auto layout in the right sidebar. Figma wraps your selection in a new auto layout frame using sensible defaults, which you then adjust.
The Core Properties
Direction
Vertical stacks elements along the y-axis — anything you add, remove, or reorder follows top to bottom. Horizontal does the same along the x-axis, left to right. This is the single most important setting, since it decides how the whole frame behaves.
Spacing and padding
Spacing controls the gap between items inside the frame; padding controls the space between the items and the frame’s own edge. Both can be set independently per side.
Alignment
Controls how items line up within the frame — left, center, right, top, bottom, or stretched to fill the available space.
Important: Check Which Auto Layout Version You’re On
Figma rolled out a new Auto Layout version in 2026 that changes how padding, inside strokes, and auto-gap stacks behave compared to the original. The older version (now called Legacy) is still available frame by frame, but Figma has said it will be phased out by January 2027. Check a frame’s Layout panel — it will say either Latest or Legacy. If you’re starting a new file, use Latest; if you’re opening an older project, expect to see Legacy frames until you update them.
When to Use Auto Layout
Reach for it any time you’re designing something with content that could realistically change length — buttons, list items, cards, form fields, navigation bars. It’s less necessary for a one-off hero illustration where nothing will ever resize. As a rule of thumb: if the real, coded version of this element would need CSS flexbox to work, it should probably be an Auto Layout frame in Figma.
Frequently Asked Questions
What’s the keyboard shortcut for Auto Layout in Figma?
Shift+A adds Auto Layout to your current selection.
Can I nest Auto Layout frames inside each other?
Yes — nesting Auto Layout frames is a common way to build complex, fully responsive components like cards or navigation bars.
Should I use Latest or Legacy Auto Layout?
Use Latest for any new work. Only stay on Legacy if you’re working inside an existing file that hasn’t been updated yet, and plan to migrate before Figma phases it out.
Auto Layout is one of the fastest ways to make a Figma file actually reflect how a real interface will behave. If you’d rather have that translated into a live, coded site without doing the handoff yourself, see our UX/UI design services.
Photo by Hal Gatewood on Unsplash
Related: Figma tables guide | UX/UI design services