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.

Keep trigger and response names visible

It is very important to annotate your code with what it is actually doing, but keeping the trigger and response names helps someone new to the project (or you in three month's time.

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.

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.

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?

Check if your other pie is present

When building a connected system it can be valuable to know if the other pies are loaded into Connect or not – for examples so you don't get stuck waiting for a message that will never be sent.

Moving between Figma and Protopie

Sending messages to two places

Check if Protopie Connect is present

Sending and receiving mismatched messages

The wrong variable type

Distinctive initial variable values

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

info@peoplecentereddesign.org

© 2026 David Gilmore