How to align and distribute elements accurately in Figma
Introduction
Eyeballing the distance between elements is a recipe for messy design. Figma provides powerful alignment and distribution tools to ensure every pixel is in its perfect place.
This guide covers the essential shortcuts and panels you need to organize your layers instantly.
Prerequisites
- •Multiple objects selected on the canvas
Guide Steps
Align objects to specific edges
Select the objects. Use the alignment icons at the top of the right sidebar. Common shortcuts: Alt+A (Left), Alt+D (Right), Alt+W (Top), Alt+S (Bottom), Alt+H (Center Horizontal), Alt+V (Center Vertical).
Use Tidy Up
Select a messy group of items. Hover over the selection until a blue grid icon appears in the corner, or click the 'Tidy up' icon (grid) in the alignment panel. This arranges items into a neat grid with equal spacing.
Distribute spacing evenly
If you have a row of items, click 'Distribute horizontal spacing' in the alignment dropdown. This ensures the gap between every item is identical, regardless of the item width.
Adjust spacing with Smart Selection
Once tidied, pink handles appear between items. Drag these handles to adjust the specific gap size for all items simultaneously.
Common Mistakes to Avoid
- ×Trying to align items to a frame that isn't selected or isn't the parent.
- ×Forgetting that 'Distribute spacing' calculates the gap between edges, while 'Distribute objects' calculates from centers.
Pro-Level Design Tips & Workflows
💡 Asset Export: Hold the Option (Mac) or Alt (Windows) key while choosing resolution multipliers to export layers in exact dimensions.
💡 Vector Grid Snapping: Enable 'Snap to pixel grid' (Shift + Cmd + ') to prevent decimal positioning values which cause asset export pixelation.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.