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

Origami Studio, Figma and others

In the spirit of crafting the right prototype it is important to look at various UX prototyping tools so as to understand which tool might be best for the prototype you need at any one moment, for some given purpose.

With Protopie one of our first major uses of it was to to craft a prototype which put a collection of different software projects together as one single experience. This allowed our development teams to walk through it and gain a clearer idea of how their piece of the puzzle fitted into the bigger picture. This proved so successful that these walk-throughs became a regularly scheduled event.

If your purpose is to show a product manager quickly what a new screen or feature might lookalike, then Figma is probably a much more appropriate tool.

Origami Studio has the big advantage of being free and it is powerful in some very interesting ways. Its underlying mental model is much closer to Protopie than it is Adobe XD or Figma, but the programming concepts are not the easiest to grasp. I don’t see any way to run the same Origami prototype on two devices at the same time, but it does allow much more the user to craft their own experience rather than follow a script.

Other tools (Azure, UX Pin, for example) try to meet the need of bringing design closer to developers rather than closer to users – they can be used for user testing, but their strengths lie more in the linkage from design to development.

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?

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.

Rough, Rapid, Right

Why use Protopie?

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

Sending a message to another scene

This is a very easy mistake to make – sending a message to be picked up by a component, but one that you have in fact placed into a different scene. Although you can send to a different pie, you can't send to a different scene.

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.

Moving between Figma and Protopie

The wrong variable type

This pitfall is not a big deal, but it can waste you time as you try to track down why your variable seems to have the wrong value (or no value). It can also bite you in a formula where your variable is of the wrong type for the formula.

parseJson gives no error message

Arrays and multiple parameters

Rough, Rapid, Right

Put code inside components

Sending messages to two places

Playing with time

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

info@peoplecentereddesign.org

© 2026 David Gilmore