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.

Sending messages to two places

Whilst it is important to be careful in sending messages to the right places, it is also very powerful to send a message to two different places at the same time (or maybe with a small delay).

Good Prototyping Practice

IDEO's 3R prototyping principles from the late 1990s still apply - "Right, Rough, Rapid" but in the UX and UI space they are easily misunderstood.

parseJson gives no error message

parseJson is.a very useful and powerful function, but it doesn't do all you might expect of it (yet, hopefully).

How to inspect variables inside a component

Even all-Scenes variables are not accessible inside a component. And this can lead to hard to find errors when a variable with the same name is used in a component, but its value is not sync'd with the scenes.

Sending a message to another scene

This is a very easy mistake to make – sending a message to be picked up by a component, but one that you have in fact placed into a different scene. Although you can send to a different pie, you can't send to a different scene.

Use Variables

Variables are very powerful simplifying tool and they do not seem to have any impact on Protopie's performance.

Put code inside components

Protopie code can get complex and hard to follow surprisingly quickly. Putting as much code as possible within your components can keep your main scenes simpler and cleaner.

Use Components

It will often seem as though it will be faster to use individual elements than to use components, but in the end the time saving almost always goes the other way.

Sending messages to two places

Receive and Assign hazard

Keep trigger and response names visible

Use Variables

Why use Protopie?

Arrays and multiple parameters

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

info@peoplecentereddesign.org

© 2026 David Gilmore