🔥 Big news: user interviews have come to Hotjar! Read more

Learn / Guides / UI design guide

Back to guides

14 UI design tools and software for every step of the process

Building a user interface (UI) is a complex process with many moving parts; you’ll need tools to do everything from sketching low-fidelity wireframes to animating interactive prototypes to user-testing designs before (and after) they go live. 

Best practices: marketers and product or website owners

Last updated

30 Sep 2022
14 Best UI Design Tools and Software [Free, Paid + Open Source]

In this guide, we cover some of the best free, premium, and open-source UI design tools and platforms for each step of the UI design process, so you can create designs your users will love. 

Skip to the tools you need:

  1. Hotjar

  2. Figma

  3. Sketch

  4. Adobe XD

  5. Anima 

  6. Axure RP

  7. Framer

  8. InVision 

  9. Balsamiq

  10. Marvel

  11. Justinmind

  12. FluidUI

  13. Proto.io

  14. Pencil

Good UI design starts with people, not pixels

Hotjar’s tools help you design your UI around user behavior

Good interface design doesn’t begin with pictures. It begins with an understanding of people: what they’re like, why they use a given piece of software, and how they might interact with it.

Extract from "Designing Interfaces: Patterns for Effective Interaction Design"
by Jenifer Tidwell, Charles Brewer, and Aynne Valencia, Chapter 1, Page 1

1. Hotjar

Hold up: the first tool in a list of UI design tools is… not for design? Yes! 

Good UI design starts before you drag elements into your wireframe, so you need tools to illuminate how people navigate your existing interfaces and collect feedback from current or potential users before you begin wireframing anything new.

#UI insights from Hotjar’s Heatmaps, Recordings, Surveys, and Feedback tools
UI insights from Hotjar’s Heatmaps, Recordings, Surveys, and Feedback tools

What it is: Hotjar is a freemium product experience (PX) insights platform with tools like Heatmaps, Recordings, Surveys, and Feedback, which give you insights into how users interact with both live UIs and prototypes.

UI design stages:

  • User research

  • Usability testing

How to use Hotjar for UI design: 

  • Use Heatmaps to see if users click when you want them to

  • Watch Recordings to learn how users navigate between pages

  • Set up Surveys to understand your users’ goals and JTBD (jobs to be done)

  • Add a Feedback widget so users can tag UI elements with their comments 

  • Find design problems on live UIs to inform your redesigns

  • Collect insights on UI prototypes to see if they work before you go live

  • Spot bugs in new designs as soon as they launch

🤝 Which prototyping tools work with Hotjar?

Hotjar’s tools collect insights on prototypes created by UI design tools that accept third-party JavaScript, so you can add our code. Here are some top UI tools compatible with Hotjar:

2. Figma

What it is: Figma is a freemium all-in-one UI design platform for teams. At Hotjar, we use Figma (and FigJam, Figma’s collaborative whiteboard tool) for brainstorming ideas, UI prototyping, and maintaining our design system.

UI design stages:

  • Wireframing

  • Prototyping

  • Usability testing (with add-on services)

Use Figma to: 

  • Design from a library of free UI kits and wireframe templates

  • Work from the browser app or using the desktop and mobile apps (for macOS, iOS, and Windows)

  • Test designs with add-ons like Maze and UserTesting.com

  • ✅ Test Figma prototypes with Hotjar’s Heatmaps, Recordings, Surveys, and Feedback tools via Anima (see below)

3. Sketch

#Designing the UI for a travel app in Sketch for Mac
Designing the UI for a travel app in Sketch for Mac

What it is: Sketch is premium all-in-one UI design software. The Hotjar team used Sketch to create and test an interactive design of our now-defunct mobile app.  

UI design stages:

  • Wireframing

  • Prototyping

  • Usability testing (with add-on services)

Use Sketch to: 

  • Create and edit designs using the downloadable macOS app

  • Collaborate by viewing and commenting on designs using the web app

  • Expand functionality using extensions, plugins, and the integration library

  • ✅ Test Sketch prototypes with Hotjar’s Heatmaps, Recordings, Surveys, and Feedback tools via Anima (see below)

4. Adobe XD

#Building an interactive prototype in Adobe XD
Building an interactive prototype in Adobe XD

What it is: Adobe XD is premium collaborative UI design software, downloadable for Windows or macOS. You can subscribe to Adobe XD as a standalone app or as part of Adobe’s Creative Cloud suite, which also includes Adobe Photoshop, Illustrator, and After Effects. 

UI design stages:

  • Wireframing

  • Prototyping

  • Usability testing (with add-on services)

Use Adobe XD to: 

  • Create simple wireframes with the Quick Mockup plugin

  • Download and use free UI kits and templates

  • Build advanced interactive prototypes with animations and voice-enabled features

  • Import designs from Photoshop, Illustrator, and Sketch

  • Create and sync reusable elements

  • Apply 3D transforms to view designs from different perspectives

  • ✅ Test Adobe XD prototypes with Hotjar’s Heatmaps, Recordings, Surveys, and Feedback tools via the Anima plugin (see below)

 5. Anima

#Anima works with the three major UI design tools: Figma, Sketch, and Adobe XD
Anima works with the three major UI design tools: Figma, Sketch, and Adobe XD

What it is: Anima is a freemium UI design-to-code tool that adds functionality to Figma, Sketch, and Adobe XD—it can’t be used as a stand-alone design tool.

UI design stages:

  • Wireframing

  • Prototyping

  • Usability testing (with add-on services)

Use Anima to: 

6. Axure RP

#Adding an interaction to a prototype in Axure RP
Adding an interaction to a prototype in Axure RP

What it is: Axure RP is a premium all-in-one UI design and prototyping tool. You can download Axure RP software for Windows and macOS.

UI design stages:

  • Wireframing

  • Prototyping

  • Usability testing (with add-on services)

Use Axure RP to: 

  • Collaborate using Axure Cloud

  • Build interactive prototypes without coding

  • Import designs from Figma, Sketch, and Adobe XD

  • Embed fully-functional prototypes into Jira and Confluence

  • ✅ Test Axure Cloud-hosted prototypes with Hotjar’s Heatmaps, Recordings, Surveys, and Feedback tools by adding our code

7. Framer

#Working with UI templates in Framer
Working with UI templates in Framer

What it is: Framer is a freemium no-code website builder and UI design tool with similar features to Webflow. You can use Framer as a web app or download the software for Windows and macOS.

UI design stages:

  • Wireframing

  • Prototyping

  • Usability testing (with add-on services)

Use Framer to: 

  • Start designing with website and app templates

  • Build clickable prototypes and share them via URL

  • Import Figma designs and convert them to HTML code

  • Collaborate on designs by leaving comments 

  • ✅ Test Framer-hosted prototypes with Hotjar’s Heatmaps, Recordings, Surveys, and Feedback tools by adding our code

8. InVision

#Designing a bank UI with InVision Studio
Designing a bank UI with InVision Studio

What it is: InVision is a freemium collaborative design platform. The Hotjar team used InVision to design and test our old mobile app before launching it. Studio, InVision’s main design tool, is downloadable software for Windows and macOS.

UI design stages:

  • Wireframing

  • Prototyping

  • Usability testing (with add-on services)

Use InVision to: 

  • Build wireframes, designs, and prototypes in InVision Studio

  • Design collaboratively using shared design libraries

  • Share and comment on designs via URL

  • Collaborate using Freehand, InVision’s digital whiteboard tool

  • Test prototypes with third-party UI testing tools like Useberry

9. Balsamiq

#Building a wireframe design in Balsamiq for desktop
Building a wireframe design in Balsamiq for desktop

What it is: Balsamiq is a rapid low-fidelity UI wireframing tool, available as a desktop app for Windows and macOS or online as part of Balsamiq Cloud.  

UI design stages:

  • Wireframing

  • Usability testing (with add-on services)

Use Balsamiq to: 

  • Design user interfaces for websites and apps (desktop and mobile) using drag-and-drop elements

  • Build low-fidelity wireframes with built-in and community-generated UI components and icons

  • Share, comment, and collaborate on wireframe designs in real-time

  • Link wireframes together to create simple prototypes for demos or usability testing

10. Marvel

#Designing a wireframe in Marvel
Designing a wireframe in Marvel

What it is: Marvel is a freemium all-in-one UI design platform. Marvel also runs a separate prototype testing platform called Ballpark

UI design stages:

  • Wireframing

  • Prototyping

  • Usability testing

Use Marvel to: 

  • Draw low-fidelity wireframes

  • Build interactive prototypes

  • Import designs from Sketch 

  • Create whiteboards

  • Create user tests and invite participants via URL

11. Justinmind

#Prototyping a task management dashboard in Justinmind
Prototyping a task management dashboard in Justinmind

What it is: Justinmind is freemium prototyping software for Windows and macOS. 

UI design stages:

  • Wireframing

  • Prototyping

  • Usability testing (with add-on services)

Use Justinmind to: 

  • Create wireframes for iOS, Android, and Web

  • Import designs from Figma, Sketch, Adobe XD, and Illustrator

  • Design interactive prototypes

  • Use preset interactive UI components and design templates

  • Create a public prototype URL for usability testing

  • Test Justinmind-hosted prototypes with Hotjar’s Heatmaps, Recordings, Surveys, and Feedback tools by adding our code

12. FluidUI

#Creating a wireframe in FluidUI
Creating a wireframe in FluidUI

What it is: FluidUI is a freemium web and mobile prototyping tool. Fluid UI can be used as a cloud-based browser app or downloaded as desktop software for Windows, macOS, and Linux.

UI design stages:

  • Wireframing

  • Prototyping

Use FluidUI to: 

  • Build wireframes and interactive prototypes using built-in components

  • Upload unlimited images

  • Collaborate on prototype design with comments and real-time video calls

  • View prototypes on FluidUI’s iOS and Android apps

13. Proto.io 

#Editing a smoothie app UI in Proto.io
Editing a smoothie app UI in Proto.io

What it is: Proto.io is a web-based premium UI prototyping tool. 

UI design stages:

  • Wireframing

  • Prototyping

  • Usability testing (with add-on services)

Use Proto.io to: 

  • Build low-fidelity wireframes

  • Create interactive prototypes using drag-and-drop component libraries and templates 

  • Import designs from Sketch, Figma, Adobe XD, and Photoshop

  • View designs in Proto.io’s iOS and Android apps

  • Share prototype URLs for feedback and usability testing

 14. Pencil

#Designing a website prototype in Pencil
Designing a website prototype in Pencil

What it is: Pencil (also known as The Pencil Project) is a free and open-source UI design tool. Pencil is downloadable desktop software for Windows, macOS, and Linux. 

UI design stages:

  • Wireframing

  • Prototyping

Use Pencil to: 

  • Draw low-fidelity wireframes using the built-in shapes collection 

  • Create simple prototypes from scratch or with the pre-installed Android and iOS UI stencils

The best UI design ‘tool’ is your users

The UI design tools you choose to work with are far less important to the success of your website, app, or business than the purpose of your designs: creating a low-effort experience for users.  

That’s why we recommend you start by using Hotjar to collect insights on how real people interact with your designs before you try to redesign them, and test out prototypes before pushing them live.

Good UI design starts with people, not pixels

Hotjar’s tools help you design your UI around user behavior

UI design tools FAQs