, we built a reusable radio button component. While useful, it still required a lot of code, was prone to errors with small changes, and was limited to a maximum of six buttons.

This time, we'll level up our approach. We will create a highly efficient component from a single radio button that can be used to build a set of any size. This method dramatically reduces the amount of code and makes your components more powerful and flexible.

Before we jump into the tutorial, it’s important to understand a few essential concepts to follow along:

ProtoPie messages can only send one value at a time. We'll use JSON to bundle multiple values into a single message, allowing us to send more complex information.

Think of these as custom properties for a component instance. They allow us to give each radio button a unique identity and function, making our single component truly reusable.

To maintain sync between Figma and ProtoPie, you must be careful about what you override. An override in ProtoPie will always overrule a change from Figma. As a general rule, 

 (shape, color, borders, fonts, positioning) in ProtoPie. It's better to manage these in Figma or change them in ProtoPie using responses to a 

. While text values and opacity can be changed in ProtoPie, it's still often better to do so via a trigger.

ProtoPie doesn't have a response to "hide" a layer, but you can change its 

. Critically, there's no way to check if a layer is hidden, only a way to access its opacity. Remember that a layer can be hidden in the layer panel (and thus invisible) even if its opacity is 100. You can delete or hide layers from a Figma import without breaking the sync, but this must be done in ProtoPie Studio, not through interactions.

Ready to build a smarter, more scalable component? Let's dive in.

Building a single, general-purpose radio button

To follow the tutorial, you can download the starting pie & Figma file here: 

The ending pie is also available for download here: 

” file. In case you don’t have access to Figma, skip right to Step 3.

Step 1: The Starting Pie when you first open it

Step 2: Import & Prepare Figma Assets (Only possible with access to Figma)

Delete the local component that’s present in the “Starting Pie.pie” file and import the “

” file into Figma. You should see two radio button designs: one called '

'. Select both and open the ProtoPie Figma Plugin. Export both objects to ProtoPie (make sure the plugin shows it’s exporting 2 objects).

Back in ProtoPie, set the position of Tick and Dot to 0,0 and rename the component to “

”. Open up the layers in Tick and Dot and make sure that they are all editable (click “Make Editable” if they are not). At this point, it’s also a good idea to set the opacity of the ON layers to 0, so that only the unselected buttons are visible.

Step 2a: Preparing to Export from Figma to ProtoPie

Step 2b: Make sure the imported layers are editable

Open the component editor for the Radio Buttons component. We’re now going to create the necessary variables:

Add an overridable text variable called ‘

’ - we use all capital letters to represent overridable variables.

Add another overridable text variable called ‘

’ - no capital letters for formula-defined variables - and put in the formula 

. This enables your radio buttons to have spaces in their UI representation, but an internal value without spaces (this would mess with using JSON).

Add a text variable called ‘parameters’, defined by the formula “

{\”Set\":"+Set+", \"Value\":"+Value + “}

Lastly, add a text variable called ‘sender’. This will be used to receive the value when a message is sent.

Step 3: Preparing editable layers and variables for the triggers and  responses

Now you can add the code to the component. First, you need a ‘

’ trigger to fill out the various potential text fields with the appropriate labels. For each text field in your component that should show the button’s label, add a text response to put the variable ‘

Step 4: The 'Start' trigger and its responses

The main code required is a response to a ‘

’ trigger; when the component is tapped, turn the button on using the necessary action. At its most basic level, this could involve setting the opacity of any ‘

’ layer to 100 and the opacity of the ‘

Aside from turning the button on, you also need to send a message to the whole scene to indicate that a ‘

’ has been chosen, which is passed with the variable parameters as its value.

Step 5: The critical Tap trigger and responses

’ message. If another button instance is selected, then this instance needs to turn itself off. To do so, add a ‘

’ and assign the attached value to the variable sender. Now we can use the parseJson function to check if the sender is in the same set, but has a different value, in which case we turn it off (reverse the ‘

Step 6: The 'Receive' trigger and its responses

You can now switch back to the scene to use the new component. You need to create a ‘

’ message in the scene, which will also assign the attached parameters to a variable called ‘

’. Then, for each of the possible sets, you check if the sender is in that set, in which case you store the value in the appropriate variable. This code will need to be manually updated for each radio button set you want to create.

Step 7: The 'Receive' trigger for assigning the result to the Scene  Variables

To use the pie, drag repeated instances of the component into the scene and give each its own 

 to belong to. You also have to create a variable to store the current value for that set. A set can contain as many buttons as you want, but each button must have a different 

Each radio button will still show both the Tick and Dot variants, so within each 

 you also need to hide all the Tick or Dot versions.

Step 8: Hide one of the variants in each button set and assign each button a LABEL and a SET

Now you can return to Figma to refine the visual design of your radio buttons, adjusting colors, fonts, spacing, or alignment. When you're ready, simply re-import the updated frame into your ProtoPie component.

As long as you haven't directly modified those properties in ProtoPie, they will automatically update to match your Figma design. Your interactions should continue to work perfectly.

 If you accidentally changed a property in ProtoPie (e.g., the color of the "Tick" or "Dot"), it will no longer sync with Figma. To fix this, delete the modified layer within the component, re-import the clean object from Figma, and then relink the new layer in any responses that were using it.

 To experiment with changes in ProtoPie without breaking the Figma link, apply them using a Start trigger. This code-based approach overrides Figma styles only when the prototype is running, keeping your component's structure clean.

The next tutorial will take the Figma story a step further and explain how to create reusable components from a Figma Design System in a ProtoPie Team Library. That way, it is possible for one team member to make changes in Figma, update the ProtoPie library, and then all pies built from that library will adjust to the new design system without any recoding.

, Director & Consultant of UX Design.      

Learn how to create a powerful, scalable radio button component from a single element, reducing code and improving your prototyping workflow.

A Guide to Creating Reusable Components in ProtoPie - Part 2

Configuring Variables and Calculating Prices

Before jumping into the process of creating the pie, please make sure you have accessed all the necessary design assets we’ve prepared for you:

Access the Starting Pie File with Instructions.

Click the file link and open it in ProtoPie Studio.

. You’ll be using them a lot throughout your prototyping journey to add realism and depth.

Select the group layer you wish to scroll.

 Group content within scroll containers for smoother interactions.

Next, let’s connect user inputs (Triggers) to visual behaviors (Responses).


Example:  Coffee Size Selector (Curto, Medium, Venti)

 response, setting Curto border opacity to 

Add two additional Border responses to set Medium and Venti borders to 

 Resetting border opacity ensures clarity in selections.

Now let’s add Toggle interactions like toppings selection effectively with Conditions and Logic.


 Conditions and Variables are key for toggles.

To create a true high-fidelity prototype, you’ll want the pie to have more than mere visual responses. Most prototypes require some logic to put 2 and 2 together!

To achieve that in ProtoPie, you can easily manage selections using Variables and Dynamic Calculations.


Add scene-specific variables: CURTO, MEDIUM, VENTI, WhippedCream, Ice, total_price.

Enable debug mode to verify variable values.

(CURTO * 4.59 + MEDIUM * 5.39 + VENTI * 6.79) + (WhippedCream * 3.06) + (Ice * 2.00)

Detect changes in total_price to highlight selections (e.g., color #D8FF99).

 Use debug controls to verify your logic.

Share your creative prototypes and claim your 1

 Submit via our survey or use the hashtag 

Building Interaction Design Systems with Conditions & Variables

Make your prototypes stand out by mastering our Simple Pies Series to quickly learn essential prototyping skills.

Learn Fast with our Simple Pies Series: Build Interactive Prototypes Easily

Static mockups are fine - until they aren’t. Especially in FinTech, where real-time insights matter, a simple image won’t cut it. To create a truly immersive and realistic user experience, you need dynamic, live data. Imagine your prototype's expense charts and financial data updating in real-time, just like a finished product.

In this tutorial, we'll walk you through a step-by-step guide on how to integrate Google Sheets with your ProtoPie prototypes. This guide will show you how to pull data directly from a spreadsheet to create powerful, data-driven prototypes.

Part 1: Retrieving Your Google Sheets Data

The first step is to get your data from Google Sheets into ProtoPie. We'll use ProtoPie Connect and its built-in API plugin to make this happen.

Step 1: Set Up the API Request in ProtoPie Connect

In the ProtoPie Connect API plugin, you'll need to create a new request with the following details:

 The URL is a combination of your Spreadsheet ID, the data range you want to import, and your unique Google API key.

The Spreadsheet ID is the unique identifier for your Google Sheet.

You can find it directly in your Google Sheet's URL. It's the long string of characters located between /d/ and /edit.

Next, you need to tell ProtoPie which data to grab. The range specifies the cells you want to import.

This can be a set of columns (e.g., A:C) or the entire sheet.

You can specify the sheet name and range using formats like Sheet1!A1:D1 or just list the sheet name to import all its data.

Step 4: Generate Your Google Sheets API Key

This key authorizes ProtoPie to access your sheet data.

3. In the search bar, look for the "Google Sheets API" and 

6. Your key will be generated. Copy it and add it to your URL in ProtoPie Connect.

Once you've put together your URL, test the request in ProtoPie Connect. If you get an error, the most common issue is the sharing permission on your Google Sheet.

 Make sure your Google Sheet's sharing setting is changed from "Restricted" to 

 A restricted sheet requires an OAuth authorization, which could be used if you want to keep your data restricted but still use it in your prototype. Though that type of authorization will not be covered in this tutorial.

Once the API request is successful, ProtoPie receives a long string of raw data from your sheet. Now, we need to parse this data (break it apart) so we can use it in our prototype.

The data from Google Sheets is organized into "values," which represent the rows in your spreadsheet. The first row typically contains your column titles (e.g., "Name," "Date," "Amount"), and the subsequent rows contain the actual data.

Step 1: Parsing Basic Data with parseJson

The parseJson() formula is the key to accessing specific pieces of information. Let's look at a basic example for retrieving metadata:

 parseJson(metaData "values."+ (ID+1)+".0")

This is the variable where you assigned to store the raw data from the API call.

 This tells the formula to look inside the "values" section of the data.

 This selects the row you want. We use +1 because the first row (row 0) is usually the titles, and we want to access the actual data rows that follow. So, to get data from the first data row (which is the second row in the sheet), you look in the second set.

This selects the specific item within the row. Data items in each row are indexed starting from 0. So, .0 gets the first item, .1 gets the second, and so on.

Step 2: An Advanced Example for Dynamic Chart Data

Sometimes, the data structure from Google Sheets isn't ideal for direct parsing. For instance, if you have monthly expenses listed year by year, finding a specific month's expense requires a workaround.

 parseJson(googleSheet,"values."+((year*12)+ monthID +1)+".2")

This formula might look complex, but it's just using math to pinpoint the exact data we need.

We use variables for the desired year and 

 This part does the heavy lifting. If your data has 12 months for each year, this calculation skips down the rows in blocks of 12 to get to the correct year.

: After finding the right year, this adds the month's number to find the right row.

: This would grab the third piece of data in that row (e.g., the expense amount).

And there you have it! By connecting Google Sheets to ProtoPie, you can move beyond static designs and build prototypes that are as dynamic and responsive as the real thing. You can now pull live data to power charts, lists, and other components, creating a richer, more convincing user test.

Remember to generate your own Google API key and set your sheet's permissions correctly.

Go beyond static mockups by integrating Google Sheets with ProtoPie to create dynamic, data-driven prototypes that respond in real time.

Effortless Integration: Connecting Google Sheets to Your ProtoPie Prototypes

There have been discussions recently about team collaboration in ProtoPie and what kinds of best practices there might be. One of the strengths (and weaknesses) of ProtoPie, much like Figma, is that there are often multiple ways to achieve the same result. While this is beneficial for rapid development, it can pose challenges for team collaboration.

 is a crucial step in simplifying collaboration. Learning to build well-structured, reusable components is a key skill for effective teamwork. This tutorial will demonstrate some best practices for constructing reusable components within a ProtoPie library.

For this guide, I will be using components within a local pie. However, for team collaboration, these would ideally be built in a shared library. This allows updates to be shared among the team, ensuring consistency across all pies.

To keep things simple and make the core concepts clear, I'll use the humble radio button as our example. Imagine a game with an initial screen where the user must choose a player ('Player 1' or 'Player 2') or a difficulty level ('Easy' or 'Hard').

The starter Pie for this tutorial has this exact setup, but it's all hard-coded, with no attempt at reusability. If you examine the file, you’ll immediately see the potential for reusability, as the code for all four of the radio buttons is essentially the same.

To truly understand the value of components, try adding a third difficulty level ('Moderate') to the starter pie. You'll find that this requires numerous edits, and it's easy to miss a small change and break the prototype. Furthermore, as you add more buttons, the list of triggers and responses for the scene becomes increasingly congested, and that's just to make the radio buttons work, without even considering the interactions that react to their input.

Once you're convinced of the benefits, we can proceed with the following steps.


Select the container named “Name Buttons” and choose Create Component. Rename the component to “Radio Buttons” and begin editing it. Ensure the Container Layer is set to Auto Layout (Hug and Hug). Finally, change the name of the text variable “Name” to “Value”.

Select "Button 1," copy it, and use “Paste with Linked Triggers” five times. You should now have six radio buttons, with layers named from Button 1 to Button 6.

Go through all the layers within the component and edit the layer names to be accurate. For example, the "Label" field in "Button 4" should be renamed to "Label 4" instead of "Label 1."

Next, review the list of triggers and responses. Change the descriptions to accurately reflect what each one needs to do. It's much better to do this before editing the responses, as it makes it easier to review each action against its description.

Now, edit the actual triggers and responses. The assignment of a label to the 'value' variable needs to be adjusted for reusability. Instead of "Player 1," use expressions like ‘Label 1’.text. With six buttons, you'll also need to ensure that five buttons are turned off when one is turned on. This means the response for setting the opacity of 'On 2' to 0 needs to be duplicated four times for the additional buttons.

Preview the component to ensure that the new buttons update the correct indicator.

We need a way to send the updated value back to the main scene. To do this, add a trigger for the 'value' variable and use it to send a new message (let's call it NEWVALUE) to the parent. Include the 'value' variable as a parameter in this message. After setting this up, you can return to the scene.

Back in the main scene, delete the old “Difficulty buttons” container. 

Drag a new instance of the “Radio Buttons” component into the scene and name this layer “Difficulty buttons.”

The instance that is already there should be renamed to “Name Buttons.”

Step 9: Receive Messages from the Component

Add a Receive trigger to the scene to listen for the NEWVALUE message from the child component.

Assign its parameter to the appropriate variable. 

Then, duplicate this trigger and configure it for the other child component and the other variable.

In the "Name buttons" instance, decide how many player options you want and hide the remaining radio buttons. Change the labels for the visible buttons as needed. Repeat this process for the "Difficulty buttons" set.

You should now have a functioning prototype with two sets of radio buttons. You can preview the pie and see the correct values being assigned to the 'Name' and 'Difficulty' variables. While the button labels are correct now, we will explore further customizations next time.

If you compare our starting point with our final result, we now have a scene with very simple triggers and a robust component that can deliver any set of 2-6 radio buttons as needed. Adding a third set of buttons is now a straightforward task.

In the next tutorial, we will enhance this component further, adding the ability to display selected buttons differently and perhaps even incorporating different selection behaviors.

For an even more in-depth guide, see the full process in action in this video walkthrough by 

 ProtoPie Reusable Components Tutorial Part 1

A Step-by-Step Tutorial by David Gilmore for Better Team Collaboration.

A Guide to Creating Reusable Components in ProtoPie - Part 1

The need for prototypes that feel as if you’re actually moving

Nothing beats UX testing on ‘the real thing. ’ But when you’ve spent any time working in automotive HMI design, you know that testing your designs in an actual prototype car is a rare luxury. 

If you’re lucky, you may have access to a buck setup for judging your UI visuals and ergonomics in a semi-realistic layout.


The lack of realism gets particularly tricky when user testing. As a researcher, you’ll have to do a lot of explaining to provide your test users with enough context to understand what they’re looking at (“

Now imagine you’re driving on the highway at 120km/h.

RemotiveLabs has developed something that could alleviate this missing realism. Their tools provide streams of real vehicle data (telemetry, location, etc.), which can help automotive software developers test applications with realistic data in their simulators.


This allows for multiple ways to power simulations: 

Choose from a pre-made library of sample recording,

Upload your own signal data files (e.g., BLF, ASC, or MF4)

Or even connect an actual vehicle for a live data stream to test your HMI designs under real-world conditions.

Wouldn’t it be nice if we could test our interactive car UI prototypes with real car data?


Test prototypes of instrument clusters with realistic data (-visualizations).

Use vehicle data to bring infotainment mockups to life.

Duct tape a touch screen into any car and feed live data into a prototype UI.

Being curious how easy it is for an automotive UX designer like myself to incorporate this into a real-world design prototype, I decided to try and integrate RemotiveLabs’ tools into a typical UI design workflow.

Our UI Experiment: Figma, Protopie, and RemotiveCloud

Today’s de facto UI design tool is Figma. Design teams and their stakeholders use it to collaboratively iterate on design proposals.

Ideally, these design iterations also include testing:

Designers need to test their design proposals to evaluate the dynamic aspects of their concepts ‘in motion.’

User researchers need to do user tests with actual users to test intuitiveness, learnability, and ergonomic factors.

Unfortunately, Figma’s prototyping features are a bit rudimentary and usually not sufficient for automotive purposes. So, for interactive prototyping, I prefer another tool: Protopie.

RemotiveCloud streaming vehicle data into an HMI prototype on a touch display


In the automotive world, Protopie is a popular prototyping platform because it allows the use of multiple simultaneous (touch) displays, sensors, and complex conditional logic. 

We will need a Protopie license that includes Protopie Connect (an add-on to Protopie that allows prototypes to communicate with external devices and data sources).

To begin with, we’ll take the  automotive dashboard UI from Figma and bring it into Protopie to add the interactivity.

Once we have the prototype set up in Protopie, we’ll make a connection with RemotiveLabs’ toolset and drive various objects in our UI with streams of vehicle data.

If we can figure out how to do this, the world’s our oyster: we can use real vehicle data as parameters for controlling any aspect of our user interface.


Above is the HMI design for a fictitious urban micro car

We will be making an infotainment screen for a fictitious urban mini-mobility vehicle. It has a basic central touchscreen, which functions as both a simple infotainment screen and as the instrument cluster.

The vehicle is designed for short trips around town (typically < 30 minutes), so functionality-wise, we will keep the system simple:

An instrument cluster with the basic information needed for driving the vehicle.

A music section, which offers digital radio and a Bluetooth music connection to your phone.

Let’s go: setting up the demo project in Figma

In this experiment, we’ll be feeding real vehicle data into various aspects of the instrument cluster section of the screen.

To make this work, we don’t need to do anything special in Figma. We can set up the design as we always do. Needless to say, it will make everyone’s lives easier if all layers have meaningful names - but that’s good practice, anyway.


Getting your Figma frames into Protopie is literally easy as pie. The kind folk at Protopie provide a plugin for Figma, which lets you import frames from Figma and turn them into fully editable Protopie “scenes”.

Your Figma design will typically carry over 95% intact. The main things I have seen break in the conversion are:

Background blurs (for that popular frosted glass effect)

Image aspects, which can typically be easily corrected in Protopie

To bring gradients (e.g., for masks) over from Figma to Protopie, I recommend copying the gradient layers in Figma as SVG and pasting them in Protopie.

Download ProtoPie's Figma Import Plugin here: 

Preparing the ProtoPie for real-time data inpu

The first thing we need to do is to make any layer or object that we want to manipulate ready to receive changes. We do this by selecting the objects and clicking the “Make editable” button for each of them.

Tips & Tricks

Learn Fast with our Simple Pies Series: Build Interactive Prototypes Easily

Latest posts

A Guide to Creating Reusable Components in ProtoPie - Part 2

Effortless Integration: Connecting Google Sheets to Your ProtoPie Prototypes

A Guide to Creating Reusable Components in ProtoPie - Part 1

Automotive UI Prototyping with Real Car Data

ProtoPie Connect and Unreal Engine 5 Integration

Why Move from Figma to ProtoPie for Advanced Prototyping

Create a Stopwatch Timer using Formulas and Variables

How to Prototype a Dropdown Menu with Components

How to Use QR Code Interactions in Your Prototypes

Lesson 2: How to Use the Handoff Feature

How to Create a Looping Scroll Carousel for Web

How to Design a Circular Slider with Conditionals

How to Prototype a Functional Video Player

How to Create a Draggable Slider with a Dynamic Number Indicator

10 Easy Prototypes You Can Replicate Today