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

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

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.

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

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

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

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

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: 

• Transform static designs into interactive high-fidelity prototypes

• Convert designs into complete HTML code packages

• Collaborate in real time with comments

• ✅ Collect Hotjar insights directly from Anima prototypes by adding our code

6. 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

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

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

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

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

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

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 

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

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.