Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


How do I use the layout grid in Inspect?

Follow

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

invision-inspect-layout.png
The Layout 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
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.

Displaying the Layout grid in Inspect

If you enable the layout grid in Sketch, Inspect shows the layout grid by default, but you can toggle the feature on (invision-inspect-layout-grid-toggle-on.png) or off (invision-inspect-layout-grid-toggle-off.png).

To toggle the layout grid in Inspect:

  1. Open your prototype and, at the bottom of the page, click the Inspect icon (Inspect-V7-icon.png).
  2. Ensure that the screen is selected.
  3. In the right-hand information panel, toggle the Layout button on (invision-inspect-layout-grid-toggle-on.png).

    invision-inspect-toggle-layout.gif

Was this article helpful?

Still have a question?

Contact Us