Snapping System
Snapping automatically aligns elements to grid lines, guides, canvas edges, and other elements when moving or resizing. It ensures pixel-perfect positioning and consistent spacing.
Enabling and Disabling Snapping
- •Toggle snapping — View → Snap to Grid/Guides (or click the snap icon in the toolbar)
- •Temporary disable — Hold Ctrl/Cmd while dragging to bypass snapping
- •Keyboard shortcut — Ctrl/Cmd + Shift + ; (toggles snap on/off)
When snapping is enabled, a magnet icon appears highlighted in the toolbar. When disabled, the icon is gray.
Snap Targets
Elements can snap to multiple targets:
| Target | Description | Visual Indicator |
|---|---|---|
| Grid lines | Major and minor grid intersections | Grid line highlights |
| Guides | User-created alignment guides | Guide line highlights cyan |
| Canvas edges | Top, bottom, left, right canvas boundaries | Edge line highlights |
| Canvas center | Horizontal and vertical center of canvas | Crosshair appears |
| Element edges | Bounding box edges of other elements | Smart guide appears (magenta) |
| Element centers | Horizontal and vertical centers of other elements | Smart guide with center marker |
Snap Modes
Configure which snap targets are active in Edit → Preferences → Snapping:
- •Snap to Grid — Align to grid intersections
- •Snap to Guides — Align to user-created guides
- •Snap to Canvas — Align to canvas edges and center
- •Snap to Objects — Align to other element edges and centers
- •Snap to Pixels — Force whole-pixel positioning (prevents subpixel blur)
Snap Tolerance
Snap tolerance defines how close an element must be to a snap target before snapping occurs. Measured in pixels at 100% zoom.
Adjustable in preferences:
- •Low tolerance — 2-4 pixels (requires very close alignment)
- •Medium tolerance — 6-8 pixels (default, balanced)
- •High tolerance — 10-16 pixels (snaps more aggressively)
Higher tolerance values make snapping "stickier" but can interfere with fine positioning. Lower values require more precision but give greater control.
Pixel Snapping
Pixel snapping rounds element positions to whole pixels, preventing antialiasing blur caused by subpixel positioning. This is critical for sharp UI elements and icons.
When to use pixel snapping:
- •Designing interface elements (buttons, icons, panels)
- •Creating pixel art or low-resolution graphics
- •Ensuring crisp text rendering
When to disable pixel snapping:
- •Smooth animations requiring subpixel movement
- •High-resolution artwork where pixel alignment is irrelevant
- •Curved paths and organic shapes
Smart Guides
Smart guides appear automatically when dragging elements and show alignment with nearby objects. They provide visual feedback for relative positioning.
Smart guide indicators:
- •Edge alignment — Magenta line when edges align
- •Center alignment — Magenta line with center marker
- •Equal spacing — Dimension annotations showing distances
- •Size matching — Dimension annotations when element sizes match
Snapping During Transform Operations
Snapping behavior varies by operation:
| Operation | Snap Behavior |
|---|---|
| Move (drag) | Snaps element edges and center to all targets |
| Resize (corner drag) | Snaps edges to grid, guides, and canvas edges |
| Rotate | No snapping (rotation is continuous) |
| Scale (with modifier) | Maintains snap to origin point |
Snapping with Multiple Elements
When moving multiple selected elements, snapping uses the bounding box of the entire selection:
- •Selection bounding box snaps to targets
- •Relative positions between selected elements are preserved
- •Individual element snap points are ignored
Troubleshooting
Elements won't snap:
- •Check that snapping is enabled (magnet icon highlighted in toolbar)
- •Verify the correct snap modes are enabled in preferences
- •Increase snap tolerance if elements are close but not snapping
Snapping is too aggressive:
- •Reduce snap tolerance in preferences
- •Disable specific snap modes (e.g., turn off "Snap to Objects")
- •Temporarily disable snapping with Ctrl/Cmd while dragging