Which tool you\u2019ll select will depend on the goals of your prototype, how quickly you need it available for user testing, who will be working on it, and how it needs to integrate into your workflow.<\/p>\n
So many things to consider! That\u2019s why we\u2019ve created this list of our top 10 prototyping tools for UX designers\u2014to help you decide which one is best for you, your team, or your next project.<\/p>\n
For each tool we\u2019ll cover the cost (USD), system requirements, how easy it is to get up and running, what it\u2019s like actually to use the tool, and the final product. Let\u2019s get into it!<\/p>\n
- \n
- Sketch<\/a><\/li>\n
- Figma<\/a><\/li>\n
- InVision<\/a><\/li>\n
- Balsamiq<\/a><\/li>\n
- UXPin<\/a><\/li>\n
- Flinto<\/a><\/li>\n
- Origami<\/a><\/li>\n
- Framer<\/a><\/li>\n
- Axure<\/a><\/li>\n
- Webflow<\/a><\/li>\n<\/ol>\n
1. Sketch<\/a><\/h2>\n
Sketch was built with the designer in mind and supports you in creating vector-based designs and quickly viewing them as a clickable prototype.<\/p>\n
![\"Screengrab](\"\/en\/wp-content\/uploads\/old-blog-uploads\/sketch-screengrab.jpg\" "\\"Prototyping")
<\/p>\nPrice<\/h3>\n
- \n
- $99 per year for a one-time license which you can use for a year with free updates, and after that if you would like to renew your license to receive further updates its $79 per year.<\/li>\n<\/ul>\n
Ease of learning<\/h3>\n
Sketch is a beginner friendly application\u2014and it may sound cliche\u2014but its interface is really intuitive. The prototyping features available for your Sketch designs are pretty basic, as you can see from the highlighted portion of the panel above. This video <\/a>offers an introductory tutorial to Sketch.<\/p>\n
System requirements<\/h3>\n
- \n
- Available only on MacOS<\/li>\n<\/ul>\n
Collaboration capabilities<\/h3>\n
- \n
- Share your prototype with others simply with a link they can view in their browser<\/li>\n
- Sketch has its own cloud storage system which you can grant your team full access to<\/li>\n
- Developers can view your designs in a browser, inspect elements, and export assets for free<\/li>\n<\/ul>\n
Where Sketch belongs in your toolkit<\/h3>\n
Sketch definitely isn\u2019t the first program people think of when it comes to prototyping, and while it\u2019s a dream to design wireframes, it really shines as a companion to other prototyping tools.<\/p>\n
Deliverables<\/h3>\n
Your Sketch prototype will be clickable and simple. It has fewer transition customizations than InVision, but they all similarly show how your screens flow with one another. Finally, you can view your prototype on your desktop browser or with the Mirror (iOS) app directly on your mobile device.<\/p>\n
2. Figma<\/a><\/h2>\n
Figma is another full-stack design tool that has really sophisticated collaboration to support the design process from wireframing and prototyping all the way to developer handoff.<\/p>\n
![\"Screengrab](\"\/en\/wp-content\/uploads\/old-blog-uploads\/figma-screengrab.jpg\" "\\"Prototyping")
<\/p>\nPrice<\/h3>\n
- \n
- Free for two editors and three projects<\/li>\n
- $12\/month (on yearly plan) for unlimited projects and editors<\/li>\n<\/ul>\n
Ease of learning<\/h3>\n
With a familiar looking interface, Figma is known to be an easy tool for designers to pick up and figure out\u2014especially if you\u2018ve used Sketch before. There is no coding knowledge required to add interactivity to your designs in Figma.<\/p>\n
System requirements<\/h3>\n
- \n
- Available on the web, MacOS, or Windows<\/li>\n<\/ul>\n
Deliverables<\/h3>\n
Figma prototypes are basic and will present similar to the other click-through mid-fidelity prototypes we\u2019ve discussed so far.<\/p>\n
Collaboration capabilities<\/h3>\n
With real-time editing capabilities that mirror a multi-editor Google doc experience\u2014your team will love working together with Figma.<\/p>\n
The UX of Figma<\/h3>\n
Figma has all of the essential design tools you\u2019d want from Sketch, and is equally intuitive to use. It\u2019s easy to stitch wireframes into your prototype so you don\u2019t need to worry about importing your designs as you continue your design process in a single tool.<\/p>\n
3. InVision<\/a><\/strong><\/h2>\n
Over the past decade, InVision has become a staple of designers worldwide. This comprehensive design and prototyping web-based app facilitates the end-to-end design process, from creating initial designs to interactive prototypes and collaborative sharing.\u00a0<\/span><\/p>\n
![\"the](\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2020\/07\/invision-scaled.jpg\" "\\"\\"")
<\/p>\nPrice
\n<\/b><\/h3>\nInvision is free to use with one active prototype. After that, they offer different plans starting at $15 a month.<\/span><\/p>\n
Ease of learning<\/h3>\n
One of InVision\u2019s strengths is its straightforward, intuitive interface. It\u2019s easy to get going on, is user-friendly, and offers a wealth of tutorials and resources to help users master the more complex features.<\/span><\/p>\n
System requirements<\/h3>\n
- \n
- Cloud-based web tool that works from your browser<\/span><\/li>\n<\/ul>\n
Collaboration capabilities<\/h3>\n
InVision is known for its strong emphasis on collaboration. Designers can share prototypes with team members, stakeholders, and clients and gather feedback through comments and annotations directly on the designs. With its user testing and remote usability study capabilities, it\u2019s also a valuable tool for teams that need to gather user insights.<\/span><\/p>\n
What it\u2019s like to use<\/h3>\n
It\u2019s easy to see why InVision has become a staple of designers worldwide.\u00a0<\/span><\/p>\n
A lot\u2019s already been said about its collaborative functionality, and for good reason.\u00a0The prototyping capabilities are robust. It\u2019s easy to add interactive elements, animations and transitions to your designs, making them feel more like real user experiences. The click-and-drag capabilities and intuitive interface make it easy to get going on relatively complex stuff, and the tutorials are super clear for anything you don\u2019t grasp.\u00a0<\/span><\/p>\n
All-in-all, using InVision is a pleasure, and the results speak for themselves.<\/span><\/p>\n
4. Balsamiq<\/a><\/h2>\n
Balsamiq is a rapid wireframing and prototyping<\/a> tool that allows you to link your screens together to demonstrate simple user flows.<\/p>\n
![\"Screengrab](\"\/en\/wp-content\/uploads\/old-blog-uploads\/balsamiq-screengrab.jpg\" "\\"Prototyping")
<\/p>\nPrice<\/h3>\n
- \n
- $9 per month for two projects at a time<\/li>\n
- $49 per month for up to 20 projects<\/li>\n<\/ul>\n
Ease of learning<\/h3>\n
Balsamiq is simple to use and produces a product you would show your team early on to refine your user flows and content strategy\u2014this tool will help you to layout your app and collect feedback before the designs go through any iterations.<\/p>\n
System requirements<\/h3>\n
- \n
- Available as a web app for any browser<\/li>\n
- Desktop app compatible with MacOS and Windows<\/li>\n<\/ul>\n
Deliverables<\/h3>\n
These prototypes are a step above low-fidelity, as look like a digitized-paper prototype. Linking elements in a wireframe here works as a simple clickable prototype, with the only action available being a transition to another screen (no overlay, animations, or custom transitions). One neat thing to note\u2014if you export your Balsamiq prototype as a PDF, the links you embed will still work!<\/p>\n
Collaboration capabilities<\/h3>\n
You can invite peers to view your designs right from the platform via email, and collect feedback that is focused on the layout of content and interactions instead of small details.<\/p>\n
The UX of Balsamiq<\/h3>\n
Balsamiq may be the lowest-fidelity prototyping tool we\u2019ll discuss today, but it certainly has personality! Don\u2019t let the sketch aesthetic fool you into thinking Balsamiq\u2019s platform isn\u2019t well designed. While it may not be your first choice for dynamic prototypes, it is a great tool meant to start big picture UX\/content conversations.<\/p>\n
5. UXPin<\/a><\/h2>\n
UXPin is another full stack UX platform which supports you from end-to-end in your design process, and specializes in creating high-fidelity interactive prototypes.<\/p>\n
![\"Screengrab](\"\/en\/wp-content\/uploads\/old-blog-uploads\/uxpin-screengrab.jpg\" "\\"Prototyping")
<\/p>\nPrice<\/h3>\n
- \n
- $19\/month billed yearly for unlimited prototypes with animations, interactions and states<\/li>\n
- $29\/month billed yearly for unlimited advanced prototypes with variables, expressions, and logic<\/li>\n<\/ul>\n
Ease of learning<\/h3>\n
Although UXPin designs are code equipped, it does not require the same steep learning curve of a few of our other prototyping tools which require some coding knowledge (e.g. Webflow and Axure). The platform for editing your wireframes is similar to other popular tools in terms of layout, layers, and property editing panes.<\/p>\n
System requirements<\/h3>\n
- \n
- Cloud-based web tool that works from your browser<\/li>\n
- Also available as a desktop app for PC or Mac<\/li>\n<\/ul>\n
Deliverables<\/h3>\n
Wow! UXPin delivers high-fidelity prototypes that I personally can\u2019t differentiate from the real thing. Elaborate animations and conditional interactions which add logic to your design, really set the bar high. For example, during user testing your participant can enter their name in a text field, and when they submit their data\u2014their name will appear in a greeting message on the next page. Conditional interactions are things like setting up password parameters that must be met in order for the user to continue to the next page in the prototype.<\/p>\n
Collaboration capabilities<\/h3>\n
The platform is really built to support big teams and projects with its advanced project management and collaborative sharing features. There is also a way to categorize the input given by your team so you can clearly differentiate the source of technical and non-technical comments.<\/p>\n
What it\u2019s like to use UXPin<\/h3>\n
The upgraded version of UXPin allows for live screen sharing, commenting and importing from Sketch and Photoshop. Importing from Sketch and Photoshop is great because it keeps your sketch layers and assets intact, making it easier to add custom animations and interactions.<\/p>\n
To help you in making your decision, UXPin actually has listed at the bottom of their site navigation, \u2018UXPin vs. ____\u2019, which compares their tool with almost every other prototyping tool we\u2019ve mentioned in our list.<\/p>\n
Although there are extra features to navigate with UXPin, there are hundreds of tutorials online and the end product is so impressive that it\u2019s worth taking the time to learn.<\/p>\n
6. Flinto<\/a><\/h2>\n
Flinto is the prototyping tool designed for Mac users to create high-fidelity interactive experiences.<\/p>\n
![\"Screengrab](\"\/en\/wp-content\/uploads\/old-blog-uploads\/flinto-screengrab.jpg\" "\\"Prototyping")
<\/p>\nPrice<\/h3>\n
- \n
- $99 for a license with one year of free updates<\/li>\n<\/ul>\n
Ease of learning<\/h3>\n
Flinto is pretty easy to pick up, and looks similar to Sketch\u2019s layout. You don\u2019t have to know any code to use Flinto, and they have a Youtube channel with tutorials\u2014though it hasn\u2019t been updated in almost a year. Other tools seem to be iterating and upgrading more often. Keep that in mind if you are planning to use it as your go-to tool.<\/p>\n
System requirements<\/h3>\n
- \n
- Only available for Mac, and it\u2019s preview app is made specifically for iOS<\/li>\n<\/ul>\n
Deliverables<\/h3>\n
Despite it not being one of the most popular tools I\u2019ve come across, Flinto is great for presenting advanced animations, transitions, and gestures. The prototype you\u2019ll come away with is high-fidelity and viewable on a mobile iOS device or your Mac desktop.<\/p>\n
Collaboration capabilities<\/h3>\n
Flinto is able to import designs from both Sketch and Figma, but also gives you the tools to mockup your own designs or make changes to imported files. Others can view your prototype from a link once they download the previewing app for an iOS device.<\/p>\n
The UX of Flinto<\/h3>\n
Flinto is really focused on interaction design and presenting sophisticated animations, however, it isn\u2019t as complete of a solution as other tools have become. It lacks collaborative capabilities and isn\u2019t going to help with your developer handoff as much as others.<\/p>\n
Some notable features include adding UI sound effects to your prototype, unique scrolling, and the ability to design your own animated transitions and micro-interactions.<\/p>\n
7. Origami<\/a><\/h2>\n
This unique prototyping tool was created by Facebook designers and has helped build products like Instagram and Messenger.<\/p>\n
![\"Screengrab](\"\/en\/wp-content\/uploads\/old-blog-uploads\/origami-screengrab.jpg\" "\\"Prototyping")
<\/p>\nPrice<\/h3>\n
- \n
- Completely free!<\/li>\n<\/ul>\n
Ease of learning<\/h3>\n
If you\u2019re a beginner and haven\u2019t used any prototyping\/design applications before, this may be tricky to learn. There is an active support group on Facebook (obviously), but the tool could use some built-in onboarding. The Origami product page does offer tailored tutorials for people with a programming background and those from a design background\u2014but you should still give yourself extra time to learn this tool.<\/p>\n
System requirements<\/h3>\n
At this time, Origami is only available for Mac, however the prototyping preview app they offer is available for iOS and Android so you can user test on any mobile device.<\/p>\n
Deliverables<\/h3>\n
Origami can create prototypes with intricate interactions for your watch, mobile device, desktop or tablet. You can expect a high-fidelity prototype with some pretty sophisticated interactions to showcase. For example, Instagram\u2019s image straightening feature, where the user can watch as the image and the degrees adjust while they drag their finger along a scale\u2014the prototype exactly mimics the experience you get using the app.<\/p>\n
Collaboration capabilities<\/h3>\n
Origami supports sharing your prototype or viewing it on a device with the application installed, but there aren\u2019t any commenting or co-editing features at this time. However, Origami does collaborate with other tools like Sketch and Figma to help you import your design layers.<\/p>\n
What it\u2019s like to use Origami<\/h3>\n
Origami\u2019s platform is set up a bit different than our other tools. Although the layer organization is similar to Sketch, to add interactivity you will be creating \u2018patches\u2019 which show up on your canvas next to the prototype viewer. You\u2019ll specify your interaction in one patch, connect that to a transition patch, and specify your destination in a third patch (as shown in the image above).<\/p>\n
Opening up Origami for the first time was a bit intimidating, especially after being \u2018taken by the hand\u2019 by many of the other tools with their onboarding and built-in tutorial videos. There are videos on Origami\u2019s website you can walk through, and a few on Youtube. This is a free tool, so I wouldn\u2019t expect the same kind of attention to the beginner UX as other tools.<\/p>\n
8. Framer<\/a><\/h2>\n
Framer focuses on smooth team collaboration and rich interactive prototyping.<\/p>\n
![\"Screengrab](\"\/en\/wp-content\/uploads\/old-blog-uploads\/framer-screengrab.jpg\" "\\"Prototyping")
<\/p>\nPrice<\/h3>\n
- \n
- Free up to 3 projects with 2 editors<\/li>\n
- $16\/month billed yearly<\/li>\n<\/ul>\n
Ease of learning<\/h3>\n
While some have complained that Framer has a bit of a learning curve\u2014the creators claim you can be up and running with basic knowledge in five minutes due to their new comprehensive onboarding. If you\u2019ve used any Adobe tool you\u2019ll recognize the mixture of coach marks and video onboarding. The tutorials play and pause automatically in your workspace each time you\u2019re given a new step to try.<\/p>\n
System requirements<\/h3>\n
- \n
- Web application that runs best on Chrome<\/li>\n
- Desktop app is for MacOS and only available for Pro users ($33\/month)<\/li>\n
- Framer Preview allows you to check out your design on any mobile device and is compatible with both Android and iOS.<\/li>\n<\/ul>\n
Deliverables<\/h3>\n
You can expect high-fidelity interactive prototypes with Framer, for an experience that\u2019s as close to your final product as possible.<\/p>\n
Collaboration capabilities<\/h3>\n
From multiplayer editing, inline commenting, to sharing your prototype in one click\u2014Framer really delivers a great collaborative experience for teams.<\/p>\n
The UX of Framer<\/h3>\n
The Framer platform is familiar to Sketch with its editing panels and layer organization. Framer is great for learning how a developer will receive your design work\u2014for example, the platform allows you to organize similar components into \u2018stacks\u2019 that you can edit as a set\u2014which is similar to how a design would be implemented with code.<\/p>\n
9. Axure<\/a><\/h2>\n
The all-in-one UX platform that creates rich prototypes and supports quality developer handoff.<\/p>\n
![\"Screengrab](\"\/en\/wp-content\/uploads\/old-blog-uploads\/axure-screengrab.jpg\" "\\"Prototyping")
<\/p>\nPrice<\/h3>\n
- \n
- $29\/month per user for basic that include unlimited prototypes<\/li>\n
- $49\/month per user for the team version equipped with coediting, cloud services, and revision history<\/li>\n<\/ul>\n
Ease of learning<\/h3>\n
Axure\u2019s platform is pretty intuitive and reminiscent of other visual design tools we\u2019ve discussed here. You definitely don\u2019t need to know how to code to create your prototype, but it would help you to know some basic front-end coding so you can understand the language used within the tool.<\/p>\n
System requirements<\/h3>\n
- \n
- Available for Windows or MacOS<\/li>\n<\/ul>\n
Deliverables<\/h3>\n
Axure can produce some of the high quality prototypes for mobile, desktop, or tablet.<\/p>\n
Collaboration capabilities<\/h3>\n
- \n
- Team version of Axure has co-editing capabilities, team access to files saved in their cloud server, and history of design revisions made<\/li>\n
- Notifications are integrated with Slack for great workflow continuity<\/li>\n<\/ul>\n
The UX of Axure<\/h3>\n
Axure\u2019s platform is drag and drop, and is reminiscent of Sketch. This tool is great for developer handoff and is regarded for the quality of the code it generates.<\/p>\n
Creating your prototypes seems pretty simple, and can get more complex when you implement conditional logic on different triggers (i.e. play animation when page loads). You can also apply advanced animations to your components like show\/hide or toggle states.<\/p>\n
10. Webflow<\/a><\/h2>\n
A very powerful prototyping tool that your development team will thank you for!<\/p>\n
![\"Screengrab](\"\/en\/wp-content\/uploads\/old-blog-uploads\/webflow-screengrab.jpg\" "\\"Prototyping")
<\/p>\nPrice<\/h3>\n
- \n
- $35\/month<\/li>\n<\/ul>\n
Ease of learning<\/h3>\n
This is a tool that is designed for someone with basic development knowledge. While anyone can use it, you need to have a basic understanding of HTML5 and CSS. If you were a developer before a designer\u2014Webflow will feel like home.<\/p>\n
Deliverables<\/h3>\n
Webflow produces high-fidelity prototypes for websites or mobile experiences that generate all of the code necessary for your development team to implement your design seamlessly.<\/p>\n
Collaboration capabilities<\/h3>\n
Webflow is set up with a shared dashboard for your whole team to access your prototypes and design files. Designed specifically for collaborative harmony with your dev team\u2014Webflow automatically generates code that your developers can access as you build.<\/p>\n
What it\u2019s like to use Webflow<\/h3>\n
This platform was designed with developers in mind, so although you won\u2019t have to write any code, you will need to understand basic HTML and CSS to understand the language used in the platform. For example, you can drag and drop design elements into your prototype, but they are all labeled as HTML tags (e.g. div block, column, container). Finally, you\u2019ll want to understand how tags and classes work so you can change the styling of multiple elements at a time.<\/p>\n
Your interaction panel contains trigger selection, which lets you specify what your trigger will be (e.g. click, scroll, or page loading). It also contains the animation timeline which specifies what will occur during those triggers at what time(e.g. scroll animation that follows the speed of your scroll).<\/p>\n
Choosing the best tool for you<\/h2>\n
While all of these tools will help you create a working prototype, there is bound to be one that suits your needs better. As we\u2019ve seen, the type of prototyping tool you\u2019ll use depends on the goals of your prototype, what kind of team you\u2019re working with, and what skills you already possess. Here are a few statements that summarize the main differences we tackled in the article:<\/p>\n
- \n
- If you are comfortable working with code, and want to showcase the highest fidelity prototypes\u2014choose something like Axure or Webflow.<\/li>\n
- If you regularly handoff your prototypes and designs to developers but don\u2019t know much about code\u2014try UXPin or Framer.<\/li>\n
- If you\u2019re in the early stages of your design process and need something quick and content-focused\u2014Balsamiq or Invision might be best.<\/li>\n
- If you want to present a polished prototype and primarily use MacOS\u2014use Flinto or Origami.<\/li>\n
- If most of your time will be spent designing the wireframes to perfection with a little prototyping\u2014check out Sketch and Figma.<\/li>\n<\/ul>\n
If you\u2019ve settled on a tool and are interested in learning more about prototyping, check out these articles from our blog:<\/p>\n
- $35\/month<\/li>\n<\/ul>\n
- Available for Windows or MacOS<\/li>\n<\/ul>\n
- Completely free!<\/li>\n<\/ul>\n
- Only available for Mac, and it\u2019s preview app is made specifically for iOS<\/li>\n<\/ul>\n
- $99 for a license with one year of free updates<\/li>\n<\/ul>\n
- Cloud-based web tool that works from your browser<\/span><\/li>\n<\/ul>\n
- Available on the web, MacOS, or Windows<\/li>\n<\/ul>\n
- Available only on MacOS<\/li>\n<\/ul>\n
- Figma<\/a><\/li>\n