Axure Promotion · Axure Tips · Axure Tutorial · Canvas · Guides · Rulers · Jul 18, 2022

Axure Tutorial: Canvas Settings

by WELLJOE

Introduction

This article is a part of course Axure Full Course: Tutorial, Tips and Templates.

Canvas is the main work area of Axure designing, all widgets, components, dynamic panels are designed here. Today we will learn how to set up Canvas.

Canvas Settings mainly includes the following parts:

Canvas Preferences Settings.
Scale Settings.
Rulers Settings.
Show/Hide Page Dimensions.
Grid Settings.
Guide Settings.
Widgets Snap Settings.
Masks Settings.
Other Settings.

Canvas Preferences Settings

Click Axure RP 10 > Preferences to enter Canvas Settings.

Enter Canvas Settings

Canvas Preferences Settings

Enable Single Key Shortcuts: Improve the efficiency of shortcut keys. For example, if checked the Preview can be functioned with the . key. If unchecked, Command (Ctrl) +. keys are required.

Hide Canvas Scrollbars: When checked, scrollbar will be shown on the canvas, which is not shown by default. Because you can scroll with the mouse or touch pad.

Negative Canvas Regions: If unchecked, the canvas always starts at the 0,0 coordinate. It is checked by default.

Show Thumbnails On Hover Panes: Whether to show thumbnails when the mouse hovers over the element on the Outline pane, if checked, it will be shown.

Appearance: Used to set the system appearance, you can choose Light Mode, Dark Mode or Use the System Setting.

Scale Settings

Appropriate canvas scaling allows us to design comfortably. There are three main ways to set the canvas ratio:

Set via the dropdown in the toolbar
Two-finger touch via the touchpad on the keyboard
By pressing the command (Ctrl) key on the keyboard and scrolling the mouse wheel

The corresponding canvas scale can be selected from the canvas scale dropdown on the toolbar.

Rulers Settings

Rulers can be toggled on/off by selecting View > Rulers, Grid, and Guides > Show Rulers on the menu bar.

Show/Hide Page Dimensions

The shown/hidden of Page Dimensions can be switched. If the Page Dimension is not shown, the background color will not be used to distinguish the background and foreground of the Page

Page Dimensions are not shown

Page Dimensions are shown

Toggle the shown/hidden of Page Dimensions by selecting View > Rulers, Grid, and Guides > Show Page Dimensions from the menu bar.

Grid Settings

Grid is mainly used for alignment and as a reference for changing the size of elements. You can set the Grid through View > Rulers, Grid, and Guides > Grid Settings.. in the menu bar, or you can directly check/uncheck Show Grid, Snap to Grid to switch the shown /hidden grid and align elements to grid.

When you click the Grid Settings... menu, the Grid Settings panel will pop up, and you can set the Grid properties.

Spacing: Used to set the interval of the Grids. The larger the value, the sparser the grids, the larger the value, the denser the grids

Style: Line grid or Intersection grid style, which can be changed according to your preference.

Grid's style

Guide Settings

Guide is mainly used for page alignment and layout settings. There are three kinds of guides: Global guides, page guides, or print guides.

Global Guides: Guides that all pages will have, mainly for global.
Page Guides: Guides that only exist on a certain page, mainly for a certain page.
Print Guides: Guides mainly used for printing, for printing reference.

Guide Creation

Click View > Rulers, Grid, and Guides > Create Guides... on the menu bar to bring up the Create Guides panel.

Create Guides menu

Create Guides panel

You can choose the system preset Guides, or you can customize the Guides.

Create as Global Guides: You can check/uncheck whether to create as Global Guides, if not, create it as Page Guides.

Drag and drop from Rulers to create new Page Guides

Delete Guides
There are three ways to delete Guides:

Right-click Guide and select delete.
Click to select Guide, press Delete key.
Drag the Guide out of the rulers.

Guide Preferences Settings

Click the View > Rulers, Grid, and Guides > Guide Settings menu on the menu bar to pop up the Guide settings panel.

Snap to Guides: Whether to align elements to Guides.
Render Guides in Back: When checked, Guides will be displayed behind the element.
Always Show Locations in Ruler: When checked, the location of the Guide will be displayed on the ruler.

Widgets Snap Settings

Widgets Snap is our commonly used feature, which is generally used to align different widgets. Click View > Rulers, Grid, and Guides > Widget Snap Settings... on the menu bar to bring up the Widget Snap Settings panel.