Skip to content

UX Prototyping & Protopie

  • Principles
    • Educational
    • Figma Integration
  • Patterns, Pitfalls, Ploys
    • Patterns
    • Pitfalls
    • Ploys
  • More …
    • People-Centered Design
    • Thinking about AI
  • Principles
    • Educational
    • Figma Integration
  • Patterns, Pitfalls, Ploys
    • Patterns
    • Pitfalls
    • Ploys
  • More …
    • People-Centered Design
    • Thinking about AI

Using the wrong mental model for Protopie

In an artboard model for building a UI prototype, the same object may well recur multiple times across various artboards. The underlying ‘run’ model dates back 25 years or more to a movie frame notion of animating through the frames (or artboards).

But Protopie lives much closer to a software model in which the scene represents a functional activity for the user. Within a scene objects may appear, disappear, move or change value but the prototype stays on the same scene throughout.

For example, in Figma one might create the graphical view and then create variants of that view and then link the animations together. With AutoLayout too one might end up with the object structure closely reflecting the graphical layout.

In Protopie it is the interactional elements that need to be reflected in the structure, and the prototype itself needs to know what state it is in (e.g. which tab is active). This leads to a very different workflow than you might follow in tools such as Figma – with Figma you don’t really want to create variants of a component until the graphical aspects are relatively complete, whereas in Protopie you would focus on creating the interactions first and then adjusting the graphics later.

A common pitfall is to start one’s Protopie pie with lots of scenes and lots of shared objects between them an d then to use ‘Jump’ responses to move the user forward.

At the beginning of building your pie, it is really important to think through the possible scenes and to consider ways to reduce it down to as few as possible. Or maybe to as many as possible, with no duplication of objects and functions between them.

This pitfall has implications when you import your layers from Figma or other tools. The way you choose to layer objects is very different in the two mental models – creating components out of imported layers can be very complex, because the elements may not be close to each other in the imported artboard.

Distinctive initial variable values

It can sometimes be very helpful to use -99 and "null" for the initial values for your number and text variables.

Keep trigger and response names visible

It is very important to annotate your code with what it is actually doing, but keeping the trigger and response names helps someone new to the project (or you in three month's time.

Arrays and multiple parameters

Protopie seems limited since a message can be sent using only one value as a parameter. However, arrays (written as text strings and manipulated by parseJson) can be used for contexts where multiple parameters need to be passed.

The wrong variable type

This pitfall is not a big deal, but it can waste you time as you try to track down why your variable seems to have the wrong value (or no value). It can also bite you in a formula where your variable is of the wrong type for the formula.

Check if your other pie is present

When building a connected system it can be valuable to know if the other pies are loaded into Connect or not – for examples so you don't get stuck waiting for a message that will never be sent.

Origami Studio, Figma and others

How do these other popular platforms compare?

Moving between Figma and Protopie

Receive and Assign hazard

Receiving a message, and then assigning a value and then writing a conditional based on that value is that something that is quite a normal, conceptual pattern – but in Protopie it will often not work as expected. This is because responses to Protopie triggers all happen simultaneously and not in the order written.

The wrong variable type

Good Prototyping Practice

Sending and receiving mismatched messages

Playing with time

Working with Components

Why use Protopie?

  • Welcome
  • What’s New?
  • About
  • Welcome
  • What’s New?
  • About

info@peoplecentereddesign.org

© 2026 David Gilmore