The right tools can speed up your UX process and enable collaboration.
Prototyping is one of the key phases of the design thinking process, and UX designers have a wealth of tools to help them create rich prototypes.
Prototyping tools not only help UX designers create something real enough to test with users and stakeholders, but they can also speed up the process—especially if design tools are used throughout design, and not just before handing off to development.
Why UX Prototyping?
When UX designers prototype designs early and often in the design process, they can understand how real people will react and use the product. Then they have an opportunity to iterate and make their designs even better. This iterative process of prototype, test, and repeat leads to stronger ideas and designs that are more likely to succeed in the long run. UX prototyping also has many other benefits:
Interactive prototypes help designers explore ideas.
By prototyping interactions and animations, designers can flesh out ideas that show what they want the final design to look like. It helps designers externalize the ideas in their head so that they can smooth out the rough edges of an interaction.
“Prototyping is the conversation you have with your ideas.”— Tom Wujec, TED speaker and founder of The Wujec Group
Prototyping tools enable real-time collaboration.
Tools can also help teams collaborate more effectively. Many app prototyping tools allow designers to easily share files with teammates for feedback and real-time collaboration.
Using prototyping tools also helps designers communicate the design vision to stakeholders and other team members. Showing, rather than telling, strengthens the communication and lowers the risk that other people won’t understand.
Drag and drop tools help us expedite our process.
There’s a reason UX focuses on rapid prototyping. Moving quickly lowers risk and overall cost of a project. Prototyping moves more quickly using tools that use drag and drop interfaces.
Many prototyping tools allow designers to add interactions with a simple click. When designers can spend more time thinking about how to improve the design, rather than struggling with manual tools, the design process improves.
What to look for in a prototyping tool.
With so many UX prototyping tools available, how do you choose? Here are some things to keep in mind as you decide.
Can you try it for free?
Some UX prototyping tools have a trial version to let you take the application for a spin before committing. This is a great way to test drive the tool and see how it works with your design process.
How many people are using the tool? How large is the community that supports and contributes to tool plugins or support forums?
Some of the newer tools will have far fewer users than those that have a well-established user base. If you’re wondering how good a tool is, adoption rate can tell you a lot. Tools with a lot of users tend to be strong.
How long will it take for you to learn the tool? You might not have a lot of time to spend learning a new interface. If you struggle with a prototyping tool, you might want to move on to another one. When you find a tool hard to use, you’re less likely to use it later on. Focus on finding one you feel comfortable with. You also might want to explore a prototyping workshop like this one.
Integration into your process
At the end of the day, any UX design tool should fit your process, or at least allow your process to easily adapt to it. If it’s not easy to add to your process, it won’t be valuable to you.
Top 9 UX Prototyping Tools
Fortunately, UX designers don’t have to look far to find a good prototyping tool. There are so many options out there. Here are just nine of the top prototyping tools to explore.
Sketch is one of the most mature prototyping tools available for UX designers. It was released in 2010 and grown into one of the most common tools for UX designers. Designers use it for creating digital interfaces from websites to apps and icons.
Sketch allows designers to create vector graphics, user flows and interactive prototypes, and teams can sync through a shared cloud workspace. Sketch enables the entire workflow, and it also has a number of helpful integrations with programs like Invision, Zeplin, and Flinto.
It is only available for Mac users.
Figma is a cloud-based design and prototyping tool. Designers use it to create user interfaces for websites, apps, and smaller devices. It’s similar to Sketch, but it can be used cross-platform. In other words, you don’t need a Mac to use it.
Individuals can use Figma for free, although the free plan has some limitations. You can only add two editors and create a maximum of three projects.
Figma has a number of strong features for creating UI designs. Once you are ready, you can turn your designs into a prototype by creating connections between frames. UX designers can set the interaction, apply animations, customize overlays, and more.
Figma prototypes can be previewed using the Figma Mirror app or desktop app. Figma also has a library of tools that connect it to a number of other applications for productivity, design, and delivery to development teams.
Adobe XD is Adobe’s answer to UI design and prototyping. Similar to Sketch and Figma, it includes familiar tools for creating wireframes, prototypes, and interactions for websites, apps, and other digital screens.
It can also be used across platforms, and collaborators can access and use it on Mac, Windows, iOS and Android.
XD released new features in 2019 to better enable team collaboration, including coediting, document history, and share mode. Like Figma, XD also allows designers to import Sketch files. And now, designers can also turn existing Sketch libraries into cloud documents in XD.
XD’s prototyping interface is also similar to Figma, and designers can create connections, overlays, animations and more.
Webflow is a relative newbie on the scene, but more and more designers are using it in their day to day practice. Webflow gives designers the power to create entire websites and apps without coding. Once you’re done, you can export the project into production-ready code.
It’s possible to host an entire project on Webflow, which means you just need to navigate on the website, and you’re in. You don’t need an app to preview or test your design.
There are a few things to consider. Webflow works only in Chrome or Safari. Also, while you can get started for free, you’ll need a membership to create more than two projects.
Webflow can also take some getting used to. It doesn’t move as quickly as other prototyping tools, but it can save you time once you’re ready for development.
Invision has come a long way since it was first released. At its core, Invision is a prototyping tool that allows designers to upload screens and quickly create interactive prototypes. The Invision prototyping tool won’t let you create designs directly in the app. However, its UI allows designers to sync screens from Sketch or Photoshop or import static images. Then, using the Invision build tool, you can arrange and build links between the screens by creating clickable hotspots. You can add transition states and mobile gestures, and even create hover states for any design element.
Designers can share their prototypes across devices or in real-time for live sketching. It’s an intuitive collaboration tool that lets you easily share a link to the prototype with teammates and clients, who can leave comments on any specific area of the design.
Invision’s strength is in its speed and versatility. It has a low barrier to entry, so designers who have never used prototyping tools can quickly create and share working prototypes.
Balsamiq Mockups is more of a wireframing tool than a prototyping tool. That said, it’s a great first step into quickly creating low-fidelity mockups.
Balsamiq is a drag and drop tool that’s easy to learn and fast to use. It doesn’t have any fancy animation capabilities. But it does allow you to link between screens to create a basic prototype and check for flow and functionality. Designers can also export screens and upload them into Invision to create interactive prototypes.
Balsamiq offers both a cloud and a desktop version of the tool. The cloud version pricing varies based on space requirements and how many projects you create.
Axure RP is a very robust tool, and design teams can use it for wireframing, diagramming, and creating interactive prototypes.
Teams have the ability to view your design mockups from mobile devices as well as annotate and create animations.
Axure RP has dozens of features, and it tends to be built more for application software teams.
Framer is a prototype platform ideal for team collaboration. It has a new web platform that enables browser-based design, much like Figma.
Framer allows designers to create simple transitions and microinteractions, as well as advanced animations. No code is required, so it’s easy to get started using it. Plus, you can try it for free.
UXPin is often overlooked, but has a lot to offer UX designers for website or app prototyping. It includes vector drawing tools, the ability to create components, and the ability to collaborate in real-time with your team.
It also has some additional features that make it really special, like its accessibility features, which check for WCAG contrast standards. On the code side, it has the ability to sync React.js components to UXPin, so you don’t have to redraw patterns.
UXPin is available cross-platform, and it’s free to sign up.
Things to keep in mind
Simply by creating prototypes, designers can quickly gather valuable feedback from usability test participants, teammates, and clients to iterate and continuously improve the design.
Remember, these aren’t the only prototyping tools available for UX designers, and it’s important to explore and find the right tool that fits your process. If you haven’t started prototyping yet, try out one or two tools that look promising. Most tools have a free option so you can see what works best for you.
New to UX? Create designs that consider users’ needs and practice prototyping this remote User Experience Design workshop.