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. 

Check if Protopie Connect is present

If you are building a prototype that depends upon Protopie Connect then it is a good idea to start by checking if Connect is actually present.

Use Variables

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

Distinctive initial variable values

It can sometimes be very helpful to use -99 and "null" for the initial values for your number and text variables.

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.

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.

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.

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.

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.

Arrays and multiple parameters

Using the wrong mental model for Protopie

How to inspect variables inside a component

Viewing variables within Components

Receive and Assign hazard

Origami Studio, Figma and others

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

info@peoplecentereddesign.org

© 2026 David Gilmore