ProtoPie: Design Interactive Prototypes | from Zero to Hero

Explore SVG layer handling in ProtoPie by importing vector SPG files and converting them to shapes. Change color and properties to build scalable, interactive prototypes and see vectors stay sharp.

Explore how background blur in prototype version 4.3.0 adds a blur layer above shapes, with editable options like light, dark, ultra thin material, and thin material.

Add a video layer in ProtoPie, import footage, fit and center it, enable auto play and loop, then overlay UI elements to create a video-based login screen.

Create an interactive audio layer in a prototype by adding an audio file, building a media player with play/pause controls, a dynamic timestamp, and triggers to update playback using formulas.

Add a camera layer to your ProtoPie prototype, switch front and rear cameras with a rotating switch, and preview on a real device via a QR code on wifi.

Explore how a Lottie layer delivers JSON-based animations created in After Effects to ProtoPie, enabling cross-platform playback from web to mobile, with JSON import or MP4 fallback.

Design and customize text and input layers in ProtoPie by adjusting position, size, font, color, alignment, padding, borders, and shadows; implement focus in/out triggers and keypad types for better input.

Explore how constraints govern a rectangle inside a group container, fixed to left and top, or right and bottom, and how disabling fixed height or width changes resizing.

Learn to use regular, scroll, and paging containers in ProtoPie to create vertical and horizontal scrolls with bounce. Align containers to device template, clip sub-layers, and set up paging.

Explore ten touch triggers in ProtoPie, including tap, double tap, touch down, touch up, long press, fling, pull, drag, pinch, and rotate.

Explore conditional triggers and the chain in ProtoPie by building a swipe-to-unlock interaction. Animate a red button's color from red to green as you swipe, with text and opacity adjustments.

Explore range triggers in ProtoPie by tracking a rectangle's y position to change colors from green to yellow to red as it moves within, between, or outside set ranges.

Explore the start trigger in ProtoPie, activating when a scene starts, with options like start after jump, start with the jump, or restart every time to craft intro screens.

Discover how to use the detect trigger in ProtoPie to monitor layer properties like position and text, apply conditional responses, and preview color changes.

Explore mouse over and mouse out triggers in ProtoPie to hover text in web prototypes, animating color and a 10 percent scale with linear easing on a desktop template.

Explore key triggers in ProtoPie by mapping keyboard and Android device inputs to text responses and color changes, including volume up/down and left/right arrows.

learn to implement a focus trigger in ProtoPie by animating an input layer on focus in and out, changing border color to blue and scaling 10% with 0.3s duration.

Master tilt triggers in ProtoPie by using a tilt sensor (x, y, z) to drive a 3d rotate with center origin and mapping -30 to 30 degrees for device preview.

Explore how the sound trigger sensor operates on a smartphone. A green circle grows from 240 to 330 pixels as decibels rise from 40 to 100, with center-origin scaling.

Master the compass trigger to rotate a rectangle from 0 to 359 degrees, using the original center, and preview the prototype on a smartphone by scanning a QR code.

Learn how a proximity sensor detects nearby objects without contact by emitting a field, then use a proximity trigger in ProtoPie to scale a circle when a hand approaches.

Learn how the receive trigger works with a center response to pass messages between a component and its parent scene, using channels like component, prototype, Android broadcast, and current seen.

Explore the reorder response by rearranging layer order with three rectangles, illustrating top, back, and middle positions and triggering reorder on tap to create layered animations.

Explore how to implement a scroll response in ProtoPie by using a tap trigger to scroll a container to its top, showing practical steps with shapes and a circle button.

Explore jump response in ProtoPie by wiring taps to navigate between scenes, apply slide transitions, trigger color changes, add delays, and optionally reset scenes for consistent previews.

Explore link response in ProtoPie by configuring URL and URI scheme actions to open websites, apps, or messaging tools from a tap trigger, with dynamic formulas for searches.

Learn how to reset the current scene with one tap in ProtoPie by adding an apply color button that turns a rectangle blue and resets all animations.

Learn to implement a stop response in ProtoPie using a tap trigger, layering shapes, and moving a circle to halt a running animation.

Learn to use an assign response in ProtoPie by creating a local variable, triggering on tap, and displaying the variable value in a text layer.

Learn to create conditional triggers in ProtoPie by comparing layer properties with operators, moving elements between positions, and using variables to build on-off interactions and dynamic text.