[Beta] ProtoPie MCP is here! Learn More.

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

ProtoPie MCP

Getting Started

Studio MCP Introduction

Studio MCP Installation & Setup

Code MCP Introduction

Code MCP Installation & Setup

Dev View

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

ProtoPie MCP

Getting Started

Studio MCP Introduction

Studio MCP Installation & Setup

Code MCP Introduction

Code MCP Installation & Setup

Dev View

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

Scroll & Paging Use Cases

Learn how to effectively utilize scroll and paging for common scenarios. Discover how to create vertical and horizontal scroll views for mobile and desktop applications. Gain insights into correctly configuring scroll properties and selecting the right triggers and responses for scroll-related interactions.

Experience the prototypes firsthand and download them to examine their interactions. Additionally, explore our tutorials to understand the step-by-step process behind creating each prototype.

Find the use case you need.

  • Browsing through a social media app

  • Vertical scroll in a messaging app

  • Looping scroll carousel

  • Wheel picker

  • Scrolling & paging from the middle

  • Infinite paging scroll

Browsing Through a Social Media app

Like most social media apps function these days, you can make a horizontal and vertical scroll to browse through different profiles and photos. Learn how to add margins to the scroll views to maintain a similar UI (spaces at the end of the scroll) as in your apps.


{'_type': 'localeString', 'en': 'browsing through a social media app'}

Try the prototype yourself.

Learn how to create this prototype step-by-step.

Vertical Scroll in a Messaging App

Scroll up and down to see messages in a messaging app or email inbox. Create a scroll container and learn how to set a custom starting scroll position (for example, from the bottom).


{'_type': 'localeString', 'en': 'vertical scroll in a messaging app'}

Try the prototype yourself.

Learn how to create this prototype step-by-step.

As in online shopping websites or a gallery of images on video streaming platforms, you can create a slideshow. Learn how to use the paging container to make a carousel view and how to use variables to alternate image names while scrolling.


{'_type': 'localeString', 'en': 'looping scroll carousel'}

Try the prototype yourself.

Learn how to create this prototype step-by-step.

Wheel Picker

Make your own wheel picker to pick a date, time, etc. A wheel picker allows you to scroll up and down through multiple choices very quickly. It is useful especially when the list of options cannot be fully displayed because they may exceed the available space on your screen.


{'_type': 'localeString', 'en': 'wheel picker'}

Try the prototype yourself.

Learn how to create this prototype step-by-step.

Scrolling & paging from the middle

Allow your pages to scroll from the middle to both left and right. Learn how to set up the right container property to make it happen.


{'_type': 'localeString', 'en': 'scroll paging from the middle'}

Try the prototype yourself.

Learn how to create this prototype step-by-step.

Infinite Paging Scroll

Make your pages scroll infinitely in both directions. Learn how to group pages using a paging container and to use the range trigger to enable the infinite scroll.


{'_type': 'localeString', 'en': 'infinite paging scroll'}

Try the prototype yourself.

Learn how to create this prototype step-by-step.