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.

Use overridable variables in components

By using an overridable variable in your components you can have many instances of the component in your scene, but with different values for the same variable.

Working with Components

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.

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

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.

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.

Why use Protopie?

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

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.

Rough, Rapid, Right

Keep trigger and response names visible

Put code inside components

parseJson gives no error message

Arrays and multiple parameters

The wrong variable type

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

info@peoplecentereddesign.org

© 2026 David Gilmore