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

How to inspect variables inside a component

For many Protopie users components are a little scary. One factor that reinforces this is the fact that the variable tracker does not enable you to inspect a variable that is inside a component.

As a result, when something is not working within a component it can be hard to find a way to see what is happening and what is going wrong.

A common solution to this is to add a text field into the component and have its value be the variable you want to inspect. But this requires that you have space for an extra text field and don’t mind its disruption to your emerging design. You can. of course, show and hide this field as you need to.

An alternative solution is to use a ‘Detect’ trigger and a ‘Speak’ response. Within the component simply add a trigger for detecting a change in the variable of interest (or add one for each variable) and use the response to speak the value of the variable. You can add text around the value of the variable, or have multiple variables spoken in sequence, using the normal string concatenation operator +.

You can keep this code in your component and disable it when it is not needed, and then turn it on as needed. 

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.

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.

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.

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.

Playing with time

A message sent to the current scene will be received by the object that sent it. But a message sent to Protopie Studio (Connect) will not be received by the pie that sent it. B ut what if there is nothing out there to respond to it?

Use Variables

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

Rough, Rapid, Right

Origami Studio, Figma and others

How do these other popular platforms compare?

The wrong variable type

parseJson gives no error message

Put code inside components

Why use Protopie?

Moving between Figma and Protopie

Distinctive initial variable values

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

info@peoplecentereddesign.org

© 2026 David Gilmore