Guides & Tutorials

Touch Area: Increasing object touchability

Learn best practices to increase the touchability of gesture-based interactions in ProtoPie.

Software and Hardware

Prototyping for Gaming, Smart Home IoT and more with Arduino, blokdots

Learn the basics of components and create a double-tap “Like” interaction using a Lottie animation.

Color change effect using Tilt

Learn how to do parallax effect and utilize your device’s native sensors for a a tilt effect and color change animation.

Listen: Voice assistant app

Learn how to create your own AI voice assistant using ProtoPie.

Apple TV settings icon using 3D animation

When doing TV UI design or prototyping for TV apps, the icons in the Apple TV menu are an awesome example and worth practicing your ProtoPie skills. In this tutorial, Abhas explains how he recreated the 3D animated interaction in the Apple TV menu using 3D Rotate, Predefined Variables ($touchVelocity) and more in ProtoPie.

TV controller prototype using keyboard keys or remote

Learn how to use Send and Receive on multiple pies to interact with each other and using ProtoPie Player as a controller.

Countdown timer prototype with progress bar

Learn how to create a timer that counts down from a preset number - in this case 3 minutes or 180 seconds by using a Variable and applying Formulas as well as the Chain trigger to track the seconds remaining in a progress bar.

Jump: Smart screen transitions

Learn a few different ways to create animated screen transitions using the Jump response.

Custom transitions using Smart Jump

Learn how to use Smart Jump — a new transition for the Jump response that animates transitions automatically for you

Smart Jump Advanced Examples vs. Figma Smart animate

With Smart Jump, we've made custom transitions between scenes a hassle-free process. When using Smart Animate transitions in Figma, ProtoPie would seamlessly import these as Jump responses with smart transitions.

Smart Jump Basic Examples

With Smart Jump, we've made custom transitions between scenes a hassle-free process. When using Smart Animate transitions in Figma, ProtoPie would import these as Jump responses with seamless smart transitions. Check out the video for examples like zoom-in photo preview, Figma import, single/long press, tab menu navigation, scrolling animation.

Sound: Clapping game

Learn how to create a simple game using the Sound trigger in ProtoPie.

Tilt: Shoot ‘em up game

Learn how to add cool tilt motion control to your mobile games with ProtoPie's native sensor support features.

Vibrate: Shoot ‘em game

Learn how to make mobile games more immersive by adding vibrations every time the player registers a hit. All this is made possible using ProtoPie’s Vibrate trigger.

Press: Desktop photo gallery

Learn how to enable keyboard navigation in a gallery of photos on a desktop screen using the Press feature.

Constraints: Creating responsive layouts

Learn how to make your designs more fluid and adaptive by using Constraints in ProtoPie.

Custom screen transitions in email app

We'll recreate a screen transition such as when you click on the search bar similar to the one found in the Gmail app, it expands and spans the entire screen.

Accordion dropdown menu

Learn how to create an accordion menu using ProtoPie's advanced features.

Drag and drop using conditions

Learn how to drag an object into a box — if it is dropped there, it turns green, if not it moves back to its original location using conditions and logic validation.

ProtoPie Plugin: Importing your design

Learn how to import from your design tools like Figma, Sketch and Adobe XD into ProtoPie Studio.

Range / Chain / Detect: Website landing page parallax effect

Learn how to combine the Chain and Range triggers to create fluid animations that respond to the user's interactions in a website prototype.

Container: Basic scrolling and swiping interactions

Learn how to add basic scrolling into your prototypes by using the Scroll Container in ProtoPie.

App switcher using scroll and paging container

Learn how to switch and swipe out mobile app windows on scroll view using components, variables, paging container and send/receive features.

Hide and show button on scroll

Learn how to hide and show a button by sending a message to a component when a container has been scrolled to a certain point.

Real Text Entry

Keyboard: Onboarding signup form

With ProtoPie's real text entry feature, learn how to create dynamic text input interactions using your own device's native keyboard.

Created with

or

Your country?

Your company size?

Your Profession?

Forgot your password?

or