Prototyping is a key job for ux engineers and product designers. But with an endless list of prototyping tools to choose from, it can sometimes be hard to know where to start.
This post compares the top prototyping tools of 2019.
Low-Fidelity Prototyping Tools
Low-fidelity prototypes are simple, low-tech representations of an app or website.
They typically lack complex interactions, and they may not be nearly as polished as the finished product. Clickable wireframes and paper mockups are both examples of low-fi prototypes.
The benefit of low-fi prototypes is that they’re quick and easy to create. With a low-fi prototype, you can get feedback from users within hours of coming up with an initial concept.
The most popular low-fi prototyping tools are Sketch and Balsamiq mockups.
Sketch Prototyping
Most designers know Sketch as an easy-to-use UI design app, but Sketch also has some great tools for building simple prototypes.
With Sketch, you can create and share a clickable prototype in as little as 5 minutes.
If you already own Sketch—and don’t need to represent any complex interactions—the drag-and-drop tools make it simple to turn your design into something interactive.
You can share Sketch prototypes with others via Sketch cloud or the free Sketch mirror app.
Cost: Free for Sketch users; $99/year otherwise
Pros: Fast; Integrated directly into Sketch
Cons: Limited set of interactions and animations
I’ve written a detailed guide to Sketch Prototyping here.
Balsamiq
Balsamiq is a rapid wireframing tool that reproduces the experience of sketching out an app on pen and paper.
With Balsamiq, you focus on structure and content, rather than color and details.
To create your prototype, you can choose from a predefined list of components or draw your own using basic shapes. You can link pages together with a few button clicks.
Cost: $9/month
Pros: Extremely fast; great for internal discussions and concepting
Cons: Very limited interactivity; comic-sans style may bother some
Medium-Fidelity Prototyping Tools
Medium-fidelity prototypes represent a happy sweet-spot.
If you want a bit more than the previous tools provide, but you still don’t need to create many complex interactions, these tools may be a good fit.
InVision
InVision is one of the most popular prototyping tools on this list for good reason.
With InVision, it’s simple to take designs from a variety of tools—including Sketch, Photoshop, and InVision’s Studio app—and turn them into polished prototypes. InVision supports a good set of interactions, including link and button clicks, mouseovers, and more.
And with InVision cloud, you can share prototypes with stakeholders, collect feedback, and even share design specs with engineers.
Cost: Free for 1 prototype; paid plans start at $15/month
Pros: Good mix of speed and power
Cons: Limited support for responsive prototypes
If you’re not sure which tool on this list to use, I recommend starting with InVision. Its mix of power and flexibility is a good fit for most projects, and InVision is constantly innovating.
Adobe XD
XD is Adobe’s answer to Sketch and InVision.
The app is a good mix of a UI design and prototyping tool with a few bells and whistles thrown in.
XD supports most of the same interactions as InVision, but there are a few features that really make XD unique:
- Responsive Resizing – With a bit of configuration, XD supports creating prototypes that resize for different screens. If you want to design once and test for both web and mobile, this feature is a huge time-saver.
- Voice Interactions – If you’re designing for Amazon Alexa or Google Home, XD is a great choice, since it supports voice triggers and audio playback.
Like most Adobe products, XD has a bit of a learning curve. That said, it’s a fantastic choice for the above use-cases.
Cost: Free for 1 prototype; paid plans start at $9/month
Pros: Unique Features
Cons: Learning Curve
High-Fidelity Prototyping Tools
If your app features complex animations that are key to the experience, you may need a high-fidelity prototyping tool to recreate them.
Here are two popular options:
Framer X
Framer got its start as a JavaScript framework for prototyping, but it’s evolved significantly since then. Today, Framer X is a full-featured prototyping suite with tons of power under the hood.
Framer’s approach starts with a drag-and-drop editor that will feel familiar to users of Sketch or Adobe XD. But Famer provides powerful customization options via the JavaScript React framework.
Out of the box, Framer supports complex interactions, responsive resizing, and precise animation timing. You can download predefined components from Framer’s “store” or build your own.
You can even export components directly to React and use them as a basis for actual production applications, which makes Framer X by far the most powerful option on this list.
Cost: Free for 14 days; Paid plans start at $12/year
Pros: Extremely Powerful; Familiar Interface
Cons: May be too complex for some projects
For complex interactions or as the basis for a production application, Framer is a fantastic choice.
Origami Studio
Origami Studio is Facebook’s in-house prototyping tool.
The tool supports importing layers from Sketch and turning them into complex interactions with logic-based Patches.
With Patches like loops, switches, and push notifications, it’s possible to prototype most common web and mobile interactions.
While this approach shows promise, Origami Studio is prone to crashes and doesn’t have nearly as thorough documentation or as large of a community as Framer.
As such, consider carefully before choosing Origami Studio.
Cost: Free for 14 days; Paid plans start at $12/year
Pros: Extremely Powerful; Familiar Interface
Cons: Buggy; Poorly Documented
Want More? This article is part of the UX Engineer Playbook series.