WHAT IS AXURE RP?
Axure RP is a wireframing, prototyping, flowcharting, and documentation tool. Use it to create and style diagrams, add interactivity and notes to diagram pages and elements, and publish finished designs to HTML for viewing via web browser.
CONTINUE WITH CORE TRAINING
WHAT ARE PAGES?
Axure RP files are composed of pages—anywhere from one or two to hundreds, depending on project scope. The Pages pane, available at the top of the left-hand instrument panel in the Axure RP interface, is used to view and manage the pages in your project.
Each page contains a diagram—generally a static wireframe, interactive prototype, or flowchart—composed of widgets.
WHAT ARE WIDGETS?
Widgets are the building blocks of your diagrams in Axure RP. The most common are "shape" widgets. Many of the widget types in the Common section of the Default library, including boxes, labels, and paragraphs, are shape widgets; custom shapes drawn with the pen tool are also shape widgets. (For more about the pen tool, check out our Vector Drawing reference guide.) Icons in the Icon library are also shapes.
Another commonly used widget is the image widget, which has two roles: to serve as an image placeholder, or to import real images into a diagram. An imported image can be sliced, cropped, resized, stretched, rotated, and so on.
After a widget has been added to a diagram, you can rearrange it in your diagram by moving, resizing, or rotating it. You can also align, distribute, lock, group, and change the depth order of widgets.
Click a widget to select it, or click and drag to move it around the page.
When a widget is selected, a green border is drawn around it. Selecting a widget also reveals handles that can be dragged to resize the widget. To proportionately resize a widget when dragging the widget handles, hold the [SHIFT] key while resizing.
Widgets can also be resized to a specific pixel value. Use the "w" and "h" fields in the top toolbar or Inspector 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.
You can rotate a widget by holding [CTRL] / [CMD] while clicking a corner handle on a widget. Drag to set the angle of rotation. You can also enter an exact degree of rotation in the Style tab.
Widgets can be locked in the design area, which prevents their location and size from being changed by dragging. Locked widgets can be moved and resized in the Inspector if needed. To lock a widget, use the icon in the top toolbar.
Widgets can be grouped so that the group can be manipulated together. Select the widgets to group and use the keyboard shortcut [CTRL] / [CMD] + [G] to group them. Single-click to select the group. Do a slow double-click to edit widgets inside the group. You’ll know you’re editing inside the group when you see the rest of the page greyed out.
You can usually edit a widget's text by double-clicking on it. (Double-clicking a widget on the canvas gives you access to that widget type's most common editing function. For most widgets, this feature is the text on the widget.) You can also type directly on a shape widget to add text to it. Single-click the widget to select it, then type your text.
Style controls for widgets are located in two areas of the Axure RP interface: the Style tab of the Inspector (on the right), and the Style Toolbar (up top). Available style properties include shape position and dimensions, rotation, fill color and shadowing; border line color, pattern, and thickness; and text attributes like font, color, alignment, line spacing, and padding. Some style properties, like rotation and corner radius, can also be edited right on the canvas by dragging a handle appearing next to a selected widget.
Once you've styled a widget, you can use the "widget styles" feature (similar to Microsoft Word styles or CSS classes) to share that style with other widgets. The widget style applied to a selected widget appears in the left-most control in the Style Toolbar, and also in the Widget Styles dropdown in the Style tab of the Inspector. When you make a change to the styling on a specific widget, the dropdown in the Style tab will show an asterisk (*) after the name of the style, and you'll see "Update" and "Create" controls appear next to the style name. (More on those options in the Widget and Page Styles article.)
Interactions determine the dynamic behaviors of a widget or page. Interactions have three parts: events, cases, and actions. Events are triggers like OnClick and OnPageLoad. Cases are the different scenarios that can occur when the event is triggered. Actions are the individual components of the scenario making up each case.
A basic example: an interaction that links to another page uses the OnClick event, has a single case, and uses the Open Link in Window action.
WIDGET AND PAGE NOTES
The most common use of widget and page notes is to document the functionality or requirements of a widget or page. Notes may also be used to document changes, keep track of status, or manage tasks for yourself or your team.
Add notes in the Notes tab of the Inspector. You can add and remove fields for widget and page notes by clicking "Customize Fields" in the Notes tab.
VIEWING IN THE BROWSER
At any point, you can view your diagrams in your browser.
Choose "Publish > Preview" to immediately see and interact with the current page in the browser.
You can also publish your file to the cloud using "Publish > Publish to Axure Share...". Axure Share is hosted on Axure’s servers and includes features like password protection, discussions, and notifications.
Axure RP is primarily used to create content for viewing in a web browser, but you can also print your diagrams. To view print guides on the canvas, go to "Arrange > Grid and Guides > Show Print Guides." The position of these guides is determined by your paper size settings, which can be changed by navigating to "Print > Paper Size and Settings".
To print a diagram, go to "File > Print". You can also choose which of the file's pages to print and set print scaling here.
Interactions are created through the Inspector's Properties tab. As you go through training, you’ll learn about how to build interactions.
Also in the Properties tab is the Interaction Styles section. Interaction styles can be used to configure a custom look to be applied to a widget in certain scenarios: after the widget is moused over, clicked on, selected, or disabled. Interaction styles can also be set via a widget's context (right-click) menu.
You can also use the connector widget to create flow diagrams by connecting shapes together. We'll go into more detail about Axure RP's flowcharting capabilities in the next article in this training series.