The Best Prototyping Tools for UX Designers in 2018

A guide to choosing the best platform for your designs.

After synthesizing user research and thoroughly uncovering problems to solve, user experience (UX) designers begin their design by ideating on a number of solutions. This is where the creative magic happens! Designers sketch to explore many workable solutions to user problems, then narrow them down to the strongest concept. Using that concept, the next step is creating a workable prototype that can be tested for viability against the user’s goals and business needs.

UX designers create prototypes — early models of a product built to test a concept and learn from it — to communicate and test designs for user interfaces of websites and applications. Prototypes communicate much more than static designs. They allow designers to demonstrate an interface’s functionality, flow, interaction, animations, and overall usability.

There are several digital tools available for today’s designers, each with different capabilities and outputs. With new options being released and older mainstays evolving, though, it can be overwhelming to choose the right platform to use.

There are many factors to consider when deciding on a prototyping tool. Among the most important:

• Learnability: Not all platforms are seamless to use. How easy will it be to learn?
• Cost: How much are you willing to invest in a new, unfamiliar tool? Costs can range from free to several hundred dollars per year.
• Filetype and outputs: How will you export and/or demo your prototype to accommodate your current workflow?
• Project goal: What is your end-goal for the project? Are you presenting hi-fidelity comps to a client? Preparing annotated, workable prototypes to hand off to a development team? Demonstrating animated interaction design concepts for your internal design review? Conducting usability tests with users? Different platforms work to different strengths.

Across General Assembly’s global campuses, we use a variety of prototyping tools in our UX courses, some chosen by instructors and some by students. Here are several that our community has explored and found to be popular in the field to help you choose the right platform for your designs.

Sketch + InVision

The design toolkit Sketch has become one of the more popular UI design tools, beating out industry mainstays like Adobe Photoshop and Illustrator within many organizations. Designers use Sketch to create anything from low-fidelity wireframes to high-fidelity visual interfaces. Sketch’s primary drawback is that it lacks the ability to simulate interactions like clicks, hovering, tapping, etc., without a third-party integration. Designers looking to make their designs interactive rely on tools like InVision, a pure prototyping solution. InVision doesn’t have drawing or type tools to create designs — it simply sets up interactions, connects corresponding pages, and adds animated transitions to your designs. InVision and Sketch together allow designers to design and build usable prototypes for for testing and generating feedback.

But wait! This love affair may come to an end with the introduction of InVision’s new InVision Studio. This new platform allows users to create their design directly in InVision, which will very likely remove the need for Sketch altogether. We’ll have to wait to see how it shakes out.

Cost: Sketch costs $99 as a single license with no monthly fee. InVision offers a free plan that includes one prototype, or costs $25 per month for unlimited prototypes.

Axure

Axure, released in 2003, has risen to popularity along with the steady demand for UX professionals. Designers looking for advanced interaction capabilities — such as custom animations and JavaScript interactions — will be happy with Axure as their sole prototyping tool. One of its most discussed weaknesses, though, is that it doesn’t output vectors, but rather converts images to bitmap, which can lead to blurring or pixelation when resizing. Axure is also reviewed as more complex in general, translating to a larger time investment needed to learn the tool.

Cost: $495 per user to own or $29 per user per month to subscribe.

Figma

The drag-and-drop interface for the collaborative interface design tool Figma is what makes it a standout for new UX designers, particularly those unfamiliar with HTML and CSS. It includes high-fidelity drawing tools so you can craft designs as close to the final product as possible. Other useful features include automatic responsive designs so all artboards adapt to the screen size, layout grids for designing orderly compositions, and reusable components that allow the user to keep design patterns consistent across their project.

Cost: Free for up to three projects, or $12/month for unlimited projects.

Adobe XD

It’s officially out of beta as of October 2017 and while it doesn’t have as many design tools as Sketch, because it’s Adobe it has our attention. Adobe XD is a product created exclusively for designers to build their prototypes in one place. The software has a handy “play” button to demo your prototype at any time. Its newness means there may be some bugs — I had a student lose hours of work after it crashed on her last cohort, so save often! But the team at Adobe is continuing to add new features — more recently the ability to underline text, view hotspot hints, and open the prototype in full-screen mode when a reviewer clicks the link to view it — so AdobeXD is definitely worth keeping an eye on.

Cost: AdobeXD is available with a Creative Cloud subscription starting at $9.99 per month.

Webflow

Webflow was founded in 2013, a graduate of Y Combinator’s startup accelerator program. Created as tool for designers to craft fully functional custom websites, Webflow works well for prototyping interactive designs. Its user interface is intuitive enough for designers who know minimal HTML and CSS. The Webflow interface gives designers more robust layout and styling options than other CMS options like Squarespace or Wix, which are less viable for prototyping due to limited customization of templates.

Cost: Free! Webflow has a number of free templates for wireframing and creating high-fidelity prototypes.

Having all of these prototyping tool choices at our disposal is great news for designers, and at the end of the day, these are all communication tools designed to push us forward in our design process. If you find yourself stuck in deciding which tool is best, it’s important to go back to the goal of your efforts. Keeping these end-goals in mind will help you decide on what to choose. And take comfort in knowing that our tools are never constant — I’m personally excited to watch how many of these tools will evolve this year!

At General Assembly, learn how to leverage prototyping tools, wireframing, user research, and more to create seamless user experiences. Learn full-time through the career-changing UX Design Immersive, or part-time in our evening UX Design course in person or online, or through short-form workshops and bootcamps at our global campuses, all taught by industry experts. Or dive into business models, UX, and more in our part-time Product Management course, and discover how to launch products people will love.