Pixel grid
Display a pixel-level grid on the canvas and snap layer positions to it for pixel-perfect precision.
What the pixel grid does
The pixel grid overlays a fine 1×1 pixel grid on the canvas. It is only visible at high zoom levels (typically 100% or above) and helps you verify that layers are positioned at whole pixel coordinates — which is important for sharp rendering at screen resolution.
Enabling the pixel grid
- Open the viewport controls in the bottom-right corner of the editor.
- Click the Pixel grid toggle to show or hide it.
The grid only becomes visually apparent as you zoom in. At lower zoom levels, it is invisible.
Snap to pixel grid
With snap to pixel grid enabled, layer positions and sizes automatically round to the nearest pixel as you drag or resize. This prevents layers from landing at subpixel positions (e.g., x: 12.5) that cause blurry rendering on screens.
To toggle snap to pixel grid, open Editor Preferences and find the Snap to pixel grid setting.
When to use the pixel grid
- Icon design — precise pixel placement is essential at small sizes (16px, 24px, 32px).
- UI components — ensures elements align cleanly on the pixel grid rather than at fractional positions.
- Detail work at 400%+ — use the grid to verify edges, verify alignment, and catch subpixel issues.
Tips
- Turn the pixel grid off when working on illustration or large-format design where pixel precision is not important — the grid lines can be distracting.
- Snap to pixel grid is especially valuable when designing icons: a 0.5px offset on a 16px icon is clearly visible when rendered.
- Combine the pixel grid with Rulers for maximum precision on spacing-sensitive layouts.