Axure RP Pro

Learn by Doing: Quick Start

Introduction
In less than thirty minutes, this tutorial will guide you through creating a wireframe and generating an interactive prototype
and specification using Axure RP. You will learn:

• How to use widgets

• How to use masters
• How to generate prototypes and specifications
• How to create dynamic interfaces with dynamic panels
• How to show conditional flow

To complete this tutorial, you will need Axure RP (www.axure.com/downloads.aspx) and the sample file QuickStart.rp
(www.axure.com/Samples/QuickStart.rp).

To begin, start Axure RP and open the QuickStart.rp file using File -> Open. The Home page will be open in the
Wireframe Pane.

Above is a picture of the Axure RP environment with labels that will be used in this tutorial.

311 Fourth Ave., Suite 414 San Diego, CA 92101 • www.axure.com • [email protected] • t| 800.895.0810 • f| 415.651.9527
Page 1 © 2002-2008 Axure Software Solutions, Inc
1. Designing Wireframes
ADDING PAGE NOTES

Page level notes can be added to each page

in the Page Notes pane.

When you open the file, the Home page

will open in the Wireframe pane. In the
Page Notes pane, add the description,
“This is the Home page where users
can search for flights or login to their
account.”

ADDING WIDGETS

Design your wireframe by dragging and

dropping widgets from the Widgets pane.

Find the Button Shape widget in the

Widgets pane. Drag and drop a Button
Shape widget to the Account Login
section.

EDITING WIDGETS

Double clicking a widget allows you to edit

the most common property on a widget.

Right-clicking on a widget will display a

context menu with options to edit widget
specific properties.

Double-click the Button Shape and type

“Login” to edit the text.

Right-click on the Button Shape and

select Edit Button Shape -> Rectangle.

Page 2 © 2002-2008 Axure Software Solutions, Inc

 FORMATTING WIDGETS

Format widget styles like font size, border

color, fill color, and font color using the
toolbars above the wireframe pane.

Format the Button Shape to have bold

text, a gray fill, and a thicker white border
using these buttons in the toolbar:

ADDING ANNOTATIONS

Annotations can be added to widgets by

selecting a widget and entering values in the
Annotations & Interactions pane. Annotation
fields can be customized by clicking the
Customize link.

Select the Button Shape widget and

label it “Login Button” in the Label field.
Add the description, “This button takes
the user to the My Account page.” in the
Specification field.

ADDING BASIC LINKS

Basic links can be added using the Quick

Link shortcut in the Interactions pane.

Select the Login Button and click Quick

Link in the Interactions pane. Then,
select the My Account page and click
OK. Notice in the Interactions pane that
a case has been added to the OnClick
event.

Page 3 © 2002-2008 Axure Software Solutions, Inc

 MORE ACTIONS

In addition to basic links, there are many

more Actions available. One or more Actions
can be added to each Case on an Event
(OnClick). For example, you can make the
click of a button open a new page in the
current window and open a popup window
at the same time.

Double-click on Case 1 under the OnClick

event to see the other available Actions.
Click Done.

2. Using Masters
ADDING MASTERS

Masters are collections of widgets that can

be reused throughout your design. Some
commonly created masters include headers,
footers, and navigation. A change to a
master is reflected everywhere the master is
used.

Add a master by clicking on the Add

Master button in the toolbar of the
masters pane. Right-click on the master
and select Rename, and name it “Footer”.
Double-click on the Footer master to
open it for design.

EDITING MASTERS

Masters are designed in the same way as

pages.

Add a Horizontal Line widget and a Text

Panel widget. Select the Text Panel
widget in the wireframe and enter the
text, “Copyright, 2008” .

Page 4 © 2002-2008 Axure Software Solutions, Inc

 NESTING MASTERS

Masters can be placed on other pages or

masters by dragging and dropping from the
Masters pane.

Add another master and name it

“Template”. Double-click on Template to
open it for design. Drag Header from the
Masters pane and place it at the top of
the Template master. Then, drag Footer
and place it at the bottom of the Template
master.

MASTER BEHAVIORS

By default, masters are set to Normal

behavior, which allows the master to be
placed anywhere on the wireframe. Masters
set to Place in Background behavior will
snap into the position they were created
when added to a page. Masters set to
Custom Widget behavior will lose their
relationship to the master when added to a
page and can be edited like other widgets.

Right-click on Template in the Masters

pane and select Behavior -> Place in
Background.

ADDING MASTERS TO PAGES

To add a master to a page, drag and drop

the master from the Masters pane to the
wireframe pane.

Add the Template master to the Home

page by dragging it from the Masters
pane and dropping it onto the Wireframe
pane.

Open the My Account page by double-

clicking it in the Sitemap pane, and add
the Template master.

Page 5 © 2002-2008 Axure Software Solutions, Inc

 MAKING GLOBAL CHANGES

A change made to a master is reflected

everywhere that master is used.

Open the Header master and change the

image by double-clicking and importing
one from your computer, or replace the
image widget with the Logo master. Then,
open the Home and My Account pages
and notice that the change has been
applied.

3. Generating Prototypes

GENERATING PROTOTYPES

When generating prototypes, there are a

number of options including the destination
folder and which page notes and annotations
to include.

Press the F5 key or select Generate ->

Prototype in the main menu. Click on
the Generate button to generate the
prototype. When asked if you would like
to create the destination folder, click Yes.

VIEWING PROTOTYPES

Axure RP Prototypes are HTML, javascript,

and image files, and can be viewed in
popular web browsers.

The prototype will launch in your web

browser*. You can navigate the pages
using the Sitemap pane on the left. Page
notes display in the bottom frame. Click
on the yellow note icon next to the Login
button to view the annotations. Click the
Login button to link to the My Account
page.
* If you are using Internet Explorer and receive an Active X warning, click
the Allow button. To disable the ActiveX warning, go to Tools->Internet
Options. In the Advanced tab, scroll down to the Security section and
check the box next to “Allow active content to run files on My Computer”.

Page 6 © 2002-2008 Axure Software Solutions, Inc

4. Generating Specifications
GENERATING SPECIFICATIONS

When generating specifications, there are a

number of options including the destination
file, which pages and masters to include,
and which page notes and annotations
to include. You can also customize the
template, such as adding a title page and
editing headers and footers.

Go back to Axure RP. Press F6 or

Generate -> Specification in the main
menu. Click the Generate button to
generate the specification.

VIEWING WORD SPECIFICATIONS

Axure RP specifications are generated

in Microsoft Word format complete with
screenshots, annotations, and interactions.

A Microsoft Word 2007 (.docx) file will be

created. The Office Compatibility Pack
installed with Axure RP allows you to view
and edit those files in earlier versions of
Word.

Scroll through the document. Each page

includes the page notes, a screenshot of
the page, and a table that contains the
annotations and interactions for the page.

Page 7 © 2002-2008 Axure Software Solutions, Inc

5. Creating Dynamic Interfaces and Conditional Flow

USING DYNAMIC PANELS

The Dynamic Panel widget allows you to

demonstrate dynamic functionality in the
prototype. Dynamic Panels can contain one
or more states. Actions are available to hide,
show, and change the state of Dynamic
Panels.

Go back to Axure RP. On the Home Page,

drag and drop a Dynamic Panel widget
above the Email field in the Account
Login section. Double-click on the
Dynamic Panel to open the Dynamic
Panel State Manager. Label the panel
“Error Panel” in the Dynamic Panel Label
field and click the Edit All States button.

EDITING DYNAMIC PANELS

Once open, panel states can be designed

like pages and masters by dragging and
dropping widgets from the Widgets pane.
A blue dashed outline on the wireframe
indicates the boundaries of the dynamic
panel.

Add a Text Panel widget and enter the

text “Login failed. Please try again.”

HIDING DYNAMIC PANELS

Dynamic Panels can be set to hidden by

default. This will hide the panel contents
which can then be dynamically shown using
interactions.

Go back to the Home page. Right-click

on the Dynamic Panel and select Edit
Dynamic Panel -> Set Hidden.

Page 8 © 2002-2008 Axure Software Solutions, Inc

 CREATING MULTIPLE CASES

Multiple cases can be added to an Event to

communicate conditional flows.

Select the Login Button and double-click

on Case 1 on the OnClick event in the
Interactions pane. In Step 1: Description,
add the description “If Login Succeeds”
and click Done.

Then, add a second case by selecting the

OnClick event and clicking Add Case. In
Step 1: Description, add the description
“If Login Fails”, and in Step 2: Select
Actions, select “Show Panel(s)”. Click on
the blue link for “panel” in Step 3 below,
and select “Error Panel”.

Generate the prototype by pressing F5

and click the Generate button.

Click the Login button, and you will see in

the browser the descriptions for the two
cases. Clicking If Login Fails will show
the error message, and clicking If Login
Succeeds will link you to the My Account
page.

Conditional logic can also be added to

Cases to check the data entered in the Email
and Password fields and respond without
showing case descriptions. Visit www.axure.
com/expert.aspx for more on conditional
logic.

More Information
This concludes the Quick Start tutorial. Other features in Axure RP include conditional logic, storing
data in variables, and shared projects for collaborating on files. Please visit the online training at
www.axure.com/expert.aspx for articles and videos on these topics and more.

Page 9 © 2002-2008 Axure Software Solutions, Inc