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

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.

Yes, there is a small learning curve – sending messages has to be mastered, as does the use of variables.

But, messages and variables enable you to simplify your pie dramatically. For example, a radio button component can do all its work with internal code and the scene where you use a set of radio buttons only needs a trigger to know when the selected value has changed. But it does then need overridable variables to manage the selection behaviour. 

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.

Rough, Rapid, Right

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

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.

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?

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

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.

Use overridable variables in components

Viewing variables within Components

Origami Studio, Figma and others

Use Variables

Moving between Figma and Protopie

Keep trigger and response names visible

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

info@peoplecentereddesign.org

© 2026 David Gilmore