Time-based UI's are occasionally overlooked in UX design strategy, but stopwatch-styled timers are common features in exercise, cooking, and productivity apps. Consider the apps you use that include a temporal aspect of tasks and how you might incorporate a stopwatch timer into the app prototypes you are designing.

allows designers to create functioning stopwatch timers by using formulas, detect functions, and variables. With these powerful tools, ProtoPie is able to read and react to changes in data. While it may seem complicated, exploring these skills will prove that ProtoPie is a powerful tool for your data (and time) oriented designs!

Automate the centiseconds using a variable

Increase the second using detect and condition

Increase the minute using detect and condition

In the end, you’ll be able to make something like this!

In the assets, you'll notice that the interactions for the 

 have already been created. This is made with the 

 feature. If you want to learn how to make a button based on Condition, please check 

How to Make a Toggle Button with Condition

1. Automate the centiseconds using a variable

　1. You are going to start working on the last two digits (centiseconds) and making them start and stop with the button. Create a new 

. Leave the variable's defaults so it will remain as a number and starting at 

. Drag out your debugger onto your preview screen so you can test your work.

 variable. Testing your start and stop button in the preview, you'll notice the numbers do continuously go up and will stop with the button.

. To do this, add a new trigger and select 

　5. Create a condition, that reads when the 

. It is very hard to notice this delay, but it is important for later on. Using your debugger, you can see that the value goes to 99 and then restarts at 0.

　6. Now, we want to assign this value to the text. Under the detect trigger, add a 

. This formula ensures that there are two digits in the centiseconds by inserting a 0 with single-digit numbers.

 Left-pad a text with another text, to a specific length.

2. Increase the seconds based on the centiseconds

　1. When the centiseconds reach 99, we want the seconds to increase by 1. To do this, add a variable and rename it 

. Drag the debugger onto your preview scene.

 under the Condition we just created and link it to the 

, the seconds will increase by 1. Change the start delay to 0.01. Do not make this repeat.

　3. Assign the variable to the text by adding a 

 and will add a 0 to all single-digit numbers.

　4. Make sure to change the start delay to 0.01 and that the Text response for the 

 response. The order of the interaction pieces is also important. Make sure that the 

 response. You do this because you want ProtoPie to trigger the 

3. Increase the minutes based on the seconds

This means that when the seconds reach 59, it will delay by 1 second before restarting to 0.

　3. Along with resetting the variable, you need to reset the text. Add another 

　4. To link the minute variable to text, create a variable and rename it "

 response and link it to the minute variable you just created. The formula will be 

 response under the assign, link it to the 

　6. In the preview window, when the seconds reach 

 response linked to the centisecond variable.

 (centisecond, second, minute) followed by 

 reset responses each linked to these three variables. Create 

 reset responses each linked to the text of these three variables.

　3. You also need to reset the start/stop button's to their original state. Select the 

 layer and create a reset response. Then, create a reset response with the 

Congratulations! Your stopwatch timer is ready

You explored many advanced techniques in this tutorial including using 

! Now that you've learned these techniques, consider how you can incorporate other strategies to make stopwatch timers for your unique designs!

Ready to bring your ideas to life? Download ProtoPie now to start building your next prototype, and don’t forget to share your amazing work on LinkedIn, X, or Instagram with #MadeWithProtoPie. We can't wait to see what you create!

In this advanced tutorial, you'll prototype a stopwatch-styled timer while exploring how formulas, detect functions, and variables can manipulate data.

Create a Stopwatch Timer using Formulas and Variables

Dropdown menus are an essential selector element because they condense lists into a menu that can easily expand and contract. When the menu is activated with a click, a "drop-down" displays the list of values until the user selects their choice, and the menu returns to show that single item.

Retail sites often use dropdown menus to organize lists like calendar dates or size selections to deliver a clean interface and easy usability for users.

 will help you achieve a faster workflow for creating dropdown menus using 

 that reduce repetitive tasks. ProtoPie also uses Send and Receive functions to seamlessly share information between inputs. Have fun!

Step 3. Display the selected value in the text field using Send and Receive

Step 4. Enable the menu to expand and collapse by setting up a conditional interaction

Step 5. Make the menu disappear on selection

In the end, you’ll be able to make something like this👇

1. To start, delete list items two and three because you are going to be creating and using 

. Components are saved layers and interactions that you can reuse. They save you from doing repetitive work and accelerate your prototyping.

 remaining, select and convert it to a component. The layer's icon will turn from a grey container icon into an aqua-colored component icon.

3. Copy and paste these components to create three items and drag them down to create your list.

 response for each trigger, both linked to the 

 layer editable in the component (this step is only needed if you've imported assets from another design tool).

6. Go to the main scene (Dropdown menu), where you can customize the text of each component.

7. Check the preview to confirm that the opacity changes when you hover your mouse. All items should respond to the hover effect since any changes made to the main component automatically sync with each instance of it.

1. Return to the main component and add a 

 are isolated from each other and scenes. To overcome this limitation, we need to use Send and Receive functions. In this step, you are creating a 

 response in order to share information between your component instances. In this case, we'll use Send and Receive to specify which item is selected and let the main scene trigger deliver a response based on that.

 because you are sending and receiving in one scene, but open the channel menu to the options for where you can send information.

 because we want to know which component has been selected.

5. The formula you will be using here is 

 This means you will be sending the value of the text layer and the message to the component's 

 for all scenes. It is important that you change the variable in the property panel into a 

 format because that is the format you'll be using. You'll use this variable to store the value sent from the component.

 trigger, select your text value to send in the message, and 

 the text value to the variable you just created.

 to have the variable displayed in your Preview window. This debugger tool lets you check things are working properly. As you click on any item, the selected value should be displayed in this variable.

 trigger with the text layer as the input field.

. You can also add a color response to customize your text. In this example, we chose a dark grey (#2C3038).

Let's add more interactions to the dropdown menu itself.

 trigger to the input container. Add a 

3. When the condition of the dropdown menu's 

. In other words, when you tap the input, the dropdown menu will appear.

 response to the small arrow for an additional micro-interaction. Do this by adding a 

 to be in its center. Rotate the arrow to the degree you want, in this instance, 

6. To reverse this sequence, duplicate the condition, change the new condition's opacity property to = 100, and change the 

 to change the opacity to its initial state.

In this case, you can't use reset of rotation because a reset response doesn't allow you to choose a rotate direction.

1. Don't forget to also make the menu disappear when an item is selected. To do this, duplicate the interactions you just made and move them into the 

2. You can add one more interaction to make the menu disappear when clicking outside the component. To do this, add a 

 layer and duplicate the interaction you just made into this 

You've learned how to create a dropdown menu using components. You included beautiful interactions that will make your prototypes sing!

We’d love to see your creative experiments! Create your prototype and share it on 

Learn how to prototype a dropdown menu using components in this easy step-by-step ProtoPie tutorial.

How to Prototype a Dropdown Menu with Components

Did you know that you can scan real QR codes using ProtoPie's 

 feature and unlock a wealth of smart interactions? For example, you can scan a QR code to open a webpage or trigger a wide range of other actions in your prototype.

With the new QR code scanner, you can unleash your creativity and make your ProtoPie prototypes even more expressive and realistic!

The QR code scanner feature is available to all ProtoPie users, regardless of their plan.

How to generate QR codes for your prototypes

How to enable the QR code scanner in ProtoPie

How to use the “Keep Tracking” option

Unleash the power of QR codes in your prototypes

You can create your own QR codes for free on 

Activate the QR code scanner option in either:

You can overlay an image on your QR code by placing it on top of the Camera layer.

The QR code scanner has two capabilities:

Let's examine in detail what each option enables.

The "Open URL Immediately" option in ProtoPie allows you to scan a QR code and open a link directly in a web browser.

Use this feature creatively to prototype popular mobile interactions, such as scanning a QR code to open a video or initiate a payment transaction.

The "Keep Tracking" option enables you to monitor values stored in your QR code.

ProtoPie lets you store QR code values in 

Here is a list of the QR code predefined variables that we currently support:

Storing QR code values in predefined variables opens up many interaction design possibilities! For example, you can store a QR value and display the information it contains in another scene. Or you can animate layers based on the QR code’s position and size, as in this prototype example here below.

In this prototype, the overlay icon scales and moves based on the X/Y coordinates and width/height of the QR code. To see how this effect was created using the new QR code predefined variables, download the prototype 

Ready to take your prototypes to the next level? Start exploring the endless possibilities with ProtoPie's  QR Code Scanner and make your interactions smarter and more engaging than ever. Whether you're scanning to trigger actions or navigating to a webpage, the power is in your hands.

Download ProtoPie today and bring your ideas to life with ease!

Make your prototypes even more expressive by adding QR code-enabled interactions.

How to Use QR Code Interactions in Your Prototypes

Welcome to the second installment of ProtoPie School, where we quickly get you up and running with ProtoPie. This article will cover a great ProtoPie feature called 

ProtoPie has made this feature more accessible to designers by allowing up to one interaction recording for Basic and Free plan users. Once you subscribe to the Pro or Enterprise plan, you can record and share unlimited recordings with your team.

You can use any Pie you like, but if you want to follow along with me, you can use this one:

By the end of this tutorial, you'll know how to:

Share the interaction recording with your team

The ProtoPie Handoff feature bridges the gap between design and development, ensuring your interactions are faithfully translated into code.

 that showcases user flows, element behaviors, and interactions in your prototype. An interaction recording goes beyond a simple handoff—it's a fully interactive specification, complete with a scrubbable timeline, easing parameters, start and end properties, and precise timings. This eliminates guesswork, giving developers a clear, frame-by-frame guide to your intended design.

Step 1: Upload your Pie to ProtoPie Cloud

 icon in the upper right corner of Studio's interface.

 to save your Pie in ProtoPie Cloud. The interaction recording will be saved in the same place.

Once the upload is complete, you will be taken to the Pie cloud page.

 button on the right-top side of the cloud page.

Interact with your Pie showcasing the specific interactions you'd like to hand off to your engineering team. When you're done, click the 

Your interaction recording will be saved as ‘New Recording’ by default. You can rename it from the 

That's it! In just a few seconds, you've created your first interaction recording.

Step 3: Review your interaction recording

After you stop recording, you'll be able to review your recording. An 

 consists of a timeline of everything you recorded and a visual preview of your Pie that updates in sync with the timeline.

Your interactions on the timeline are grouped into Triggers and Responses, just the same way you see them in Studio.

 Drag the red upside-down teardrop control — this is the play head — right and left. This will allow you to scrub through the interaction you just recorded frame-by-frame.

Play the animation back at different speeds:

 You can make the animation playback faster or slower. Click the playback speed icon and choose a playback speed. Then click the 

 icon to start the animation — it will change to a 

 icon allowing you to stop playback. Playback will resume from the playhead's current position. You can reposition the playhead at any time while the interaction is playing, either by dragging it or clicking in the top bar of the timeline.

 You can make the timeline taller or shorter by dragging the division between the preview and the timeline.

Inspect the animation of a particular Response:

 Click on any Response in the timeline, and an inspector window pops up on the upper right side of the screen. These show the exact values of properties at the start and end points of your animation, the animation curve easing parameters, as well as the "current" value of the particular property you are inspecting. The current value updates in real time, in sync with the playhead.

 The Layers stack is available to the left of the preview. If you click on any layer, the inspector window on the right updates to show its properties in real time, in sync with the play head.

Lastly, you'll want to share the interaction recording with your team. You have two ways to do this:

. Anyone with this link can access all interaction recordings created for this Pie by clicking the 

 button. To share the cloud Pie link, click the purple 

 button, configure sharing options, and then click 

Share a direct link to a specific recording

. Go to the Pie Cloud page, click the Handoff button, and choose the interaction recording you want to share from the list. Click on it to open the recording page. You can then copy the link from the address bar or by clicking the "

Tips about ProtoPie interaction recordings

Your interaction recordings are protected by the same access settings as the Pie. You can modify these settings by clicking the 

When you make an interaction recording, the recording does not update to reflect any new changes to the Pie you upload to ProtoPie Cloud. It represents that particular version of your Pie at the point you recorded it. So, if the changes you have made affect a particular recording, you'll want to record a new one and share that with anyone involved. Your old one won't be removed automatically — it will appear listed alongside any new one you create. So you might want to get into a habit of including the date you recorded it in the name of the recording, something like this:

Of course, you don't need to keep the old one. You can always delete it if it helps keep things better organized. But be aware: once you delete a recording, it's gone for good. There's no way to recover it.

In just a few minutes, you've learned to use ProtoPie's Handoff feature to create fully interactive specifications for your prototypes to  share with your development team.

Learn how to use ProtoPie's Handoff feature for handing over interaction specifications to your developers.

Lesson 2: How to Use the Handoff Feature

When we browse the internet, we can easily find websites with a looping scroll carousel. It is common practice to use it to showcase images or banners on the homepage. In this article, we'll learn how to prototype a looping scroll carousel for your website, which can be achieved using the scroll trigger, variables, and conditions.

Step by step: How to prototype a looping scroll carousel

1. Make a carousel view using the paging container.

2. Change image name based on the scroll offset

Change image name based on the scroll offset (yay, variables!)

In the end, you'll be able to make something like this!

First, we need to group the images in a container. We need to use the paging property because we want the scrolling animation to "snap" to the image, unlike scroll, which is more flexible.

 and set the width to be as wide as the screen and the height equal to the image height. 

　2. In the Paging Container's property panel, set the scroll direction to

 because the images will move horizontally. Click on the left-right arrow. Let's 

　3. If you want to disable the swiping interaction, you can 

set the height of the Paging Container to 0.

 The reason is that it is not natural to "swipe" using a mouse cursor. However, this is optional—if you feel like keeping the swipe interaction, feel free to do so!

　4. If you decided to hide the swipe interaction, 

 to clip the overflowing images. Set the width to be as wide as the screen and the height equal to the image height. Then, put the 

Go to the property panel on the right side, 

 to hide the overflowing images. If you zoom out, you can see that the images that overflow on the left and right sides of the screen are now hidden.

　5. To make the right arrow icon clickable, add a

property to move the scroll position of the Paging Container by 

💡 Why do we use "Scroll by" instead of "Scroll to"?

. For example, if the current scroll position is at 0. 

, we would move the scroll position to 1171px. What happens if we tap the right arrow afterward? Nothing happens because it is already sitting at 1171.

. Whatever happens, and wherever the scroll position is, if the user clicks on the right arrow, we will move the scroll by 1171px. If we click on the right arrow again, it will move again by 1171px.

Because 1171 is the width of the website that we have on the prototype.

Make the interaction for the left icon using the same method. However, set the scroll by value to -1171.

. A quick way to get the scroll value is to use a variable to detect its value. Here's how to do it in a few steps:

　2. In the property panel, click on the 

 checkbox to enable formula input. This formula will only be available for 

 It returns the Paging Container's current scroll value.

　4. In the preview window, you will not be able to see anything yet. Hover on the variable you just made and 

click on the "bug" icon on the right side

. Once you've done that, you can now see the current scroll value on the top left corner.

Now that we can detect the scroll value, we can have a pointer that will help us know which image is currently visible. For example, we can show the correct name for the image that we are looking at. Let's do it!

 Add a Detect trigger to the Paging Container.

 In the property panel, choose to detect its scroll value. What we are doing here is to "detect" the changes in the scroll value. Then, based on the value of the scroll, we can change the image title accordingly.

 A trigger that detects the changes from a layer property or variables. If a change is detected, the responses will be activated.

　2. To get the names of the images correctly, we need to detect the scroll position of the Paging container. Add a condition when the 

 Because we want to show the correct name for the image when the page is not yet scrolled (scroll position = 0).

When the scroll value is 0, add opacity responses to the titles.

You can also use a text response to change the text. In this case, you only need 1 title layer. However, opacity can give a smoother transition effect.

Tips & Tricks

10 Easy Prototypes You Can Replicate Today

Latest posts

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

How to Create a Sticky Header that Responds to Scrolling

Building UI Animations With Lottie and ProtoPie

Game UI Tutorial with ProtoPie Connect Unity Plugin

3D Car HMI Tutorial with ProtoPie Connect Unity Plugin

Integrating Unity WebGL Build with ProtoPie Connect Web-Embed Layer

Smart Home Prototyping: Arduino MQTT Bridge

IoT Prototyping: ProtoPie Smart Lock Tutorial