Protopie Dropdown Options

One of the most powerful features available in ProtoPie is the ability to use variables in your prototype. In this article, we will explore the concept of variables, how to use them effectively, and important considerations when working with them.

What You’ll Need

To follow along with this tutorial, you will need to download the sample pie provided and open it in ProtoPie Studio.

What You’ll Learn

By the end of this tutorial, you will have learned:

  • What a variable is and why it’s called a “variable”
  • The different types of data that can be used with variables in ProtoPie

Time to complete: ≤10 minutes

What is a Variable?

In programming, a variable is a way to store information such as names, numbers, or color values. The value stored in a variable can change based on the requirements 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 change it to “Bern.” ProtoPie allows you to modify the value of a variable at any time.

Variable Types

When creating a variable in ProtoPie, you need to specify its type. ProtoPie supports three types of variables:

  • Number: Stores whole numbers or decimals, e.g., 25, -403, 3.14
  • Text: Stores sequences of alphanumeric characters, e.g., “Jeff,” “40 Bay Street,” “auston@mapleleafs.com”
  • Color: Stores hexadecimal color values, e.g., #FF0000

Choosing the appropriate type is crucial. A Number variable can only store numeric information, a Text variable can only store text-based information, and a Color variable is specifically for color values. It’s essential to consider the kind of information you want to store when creating a variable.

💡 Pro-tip: Use a Number type variable for math or counting, a Text type variable for text-based information such as names or addresses, and a Color type variable for color values in your design system.

You can create multiple variables in your prototype. If you need to store both numbers and text, you can create separate variables for each.

A Simple Example

Let’s take a look at an example. In the first scene of our sample pie, we have a form that asks the user to input their name. There’s an empty text layer called “Simple greeting” where we want to display the user’s name when they tap the “Next” button.

To achieve this:

  1. Locate the Variables panel in ProtoPie Studio (bottom left) and expand it if necessary.
  2. Click the + icon to create a new variable. You have two options: For All Scenes or For This Scene.
  3. Rename the variable from the default “variable1” to a more meaningful name like “name.”
  4. Create a Detect trigger for the “Your name” text layer.
  5. Select the Text property and add an Assign response.
  6. Choose the “name” variable and specify the value using a Formula. In the Formula box, select the “Your name” layer and choose the Text property.
  7. Create a Tap trigger for the “Next” button and add a Text response to the “Simple greeting” layer.
  8. In the Formula box, enter “name” to display the value of the “name” variable.

Preview the prototype, enter your name in the text box, and tap “Next.” You should see your name displayed in the “Simple greeting” layer.

If you encounter any issues, make sure to check the variable’s type in the Variables panel. For text-based information like names, the variable type should be set to Text.

In the next lesson, we will further explore the use of variables in ProtoPie. Stay tuned!

Protopie Dropdown Options