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

Playing with time

How to know whether something occurred

The message sending protocols between a scene and a component, or between pies (through Connect) are extremely powerful, but not entirely consistent. A message sent from a component to the current scene is received by itself, but one sent to Connect is not received by itself. How can you trigger a response if no-one has responded?

There are a variety of ways:-

  1. send a message to your self with a delay of 2-3 seconds after you sent to message to Connect. If you get a response from Connect then set a. flag variable, and when you receive the message from yourself, consult (and reset) that variable.
  2. Use a variable in a similar way – assign it a value with some delay (2-3 seconds) and then have a detect trigger  on it, which checks the flag variable in the same way as the message sending (above).

In general, set an event to happen at some delay after sending your message to Connect and then use that event to see if a response has come in from Connect.

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.

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.

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.

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).

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.

Moving between Figma and Protopie

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.

Arrays and multiple parameters

Use Components

Distinctive initial variable values

Sending and receiving mismatched messages

Good Prototyping Practice

Check if your other pie is present

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

info@peoplecentereddesign.org

© 2026 David Gilmore