Variables allow you to store user inputs and take actions based on the provided data inside the prototype. You can use variables to create dynamic text elements, tailor design content to match user preferences and collect data (i.e. names) to be displayed elsewhere in the prototype. The values of variables are global and you can use them on all pages.
Click Variables icon in the left panel and choose +New variable. Next, name the variable and confirm with Enter.
The created variables will be added to the prototype, so you’ll be able to use them for the elements on all pages.
While naming your variables, you need to follow some rules. All variable names should begin with a letter, be alphanumeric, contain no spaces and have 25 characters or less. The variable name will be automatically shortened and/or spaces will be removed if needed.
Also, the following phrases cannot be used as variables names:
do, if, in, for, let, new, try, var, case, else, enum, eval, null, this, true, void, with, await, break, catch, class, const, false, super, throw, while, yield, delete, export, import, public, return, static, switch,typeof, default, extends, finally, package, private, continue, debugger, function, arguments, interface, protected, implements, instanceof.
However, if you use any of them, we’ll automatically adapt the variable name by adding an underscore and a number.
It’s good practice to choose descriptive names so it’s easier for you and your coworkers to understand them later. If you want your variable name to consist of multiple words, you can use the following methods to make them easier to read:
- camel case: variableName;
- underscore: variable_name.
To manage the variables, open the Variables panel in the toolbar. You’ll be able to perform the following actions:
- Rename — double-click the variable name to change it;
- Set default value — the value displayed for the variable used in interaction (optional, it’ll be used only if the value of the variable hasn’t been already changed);
- Remove variable — click x icon;
- Add variable — click +New variable.
You’ll be able to use variables with the following elements:
- Rectangle/Circle — text inside;
- Button — text inside;
- Text — text inside;
- Checkbox/Radio button — true or false;
- Input — user’s input;
- Text area — user’s input;
- Select list — selected option;
- State — active state;
- Video — URL;
- Image — URL.
Each of these elements has a specific type of content — for example, the text inside, the user’s input or an active state if the element has multiple states added.
Using variable with these elements connects their content with it. In the result, the actual content, such as text or the selected option, can be changed into the variable value by using interactions.
Additionally, the form elements such as checkboxes, radio buttons, inputs, select lists, and text areas allow you to dynamically set variable value as people interact with them in Preview mode.
Setting value for variables
To use the variable to collect data or control the state of the element, you need to set its value with the Set variable interaction.
First, choose the element which should trigger the interaction. Next, from the Actions drop-down choose Set variable and select the variable. If the variable you need is not included in the dropdown, click +New variable to add a new one.
Imagine you want to store the content of an element as the value of the variable, for example, a name provided in an input. To do that, choose the Content of element option and specify which element you want to use. This way once the interaction is triggered, the variable will collect the content provided in the element and you’ll be able to take actions based on this data in another part of the prototype.
You can also set a variable using the Value of another variable. This way you can interlink your variables and pass on the value.
Additionally, to set the specific value of the variable, choose Value in Set Variable as field and type in the value.
When you need to keep the current state of an element as a variable you can set value as Active State name.
You can also set an expression as a value of a variable. This could be especially useful when working on the user input. For example, you could use an expression substring(‘Input 1’,indexOf(‘Input 1’, “@”)+1, length(‘Input 1’)) to find a domain by the provided email and set the domain as a variable value.
Setting content from variables
Once you set the values for the variables, you will be able to use interactions to apply these values to the elements as their content. This option can be used, for example, to display previously stored user preferences, mark or clear a checkbox or even change the state of the element.
To do it, choose Set content option from the Actions drop-down and specify for which elements you want the variable content to be set. Next, click Value of variable and select the proper variable — once the interaction is triggered, the variable’s value will be set as the content of the chosen elements.
Additionally, you can use this interaction to specify the exact value to be set as the content of the element. Just choose the Value in Set Content as a field while adding the interaction.
Some of the most common variables use-cases are:
- Setting the content of one element using the Content of Another Element.
- Using Variables to transfer content between images. For example, with the Set variable interaction, you can save an image as a value and then, with the Set content interaction, paste this value (that image) into another image.
- Using the Active state name as content for another element.
- Using Expressions to set the content of a particular element. For instance, you could use an expression date(“DD-MM-YYYY”) to prefill date input with a default value.