×

InVision Cloud V7: How do I use the layout grid in Inspect?

This article provides answers for InVision Cloud V7. If you’re on V6 of InVision, read this article instead. Not sure which version you're using? Find out now.

When you sync a Sketch prototype to InVision Cloud V7 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.

grid.png

Note: The grid section only works with Sketch prototypes that have been synced via Craft Sync. It will not work with Photoshop prototypes.

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.

sketch-layout-settings.png

Note: Sketch also has a feature called Show Grid, which adds horizontal and vertical lines to your artboards. Turning this on will not impact Inspect. To learn more about Sketch’s grid settings, check out Sketch’s documentation.

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 Cloud V7 account and navigate to the Documents page.
  2. Open your prototype and, at the bottom of the page, click the Inspect icon (Inspect-V7-icon.png).
  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.

show-grid.gif

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 (Inspect-V7-icon.png).
  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.

show-grid-ruler.gif

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.


Getting Started: InVision Cloud v7 (
)

InVision Cloud V7: How do I use the layout grid in Inspect?

Prev