The prototyping tool that satiates any designer’s hunger
Tell me if this story sounds familiar to you. You just wrapped up a design in Sketch -a design that took you hours, and now you want to bring it to life. Sketch’s built-in prototyping tool doesn’t allow you to create all the interactions you want and when you import your design in other prototyping tools your beautiful masterpiece is far from beautiful.
You already refined your design in Sketch and the thought of having to redo/edit the work in another tool makes you cringe (or want to cry). You work fast, so slowing down to redo work is not an option. You know if a static design is worth 1,000 words, a prototype is worth 1,000,000 (or 1,000 meetings). So you don’t want to give up on prototyping.
What if I told you there was a tool where you could import your designs from Sketch (Figma and Adobe XD too) without anything changing? On top of keeping your design 100, you have so much control over the prototype’s interactions that if you put it in front of users, they wouldn’t be able to tell that what they are using is, in fact, a prototype.
Would you be interested in something like that?
If the answer is yes, let me serve you up a hot plate of ProtoPie.
Journey to Optimization
The story above gives me PTSD. In the past my main prototyping tool was Axure. I love Axure and it will always have a special place in my heart. It gives me the control I need over my prototypes, but every time I import my Sketch file using the Axure plugin, my design changes. The same thing happens with Adobe XD, Figma, and Invision Studio.
The question I hear most often is, “Why don’t you just switch to a design tool that has prototyping capabilities?” That is definitely a viable solution but, at this time, those tools don’t give me the control I want when prototyping.
I spend most of my time helping users of enterprise systems figure out ways to operationalize their workflows. I do the same with my own workflow, and this import problem was driving me mad. I spent weeks researching tools that integrated with Sketch and gave me the control I wanted. Right when I was about to give up I came across a little slice of heaven: ProtoPie.
How it Works
ProtoPie streamlines the process of importing your design as a bitmap with one important caveat. It imports your layers and puts them together into groups exactly like they are in your Sketch file. It does all of this in about three seconds. You can drill down into each layer and remove or add elements as needed.
It also gives you the ability to create additional elements as needed with various tools including images, videos, audio, shapes, text (any text on the bitmap can be converted so you can edit it), and various containers. So if you need to make an edit on the fly and do not want to pause to go back to your Sketch file, you don’t have to.
The Interface
ProtoPie’s interface is fairly intuitive. I’m going to give a quick breakdown and if you want to dive in a bit more I highly recommend checking out their website. They have a ton of documentation and tutorials.
In the top-left, we have a toolbar where users can import their designs as well as add all the elements they offer.
You can add four different media types: video, audio, camera, and Lottie. On top of that, you can also add gifs. You might be asking yourself, what is “camera?”. If you are creating a mobile prototype you can set up a trigger that launches a user’s rear or front camera.
Shape and text are pretty self-explanatory. The container elements are awesome. You have a standard container (creates a group), scroll container, and paging container. The scroll container is my favorite and it does something I’ve only seen in Axure, it allows you to set up multiple independent scrolls on a page. This pattern is prevalent in a lot of enterprise systems — having access to this is a life-saver.
You have the ability to choose various devices or create custom ones when creating your prototype. You can then import your designs at various pixel densities.
In the upper right, we have the ability to preview our prototype, run it directly on a device using ProtoPie’s iOS/Android app, go to your cloud space, or upload your project. Their mobile app has been the best companion app I’ve tried so far. It makes it easy to install fonts on your device and you can save the project offline.
Now to the bigger areas. On the far left, we have a Components section and Scenes section. ProtoPie gives you the ability to create reusable components (really great for menus, anything you are going to be using over and over again). The scenes panel would be the equivalent of separate artboards that you can link together.
In the middle, we have our canvas and to the left of that, we have our layers menu.
On the right, we have the really fun stuff, the interaction/animation panel (more on that in a bit), and a panel where you can edit elements.
Triggers and Responses and Yummy Animations, Oh My!
Alright friends time for that tasty dessert you all came here for, the prototyping capabilities. There are so many that you will definitely walk away from this table with a full belly.
It all starts with a trigger. Choose an element within your design and click the add trigger button. They are broken up into six different groups: Touch, Conditional, Mouse, Key, Input, and Sensor. Yes, you read that right, Sensor. If you are creating a mobile prototype you can control various sensors within the device. Pies are supposed to be sweet but this is getting spicy.
After creating a trigger you are given access to 24 different responses. Grandma’s Thanksgiving pie varieties have nothing on what ProtoPie is serving.
You can then customize your interactions to your heart’s content. You have complete control over animations and timing. I just scratched the surface here, so if you really want to dive into the full capabilities drop me a line — I would be happy to chat. Like I said earlier a prototype is worth 1,000,000 words so check out this prototype made exclusively in ProtoPie.
ProtoPie is available on macOS and Windows. Here is a link to their site https://www.protopie.io/ and to their tutorials https://www.protopie.io/learn/
If you want to discuss ProtoPie or other UX topics add me on Linkedin here: https://www.linkedin.com/in/jamessoldinger/
