Variables let you define text or number values that can dynamically change over time within your prototype. They can be set via actions, displayed in text or text input elements and used to control the state of components.
Variables are useful for creating wide variety of behaviour, including:
- Dynamically updating text elements
- Capturing text entered into input fields to display later
- Simple form field validation
- Storing user preferences/options so they can be reused throughout a prototype
- Simplifying communication and control between components
- Tailoring prototype content and behaviour to different scenarios for use in user testing
How to create a variable
There are three ways to create a variable. Either from the tools panel, a text element or a component:
- From the tools panel: Click the Manage Project Variables button.
- From a text or text input element: Open the Content dropdown. In the Use Variables section, click Add.
- From a component: Select a component and open the State dropdown in the properties panel. Under the Set From Variable section click Add.
With the Project Variables Library now open, click Add Variable. You’ll see two columns; a Name and Default Value column.
- Name refers to the name of your variable. Choose something descriptive but short.
- Default Value refers to the default value you’d like shown. This field is optional to complete. It defines the value that will be used when the prototype is first previewed.
How to use variables in your prototype
Displaying variable values in text and input elements
The value of a variable can be displayed in a text or text input element. This can be useful for dynamically setting form fields or other types of text in your prototype.
To display a variable in a text element:
- Select the text or text input element you’d like to display a variable value in.
- Open the Content dropdown and select the variable you’d like to use. If you have provided a default value it will immediately display in the element selected. If you’re using a text input element, when users type within the input the value of variable will be updated as they type.
- You can change the value of the variable using actions which will update what is shown in your text or text input element.
Using variables to control the state of components
Variables can be used to set the state of a component. By binding the component state to a variable, whenever the variable value changes so will the component state. For example, you can set up a navigation component to update a variable with the currently selected navigation option, and have one or more other components bound to that variable, so that their state (and the content they display) is automatically updated whenever a different navigation option is selected.
To control the state of a component using a variable:
- Select the component you’d like to control. Your component must have multiple states (pages within it).
- Open the State dropdown and from within the Set From Variable section, select the variable you’d like to use. If you don’t have a variable to use, you can create one now using the Add button in the dropdown.
- Now when previewing your prototype, when the value of your variable changes to one that matches the name of one of your states (a page within your component), the component will display that state. You can change the value of a variable by either setting a default value or by using actions.
Note: If no default value is set for your variable, or the value does not match one of the states, the first state in your component will be displayed.
Using actions to change variable values
The real power of variables is the ability to change their values over time in your prototype. You can do this with actions. For example, if you had a variable called “first name” you could change it from “Jane” to “Sarah”, or if you had an option called “notifications-setting” you could change it from “on” to “off”.
To change the value of a variable using actions:
- Create an action. This could be a page action or interaction on a component.
- In the Action dropdown, you’ll see a section called Set Variable. From this section, choose the variable you would like to change.
- Enter a new value for your variable. Now when this action is performed the value will update with it.
Using actions to listen for when a variable changes
You can use actions to listen to when a variable changes and then trigger another action, like going to a new page or changing the state of a component. For example, you could listen for when a “notification setting” variable changes from “off” to “on”, and then respond by going to a different page in your prototype.
To listen for when a variable changes:
- Create a page action or interaction on a component and select When a variable changes.
- You can choose to listen to when a variable changes (to anything) or when it is set to a specific value. If you choose the later, you can define the specific value to check for.
- Now choose the action you would like to perform when the variable changes. This could be going to another page or even changing the value on another variable.
A note about variable names
Your variable names must:
- Begin with an "alpha character"
- Contain only alpha characters (above) and digits 0-9
- Not be any of the following: mod, to, in, and, xor, or, not, end. It is possible to assign to some of these, but that's not recommended.