[LIVE] Bringing Multi-Device Fintech Apps to Life. Register for Free.

Introducing ProtoPie

Getting Started

Making Your First Prototype

ProtoPie Ecosystem

ProtoPie Studio Interface

Import

Getting Started

Importing From Adobe XD

Importing From Figma

Importing From Sketch

ProtoPie Genie

Basic Elements

Containers

Devices

Layers

Preview Window

Scenes

Scroll/Paging

Shortcuts

System Status Bar

Triggers & Responses

Easing

Annotations

Responses

Timelines

Triggers

Formulas

Getting Started

Functions

Layer Properties

Syntax

Formulas Use Cases

Variables

Getting Started

Variables

Predefined Variables

Variables Use Cases

AI

Getting Started

AI Interaction Creation

AI Document Q&A

AI Panel Interface

Tips for Best Results

Auto Layout

Getting Started

Auto Layout Properties

Components

Getting Started

Component Guides

Editing Components

Nested Components

Send & Receive Messages

Interaction Libraries

Getting Started

Managing Interaction Libraries

Managing Library Members

Voice Prototyping

Getting Started

Listen Response

Speak Response

Use Cases

Voice Command Trigger

Connecting Devices

Connecting blokdots

Connecting Mobile Devices

ProtoPie Cloud

Getting Started

Managing Prototypes

Managing Storage

Sharing Prototypes

ProtoPie Player

Testing Prototypes

Managing Fonts

Offline Testing

ProtoPie Player for Wear OS

Teams

Getting Started

Editors & Viewers

Onboarding Your Team

Projects

Team Owner & Team Admin

Handoff

Getting Started

Creating Interaction Recordings

Managing Interaction Recordings

Recording Page

User Testing

Getting Started

Overview

Creating Test Rooms

External Integrations

Managing Test Sessions

Test Results & Analysis

User Testing on ProtoPie Cloud

ProtoPie Connect

Getting Started

API Plugin

Arduino Plugin

blokdots Plugin

Connect Embedded

Custom Layer Integrations

Custom Plugins

Connect Devices

Gamepad Plugin

IFTTT Plugin

Logitech G29 Steering Wheel Plugin

Testing Prototypes

Feature Comparison

Unity Plugin

ProtoPie Enterprise

Getting Started

Organization Settings

Service Admin

Single Sign-On (SSO)

Security

Overview

Access Control

Data Transit, Storage & Backup

Incident Response

Network & ProtoPie Player App Security

Physical Security

Risk Management

Menu

Introducing ProtoPie

Getting Started

Making Your First Prototype

ProtoPie Ecosystem

ProtoPie Studio Interface

Import

Getting Started

Importing From Adobe XD

Importing From Figma

Importing From Sketch

ProtoPie Genie

Basic Elements

Containers

Devices

Layers

Preview Window

Scenes

Scroll/Paging

Shortcuts

System Status Bar

Triggers & Responses

Easing

Annotations

Responses

Timelines

Triggers

Formulas

Getting Started

Functions

Layer Properties

Syntax

Formulas Use Cases

Variables

Getting Started

Variables

Predefined Variables

Variables Use Cases

AI

Getting Started

AI Interaction Creation

AI Document Q&A

AI Panel Interface

Tips for Best Results

Auto Layout

Getting Started

Auto Layout Properties

Components

Getting Started

Component Guides

Editing Components

Nested Components

Send & Receive Messages

Interaction Libraries

Getting Started

Managing Interaction Libraries

Managing Library Members

Voice Prototyping

Getting Started

Listen Response

Speak Response

Use Cases

Voice Command Trigger

Connecting Devices

Connecting blokdots

Connecting Mobile Devices

ProtoPie Cloud

Getting Started

Managing Prototypes

Managing Storage

Sharing Prototypes

ProtoPie Player

Testing Prototypes

Managing Fonts

Offline Testing

ProtoPie Player for Wear OS

Teams

Getting Started

Editors & Viewers

Onboarding Your Team

Projects

Team Owner & Team Admin

Handoff

Getting Started

Creating Interaction Recordings

Managing Interaction Recordings

Recording Page

User Testing

Getting Started

Overview

Creating Test Rooms

External Integrations

Managing Test Sessions

Test Results & Analysis

User Testing on ProtoPie Cloud

ProtoPie Connect

Getting Started

API Plugin

Arduino Plugin

blokdots Plugin

Connect Embedded

Custom Layer Integrations

Custom Plugins

Connect Devices

Gamepad Plugin

IFTTT Plugin

Logitech G29 Steering Wheel Plugin

Testing Prototypes

Feature Comparison

Unity Plugin

ProtoPie Enterprise

Getting Started

Organization Settings

Service Admin

Single Sign-On (SSO)

Security

Overview

Access Control

Data Transit, Storage & Backup

Incident Response

Network & ProtoPie Player App Security

Physical Security

Risk Management

Variables Use Cases

Explore the practical application of variables for various use cases. Learn how to effectively use different variable scopes and data types, predefined variables, and how these work in various triggers and responses. Experience the prototypes firsthand by trying them out and downloading them to observe the interactions.

Learn more about variables and formulas.

Find the use case you need below:

Looking for formula-specific use cases? Check out the use cases involving formulas.

Find tips, tricks, and solutions about variables and formulas that other users have shared before in our communities.

Bunny vs. Wolf Game

Create variables to keep track of the score in a Bunny vs. Wolf game prototype.


{'_type': 'localeString', 'en': 'bunny-wolf-game'}

Try the prototype yourself.

Learn more in the Mobile Game prototyping masterclass.

Range Slider

Link the position of the handle with a range of values. As you drag and move the handle, the latest value is stored in a variable.


{'_type': 'localeString', 'en': 'range slider'}

Try the prototype yourself.

Learn more about the Chain trigger, Detect trigger, and functions.

Using Data Elsewhere

Store the input from the input layer in a variable, and use it elsewhere, e.g., in a different scene. Think of names, passwords, email addresses, etc., that a user would enter and you want to use throughout the prototype.


{'_type': 'localeString', 'en': 'using data elsewhere'}

Try the prototype yourself.

Learn more about the Detect trigger, Start trigger, and layer properties.

Calculating the Remaining Balance

Calculate the remaining balance when doing a bank transfer. To do the actual calculation, use arithmetic operations subtracting the transfer amount from the current balance.


{'_type': 'localeString', 'en': 'calculating the remaining balance'}

Try the prototype yourself.

Learn more arithmetic operations, conditions, and components.

Remembering What's in the Shopping Cart

Add items to the shopping cart, and calculate and display the total amount in the shopping cart dynamically—depending on what items were added.


{'_type': 'localeString', 'en': 'shopping cart'}

Try the prototype (made by Soda Design) yourself.

Learn more about arithmetic operations, functions, and conditions.

Timer

After every 60 seconds, the timer adds another minute—just like any basic timer does. However, you can create any timer you like. The opposite, a countdown timer, is possible too.


{'_type': 'localeString', 'en': 'timer'}

Try the prototype yourself.

Learn more about the arithmetic operations, conditions, and the Detect trigger.

On-Scroll Sticky Header

Distinguish an upward and downward scroll and adjust the position of the sticky header accordingly—all using a single predefined variable: $touchVelocityY.


{'_type': 'localeString', 'en': 'scroll sticky header'}

Try the prototype yourself.

Learn more about predefined variables and the Detect trigger.

Enabling a Keyboard View

When the keyboard appears from the bottom, move your designs based on the keyboard height. Do these calculations automatically using the predefined variable $keyboardHeight.


{'_type': 'localeString', 'en': 'enabling keyboard view'}

Try the prototype yourself.

Learn more about predefined variables and the Focus trigger.

Using the Incoming Speech

Use the incoming speech whenever listening to voice commands is enabled, using the predefined variable $voiceTranscript. Display the transcript via a Text response or make the prototype read it out loud.

Try the prototype yourself.

Learn more about predefined variables and voice prototyping.