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 Variables

Variables can sometimes feel a little clumsy, but they can make a big difference to simplifying your code. This is especially true if you also use “Detect” triggers and maybe even formula values for your variables.

For example, if you have a password input field you can have a variable that uses a ‘length’ formula to always have the value of the number of characters in the password. Using a detect on this variable enables you to trigger action when the password is 8 or more characters.

Achieving the same effect without a variable is tricky, but there are other good reasons to use variables – you can track their value in Preview mode and this can help you fix errors in your logic. If you rely just on properties of objects, tracking their value can be harder.

The contrasting position is that some classic variables are really not needed – for example, ‘status’ variables for toggling states can sometimes be avoided by simply inspecting the opacity of the relevant object. However, one advantage of using a 0 or 1 status variable is that the opacity of your on indicator can be set to a formula (status*100) which means you only need change the status variable and the change will be shown automatically.

Using a variable can also simplify the construction of conditionals. For example, this Pie (based on one by Alisa) uses a variable called match which reflects whether each password field is more than 5 characters and matches the other field. Using these means that one has one set of simple conditions for giving match a value and another set of simple conditions for responding once there is match (using a Detect trigger).

Inspecting this variable match makes it easy to see when the passwords match and when they don’t. The condition for highlighting the Create Account button simply checks the checkbox whenever the match is 1.

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.

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 a message to another scene

This is a very easy mistake to make – sending a message to be picked up by a component, but one that you have in fact placed into a different scene. Although you can send to a different pie, you can't send to a different scene.

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.

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

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.

Origami Studio, Figma and others

How do these other popular platforms compare?

Playing with time

Keep trigger and response names visible

Moving between Figma and Protopie

Use Components

Sending and receiving mismatched messages

Good Prototyping Practice

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

info@peoplecentereddesign.org

© 2026 David Gilmore