Align and distribute multiple selected elements to create precise, organized layouts. Access alignment tools from the toolbar or use keyboard shortcuts.
Alignment Options
- Align Left - Align left edges
- Align Center (H) - Align horizontal centers
- Align Right - Align right edges
- Align Top - Align top edges
- Align Middle (V) - Align vertical centers
- Align Bottom - Align bottom edges
Using Alignment
- Select two or more elements
- Click an alignment option in the toolbar
- Elements align to the first selected or to selection bounds
Alignment Reference
Elements can align to:
- Selection - Align within the selection bounds
- First Selected - Align to the first element selected
- Parent Frame - Align within the parent container
- Canvas - Align to the canvas/artboard
Distribution
Evenly space three or more elements:
- Distribute Horizontally - Equal horizontal spacing
- Distribute Vertically - Equal vertical spacing
Tidy Up
Automatically arrange selected elements:
- Snaps elements to a grid
- Creates consistent spacing
- Works with any number of elements
Keyboard Shortcuts
⌘/Ctrl + ⌥/Alt + A- Align left⌘/Ctrl + ⌥/Alt + H- Align center horizontally⌘/Ctrl + ⌥/Alt + D- Align right⌘/Ctrl + ⌥/Alt + W- Align top⌘/Ctrl + ⌥/Alt + V- Align middle vertically⌘/Ctrl + ⌥/Alt + S- Align bottom
Smart Guides
While dragging elements:
- Pink lines show alignment with other elements
- Snap to edges and centers automatically
- Distance indicators show spacing
- Hold
Cmd/Ctrlto temporarily disable snapping
Precise Positioning with Arrow Keys
After aligning elements, use arrow keys for fine-tuned positioning adjustments:
Nudging Elements
- Arrow Keys (↑ ↓ ← →) - Move selected elements by small nudge amount (default 1px, customizable)
- Shift + Arrow Keys - Move selected elements by big nudge amount (default 10px, customizable)
Customizable Nudge Values
Nudge distances can be customized to match your design system or workflow:
- Open Command Palette:
⌘K(Mac) orCtrl+K(Windows/Linux) - Search for "nudge" to access Nudge Settings
- Small Nudge: 0.1-100px (default 1px) - for arrow keys
- Big Nudge: 1-500px (default 10px) - for Shift+arrow keys
- Settings persist across sessions
Common Nudge Presets
- 8px Grid System - Small: 8px, Big: 16px (for UI design with 8-point spacing)
- Sub-pixel Precision - Small: 0.5px, Big: 1px (for icon and logo work)
- 4px Baseline Grid - Small: 4px, Big: 32px (for web design with vertical rhythm)
Workflow Tip
Align elements first using alignment tools, then use nudging for final pixel-perfect adjustments. This combines the speed of automatic alignment with the precision of manual positioning.
Tips
- Select elements in order to control alignment reference
- Use distribute after aligning for perfect grids
- Smart guides work during drag operations
- Group aligned elements to maintain positioning
- Customize nudge values to match your grid system for automatic snapping