Figma Layout & Alignment Shortcuts

Auto Layout (Shift+A) wraps the current selection in a special frame type that manages spacing, padding, and alignment automatically as content changes — adding a new child element pushes siblings aside automatically, removing one closes the gap, and resizing a parent respects whatever alignment rules you've configured, the same conceptual model as CSS flexbox. This is genuinely the single most important layout shortcut in modern Figma work, since a well-built design system relies on Auto Layout frames to keep components responsive to content changes rather than needing manual repositioning every time text length or content changes. Alignment shortcuts — Alt+A for left alignment, Option+H for horizontal centering, and their counterparts for right, top, center-vertical, and bottom (all reachable via the same Alt/Option modifier plus a letter, or through the Align section of the right panel) — snap selected objects flush against each other along whichever axis you choose, or against the parent frame's edge if only one object is selected. This is the fast cleanup move after roughly positioning several elements by eye, tightening loose freehand placement into a precise, consistent line. Tidy Up (Shift+Option+T on Mac, a similar chord on Windows though the exact binding varies slightly by version) goes a step further than simple alignment, automatically arranging a loosely scattered group of objects into an evenly spaced grid — genuinely useful for cleaning up something like an exported icon set or a collection of component variants that were dragged onto the canvas in no particular order and need to be organized into a scannable grid without manually measuring and placing each one. Resize frame to fit content (a chorded shortcut that varies somewhat by version, often reached through the right-click menu instead) shrinks or grows a frame's boundary to exactly match the bounding box of whatever it contains, removing excess empty space — useful after deleting content from a frame that leaves awkward empty padding behind, or after adding content that now overflows the frame's original fixed size. Boolean Union (Ctrl+Alt+U / Cmd+Option+U) merges multiple overlapping vector shapes into one combined shape, Figma's equivalent of a Pathfinder union operation in Illustrator — commonly used for constructing custom icons from a handful of simpler overlapping primitive shapes rather than drawing a complex icon freehand with the Pen tool from scratch. Grouping (Ctrl+G / Cmd+G) wraps a selection in a lightweight container that moves, scales, and rotates as one unit while every original layer beneath it stays independently selectable and editable the moment you double-click back into the group. It's worth understanding clearly how this differs from a Frame: a Group has none of a Frame's additional capabilities — no clipping of overflowing content, no Auto Layout support, no resizing constraints for responsive behavior — making a Frame the better default choice for anything that's conceptually a container or screen, while Group remains useful for simply treating a handful of decorative or supporting elements as one movable unit. Horizontal center alignment (Option+H / Alt+H) centers selected objects along a shared horizontal axis relative to each other, or centers a single object within its parent frame's width if only one object is selected — the natural complement to left/right alignment, useful specifically for centering a logo or a single call-to-action button within a wider container without needing to calculate exact pixel positions by hand. Distribution, reachable from the same Align section of the right panel (Figma also offers Tidy Up as a more automated alternative, covered above), evenly spaces three or more selected objects so the gaps between them become equal — genuinely different from alignment, which snaps objects to a shared edge or axis rather than adjusting the spacing between them, and the two are frequently used together in sequence: align a row of icons to a shared vertical center first, then distribute them horizontally so the gaps between each one match exactly. A practical workflow note: because Auto Layout largely supersedes manual alignment and distribution for anything built as a component intended to hold varying content, these alignment shortcuts see the most use on more static, one-off compositions — a specific marketing graphic, a one-time illustration, or fine-tuning the internal alignment of elements within an Auto Layout frame along its cross-axis, which Auto Layout's own automatic spacing doesn't fully control on its own.