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

Viewing variables within Components

The variable debugger doesn’t work when the variable that needs to be viewed is inside a component. There are two relatively easy ways to deal with this.

  1. Use a ‘Speak’ response at an appropriate point to speak the value of the variable. Deactivate this response when you no longer need it and then you can reactivate it later if needed again.
  2. Create a text object in the component and use a ‘Detect’ trigger to set the text value of that object. This is easier to see, but requires a bit more work to set it up – and it messes with the visual design.

With the speak method it is very easy to switch to tracking a different variable. And if you are not using Speak responses elsewhere they are also very easy to find.

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.

Moving between Figma and Protopie

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.

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.

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.

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.

Why use Protopie?

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

Receive and Assign hazard

Using the wrong mental model for Protopie

Rough, Rapid, Right

Sending and receiving mismatched messages

Moving between Figma and Protopie

Playing with time

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

info@peoplecentereddesign.org

© 2026 David Gilmore