School of Information Systems

Working with Variables in Axure XP for Prototyping the User Interface

Variables are an Axure RP feature that allows you to create and use variables in a pretty advanced way. Variables will give you an edge when prototyping functions and mathematical computations. Many people are often afraid of approaching this feature, as it sits at the more complicated end of the feature list. Don’t panic! I’ve got some tips to help you get to grips with them and get your Axure prototypes to the next level. Learning how to use variables can be extremely useful. So, let’s get started!18

Types of variables

There are two different types of variable in Axure XP – Local and Global.

  • Local Variables – for use when dealing with information within a single page.

e.g. an e-commerce price total changing if you change the quantity of items.

  • Global Variables – for use when carrying information between pages.

e.g. passing text to the next page to read ‘Thank you, Tom’ after I have entered my name in a form field earlier in the process.

For most prototypes, the global variables are more useful. The prototypes are being able to change the content on the next page dynamically depending on user choices is really handy. For more complex use of variables, in an e-commerce purchasing process for example, you may have to use a combination of Local and Global to achieve the functionality you’re looking for.

Setting up variables

Regardless of which you use, there are 3 basic stages to setting up variables in Axure: Save, Store and Show. If you have a go at setting up variables and they’re not working, I guarantee there will be something wrong with one of these stages.

  1. Save
  • What information are you capturing?
  • Where does it come from?
  • Which action updates the variable?

Example Save stage: Form submit button saves the ‘Name’ field

  1. Store
  • Create your variable and name it.
  • Which variable are you updating?
  • Is it a Local or Global variable?

Example Store stage: ‘NameVariable’ is updated to reflect field data

  1. Show
  • What are you using the variable data for?
  • Which widgets will the data change?
  • When do you need to display the data?

Example Show stage: OnPageLoad, update widget to ‘NameVariable’

The Top Tip:

Make sure you name everything (within reason)! Naming things using easy or sensible words! It makes your life much easier in Axure when you start playing with interactions, conditions, and variables. It’s very difficult to work with 100 widgets all called ‘Shape’.

References

Stewart, T., 2016. Working with variables in Axure. [Online]
Available at: https://www.webcredible.com/blog/may16-working-variables-axure/
[Accessed 3 May 2017].

Christina Natalia Tanuwijaya