# ProtoPie

> A prototyping tool for complex interactions—animations, gestures, variables, and logic without code.

*Tags: ux, tools, mid-level*

---



> [!info] Quick Definition
> A prototyping tool for complex interactions—animations, gestures, variables, and logic without code.


## What is ProtoPie?

ProtoPie is a prototyping tool designed for complex interactions that Figma's prototyping can't handle. Need a countdown timer? A calculator logic? Conditional flows based on user input? ProtoPie handles it.

ProtoPie works like this: import designs from Figma, add interactions through the ProtoPie editor, and share via link. No coding required. The result is an interactive prototype that feels like a real app.

**One sentence punch:** ProtoPie is for designers who need interactive logic that Figma's prototyping can't deliver.**

## Why Designers Use ProtoPie

- **Complex Interactions** — Conditional flows, variables, calculations, state management without writing code.
- **Realistic Prototypes** — Prototypes that test like real apps. Users feel the difference between a prototype and production.
- **Gesture Support** — Swipe, pinch, drag, rotate. Gestures work like native app gestures.
- **Device-Specific Testing** — Prototype on actual phones. Test on iPhone and Android simultaneously.
- **Team Collaboration** — Share links. Stakeholders test without needing ProtoPie installed.

## Common Uses for Designers

1. **Complex Form Flows** — Multi-step forms with conditional branching based on answers.
2. **Animations** — Micro-interactions, page transitions, loading states.
3. **State Management** — A calculator that remembers input. A to-do list that updates count.
4. **Gesture-Heavy UX** — Swipe navigation, pinch-to-zoom, drag-and-drop.
5. **Real-Time Interactions** — Prototypes that respond to user input like production apps.

## ProtoPie vs Figma Prototyping

| **ProtoPie** | **Figma Prototyping** |
| --- | --- |
| Complex logic and variables | Simple navigation flows |
| Gestures (swipe, pinch, drag) | Tap/click only |
| State management | Stateless (always resets) |
| Device testing | Browser preview only |
| Higher learning curve | Beginner-friendly |

Use Figma for basic flows. Use ProtoPie for complex interactions.

## How to Create a ProtoPie Prototype

1. **Design in Figma** — Create components and pages in Figma.
2. **Export to ProtoPie** — ProtoPie plugins import Figma files directly.
3. **Add Interactions** — Connect screens with interactions. Add logic.
4. **Add Variables** — Create variables for state (count, input value, etc).
5. **Add Conditions** — If user selects X, go to screen Y. If count > 10, show message.
6. **Test on Device** — Open on an iPhone. Test gestures and flows.
7. **Share Prototype** — Generate a link. Send to stakeholders.

## ProtoPie Concepts

- **Interactions** — Tap, drag, swipe, pinch. Each interaction triggers an action.
- **Variables** — Store state (a number, text, true/false). Variables persist across screens.
- **Conditions** — If X, then Y. Routes based on variable values or user input.
- **Calculations** — Add, subtract, multiply. Math operations on variables.
- **Sensors** — Tap into device sensors: location, motion, light. Advanced but powerful.

## Mentor Tips

- **First tip: ProtoPie adds complexity.** A prototype that's too complex to explain isn't useful. Keep prototypes simple enough for stakeholders to understand.
- **Use for learning, not documentation.** A ProtoPie prototype teaches developers how interactions feel. But it's not a spec. Specs are still needed.
- **Test on real devices.** Browser preview is different from device testing. Always test on the actual device users will use.
- **Combine with Figma.** Design in Figma (simple, fast), prototype complex flows in ProtoPie (powerful but slower). Both tools together are strongest.

## Resources and Tools

- **Books:** "Prototyping" by Todd Zaki Warfel
- **Tools:** ProtoPie Studio, Figma to ProtoPie plugins, device testing
- **Articles:** ProtoPie tutorials, interaction design on [[UX Collective]]

---

Source: https://www.fernandoux.com/en/wiki/tools/protopie/