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

parseJson gives no error message

parseJson can only return a node at the bottom of the JSON structure and cannot return an object – which means it is very important that you know the structure of your JSON and that it doesn’t vary.

Also, it is important to construct your request string very carefully as there are no error messages returned to tell you you have got it wrong. The solution to this is to find a way to check whether parseJson has returned “” and if it has, do something to alert you (change the colour of an object, for example).

Another common mistake is to use the indices, 1, 2, 3 etc when something has multiple values – whereas in fact parseJson uses the indices 0,1,2 etc. Thus, in my quiz with ten questions (which pulls data from a trivia API), I use the indices 1-10 to represent each instance of the question component (in a variable called “Identity”), but in the extraction of the question from the data returned from the API I have to use the index “Identity”-1.

Here is a pie which allows you to explore how sources and keys work with parseJson – it contains some simple examples, but you can edit the fields to try your own values – select the source style and then type the key and enter (or hit go).

Why use Protopie?

There are many prototyping tools out there, so what makes Protopie special – how is it different?

Rough, Rapid, Right

Arrays and multiple parameters

Protopie seems limited since a message can be sent using only one value as a parameter. However, arrays (written as text strings and manipulated by parseJson) can be used for contexts where multiple parameters need to be passed.

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.

Moving between Figma and Protopie

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.

Working with Components

Put code inside components

Protopie code can get complex and hard to follow surprisingly quickly. Putting as much code as possible within your components can keep your main scenes simpler and cleaner.

Receive and Assign hazard

Sending and receiving mismatched messages

Sending messages to two places

Using the wrong mental model for Protopie

Origami Studio, Figma and others

How to inspect variables inside a component

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

info@peoplecentereddesign.org

© 2026 David Gilmore