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


Rulers and grids in Studio

Follow

Studio rulers and grids let you see precise canvas coordinates, so you can more easily design precise layouts.

Using rulers

To toggle Studio rulers on or off:

  1. Click the View menu.
  2. Hover over Canvas.
  3. Click Show Rulers.

You can also use the keyboard shortcut to toggle rulers on or off: ⇧R

Rulers are built with numerous related features designed to further streamline your workflow:

  • To create horizontal and vertical ruler guides you can snap your layers to, drag a guide from either the vertical or horizontal ruler and drop it on an artboard or the canvas.
  • To ensure that your ruler guide moves as expected if you edit the artboard size, pin the guide or set it to scale: Select the guide, right-click, and click Pin or Scale.
  • To see precise horizontal or vertical placement of each ruler on the canvas, select the ruler and hold the Alt key.
    If the ruler guide is set to scale, holding the Alt key will show the percentage at which it's set to scale.

Using grids

You can define unique settings for the grid and its related columns and rows on each artboard. To use the grid, select an artboard and, under Layout Grid in the Inspector panel, click the ColumnsRows, and Grid checkboxes as wanted.

invision-studio-layout-grid.gif

The following grid settings are available:

  • Columns: Edit your Count, Gutter, Margin, and Color settings.
  • Rows: Edit your HeightGutterMargin, and Color settings.
  • Grid: Edit your Size and Color settings.

To refine your grid settings, click the More icon (studio-grid-layout-more-icon.png) next to each checkbox and use the corresponding text field or drag the scrubber. For example, to adjust the margin, click the Margin text field and enter any numerical value (including numbers beyond 100, for complete precision) or drag the scrubber (value limited to a max of 100).

To snap objects to your grid and/or ruler guides, you can enable smart guides: In Studio menu bar, click the View menu, Layout, and then Show Smart Guides.

Using keyboard shortcuts for rulers and grids 

Action Mac Windows Menu Item
Show Rulers ⇧R ⇧R View > Canvas > Show Rulers
Measure Distance To Hovered Item ⌥ Hover ⌥ Hover N/A 
Measure Distance To Bottom-Most Hovered Item ⌥ ⌘ Hover ⌃ ⌥ Hover N/A  
Toggle Columns ⌃ L ⌥ L View > Layout > Toggle Columns
Toggle Rows ⌃ R ⌥ R View > Layout > Toggle Rows
Toggle Grid ⌃ G ⌥ G View > Layout > Toggle Grid
Show Smart Guides N/A N/A View > Layout > Show Smart Guides
Show Pixels on Zoom ⌃ P ⌃ ⌥ Y View > Canvas > Show Pixels on Zoom
Show Pixel Grid on Zoom ⌃ X ⌃ ' View > Canvas > Show Pixel Grid on Zoom

Was this article helpful?

Still have a question?

Contact Us