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.

Put code inside components

Protopie code can get complex and hard to follow surprisingly quickly. Putting as much code as possible within your components can keep your main scenes simpler and cleaner.

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.

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

Use Variables

Variables are very powerful simplifying tool and they do not seem to have any impact on Protopie's performance.

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.

How to inspect variables inside a component

Even all-Scenes variables are not accessible inside a component. And this can lead to hard to find errors when a variable with the same name is used in a component, but its value is not sync'd with the scenes.

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

Sending messages to two places

Receive and Assign hazard

How to inspect variables inside a component

Working with Components

Using the wrong mental model for Protopie

Use Variables

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

info@peoplecentereddesign.org

© 2026 David Gilmore