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. 

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

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.

Rough, Rapid, Right

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

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

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.

Rough, Rapid, Right

Origami Studio, Figma and others

How to inspect variables inside a component

Use Variables

Put code inside components

Receive and Assign hazard

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

info@peoplecentereddesign.org

© 2026 David Gilmore