How do I use the layout grid in Inspect?

When you sync a Sketch prototype to InVision Cloud using Craft Sync, you have the option of syncing layout grid data. When no layers are selected in Inspect, the Grid section appears in the right-hand information panel.

Enabling the grid in Sketch

To display the grid in Inspect, you must first turn on the layout grid in Sketch.

In Sketch, navigate to View > Canvas > Layout Settings. Here you can adjust the layout grid for selected artboards. Note that rows will not display in Inspect. After editing the Layout Settings, sync your prototype using Craft Sync.

Enabling the grid in Inspect

If you enable the layout grid in Sketch, Inspect shows the layout grid and grid ruler by default. Both of these features can be toggled on or off.

Showing the grid

To toggle the layout grid in Inspect:

1. Sign in to your InVision Cloud account and navigate to the Documents page.
2. Open your prototype and, at the bottom of the page, click the Inspect icon ().
3. Make sure no layers are selected. In the right-hand information panel under Grid, click Show Grid.

This will toggle the grid layout displayed on the Inspect canvas.

Showing the grid ruler

To toggle the grid ruler in Inspect:

1. Sign in to your InVision account and navigate to the Documents page.
2. Open your prototype and, at the bottom of the page, click the Inspect icon ().
3. Make sure no layers are selected. In the right-hand information panel under Grid, click Show Grid Ruler.

This toggles the grid ruler at the top of the canvas. The layout of the grid ruler is based on Sketch’s layout settings.

As you hover and select, Inspect highlights the grid ruler columns that contain the selected layer or group. The boundary columns have red outer borders.