Skip to content
  • Protopie and Figma
  • Protopie Tips
  • Experience Prototyping
  • Protopie and Figma
  • Protopie Tips
  • Experience Prototyping

PROTOPIE

Principles

Moving between Figma and Protopie
more ...
Rough, Rapid, Right
more ...

Patterns

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.
more ...
Use Variables
Variables are very powerful simplifying tool and they do not seem to have any impact on Protopie's performance.
more ...
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?
more ...
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.
more ...
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.
more ...
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.
more ...

Ploys

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.
more ...
Check if your other pie is present
When building a connected system it can be valuable to know if the other pies are loaded into Connect or not – for examples so you don't get stuck waiting for a message that will never be sent.
more ...
Check if Protopie Connect is present
If you are building a prototype that depends upon Protopie Connect then it is a good idea to start by checking if Connect is actually present.
more ...
Sending messages to two places
Whilst it is important to be careful in sending messages to the right places, it is also very powerful to send a message to two different places at the same time (or maybe with a small delay).
more ...
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.
more ...
Viewing variables within Components
The variable debugger doesn't work when the variable that needs to be viewed is inside a component. There are two relatively easy ways to deal with this.
more ...

Pitfalls

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

© 2023: David J Gilmore