© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.
ADDING AND MOVING
WHAT ARE WIDGETS?
Widgets are the building blocks of your diagrams in Axure RP. Add widgets to your diagrams by dragging them from the Libraries pane onto the canvas. The Default library contains basic design elements like shapes, buttons, and form fields.
Click the links below to learn about the capabilities of each type of widget in the Default library.
To add a widget, drag and drop the widget from the Libraries pane onto the canvas. You can also copy and paste widgets from one diagram to another.
To move a widget (or selection of widgets), drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.
When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging.
Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or in the Inspector’s Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.
GROUPING AND UNGROUPING
Group widgets so that you can move and interact with them as one unit. Learn more about groups here.
In addition to the “Group” and “Ungroup” buttons in the Main Toolbar, you can use the keyboard shortcuts [CTRL] / [CMD] + [G] to group a selection of widgets and [CTRL] / [CMD] + [SHIFT] + [G] to ungroup.
In the Outline pane (lower right corner of the interface), groups appear as a folder containing the grouped widgets. Another way to add and remove widgets from a group is to drag them into and out of the folder in the Outline.
LAYER ORDER (A.K.A. DEPTH ORDER, A.K.A. FRONT AND BACK)
Use the Forward button in the Main Toolbar to move up a widget in page depth by one widget, and the Front button to bring it all the way to the front.
The Backward button sends a widget one widget backward in page depth. The Back button sends it all the way to the back.
(If you don't see these buttons in the Main Toolbar, you can add them by right-clicking a blank spot on the Toolbar and clicking "Customize Toolbar...". Find "Forward" and "Backward" in the "Arrange" section. Click the options to add them to the toolbar.)
To view the current depth, or z-index position, of a widget, you can check the Outline pane. By default, the Outline is ordered front to back, so widgets at the top are front-most, and widgets at the bottom are at the back. (You can change the sort direction of the Outline by clicking the "Sort and Filter" icon in the Outline's local toolbar.) You can also drag a widget up or down in the Outline to change its depth on the page.
The z-index also determines the tab order for widgets that can be navigating using the [TAB] key in the prototype (like fields in a form, for example). The [TAB] key moves between widgets from the back-most widget to the front-most.
The align tools, available from the Align button in the Main Toolbar, can align selected widgets horizontally at the left, center, or right or or vertically at the top, middle, or bottom. The new position is based on the location of the first widget selected. You must select at least two widgets before you can align them.
The distribute tools, available from the Distribute button in the Main Toolbar, can evenly distribute the locations of a selected group of widgets. You'll need at least three widgets selected in order to distribute them. You can choose to distribute the selected widgets horizontally or vertically.
LOCKING AND UNLOCKING
When a widget is locked, its size and location cannot be changed by dragging it on the canvas. (The size and position of a locked widget can still be changed using the size and location fields in the top toolbar and in the Inspector’s Style tab.)
When you select a locked widget on the canvas, it has a solid, red border.
In addition to the Lock and Unlock buttons in the Main Toolbar, the keyboard shortcut [CTRL] / [CMD] + [K] locks selected widgets and [CTRL] / [CMD] + [SHIFT] + [K] unlocks them.
To hide selected widgets, click the checkbox "Hidden" in either the top toolbar or the Inspector's Style tab. Hidden widgets appear masked in yellow on the canvas. In the HTML output, these widgets will not show at all. To learn how to use interactions to show hidden widgets, check out our Show Hidden Widget tutorial.