Closing the Loop Between Static Design and Interactive Prototyping

How ProtoPie helps designers improve efficiency

Advanced animations and interactions play a vital role in user experience. Today when we’re thinking about a mobile app or a website, we rarely imagine a product as a collection of static pages; we envision a highly-interactive digital story. The way users think about products also changed the way designers craft products.

Since the beginning of time, designers use prototypes to testify design ideas and gather users’ feedback. It’s a well-known fact that the better prototype resembles a real product, the more realistic feedback you get during stakeholders reviews and usability testing sessions. But creating a prototype that looks and works like a finished product was a time-consuming task for a long time — there weren’t any tools that designers could easily use and create visually rich prototypes with numerous effects. But the tool called ProtoPie attempts to change that.

In this article, I want to review how ProtoPie improves design efficiency and simplify design workflow.

What is ProtoPie?

ProtoPie is a tool that offers code-free prototyping. There’s one thing that makes this tool stand out from the crowd — the tools allow you to create complex interactions and animations in no time. ProtoPie allows you to build interactions based on combining the following: Object, Trigger, and Response.

Concept model image from ProtoPie.io

Using ProtoPie, you can create complex animated transitions:

Utilize device sensors such as gyroscope or accelerometer:

ProtoPie allows you to build sensor-aided prototypes without a line of code.

Or even use the Bridge function to create interactions among smart devices:

Create interactions that involve two or more smart devices

And test your design on a real device:

Deploy and share your designs on iOS and Android devices

Does it mean that ProtoPie is a replacement for a design tool?

No, it does not. As a UI designer, you probably use Sketch, Figma or Adobe XD on a regular basis and you won’t be willing to switch to any other design tool for UI design tasks. But what would you do if you have to design complex animated effects such as animated microinteractions? There are two ways you can solve this problem:

  • Find another tool for that. There are a couple of problems with this approach. First, you need to learn how to use the tool. Second, you might need to recreate your entire design from scratch in it (simply because there’s no simple way to import an existing design from your favorite design tool).
  • Switch to code. Even when you have coding experience, the time required to create a specific animated effect might be significant. Quite often, motion designers spend a lot of time creating a specific animated effect just to know that it doesn’t work for their users (the results of usability testing show that animated effect isn’t good).

In our highly competitive world, speed is everything. The faster the team is able to validate the hypothesis, the faster it can move towards the right design. That’s why the tools that team use should also be highly effective. When it comes to ProtoPie, the tool has two benefits:

  • ProtoPie allows designers to prototype animations and interactions across multiple devices without a line of code.
  • The tool has a gradual learning curve — most of the interactions will be intuitive for users.

How the process of prototyping with ProtoPie looks like?

TL;DR. In order to create a particular animated effect, you need to:

  1. Design in Sketch/Adobe XD/Figma
  2. Import your design in ProtoPie
  3. Add triggers in the ProtoPie

After that, you test your design on a real device and iterate.

1. Design in Sketch/Adobe XD/Figma

You might wonder ‘What changes should I introduce in the way I design things to be able to use ProtoPie?” The answer is — no changes required. You don’t need to modify your existing design process in order to use ProtoPie.

2. Import in ProtoPie

ProtoPie has a built-in feature for import Sketch/ Adobe XD / Figma files. Meaning, you don’t need to install any extra plugins to your favorite design tools to export your designs. All you need to do is to select “Import” from the File menu.

ProtoPie provides a really flexible mechanism for import design. Along with pretty common import options such as selecting layers for import (e.g. import every layer from the file, or import only the layers that have been set as “exportable” from Sketch), you have some flexible options such as customizing settings when re-importing artboard from Sketch. Those options are:

  • Overwrite positions of layers
  • Overwrite sizes of layers
  • Update layer orders and grouping structure
  • Remove layers deleted in Sketch/Adobe XD/Figma
Import from Sketch

Those options allow you to go back and forth between any of three prototyping tools and ProtoPie, ensuring a seamless design and prototyping workflow.

3. Prototype in ProtoPie

Now when you import your artboards to ProtoPie, you can add all required animated effects using ‘Add Trigger’ control. As a designer, you can choose from the rich collection of triggers.

ProtoPie’s interaction panel

Depending on the complexity of your design, the design process might require some time (especially if you design advanced interactions with conditional logic). But the great news is that ProtoPie provides excellent tutorials for first-time users that simplify the process.

All you have to do next is to test your solution with real users. You can preview your prototype on your computer, or send it to iOS or Android devices via ProtoPie Player app.

Now let’s take a take a step back and see how our process looks like in action:

Conclusion

ProtoPie makes your product team believe that creating a prototype is delicious and as easy to make as pie. No matter what platform or design tool you’re working on, ProtoPie allows you to use your favorite design tool and express interactive design ideas in no time.


Closing the Loop Between Static Design and Interactive Prototyping was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.