ProtoPie is an interaction design tool that affords advanced capabilities enabling designers to create bigger more realistic experiences. The trouble is, this often leads to prototypes that are inflexible, error-prone, and hard to manage. That’s when thinking like a developer can really help.

Hero image
Hero image

ProtoPie’s goal has always been to give designers autonomy. To do that ProtoPie needs to work the way a designer thinks. So far it has done a fairly good job at hiding away things like code and development constructs; giving the designer the freedom to be messy and explore ideas without concerning themselves with the build quality or organisation of their prototypes.

But as prototypes become larger and more complex it becomes quickly apparent that creating in that hot messy exploration mode will eventually result in more time being spent fixing things than creating them.

Comments come back from stakeholders…

ProtoPie has rebuilt the importing feature for Adobe XD. Supporting a wealth of new features that are sure to improve your XD to ProtoPie workflow.

Hero image showing XD connecting to ProtoPie
Hero image showing XD connecting to ProtoPie

What ProtoPie now calls the legacy importer had many shortcomings. Things like only importing graphics as PNGs and only being able to import a single artboard at a time. Thankfully those things have now been fixed with the new ProtoPie plugin for Adobe XD. This plugin drops in hot on the heels of the Figma plugin that was released a few months ago and in many respects has a similar feature set.

Of course all software has its subtle differences and idiosyncrasies and there are some things you need to know when using the XD plugin. …

On the 31st of December, at 00:00, Adobe discontinued support for the flash player. This story is my personal account of Flash and my experience with it. How Flash influenced my career and why I’m so thankful for it.

I first met Macromedia Flash at its third version. I was working as a graphic designer in a small London based design consultancy. I saw the web for the first time after a hard days work training some designers to use QuarkXpress. After a few minutes, I was hooked. This new platform was far more interesting than graphic design I thought to myself, and at that moment I decided that I was going to learn everything I could about it.

In those first weeks and months, I became a sponge for any technology or tool related to the web. In…

Prototyping can sometimes feel like you’ve fallen down a rabbit hole. Bugs and continuity issues, performance problems are just some things that crop up daily. But don’t worry I’ve got your back, here I share tips and tricks I’ve picked up that will help take some of the stress out of prototyping.

Hero image showing UI elements
Hero image showing UI elements
Illustration by Darren Bennett

1. The smoke and mirrors technique

Prototypes are fake. It’s easy to forget this especially with advanced tools like ProtoPie or Framer. So tip number one is don’t try too hard to make things as they will be built in a real app. I like to think of prototyping like a movie set. You just need to make it feel believable. Take whatever shortcuts you can, to achieve what you need to achieve in the shortest possible time. This should be your mantra when prototyping.

The smoke and mirrors technique is all about creating something advanced or more involved in a much simpler way. Using the…

Digital design is constantly evolving. Gone are the days when we could only design statically, churning out design comp after design comp. In this article, I explore how tools have shaped the way we design and talk to some of the pioneers who created these tools to get the view on design tools past, present and future.

Designing and prototyping on device in ProtoPie
Designing and prototyping on device in ProtoPie

In the beginning, when the world wide web was new and web pages were simple, we designed websites in Adobe Photoshop. At the time it made sense. The interaction was super simple and the web as a platform was only seen as a place to put a digital version of your company’s brochure.

There were no micro-interactions or slick transitions. If you wanted something eye-catching you would hire a Flash designer. Flash was the only app you could use to put a highly interactive experience on the web. It was fun and experimental and in some cases downright crazy. …

With ProtoPie 5.0 comes interaction libraries. You could build interaction components already but now you can turn it into a full-blown interaction design system to share with your team.

Image for post
Image for post

Libraries have been a long-requested feature and it's great they are finally here. So let's explore how ProtoPie has addressed the sharing and management of reusable interactions and how it might change the way you handle prototyping in your organization.

An overview of interaction libraries

Interaction libraries in ProtoPie should be instantly familiar to you as they share some traits with other tools such as Figma and Sketch. That said the big difference here is that these components are interactive. …

Everything you need to know about ProtoPie components but was too afraid to ask.

Image for post
Image for post

Components give you a huge amount of power when you are creating prototypes. You can create a set of components that can be dragged and dropped into a prototype and just work. Imagine just dragging out a checkbox or a custom button with a cool animation that’s all built-in; no mess, no fuss; rapid prototyping as it should be.

Components have flexible layouts, overrides, and can be nested infinitely enabling the creation of modular UI elements. In short, you have everything you need to build an off the shelf design system for your rapid prototyping needs.

And remember kids this…

Part 1

In this article, we’ll explore Figma’s prototyping capabilities by building a basic app login. We’ll then compare Figma’s prototyping process to ProtoPie to see how the two tools differ in both their approach and features.

Prototyping has never had such a high profile with a whole host of tools that now give you varying ability to realize your designs beyond their static UI and into a working usable thing. It’s fair to say that prototyping within tools has been a bit of a battlefield, with some UI tools offering basic prototyping on top of their established drawing features and others offering a more advanced but specialized set of prototyping features to enable designers to build more realistic experiences.

Today I want to look at Figma and ProtoPie who offer on the surface an overlap of…

In this tutorial, we are going to build a reusable tab bar component that you can use in your prototypes.

Hero image
Hero image

One of the powerful features of ProtoPie is the ability to build fully portable and interactive UI components. We are going to make use of nested components, SVG icons, and layout constraints to build a tab bar UI component that is self-contained and flexible enough to reuse in any future project.

01. Importing the SVG icons

I’m using the following icons downloaded from Feather icons. To follow along download Home, Activity, Bell, and Settings.

ProtoPie 4.3 is out and with it comes a slew of new features including nested components, auto-complete send & receive messages, new formula updates for the color property and a real device status bar.

Image for post
Image for post

Nested Components

You can now nest components inside components inside components, well you get the idea!

Darren Bennett

UX and Digital Design Consultant

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store