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 (400% and 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.
Pixel-grid visibility is saved with the current page document. A new blank page inherits pixel-grid visibility from the page that was active when it was created. Duplicating a page also preserves its pixel-grid visibility.
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.
When the layer you grab is a frame, the move always lands on whole pixels, whether or not this setting is on (other selected layers move by the same amount). For every other layer type the setting decides, and an axis that has snapped to an alignment guide while you drag stays exactly on the guide instead of being rounded away from it.
The Pen tool follows the same setting: anchors you place snap to the grid — whichever is nearer, a whole-pixel line or the half-pixel center between two lines (a Shift angle constraint wins over the grid), and an anchor you add on an existing segment moves along that segment to where it crosses the nearest pixel-grid line, so it stays on the path. If no crossing lies within a pixel of that point, the anchor stays where you hovered.
The path construction tools (Tangent Line, Circle by Points, Tangent Circle, Curvature Circle and the rest) follow it too, and never at the cost of the contact they were drawing. A point that lands in empty space rounds to the grid like a Pen click. A point that lands on a path slides along that path to the nearest grid crossing, so the tangent or the circle still touches the curve; if no crossing on that segment is close enough, the point simply stays where it touched. A point that lands on an endpoint, an anchor, a midpoint or a center keeps that exact position and is never rounded. Holding Ctrl (⌃ on Mac) to suspend snapping suspends the grid with it.
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.