Variables

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.

Creating Variables

Click Variables in the left panel and +New variable. Next, name the variable and confirm with "Enter" .

Naming

While naming your variables, you need to follow some rules. All variable names should begin with a letter, be alphanumeric (have alphabetic and numeric characters), have no spaces and be no longer than 25 characters. 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 best to use 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;

Managing Variables

You can manage variables in the Variables panel in the toolbar where you can:

• Set a default value - the value displayed for the variable used in interactions (optional, it’ll be used only if the value of the variable hasn’t been already changed)
• Remove a variable - click the x icon
• Add a variable — click +New variable

Using Variables

You can 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 a user’s input, or an active state if the element has multiple states.

Using variables with these elements connects their content with the variable. As a result, the original content, such as text or the selected option, can be changed into the variable value by means of Interactions.

Additionally, form elements such as checkboxes, radio buttons, inputs, select lists, and text areas allow you to dynamically set variable values when, i.e. someone tests and interacts with your prototype in Preview mode.

Setting Values for Variables

To use a 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 Content of element 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.

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 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 Value in the Set Content as 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.