Imagine having full control over your shareable prototypes and interaction recipes, and not having to worry about them falling in the wrong hands?

Exactly this is possible with the all-new features for you to share your works worry-free.

Let’s deep-dive into these all-new features!

vailable for the Team & Enterprise plan only.

We released interaction recipes last year—one of ProtoPie’s hot features. Record a scenario of your prototype’s interactions and its specs, e.g., durations, delays, easing, layer properties, and other important details.

No need to invest in creating separate documents with explanations to illustrate your intended concept. Simply, an interaction recipe contains every single detail of your prototype.

Designers often face difficulties when trying to communicate their ideas and intentions. With this, convey all your intended interactions to engineers and just let them follow the recipe.

Before, you could share interaction recipes with team members only. Not anymore. 

Share your interaction recipes with anyone now.

At ProtoPie, we always think about what to simplify next? The obvious would be to remove this inconvenience.

Avoid asking your team admin to invite Engineer A and B.

Skip the whole sign-up process for Engineer A and B.

Anyone with the link can access your interaction recipe without creating a ProtoPie account.

Change the access settings and make your interaction recipe public:

 Click on the overflow menu (the 3 dots in the upper part, right next to your name) and click on Access Settings.


Quick tip: you can also click on the lock icon to access your settings.

 Change “Only team members” to “Anyone with the link”.

: Copy the interaction recipe link by clicking on the link icon.

Share the link and let engineers follow the recipe.

Rather share your interaction recipes (and prototypes) with password protection? That’s possible too.

Share your prototypes and interaction recipes safely with a select few people. With password protection. Happy stakeholders, happy you, right?

Find the password protection option in the access settings.

: Activate the Password Protection option.

Tip: you can change your Password later if needed.

Now you are ready to share your prototype with your stakeholders. Whomever you share the link with needs to enter the password to get access.

Share your prototypes and interaction recipes with anyone. Or safely with a select few people.

New in ProtoPie Cloud? Public Interaction Recipes & Password-Protected Prototypes

2020 was a hard year for everyone due to COVID-19, but there were still lots of talented designers who have been making incredible prototypes with ProtoPie. They made use of brand new features perfectly, from interaction recipes to ProtoPie plugin for Figma, taking their designs to the next level. Let’s start off 2021 with the 10 most inspirational interactive prototypes. Certainly, they can serve as a source of inspiration for your own interactive prototyping work this year.

I paid attention to the following in particular:

: Are the UI designs proper and following the latest trends?

: How interactive are the prototypes? What kind of micro-interactions are there?

: How realistic do these interactions feel and look and how feasible are they?

 How creative and unique are the solutions the designers came up with?

: Good mix of prototypes for all kinds of digital products, e.g., mobile, web, desktop, and IoT?

The selected prototypes have been listed in random order. If you click each link, you can check how they were made. For some of the prototypes, you can even try them out yourself and download the files.

1. Gamified Health App Interactive Prototype by 

For this voice prototype, turn the sound on before play! 

You can check the detailed design process in the 

There is no limitation with ProtoPie. We are ready to enhance your design skills with new features. If you’d like to know more about our tool, which these designers used to create advanced interactions easily that go beyond imagination, try it for free 

A curated list of inspirational prototypes and interactions with brand new features for 2021.

10 Most Inspirational Interactive Prototypes for 2021

About 3 years ago, we proudly released the first integration for Adobe XD. A ton of designers have been importing their designs into ProtoPie and creating amazingly realistic prototypes on top of their XD designs ever since—A tremendous success.

Today, we are delighted to show you a better, more flexible, and tight-knit workflow between Adobe XD and ProtoPie.

The Adobe XD + ProtoPie workflow has been a game-changer for digital designers who like to begin their creative process in XD. Starting from scratch to actually having a tangible (& realistic!) prototype that you can hold, touch, and fully experience—all in less than a day’s work.

We learned that there were plenty of productivity gains to be made regarding bringing your designs from XD into ProtoPie. There were little flexibility and many import options you didn’t need.

We went back to the drawing board and built a solution that gets you from design to interactive prototyping faster than before.

What we learned is that importing your designs should be straight-forward, fast, and easy—A no-fuss process.

Importing is a breeze. Import multiple artboards as scenes at once, and objects with the same layer hierarchy, positioning, and constraints as in Adobe XD.

The ProtoPie plugin for Adobe XD requires ProtoPie 5.3 or higher.

The new import experience is completely different from the previous one, which we now call the legacy Adobe XD import. Note: the legacy import is only available in ProtoPie 5.2 or lower.

Differences with the legacy Adobe XD import?

Import one or multiple artboards and objects.

Import text layers as SVG that can be converted to text layers.

Try the ProtoPie plugin for Adobe XD with this 

The perfect duo to have in your design stack

Having a design stack that empowers you to do your best work is half the battle.

With ProtoPie, add another level of realism to your already high-fidelity designs. Consider dynamic interactions involving conditions, formulas, and variables to prototype beyond a single scenario. Express your interaction design ideas with features like text input, camera, and media playback at your disposal.

With Adobe XD & ProtoPie, design and prototype like you always imagined.

ProtoPie 5.3—Other features and improvements

New device sizes, e.g., iPhone 12 & Google Pixel 5

Design like you always imagined with Adobe XD. Add a touch of magic with conditional and dynamic interactions in ProtoPie.

Adobe XD + ProtoPie: The Perfect Duo in Your Design Stack

The last but not least of our series of articles dedicated to the winners of ProtoPie’s very own Dribbble Playoff contest. Edmund Boey - Twilio’s senior visual designer graces us with his abundance of design experiences, ideas, and the story behind ‘Signal Pong’ (the video game prototype concept which raised him to the top).

Check out our previous interviews with the

Briandito Priambodo, who redesigned an app that has been a long-lasting pain point

& Ahmed Amr, the man who prototyped a prototyping tool with ProtoPie.

Working at the revolutionary company, Twilio

A veteran at Twilio, Edmund Boey describes himself as a “Senior Visual Designer at Twilio by day, moonlighting as a hacker of clothing, and a highly enthusiastic casual gamer living multiple virtual lives by night”, he jokes.

ProtoPie landed on Boey’s radar during the Dribbble contest while he was browsing the website, it was there he saw videos that introduced him to the nifty program. At that moment, he felt this urge and motivation to build the prototype that would ultimately land him in the finals. “Turns out I might’ve been a little overconfident, but I dug into the documentation, referenced existing prototypes, and found all the elements I needed for what I was trying to achieve,” he continues, “Building the prototype was actually pretty easy when I got the hang of it, allowing me to focus on the intersection between the emotional and functional aspects of a product.”

Twilio is a well-known cloud communications platform that virtualizes the world’s communications infrastructure through APIs that are simple enough for any developer to use. But what role does visual design play at Twilio? “Visual works best when it is able to create an emotional connection, to find a memorable way to deliver a message that’ll resonate with the audience.”

Boey further elaborates that there are quite a few visual designers at Twilio — each with different expertise and in different teams within the brand team. “Personally, I’ve worked on the 

 back in 2018, and designed the guidelines for interiors across our 26 offices. Right now I’m working on something unreleased yet that has me in front of my sewing machine a lot!” he emphasizes.

The senior designer emphasizes that regardless of the project that he and the team are working on, it is no secret that the developer’s needs take precedence on how they build their projects in order to serve them, “our role is to speak their language — whether it’s a spoken language or a programming language.”

So how does prototyping fit into the scheme of everything at Twilio? “Prototyping is built into the workflow of every project, simply to test if the product fits in the environment it was designed for. After countless strategy and content meetings, I still find aspects that have not been accounted for, where prototyping has been especially effective at identifying.” he continues.

 in 2018, I created a new experience with no existing framework as a reference. I could do a lot of research to learn from other similar experiences, but at the end of the day, I had to start designing prototypes before the hardware and user experience could even be implemented.”

Enthusiastic gamer who turned his idea into a highly interactive prototype

We must say that Edmund Boey’s video game concept really garnered the attention of the audience and judges, needless to say, we are all curious as to what sparked this design concept? “I do my best to approach every project from an unexpected non-traditional perspective. I wanted to create something delightful and interactive for the ProtoPie Dribbble contest, so I decided to make a game! I’m in the camp that video games can be one of the immersive mediums of art today, allowing the audience to experience a story rather than just reading or hearing about it.”

He explains more in detail that his submission is a part of a larger idea he has for reimagining the 

 as a mobile app. “The Hackpack is a piece of physical swag that used to be a part of 

’s annual customer conference. There have been four versions of them, but the one thing that all have in common was that they’re always hackable by developers!” he emphasizes.

“With the pandemic affecting conferences worldwide and Signal being virtual this year, I was exploring a Hackpack that everyone could have access to from the safety of their home. While the Hackpack as a whole is a gaming experience, I redesigned 

 for my submission in the ProtoPie Dribbble contest as it was my favorite of the activities I witnessed at Signal 2018.” He explained.

From work influences to the latest trends

Boey has worked on a number of projects that have yielded amazing results. Curious to say the least, we asked the designer to describe his work ethics and influences, “My work is exploratory, I always try to experiment with new mediums and concepts. I never subscribe to a distinct style and don’t feel the need to do so. This has come in especially useful when I worked in advertising agencies and design studios with multiple clients; it allows me to adopt and then evolve existing visual styles.”

Boey also pointed out that the consistent goal for his work is to be delightful, especially for the specific audience he is designing for. “I love it when someone discovers an Easter egg or reference in my work that speaks directly to them. I always try to fully immerse myself in the audiences’ world and find inspiration there, interviewing them for their experiences, or temporarily adopting their personas if I can.”

He went on to explain that outside of the office, inspiration strikes him in any form. It is becoming more frequent., especially with traveling and “to see new cities and countries, to see what the communication and design norms are is totally fascinating. I’m often surprised how differently grocery stores around the world approach packaging and labeling from the products to signage.” He continues, “wandering is also really exciting for me; I do find that in nature on a hike or trail run allows me to better fully turn off parts of my mind to explore and start noticing interesting things in the abstract.”

Boey has proved himself to be an experienced visual designer who possesses great abilities to turn ideas into reality. He believes that a good visual design prototype should represent the final product and its functionality, as well as provide an emotional impact on the user. “As a visual designer I’m focused on how the product makes the user feel, and it can be very difficult to measure how much of an emotional connection I can create. By using a prototype I’m able to put something in front of a user, and observe their interactions, see where they run into obstacles and where they might find an element that connects with them.” He explained

With the constant change in the world which is moving at a fast pace, we believe that it poses challenges for designers to stay up to date with the latest design trends. So how does the Twilio designer keep up? “Whenever I’m looking for inspiration I start scrolling Dribbble and Instagram. I also have a good group of fellow designers that I chat with regularly and we share cool things that catch our eye. I’m lucky that I know designers of many different disciplines, which really helps broaden the range of work I’d be exposed to on my own.”

Augmented and virtual reality as the future of design

Last but not least of the questions for today’s interview, What would you say will be the future of design? Or the next big thing and why?

With an ever-changing environment, it’s hard to pinpoint what the future will look like for design. Boey believes that “the future of design is in augmented and virtual reality, and the global pandemic we’re in right now has been a catalyst for me and many others to dive deeper into virtual worlds while we’re all stuck at home.” Needless to say “It’d be hard for me to predict the future of design, I couldn’t imagine the things I’m designing today when I was still in school; new facets of design are constantly being created.”

Meet Edmund Boey, a senior visual designer at Twilio, and find out how he put his passion for gaming to his advantage in the ProtoPie Dribbble Playoff.

From a Passion for Gaming to Prototyping His Own Game

The past July, ProtoPie held its first Dribbble Playoff contest in which many designers across the world participated showing their greatest prototyping skills. After an intense judging period, 

Khonok Lee was crowned as the Grand Prize Winner. 

However, Khonok Lee was not the only one who proved to be a worthy challenge, three designers raised up among the contestants for their impressive prototypes.

We had the pleasure to chat with one of the runners-up, Briandito Priambodo, a senior designer in an online travel company called Wego, located in sunny Singapore.

Although his first encounter with ProtoPie was in 2017, it wasn’t until early 2018 while exploring various prototyping tools that he really delved into the ProtoPie world and experimented with all the features. “I wanted to find a tool that can help me improve my workflow, and also is widely used by other companies too. So I don’t have to learn different tools,” Briandito mentions. After spending 2 weeks on each software to create a couple of side projects.., fast forward a few months Briandito found himself juggling between ProtoPie and Framer as both fitted his workflow. “I ended up subscribing to Framer, the only reason was that a lot of companies were into Framer back then. I think ProtoPie was still new, so not a lot of people have heard of it yet.”

Curious to know why Briandito didn’t subscribe post-trial, our team reached out to the senior designer with a follow-up survey. Receiving comprehensive feedback and half-jokingly said: 

“Ps. If you give me a 50% discount for a year then I promise you I’ll buy the license. No harm in asking, right?”

. And just like that, a beautiful collaboration began between ProtoPie and Briandito which resulted in the creation of 

 “From there on, my go-to prototyping tool is ProtoPie. The lesson of the story: ask, and you shall receive,” he says.

So how does ProtoPie fit seamlessly into the senior designer’s workflow? “I am using Sketch and working with Protopie… My team and I had no hassle creating prototypes to fulfill our needs. If we get stuck and need to learn something, there’s always the ProtoPie documentation to the rescue!”

Product design has been widely used in several industries and has a broad definition, but Briandito simply defines it as: “In general, I think of design as problem-solving, product design is using a product as the medium to help people solve their problems.” So how does it contribute to the success of Wego? “The core of our services depends on our websites and mobile apps. So product design is essential in our line of work. Product design is needed to help us build products that are simple, usable, and helpful.”

Briandito’s design process consists of 4 steps: Find the problem, validate the problem, find solutions, and validate those solutions. In which, ProtoPie helps him in two important aspects, user testing, as well as to present and sell his ideas to stakeholders. “With ProtoPie I can mimic real-app interactions and do proper usability tests without having to worry about the prototype being janky or unusable,” says Briandito. “On the other hand, it is easier to explain concepts and ideas when I am presenting a prototype. I like to give the stakeholders some time to play around with my prototype — most of the time, they’ll buy the idea.”

Regarding the characteristics of any good prototypes, he considers that it doesn’t have to behave like a real app, or designed with some nice and fancy interactions but should help you move closer to your goal. “It could be getting user feedback, or convincing stakeholders, or even as simple as proving concepts. Basically, it should help you make better products.”

Dribbble: Wireframe explorations for news app

Briandito chose to enter the ProtoPie 5.0 Playoff contest by redesigning the classic, widely used, and well-known, email app. Inspiration struck him with nothing more than his own struggles with emails, “ I’ve always had trouble with emails. The emails that I think are important are basically from the same senders. So I thought, let’s take a stab at this. What if there’s a smart email app that collects the emails that users usually read?”

Amazingly he pulled out his idea from scratch to create an impressive and workable interaction that placed him among the winners, just a few days prior to the deadline. Briandito says, “To be honest, it was not a well-planned design project. I started the project just around 2 days before the deadline. It was more like a spurt of ideas that came all of a sudden — I didn’t even plan to make the card interaction that way.”

A future where many mundane and tedious task can be taken care of by just speaking seems very plausible, “I think voice interaction would be used more widely in the future. People have already utilized Alexa & Google Assistant to control their homes and if you are using an Apple Watch, Siri is already on your wrist.”

Briandito also mentions the possibility where the 3D apps that integrate 3D models would become common, “so designers need to upgrade their skills and normalize designing 3D models in their process. It would be great if prototyping tools work with 3D models right out of the box. The reason is that in the future I think people would use a lot of Augmented Reality and Virtual Reality products daily. And also because flat/2D illustrations are starting to get boring."

Meet Briandito Priambodo and learn how he views product design and redesigned something that’s been a long-lasting pain point.

Reimagining, Redesigning & Reinventing Email App Interactions

Those times that people only interact with their digital products by touches, presses, and gestures are long gone. Technologies such as haptic feedback, sensors, audio & video, text input, camera, etc. have made the experience of interacting with products already much richer and more immersive.

Another technology that’s been making its way into our daily lives is voice technology–Google Assistant is already available on more than 1 billion devices while Facebook is working on its own voice assistant. With this increasing importance of voice across the spectrum of digital products, we continue down the path that we have been on since day 1: empowering designers to free their ideas with the highest expressiveness.

Until today, there was no way without code or bugging your engineers to easily add voice to your already very realistic prototypes. With the 

, you can finally combine interaction design and conversation design.

It’s very easy. Add voice to your prototypes in the same way you have been making interactions already. Hence, we are introducing 1 new trigger and 2 new responses for you to use.

Prototypes can listen to what you say, turn it into text, and trigger responses. This is what we call speech-to-text. Then there’s the opposite, text-to-speech. Prototypes would be able to “speak”, as a response, by reading text out loud.

There are 2 interaction pieces for speech-to-text.

By default, a prototype does not pick up any speech. Use the Listen response to make the prototype start listening to any speech. To make the prototype stop listening to speech, just use the same response.

Make interactions in which responses are triggered based on the actual incoming speech using the Voice Command trigger.

You can set the Voice Command trigger to work either while someone is speaking or after someone finished speaking. Optionally–this is where the real fun starts–include and exclude phrases as commands.

In the example above, once you tap the oval, the prototype starts listening. When someone says “ProtoPie” or “Prototyping Tool” while speaking, the opacity of the ProtoPie logo would change.

Speech-to-text interactions work in/on the following:

ProtoPie Cloud (Google Chrome on desktop & Android)

There is one other interaction piece we introduced in ProtoPie 5.1.

You can make your prototype “speak” by reading a text out loud.

In the example below, once you tap the ProtoPie logo, the prototype would “speak” by reading the text stating “ProtoPie is the most intuitive tool to make prototypes and perfect them.” out loud.

Text-to-speech interactions work in/on the following:

Find some example prototypes and be blown away what you can achieve with the new voice prototyping capabilities.

Prototype your own voice assistant and test it straight away.

Or take it up a notch. Is prototyping voice search for smart TV apps while using an actual remote possible? The answer is yes. See below.

Tony Kim and I covered more exciting voice prototyping examples in 

Prototyping for Voice–Blending Interaction & Conversation Design.

ProtoPie teacher Leah showed how to get started with your first voice interactions in this workshop.

You were able to use the input layer in ProtoPie already allowing you to enter single-line text. From now on, you can do both: single-line as well as multi-line text input.

As usual, the input layer still works with a physical keyboard or a native keyboard on iOS, iPadOS, and Android.

A simple text writer prototype, inspired by 

So far, text layers always had fixed dimensions only. In ProtoPie 5.1, a text layer can resize automatically based on width or height, or be of a fixed size.

Say no to painstakingly manually resizing text layers any longer :)

Regardless of what design tool you use, you must be familiar with the productivity-boosting Option/Alt + Drag shortcut to duplicate layers. Now you can duplicate layers in ProtoPie quickly in the way you are used to.

Density adjustment when pasting SVG layers

Fixed the issue of the firewall window on macOS appearing repeatedly

A leap forward in the way designers make prototypes for voice-focused products by intersecting interaction design and conversation design.

ProtoPie 5.1: Give Your Interactions a Voice

 held its very first Dribble Playoff contest successfully. We received about 150 prototypes from various designers all over the world, and many of them were pretty impressive. In a competition as intense as this one, our judges had to pick a winner with much difficulty. Here she is, the winner of ProtoPie's very first Playoff on Dribbble: Khonok Lee!

This is the winning prototype (Calendar prototype in the video) that Khonok made.

When we went over the prototype at first, we expected Khonok Lee to be a senior designer with much interaction design experience. It turns out that she is a junior designer with only one-year work experience. We had a chat about how she kickstarted her career after graduating working as a designer and how she became a prototyping champion.

Let’s deep-dive into Khonok’s journey so far.

Hi! I’m Khonok, it’s my honor to share my experience with everyone. My design career started when I was very young since I took computer classes at school. I first learned Photoshop and Flash at that time and began to show interest in design tools. So I studied tools like Photoshop, After Effects, and ProtoPie myself, and published a paper about this when I was in college. Afterward, I became a UI designer working on digital products.

What encouraged you to become a UI designer?

: I really loved design since I was young, but it was hard to get much information about UI design. When I was a junior in college I started to study design. At that time I was listening to a local design community podcast, and I got so inspired to make it my mission eventually becoming a UI designer. I was so excited that I couldn’t sleep that night!

If graphic design is part of the arts, UI design needs rationality. That means, we should consider user needs, functionality, strategies, and a lot more. I like to think of myself as a pretty rational person (as much as I can be), so UI design really spoke to me — I could delve into and solve problems and make a better experience for users.

What do you do when idea and reason contradict?

: I work on an enterprise product. It’s a constant battle on what to prioritize to match a corporation’s needs. Companies always want to reduce costs and be efficient in relation to making profits. So we make functional and convenient design experiences, rather than flashy and eye-candy type of designs. When ideas and reason do contradict–that tends to happen regarding function and design–I work with our product manager. We always go back to the core, see what the priority needs are for our users.

I cannot be always creative during work, so I made something exciting through this Dribbble Playoff contest!

: I personally prefer a simple design. But style cannot be a criterion of ‘good design’. I think good design should start from user needs, deliver information of the product, and provide functions properly. Design that can maximize its strength within limitations can be great.

How do you usually get inspired when designing?

: Inspiration is not a one-time experience, it’s an accumulation of experiences. Every day, I look at designs on Dribbble, Pinterest, and Muzli. I try out new products often and check out the latest design trends. As a designer, it’s really important to stay up-to-date on what’s out there and be open to new things.

What’s your advice for people who want to get into design?

: You should find out your “own colors” and determine some direction for your career. To start off, there are not many schools that teach design in China. So if you want to work as a designer, you have to be flexible and find other ways, e.g., courses, self-study, bootcamps, to educate and develop yourself that go beyond the traditional.

Why did you choose ProtoPie as your interaction design tool?

: I got to know ProtoPie through a very popular Chinese podcast about UX called UX Coffee. A well-known designer talked about ProtoPie as his main interactive prototyping tool. Fortunately, I could find many prototypes made with ProtoPie on Dribbble. So, I wanted to give ProtoPie a shot and create interactive but realistic prototypes myself. The fact that ProtoPie works on macOS and Windows was very useful to me.

What stands out to me is that there are a plethora of features to express interaction design ideas and they’re all so easy to use. In the second part of this interview, I will talk more about my interaction design ideas and how I turn them into prototypes.

The journey of winning the very first ProtoPie Dribbble Playoff

How did you learn to use ProtoPie by yourself?

: I could find lots of learning materials on the ProtoPie website. Many tutorials and documentation were well organized. Among them, I strongly recommend the course that Meng To from Design & Code made. It includes elaborate content for beginners covering all the way up to advanced skills. Here is the link to

, and if you need more resources, visit the 

How did you design prototypes for the Dribble playoff?

: It was not something I had to do for work, so I didn’t have to consider specific products. I just wanted to be creative and enjoy this contest, so I focused on purely interesting interactive ideas, and how to efficiently express them. For example, I got inspired by vinyl records. I thought about the usage of records, imagined the scene of record being played, and made this prototype — Music Player. I think this process is a good way to practice design!

Some tips & tutorials from Khonok’s prototyping! 

Calendar, the winning prototype of the Dribbble Playoff

What inspired you to make this prototype?

: I made this to make going through a calendar or schedule more convenient. I could make this prototype by using multi-finger gestures. This interaction was awesome and it’s something that I couldn’t make in any other design tool! It’s usually used for photos, but if you apply it in other contexts, you could end up with some innovative creations.

The interactions feel very smooth, how did you make them?

: First, I broke down the interactions into smaller chunks. When you look closely, you can see that the direction or position of the lights reflected on the vinyl doesn’t change. The vinyl itself doesn’t rotate, the only thing that changes is the star image in the middle! Can you see it now?

When sliding cards, you can see that the vinyl and its cover are moving together. I made it by using several triggers and responses in ProtoPie. First, I applied the Drag trigger to the card. Then I added the Move response, making the card move from side to side when I touch it. Then, I added the Chain trigger to link the positions of the cards, vinyl, and its cover. This made the other components move whenever I changed the position of the card. Last, using the 3D Rotate response, I made the card change its angle. Also by adding the Scale response, the card becomes smaller. Since I used the Chain trigger in advance, the card is changing its properties as it moves!

What was the design of the adjusting timepiece in your prototype by touching the vinyl based on?

: I thought about the typical gestures a DJ makes and applied them to the prototype. There is a change of the 3D angle when touching the vinyl, so it appears like I am holding a record!

How did you make the interactions for the pages turnovers?

: It’s not hard at all! Just link the motion of a finger to each page then it becomes pretty easy to make!

First, I made images of the book page with After Effects and converted them into PNG. With the repetition of images, it becomes an animation. So I imported the PNG files into ProtoPie and listed them in sequence.

Next, I added the Rectangle component at the lower right corner and set the transparency to 1%. I then applied a trigger and response to it.

By adding Chain trigger, I linked the Rectangle component with the transparency of each PNG image. Next, I added Opacity response to each image. From there you are ready to go through pages, just drag it to the left!

I hope my experience proves to be helpful for everyone who reads this article! If you’re keen to make highly interactive prototypes, no-code required, then please visit the 

Also, ProtoPie provides educational support, meaning free usage of ProtoPie for students, teachers, and schools! If you are interested, just click 

 and apply. Don’t miss your opportunity to try ProtoPie for free!

Meet Khonok Lee and learn how she became a prototyping expert and Dribbble Playoff winner with only 1 year of experience.

From Junior Designer to Prototyping Champion & Dribbble Playoff Winner

The way we interact with the plethora of devices surrounding us and filling our lives is different from years ago. Simply put, those times that we interact with a single device only through touches, presses, and gestures are long gone.

Connectivity between and integrations among devices are a given. Think of Handoff among your Apple devices, turning off your Philips Hue lights through Siri because you’re in bed already and you put your phone on the nightstand that’s just a little too far away, seamlessly switching devices when listening to the new Discover Weekly playlist on Spotify, or the 170+ voice commands you can use while keeping your eyes on the road in that sweet Tesla Model S.

New technologies drive us to interact differently with each other and subsequently differently with our products and devices. One of these technologies is voice. It’s foreseeable that voice will play a more essential role in your everyday lives. We grew up with the rise of the iPod, iPhone, and the world of e-commerce, but we have a whole new generation, Gen Z, that has a fairly different experience. They grow up ordering pizza and buying movie tickets using Alexa — 

 voice-enabled personal assistants compared to older demographic cohorts.

It’s our job as creators and designers to be ready for a generation of users that interacts differently. We should design as well as prototype meaningful experiences tailored to this. As we believe that many don’t think about incorporating voice in their products (yet) or have a hard time turning voice-focused ideas into actual working prototypes, we would like to stand up for an era where voice prototyping beyond a single person and device becomes more democratized.

Hence, we’d like to share a set of voice prototype examples, 

, showcasing that we, designers, can absolutely prototype immersive, interactive experiences like these and don’t have to be bound by single user-screen experiences only.

We mentioned Tesla and its 170+ voice commands earlier. They are definitely not the only company; various others, e.g., Mercedes Benz, Continental, and Bosch have been making an effort on including voice as part of the driver experience.

In this example, we made an interactive prototype of the center screen display of a car that runs on a tablet. What would an in-car experience be without a steering wheel? So, we hooked up the tablet to a steering wheel. As you can see in the video, you can control the prototype with the buttons on the steering wheel to activate the voice assistant.

Try out the in-car voice control prototype.

Voice can make it a lot easier to access a certain feature more directly compared to having to navigate through a bunch of menus to get there, especially when it comes to smart TVs.

Product

ProtoPie Plugin for Figma: A Seamless Workflow to Boost Productivity

Latest posts

New in ProtoPie Cloud? Public Interaction Recipes & Password-Protected Prototypes

Adobe XD + ProtoPie: The Perfect Duo in Your Design Stack

ProtoPie 5.1: Give Your Interactions a Voice

ProtoPie’s Interaction Libraries in a Nutshell

ProtoPie 5.0: You Won’t Miss Misunderstandings with Interaction Recipes & Libraries