As designers, we’re always looking for new tools to further improve our design process. It’s important that we stay on top of cutting-edge tools and experiment with them. One such design tool that will foster your improvement as a designer is ProtoPie. ProtoPie is the second most used tool for prototyping, and it’ll likely grow in popularity.
Prototyping is an essential design skill. With stakeholders putting more and more emphasis on high-fidelity prototypes, ProtoPie is just the tool designers can use to meet such needs. Furthermore, ProtoPie’s compatibility with Figma, which has arguably become the number one tool for UX designers, makes it easier to integrate into your design workflow without complicating your entire design process.
Let me show you how to use ProtoPie as a plugin for Figma; this will undoubtedly get you familiar with its capabilities while you work with a tool you already know and love.
ProtoPie requires no code and with its highly intuitive UI, it allows designers to create super realistic prototypes. You can use it to explore micro- and complex interactions across multiple screens.
Furthermore, prototypes created with ProtoPie can interact with smart device sensors, including the touchscreen, microphones, and more. This allows for a quicker turnaround on user testing. It can also help you create multiple iterations before you deliver the final design to developers.
Luckily for designers everywhere, ProtoPie offers plugins for major apps like Adobe XD, Sketch, and Figma. This plugin helps you transfer designs to any of these major apps directly, allowing for the whole design and its individual components to be edited in your chosen design app.
Installation is as simple as any other Figma plugin:
Now, we can play around with ProtoPie!
You can export either a scene or an object directly from Figma to ProtoPie. Entire screens or simple buttons can be directly imported, eliminating the need to make tweaks to your design outside of Figma.
Take this design for a Flamethrower app I was working on below for example (Yes, you read that right: flamethrower app. I was messing around with a concept). First, I run the ProtoPie plugin and select the screen:
The plugin allows whole scenes to be selected, multiple at once. If you only need a button, then you can also select it as an object:
This comes especially in handy when making prototypes because often different versions of one object will exist at one time, which are easily interchangeable. Furthermore, as time goes on designs change, and this feature eliminates the need to import entire designs into Figma when making a small change. You can also prototype different versions of design components to see which would work better, which is also where this feature comes in handy.
Once you select your design, you can import it directly into ProtoPie where all individual frames can be edited for your prototyping needs:
Like any plugin, there can be issues importing a design. While doing research, I found that four main issues can arise with this plugin of which I have experienced one personally. The newest version of this plugin has allegedly rectified all of these issues. However, you should still know these potential issues:
All four of these issues should no longer be an issue with the newest version of the app, though.
Once you import a design into ProtoPie, the UI is pretty intuitive. On the left side of the window, ProtoPie displays the different screens (or scenes as they’re named in ProtoPie). When you import multiple designs, they will come out as their own scene, which you can then move between using the triggers provided by the app.
In the middle section of the UI, ProtoPie displays the design, and on the right side, the various tools used in the actual prototyping work:
ProtoPie is an amazing tool that’s not too hard to integrate. Integrating the use of ProtoPie in your Figma design process offers already experienced designers an intuitive environment in which they can turn their completed designs into impressive prototypes. Through the use of the ProtoPie plugin, these designs can be directly imported and transformed into dynamic prototypes seamlessly without interrupting the design process, allowing for an increase in efficiency and for the designer’s creativity to flourish.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Adobe XD is Adobe’s version of Figma – but does it match up? This blog is an attempt at decoding the good and bad of both, and figuring out which one is best used for which use case.
Subscription pages are meant for users and businesses, and they should work well for both parties. This blog is a thorough discussion of what’s best and what’s not when it comes to designing subscription pages.
Call it what it is. Product designers and UX designers have unique roles, even if their titles often get swapped. In this blog, know the difference and own your expertise.
Search bars are more than icons and inputs — they can be a retention magnet or a churn trigger. Sharing my tried-and-tested search bar design principles in this blog!
Learn more →
