Axure Tutorial: Canvas Settings
Introduction This article is a section of course Axure Full Course: Tutorial, Tips and Templates. Canvas is the main…
This article is a section 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.
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 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 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.
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.
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
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.
Snap to widgets: when you drag a widget, it will automatically align to the edge of the widget.
Snap to Margin: According to the set value, align to different positions of the widget.
Click View > Masks in the menu bar to set Masking different elements.
Mask different elements
Show Location and Size Tooltip
Click View > Location and Size Tooltip on the menu bar to set.
Mainly used to show tooltips for location and size tooltip when dragging elements.
Show Note and Interaction Markers
Click View > Show Note and Interaction Markers to set.
Used to show note and interaction markers.
Click View > Show Background to set.
If unchecked, the set page background color will not be shown, only the white background will be shown. It is checked by default.
That’s all for today’s lesson. Next lesson we will introduce Widget Library Settings.
If you have any questions and suggestions, please leave a message.
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.