Learn how to prototype web and mobile apps

Data driven prototypes and variables

Share data between different screens in your data driven prototypes with the use of variables – letting you store any kind of information during simulation.

They are basically pieces of data that can be written and read through the events’ system. A Variable value can be interpreted as a string, number, date, collection of Data Master’s records or anything depending on the calculations applied to it. Its lifespan is that of the simulation of the prototype.

The variable is another element than can be used in the conditions: you can actually drag variables to the expression builder.

Let’s see how they work with an example. We will create a log in form that, once completed, will take you to a welcome screen that displays the name/email the user entered in the Log in page.

1) In a new web prototype, drag a Sign in widget from the iPad iOS7 library, and a Button. If you prefer, you can drag 2 Text widgets, 2 Input text fields and a Button onto the canvas and draw the log in form.

Login In Form in UI prototypes


To modify the name or default value of an existing Variable, double-click on it on the Variables tab or right-click on it and select ‘Edit’. Modify the parameters in the dialog and click OK. To delete a Variable, right-click on it on the Variables tab and select ‘Delete’.

2) Go to the Variables tab and create a new variable using the ‘+’ icon. A dialog will appear: introduce a name for the Variable in the input ‘Name’. You can opt to introduce a default value in the input ‘Default Value’. This will be the value the Variable will take when starting the prototype’s simulation. Click OK to create the Variable.

Create a new variable in your UI prototype

3) Now, you have two ways to store a value in a variable. Drag the first Input text field from the registration form to the variable you’ve just created. An ‘On page unload’ + ‘Set Value’ event will appear in the Events tab. If you’re using a pre-built Sign in widget, remember to Ungroup it before dragging the Input text field.

Store a value in a variable in your UI prototype

4) Alternatively, you can create a ‘Set Value’ event. Go to the Events tab, push the ‘add event’ button, add an ‘On page unload’ + ‘Set Value’ event. Then select the variable and push the ‘calculated’ button: drag the Input text field to the expression builder and close both dialogs.

Store value in a variable with a Set Value event

With this action, whatever your user writes will be stored in the variable.

5) Open another screen and insert two Text widgets. In the first, type “Welcome”. Drag the variable to the second Text widget.

In this way, when the screen loads, the variable text will be displayed.

Variables in data-driven UI prototypes

6) Finally, go to the first screen and drag the Button to the second screen in the screens tab, in order to create a link.

That’s it! Click on the “Simulate” button to verify how the text moves between screens.

Next tutorial > Design the navigation flow of your interactive prototypes with the help of stored variables