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
Put code inside components
Protopie
Moving between Figma and Protopie
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?
Working with Components
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).
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.
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.
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.
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.
Sending messages to two places
Using the wrong mental model for Protopie
Good Prototyping Practice
Arrays and multiple parameters
Moving between Figma and Protopie
Sending a message to another scene