The best new features in ProtoPie 5.5
As we all know, Figma has become the dominant tool for designers working on high fidelity UI screens. However, despite all its great features, it still has limitations, particularly when it comes to embedding multimedia, or designing complex interactions and detailed micro-animations. It’s at this point of a designer’s workflow that it may make sense to switch to another tool.
While other options exist, my personal preference is ProtoPie.
ProtoPie is cross-platform, easy to understand, and has a tight import integration with Figma. Moreover, they have a really amazing community (come join the ProtoPioneers on Slack!) and great product support.
In the latest update, a highly requested feature has been added: formula support in the playback response. This allows for realistic prototypes that make use of multimedia — meaning you can run usability tests on product prototypes that are much closer to real life, before having to invest in any development work.
Let’s take a look at how it works.
Every interaction in ProtoPie can be broken down into three steps:
- Object
- Trigger
- Response
Each interaction happens to a given object, which with a given trigger, leads to a response. ‘Playback’ is one of the responses available that can be triggered.
Previously, the playback response was limited to either starting a media file, stopping it, or seeking to a specific point of the file. Seeking required you to know the specific timecode you wanted to seek to.
This meant that to create a prototype of a progress bar, you needed to use a variable to keep track of the x position of a progress bar and setting a Playback response update for each point that a user dragged to — which was a huge amount of work, even for a very short media clip.
The new Playback response has a Seek option that supports formulae. Simply put, this means you can programatically tie it to the x position of a scrubber, meaning a user can interact with a media file as you’d expect.
If you want to learn how to put this to use, there’s a brand new tutorial about making a video player on the ProtoPie website.
And to see it in action, take a look at this prototype (click the video in the bottom left corner): https://cloud.protopie.io/p/9ea2f57d22
Some other changes in the latest update are great quality of life updates: you can now click and drag to create shape layers, there’s better support for fill layers, and, as of ProtoPie 5.4 released back in April, there’s native support for Apple Silicon (M1) chips.
Another great change I’m loving in this latest release is shortcuts. Hitting ⌃ + ⇧ + / (macOS) or Ctrl + ⇧ + /(Windows) loads up a new Shortcuts panel, where you can quickly find shortcuts for different commands. There are also new shortcuts that have been added for the eyedropper, and for aligning layers.
All of these changes confirm to me that ProtoPie is just going to continue to get better. It’s the only true high-fidelity interaction-design software that is also cross-platform. (Principle and Origami are Mac only, and After Effects is really designed more for motion graphics.) And, while it has a somewhat steep learning curve, investing time into it is well worth the effort.
Moreover, what I really love about these updates are that so many of them have come directly from user feedback. ProtoPie has an active community and the team are always supportive of their users — and I can’t wait to see where this brilliant product goes in the future.
PS: If you want to meet other ProtoPie users and see a demonstration of the new features, don’t miss this event on Tuesday 20th July. You can register here.
Thanks for reading! Read more articles tagged Design, or check out everything.