All posts
UX Research Topics
Podcasts
Field Guide
SUBSCRIBE TO OUR NEWSLETTER
FOLLOW US
In this article, we break down five popular prototyping tools, looking at their strengths, weaknesses, and costs.
There’s no shortage of great prototyping tools available for UX designers to use in user research, but picking the prototyping tool that’s right for you depends on your needs.
In this article, we break down six of the best prototyping tools you can choose from today: InVision, Adobe XD, Figma, Sketch, and Framer. We also list seven 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…
That said, all six 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.
And once you've chosen the right tool for you, be sure to visit this article for prototype templates and examples.
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.
🗺 Navigate the UX research software landscape, discover new tools, and identify gaps in your own user research toolkit with the 2022 UX Research Tools Map. 🗺
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:
Starter
Professional
Team
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:
Single-App Access
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:
Professional
Organization
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:
Individual
Team
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.
Starter
Pro
Enterprise
UXPin is on the mission of bridging the gap between design and development. Its recent technology, Merge, allows users to create fully interactive prototypes with production-ready code components.
UXPin has interactivity built into it. You don't need to link static art boards to create an interaction. Its conditional interactions, variables and expressions make it seem like you're interacting with a real product and not a hi-fi prototype.
The prototyping tool simplifies the design handoff process. Developers can take code from UXPin and use it in their work and the spec mode is well though out. UXPin Merge allows you to work with UI code components and remove the handoff drift completely.
UXPin also aims at simplifying design operations. Since designers can drag and drop into the editor the same components that devs are using in their work, the work goes much more smoothly.
Some users report high learning curve in UXPin—the tool may seem to be overwhelming with features and you might need to watch a tutorial before you can feel comfortable using it.
Additionally, UXPin has a rather high price that not every team is ready for. The trial period may be too short to test the tool to its full potential.
UXPin's free trial is good for two prototypes, but they also offer four pricing plans to suit your needs.
Each plan builds on the features from cheaper plans.
Free
Startup
Company
Enterprise
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:
🧰 There’s so much UXR software on the market, it can be difficult to choose. Discover the most popular tools among your fellow researchers in the 2023 UX Research Software Report (based on a survey of 900+ researchers!).
💍 Can one tool rule them all? Explore the differences between all-in-one UX research tools and integrated, best-in-class tech stacks.
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.
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.
