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 five of the best prototyping tools you can choose from today, including Adobe XD, Figma, and Framer. We also list a few 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, 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 UX Research Tools Map.
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.
UXPin: The Bridge Between Design & Development
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.
Strengths of UXPin
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.
Weaknesses of UXPin
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.
Price
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
- Limit of 2 prototypes
- Unlimited viewers and commenters
- Slack integration
- Email support
Startup
- $112 per editor/mo or $82 per editor/mo when billed annually
- Unlimited prototypes
- Version history for 7 days
- Custom fonts, lite storybook integration, and other additional features
- Password protected preview
- Chat support
Company
- $149 per editor/mo or $119 per editor/mo when billed annually
- Version history for 30 days
- Jira integration
- Phone and Zoom support
Enterprise
- Chat with sales for pricing
- Unlimited version history
- Git, Vue, and Angular integration
- All collaboration features
- SSO & TFA and security review
- Dedicated account manager
- Training & onboarding
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:
- Principle is one of the best interaction prototyping tools on the market. The downside? It’s only available to Mac and iOS users.
- Marvel requires very little experience to get up and running. It’s an option for those who want low-fidelity prototypes.
- 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.
- 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.
- Origami Studio was built by designers at Facebook for internal use. It's now available for the masses.
- 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.
🤔 Curious about which tools were the most popular this past year? See the latest✨The State of User Research Report✨—read the report to find out which tools UXR teams are using to build prototypes , collaborate remotely, conduct sessions, and more.
💍 Can one tool rule them all? Explore the differences between all-in-one UX research tools and integrated, best-in-class tech stacks.
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.
.webp)
