We asked our Creative Technologist intern, Joy, to tackle a big challenge: create one high-fidelity prototype that showcases several of ProtoPie's most distinct and powerful features. The result was an interactive and playful recreation of the familiar MacBook setup experience, which she built from the ground up.

We were so impressed that we asked her to share what she learned during the process. Here’s what she told us about her experience using ProtoPie.

"When I was first assigned the project, the biggest challenge was figuring out how to avoid the prototype feeling like a disjointed collection of features. The inspiration came when I realized the MacBook setup process itself could be the unifying concept, with each step mapping to a specific ProtoPie feature.

This project proved to be an incredible learning experience. While the full tutorial is extensive, I wanted to share five of the most interesting technical tricks I learned, along with a final, bigger lesson about the power of prototyping."

 for a detailed step-by-step tutorial on how you can create this pie yourself!]

Highlight 1: Generating Monograms from Live Text Input

This was one of the most rewarding parts to figure out. I wanted the monogram to update in real-time as the user typed their name.

 that watched the "Full name" input field in real-time. Using formulas, I built logic that checked if the text contained a space.

If there was no space, it assigned the input to a 

 variable and took its first letter for the Initial.

If a space was present, it split the text into 

 variables, then combined their first letters to create the two-initial monogram.

Highlight 2: Dynamically Changing Speech Speed

For the "Speak Selection" feature, I didn't want the text-to-speech to have just one speed. I wanted the user to be able to choose between normal, fast, and slow playback.

I achieved this by sending a "Check Rate" message whenever the play button was clicked. This message checks the user's selection and assigns the corresponding duration (Normal/Fast/Slow) to the 

, allowing the Selected_Text to be spoken at the chosen speed. I then used "Start Playing" and "End Playing" messages with delays to manage the playback state and update the UI accordingly.

Highlight 3: Building a Custom Voice Command Timeout

A voice assistant needs to know what to do when a user doesn't say anything. Instead of the interaction just stopping, I built a custom timeout handler.

The solution was to create a small, invisible box and use a "Timer Start" message to make it move across the screen over 10 seconds. A 

 constantly checked if the box had reached its destination. If it did, it meant the user had timed out. The prototype would then stop listening, say "Sorry, I couldn't understand," and prompt the user with what to say next, based on their current position in the flow.

Highlight 4: Creating Auto-Scrolling Live Captions

For the "Live Captions" feature to function properly, the text container must scroll automatically as new words appear, keeping the most recent transcription visible.

 variable that constantly tracked the height of the text container as it grew. I then used a 

 to check if this height exceeded the visible scroll container's height. If it did, a 

 was triggered automatically, causing the container to move down just enough to display the new line of text.

Highlight 5: Handling Pre-Typed Text During Playback

In the "Type To Speak" feature, a user might type new text while the prototype is already speaking. I needed to handle this "buffered" input gracefully.

The solution was to use the "End Timer" handling for the playback. When the prototype finished speaking, it would check a 

If that variable had content (meaning the user had typed something new), it would replace the old text with the new, prepared text.

If the variable was empty, it would simply clear the input field. This ensured that user input was never lost and the interaction felt seamless.

Beyond the technical tricks, this project taught me a few crucial lessons about user experience and the role of prototyping itself.

 I used to think of prototyping as just a final step for testing functionality, but this project showed me that an interactive prototype can be a powerful learning tool in its own right. It allows users to experience the product firsthand and touch and feel its possibilities.

 People don't always need something brand new. By building the prototype around the familiar MacBook setup, I was able to make ProtoPie’s advanced features feel more approachable and intuitive, especially for first-time users. Designing with shared mental models is incredibly effective.

 My first attempts felt like a disconnected demo because I was just cramming in features. It wasn't until I reframed the project around the concept of "setup" that everything fell into place. That taught me that context and story are just as important as the content itself. How you present features shapes the entire experience.

Interested in more tips & tricks on how to get started using ProtoPie?

You can find plenty of learning material, including example Pies ready-to-use, in our 

Discover 5 technical tricks for advanced prototyping in ProtoPie and the bigger lessons our intern learned about context and user experience along the way.

5 Lessons to Prototyping a High-Fidelity MacBook Experience

In this tutorial, we will guide you through the process of creating a high-fidelity prototype that replicates the familiar and playful MacBook setup experience. This project is designed to showcase some of ProtoPie’s most powerful features in a cohesive and interactive way.

We will cover everything, from creating an interactive profile editor with real-time input validation to building advanced accessibility features, such as text-to-speech and voice commands.

This first section focuses on building the "Create Computer Account" screen, where users can input their information and personalize a profile image.

First, we'll build a system to validate user inputs, covering both real-time checks and validation upon form submission.

Create a "Validation" trigger that sends a message containing a 

 variable. This variable will be set to "Continue" for form submission or "Real-Time" for live validation.

This message should be sent when the "continue" button is tapped or when an input field loses focus.

When triggering validation, first initialize a variable called 

Send a "Continue Validation" message if the 

 is "Continue," or a "Real-Time Validation" message if it's "Real-Time."

When the prototype receives "Continue Validation":

Verify that the mandatory input fields (account name, username, password, and password confirmation) are not empty.

If the length of an input field's text is 0 (length(input field layer name.text) = 0), display the corresponding error message for that field.

When the prototype receives "Real-Time Validation":

Check if the password and password confirmation fields match.

If they do not match (password input.text = password confirmation input.text), show an error message.

Based on the validation results, display the relevant error messages.

When the "continue" button is pressed, trigger all input fields to lose focus, which runs the validation checks.

This step covers the logic for the profile editing pop-up window.

 The visibility of the pop-up and the edit button should be toggled when the user clicks the Edit, Cancel, or Save buttons.

When the edit button is clicked, check the 

 variable. If it is "None," disable the save button.

If the user clicks cancel, send a "Reset Profile" message to the Previews component, which reverts the profile to the original 

Also, send a "Reset Selection" message to the Profile component to clear the current selection.

 When the "Emoji" or "Monogram" buttons are clicked, toggle the visibility of their respective lists and selected effects.

Here, we'll handle the selection, display, and scaling of profile images.

 When a profile image is tapped, send a "Select Profile" message with the 

. Also, send a "Reset Selection" message to clear all previous selections before making the new one visible.

 variable to manage which image is displayed on top.

 When the main scene receives the "Select Profile" message, enable the save button.

 If the selected profile is a "Monogram," make the initial text visible.

 Make the scaling "Knob" draggable horizontally. Use a 

 trigger to link the Knob's x-position to the size of the Indicator, the Preview image, and the initial text.

Step 4: Creating Monograms with Name Input

This final step for Part 1 outlines how to dynamically generate monogram initials from the user's input name.

 that tracks the text from the Full name input field in real-time.

 (only a first name): Assign the input to 

 and assign its first letter to the Initial variable.

 and the text after to Last_Name. Then, assign the first letter of 

 plus the first letter of Last_Name to the Initial variable.

 Send the Initial value in a message to the Profile component to update the monogram text. Ensure the initials also scale proportionally with the image scaling logic.

This section covers the implementation of four distinct accessibility features, modeled after those found in macOS.

This feature implements text-to-speech for selected text, complete with an on-screen controller.

 Predefine overridable variables in a component for things like text size, line count, highlight dimensions, and speaking durations (

 When a user double-taps a sentence, send the selected text and duration values to the main scene. Make the on-screen controller visible and reset any previous highlights.

 Allow the controller to be draggable. Add mouseover effects to its buttons. The play/stop button toggles an IsSpeaking variable.

 When play is clicked, check the selected rate (normal, fast, slow) and use the 

 response to speak the Selected_Text at the corresponding duration.

 Create a "Reset all" message that stops speaking, clears highlights, and hides the controller.

Step 2: Voice Assistance - "Hey Pie" Setup (Motor)

This feature implements a voice assistant that responds to different commands.

 trigger to write out the assistant’s answer one character at a time, creating a typing effect.

 for different phrases (e.g., "Hello," "Play some chill music").

 values. For example, if the user says "hello," set 

 to 1 and have the assistant reply, "Hello, how can I help you?". This can also trigger other responses, like playing music or changing the volume.

 Use an invisible timer box to detect when the user hasn't spoken for a certain period (e.g., 10 seconds). If a timeout occurs, have the assistant say, "Sorry, I couldn't understand," and prompt the user again.

This feature displays a real-time transcription of spoken audio.

 Upon scene start, immediately begin listening continuously.

 variable and assign its value to a text field every time it updates.

 Track the height of the text container using a 

 has exceeded the height of the scrollable container. If it has, automatically scroll the container down to show the newest text.

 action before the user leaves the scene.

This feature enables users to type text into a field and have the system speak it aloud.

 Use a start trigger to auto-focus on the text input field when the scene loads.

 When the user presses play or hits Enter, trigger a 

 response containing the text from the input field.

 Calculate the duration of the speech (e.g., 

). Use an invisible timer box to move over this duration.

 When the timer completes, send an "End Timer" message. This should reset the UI, toggle the play/stop buttons back, and handle any text replacement if the user typed while the audio was playing.

And just like that, you've mastered the art of creating awesome, interactive prototypes! Now go forth and build something amazing.

A detailed tutorial on creating an interactive MacBook setup experience, from input validation and profile editing to advanced accessibility features like voice commands.

How to Build an Interactive MacBook Setup Experience in ProtoPie: A Step-by-Step Guide

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

Tips & Tricks

5 Lessons to Prototyping a High-Fidelity MacBook Experience

Latest posts

How to Build an Interactive MacBook Setup Experience in ProtoPie: A Step-by-Step Guide

A Guide to Creating Reusable Components in ProtoPie - Part 2

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

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