cft

The prototyping tool that satiates any designer’s hunger

Journey to Optimization


user

James Soldinger

3 years ago | 5 min read

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 Sketch design becomes distorted when it is imported in Axure

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.

ProtoPie’s interface is quick to pick up and their team consistently puts out updates enhancing it

In the top-left, we have a toolbar where users can import their designs as well as add all the elements they offer.

Users can import XD, Figma, and Sketch designs

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.

Clicking the camera button in the prototype triggers the phone’s rear 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.

ProtoPie allows you to create independent scrolls on different sections of the screen

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.

The user can create a prototype utilizing standard devices, desktop sizes, or custom sizes

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.

A user can test his/her interactions in real-time using the Preview pane

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.

The Components and Scenes tabs can be pinned or collapsed as needed

In the middle, we have our canvas and to the left of that, we have our layers menu.

Within the main canvas, you can drill down into your layers on the left, quickly cycle through scenes using the arrows, control the zoom, and enable/disable the device frame

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.

These three panels are where all the interactions are created and modified

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 choosing an element and clicking Add Trigger the Trigger menu opens

After creating a trigger you are given access to 24 different responses. Grandma’s Thanksgiving pie varieties have nothing on what ProtoPie is serving.

After selecting a trigger you click the + button and the Response menu opens

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.

Upvote


user
Created by

James Soldinger


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles