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. 

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.

Moving between Figma and Protopie

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

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.

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.

Working with Components

Use Variables

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

Origami Studio, Figma and others

How do these other popular platforms compare?

Sending a message to another scene

Origami Studio, Figma and others

Viewing variables within Components

Use Variables

Arrays and multiple parameters

Put code inside components

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

info@peoplecentereddesign.org

© 2026 David Gilmore