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.

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.

Use Variables

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

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

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.

Working with Components

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.

Moving between Figma and Protopie

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 a message to another scene

Check if your other pie is present

Use Variables

Working with Components

Why use Protopie?

Origami Studio, Figma and others

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

info@peoplecentereddesign.org

© 2026 David Gilmore