Introducing ProtoPie — the interaction design tool

Over the last few years, there has been a huge surge of prototyping and interaction design tools. A simple search on prototypr reveals 32 results. For the last few years, I’ve spent a lot of my time training designers in prototyping at the various places I have worked. Speaking to designers there is a fair amount of confusion as to the best tool to learn. Time is precious and also companies are not in the habit of paying out for every design tool that comes along. The process of vetting the right tool to use for a whole team is rigorous and lengthy.

There are of course many different needs and levels of skill among the design community and this has a bearing. We all want one tool that we can use that can do everything we need and we want that tool to have a fairly low learning curve. Designers need to be able to get up and running as quickly as possible.

So here are the criteria I consider when thinking about recommending and training designers in any tool:

• A low to medium learning curve
• It can do the basics but also advanced interactions
• It’s easy to integrate into existing workflows
• It doesn’t require me to buy into a single companies ecosystem (unless the designer worked for a company that already has)

I have used most of the prototyping tools out there at one point or another but currently, I’m hanging my hat with ProtoPie.

What is ProtoPie then?

ProtoPie is an interaction design tool that enables the construction of some very realistic prototypes. One of the things that ProtoPie considers that sets it apart from many of its competitors is its ability to control the sensors in the modern-day device such as your device’s accelerometer but it’s selling point is much more far reaching than that.

It’s amazing with the capabilities that ProtoPie provides that you don’t need to write any code (or hardly any but we’ll come to that later). The only tool that comes close to what ProtoPie can do on the market today is FramerX and that tool requires you to get your hands dirty with code pretty quickly if you want to build anything meaningful.

So, in a nutshell, ProtoPie enables you to build a realistic prototype of your native app that will be indistinguishable from the real thing without you learning and writing any code. If that’s something that interests you then read on.

Differentiating features

To set the stage as to why you should consider ProtoPie, I want to draw your attention to what I consider some key features that sets ProtoPie apart from other tools on the market. It’s important to state that it’s these features existing in one tool together with the ease of use of the tool that make ProtoPie so powerful so here we go.

1. Input

For years I was frustrated not having a way of prototyping apps where I could get users to actually type in my prototype. It seemed like such an obvious thing that was needed. Imagine my delight when ProtoPie dropped in native keyboard capability, giving us the ability to allow users to type on a real keyboard and for us to grab that input within the prototype and do things with it. Mocking up registration journeys or logins made something that in the past was hard easy to do and almost trivial and also opened the door to imagining personalisation, something that could never be done in the past.

2. Variables

Remember when I said earlier that you are required to use some coding? Well, this is the first function that goes anywhere near the code paradigm. ProtoPie, whilst doesn’t expect you to code does require you to understand certain code concepts and variables in the first and most important one.

Many times you will want save certain pieces of information to use elsewhere in your prototype, be it to replay information someone has typed or to make logic decisions displaying differing scenarios and variables are your way of doing those things.

You can think of a variable as an empty container that can hold certain pieces of information. In coding and by extension in ProtoPie variables are typed, that is to say there are rules as to what type of value you can put inside them. In ProtoPie there are three types:

• Text variables
• Number variables
• Colour variables

The three variable types give you control over text, math and something very specific to ProtoPie colour values that can be used in conjunction with some colour specific capabilities. Variables together with conditions which we talk about next give you unprecedented power.

3. Conditions

So you want people using your prototype to be able to add some products to a basket or you want to show a different screen depending on a choice that a user makes. How to hell would you do that in the plethora of other prototyping tools? Well, you can’t because they don’t have conditions but thankfully ProtoPie does!

So what is a condition? so you might think of a condition in your head in this way:

if
the user taps the red button
go to page 1
else if the user taps the green button
go to page 2

Based on what the user does you can offer multiple routes though your prototype and this is just scratching the surface of what conditions can do. Think of the things you do in real apps and where they might be using conditions. Variables and conditions go hand in hand and you can use them together to create some very realistic app features.

4. Motion

So far I’ve spoken about the features that I consider differentiate ProtoPie from the stable of motion interaction tools such as Principle, AdobeXD, Flinto and InVision Studio. But ProtoPie can compete quite well in a head to head on motion capabilities as well, here are some of what you might expect to be able to do plus a few that you may not:

• Move, rotate, opacity and scale
• Colour — change the fill, border or shadow colour
• 3D rotate
• Radius — animate the rounded corners of an object
• Scroll — move the scroll position to a specific location
• Reorder layers z -index
• Chain — connect the value of one object property to the value of another object
• Range — trigger different properties depending on where on the screen the object is

That’s a pretty exhaustive list and I would like to touch on a few of the above that I feel need some further explanation.

Chain

Chain is a powerful feature which allows you to connect two objects together in motion. Like a tether between the two, you can connect an object’s position to the position of another object bit even more powerful is you can change the range of motion for each of those. For example when I scroll a list for 200px I can have a header move only 30px and for both of them to be in synchronicity.

Range

imagine that in a certain area of the screen you want something specific to happen but elsewhere you something completely different to happen. Range is the feature that enables you to do such things.

5. Formulas

So taking the above feature into account to the next level you need to use formulas. Formulas in ProtoPie are a subset of code functionality which is truly awesome. Properties such as position or opacity suddenly become available together with a whole host of other properties. as an example imagine you want to compare the scroll position of a scroll container with the current scroll position so you can trigger some micro interaction, formulas allow you to do that 🤯.

6. Components

Take all of the above and turn it into a reusable component, think Sketch but with interaction or wrapped up and ready to use. Enter components. Components have the ability to receive information from your main prototype and to send information out.This means that your components can interact with the prototype that are put within. You can now think about sharing functional pieces of UI and having the ability of taking a design system approach to your interaction design, no longer are you rptototype throw away pieces of design they are now reusable and can be integrated.

7. Overrides

Once you create a component, for it to be reusable you will need to change certain values. You can override certain values of your components such as text value, colur and opacity to name but a few.

8. Constraints

To further make your components even more flexible you can se some basic constraints to make them liquid. Constrain their height and widh or make them stick to the left or right or expand to the width the you make them.

9. Import

ProtoPie supports import from Sketch, Figma and AdobeXD and within thes tools ther are specific supported features as well such as the ability to re-import without destroying changes to layers and group changes within ProtoPie. This allows you to update designs in your master file and simply update in ProtoPie without compromising your interaction work.

10. Bridge

This could be the killer feature that seals to deal so I thought i’d leave the best to last. Imagine having the ability of building not one, but two prototypes and these prototypes can talk to each other. Enter Bridge the ability to build communicating prototypes. The obvious illustration of this feature is a chat app where two real people can chat in realtime but i’ve found another interesting example. Chatbots — prototyping a chat bot by having a real person on one prototype pretending to be the chatbots with another being the user.

Conclusion

ProtoPie in my view is the most easy to learn and powerful interaction and prototyping tool out there so kick it’s tyres and let me know what you think, it will change how you work and will enable you to traverse an area that until now has been off limits for designers and the express preview of developers.