ux design tools

Top 12 prototyping tools for UX designers and UX writers (and how to use them in 2021)

As a new UX designer or UX writer, you may find the variety of design tools confusing. Find out which tools are recommended for wireframes, UI design and prototyping.

Today’s design tools all have their strengths, weaknesses, and general characteristics. To be able pick the right tool for the right situation, you need to know a thing or two. After spending years getting to know them all, trying them out in different scenarios and figuring out which tools would serve me the best, I thought I’d share what I learnt along the way.

 

Apart from getting an introduction to the most common tools on the market, you’ll find out if there’s a free version and if you can use the program on a PC/web browser or if they are only compatible with a Mac.

 

Whether you’re new to UX and design, want to refresh what you know, or just wonder why your more experienced design colleague insists on using Sketch, bookmark this list as a reference!

 

The tools below are divided into four main sections: 

[table id=1 /]
Let’s get to it!

 

This not an affiliated post

 

Planning and wireframes

 

Whimsical 

 

Whimsical is one of my absolute fave tools for creating flowcharts. It’s so user-friendly and intuitive that a beginner can get going within minutes. I know several people without any UI design experience who have used it to create simple mockups. 

 

Cost: 

Free version available

 

What you need to pay for:

 

Compatibility:

Web 

 

Go to Whimsical.com for more info


Miro 

The tool previously known as Realtimeboard is now called Miro. I find it a bit overwhelming myself, but lots of people who love it and find it super useful. Check it out if you want to get your teeth into a tool with seemingly endless possibilities! Can be used for everything from organizing flows to setting up remote workshops.

 

Cost: 

Free version available

 

What you need to pay for:

 

 

Compatibility:

Web 

 

Go to Miro.com for more info


User interface design tools

 

Figma

A game changer in UI design and the first product design tool that offered an environment where designers, writers and developers can work together. I used to call it Google Docs for designers 🙂

 

In the early days of Figma, I preferred to work with other tools but now Figma seems to be catching up. Thanks to lots of new plugins, it offers a collaborative design experience like no other. Needless to say, most UX writers adore Figma as it has made it possible for them to work directly in design sketches.

 

Cost: 

Free version available

 

What you need to pay for:

Compatibility:

Web/PC/Mac/Android mirror app

 

Go to Figma.com for more info


Sketch

When Sketch appeared, there was finally an alternative to Adobe. New designers may never realize just how powerful we felt as we moved from Photoshop / Illustrator to the first ever UI design tool. 

 

I’ll always have a special place in my heart for Sketch, even if it hasn’t kept up with the innovation pace like many other design tools.

 

Pricing is not ideal, compatibility is limited, and there is no solid collaboration option except for DAM. 

 

I still prefer designing in Sketch even if it’s just a matter of time before they are run over by new tools (unless they’ve got massive changes coming up in the very near future).

 

Sketch, I salute you and I hope we’ll meet again on the mainstream design tools scene.

 

Cost: 

Compatibility:

Mac

 

Go to Sketch.com for more info


Adobe XD

Adobe’s answer to the design tool revolution is a kind of hybrid twist. I’ve worked on several projects with XD, and was always impressed with the prototyping features (even though Figma has the same features now). 

 

Another thing worth mentioning is that it is now available for free, which is great. They decided to reduce the price to 0 with the launch of the Invision studio design tool (which is one of the best things to come out of Invision Studio!). 

 

I pay for Adobe’s Creative Cloud apps because I use Photoshop, Illustrator and Aftereffects as well. It’s pricey, but it does give me a few perks. If you’re not already paying for Adobe, I wouldn’t buy it just because of XD.

 

Cost:

Free version available

 

What you need to pay for:

Compatibility:

PC/Mac

Go to Adobe XD for more info


Prototyping 

 

Invision

 

Invision is a perfect match for the Sketch plugin ‘Craft by invision’. This integration changed the way we design when it first appeared, allowing us to create one-click prototypes and prototype updates. These days however, tools like Figma, Adobe XD and even Sketch offer similar features. 

 

Having said that, Invision is a fantastic company that really helped modern product designers produce content. Even today, their prototyping tool works a treat. Every aspect of their product shows that it’s a company for designers, by designers.

 

At some point, pretty much every major company out there used this tool, but today not  many teams have it. I recommend using it only if you work with the Sketch plugin.

 

Cost:

Free version available

 

What you need to pay for:

Compatibility:

Web

 

Go to InVision.com for more info


Framer 

Framer looked very promising both for the ultra-realistic prototypes you could create and for the design tool that came with it. The only problem is that you actually have to learn to code to create prototypes – and once you have a prototype, your developers need to write the code from scratch anyway. It’s just not very efficient

 

My solution was to learn real code and find better tools such as Webflow, or Elementor.

 

Cost

Compatibility:

Mac/Web beta version on the way

 

Go to Framer.com for more info


Principle 

With Principle, you can import your Sketch screen and create cool prototypes and micro interactions. I had a lot of fun with it when I worked with Sketch. 

 

Just remember not to fall into the Dribbble page rabbit hole! You don’t want to invest your precious time to create beautiful but impractical interactions that are impossible for developers to breathe life into. It happened to me as a new designer and it was very sad 🙁 

 

Cost:

$129

 

Compatibility:

Mac

 

Go to Principleformac.com for more info


Webflow

The best combo between design and development. Seriously.

 

If you know a little bit CSS (or if you just invest a week to learn it with their fantastic academy), you can create literally any web experience and export it to code. It is a fab way to present ideas and flows as well as to create stunning websites. 

 

Webflow is the leader of the upcoming #nocode revolution. Learn it to boost your future demand as a designer who’s not scared to get your hands dirty with code – without actually getting your hands dirty ;).

 

Cost:

Free version available

 

What you need to pay for:

Compatibility:

Web

Go to Webflow.com for more info


Developers hands off 

Zeplin

Today, many of Zeplin’s features are also available in Figma, Adobe XD and Invision. Still, it’s a great tool that might help you with your developer hand off. Thanks to a plugin connected to your design tool, you can share your screens with the developers with a click of a button. 

 

It’s one of my fave collaboration tools out there and their copy is always fantastic by the way!

 

Cost:

Free version available

What you need to pay for:

Compatibility:

Web/PC/Mac

 

Go to Zeplin.io for more info


Abstract

 

Back in 2017, I wrote the first ever tutorial for this tool when the beta version was just out: Abstract: Git for designers

 

Since then, Abstract has done really well. By creating the best version control for Sketch and Adobe XD files, you don’t actually have to work on the same drive folder file as the rest of the team. Instead you can branch your own version and merge it with the original when it’s ready.

 

These days, they also focus on design/developer collaboration.

 

Pricing:

Compatibility:
Web/Mac

 

Go to Abstract.com for more info


Storybook

Storybook is an open source tool that allows programmers to develop your UI design system library into a reusable component design system. 

 

So it may not be the first tool you need as a newbie UX wizard, but it’s good to be aware that it exists and introduce it to your developers at some point!

 

Go to Storybook.js.org for more info

 

Final words

 

In a rapidly changing industry, one of the most important things is to stay agile. Be open to new tools and features and always keep learning. Even if you master Figma, you may join a new team that only uses Sketch. That’s why it’s really useful to get at least a basic understanding of the most common tools on the market. It will help you both to land your next UX job and nail  that upcoming design project.

 

Free UX writing course

 

Want to learn how to work with the best design tools out there? Sign up for our free UX writing course, where you get to practice everything you want to learn about design tools and much more!

Edited by Anja Wedberg

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Picture with the text "2021 is loading"
Best practices

10 UX Writing Trends For 2021

The tech industry is racing forward faster than a brand new Tesla Roadster. Writers who want to stay ahead of the game have lots of exciting opportunities ahead. Here are our predictions of what will keep the world of UX writing and content design spinning in 2021.

Join our FREE UX writing course

In this FREE industry-leading course, you’ll learn about:

  • UX writing processes 
  • Testing
  • Research
  • Best practices