Configuring Variables and Calculating Prices

Before jumping into the process of creating the pie, please make sure you have accessed all the necessary design assets we’ve prepared for you:

Access the Starting Pie File with Instructions.

Click the file link and open it in ProtoPie Studio.

. You’ll be using them a lot throughout your prototyping journey to add realism and depth.

Select the group layer you wish to scroll.

 Group content within scroll containers for smoother interactions.

Next, let’s connect user inputs (Triggers) to visual behaviors (Responses).


Example:  Coffee Size Selector (Curto, Medium, Venti)

 response, setting Curto border opacity to 

Add two additional Border responses to set Medium and Venti borders to 

 Resetting border opacity ensures clarity in selections.

Now let’s add Toggle interactions like toppings selection effectively with Conditions and Logic.


 Conditions and Variables are key for toggles.

To create a true high-fidelity prototype, you’ll want the pie to have more than mere visual responses. Most prototypes require some logic to put 2 and 2 together!

To achieve that in ProtoPie, you can easily manage selections using Variables and Dynamic Calculations.


Add scene-specific variables: CURTO, MEDIUM, VENTI, WhippedCream, Ice, total_price.

Enable debug mode to verify variable values.

(CURTO * 4.59 + MEDIUM * 5.39 + VENTI * 6.79) + (WhippedCream * 3.06) + (Ice * 2.00)

Detect changes in total_price to highlight selections (e.g., color #D8FF99).

 Use debug controls to verify your logic.

Share your creative prototypes and claim your 1

 Submit via our survey or use the hashtag 

Building Interaction Design Systems with Conditions & Variables

Make your prototypes stand out by mastering our Simple Pies Series to quickly learn essential prototyping skills.

Learn Fast with our Simple Pies Series: Build Interactive Prototypes Easily

Welcome to the second installment of ProtoPie School, where we quickly get you up and running with ProtoPie. This article will cover a great ProtoPie feature called 

ProtoPie has made this feature more accessible to designers by allowing up to one interaction recording for Basic and Free plan users. Once you subscribe to the Pro or Enterprise plan, you can record and share unlimited recordings with your team.

You can use any Pie you like, but if you want to follow along with me, you can use this one:

By the end of this tutorial, you'll know how to:

Share the interaction recording with your team

The ProtoPie Handoff feature bridges the gap between design and development, ensuring your interactions are faithfully translated into code.

 that showcases user flows, element behaviors, and interactions in your prototype. An interaction recording goes beyond a simple handoff—it's a fully interactive specification, complete with a scrubbable timeline, easing parameters, start and end properties, and precise timings. This eliminates guesswork, giving developers a clear, frame-by-frame guide to your intended design.

Step 1: Upload your Pie to ProtoPie Cloud

 icon in the upper right corner of Studio's interface.

 to save your Pie in ProtoPie Cloud. The interaction recording will be saved in the same place.

Once the upload is complete, you will be taken to the Pie cloud page.

 button on the right-top side of the cloud page.

Interact with your Pie showcasing the specific interactions you'd like to hand off to your engineering team. When you're done, click the 

Your interaction recording will be saved as ‘New Recording’ by default. You can rename it from the 

That's it! In just a few seconds, you've created your first interaction recording.

Step 3: Review your interaction recording

After you stop recording, you'll be able to review your recording. An 

 consists of a timeline of everything you recorded and a visual preview of your Pie that updates in sync with the timeline.

Your interactions on the timeline are grouped into Triggers and Responses, just the same way you see them in Studio.

 Drag the red upside-down teardrop control — this is the play head — right and left. This will allow you to scrub through the interaction you just recorded frame-by-frame.

Play the animation back at different speeds:

 You can make the animation playback faster or slower. Click the playback speed icon and choose a playback speed. Then click the 

 icon to start the animation — it will change to a 

 icon allowing you to stop playback. Playback will resume from the playhead's current position. You can reposition the playhead at any time while the interaction is playing, either by dragging it or clicking in the top bar of the timeline.

 You can make the timeline taller or shorter by dragging the division between the preview and the timeline.

Inspect the animation of a particular Response:

 Click on any Response in the timeline, and an inspector window pops up on the upper right side of the screen. These show the exact values of properties at the start and end points of your animation, the animation curve easing parameters, as well as the "current" value of the particular property you are inspecting. The current value updates in real time, in sync with the playhead.

 The Layers stack is available to the left of the preview. If you click on any layer, the inspector window on the right updates to show its properties in real time, in sync with the play head.

Lastly, you'll want to share the interaction recording with your team. You have two ways to do this:

. Anyone with this link can access all interaction recordings created for this Pie by clicking the 

 button. To share the cloud Pie link, click the purple 

 button, configure sharing options, and then click 

Share a direct link to a specific recording

. Go to the Pie Cloud page, click the Handoff button, and choose the interaction recording you want to share from the list. Click on it to open the recording page. You can then copy the link from the address bar or by clicking the "

Tips about ProtoPie interaction recordings

Your interaction recordings are protected by the same access settings as the Pie. You can modify these settings by clicking the 

When you make an interaction recording, the recording does not update to reflect any new changes to the Pie you upload to ProtoPie Cloud. It represents that particular version of your Pie at the point you recorded it. So, if the changes you have made affect a particular recording, you'll want to record a new one and share that with anyone involved. Your old one won't be removed automatically — it will appear listed alongside any new one you create. So you might want to get into a habit of including the date you recorded it in the name of the recording, something like this:

Of course, you don't need to keep the old one. You can always delete it if it helps keep things better organized. But be aware: once you delete a recording, it's gone for good. There's no way to recover it.

In just a few minutes, you've learned to use ProtoPie's Handoff feature to create fully interactive specifications for your prototypes to  share with your development team.

Learn how to use ProtoPie's Handoff feature for handing over interaction specifications to your developers.

Lesson 2: How to Use the Handoff Feature

Form field validation is at the core of any app or web UX design. It prevents user errors and guides them through a seamless experience like a helpful companion when completing online forms. During the design stage, creating prototypes specifically for form validation enables designers to gather valuable feedback on the user flow, ensure the correct information is entered, and thus, economize time and resources.

To do this, you will need a tool that perfectly harnesses the power of applying conditional logic to your designs.  This article will guide you on prototyping input fields with 

 and what's more? You can easily test your prototype using real text entry on your own device's native keyboard.

How to prototype required field validation in ProtoPie

How to prototype range checking in ProtoPie

How to prototype consistency checking in ProtoPie

How to prototype data type validation in ProtoPie

How to prototype pattern matching in ProtoPie

Design better user experiences with ProtoPie

To actively participate in this tutorial, download the sample 

 below and toggle between scenes. We recommend starting with the blank project first — have some fun practicing, and then peek at the complete one to see how you're doing.  Enjoy prototyping!

 is a form validation technique that ensures an input field must be filled out before the form can be submitted. It’s a way to ensure that necessary data is provided by the user. This validation is typically indicated by a red asterisk 

 and is a common method for indicating a required field.

It’s used in various input types such as text, search, URL, tel, email, password, date pickers, number, checkbox, radio, and file. This validation helps  improve the user experience by preventing the submission of incomplete forms. ProtoPie's 

Now, let's explore an example of a text field requesting essential first names. In the initial project, we've readied some designs and interactions for you:

In terms of design, there's an error message that appears on the screen. This will be animated later to show or hide based on users' input.

As for the interactions, we've set up the default and focus states for the "Text Field" using the "

Let’s start by hiding the error message. You can achieve this by setting its 

Once you've typed something, click outside the text field or press the Enter key on your keyboard. At this point, we'll check if the text field is still empty. If the text field is empty, we display an error state for the text field along with an error message below.

1. Let’s add a condition under the “Focus Out” trigger. For the condition, let’s set it to be 

 This condition checks if the text field is empty.

2. When the condition is satisfied, it's time to animate the error state.

Add an "Opacity" response to the "Error Message" layer, setting its opacity to 100.

Additionally, include a "Border" response for the "Text Field" layer, assigning a red color to its border.

3. Next up, let's introduce additional interactions so that when our text field picks up content, it will dismiss the error message. To achieve this, we'll utilize the “Detect” trigger. A 

 trigger consistently monitors any changes in our target object. 

Add a "Detect" trigger to the "Text Field" layer, and let's detect its "Text" property. (For an input layer, the Text property signifies the content inside the field)

Next, create a condition to verify if the text field is filled. Use the condition 

Under this condition, make the error message disappear by applying an “Opacity” response to it and setting it to 0.

 is a type of input validation that verifies whether the input data falls within a predefined range. Here are some examples of range checking:

: For example, a secondary school student is likely to be aged between 11 and 16. The computer can be programmed only to accept numbers between 11 and 16.

: Latitude and longitude are commonly used in geographic data. A latitude value should be between -90 and 90, while a longitude value must be between -180 and 180. Any values out of this range are invalid.

: Minimum and maximum length check for strings. For instance, check if a password is between 8 and 16 characters long.

From the example project, let’s navigate to the scene called “Range Checking”.

Let's begin by looking at an example where secondary school students are required to input their age, ensuring that it falls within the range of 11 to 16 years.

This interaction builds upon our first example, ensuring the requirement for user input. The pre-configured interactions for this scenario can be found within the "Age" group in the interaction panel.

Let’s make ProtoPie validate the input value when users focus out from this text field.

1. Add one more condition under the “Focus Out” trigger. Configure the condition as 

 to handle cases where users enter an age smaller than 11. Implement the following responses:

Add an "Opacity" response to the "Error Message - Age" layer, setting its opacity to 100.

Include a "Border" response for the "Text Field - Age" layer, assigning a red color to its border.

2. Create another condition to check for ages greater than 16 using 

. Implement the same interactions as the previous condition by copying and pasting them. This ensures that an error message appears when users enter an age greater than 16.

Let's proceed to the second example, where we validate the length of the password. The requirement is for the password to be between 8 to 16 characters long.

You can find some pre-made interactions in the “Password” group in the interaction panel.

Now let’s configure the error states for the “Focus Out”.

1. Our first condition is used to check if the password is too short, so we use 

 in ProtoPie that checks the length of a string.

2. Our second condition is to check if the password is too long: 

length(`Text Field - Password`.text) > 16

 is a type of data validation that ensures the data entered is logically consistent. It checks for internal conflicts in the data, specifically, whether the rules written for data have contradictory statements, for example:

: a field asking for a re-entered password might check if it matches the previously entered password.

: Check if the delivery date is after the shipping date for a parcel. Similarly, a package’s shipping date should not be before the order date.

Let's consider an example where users are required to re-enter their password for confirmation.

From our example project, navigate to the scene called “Consistency Checking”. We have already prepared the interactions for the password field. Now let’s focus on the “Confirm Password” field.

1. In the “Confirm Password” group in the interaction panel, find the “

Text of Text Field - Confirm Password ≠ Text of Text Field - Password

. This condition signifies that the two passwords don't match.

3. Under this condition, we can now configure an error state by making the border of the text field red and displaying an error message.

 is a form of input validation that ensures the data entered into a field matches the expected data type. For example,

: An age field would typically only allow numbers. For example, when filling out a form online, the age field would reject any non-numeric entries.

: When entering a credit card number, only numbers are allowed. Any letters or special characters would be rejected.

: In some applications, the city name field would only allow letters. For instance, it would reject entries like “Toronto123” and only accept alphabetic entries like “Toronto”.

Let's examine a practical scenario where the input field specifically requests an integer quantity.

This example is located in the "Data Type Validation" scene within our sample project.

Under the "Mouse Out" trigger, create a condition to validate users' input.

In this condition, we need to strictly reject any input that’s not a number. Use the following condition: 

 is used to extract the first substring that matches a specified regular expression pattern.

: Refers to the text content of the "Text Field" input.

: This is a regular expression pattern. Here's what it means:

: Specifies that the preceding pattern (in this case, 

) should occur one or more times consecutively.

) extracts the first sub-string that consists of numeric digits from the entered text. For instance:

The condition checks whether this extracted numeric substring does not match the original text in the "Text Field." If they don't match, it implies that non-numeric characters are present in the input.

Under this condition, we can set up an error state for the specified condition by adjusting the text field's border color to red and presenting an error message.

Master input fields and form validation using real text entry in ProtoPie.

Rapid Prototyping Form Fields with Conditional Logic

Something you'll want to do quite often when building a prototype is to allow a user to type input into a text field. 

makes it really easy to do this. In this tutorial, you'll see just how easy it is to allow your users to type in some text and to do something with it.

How to prototype an interactive text field

Learn more about interactive text input fields

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

We'll also preview the experience as we go directly on our device. In order to do this, you'll need to install the 

 app on your phone or tablet. ProtoPie Player is a powerful and free app that allows you or anyone you share your Pie with to run your prototype on their device as if it were a native mobile experience.

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

Add a text input box to your Pie (prototype)

React to your user pressing the keyboard's return key to signify they are done typing

Build and call a web URL - this will be sneak preview of an advanced ProtoPie feature called Formulas, which we'll be covering in more detail in the next article.

How to prototype interactive text fields 

To learn how to create dynamic text input fields, check out the video tutorial or follow the detailed step-by-step guide below.

Open the example Pie file. It has a single background image layer that looks like Google's image search UI. 

 menu item in the top-left set of icons. Click it and choose 

Drag to draw your input field anywhere you like on stage. 

We'd like the input box to be perfectly sized inside the pill shape in the background.

Let's rename the text box to be something more meaningful. Double-click the layer, and name it 

 It will be important later that this is named exactly 

 with a lower case s or anything other than 

We'd like the input box to look seamless against the background. Remove the grey background color from the text box by unchecking the box beside 

Currently, the text box has the phrase "placeholder" as its placeholder text. You can change it in the properties panel in the 

 You can change the color and opacity of the placeholder text here as well.

There are more customization options at out disposal. For example, you can choose what kind of keyboard the will appear when you focus the field, and whether the input box should be a password field.

 will tailor the keyboard to the particular type of information you'd like to capture. For example, if you choose 

, a numeric keypad will appear when you focus the field. Choosing either of the password options will mask the entered text instead of displaying the characters as typed.

In our case we're capturing a search term. So let's choose 

The second option we have under Keyboard Options is what the label 

Lastly if you're designing for iOS, you can choose whether you'd like the light or the dark theme.  

In the Studio Preview, click on the text box. You should see the on-screen keyboard appear. Your first instinct might be to click on the keyboard keys in order to type some input. If you try it, you'll see that doesn't work. That just causes the text box to lose focus, hiding the keyboard.

When you preview text entry in Studio on your desktop computer, you need to type with your physical keyboard. The on-screen keyboard is just a placeholder image in Studio.

Let's instead run this on our device so we can type on the keyboard directly. We're going to use the ProtoPie Player app on our device to do so. If you haven't done so already, install ProtoPie Player on your device using the links you'll find above in the 

 in the set of top-right icons. This will reveal a QR code. Leave this visible, as we're going to need it in a moment.

On your device, start the ProtoPie Player app. You'll be greeted with this screen:

Click Scan QR Code and scan the code you revealed above. Your Pie should now start on your device.

For this to work your device needs to either be on the same WiFi as the computer running Studio, or your device needs to be connected to the computer running Studio with a USB cable. If your Pie won't start on your device, double check that your phone is connected in one of these two ways.

Tap on the text box on your device. A real keyboard will be displayed that you can type on. You'll either see a native iOS or Android keyboard depending on the device you're using.

We'd like our experience to take action once the user has tapped the Search key in the keyboard, signifying they are done typing (Remember in step 2 we changed the label for the Return key to be 

 Trigger to take action when this happens.

 Trigger. In the properties panel, configure it to be associated with the 

Any Responses you add underneath this Trigger will fire when the user taps the Return (i.e., 

This next little bit might seem cryptic. We're going to use one of ProtoPie's advanced features called 

 in order to build a URL and send it to a browser. Don't worry if this looks completely foreign to you. We're going to go into much more detail on Formulas in the next article. For now, just follow along step-by-step.

 Response. A Link Response can be used to open a web browser tab to a specific URL.

We'd like to build a dynamic URL using the input the user has typed in order to execute a Google Image Search. Since we don't know what the user has typed until the press Return, we need to build it on the fly. For this we will use a Formula. In the list under Link, choose 

When you click the box below this drop down, you will see a little 

 icon. This means you can create a formula for the link's URL!

 icon. The field will expand, giving you more space to type.

Type exactly (including the quotations marks) or copy and paste the following text into the formula field:

Before we move on, I'll offer a bit more of an explanation as to what we just did. Whenever you type into an input box, the value of whatever you typed is stored in a property of that layer called 

. We created the formula by joining together three bits of text:

a bit of known text — this part is always the same: 

another bit of known text — again, always the same: 

 Remember in the first step where we named the input layer exactly 

 layer directly by name. Layer names are 

Again, don't worry if this looks complicated. We're going to cover Formulas in more depth in the next article. The important takeaway here is that whatever your user has typed into the input box is stored as a property of that layer and available for use in your Pie.

To update your device with the latest changes, click 

ProtoPie School

Learn Fast with our Simple Pies Series: Build Interactive Prototypes Easily

Lesson 2: How to Use the Handoff Feature

Rapid Prototyping Form Fields with Conditional Logic

Lesson 6: Interactive Text Fields

Lesson 5: How to Prototype a Camera Interaction

Lesson 8: Using Variables II

Lesson 8: Using Variables I

Lesson 7: Formula Basics II

Lesson 7: Formula Basics I

Lesson 4: Voice Interaction

Lesson 3: Creating and Sharing Interaction Libraries with Designers

Lesson 1: Quick Start Using ProtoPie in 3 Steps