Grids and guides help you create consistent, aligned layouts. Use layout grids for responsive design and pixel grids for precise placement.
Grid Types
- Uniform Grid - Regular square grid pattern
- Column Grid - Vertical columns with gutters
- Row Grid - Horizontal rows with gutters
Showing/Hiding Grids
- Press
Ctrl/Cmd + 'to toggle grid visibility - Or toggle via Grid Panel visibility controls
- Grids are per-frame and can vary between frames
Column Grid Settings
- Count - Number of columns (e.g., 12 for web)
- Gutter - Space between columns
- Margin - Space on left and right edges
- Type - Stretch, Left, Center, or Right aligned
Uniform Grid Settings
- Size - Grid cell size in pixels
- Color - Grid line color and opacity
Pixel Grid
For precise pixel-level work:
- Shows at high zoom levels (300%+)
- Helps align to whole pixels
- Essential for icon design
Snap to Grid
- Elements snap to grid lines while dragging
- Hold
Cmd/Ctrlto disable snapping temporarily - Configure snap behavior in preferences
Guides
Create custom alignment guides:
- Drag from rulers to create guides
- Click on a guide to select it
- Drag to reposition or press Delete to remove
- Elements snap to guides when nearby
Rulers
- Press
Shift + Rto toggle rulers - Click and drag from ruler to create guide
- Rulers show in pixels by default
Common Grid Setups
- Web Design - 12-column grid, 20px gutter, 40px margins
- Mobile - 4-column grid, 16px gutter
- Icon Design - 8x8 or 24x24 pixel grid
Tips
- Set up grids before starting your design
- Use multiple grids on different frames
- Match grid to your development framework
- Grids don't export - they're design-time only