Reviewing the best prototyping tools for designers in 2017

Whether you’re exploring new ideas, creating a concept or you just want to make sure that all the details are communicated to your other team members, prototyping is the right step in the design process that you should consider making.

Introduction

In the last article, we’ve analyzed the best wireframing tools in 2017. It’s time to take a few steps forward and see what tools you can use to bridge the gap between the design and implementation phases.

This guide will help you decide which prototyping tool is the best for you while taking into consideration costs, popularity, the target platform and of course the available features. Let’s dive into it!

Principle

Mac OS Only – $129

Principle is a product built by a former Apple engineer for Mac OS and it’s one of the most popular prototyping tools. It’s based on the same hardware accelerated Core Animations engine that powers both iOS and OSX operating systems.

If you’ve used Sketch before, you’ll feel right at home with Principle as its UI and some functions are very similar. Not only that, but Sketch and Principle are also well integrated and importing Sketch projects is easy. The learning curve is also not steep and you can get up to speed fast with the number of resources available on the official website.

Sharing your work done in Principe is easy. You can either use the companion Principle Mirror iOS app that lets you mirror your work on any iOS device. If you prefer a native experience you can export a standalone Mac app of your prototype.

You can check out what you can build with Principle in the official gallery.

Pros

• Great integration with Sketch.
• Very easy to learn and use.

Cons

• Testing prototypes on mobile devices needs the extra application to be installed.

Flinto

Mac OS Only – $99

Flinto is another great MacOS only prototyping tool designed to take the pain of prototyping applications with many screens. Its powerful Transition Designer allows you customize the transitions between screens for more granular control, or you can use the predefined standard transitions like fades, slides and so on.

Another powerful feature is the Behaviour Designer. It allows you to create reusable micro-interactions at a component level and it’s great for small elements like button states, toggle switches or even loaders.

The Sketch plugin for Flinto makes importing Sketch projects a breeze. Not only that but in case you update your design in Sketch, you can import it again and update your existing prototype. Sharing is also easy using the Flinto iOS app. Like Principle, using its dedicated app you can share and test your interactive prototypes on any WiFi-connected iOS device.

While Flinto may seem a little bit overwhelming at first, a combination of the resources available on the official website with the YouTube videos from their official channel will help ease the learning curve for newcomers.

Pros

• It comes with built-in events and basic transition effects.
• 3D transformations are available for extended control.
• It uses artboards like other popular design tools like Sketch or Illustrator.

Cons

• Testing prototypes on mobile devices need the extra application to be installed.

Origami

Free

Origami is a free prototyping tool developed by Facebook based on Quartz Composer, the node-based visual programming language. It is a free and open source tool and it’s very easy and intuitive to get started with. In terms of learning resources, the official website has a dedicated section for video tutorials and also an extensive documentation that goes in depth for each individual part of the software.

It comes with limited design tools that you can use to create basic designs or change the ones already imported from other design tools. Importing designs from Sketch is a matter of copying and pasting elements from Sketch into Origami and they will be imported (where possible) as native Origami layers.

Transitions in Origami are created using Patches and the powerful Quartz Composer node editor. Patches are the core building blocks in Origami as they allow you to build the behavior of your prototypes. Each type of patch handles a small function and can be chained with other patches to create complex behaviors based on the end result you are looking to achieve.

Previewing and sharing prototypes is also easy using the Origami Live mobile app, available for both Android and iOS devices. Prototypes can be tested while the device is connected to the host via USB or you can export the prototype directly to your mobile device. A really great feature is the ability to access the device’s camera, accelerometer and even microphone in your prototypes.

Pros

• Free
• Extensive documentation and learning resources.

Cons

• Finding the right patch to use may become a cumbersome task.

Framer

Monthly plans start from $15 with the option of purchasing a yearly license ($144) for a 20% discount. Enterprise plans are also available for teams of 15 or more.

Framer is a powerful prototyping tool that stands out in terms of the approach it took to prototyping. It is a tool developed with programmers or technical designers in mind as it requires each interaction to be defined in code using CoffeeScript.

It is separated into two distinct modes, Design and Code, each with its own toolset depending on the current stage of your project. The Design mode comes with an extensive set of tools that should cover almost any designer’s requirements and those coming from Sketch will feel at home while creating their first design in Framer. When you’re done designing, you can switch to coding mode and start making your prototype interactive.

While it may seem intimidating at first, the team behind Framer did their best to ease the learning curve for inexperienced programmers who want to use Framer. Features like Auto-Code take a lot of the pain off by auto-generating reusable code based on basic interaction selections.

Importing is also easy and it works with projects from both Sketch and Photoshop.

Pros

• It is the most powerful tool in the list in terms of what can be achieved with it.
• You can use JavaScript to access external APIs and bring your prototypes closer to the real deal.

Cons

• The learning curve can be a little bit steep.
• There is a gap between design and code as elements are not updated when they are changed in either place.

Protopie

Mac OS and Windows – $99

ProtoPie is a great prototyping tool available for both MacOS and Windows platforms that doesn’t get the attention it deserves for what it has to offer.

Out of the box, it features a simple but intuitive interface that doesn’t take very much to get used to. Importing from Sketch is a piece of pie (no pun intended), allowing in-depth customization options of how would you like to handle the import.

Interactions are created using triggers that broken down into 4 categories: one time, continuous, conditional and sensor-based.

• One-time triggers allow you to cover the most basic interaction types like taps, double-taps, touch up/down, long presses and more.
• Continuous triggers are focused on media elements and you can use them to add interactions on drag, pinch or even rotation.
• Conditional triggers can be used to create complex interactions like chaining actions to modify a layer’s properties dynamically (if-else statements for designers) or even creating ranges to trigger interactions when a layer’s properties meet specific conditions.
• Sensor-based triggers are exactly what the name implies. They allow you create interactions that react to values provided by various sensors including the gyroscope, microphone, compass, and proximity.

Sharing prototypes is also easy. Using the ProtoPie Player app available for both iOS and Android device or via the web for instant feedback. Other than this, another great feature is the ability to bridge multiple devices and recreate interaction use-cases between multiple correspondents, like a chat service, sending files or a money transfer.

If you are interested to see examples of what can be created using ProtoPie make sure you check out the official Gallery. When you are ready to get your hands dirty, make sure you go through the available learning resources consisting of short ~2-minute videos covering some of the most important aspects of ProtoPie.

Personally, I am impressed with all the features ProtoPie has to offer and I am willing to use it as my main prototyping tool for the remaining trial days to get the most out of it. It proved to be a really nice surprise with features that I believe match up to those of the most popular prototyping tools available and it definitely deserves more attention.

Pros

• Available for both Mac and Windows platforms.
• Lightweight and easy to get started with.
• Sensor device support.
• Ability to bridge devices and create complex interactions via events push.

Cons

• Testing prototypes on mobile devices needs the extra application to be installed.
• Creating mulitple-screen prototypes can become a little bit cumbersome.

Adobe XD

Windows, Mac OS – CC or Single App Subscriptions Starting from $9.99/month

Adobe Experience Design (XD) is considered to be Adobe’s response to Sketch. It is available on both Mac OS and Windows as a native app and since the last Adobe MAX conference, it is available as part of the Creative Cloud suite.

XD aims to handle both design and prototyping functionalities at the same time and it does it well. It’s a great tool for UI/UX designers that prefer to have everything in the same place.

Switching between design and prototyping modes can be done at the push of a button. In the design mode, you have access to the toolbar consisting of 8 basic tools for selection, basic shape creation, pen, text and artboard creation tools. When you’re switching to the prototyping mode, the layout simplifies considerably so you can focus exclusively on the transitions between artboards.

Prototyping in XD couldn’t be easier. You can connect your artboards using drag-and-drop controls and then apply the transitions and easing effects you want, depending on the interaction you are trying to communicate. Currently, the only transition options are the Dissolve (default), Slide and Push effects in four directions. For the easing effect, you can select between Ease Out, Ease In or a mix, Ease In-Out.

Testing prototypes on real devices can be achieved using the Android or iOS helper mobile apps. The cross-platform testing initiative comes with a few caveats though. First, the device needs to be connected via USB while testing the prototypes, and secondly, testing prototypes work only when devices are connected to a Mac OS host. These issues are mostly caused by system limitations and Adobe representatives stated that they are working with Microsoft to resolve them in the near future.

While XD does not provide the most granular control in terms of prototyping, it’s a solid option for designers or teams that consider the proper communication of the overall flow more important than building complex interactions.

Pros

• Available for both Mac and Windows devices.
• Some designers might find it great to have all the tools in the same place.
• It’s very lightweight and blazing fast.

Cons

• Nothing major so far.

Justinmind

Windows, Mac OS – Plans starting from $19 per user/month.

Justinmind is a tool that handles both wireframing and prototyping very well for web and mobile applications.

Once downloaded and installed, you can check out a short 4-minute tour that goes over the basic functionality of the app. Not only that but in terms of learning resources the company prepared extensive tutorials for all skill levels, as well a dedicated Knowledge Base, Customer Support and Community-based Support.

Right out of the box, Justinmind ships with all features that you would expect from a prototyping tool, including basic screen event transitions as well as providing features for more complex use cases that require variables, conditional triggers or mobile gestures.

Once finished, prototypes in Justinmind can be tested on iOS and Android devices for a more accurate user flow experience. For collaboration, the app allows you to publish, share and get feedback on your work. A version control system is also available for larger teams to manage their projects easier.

If that’s not enough, you can check out their Enterprise edition, focused on larger teams that require extensive integrations and more advanced features like secure on-premise collaboration, requirements management and more.

Pros

• Beginner friendly.
• Great for medium to large teams.
• Provides lots of features that cover most use cases.

Cons

• May not be the best option for freelancers.
• The user interface might feel a little bit rigid.

Other tools worth mentioning

I tried to keep this list as short as possible and focus only on the most used tools in the industry this year. There are so many other prototyping tools available that couldn’t make it to the list. Here are a few other options worth mentioning:

InVision

Free for 1 active prototype and other plans start from $15/month. InVision is probably the most popular go-to tool for really fast prototypes. The app is packed with many great basic features, but it really shines when it comes to collaboration and presentation.

Proto.io

Plans start from $25/month. Proto.io is also a great tool for fast prototypes and features great collaboration and presentation features, but it’s limited in terms of the interaction complexity that can be achieved with it.

Axure RP

Subscriptions start from $29/month. Axure is considered by some designers enterprise bloatware, but it’s one of the tools that stood the test of time and it still proves to be a valuable tool even though it falls a little bit short on the end result quality.

Conclusion

Choosing the best prototyping tool is definitely not an easy task considering the number of options available. Some designers might choose to go on the quick and easy road of accessible tools like InVision or Proto.io while others enjoy the complexity of a tool like Framer. Platform availability is also a pain in this space and Windows designers might find themselves limited to web-based solutions or a more enterprise solution like Axure RP.