All posts

UX Research Topics

Podcasts

Field Guide

SUBSCRIBE TO OUR NEWSLETTER

Thank you! You are all signed up.
Oops! Something went wrong while submitting the form.

FOLLOW US

BlogResearch Ops & Tools

May 26, 2020

  • Last Updated:
  • June 4, 2020

5 of Today’s Most Popular Prototyping Tools

In this article, we break down five popular prototyping tools, looking at their strengths, weaknesses, and costs.

Jonathan Santiago

There’s no shortage of great prototyping tools available for UX designers to use, but picking the prototyping tool that’s right for you depends on your needs.

In this article, we break down five of the best prototyping tools you can choose from today: InVision, Adobe XD, Figma, Sketch, and Framer. We also list eight other tools to explore if those aren’t right for you.

We’ll highlight the tools’ strengths, weaknesses, and pricing. In particular, we looked at things like…

  • Ease of use (based on reviews, since not everyone has the same expertise and preferences)
  • Ability to produce low or high fidelity prototypes
  • Ease of collaboration
  • Any other key features (or lack thereof) that might influence your choice.

That said, all five tools are good options for what they do. If you’re looking for straightforward tools for click-through prototypes, then InVision, Figma, and Sketch are solid options. If you want next-level interactions, give Framer a try.

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.  

The best stories about user research

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

InVision: A Favorite in UX Design

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.

Strengths of InVision

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.

Weaknesses of InVision

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.

Price

Invision is free to use with one active prototype. When you need to make more, they offer the following options:

Starter

  • $15 a month
  • Three prototypes.

Professional

  • $25 a month
  • Unlimited prototypes.

Team

  • $99 a month
  • Unlimited prototypes with access for up to 5 other colleagues.

Adobe XD: The Creative Giant’s Answer to UX/UI Design

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. 

Strengths of Adobe XD

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.

Weaknesses of Adobe XD

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.

Price

On its own, Adobe XD is free to use, which includes one active shared prototype at a time. There are also two paid alternatives:

Single-App Access 

  • $9.99 a month
  • Users receive unlimited shared prototypes.

Adobe Creative Cloud

  • $52.99 a month
  • XD comes bundled with 20+ other creative apps.

Figma: A Go-To Tool for Teams

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.

Strengths of Figma

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.

Weaknesses of Figma

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.

Price

Figma is free for teams with two editors and three ongoing projects. There are two other pricing tiers available for Figma users:

Professional

  • $15 a month or $144 annually 
  • This comes with unlimited projects and version history.

Organization

  • $45 a month or $540 annually  
  • Subscribers can create organization-wide design systems and develop centralized teams with this plan.

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.

Sketch: A Simple & Popular Option

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.

Strengths of Sketch

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. 

Weaknesses of Sketch

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.

Price

Sketch has two paid options available:

Individual

  • Lifetime access to the software for $99 
  • For continued updates and cloud access, you’ll pay $79 for each year afterward.

Team

  • $9/month/contributor or $99/year/contributor
  • Shared cloud workspace
  • Unlimited viewers (can comment but not edit)

Framer: A Winner for High-Fidelity Prototyping 

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). 

Strengths of Framer

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).

Weaknesses of Framer

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.

Price

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.

Starter

  • $12/editor/month
  • Unlimited projects and editors.

Pro

  • $20/editor/month
  • Extras such as a desktop app, offline editing, and local file access.

Enterprise

  • Custom pricing
  • SSO (single sign-on)
  • Dedicated support, onboarding, and security.

Honorable Mentions

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:

  1. Principle is one of the best interaction prototyping tools on the market. The downside? It’s only available to Mac and iOS users.
  2. Marvel requires very little experience to get up and running. It’s an option for those who want low-fidelity prototypes.
  3. UXPin helps you create both wireframes and prototypes. It also includes an option to create tasks for user testing.
  4. Axure RP is a robust tool that’s ideal for teams creating complex projects together. Because it’s robust, it comes with a steep learning curve.
  5. Webflow is a web design tool that allows you to build responsive, interactive prototypes. No coding is necessary. Webflow can export your prototypes in full HTML, JS, or CSS code.
  6. Origami Studio was built by designers at Facebook for internal use. It's now available for the masses.
  7. Proto.io helps you create prototypes for any device, from mobile apps to Smart TVs. For users who want to build without code, it has drag-and-drop functionality.

Building Prototypes? Test Them with the Right Users

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.

Whether you’re looking to do research with your own users or with anyone who behaves like your target users, we can help. 

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.

Jonathan Santiago

Author

Jon Santiago is a freelance writer from Northern California. You can learn more about him and see some more work by visiting his website.

More from this author