Grid, Rulers & Guides

The grid is a system of evenly-spaced horizontal and vertical lines overlaid on the canvas. It serves as a visual reference for alignment and spacing.

Grid controls:

• •Toggle visibility — View → Show Grid (Ctrl/Cmd + ')
• •Grid size — Adjust spacing in Edit → Preferences → Canvas
• •Grid color — Customize in preferences (default: semi-transparent white)
• •Subdivisions — Minor grid lines at fractional intervals

The grid adapts to zoom level for optimal visibility:

• •At low zoom (zoomed out), major grid lines are shown
• •At high zoom (zoomed in), subdivisions appear for finer control
• •Grid opacity fades when elements are selected to reduce visual clutter

Rulers appear along the top and left edges of the canvas, providing a pixel measurement reference. The zero point is at the top-left corner of the canvas by default.

Ruler controls:

• •Toggle visibility — View → Show Rulers (Ctrl/Cmd + R)
• •Unit — Pixels (default), Percentage, or Inches
• •Reset origin — Right-click ruler intersection, choose "Reset Origin"
• •Set custom origin — Drag from ruler intersection to reposition zero point

Guides are user-created alignment lines that snap to elements. Unlike the grid, guides can be positioned anywhere and are specific to each project.

Creating guides:

• •From rulers — Click and drag from the horizontal or vertical ruler onto the canvas
• •Manual placement — View → New Guide, enter pixel position
• •From selection — Select an element, then View → Add Guides at Edges

• •Move guide — Click and drag the guide line
• •Delete guide — Drag guide off the canvas, or right-click → Delete
• •Clear all guides — View → Clear Guides
• •Lock guides — View → Lock Guides (prevents accidental movement)
• •Show/hide guides — View → Show Guides (Ctrl/Cmd + ;)

Smart guides are temporary alignment lines that appear automatically when dragging elements. They highlight alignment with other elements, canvas edges, and the canvas center.

Smart guide behavior:

• •Appear in magenta when element edges align
• •Show spacing measurements between nearby elements
• •Highlight center alignment with the canvas
• •Disappear when drag ends
• •Can be disabled in View → Smart Guides

Customize guide appearance in Edit → Preferences → Canvas:

• •Guide color — Default: cyan
• •Smart guide color — Default: magenta
• •Guide opacity — 10-100%

• •Use the grid for general layout and spacing consistency
• •Create guides for precise alignment of specific elements
• •Enable smart guides when manually positioning multiple elements
• •Lock guides after placement to prevent accidental movement
• •Clear guides before exporting to reduce visual clutter during final review