 of the Variables lesson, we worked on a very simplistic demonstration of how variables work. Now let’s take this a step further. 

In order to follow along with this tutorial, download this sample pie and open it in Studio:

By the end of this tutorial, you’ll have learned:

The difference between “for this scene” and “for all scenes” when creating a variable

How to troubleshoot when things don’t work as you expect

Instead of just displaying the name when the user clicks Next, let’s Jump to the next scene, and give the user a proper greeting instead. Open the Pie file from your last saved progress.

Change the behavior of the Tap trigger. Remove the 

 Response (click it and press Delete on your keyboard) and then add a 

 and configure the Jump with whichever transition you prefer. Why not try the brand new and fantastic 

 scene in the scenes palette to open it for editing.

We want this screen to greet the user by name when the scene starts. Add a 

. Click the box underneath Formula to reveal to 

 into the Formula box. You can insert variables using the same techniques we explored in the last lesson.

Notice how ProtoPie has underlined the word “name” with a red zigzag? This is because ProtoPie can’t find a variable called “name” available to this scene. The red zigzag is a really helpful tool when working with variables and formulas. This is your first indication that something needs fixing.

As you’ll soon see, our problem is elsewhere. So for now click 

 to commit your formula. ProtoPie continues to highlight your Formula in amber to indicate there is a problem that needs fixing.

If you recall, in our first example we created a new variable and selected 

This meant that the variable we created is 

 available to the scene in which we created it. We’d like to be able to re-use our variable across multiple scenes. So we should have chosen 

 Scene in the Scenes panel to open it for editing. Then, click the 

 variable in the Variables panel in the bottom left. You’ll notice that there is no way to change the variable to a 

 variable. You can only choose this option when creating the variable. We need to delete our variable and recreate it.

 control to create a new variable. This time pick 

Once again rename the newly created variable to 

 Re-use the exact same name as you had before. Otherwise any Triggers and Responses that use the variable will be broken.

That should be all we need to do in order to make this work. Let’s preview our work again. Enter a name and tap 

 You should be greeted in the subsequent scene by name.

What if this isn’t working as above? Here are some steps you can take to try and pinpoint your issue.

 on Triggers and Responses as well as the 

 underline in your Formulas. These are clear indications that something needs fixing.

In this case, I’ve misspelt the name of my variable. ProtoPie underlines this because a variable named 

Verify your variable is set to be used for all scenes. The icon beside the variable name is solid for 

 variables will appear in the variables panel on all Scenes, while 

If you’re not seeing the value you expected for your variable, you can turn on its 

 When you hover over the variable in the variables palette, a 

 icon appears to its right. Click that and a green box will appear in your scene (click it again to turn it off). When you preview your Pie, this will show the current value of the variable.

You can drag the green debug box around your scene and position it somewhere convenient.

When you preview you should see that value of your variable update as you type.

If the variable is not updating, check the 

 Trigger in the first Scene to ensure it is set to the 

 Response to ensure it is configured as follows:

If all of the above is working, let’s switch to the 

 and make sure were are using our variable properly. You should have a 

If you’re using an animated transition between the two scenes, you may notice a very short delay before you see the greeting reflected in the second scene. If you do, then take a look at the 

. This will make your Responses under the Start Trigger fire when the transition animation starts instead of after it completes.

There are certain considerations you need to be aware of when using variables.

 You will get unexpected results if the type is incompatible with the information you are trying to store in it.

We also talked about the importance of setting whether the variable is 

 As you cannot change this later, it’s important to know ahead of time how you plan to use your variable. If in doubt choose “For All Scenes” as this gives you the most flexibility.

Variables cannot have spaces in their names.

 If you’ve got programming experience this may be obvious to you, but for the rest if us this is an important detail. ProtoPie will warn you if you try to give your variable an invalid name.

If you wish to use multiple words in your variable names to make then more descriptive, there are a couple of popular conventions you can use.

Separate multiple words with the underscore 

Capitalize the first letter of additional words. E.g., 

Now you know how to use variables to store a bit of information in your Pie. You’ve also learned how to use a variable across multiple scenes, and you’ve learned some valuable troubleshooting techniques to use when things don’t work as you expect.

#AskProtoPie: How to Use Predefined Variables ($touchX, $touchY and more)

 In this tutorial video, you'll learn about the built-in variables available in ProtoPie such as $touchX, $touchY and how you can use them in your prototypes.

#AskProtoPie: How to Use Variables Across Multiple Scenes

 In this tutorial video, learn how to store information in a variable in one scene, then retrieve it for use in another.

Design a Circular Slider Using Masks and Chain

 By controlling a knob, users are able to change the value on a circular slider and see changes in a corresponding percentage value.

How to Create a Looping Scroll Carousel for Desktop Web

 Learn how to create a looping scroll carousel for the desktop web using the scroll trigger, variables, and conditions.

Calculating Total Payable Amount in the Shopping Cart Using Component

 In this lesson, you will learn how to use the stepper component for calculating the total payable amount in an e-commerce app.

Learn how to use Variables together with Formulas in ProtoPie to upgrade your prototypes and make your interactions more realistic.

Lesson 8: Using Variables II

One of the most powerful features available in ProtoPie is your ability to use variables in your prototype. In this lesson, we’re going to talk all about variables — what they are, how to use them, and some particular considerations you need to be aware of when you want to use them.

What a variable is and why it’s called a “variable”

What types of data can be used with variables in ProtoPie

 is a programming term. It is just a way to store a small bit of information, say, a name, a number, a color value, etc. What you store in a variable can change — or 

 hence the name “variable” — depending on the needs of your prototype. For example, you might store the name “Leah” in a variable called “name” at the beginning of your experience, but later decide to instead store the name “Bern.” ProtoPie gives you the ability to change what is stored in a variable at any time.

When you create a variable in ProtoPie you need to specify what 

 of information the variable will contain. ProtoPie allows three types:

 - A sequence of alphanumeric characters, e.g., 

The type you choose is important. You can only set or update a 

 type variable with numeric information. Similarly, a 

 type can only be set or updated with text-based information. You can’t, for example, set the value 

 isn’t a number. So you need to be mindful of what kind of information you’d like to store in your variable when you create it.

 If you want to perform some math or do some counting, then a 

 type is most appropriate. For anything that is text-based — a name, an address, an email, etc. — use a 

 type variable. If you want to store color values, say for your design system color palette, use 

You can create as many variables as you’d like in your Pie. So if you need a variable to store a number 

 you need a variable to store some text, you can create separate variables for each.

Take a look in the example Pie. In the first scene we have a form that asks for the use to input their name. There’s also an empty text layer named 

 We’re going to create a variable to store whatever the user types into the 

 layer and when the user taps Next we will display the value of the variable in the 

 panel in the bottom left of Studio’s interface. It is most likely collapsed by default. Click it once to expand the panel.

 icon to create a new variable. You are presented with two options:

We’re going to demonstrate the difference between these two options in a moment.

. This name is not very meaningful for how we intend to use it. So let’s give it a more meaningful name. Since we’ll be using it to store the name of the user, let’s call the variable 

Now let’s use this variable. We’d like to detect what the user types into the 

 property as the property we’d like to watch for changes.

 response. We use the Assign response whenever we want to make an update — or 

 drop down, choose the variable you just created called 

Whenever you assign a new value to a variable, you need to do so using a Formula. Whatever you specify in the Formula box is what gets 

 to the variable. If you don’t know what a Formula is, be sure to check out the previous lesson 

 icon and select the layer named Your name. Type the 

 character to list all of the properties of the layer. Scroll down and choose 

Our last step in this process is to display the value of our 

Click the box below Formula to reveal the 

 icon and expand the Formula entry box. Type 

Let’s preview this. Type your name into the box, and tap 

What happened? Did you nee your name appear below the “Next” button or did you see 

In my instructions above, I intentionally skipped a step as I wanted to demonstrate what happens when your variable’s type is set incorrectly. Let’s fix this problem.

Now direct your attention to the top-right. This is where you can set the type for your variable.

 when you create a new variable. When we enter our name into the 

 text box, we are entering text, which is not compatible with the Number type. Change the type to 

In this control you can also set the initial value. For our purposes, we don’t want an initial value, so let’s leave it empty. But in your future work, there 

 reasons why you want your variable to have a specific value when your experience starts. This box is where you’d set it.

Our experience should now be working. Let's take this a step further in the 

Lesson 8: Using Variables I

, you learned how to use Formulas to join text together. Now we're going to delve deeper and do some more complex calculations.

To follow along with this tutorial, download this example Pie and open it in Studio.

By the end of this tutorial you'll have learned:

How to create a Formula to perform mathematical calculations

. This Scene has two input fields and four buttons. What we'd like is for the user to input a number in each field, and then select the calculation they'd like to perform — in our case, Addition, Subtraction, Multiplication or Division. We're going to have our Pie make the desired calculation and display the result below the buttons.

Since we are once again working with input that we don't yet know, we'll want to use a Formula. Choose 

Click the box below it and you'll see our familiar 

 icon. Click it to expand the Formula input box.

 icon that appears near the right end of the Formula box and choose the 

 character to reveal all of the properties for the 

 to tell ProtoPie you want to do some addition. Click the 

Let's Preview this. Enter a number in both input fields and click the 

That... didn't work, did it? Instead of adding or two numbers and giving us the sum, ProtoPie instead joined the two numbers together. In my example, 5 + 6 gave me 56, not 11!

 character in your Formula was used to tell ProtoPie you'd like to join some text together. Confusingly, it is 

 used when you'd like to add two numbers arithmetically. ProtoPie is intelligently trying to guess what type of operation you'd like to do, but in this case ProtoPie got it wrong. As the name might suggest, ProtoPie is treating the 

 fields as text, not as numbers, and therefore assumes you're trying to join two pieces of text together.

We can fix this by explicitly telling ProtoPie how to treat the 

 properties. We can use something called a 

 to do this. A Function is a fancy name for a predefined set of instructions. We'd like one that Tells ProtoPie that the 

 properties should be treated as numbers.

 icon at the right end of the Formula entry box to open the documentation for Formulas in your browser.

These are all of the Functions available in ProtoPie. When you're done this tutorial, take some time to explore all of the available Functions you can use in your Formulas.

One or more parameters you supply to the function as input, enclosed in brackets (e.g., 

). What this means is that this function takes in a single parameter, and that parameter must be in text format. If a function takes multiple parameters, they are separated by a comma (e.g., 

 take two parameters, a number and some text).

What type of information the function will give you back after it executes (e.g. 

Since we have text and we'd like to convert it to a number, this function does exactly what we need! It takes in some text, and converts it to a number.

Let's Preview this again, and see it it fixed our problem.

All we need to do now is make similar interactions for our remaining buttons. You could go the long way and repeat all of the above steps again, but a faster way is to duplicate the work we've already done, and just modify it for the specific action.

 trigger in order select it. Right-click and choose 

Before we move on, we now have two Tap Triggers that are named the same thing. Let's rename then so that they are easier to understand. Double click the Trigger's label to rename the first one to 

Let's modify our duplicated Trigger to work with the Subtract button and perform a subtraction action.

 Trigger to select it, and re-associate it with the 

Click the Text Response underneath it, and modify the formula to subtract instead of add. Change the 

Do this two more times for the multiplication and division actions. By now you've likely realized that there is no multiply character on your keyboard, nor is there a divide character. Programmers solved this a long time ago by using 

 for division. Your Formulas should look like these respectively:

If you Preview this, you should be able to execute all four actions against your numbers. And if you change your numbers to something else, your math will still work. That's the power of using Formulas!

In our formulas above we didn't use spaces around our operators (

). As your formulas get more complicated, this can make them harder to read. It's perfectly fine to rewrite a formula that looks like this:

Both will do exactly the same thing, but the second one is a little easier to read. In fact you can add white space in many other places. Nothing wrong with this, for example:

ProtoPie is even smart enough to figure out what you mean by this:

There are a few places where white space 

 matter, though. We already covered the difference between 

ProtoPie will not like this. Variable names can't have spaces in them. ProtoPie interprets this thinking that you are trying to use three different variables, none of which can be found. ProtoPie tries to help you by underlining the problem areas with a red zig-zag. Whenever you run into problems with your Formulas, checking for the red zig-zag underline is a great place to start.

You should now have a good grasp on how you can use formulas to make your Pies incredibly lifelike. You do not need to stick to static values, as the ability to use Formulas can be found almost anywhere in ProtoPie — just look for the 

 icon. Take some time to explore all the ways you can use Formulas to take your experiences to the next level!

Create an Expanding Image Overlay Using Long Press and Formulas

 This tutorial will teach you how to create expanding image previews using the relevant ProtoPie formulas and triggers.

Prototype an Input Stepper with ProtoPie's Formula Feature

 Learn how to easily prototype an input stepper with ProtoPie. We will walkthrough all of the elements, formulas, and conditions to make it happen.

The Easiest Way to Create a Sticky Header that Responds to Scrolling

 Ever wanted to show or hide your app's header based on the direction of scrolling? Here's how to do so, using a simple condition and formula.

Learn how to use Formulas in ProtoPie to add more dynamic interactions into your prototypes.

Lesson 7: Formula Basics II

Previously, I introduced you to one of ProtoPie's advanced features — Formulas. Formulas allow you to work with information that can change at any given time or is initially unknown. If you recall, we used a formula to build a search query that we then used to execute a Google image search. Most of the URL was known ahead of time, but the individual search term was something the we asked the user to type in. In order to accommodate for this unknown piece of information, we needed to use a formula in order to build our URL in real-time, 

In today's lesson, we'll start with some basic examples.

How to create a Formula using ProtoPie's built-in variables

For many interactions, using static values works just fine. If I tap this button, I jump to Scene 2. If I Fling an object upward, it moves to some point off the top of the screen. Quite often, however, we need our Pie to respond to various input that will not be known until it occurs, and the specifics of that particular inout can be different every time. For example, if I tap the screen on a random location, the coordinates of where I tapped will likely be different if I tap again.

Our first example will deal with this exact scenario.

Open the sample Pie you downloaded above. There are three scenes in the Pie. If you're not already on 

 list in the upper-left portion of Studio.

There are two Layers in this Scene: a black background shape and a yellow star. When a user taps the screen, we'd like to capture the coordinates and then move the star to the exact point the user touched. We'll use the background layer to receive the touch event as it covers the entire screen width and height.

In previous examples of the Move Response, we've entered explicit pixel coordinates of where an object is to move. In this case, we don't yet know where the user has touched the screen. We need to capture the touch X and Y coordinates as they happen.

ProtoPie has a number of built-in mechanisms to capture the details of events such as the touch point. ProtoPie calls these 

. If you're not familiar with the term variable, not to worry. We'll be covering Variables in detail in the next lesson. For now all you need to know is that a variable is used to store a bit of information. For our purposes, we'll be using two Predefined Variables: 

, which store the X and Y coordinates of the most recent touch event.

 Response. In the Properties panel, click in the box above 

 icon appear on the right side of the box.

 This allows us to input a formula. We'll want to use a formula when we're working with information that can change.

 ProtoPie will color this text green to indicate that it recognizes you're using a variable.

 button once you are done inputing your formula. If you discover that your formula has disappeared after you entered it, it's likely because you forgot this step.

Do the same for the Y position, but this time use 

Preview this. Click anywhere in the Scene, and the Star should immediately move to the location you clicked.

 you can easily find them by clicking the little question mark icon visible at the right end of the formula entry box.

This will open a browser window to the documentation for 

In our previous example, we just used single bits of information to create a formula: the Predefined Variables $touchX and $touchY. However we can use Formulas to put pieces of information together.

. This Pie has a bit of instructional text, an input field, and a blank text field. We'd like the user to enter their name and when they press Return, have ProtoPie greet them with the name they entered.

Let's have the input field focused at the start of the Scene. Add a 

Since we don't know the user's name until they have entered it, we'll need to use a Formula to dynamically construct the greeting text. Text Responses allow us to use a formula instead of explicit text. In the drop-down list under 

The box underneath the drop down changes, and if you click it, you'll see the familiar 

We're going to construct a greeting that reads 

, but we'll replace NAME with whatever the user has typed into the Name field. There are two parts to our greeting:

We're going to construct our greeting in two parts.

Type the following exactly as you see it, including the quotation marks: 

When you enclose text in quotation marks like we did here, you're telling ProtoPie to output 

 what is included inside the quotation marks. In programming, this is known as a 

. We speak English, so we'll call it static text. ProtoPie colors static text in this orangey-reddish color.

 character. This tells ProtoPie that you'd like to join some more text to your static text.

We'd like to include whatever has been typed in to the Name Input Layer. ProtoPie automatically stores the entered text as a property of the Layer. We'd like to access this property in our formula. Click the 

ProtoPie School

Lesson 8: Using Variables II

Lesson 8: Using Variables I

Lesson 7: Formula Basics II

Lesson 7: Formula Basics I

Lesson 6: Typing Interaction

Lesson 5: Camera Interaction

Lesson 4: Voice Interaction

Lesson 3: Creating and Sharing Interaction Libraries with Designers

Lesson 2: Using Interaction Recordings to Collaborate with Developers

Lesson 1: Quick Start Using ProtoPie in 3 Steps