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

Prototyping user interfaces is crucial in the design process, enabling designers to test ideas and understand user behavior.  

 simplifies this by allowing you to create high-fidelity UI animations and experiences using 

In this tutorial, we’ll show you how to create a simple UI animation in a pet care app mockup using Lottie and ProtoPie, offering a playful experience for hiring a pet sitter.

2. Create the UI design & export to ProtoPie

First, you need to have some UI animations ready to use in ProtoPie. You can download free animations from LottieFiles or even buy them from the marketplace. You can also create them yourself in Adobe After Effects. If you are unsure how to start, this 

For this prototype, I’m going to rig a dog character and keyframe its walk cycle. You can also use popular After Effects plugins like Duik or RubberHose to speed up your workflow.

When you’re happy with the animation, export it to a .json file using the LottieFiles plugin. Make sure to convert all expressions into keyframes in the export settings.

Next, we need some UI to stage our cute animations. You can design directly in ProtoPie. If you haven’t used it before, first you might want to check out this quick start guide: 

How to Make Interactive Inputs with Figma and ProtoPie.

Designs can also be imported from Figma, Sketch or Adobe XD. Just remember to name your layers properly to save yourself a hassle later.

Our design has two buttons to pick the size of a dog. Creating a component makes it easier to set the custom behavior of your elements. To do this, select the button layer and click on the component icon in the top toolbar.

Selecting one button from the set deselects the other. To achieve this, you can use the 

 trigger to the button with a condition checking for the background color. When it’s grey, it means that the button is being selected. Change the background to green, the font color to white and show a drop shadow. Send the message to the current scene to deselect the other button.

 trigger with the “deselect” message. When your component receives this message, the button will no longer be in the selected state. Then, change the styling to the deselected grey button.

You will notice that the logic here is a bit off for now. This is because both actions happen simultaneously. To make it work, add a 0.01 delay to the styling responses inside your condition.

Once the buttons are set up, you can add your Lottie. Go to Media/Lottie and choose your .json files. Make sure to select the “Play automatically” and “Looping” options at the bottom of the right panel.

Lastly, connect the buttons with your animated characters. With the Tap trigger, you can move one animation out of the viewport and bring the other one into the view. Adjust the easing and duration of your microinteraction to your liking.

ProtoPie helps designers bring their ideas to life in the form of high-fidelity interactive prototypes. Start building your own ultra-high-fidelity prototype without writing a single line of code today.

Follow along this tutorial to create a UI animation using ProtoPie and LottieFiles.

Building UI Animations With Lottie and ProtoPie

I recently set out to generate a 3D, or more precisely, a 360° view of a 3D object in 

, allowing me to manipulate it effortlessly by swiping or using buttons.

While the process turned out to be simpler than I initially anticipated, it did take me some time to determine the most effective approach to achieve this effect in ProtoPie. Although it may seem like a lengthy series of steps, I can assure you that it’s simpler than you might imagine.

Here’s a step-by-step guide for you to follow. However, like any good recipe, we’ll need some essential ingredients first to create our Pie.

Since it’s currently not possible to directly integrate real 3D objects into ProtoPie Studio, we’re simulating this effect by generating 24 images or frames from our 3D object. 


, you can integrate 3D objects in ProtoPie Connect.

In any 3D software, create a camera that revolves 360° around our object. Next, configure your rendering settings for 24 frames, and voila! There you have your static frames.

In ProtoPie Studio, our first step is to create a new project and to import all of our rendered images. Align these images so they overlap perfectly and then group them together. This group will be labeled as “frames”. Make sure the opacity of each frame in our group is turned to 0 with only frame 1 turned all the way to 100.

Following that, we will create a new variable under variables and give it the name “xPos_var.”

To begin, let’s create a Chain from our Triggers menu and link it to our “xPos_var” variable.

 response into our chain and assign it the name of our initial frame. We continue this process, adding these responses for each frame until we’ve included all of our frames in our 

 trigger. I duplicated the first frame and created a new layer with each duplicate.

Now, we’ll temporarily set our chain aside and revisit it later in this tutorial.

First, we must determine our current position. To begin, create a rectangle and name it “xPos Dot”, placing it somewhere on the left side of the screen. I’ve given it a bright color to make it easily identifiable. 

Lastly, we group this “xPos Dot”. Why? We do this to establish the starting position of this rectangle at x = 0 and y = 0. This simplifies the process for us.

Our objective here is to link the position of the rectangle to our mouse/touch position and then translate that position back to our chain. This will give us a genuine feeling of rotating the object.

 trigger and put the drag on our frames group.

 response and add our xPos Dot to it. We change the direction to both directions and limit to custom min = 0 and max = 1201.

We can now move our xPos Dot but we need to detect it’s location.

 response and assign it to our variable (xPos_var) we made earlier in step 2.

In the formula section of this assign trigger we add our xPos Dot and add .x after it. It should look something like this “xPos Dot.x”

After you press preview, you can now move our bright coloured rectangle.

Step 07: Let’s Chain our main ingredient

Our goal is to instruct our chain on how to use the information from the “xPos Dot” location we tracked in our variable. To achieve this, access the 

 trigger created earlier and choose the 1st opacity layer.

First we add range: 0 = opacity: 100 and range: 50 = 100

This effectively tells our chain that when our xPos Dot is within range of value 0 to 50 we need our first frame to show.

We will need add a secondary range here. This one we will set to 51 = 0 and 51 = 0.

This tells our chain to hide this frame when our xPos Dot is over the range of 51.

This next step is the most work you will have in this Pie. As it is very repetitive but the results are awesome!

Now, we must replicate the previous step for every frame, while simultaneously introducing a third range to each of them.

Increment the range by 50 each time, with the value -1 from the first range and +1 to the value of the third range. This instructs the chain to hide the frame above or below a specific value.

 the value for frame 2 would be 100 to 150, frame 3 = 150 to 200 and so on.

Once you’ve incorporated these values for each frame, your rotation is essentially complete! Adjust the opacity of “xPos Dot” to 0 to hide it, and you’re finished!

 To enable a manual rotation via buttons, you can include a 

 response for the “xPos Dot, ” shifting it by 101 with each tap.

Start prototyping with 3D objects in ProtoPie

Begin your prototyping journey with ProtoPie, where you can introduce dynamic 3D objects into your designs, expanding your creative horizons and enhancing user engagement with immersive interactive experiences.

, an award-winning Senior HMI Designer at 

 and Toyota, is renowned for his expertise in crafting immersive user interfaces. Leading a global prototyping initiative for vehicles and applications, he seamlessly integrates innovation with practicality. Recognized for his dedication, Evert excels in award-winning accessibility design and reshaping automotive user engagement.



Learn to create immersive 3D panoramic experiences with this tutorial.

Prototyping a 3D Panoramic View with ProtoPie

DSLR user interfaces don't have to be mundane; they can be a canvas for innovative design, blending functionality with an engaging aesthetic to enrich the photography experience. 

In this article we share tips  for designing an interactive, modern UI prototype, from adjusting focus and brightness to zoom effects and photo capture. Explore a new approach to DSLR interfaces using the power of ProtoPie!

Design incredible camera interfaces with ProtoPie

Our tutorial takes you on a journey to design an interactive, iOS-inspired prototype, injecting fresh, modern energy into camera UI design. Get started with the tutorial to transform your interface concepts into dynamic realities like the DSLR UI demo below.

To create similar focus and brightness settings to the iOS camera, we created the 

 container which contains the yellow square and the sun icon representing the brightness slider.

 trigger on the camera container to move and fade in the focus container to show where the user is focusing on at the moment. Using stop responses before makes sure the animations are not interfering when tapping fast.

trigger on the sun icon to move the sun vertically. This value is chained to the opacities of the white and 

 overlays in the camera container, which creates the brightness adjustment effect. Dragging down will make it darker, and up will make it lighter.

To create a zoom effect, we are simply scaling up and down the camera object.

trigger on the Camera to scale it relative to its origin. We only set a minimum to prevent the image from becoming smaller than the screen.

 to adjust the zoom indicator, the “1x” on the top centre. It uses the following formula to do so: 

In a DSLR camera, the shutter button would be a physical button so for this mockup we replaced that with the grey circle on the right. If you want to connect your prototype to an actual physical button, you can of course do that with 

 to stop the camera in the container in the back, and animate it to the front. These are the 

In theory we only store one image, even if we take multiple photos. The other container is moved to the back and the camera inside starts capturing again. If we take a picture again, it will stop the camera in the container in the back and animate it to the front. 

This creates an infinite animation with just two items. For this demo, storing one image is enough, but if you need more you can add more picture containers.

 contains the image you have taken. We will animate this into the gallery view when it’s tapped. Similarly, the back chevron will do the reversed action.

 to open the gallery with the scaling and moving animation. If the gallery is already open, it will open the picture details.

 to reverse the previous. If the picture details are open, it goes back to the gallery, otherwise it closes the gallery and goes back home.

 component is the object that comes into view when a user selects the picture in the gallery.

 button to send “share” to the current scene and open the Airdrop Modal.

 button to toggle the icon between empty and filled

The Airdrop Modal appears when the user taps the share icon in the picture controls.

 trigger on the modal, to move it up and down

 trigger will make it move down if it is not in the top position

 the Airdrop Modal’s Y position to the opacity of an underlay to create a darkened background if the modal is opened.

 component we handle the logic for the sharing animation.

 trigger on the Memoji to start the sending animation by fading in and rotating the 

 text to “Sending”. After the rotation is done, we change the text to “Sent” and make it blue. We also fade out the loader object.

 the rotation of the loader object to a left and right mask to create the circular progress bar effect.

The overall structure of the Pie is pretty straightforward. Feel free to dig into the 

 yourself and see how everything works exactly, or try making your own version!  

Infuse camera interface designs with a modern, dynamic feel. ProtoPie simplifies bringing your design ideas to life. Easily simulate interactions, test user experiences, and refine your creations. Start for free and explore your creative potential!

Design an interactive and modern DSLR UI prototype with us. From adjusting focus and brightness, to zoom effects and photo capture.

Prototyping a DSLR Camera Interface

In this tutorial, we’ll teach you how to incorporate real-life data seamlessly into your design projects. Discover the capabilities of 

, as we guide you step-by-step in creating a movie review site using a movie database API, with 

Ready for action? Let’s make some movie magic happen!

Join our masterclass in video streaming and TV UI design

stands out for its accessibility and comprehensive coverage. One notable advantage is that TMDB's API is free, making it an attractive choice for designers and developers interested in integrating real data into their prototypes. Providing a diverse range of information, from cast and crew details to reviews and ratings, TMDB boasts a user-friendly interface and extensive documentation, making it an ideal platform for data integration exploration.

 also offers valuable data and has a longstanding reputation in the industry, it's important to note that its access is via AWS Data Exchange, requiring an AWS account and operating under paid plans. For the purposes of our exploration, we'll leverage the well-documented and freely accessible 

To secure your personal API key, simply follow the step-by-step instructions provided in 

. Once completed, your access credentials will be accessible on the 

 offers two authentication methods, each with its advantages:

https://api.themoviedb.org/3/movie/11?api_key=API_KEY

Utilize your access token as a Bearer token sent within the Authorization header, as shown in the example configuration for your API plugin:

{
"Authorization": "Bearer ACCESS_TOKEN",
"accept": "application/json"
}

The choice between methods depends on your specific needs. In ProtoPie, for instance, if you primarily collaborate with trusted colleagues, employing the URL method simplifies sharing by saving the key as a variable in your prototype for automatic API call passing. Conversely, for external stakeholders to whom you prefer not to expose your credentials, the second method offers added security. It's crucial for all individuals to obtain and set their unique credentials within the API plugin configuration.

Download the prototype and save it on your device. Once done, launch 

Next up: configuring our APIs. Look for the plugin icon at the top right corner of the drop-down menu, and select the first item labeled “API”. This is your gateway to engaging with the TMDB API. If you're new to ProtoPie’s 

 feature, consider exploring these tutorials first:

Our example here involves multiple API endpoints. Please note that if you're on the Pro plan, you can only work with one API plugin at a time. However, if you're using our Enterprise plan, you'll have the flexibility to create multiple plugins, allowing you to experience the same comprehensive functionality showcased in the demo video above.

Enabling this feature involves utilizing the 

 endpoint. This endpoint retrieves movie information, including translated and alternative titles, based on the keyword provided in your query.

In our prototype, the underlying logic functions through a 

, monitoring changes within our search box. Whenever a change is detected, we swiftly pass the contents of the search box as a query parameter to the TMDB API. The API promptly responds, allowing us to leverage the retrieved data and present relevant information as search suggestions in real time.

Here's a concise guide to setting up the plugin for real-time search suggestions:

Header: Replace "ACCESS_TOKEN" with your unique access token.

Ensure that you select the “Override URL with msg value” checkbox.

Once configured, click on the “Activate” button. Now, test by typing into the search box; you'll witness real-time suggestions based on your input.

The TMDB API boasts a wide array of movie-related information, encompassing everything from cast and crew specifics to reviews and ratings. To gain deeper insights into the wealth of movie-related data available through this API, visit the detailed documentation 

. On the left-hand side of the page, within the “MOVIES” categories, you'll discover an extensive list of details that this API offers.

In our example, you have two pathways to explore movie details: either by clicking on any movie showcased on the home page or selecting a search suggestion. Once you land on the detail page of a movie, several sections unravel:

 This segment furnishes fundamental information about the movie, encompassing the title, release date, description, rating, and a captivating movie poster.

Here, you'll find the credits featuring the prominent names involved in the movie, their respective characters portrayed, and profile pictures.

 This area showcases a curated selection of visually captivating images associated with the movie, providing an immersive visual experience.

 Discover a compilation of related movies that are suggested based on similarities, assisting in exploring additional content aligned with the movie of interest.

To achieve this in our example project, we incorporated four API endpoints

Now, let’s set up our API plugins. As we mentioned earlier in this article, for those on an Enterprise plan you'll have the flexibility to work with multiple APIs simultaneously, offering a comprehensive experience akin to our showcase. However, if you're on a 

 don't worry—you can still grasp how the data populates in the design by running one plugin at a time.

After experiencing this remarkable prototype, let's delve into why a data-centric approach within ProtoPie is a game-changer.

When crafting platforms like movie review sites, TV streaming services, or content management systems, immersing yourself in real data isn't just an option—it's a necessity. Picture relying solely on imagination when the intricate details matter most. This is where diving into authentic data becomes pivotal for designers. Leveraging real data offers a myriad of advantages:

Real data acts like a reality check for your prototype. It sets up real-life situations, unveiling hidden issues and exploring different scenarios. Say the movie data doesn't have thumbnails or ratings—how do you handle that? Does your design adapt to different content lengths without messing up the layout?

Real data jazzes up your prototype, making stakeholders and users go, "Whoa, that's cool!" When they see how the design works with the real deal, they get a better grip on its potential and how it'll actually function.

Mixing real data into your design process saves you from making up stuff or doing manual updates. ProtoPie's API plugin is like a magic wand, letting you grab all sorts of real-time data sources directly into your prototype without the headache of extra work.

The example project, notably light at 4.4 MB, features only two template scenes with placeholders for your data. This strategic approach not only aids in better asset management but also optimizes project size, enhancing performance significantly. Controlling project size ensures smoother functionality and better performance, a crucial aspect of your design endeavors.

If you're eager to explore the intricacies of crafting a feature-rich prototype akin to what you've just experienced, look no further. Our ProtoPie Masterclass is tailor-made for enthusiasts like you who not only wish to seamlessly integrate real data but also yearn to master the art of processing and elegantly presenting data in your designs. Brace yourself for a journey that unfolds an array of cutting-edge prototyping techniques, ensuring you stay ahead of the curve.

Prototyping for Smart TV and Video Streaming

 course on ProtoPie School and embark on an adventure that transcends conventional design boundaries.

Learn to prototype a dynamic movie database website with real Movies & TV Shows data using ProtoPie's API integration and The Movie Database (TMDB).

Design a Movie Website with Real Data

Welcome to Part 2 of our in-depth series on advanced prototyping. In the first part, 

we explored the fundamental mindset and preparatory thinking a designer needs to embrace before diving into the prototyping process. It's highly recommended to read through the article for a well-rounded grasp of the steps detailed below and to hone your understanding of advanced prototyping.

This understanding is crucial as it lays the groundwork for how you approach your own advanced prototypes. Without simplifying the message too much, it underlines the importance of meticulously thinking about how your product actually operates 

, open up the starting Pie file below in ProtoPie Studio and follow along.

Part 1: Use your thinking to guide your build

Part 3: Follow on calculations and finishing touches

Improvement ideas using more advanced features

Designer-developer collaboration as easy as  Pie 

In this tutorial, we'll be showcasing why ProtoPie is a go-to choice for many designers in advanced prototyping projects. We're going to  fully utilize ProtoPie’s 

 to create a dynamic and interactive user experience mirroring the macOS Calculator app.

We’ve broken down our build into four major phases - entering the first number, choosing an operator, entering the second number, and calculating the result to establish a logical workflow. Next, we’ll introduce essential variables 

 component that we can duplicate and efficiently reuse for all 11 possibilities for digits 0 through 9 plus the decimal key.

In this section, you’ll learn how to tactically toggle the 

 between text and number, ensuring accurate decimal number representation and setting a solid groundwork for the complex segments ahead in building the calculator. Let’s see it in action!

In this section, we’ll transition between phases based on user input to create and manage our button 

 for different mathematical operations. The key is to develop the logic necessary for storing and updating variable values.

Additionally, you’ll learn how to handle special cases like the 'equals' operation to display results, and to provide visual feedback by flashing the display when certain actions are performed. Through this process, you’ll be able to build a foundational understanding of managing user interactions and advancing through logical phases in our prototype.

We’re almost done! In the last part, we’ll refine our calculator to handle follow-on calculations. We’ll integrate our different function buttons and equip each with unique logic.

Through this process, you'll learn how to seamlessly handle different phases and improve the user flow. As a callback to our flow diagram which has been our roadmap throughout this exercise, you’ll see the importance of detailed planning and documentation. By breaking down each step, we are able to save a lot of time setting up the required variables and conditions, and methodically work through the complexities involved in advanced prototyping.

In this exercise, we completed a fully functional calculator that performs actual calculations while mirroring a real app — all achieved without writing a single line of code. We have a good foundation now, and there's more we can do. Here are some extra ideas you could add to our prototype to make it even better:

 so that you don’t need to point and click

 Why not tell your calculator what to calculate?

 when there are too many digits to fit in the width of the display

 instead of a text label for some of the buttons

 so that you can store the result of a calculation and retrieve it later

Try adding more function keys or even attempt the 

All of this is possible and more — this exercise doesn’t even scratch the surface of 

Designer-developer collaboration as easy as pie

When you first think critically about how your product works — in minute detail — you’ll find you’ll have an easier time building an advanced prototype. All of the resources you created as a handoff for your developer now become your guide. Remember! You already know your product better than anyone. There’s no one else in a better position to bring it to life.

Learn how to create a fully functioning calculator prototype with our step-by-step guide. Elevate your skills in advanced UI/UX design.

Calculator Prototype: Step-by-Step Guide

Are you ready to learn about parallax scrolling and create an Apple Vision Pro landing page clone? Let's dive right in. 

Recreating Apple Vision Pro's landing page with ProtoPie

Craft the hero section with scroll animations

Tips

How to Use QR Code Interactions in Your Prototypes

Building UI Animations With Lottie and ProtoPie

Prototyping a 3D Panoramic View with ProtoPie

Prototyping a DSLR Camera Interface

Design a Movie Website with Real Data

Calculator Prototype: Step-by-Step Guide

How to Recreate Apple’s Parallax Effect with ProtoPie

How to Add Real Data to Your Prototypes

The Power of Scroll-Based Animations in ProtoPie

Create a Scrolling Vertical List With 3D Rotate

How to Make Interactive Inputs with Figma and ProtoPie

How to Do Remote Usability Testing with ProtoPie & UserTesting

How to Do Remote Usability Testing with ProtoPie & Lookback

How to Do Remote Usability Testing with ProtoPie & UserZoom GO

10 Essential Keyboard Shortcut Tips to Boost Productivity