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

Arrays and multiple parameters

Frequently when sending a message to a component one would like to attach multiple values and not just one and Protopie doesn’t provide any obvious way to do this.  However, it is possible to use parseJson to achieve a similar effect. If you concatenate your elements together as a string, with elements separated by commas and bookended by square brackets. For example, pass  “[“+4+”,”+7+”,”+11+”,”+19+”]” as the value attached to your message.

When the message is received pass the value to a temporary variable and extract the values using parseJson – remember that it uses 0 to n-1 as keys. Thus, if the variable source contains “[4,7,11,19]” then parseJson(source, 3) will return 19. 

You can see an example of this in this radio button pie where I use an array containing three values when a button is tapped. – passing identity, set and status back to the scene from the component.

One limitation is that there aren’t functions to give you the length of the array (for example).

And, even more constraining for some usage, it isn’t possible (at least in any straightforward way) to assign into a cell of an array this way.

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.

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.

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.

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.

Rough, Rapid, Right

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.

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.

Origami Studio, Figma and others

How do these other popular platforms compare?

Using the wrong mental model for Protopie

Working with Components

Good Prototyping Practice

Playing with time

Distinctive initial variable values

Sending and receiving mismatched messages

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

info@peoplecentereddesign.org

© 2026 David Gilmore