How to Add Auto Layout in Figma (Shift+A)

Shift+A wraps the currently selected elements in an Auto Layout frame — a special frame type that automatically manages spacing, padding, and alignment between its children, functioning conceptually the same way CSS flexbox does for web layout. **What actually happens on press**: selecting a handful of elements (say, an icon and a text label sitting side by side) and pressing Shift+A converts them into an Auto Layout frame with default spacing and padding values applied immediately. Adding a new child element to that frame afterward automatically pushes existing siblings aside to make room; removing a child closes the resulting gap automatically, rather than leaving an awkward empty space behind the way a plain Group or Frame would. **Why the default spacing often looks wrong immediately after applying it**: Auto Layout's initial padding and spacing values are generic defaults, not a guess based on how your elements were positioned before conversion — you'll almost always need to open the right panel immediately after pressing Shift+A and adjust spacing, padding, and alignment direction (horizontal or vertical) to match your actual intended design, rather than expecting the shortcut to infer your prior loose positioning. **Horizontal versus vertical layout direction**: an Auto Layout frame arranges its children along one axis at a time, either horizontal or vertical, switchable via the direction icons at the top of the Auto Layout section in the right panel — building something like a card with an image stacked above text, followed by a horizontal row of action buttons below that, typically means nesting one Auto Layout frame (vertical) inside another (horizontal) rather than trying to force one single Auto Layout frame to handle both directions simultaneously. **Resizing behavior with content**: each element within an Auto Layout frame can be independently set to Fixed, Hug contents, or Fill container sizing — a text label commonly set to Hug so it shrinks and grows with its actual text content, while a background frame is commonly set to Fill so it stretches to match whatever its parent's available space is, which is the mechanism behind Auto Layout components that gracefully accommodate varying text lengths without manual resizing. **Alternative methods**: manually positioning and resizing elements without Auto Layout still works for genuinely static, one-off layouts that will never need to accommodate changing content, but for anything meant to be reused as a component — a button that needs to work with labels of varying length, a list item that needs to expand for two-line content — Auto Layout is the standard professional approach rather than an optional convenience. **Related shortcuts**: Ctrl+G (Cmd+G) creates a simple, non-responsive Group instead, worth reaching for specifically when you don't need any of Auto Layout's spacing management and just want to move several elements as one unit. Alt+A and the other alignment shortcuts remain useful even within an Auto Layout frame for fine-tuning how children align along the cross-axis. **Mistake to avoid**: applying Auto Layout to elements that were never meant to resize responsively (a fixed decorative background graphic, for instance) can introduce unwanted resizing behavior as sibling content changes, since everything inside an Auto Layout frame is subject to its spacing and sizing rules by default — it's worth being deliberate about which elements genuinely benefit from Auto Layout's automatic behavior versus which should stay outside it as fixed, independently positioned elements.