A Guide to the Best Prototyping Tools

Prototyping is an extremely essential part of the product design cycle. This amazing article  Perfect your UX Design Process – A guide to Prototype Design by Judit Casacuberta goes into depth about how beneficial and important mastering prototyping actually is.

With today’s numerous, and very different prototyping tools, one of the biggest questions that I always hear is “which prototyping tool should I use?” or “which prototyping tool should I learn first?”. My answer is always “it depends”. Why does it depend? Because each tool is beneficial to different scenarios.

There are a lot of factors to take into consideration when selecting an appropriate prototyping tool, pricing, collaboration, and ease of use are just some to take in. But some of the most important factors to consider are:

• Fidelity: How robust is the tool? How does it incorporate animations and transitions? How powerful will the final prototype be?
• Utilizing it for usability testing: Can I use my prototype to conduct usability testing? How useful is it to test interactions with users?
• Sync with design tools: Does it easily import designs from my favorite design tools?
• Developer Handoff: How does the tool aid in the development handoff process? Does it generate developer assets and specifications?

To make matters worse there is an even greater number of prototyping tools available to use nowadays, this can seem intimidating especially to a new designer.  I have created a list below of what I think are the best prototyping tools for both veteran and beginner designers, their strengths and weaknesses, and which scenario each tool serves its best purpose.

Here’s my list of my favorite, easy to pick up, and powerful prototyping tools (in no specific order, like I said, each tool is beneficial to different scenarios)

Principle

Source: Dmitriy Goncharov

Principle is a fantastic prototyping tool which allows for great animations, micro-interactions, page transitions, and very high-fidelity prototypes.  Your final prototype will feel like you are interacting with a real app, which makes it a great source for in-person usability testing. It has the ability to record videos, gifs, with and without cursors, which makes it great for presentations or to give to developers for animation reference. It syncs instantly with your Sketch or Figma files, but lacks compatibility with other design tools. Additionally, Principle’s lack of cloud hosting makes it hard to share prototypes remotely, and harder to use for remote usability testing. It also doesn’t generate any developer handoffs, so it’s only useful as a reference for your developers to try to replicate.

When to use: As a tool to show interactions in presentations or stakeholder approval. For in-person usability testing. For giving developers reference to interactions.

Strengths: Animations, transitions.

 

Invision(not studio)

Source: Mat Warcholinski

Invision is by far the most common prototyping tool. It’s sheer simplicity makes it easy for any one to pick up in seconds. It syncs with most design tools and has plugins for easy uploading. Its cloud hosting makes it an incredible tool for remote sharing with others, remote testing, commenting and collaborating, and even creates developer assets and specifications with Invision Inspect.  On the other hand, its very limited interactions and transitions makes it a terrible tool to show complex animations/interactions, and it doesn’t act like a realistic app experience when interacting with it.

When to use: Rapid prototyping.To show click-through and flows. To hand-off assets to developers.

Strengths: Simplicity, collaboration, developer hand-off.

 

Invision Studio

Source: Invision via Dribbble

The youngest application on our list, and Invision’s newest app release. Invision Studio is an all in one hi-fidelity prototyping & animation tool that competes with sketch, figma and the new framer x. Studio provides a built-in animation feature that is surprisingly good and easier to learn than principle, it’s also got a built in clickable prototype and highly responsive artboard features. The best part of Studio is its integration with the Invision ecosystem which makes it a great tool to share prototypes, test remotely, developer handoff, and more. Overall, Studio is still in its very early stages but it’s being backed by an active community and update hungry developers. While it’s still in its early stages, its animation capabilities are not up to par with stronger animation and interaction prototype tools like Principle and Framer X, but invision seems eager to get it up to speed. As far as animation power it’s above invision and adobe XD, but under principle and framer X; but it is above all in developer handoff, cloud sharing, and sync with other tools.

When to use: In Mid-Fidelity prototyping that is great for remote and in-person usability testing, and developer handoff interactions.

Strengths: Simplicity, collaboration, developer hand-off.

 

Framer X

Source: Gis1on via Dribbble

Framer X is not just a typical re-skin of its predecessor Framer, but it’s more of a transformation of how the application is used overall. Framer X allows you to create hi-fidelity prototypes from scratch without writing any code whatsoever. Included is a great component library that offers layout templates, loading spinners, live video, interactive sliders, and forms that validate. They did not do away with coding, the program still offers an option to add/edit your own code, and even supports ReactJS components/handoffs, and Lottie animations which are an incredible developer asset. Its capabilities are endless, you can create extremely hi-fidelity prototypes that function like a real app, and even integrate real data with the use of JSON files. The app also allows cloud hosting which works great for remote sharing or usability testing. On the other hand, the app has a very steep learning curve especially if you are not familiar with Framer Studio, and creating high-fidelity prototypes takes longer than any other prototyping tool which makes it impossible to use when working with tight deadlines.

When to use: When you have a flexible timeline with time to spend in creating a kick-ass prototype.

Strengths: Endless capabilities, animation, interaction, very high-fidelity, cloud sharing, developer sharing, existing components, and more.

Adobe XD

Source: Andrea Hock via Dribbble

Adobe XD has been making great strides since its release, it’s a free tool that is a great competitor to sketch, especially for non-mac users. In terms of usability, adobe XD has a very clean layout and design which is easy to learn especially if you are coming from other prototyping apps such as figma or sketch . Some of its best features include its recent in-app micro animation update which allows designers to setup micro animations within their artboards. Although still a bit limited on what type of animations you can create, XD allows you to import your files directly into after effects for some more complex animations if you know how to use AE. XD also has cloud sharing which makes it a great tool to share prototypes remotely or even test remotely, and has the added benefit of developer hand-off assets and specs. On the other hand, it’s a pretty new product, so most of its prototyping capabilities are not up to par with the other prototyping tools, and a lot of UI/UX designers have stepped away from Adobe products since they’ve taken so long to release a UI/UX product. It’s very similar to invision in its prototyping, collaboration, and developer hand-off capabilities.

When to use: If you’re a non-mac user, if you’re a loyal adobe user. Simple/rapid prototyping if you’re an XD designer. Very similar to Sketch + Invision combo.

Strengths: Great design tool, rapid prototyping if you designed directly in XD. Cloud sharing, developer handoff. Adobe is investing in it, updating it frequently, and adding new features.

 

Some other prototyping tools to check out:
Sketch’s prototyping tool, Figma, Flinto, UXPin, Flinto, Marvel, Zeplin

____

To say the least, there is no best prototyping tool. Each tool has it’s unique strengths and weaknesses, and each are favorable depending on the type of project, timeline, and your workflow. Before choosing a tool ask yourself: “What do I need this prototype for?” and “How much time do I have to dedicate to prototyping this project?”.