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

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.

Yes, there is a small learning curve – sending messages has to be mastered, as does the use of variables.

But, messages and variables enable you to simplify your pie dramatically. For example, a radio button component can do all its work with internal code and the scene where you use a set of radio buttons only needs a trigger to know when the selected value has changed. But it does then need overridable variables to manage the selection behaviour. 

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.

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.

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.

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.

Use Variables

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

Why use Protopie?

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

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.

Use Components

Use Variables

Arrays and multiple parameters

Sending a message to another scene

parseJson gives no error message

Sending messages to two places

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

info@peoplecentereddesign.org

© 2026 David Gilmore