Axure RP: 8–9 tips from a UX Pro
Speed up your workflow, collaborate faster, and nail the design challenge in your next interview
Tips covered here
- Don’t copy-paste, duplicate
- Stop duplicating. Throw it in a repeater, instead.
- One thing at a time with selection groups
- Save time with consistent naming conventions and a bit of logic
- Trigger interactions at the group level
- Make it a master and raise an event
- Dynamic panels are downward spirals
- Swap placeholders for dynamic stock photos
- Center the body, and make the top and bottom full-width
Don’t copy-paste, duplicate
Right-click: copy. Right-click: paste. No thanks.
Ctrl+C. Ctrl+V. Better, but still twice the work.
Ctrl+D. That’s my jam.
Stop duplicating. Throw it in a repeater, instead.
You have several widgets on the canvas. They’re likely grouped.
You need at least one copy of this group of widgets.
How could you accomplish this?
- Duplicate the group of widgets
- Right-click and choose ‘Convert to Master’. Then drag the master onto the canvas anytime you need it. If you have to change something, right-click and select ‘Break away from Master’.
- Press Ctrl+C with your group of widgets selected. Drag a Repeater widget onto the canvas and double-click it to access the single repeated item. Select the existing box and delete it. Press Ctrl+V to paste the group of widgets. Move the group to position (0,0).
Step 3 may seem like a ton of work. It will the first five times you do it. But with repetition, you will get faster. And the next time you need to prototype a long list of complex components that may require different data for each item, you’ll be thankful you know the smart way to do it.
One thing at a time with selection groups
Nearly all widgets allow you to include them in a Selection group.
The option is found under ‘Properties’, towards the bottom. Selection group is a datalist form field, meaning you can type directly into it and any existing selection groups will appear if what you type matches a part of their label.
Why define and use selection groups?
Think of a time where you wanted to indicate that one item out of a similar set of items is currently active:
- Current slide in a rotating image carousel
- Main navigation menu items
- Tabs
- Radio buttons in a form
Without selection groups, you would need complicated, manual logic in several cases to thoughtfully set the active item to ‘true’ and all others to ‘false’.
Or maybe you use dynamic panels (See shortcut 7).
With selection groups, you just need to set the desired active item to ‘true’, and Axure ‘turns off’ the others.
Save time with consistent naming conventions and a bit of logic
I mentioned tabs above as a common design pattern.
The way tabs work is usually like this:
- Click on a tab
- Set the clicked on tab to ‘selected’
- Change the state of a dynamic panel to correspond to the content associated with the clicked on tab
It’s a common mistake to start with fewer tabs than will be needed.
If you’re not planning ahead, you may setup your click interactions on each tab to set the corresponding dynamic panel to a specific state using the provided dropdown list.
I propose a smarter approach. When followed, adding a tab requires fewer actions:
- Duplicate, re-position and name the new tab
- Duplicate any state in your corresponding dynamic panel and rename to match the name of your new tab
Here’s how to make all this work:
- In the Case Editor for whatever event triggers your dynamic panel state change, select the action starting with ‘Set panel state to…’, and switch the dropdown from ‘state’ to ‘value’
- It will ask you enter ‘Name or State #’ and present a text field and an ‘fx’ button
- You want to set the panel’s state to match that of the selected widget’s name, so enter this odd bit of text, including the double brackets: [[This.name]]
- Click OK
Trigger interactions at the group level
You may follow the design trend of placing right chevrons (a.k.a. arrows) inside your colored buttons.
I’m not here to judge, just to help.
Instead of wrapping the button and the chevron in a dynamic panel, or adding the same click event to both widgets, or dragging a hotspot over both widgets and adding a click event to that…
…group both widgets and flick this handy switch. Boom, done.
Make it a master and raise an event
Any application you’re likely to prototype will have elements that remain in the same place across several screens.
When something is repeated like that, it’s smart to convert each set of elements into a Master. That way, change it once in the master, and that change is reflected everywhere the master appears.
What may seem alarming at first is losing control of those elements at the page level. Axure does not let you select any widget contained in a master from its Interaction Case Editor.
Don’t fret. There’s still a way, and I hope you’ll come to see its benefit.
That way is through a Raised Event.
A Raised Event is the last option in the left-most column of Axure’s Interaction Case Editor, a child item of the ‘Miscellaneous’ category.
How does this work? Here is an example:
Example: You want to set one of your navigation items as ‘active’ when a page loads
- Convert your navigation into a Master
- Open the new master, and select ‘onPageLoad’ from the Interactions area in the Properties pane
- Scroll down to and select ‘Raise Event’
- Create a new event called ‘setActiveMenuItem’ and click OK
- Go to the page where you want the item to appear as active
- Select the master and double click the raised event in the Interactions are
- Select the action you want, and notice how you now see all the widgets within the master
- Select the widget you want the action applied to, set any applicable behaviors in the bottom right of the Case Editor, and click OK
- Preview your prototype!
If it seems like a lot of work…well, that’s because it is. But it’s nothing you haven’t done before. And if you used the example above, then you’ll get plenty of practice immediately by setting the active menu item for each of your pages. Soon it will feel natural.
Dynamic panels are downward spirals
As soon as you discover them, you’ll find an excuse to overuse them:
- I want this widget to look different when something happens: I’ll switch states of a dynamic panel!
- I need something that acts like a toggle switch: Dynamic panel and its multiple states!
- I need to show something expanded and collapsed: Dynamic panel and its multiple states!
The list goes on.
Sometimes, dynamic panels are exactly what you need — especially when the feature you’re looking for is only possible with a dynamic panel:
- Pinning a widget to a side of the viewport
- Dragging a widget
- Switching between multiple states
But in nearly all other cases, a dynamic panel overcomplicates what could otherwise be achieved with Interaction styles (i.e. Selected), Selection groups, standard groups with the ‘Trigger interaction styles” checked.
Swap placeholders for dynamic stock photos
It’s often difficult to sell clients on a design when it features the default image placeholder.
Luckily, there is a convenient API you can use to dynamically set any given image in your prototype. And that image will be different each time you preview your prototype.
The API is an extension of a free stock photography service called Unsplash.
To use this service, you must apply the ‘Set Image’ action to an image. In most cases, you want the image to load immediately, so this action must be applied on your page via the ‘onPageLoad’ Interaction in the Properties pane.
When customizing the ‘Set Image’ action, assuming you have selected an image, you will focus on the first row: Default.
It is set to ‘Image’ by default. Change this to the only other option, ‘Value’.
You will now see a long input field and the usual ‘fx’ button.
You must enter a URL into the input field. It must match this formula:
http://source.unsplash.com/{{width}}x{{height}}?{{keyword}}
Here are a few examples:
- 300x170px image from the category, party:
http://source.unsplash.com/300x170?party - 25x25px image from the category avatar:
http://source.unsplash.com/25x25?avatar
Bonus tip: it can be helpful to name your images the exact dimensions. If your image is 300x170px, name it ‘300x170’. That way, when you are entering your URLs in the Case Editor, you can quickly reference the necessary dimensions that you must include in the URL.
Center the body, and make the top and bottom full-width
First, make it so that when previewing your prototype, all visible content appears centered in your browser viewport:
Next, whatever size a specific widget is on your canvas, you want it to stretch the full width of the browser viewport — anchored to the widget’s center so it stretches equally to the left and right:
Note the use of the double brackets: [[ and ]]. That is special Axure syntax for referring to special values. In this case, [[Window.width]] will be dynamically replaced with a number: the width of your browser viewport.
