As a new or experienced UX designer, you know that creating a quality prototype is an important part of the UX design process. That said, if you don't have the right tool, it can be a time consuming and costly endeavor.
Having the right prototyping tool is key—but how do you find the one that's right for the way you work or the demands of a particular project?
Some prototyping tools are designed to support early user testing and a basic demonstration of user flows. Others are full-stack which allow you to design your prototypes or wireframes, simulate realistic and rich user interactions, collaborate with your team, and generate code that is ready to handoff to developers.
Here are six of the best to try out. 8 essential tools for UI prototyping. Origami's a Mac-only tool developed at Facebook (Image credit: Facebook) Developed at Facebook as a tool for building and designing products, Origami is available free for Mac users. You need to be a registered Apple developer to get started, with.
Origami Studio, a brand new design tool built from scratch by Facebook Design, is coming later this year for free. Origami is a free tool for designing modern user interfaces. Quickly put together a prototype, run it on your iPhone or iPad, iterate on it, and export code snippets your engineers can use. Sep 15, 2021 For example, my prototype allowed me to take photos with my phone camera. Additionally, as a tool built by my company Facebook, it accelerated my prototyping process by leveraging internal Origami. From Origami to a Prototype Stent. An exhibition at the Japanese American National Museum in Los Angeles includes a fascinating glimpse into how origami has inspired medical technology engineers. If you are in Los Angeles between now and August 26 and have an unfolding interest in origami and medical technology—they are not. Rapid Prototyping of 3D DNA-Origami Shapes with caDNAno The Harvard community has made this article openly available. Please share how this access benefits you. Your story matters Citation Douglas, Shawn M., Adam H. Marblestone, Surat Teerapittayanon, Alejandro Vazquez, George M. Church, and William M.
Which tool you'll 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.
So many things to consider! That's why we've created this list of our top 11 prototyping tools for UX designers—to help you decide which one is best for you, your team, or your next project.
For each tool we'll cover the cost (USD), system requirements, how easy it is to get up and running, what it's like to actually use the tool (it's UX), and the fidelity of the final product. Let's get into it!
The 11 prototyping tools we're going to guide you through are:
1. Adobe XD
Adobe XD would be considered a full-stack prototyping tool, meaning you can create designs from scratch, link pages together in a clickable prototype, and share your work easily—all in one tool.
Price
- $9.99 per month
- $52.99 per month as part of the Adobe Creative Cloud which gives you access to all Adobe apps.
Getting started
XD is laid out similar to other design editors (e.g. Sketch and Framer) and if you've used an Adobe product before it should be familiar to you. Check out this tutorial on UX prototyping with Adobe XD, together with some of XD's own built-in tutorials (complete with downloadable resource files).
System requirements
- Available for macOS or Windows10
Deliverables
Prototypes created with XD can be built for mobile, tablet, or desktop, and I would classify them as mid-fidelity. You can create some advanced experiences with their new voice prototyping commands and audio playback features—but the finished interactions will be visually basic.
What it's like to use Adobe XD
If you're familiar with other Adobe products, this might be a no brainer for you. You can easily create your wireframes in the design tab, then easily switch to prototype and add start linking your components together.
You'll be able to specify triggers as either tap, drag, key click, or voice command—simply hold down your space bar to activate your microphone, speak the command word you specified and watch your prototype respond! There's even a built-in preview that allows you to record your prototype in action.
Collaboration capabilities
XD seamlessly works with other Adobe apps like Photoshop, Illustrator, and supports importing from Sketch. All Adobe products work in the Creative Cloud which saves all of your files in one place where you can grant access to your entire team. Further, XD is beta-testing a coediting feature where multiple people can work on the same document live!
2. InVision
InVision is a tool that takes your pre-existing designs and quickly transforms them into a clickable prototype by applying hotspots to your wireframes.
Price
- Free for one prototype
- $13 per month on a yearly plan for up to three prototypes
- $22 per month on a yearly plan for unlimited prototypes
Ease of learning
Since you aren't designing any wireframes in InVision, the platform is simple to navigate. This was the first prototyping tool I'd ever used, and I was up and running very quickly. If you're already a Sketch user, the Craft plugin makes things even easier as you import your artboards seamlessly into the project area.
System requirements
- Web-based tool for your browser & all files are saved on the InVision cloud server
Collaboration capabilities
InVision is really great for soliciting early feedback on your user flows. It's simple and quick for others to follow a link to your prototype, create an Invision account, and insert their comments as they click through your prototype on their own devices.
The UX of InVision
InVision's layout makes it easy to import wireframes and organize them in your respective user flows. Once you import your screens it won't take long to understand how to drag over an element of your wireframe, apply a hotspot, and add a transition to another screen in your library.
Deliverables
InVision is best for early stage designing and user testing, and produces a low/mid-fidelity prototype for mobile or desktop. The animations are more basic than others on the market, so the actual user testing done with your prototypes will be basic as well. Worth noting that Invision Studio is a new tool that can bring your prototypes to a greater level of fidelity, so if you enjoy using their basic tool and want more—check it out.
3. Sketch
Sketch was built with the designer in mind and supports you in creating vector-based designs and quickly viewing them as a clickable prototype.
Price
- $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.
Ease of learning
Sketch is a beginner friendly application—and it may sound cliche—but 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.
### System requirements
- Available only on MacOS
Collaboration capabilities
- Share your prototype with others simply with a link they can view in their browser
- Sketch has its own cloud storage system which you can grant your team full access to
- Developers can view your designs in a browser, inspect elements, and export assets for free
Where Sketch belongs in your toolkit
Sketch definitely isn't the first program people think of when it comes to prototyping, and while it's a dream to design wireframes, it really shines as a companion to other prototyping tools.
Deliverables
Your Sketch prototype will be clickable and simple. It has fewer transition customizations than Adobe XD or 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.
4. Figma
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.
Price
- Free for two editors and three projects
- $12/month (on yearly plan) for unlimited projects and editors
Ease of learning
With a familiar looking interface, Figma is known to be an easy tool for designers to pick up and figure out—especially if you‘ve used Sketch before. There is no coding knowledge required to add interactivity to your designs in Figma.
System requirements
- Available on the web, MacOS, or Windows
Deliverables
Figma prototypes are basic and will present similar to the other click-through mid-fidelity prototypes we've discussed so far.
Collaboration capabilities
With real-time editing capabilities that mirror a multi-editor Google doc experience—your team will love working together with Figma.
The UX of Figma
Figma has all of the essential design tools you'd want from Sketch, and is equally intuitive to use. It's easy to stitch wireframes into your prototype so you don't need to worry about importing your designs as you continue your design process in a single tool.
5. Balsamiq
Balsamiq is a rapid wireframing and prototyping tool that allows you to link your screens together to demonstrate simple user flows.
Price
- $9 per month for two projects at a time
- $49 per month for up to 20 projects
Ease of learning
Balsamiq is simple to use and produces a product you would show your team early on to refine your user flows and content strategy—this tool will help you to layout your app and collect feedback before the designs go through any iterations.
System requirements
- Available as a web app for any browser
- Desktop app compatible with MacOS and Windows
Deliverables
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—if you export your Balsamiq prototype as a PDF, the links you embed will still work!
Collaboration capabilities
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.
The UX of Balsamiq
Balsamiq may be the lowest-fidelity prototyping tool we'll discuss today, but it certainly has personality! Don't let the sketch aesthetic fool you into thinking Balsamiq's platform isn't 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.
6. UXPin
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.
Price
- $19/month billed yearly for unlimited prototypes with animations, interactions and states
- $29/month billed yearly for unlimited advanced prototypes with variables, expressions, and logic
Ease of learning
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.
System requirements
- Cloud-based web tool that works from your browser
- Also available as a desktop app for PC or Mac
Deliverables
Wow! UXPin delivers high-fidelity prototypes that I personally can't 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—their 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.
Collaboration capabilities
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.
What it's like to use UXPin
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.
To help you in making your decision, UXPin actually has listed at the bottom of their site navigation, ‘UXPin vs. ____', which compares their tool with almost every other prototyping tool we've mentioned in our list.
Although there are extra features to navigate with UXPin, there are hundreds of tutorials online and the end product is so impressive that it's worth taking the time to learn.
7. Flinto
Flinto is the prototyping tool designed for Mac users to create high-fidelity interactive experiences.
Price
- $99 for a license with one year of free updates
Ease of learning
Flinto is pretty easy to pick up, and looks similar to Sketch's layout. You don't have to know any code to use Flinto, and they have a Youtube channel with tutorials—though it hasn't 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.
System requirements
- Only available for Mac, and it's preview app is made specifically for iOS
Deliverables
Despite it not being one of the most popular tools I've come across, Flinto is great for presenting advanced animations, transitions, and gestures. The prototype you'll come away with is high-fidelity and viewable on a mobile iOS device or your Mac desktop.
Collaboration capabilities
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.
The UX of Flinto
Flinto is really focused on interaction design and presenting sophisticated animations, however, it isn't as complete of a solution as other tools have become. It lacks collaborative capabilities and isn't going to help with your developer handoff as much as others.
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.
8. Origami
This unique prototyping tool was created by Facebook designers and has helped build products like Instagram and Messenger.
Price
- Completely free!
Ease of learning
If you're a beginner and haven't 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—but you should still give yourself extra time to learn this tool.
System requirements
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.
Deliverables
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's image straightening feature, where the user can watch as the image and the degrees adjust while they drag their finger along a scale—the prototype exactly mimics the experience you get using the app.
Collaboration capabilities
Origami supports sharing your prototype or viewing it on a device with the application installed, but there aren't 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.
What it's like to use Origami
Origami's 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 ‘patches' which show up on your canvas next to the prototype viewer. You'll 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).
Opening up Origami for the first time was a bit intimidating, especially after being ‘taken by the hand' by many of the other tools with their onboarding and built-in tutorial videos. There are videos on Origami's website you can walk through, and a few on Youtube. This is a free tool, so I wouldn't expect the same kind of attention to the beginner UX as other tools.
9. Framer
Framer focuses on smooth team collaboration and rich interactive prototyping.
Price
- Free up to 3 projects with 2 editors
- $16/month billed yearly
Ease of learning
While some have complained that Framer has a bit of a learning curve—the creators claim you can be up and running with basic knowledge in five minutes due to their new comprehensive onboarding. If you've used any Adobe tool you'll recognize the mixture of coach marks and video onboarding. The tutorials actually play and pause automatically in your workspace each time you're given a new step to try.
System requirements
- Web application that runs best on Chrome
- Desktop app is for MacOS and only available for Pro users ($33/month)
- Framer Preview allows you to check out your design on any mobile device and is compatible with both Android and iOS.
Deliverables
You can expect high-fidelity interactive prototypes with Framer, for an experience that's as close to your final product as possible.
Collaboration capabilities
From multiplayer editing, inline commenting, to sharing your prototype in one click—Framer really delivers a great collaborative experience for teams.
The UX of Framer
The Framer platform is familiar to Sketch and Adobe XD with its editing panels and layer organization. Framer is great for learning how a developer will receive your design work—for example, the platform allows you to organize similar components into ‘stacks' that you can edit as a set—which is similar to how a design would be implemented with code.
10. Axure
The all-in-one UX platform that creates rich prototypes and supports quality developer handoff.
Price
If you're familiar with other Adobe products, this might be a no brainer for you. You can easily create your wireframes in the design tab, then easily switch to prototype and add start linking your components together.
You'll be able to specify triggers as either tap, drag, key click, or voice command—simply hold down your space bar to activate your microphone, speak the command word you specified and watch your prototype respond! There's even a built-in preview that allows you to record your prototype in action.
Collaboration capabilities
XD seamlessly works with other Adobe apps like Photoshop, Illustrator, and supports importing from Sketch. All Adobe products work in the Creative Cloud which saves all of your files in one place where you can grant access to your entire team. Further, XD is beta-testing a coediting feature where multiple people can work on the same document live!
2. InVision
InVision is a tool that takes your pre-existing designs and quickly transforms them into a clickable prototype by applying hotspots to your wireframes.
Price
- Free for one prototype
- $13 per month on a yearly plan for up to three prototypes
- $22 per month on a yearly plan for unlimited prototypes
Ease of learning
Since you aren't designing any wireframes in InVision, the platform is simple to navigate. This was the first prototyping tool I'd ever used, and I was up and running very quickly. If you're already a Sketch user, the Craft plugin makes things even easier as you import your artboards seamlessly into the project area.
System requirements
- Web-based tool for your browser & all files are saved on the InVision cloud server
Collaboration capabilities
InVision is really great for soliciting early feedback on your user flows. It's simple and quick for others to follow a link to your prototype, create an Invision account, and insert their comments as they click through your prototype on their own devices.
The UX of InVision
InVision's layout makes it easy to import wireframes and organize them in your respective user flows. Once you import your screens it won't take long to understand how to drag over an element of your wireframe, apply a hotspot, and add a transition to another screen in your library.
Deliverables
InVision is best for early stage designing and user testing, and produces a low/mid-fidelity prototype for mobile or desktop. The animations are more basic than others on the market, so the actual user testing done with your prototypes will be basic as well. Worth noting that Invision Studio is a new tool that can bring your prototypes to a greater level of fidelity, so if you enjoy using their basic tool and want more—check it out.
3. Sketch
Sketch was built with the designer in mind and supports you in creating vector-based designs and quickly viewing them as a clickable prototype.
Price
- $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.
Ease of learning
Sketch is a beginner friendly application—and it may sound cliche—but 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.
### System requirements
- Available only on MacOS
Collaboration capabilities
- Share your prototype with others simply with a link they can view in their browser
- Sketch has its own cloud storage system which you can grant your team full access to
- Developers can view your designs in a browser, inspect elements, and export assets for free
Where Sketch belongs in your toolkit
Sketch definitely isn't the first program people think of when it comes to prototyping, and while it's a dream to design wireframes, it really shines as a companion to other prototyping tools.
Deliverables
Your Sketch prototype will be clickable and simple. It has fewer transition customizations than Adobe XD or 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.
4. Figma
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.
Price
- Free for two editors and three projects
- $12/month (on yearly plan) for unlimited projects and editors
Ease of learning
With a familiar looking interface, Figma is known to be an easy tool for designers to pick up and figure out—especially if you‘ve used Sketch before. There is no coding knowledge required to add interactivity to your designs in Figma.
System requirements
- Available on the web, MacOS, or Windows
Deliverables
Figma prototypes are basic and will present similar to the other click-through mid-fidelity prototypes we've discussed so far.
Collaboration capabilities
With real-time editing capabilities that mirror a multi-editor Google doc experience—your team will love working together with Figma.
The UX of Figma
Figma has all of the essential design tools you'd want from Sketch, and is equally intuitive to use. It's easy to stitch wireframes into your prototype so you don't need to worry about importing your designs as you continue your design process in a single tool.
5. Balsamiq
Balsamiq is a rapid wireframing and prototyping tool that allows you to link your screens together to demonstrate simple user flows.
Price
- $9 per month for two projects at a time
- $49 per month for up to 20 projects
Ease of learning
Balsamiq is simple to use and produces a product you would show your team early on to refine your user flows and content strategy—this tool will help you to layout your app and collect feedback before the designs go through any iterations.
System requirements
- Available as a web app for any browser
- Desktop app compatible with MacOS and Windows
Deliverables
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—if you export your Balsamiq prototype as a PDF, the links you embed will still work!
Collaboration capabilities
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.
The UX of Balsamiq
Balsamiq may be the lowest-fidelity prototyping tool we'll discuss today, but it certainly has personality! Don't let the sketch aesthetic fool you into thinking Balsamiq's platform isn't 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.
6. UXPin
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.
Price
- $19/month billed yearly for unlimited prototypes with animations, interactions and states
- $29/month billed yearly for unlimited advanced prototypes with variables, expressions, and logic
Ease of learning
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.
System requirements
- Cloud-based web tool that works from your browser
- Also available as a desktop app for PC or Mac
Deliverables
Wow! UXPin delivers high-fidelity prototypes that I personally can't 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—their 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.
Collaboration capabilities
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.
What it's like to use UXPin
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.
To help you in making your decision, UXPin actually has listed at the bottom of their site navigation, ‘UXPin vs. ____', which compares their tool with almost every other prototyping tool we've mentioned in our list.
Although there are extra features to navigate with UXPin, there are hundreds of tutorials online and the end product is so impressive that it's worth taking the time to learn.
7. Flinto
Flinto is the prototyping tool designed for Mac users to create high-fidelity interactive experiences.
Price
- $99 for a license with one year of free updates
Ease of learning
Flinto is pretty easy to pick up, and looks similar to Sketch's layout. You don't have to know any code to use Flinto, and they have a Youtube channel with tutorials—though it hasn't 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.
System requirements
- Only available for Mac, and it's preview app is made specifically for iOS
Deliverables
Despite it not being one of the most popular tools I've come across, Flinto is great for presenting advanced animations, transitions, and gestures. The prototype you'll come away with is high-fidelity and viewable on a mobile iOS device or your Mac desktop.
Collaboration capabilities
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.
The UX of Flinto
Flinto is really focused on interaction design and presenting sophisticated animations, however, it isn't as complete of a solution as other tools have become. It lacks collaborative capabilities and isn't going to help with your developer handoff as much as others.
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.
8. Origami
This unique prototyping tool was created by Facebook designers and has helped build products like Instagram and Messenger.
Price
- Completely free!
Ease of learning
If you're a beginner and haven't 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—but you should still give yourself extra time to learn this tool.
System requirements
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.
Deliverables
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's image straightening feature, where the user can watch as the image and the degrees adjust while they drag their finger along a scale—the prototype exactly mimics the experience you get using the app.
Collaboration capabilities
Origami supports sharing your prototype or viewing it on a device with the application installed, but there aren't 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.
What it's like to use Origami
Origami's 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 ‘patches' which show up on your canvas next to the prototype viewer. You'll 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).
Opening up Origami for the first time was a bit intimidating, especially after being ‘taken by the hand' by many of the other tools with their onboarding and built-in tutorial videos. There are videos on Origami's website you can walk through, and a few on Youtube. This is a free tool, so I wouldn't expect the same kind of attention to the beginner UX as other tools.
9. Framer
Framer focuses on smooth team collaboration and rich interactive prototyping.
Price
- Free up to 3 projects with 2 editors
- $16/month billed yearly
Ease of learning
While some have complained that Framer has a bit of a learning curve—the creators claim you can be up and running with basic knowledge in five minutes due to their new comprehensive onboarding. If you've used any Adobe tool you'll recognize the mixture of coach marks and video onboarding. The tutorials actually play and pause automatically in your workspace each time you're given a new step to try.
System requirements
- Web application that runs best on Chrome
- Desktop app is for MacOS and only available for Pro users ($33/month)
- Framer Preview allows you to check out your design on any mobile device and is compatible with both Android and iOS.
Deliverables
You can expect high-fidelity interactive prototypes with Framer, for an experience that's as close to your final product as possible.
Collaboration capabilities
From multiplayer editing, inline commenting, to sharing your prototype in one click—Framer really delivers a great collaborative experience for teams.
The UX of Framer
The Framer platform is familiar to Sketch and Adobe XD with its editing panels and layer organization. Framer is great for learning how a developer will receive your design work—for example, the platform allows you to organize similar components into ‘stacks' that you can edit as a set—which is similar to how a design would be implemented with code.
10. Axure
The all-in-one UX platform that creates rich prototypes and supports quality developer handoff.
Price
- $29/month per user for basic that include unlimited prototypes
- $49/month per user for the team version equipped with coediting, cloud services, and revision history
Ease of learning
Axure's platform is pretty intuitive and reminiscent of other visual design tools we've discussed here. You definitely don't 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.
System requirements
- Available for Windows or MacOS
Deliverables
Axure can produce some of the high quality prototypes for mobile, desktop, or tablet.
Collaboration capabilities
- Team version of Axure has co-editing capabilities, team access to files saved in their cloud server, and history of design revisions made
- Notifications are integrated with Slack for great workflow continuity
The UX of Axure
Axure's 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.
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.
11. Webflow
A very powerful prototyping tool that your development team will thank you for!
Price
- $35/month
Ease of learning
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—Webflow will feel like home.
Deliverables
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.
Collaboration capabilities
Xilisoft video converter. 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—Webflow automatically generates code that your developers can access as you build.
What it's like to use Webflow
This platform was designed with developers in mind, so although you won't 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'll want to understand how tags and classes work so you can change the styling of multiple elements at a time.
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).
Choosing the best tool for you
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've seen, the type of prototyping tool you'll use depends on the goals of your prototype, what kind of team you're working with, and what skills you already possess. Here are a few statements that summarize the main differences we tackled in the article:
- If you are comfortable working with code, and want to showcase the highest fidelity prototypes—choose something like Axure or Webflow.
- If you regularly handoff your prototypes and designs to developers but don't know much about code—try UXPin or Framer.
- If you're in the early stages of your design process and need something quick and content-focused—Balsamiq or Invision might be best.
- If you want to present a polished prototype and primarily use MacOS—use Flinto or Origami.
- If most of your time will be spent designing the wireframes to perfection with a little prototyping—check out Sketch, Adobe XD, Figma.
If you've settled on a tool and are interested in learning more about prototyping, check out these articles from our blog:
And if you want to find some more tools to see throughout the UX design process, here are nine UX design tools to master.
User experience is a significant part of customer engagement. The better the user experience is, the more engaged your customer will be. However, preparing mockups and wireframes is time-consuming, and getting a sign-off at each stage can also create unnecessary work for clients, which is never a good thing! That's where using prototyping tools comes in handy. Prototyping tools can breathe life into ideas and show concepts in action without having to build. Using prototypes will give your client insight into what the finished product might look like and how their ideas might take shape.
Prototyping tools can speed up the product creation process, which means that your team can become more efficient and effective. In addition, prototypes convey your ideas to clients naturally and visually, and they can powerfully influence the way you design.
Interactive prototypes provide an overview of your design, interactions, and ideas. Sharing prototypes for feedback and then creating new versions with relative ease has significantly impacted designers' working methods.
How to Choose the Right Prototyping Tool
Choosing the right prototyping tool is critical. Get it right, and you'll be able to seamlessly translate your thoughts and ideas with your client and work together collaboratively and harmoniously. Get it wrong and you might get bogged down in complicated details and add to your workload instead of lightening it.
Choosing the best one for the job isn't always easy as there are plenty to choose from, and each tool has different features that set it apart from the rest. Before you decide on your prototyping tool, it is a good idea to consider the following factors.
Ease of use
A designer needs to grasp how to use the features of the prototyping tool quickly and easily. All tools provide different features, so understanding which ones you need will minimize the time it takes for someone to master how to use the tool. So look for intuitive tools to ensure that the one you pick removes steps in the design process rather than adds to them.
Sharing abilities
Collaboration is an integral part of the design. So any prototyping tool worth its salt will make collaboration easy. This means multiple users should sync with each other and input their ideas into the project. Everyone has the ability to share these ideas, so they can remain on the same page.
Usage and integration
Prototyping tools that can seamlessly integrate with the other tools you use regularly will be a no-brainer for your business. If you use other popular design software such as Photoshop or Sketch, a prototyping software that doesn't require you to export assets separately will be a wise choice.
Origami Prototyping
Price and budget
Naturally, whenever you invest in your business, the price will play a role. Some prototyping tools offer more niche features but are likely to be the ones that come with a heftier price tag. There are also lots of free prototyping tools out there. So be clear about what you need – there is no point paying out for an expensive tool if you don't use the features it offers after all.
Origami Prototyping Tool
A List of the Best Prototyping Tools
Choosing a prototyping tool that's right for your business isn't a decision you should take lightly. Let's examine some of the best prototyping tools and their features, so you can understand how to choose the best one.
#1 Figma
Figma is an all-singing, all-dancing tool that has excellent collaborative features and is super accessible too. If your team works on a browser-based, cloud-hosted platform, Figma will impress with its range of flexible styles that keeps you in charge of your text and design elements. It also offers a whole host of additional plugins, such as Autoflow, which can break down user flows, Figmotion, for creating stunning animations, and many more.
Compatibility: Mac/Windows users
Price: Free with limited features; paid plans start from $12 per editor/month
Origami Prototyping Tool
#2 Boxmode
Boxmode is another handy prototyping tool that's ideal for creating responsive websites with zero coding. If you want to knock out a website in no time, Boxmode's drag and drop editor is ideal. The website builder also offers a host of handy widgets to make your website much more functional and engage visitors. You can start with a template or use a blank theme. Boxmode also offers a free integration with Unsplash, which gives you access to an unlimited number of royalty-free illustrations.
Above all, Boxmode's free version allows you to create and publish a full-scale site for you or your clients super-quickly and without spending a dime.
Compatibility: Mac/Windows users
Price: Free and paid plans, starting from $4.5 per month
#3 Balsamiq
Balsamiq is an intuitive tool for creating user interfaces, sleek web design, and mobile applications. You can drag and drop to position and rearrange elements with ease. Another cool feature of Balsamiq is that it allows users to experience the feel of writing on a whiteboard, so you get that impression of brainstorming on pen and paper while using the software.
Compatibility: Mac/Windows users
Price: Starting from $9 per month
#4 InVision
InVision was first released over a decade ago and has established itself as a leader in the prototyping game. However, the fact that the product is old doesn't mean InVision hasn't kept up with the times. On the contrary, it continues to impress by rolling out new functionality and adding to its already impressive design platform.
Creating functional prototypes is easy with InVision, and sharing with team members and clients is a smooth and seamless process. Users can add notes and feedback via Freehand, and LiveShare allows users to view an interactive demonstration of the prototype too. In addition, there's a vector drawing tool, animation creation tools, and a plethora of visual effects. Plus, InVision offers repeatable components that can be amended across the site.
Compatibility: Mac/Windows users
Price: Free for your first project ($15 per month for three projects | $25 per month for unlimited projects | $99 per month for teams)
#5 Adobe XD
Another popular choice is Adobe XD, which offers tools that create interactions, transitions, and many other kinds of dynamic functionality. It's a vector-based program, which means that scaling and resizing elements is a breeze. Monthly updates mean that it's always one step ahead of the curve.
Origami Prototyping
Naturally, Adobe XD is compatible with other Adobe programs, such as Illustrator and Photoshop, and it offers many great tools for designers to shape their ideas and produce hi-res prototypes.
Compatibility: Mac/Windows users
Price: Free trial; $9.99 per month
#6 Sketch
Sketch is another vector-based design tool that assists designers with the creation of beautiful interfaces efficiently and intuitively. Sketch offers unlimited dartboards, and its unique nested symbols feature means you can pre-design various elements such as buttons, widgets, and more complicated navigation mechanisms. Once you have done so, you can replicate the design on additional artboards and shapes.
Sketch's 'export to code' plugin is another great tool that permits users to export their design into code in a matter of seconds. So, from creation to development, Sketch works hard to make your processes as streamlined and efficient and possible.
Compatibility: Only for Mac users
Price: Free 30-day trial; $9 per editor per month with unlimited free viewers
#7 Origami
Origami is a prototyping tool that's been created by Facebook's design team. Using this tool, designers can explore and test ideas while simultaneously creating a digital product. If you are hoping to design a sleek, contemporary interface, Origami offers a whole range of features to make this easier.
Compatibility: Only for Mac users
Price: Free
#8 Framer
Framer is widely used among designers. Its central idea is simple; with the code, you can prototype anything. Unique and breathtaking designs are the result. In addition, the workflow is intuitive and seamless, and it enables the user to preview the device. It provides version control and hassle-free sharing.
Documentation, how-to videos, and courses are readily available, so understanding how to use Framer is also easy, allowing the user to achieve complex and flexible code.
Framer supports Sketch and Photoshop projects, and it preserves each layer of your design. You can also preview the prototype live alongside code creation, so those who aren't familiar with doing so can see the effects in real-time.
Compatibly: OS X, iOS, Android, Windows 10 Mobile
Price: Free 14-day trial; paid plan starts from $20 per editor per month
Origami Prototyping Tool
Which Prototyping Tool Will You Choose?
Creating great designs can be easy with these UI prototyping tools. It's even easier if you know the basics of UX design techniques.
As you can see, each prototyping tool comes with unique benefits and, therefore, will suit different requirements. We also recommend you check the newest web design trends to create up-to-date prototypes.
