6 of the Best UX Prototyping Tools for Product Designers in 2020
Prototyping is vital to software development. It’s the means by which designers, developers, and project managers are able to communicate with one another and bring their ideas to life. Prototypes can assist with ideation, map out user flows, and communicate progress to stakeholders or clients, all without having to write a single line of code. It’s an ideal way to test out ideas and see how your users respond to them—at Tivix, we often develop multiple prototypes of a product before deciding on a winner.
Prototyping software tools make it simple to rapidly bring ideas to life, and go back to the drawing board just as quickly until we find our winning concept. If you’re designing a digital product of your own—or simply curious about what tools most software development teams are using in the process—here are some of the best prototyping tools to consider in 2020.
InVision is one of the leading design presentation apps in the market. Not only does it let you create high fidelity interactive prototypes, it also lets you present them as they’d look in the final product to clients and team members on their preferred viewing device of choice. Real-time comments and to-do lists in InVision’s Live Share mode make collaboration seamless. Built by designers, InVision is the prototyping tool you want to use when you’re presenting your work to stakeholders or clients.
One caveat to note is that to work with InVision, you have to import images (jpeg, png, pdf or gif) or extract prototypes from Sketch or Photoshop. This means it’s not a standalone tool, but it integrates well with the industry-standard vector graphics editors.
With the release of InVision Studio and Design System Manager, they’ve created an even more comprehensive suite of UI/UX design tools. InVision Studio is an ambitious product, while not our tool of choice, it could be a very promising tool for advanced animation, based on early user feedback, time will tell. Design System Manager is proving itself as a valuable tool for creating cohesive design systems at scale, and integrating these design systems directly with your codebase.
Sketch is a vector-based design tool — which means you won’t have to worry about resolution or screen densities when creating logos, layouts and other visual mockups. While Sketch does support interactions and user flows to a certain extent (with plugins), where it really shines is in how it fills the void left by powerful image editing suites like Photoshop which are less optimized for web and mobile app design.
With Sketch, you get basic image editing functionality (without all the photography-focused Photoshop features you don’t need) with the pixel precision and non-destructive editing perks of a vector-based design tool. This powerful feature-set bundled in an interface that supports intuitive and speedy workflows makes it an essential tool of the trade.
Note: Sketch is only available for Mac users.
Marvel is a fully-featured web and mobile solution for prototyping and user testing. It’s reasonably priced to get started and comes up with a whole host of cool features. One of the areas where the app really shines is in user testing. Features include targeted recruitment of testing participants segmented by profession and age, along with voice transcription and session replay.
Another nifty feature is Marvel’s use of triggers and actions – these can be used for communicating UX and product flow to stakeholders. What’s really great about Marvel is that it’s so easy to use. The learning curve is minimal, so even non-designers can ramp up their proficiency pretty quickly.
It also comes with a bunch of handy integrations and plays nicely with Zapier so you can extend its functionality beyond the core feature-set. Launched in 2013, it’s since grown to over 2 million users and is the prototyping tool of choice for many high-profile firms like Stripe, Buzzfeed and Typeform.
Similar to Marvel, Figma is a browser-based design and prototyping tool. It’s a bit more advanced than Marvel in that it’s a fully-fledged product design tool, and can even be used to replace vector graphics tools like Sketch or Illustrator.
It’s a one-stop solution for product design, and we’re loving it at Tivix. It feels a lot like Sketch but since it’s web-based, there’s no need to fret over updates, compatibility issues or version control.
For those looking to add animated transitions to their products, Figma offers ‘smart animate’. Released in late 2019 this feature lets you add more advanced transitions and animations between screens, so users can create prototypes and map interactive effects all with one tool.
There are few better tools out there for collaborative, real-time design work. As designers move away from desktop tools towards seamless collaboration in the cloud, Figma and Marvel are leading the way as the best choices for the modern design process.
Figma also comes with a suite of useful integrations, from collaboration and project management to developer tools to facilitate better handoffs.
Proto.io is a browser-based prototyping tool that specializes in animations and interactions. The platform supports a lot of design features you would expect to see in a desktop application, including gestures and mouse/touch events.
An intuitive drag-and-drop UI lets you prototype complex interactions with no coding knowledge required. If you need an interactive, high fidelity prototype that can run as intended on Apple and Android mobile devices, this is the tool for you.
6. Adobe XD
For a long time, Adobe Creative Cloud (CC) lacked an equivalent lightweight vector graphics editor like Sketch for UI/UX designers who don’t own a Mac. Fans of Adobe CC had to settle for using a combination of Photoshop, Illustrator, and Fireworks (Adobe’s old vector graphics editor which was deprecated in 2013). Adobe XD (Experience Design) is the vector-based design tool PC users were waiting for. All the perks of Sketch, plus native support for interaction design and prototyping, and seamless integration with other Adobe products.
Choose The Right Prototyping Tool For Your Needs
From simple wireframing tools to comprehensive prototyping suites, we hope this roundup provided you with a nice sampling of the most popular UX/UI prototyping tools on the market in 2020. The best tool depends on your project requirements: do you require a fully interactive, high fidelity mockup to present to the board at the end of your next sprint? Or are you looking to fuel the ideation process with some white-board style wireframes? The best prototyping tool is the one that serves the specific needs for your project.