Put code inside components

Moving between Figma and Protopie

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.

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.

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

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.

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.

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.

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.

Use Components

Working with Components

Rough, Rapid, Right

Good Prototyping Practice

Sending and receiving mismatched messages

Why use Protopie?