GRID, GUIDES, AND SNAPPING

OVERVIEW

Configure grid and guide lines on the canvas and widget snapping behaviors to keep your diagrams tidy while editing. You can create page guides for individual pages and global guides for the entire file.

THE GRID

Show or hide the grid via the "Arrange > Grid and Guides > Show Grid" checkbox.


By default, the grid is 10px by 10px and is drawn as dots. Set a custom grid interval or switch to grid lines instead of grid dots via the "Arrange > Grid and Guides > Grid Settings…" menu command. Use the "Spacing" dropdown to change the spacing of the grid. In the "Style" section, you can change the style of the grid to lines that cross the full page width and height, instead of dots at the intersection, and you can change the color of the grid using the color picker.


You can also toggle snapping to the grid, either via the "Arrange > Grid and Guides > Snap to Grid" menu command or via the Grid Settings dialog. With this setting enabled, a widget will snap to a grid line when it is dragged into close proximity while moving or resizing.

GUIDES

Guides are lines added to the canvas that help mark where widgets should be placed. They're only visible in Axure RP; you won't see them when viewing the HTML output in the browser.

REFERENCE

LEARNING AND

RESOURCES

Intro to Axure RP

Viewing and Sharing HTML

     Output

Organizing Widgets

Interactions

WIDGETS

Shape

Image

Line

Hot Spot

Dynamic Panel

Inline Frame

Repeater

Text Field and Text Area

Droplist

List Box

Checkbox

Radio Button

HTML Button

Tree

Table

Menu

Snapshot

Groups

Connectors

Vector Drawing

LIBRARIES

Widget Libraries

PAGES

Pages

Grids, Guides, and

     Snapping

MASTERS

Masters

Raised Events

STYLES

Page and Widget Styles

DOCUMENTATION

Flow Diagramming

Widget and Page Notes

Word Specification

Print Settings

GENERATED HTML

HTML Generator

Sidebar

AXURE SHARE

Basics

Security

Mobile App

Mobile Settings

Website Hosting Tutorial

Slack App

Hipchat Integration

Troubleshooting

     Connection Issues

AXURE SHARE ENTERPRISE

User Guide

Installation Guide

Accounts and Permissions

TEAM PROJECTS

Creating and Using

SVN Troubleshooting

ADVANCED INTERACTIONS

Variables

Conditional Logic

Math, Functions, and

     Expressions

Adaptive Views

INSTALLATION

TROUBLESHOOTING

GUIDES

Mac

Windows

PAGE GUIDES

Page guides appear on just one page. To add a guide to a page open on the canvas, drag from either the horizontal or vertical ruler next to the canvas and then drop at the desired pixel value. Page guides are teal by default.


Toggle page guide visibility via the "Arrange > Grid and Guides > Show Page Guides" checkbox. For more guide settings, like to change guide color, open the Guide Settings dialog via "Arrange > Grid and Guides > Guide Settings...".

GLOBAL GUIDES

Global guides are guide lines that always appear on the canvas in your RP file—on every page, master, and dynamic panel state. To add a global guide, hold [CTRL] / [CMD] while dragging from a ruler onto the canvas. Global guides are magenta by default. Toggle page guide visibility via the "Arrange > Grid and Guides > Show Global Guides" checkbox.

ADAPTIVE GUIDES

Adaptive guides indicate the boundaries of the current adaptive view. (Learn about the adaptive views feature in our Adaptive Views training article.) Adaptive guides are purple by default. Toggle adaptive guide visibility via the "Arrange > Grid and Guides > Show Adaptive Guides" checkbox.

PRINT GUIDES

Print guides indicate the page boundaries of the current print generator. (Learn about print generators in our Print Settings and Configurations reference guide.) Print guides are grey by default. Toggle print guide visibility via the "Arrange > Grid and Guides > Show Print Guides" checkbox.

CREATE GUIDES

Create a series of guides all at once using the Create Guides dialog, available via the "Arrange > Grid and Guides > Create Guides..." menu command. Use the Presets dropdown to choose from four options: "960 Grid: 12 Column"; "960 Grid: 16 Column"; "1200 Grid: 12 Column"; or "1200 Grid: 15 Column". (You can learn more about the 960 Grid System at <www.960.gs> and the 1200 Grid System at <www.1200px.com>.)


You can also specify your own layout using the "Column" and "Row" fields.


Click the checkbox "Create as Global Guides" if you’d like the guides to appear on all pages.

SNAP TO GUIDES

With "snap to guides" enabled, a widget will snap to a guide when dragged into close proximity while moving or resizing. Toggle this setting in the top menu via the "Arrange > Grid and Guides > Snap to Guides" checkbox, or from the Guide Settings dialog at "Arrange > Grid and Guides > Guide Settings…".

LOCK GUIDES

Lock guides so they cannot be moved or deleted. This setting is available in the Guide Settings dialog, or via the top menu at "Arrange > Grid and Guides > Lock Guides".

RENDER GUIDES IN BACK

Guides appear in front of widgets on the canvas by default, but you can have them render in the back instead. Toggle this setting in the top menu using the "Arrange > Grid and Guides > Render Guides in Back" command.

WIDGET SNAP

When a widget is being dragged to move or resize and gets close to a second widget already on the canvas, the first widget will snap into certain positions relative to the second one: when touching the second widget's border, a certain margin away from the second widget's border (10 pixels by default), to align corresponding widget edges (e.g. the top edges of two widgets arranged side-by-side), or at common midpoints (to align the two widgets' mid-widths or mid-heights). As this snapping behavior is happening during the drag, snap guides will appear on the canvas to help indicate which features of the second widget the first widget is snapping to.


Toggle this behavior via the top menu at "Arrange > Grid and Guides > Snap to Widgets", or via the Widget Snap Setting dialog, available at "Arrange > Grid and Guides > Widget Snap Settings…". The Widget Snap Settings dialog also gives you the option to change the widget snap margin (10px by default) and the snap guide color (blue by default).

MORE RESOURCES

© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL