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

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.

We'll also apply the same logic to the background images inside the "ct-bg" layer. These images are positioned behind a "Background Blur" layer created in ProtoPie. When "Modern Architecture" has an Opacity of 100, the corresponding image inside "ct-bg" named "Modern Architecture" should also have an Opacity of 100. 

Apply the same rule to the other layers: if an image is visible in the carousel, the corresponding image inside "ct-bg" should have its Opacity set to 100, while the images that are not being shown should have their Opacity set to 0.

If you try the prototype now, you can see that 

 stays there no matter which image is showing. This is because we haven't set up the condition for the other titles. Next, we'll do the same thing for 

add responses when scroll values are 1171 and 2342

Let's check in the preview window. You now have a clickable scrolling banner with dynamic titles! But... something's still not right. Once you get to the end, the banner does not loop. Next, let's make it loop!

To make it "loop", we need to duplicate the first image and put it on the right. Also, duplicate the last image and put it on the left. These 2 images must also be inside the paging container.

Now that you've seen it, we are not actually looping the same image. Instead, we fake the loop and make it feel like it is looping in the prototype. Smart, right?

　1. Add a condition in the detect trigger. We'll use the 

　2. Under this condition, add a scroll to the paging container to 

This is the fake loop that we discussed just now. So 

the condition will immediately move it to 2342.

 The duration needs to be 0 because we don't want the user to see any changes in the visual. We want it to scroll to 2342 instantly.

　3. Add one more condition. When the paging's scroll value is

to 0 because we want the scroll to be invisible and instant.

Let's check in the preview window... and you just made a looping scroll carousel!

Play around with the carousel and look at how seamless the experience is! That was fun.

In this tutorial, you've implemented the scroll trigger, variables, and conditions. Not to mention the looping effect! 

Try playing around with these learnings and you will be able to create even more interesting interactions! We would love to see your crazy experiments. Create your own prototypes with ProtoPie and share it on 

Learn how to create a looping scroll carousel for websites using the scroll trigger, variables, and conditions.

How to Create a Looping Scroll Carousel for Web

Sliders let users easily adjust a value within a range by moving a control, like a knob. They’re perfect when you don't need an exact number, just a general selection.

In this tutorial, you'll learn how to create a circular slider where users can control a knob that adjusts a percentage display. ProtoPie simplifies this process with its Chain trigger and variable elements. The Chain trigger lets you link the knob’s rotation to the slider’s active area, while variables help calculate the rotation to update the percentage value shown.

Step 2. Reveal the active part of the slider using a mask and the Chain trigger

Step 3. Make the text value correspond to the knob's rotation

1. To begin, create a container that matches the size of the radial dial. Then, drag the Knob object into the container and rename it as "Knob Container.”

2. Change the Knob Container's origin to the 

3. With the Knob object selected, add a Drag trigger. Select the Knob Container and add a Rotate response. You can now rotate the knob perfectly around the radial dial in the Preview window.

: There’s another way to make the Knob object draggable in a circular slider, but it’s less efficient than the method we’re using in this lesson.

The alternative involves changing the Knob’s origin to the center of the component and using a Rotate response. However, in ProtoPie, the origin values are set as percentages, which makes it tricky to achieve precise accuracy. It often requires trial and error to get the Knob object to rotate perfectly around the dial, which is why we recommend the method outlined in this tutorial.

In the following steps, you will use masks to begin setting up the reveal of the active part of the slider as the knob moves along.

1. To start, create two shape halves that split the circle vertically and place them on the left and right halves. You can look at the sizes of the left and right images to get the correct measurements (128x256). You are creating two halves because the split of the halves bisects the knob, and as the knob rotates, the halves also rotate to reveal the active part.

2. You will place the right-half image within a mask on the left side. Drag the left side, shape half under the right image, and with the shape half selected, select ”Use as Mask.” Remove the fill of the shape layer. Notice that all the layers above your elements are also masked. Instead, you want to select the right image and left mask and put them in their own container.

3. Put the left image into a container with the right shape layer and create a mask.

In the next steps, you are going to chain the rotation of the masks to the rotation of the knob container to create the active reveal.

 (or directly in the middle of the circular slider). Repeat this for the 

so the origin is also directly in the middle of the circular slider.

2. Add a Chain trigger to the Knob Container's Rotation.

3. For the reveal on rotation, it will start with the right half because it will reveal first as the knob moves along. Select the 

 and add a Rotate response to the Chain trigger. Type in the values so all they go from 0 to 180.

 and link a Rotate response to the Chain trigger. The ranges will be from 180 to 360 for rotation and from 0 to 180 for angle.

 variable, which will assign values based on the value of the container. Change the range on the 

2. You can click the debugger icon to see if the value changes. Open the 

 and try dragging—you should be able to see the value changing as you drag. You will notice that the value includes two decimal places. Don't worry; we'll address this in the next step.

. Change the content to formula. You will use the formula 

.This will remove the decimal points and round to the nearest whole number.

Great job on working through this tutorial! We hope you enjoyed creating circular sliders for your awesome ProtoPie projects. We would love to see your creative experiments. Create your own prototype and share it on 

Learn how to create a circular slider using ProtoPie's conditionals and variables.

How to Design a Circular Slider with Conditionals

With the digital age's ever-growing influence, music and video have firmly established themselves as our primary sources of entertainment. When tasked with designing an app centered around audio and video experiences, one pivotal factor emerges: advanced prototyping.

Consider the apps that dominate our screens daily: Netflix, Spotify, TikTok, and Facebook. At their core lies a dependable media player, with fundamental functions such as play, pause, seamless progress control, and precise volume adjustments.

 as your trusty companion, advanced prototyping becomes more approachable than you might think. In this tutorial, we encourage you to step into the shoes of leading app designers. We'll demonstrate just how easy it can be to shape multimedia experiences that are both captivating and attainable for starting designers.

Create an interactive media player using ProtoPie  

Join our masterclass for TV and video streaming

While our demonstration focuses on a video player, the steps we'll cover apply equally to an audio player. Before we dive into the details, let's take a quick look at the interactions you'll be able to create:

 — You can simply click the play/pause button to initiate or halt playback. Alternatively, a click anywhere on the video will achieve the same play/pause action.

 — To navigate the video's progress, you can either click any point on the progress bar or drag the bar itself.

 — Adjusting the volume is as easy as dragging the volume slider. Notably, the volume icon will adapt its appearance based on the volume level. Alternatively, you can mute the video by clicking the volume button directly.

Here’s a preview of what you’ll learn. But before we dive in, let's amp up the excitement. Make sure you've got the ProtoPie Player app all set up on your smartphone. This app is your key to testing and validating the impressive media player controls you're about to bring to life!

Download the starting Pie file below, and open up our media player prototype in ProtoPie Studio.

Create an interactive video player using ProtoPie

, you can easily enhance your prototypes with seamless video and audio integration. ProtoPie offers support for various types of media files, including:

When you open the starting pie file, you'll notice a set of pre-made interactions within the template. These interactions encompass hover effects for overlays, buttons, and various functions, achieved through the 

Let's open the preview window and take a closer look at what's at your disposal:

Hovering over the video player triggers an overlay showcasing different functions.

Tutorials

Create a Stopwatch Timer using Formulas and Variables

How to Prototype a Dropdown Menu with Components

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

How to Create a Sticky Header that Responds to Scrolling

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

ProtoPie Connect and Unreal Engine 5 Integration

Ultimate Guide to Prototyping with Google Maps API