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

Distinctive initial variable values

Often one finds that a variable that should have acquired a certain value has not yet done so. Or a condition depends upon a value that has been erroneously set. 

A useful ploy to help you see these kinds of problems is to use something like -99 as your default value, which is unlikely to occur normally in your pie. Then if you see -99 in your running pie, you can much more quickly see what is going on.

Likewise, especially when getting text from an API, or by string manipulation, having “” as. the default text value for a variable is easily overlooked as a problem. Using “Null” as your default value – which will again not be likely to occur in your pie anywhere else will help you distinguish between something not having been done and having been done with an empty string.

Use Variables

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

Rough, Rapid, Right

Using the wrong mental model for Protopie

Most prototyping tools for designers use the frame-by-frame, or multiple dartboards model. But Protopie is much closer to a developer's object-oriented model of an application UI.

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.

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.

Why use Protopie?

There are many prototyping tools out there, so what makes Protopie special – how is it different?

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.

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.

parseJson gives no error message

Check if your other pie is present

Using the wrong mental model for Protopie

Moving between Figma and Protopie

Sending a message to another scene

Use Components

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

info@peoplecentereddesign.org

© 2026 David Gilmore