Learn how to prototype web and mobile apps

Design tools for your prototypes: rulers, guides and grids

To help you adjust your prototype design to the pixel and arrange and align widgets on the page easily, you can use the following features:

Interactive wireframe workspace: rules, guides, grid

1) The rulers, which can be shown on the top and left sides of the canvas to assist you when positioning widgets. They are displayed by default, and you can deactivate them in the View menu or in File>Preferences >User Interface. In the preferences menu you can also change the units used by the rulers:

  • Inches
  • Centimeters
  • Pixels (default option)

2) The guides. To create a guide, click on the rulers and a new guide will be created. Then drag it to the desired place. To delete it, simply select it and press the “delete” key. You can create horizontal or vertical guides on the rulers to help you align the widgets over an edge of great precision.

To create horizontal or vertical guides, point the cursor over the position on the ruler you want to place the guide and left-click. Once a guide is created you can drag it to change its position.
To remove a guide, right-click on its handler on the ruler and select the option “Remove guide”. As an alternative you can press the ‘Supr’ key once selected.

Temporary ‘snap to’ smart guides will also appear when you hover over a UI element, changes the size of an element or drags it to a new location. The smart guides make it easier to position and line up elements on the canvas. Activate them in the View menu.

3) The grid. You can display it from the View menu. When the grid is activated a set of vertical and horizontal dotted lines are painted on the canvas background. If you also activate the “Snap to grid” option, when moving widgets through the canvas they will automatically align to the nearest grid line found.  To activate or deactivate the grid you can either go to the View menu and check/uncheck the option “Grid” or go to File->Preferences then select “User Interface” and check/uncheck the option “Show grid”. In the Preferences dialog you can also set the Grid spacing.

The grid will never be shown when simulating a prototype.

4) The green lines, to help you when positioning widgets on the canvas. To show them, you need to activate the “Snap to geometry” option in the View menu or in the UI Preferences page. When this option is on, vertical and horizontal green lines appear while positioning an element on the canvas to indicate when it is aligned with other widgets on the page, to help you align the element with the rest of the design. The guide lines will appear following this criterion:

  • Dragging the widget horizontally, vertical lines appear on the left and right sides of other widgets meeting left and right side edges of the dragging widget.
  • Dragging the widget vertically, horizontal lines appear on the top and bottom sides of other widgets meeting top and bottom side edges of the dragging widget.
  • Horizontal and vertical lines will also appear together when the dragged widget’s edges meet horizontal and vertical side edges of another widget on the page.
  • Hold Alt key while dragging the widget to avoid snapping.

The elements on the screen keep a certain order of depth between them. You can see the order in which they are arranged in the Outline tab. To change the order of depth, right click on the item (or select it in the Outline), select ‘Order’ and then the option you want from the sub-menu.


Next tutorial > Your wireframing tool: Floating palettes