SUBSCRIBE TO OUR NEWSLETTER
June 4, 2020
In this article, we break down five popular prototyping tools, looking at their strengths, weaknesses, and costs.
Over the past decade, design teams around the world have turned to InVision. It’s a browser-based app that serves as a platform for end-to-end product design, including prototyping.
InVision’s greatest asset is its straightforward interface. You don’t need a technical background to get the most out of this prototyping tool. To link together static screens and outside URLs, just click and drag them with your mouse.
Sharing your work with collaborators is another one of the software’s better traits. They can open prototypes and leave comments on specific design elements in the web app or after downloading to mobile devices.
Finally, InVision works well with other design software. If you’d rather start designing in one app and finish the prototype with InVision, there’s little friction in doing so.
InVision's clean interface packs a punch, but the web application and mobile app can sometimes lag. Plugins with other connected software and pages can slow its usability.
InVision has a limited library of transition and animation assets. Even though you can showcase the user experience, the prebuilt animations for doing so are basic. If you're hoping to make a more advanced prototype, some of the tools later in this post might be better options.
Invision is free to use with one active prototype. When you need to make more, they offer the following options:
Adobe is a household name among digital creatives, and its suite of applications, including Photoshop, Premiere, and Lightroom are well known. With the rise of UX and UI design as disciplines, Adobe entered the mix by launching Experience Design in 2016.
XD is part of the Adobe Creative Cloud — so it’s no surprise it plays well with other Adobe software. It’s simple to link to apps such as Illustrator to enhance your prototyping experience.
Need a prototype fast? Adobe XD is great for that. It’s one of the better tools available for making simple prototypes for demonstration purposes. If you need to make a demo in a short amount of time, XD is a great option.
Adobe XD can be used for both low-fidelity and high-fidelity prototypes. And if you really want to get fancy with animations, pair Adobe XD with Adobe After Effects.
In theory, XD shouldn’t have a steep learning curve. And while it’s not the hardest software here to learn, the user interface doesn’t sync perfectly with other Adobe products. So even if you’ve been using Adobe tools, you’ll have to take some time to learn everything you can do with its growing features.
There are also limitations when it comes to collaboration. Only one person at a time can “own” editing the file, limiting interactions between team members. And when a prototype is ready for development, handoff isn’t simple. That’s because XD doesn’t have a design-to-code export. Your developers will have to manually code your prototypes.
On its own, Adobe XD is free to use, which includes one active shared prototype at a time. There are also two paid alternatives:
Adobe Creative Cloud
The creators of Figma built it with teams in mind. Their hope was to make collaboration much easier for users, whether they’re experienced product designers or founders with a cool idea they want to shape.
Learning how to use Figma isn’t difficult thanks to its intuitive usability. You don’t need coding experience to turn static design files into living prototypes. In fact, non-technical professionals (such as marketers) have given Figma great reviews.
Figma is exceptional for teams, especially those working remotely. Different designers can collaborate in real time on the same files together. Also, Figma allows developers to inspect designs from shared prototypes.
Toggling back and forth between designing and prototyping is seamless on Figma. Users can make edits in design mode then see those changes reflected automatically on their prototypes. Your team members can comment on your prototype, which carries over to your static design files.
Since it’s browser based, Figma can sometimes run slowly. This often happens when you’re working with larger files.
Figma also doesn’t have a dedicated offline mode. To get the most out of this app, you need active internet access. This poses a problem for users working with a limited connection to the web.
Figma is free for teams with two editors and three ongoing projects. There are two other pricing tiers available for Figma users:
Note: User Interviews offers a complete platform for finding and managing participants. If you want to test your prototypes with real people who behave like your end-user (or with your existing customers), we’ll get them on your calendar. Sign up for free.
As one of the oldest UX design platforms, Sketch has longevity on its side — and popularity, too. The first release of this digital design toolkit was in 2010. In 2018, they added the tooling needed for interactive prototypes.
Sketch has a healthy ecosystem of kits, templates, integrations, and plugins that make it easier to build prototypes. But if you’re not into downloading plugins, Sketch has enough native functionality to perform simple prototype animations.
Sketch is fast. If you just want to make initial designs, wireframes, or simple prototypes and need them as soon as possible, you can do so easily.
Unfortunately, Sketch is only available for Mac users. If you’re using a Windows or Linux device, this isn’t the software for you. Additionally, access is limited to one device at a time, so you can’t use Sketch on multiple computers without paying for another license.
On its own, Sketch doesn’t have the most robust functionality. Many users prefer to use plugins or to start designs in Sketch and then finish prototyping in another software, like Invision. If you want to make high-fidelity prototypes with advanced interactions, Sketch may not be the choice for you.
Sketch has two paid options available:
Framer excels for producing high-fidelity prototypes that your test users could mistake for the real deal. As of May 2020, your whole team can collaborate in their web app (instead of needing to have it downloaded on your desktop).
Framer boasts animation values that can be used 1:1 in production. In other words, the work you do on the prototype isn’t thrown out when developers start writing code for the final product (it exports as React code).
But even though Framer’s output is compatible with the final product, you don’t have to know how to code to use it well (in contrast to the tools’ earlier years, when designers did need to know some React).
Framer Web is so new that it’s hard to say what will and won’t be a problem. Previously, Framer X was known for its difficulty to learn, but their redesign for the web was intended to fix this problem for good.
You can try Framer for free to decide if it’s worth switching to for personal or professional use. You can run up to three projects with two editors and unlimited viewers, making it one of the more generous free plans around.
Each plan builds on the features from cheaper plans.
There are plenty of prototyping tools to choose from today. Though we’ve spent this article deep diving into five of the best, below are a few more prototyping tools for you to consider:
The right tool certainly helps you make a great prototype, but feedback from your target audience is perhaps even more important than what tool you’re using. Whether you’re perfecting a product’s usability or making sure your user flows are efficient and comprehensive, testing your prototype will help you deliver the best experience to your customers.
User Interviews offers a complete platform for finding and managing participants. If you have your own users, great! You can keep track of all your research efforts with them in Research Hub (free for the first 100 participants).
If you can’t or don’t want to test your prototypes with existing customers, we’ll help you find real people who behave like your end-user. Sign up and find your first three participants for free.
Research Methods & Deliverables
November 22, 2019
Love letters & breakup letters. Experience journey mapping. Prototype testing tweaks. This post unpacks the unconventional but fun-and-effective methods of Brandie Ward Smith.