Variables

With Variables, you can take your wireframes to the next level and build lifelike prototypes.

You can use variables to store and transfer information like text, images, or data across screens in your prototype. For example, you can take a name typed in an Input Text Field and show that same name in a Text element on another screen.
Name entered into the input field transferred to the next screen

Create a variable

Look to the Variables palette and click the ‘+’ button to create a new variable in your prototype. If you don’t see the Variables palette, make sure it’s checked to be visible in the Window menu.
When you create a new variable, you’ll be able to define its default value. Most often, you’ll want to leave this blank.
New variable pop-up

Define the value of a variable

To change the value of a variable during simulation, you’ll need to use events. You can do so in two ways:

  • Drag and drop: Drag the element you’d like to give the value to the variable to the Variable’s palette. As an example, drag an Input Text Field to the Variables palette.
    Input field drag and drop to the variable
    This creates an On Page Unload + Set Value event automatically, which transfers whatever’s in the input text field to the variable when you go to another screen.
  • The Events palette: You can also manually create the events to give a variable a value with the Events palette. This is useful for when you’ll want to define a variable’s value in another way, like after focusing out of an input text field or clicking on a button.
    1. Select the element you’d like to give the variable a value. As an example, use an Input Text Field.
    2. Go to the Events palette and click ‘Add event’.Add event in the events palette
    3. You’ll see a dropdown labeled ‘Choose Trigger’. Click on that and pick a trigger which will start the event. As an example, pick the On Focus Out trigger.
    4. Select Set Value to an element from the ‘Choose Action’ dropdown.
    5. You’ll see a preview of the Canvas appear next with two radio buttons – ‘Elements’ and ‘Variables’. Click on the ‘Variables’ radio button and choose a variable you previously created from the list.Variable selected in events dialog
    6. Below, you can find where you’ll define the value to give the variable. Click on the ‘Calculated’ radio button and then tap the ‘Add expression’ text link.Add expression text link hovered
    7. You’ll now see the Value Expression builder, which is where you can define what value you’ll give to the variable. Drag and drop the input text field from the Canvas preview to the open space in the expression that reads “Click to edit or drag & drop a component”.Input text field dragged to expression
    8. Click ‘OK’ to finish building the expression and the event.

This event transfers whatever’s entered in the input text field over to the variable when you click out of the input text field.

Give an element the value of a variable

Now that you’ve defined a value for the variable, you can move the variable’s value to an element on another screen.

Go to another screen in your prototype and select the element you’d like to display the variable’s value. As an example, you can select a Text T element you’ve added on the Canvas.

You can give that text element the variable’s value in two ways:

  • Drag and drop: drag the variable from the Variable’s palette to the text element on the Canvas.Variable dragged to text element This will create an On Page Load + Set Value event automatically, which transfers whatever’s stored in the variable to the text element on this screen.
  • The Events Palette: you may want an element to display the variable’s value after doing something else on the screen first, like tapping on some text.
    1. Select the element you’d like to show the variable’s value. As an example, select a text element.
    2. Go to the Events palette and click ‘Add event’
    3. Select an On Click trigger and a Set Value action for the event.
    4. You’ll see a Canvas preview where you can select the text element as the target of the action.
    5. Below, click on the ‘Calculated’ radio button and the ‘Add expression’ text link to open the Value Expression builder.Calculated value for input field
    6. Click to the ‘Variables’ tab in the Canvas preview and drag the variable from the list to the open space in the expression.Variables from tab in the expression
    7. Click ‘OK’ to finish building the expression and the event.

This event copies the variable’s value and paste it onto the text element when you click on it during simulation.

You can create so many different types of prototypes with variables – continue on to the next article to see more examples of how to use them to share information between screens, define conditional content, and build automatic countdown timers.