Rulers, Guides & Grids

To add a horizontal or vertical guide:

In the Workspace dropdown, the Show custom guides option is selected by default. When deselected, it will automatically be re-enabled if you click anywhere along the rulers.

To show or hide guides:

1. Click the Workspace button towards the bottom of the Left-Sidebar.
2. Select or deselect the Show custom guides option from the dropdown.
3. Your choice will apply to the project as a whole.

To adjust individual guides, hover over the blue line until you see the adjustment tool, and then click and drag the guide to relocate it.

To remove individual guides from a page, hover over the blue line until you see the adjustment tool, and then click and drag the guide off the canvas and past the ruler.

To permanently remove all guides from a selected page:

1. Click the Workspace button towards the bottom of the Left-Sidebar.
2. Select the Clear guides option from the dropdown.
3. Click OK to confirm.

Grids are disabled by default. Before adjusting their settings, you’ll need to make them visible.

To show or hide grids:

1. Click the Workspace button towards the bottom of the Left-Sidebar.
2. Select or deselect the Show paper grid and/or Show layout grid options.
3. Your choice will apply to the project as a whole.

The Paper Grid looks like traditional graph paper and consists of adjustable, subdivided squares or rectangles.

To adjust the Paper Grid Settings:

1. Click the Workspace button towards the bottom of the Left-Sidebar.
2. Make sure you already have Show paper grid selected.
3. Select the Paper grid settings option.
4. From the Paper Grid Settings pop-up, adjust the width and height of the grid’s component blocks.
5. Select the Draw paper grid on top of objects checkbox if you want the grid to overlay your design.
6. Click Apply.

The Layout Grid follows the protocols first established in print media, that set margins, columns, and gutters for your pages. Together, they can provide the underlying scaffolding for your page’s structure, and determine the amount of ‘white’ or ‘negative’ space between your blocks of content. 

The Layout Grid Settings allow you to enter values and adjust these elements as follows:

1. Grid Preset: Choose between values expressed as Fixed pixel sizes, or as Responsive percentages of the page.
2. Columns: Set the total number of columns.
3. Column Width: Set the width of all columns.
4. Gutter: Set the space between columns.
5. Left/Right Margins: Set the space between the outermost columns and the page border.

To adjust the Layout Grid Settings:

1. Click the Workspace button towards the bottom of the Left-Sidebar.
2. Make sure you already have Show layout grid selected.
3. Select the Layout grid settings option to open the Layout Grid Settings pop-up.
4. Set the Grid Preset and enter values to customize your grid.
5. Select the Draw layout grid on top of objects checkbox if you want the grid to overlay your design.

All three snapping options (described below) are enabled by default, but you can turn them off, individually, in the Workspace dropdown. Objects will snap to their target when they are within 3 pixels. 

Snap to grids and guides: 

Objects will automatically snap to your custom guides, or to the lines of your grids as you’ve set them:

Snap to page: 

Objects will automatically snap to the vertical and horizontal page borders. They will also snap to the center of the page from both their borders and center:

Snap to other objects:

Objects will automatically snap to align with both the center and borders of other objects on the page:

Distance Snapping lets you quickly space multiple objects equidistantly. If you have three or more objects on the page, and then align two of them, Distance Snapping will activate to help you align the rest.

To enable or disable distance snapping:

1. Click the Workspace button towards the bottom of the Left Sidebar.
2. Select the Advanced settings option to open the Advanced Settings pop-up.
3. Click the Enable distance snapping checkbox.

When you move objects around on the page, our measurement tools can help you position those page elements precisely. Here’s how to find them, and a brief description of how they work:

To select any one of them, click on the Advanced Settings option in the Workspace dropdown to open the Advanced Settings pop-up. Once you’ve clicked the appropriate checkboxes, click Done.

Show coordinates tooltip:

A subtle tooltip displays the coordinates of a selected object as you move that object around the page and canvas.

Show annotations on snapping guides:

As you move an object around the page, this option shows the object’s distance, in pixels, from other nearby elements.

Show guides while holding the ALT key:

Hold down the Alt/Option to display pink line-guides that show a selected object’s distance from all four page margins.

And, if you need to manually measure distance, don’t forget our handy Distance Spec stencil. Grab it from the Spec Tools category of the Stencils Panel as you need it, or leave one just outside the page border, in the canvas, for quick and handy access:

To show or hide Hotspots:

1. Click the Workspace button towards the bottom of the Left Sidebar.
2. Select or deselect the Show hotspots option.

• Live Presence lets you see who is actively collaborating on a project. 
• Live Chat helps your team share ideas and clarify issues.
• Live Selection lets you jump right to where your colleagues are working.
• Live Cursors displays a colleague’s cursor as they edit.

To show or hide collaborator cursors, selections, or presence and chat:

1. Click the Workspace button towards the bottom of the Left Sidebar.
2.  Select or deselect the live collaborator options.