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

Receive and Assign hazard

When you receive a value with a message from a component, it is quite common to assign a variable with some function of that value (e.g. length).

The issues can be seen in this simple pie here   which has two input fields each set to show the entered text in a field below once the text is 4 or more characters long. If you try it you will find that the one on the left only shows the text when it is 5 characters long, whereas the one on the right does it at 4. And yet the condition controlling both is the same (if length > 3).

The reason this happens is that Protopie responses happen simultaneously (unless delayed … but conditionals cannot be delayed).

Thus in the left hand version, the condition is applied before the assignment has fully happened – even though the order on the page suggests it happens first.

In the right hand version the code is arranged as a Receive (and Assign) and then Detect. the Receive trigger only does the assignment of the new length variable. And then the Detect trigger picks up that the variable has changed.  In this way the condition only happens after the length variable has changed.

Once put down side-by-side, this hazard seems kind of obvious, but the difference in the two methods is very subtle conceptually.

The end result is that when one assigns a value in a response to some trigger (whether a receive or a detect) one should avoid using that variable in a condition in the same trigger. instead after assigning the variable one should then program a detect trigger for a change in that variable.

This is particularly relevant if you are passing an array of values – your first step is to receive the array and then assign each of your variables to appropriate value within the array. The you can either do a detect on one of those variables, or, better still, change the value of some other variable (called temp possibly) from 0 to 1, and then detect the change in it. In the response to that detect, the first step is to change the value of temp back to 0. And then you can have conditionals based on the values from your array.

Working with Components

Why use Protopie?

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

Check if Protopie Connect is present

If you are building a prototype that depends upon Protopie Connect then it is a good idea to start by checking if Connect is actually present.

Playing with time

A message sent to the current scene will be received by the object that sent it. But a message sent to Protopie Studio (Connect) will not be received by the pie that sent it. B ut what if there is nothing out there to respond to it?

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.

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.

Sending and receiving mismatched messages

You can send messages in different ways, but Protopie requires you to receive them in the matching way. A common (and easy) mistake is to send a message to a 'parent' while wanting to receive it from the current scene.

Origami Studio, Figma and others

How do these other popular platforms compare?

Use Components

Rough, Rapid, Right

Check if Protopie Connect is present

Use overridable variables in components

Using the wrong mental model for Protopie

Playing with time

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

info@peoplecentereddesign.org

© 2026 David Gilmore