As the field of tech expands, new UI/UX design tools emerge to make creating tech products easier. These tools are used to ideate, sketch, mindmap, design, prototype, and so on. In design, these tools result in an overall easier method of creating products from ideation to user testing and finally launch. While some UI/UX design tools are multi-systemic (they cover multiple stages of design), others are specialised and work well for particular stages of design. Here, I’ll give a brief review of different UI/UX design tools, their pros and cons, and what they work best for.
1. Your Mind/Brain
Works for: Design Thinking and Implementation
I was going to start with ‘pen and paper’, but it hit me that your mind is really where any and every design starts from. We translate our thoughts and ideas to problem-solving products throughout the design thinking process (which runs through every stage of design, even after launch).
Pros:
- Ideas can come at any time, but placing your mind to be aware that there are problems that need solutions opens it up to noticing more things and generating more ideas.
- You can develop it through learning
Cons:
- It has to be consistently and intentionally engaged in the right things, else ideas might not come
2. Pen and Paper
Ideation, Brainstorming, Sketching, Scenarios, Storyboards, Wireframing, Paper prototyping
If anyone asks me what my favourite part of designing is, it is sketching. I have a notepad where I sketch all my ideas before creating them on UI/UX design tools like Figma or Adobe Xd. I also write things down immediately I think of them (okay, ‘immediately’ might be an exaggeration). This helps me to make visual sense of what was only a fleeting thought in my head.
A great thing about pen and paper is that they allow you to rapidly sketch, create a user journey map, and even prototype your design without the restrictions observed in screen and keyboard/mouse tools. It is very straight forward. The fact that mistakes are not easily cleared off gives you the opportunity to take a second look at your design and have some deeper thoughts and considerations.
Pros:
- You get to pen your ideas down in a stream-of-consciousness format
- Pen and paper faster than all the on-screen alternatives
- It’s the first visual representation of your idea
Cons:
- It could turn out to be very rough, so collaboration might be hard when it is time to turn a sketch into a design
- Papers with ideas can be lost
3. Adobe XD
Works for: high-fidelity wireframing, Interface design, mock-up creation, Information architecture, vector design, logo creation, prototyping.
I’ll confess that this is my favourite prototyping tool at the moment. From a personal standpoint, I find it easy to understand and quite intuitive. My favourite thing about prototyping with Adobe XD is the component feature. This is a design feature that appears in most design software. Adobe XD, however, presents it in a unique way. Let’s assume we have a button component with three states; default, hover, and click.
XD’s prototype mode automatically recognises the hover state. This intuitive feature saves you the rigours of configuring it manually. For me, it is a huge sell. Adobe XD is great for rapid prototyping, as well as high-fidelity interactions. Asides from prototyping, XD is the go-to design app for many. Its interface is quite easy to master, this is no surprise because it is an Adobe product. With the plugins available, you can also access wireframes and mockup templates.
Pros
- Intuitive prototyping with components
- You can do some rapid prototyping by linking artboards through wires, send out links for testing, and make corrections right in the same software. This makes XD a great prototyping tool for beginners.
- High-fidelity prototyping
- The auto-animate feature provides creative transition effects
- It is integrated with other Adobe software, which makes it easier to work back and forth
- With the XD mobile app, you can view and test your prototypes. This is super handy, pun intended.
- It is available on all operating systems
Cons
- While you can switch between design and prototype in Adobe XD, it ONLY supports XD files. So, you can’t import a design from any other software to prototype in XD
- Its in-built recording feature only works for Mac. I, a Windows user, feel left out…’ Lol. Although the Win+G command works fine, an in-built recorder would save the day.
- You only have one dashboard to work with, which can mess up with your train of thought if you are doing something big. If you are like me, you are bound to get cross-eyed with confusion. Alternative software like Figma allows you to create multiple pages so that you can divide up your designs.
- No Autolayout (shout out to Figma)
4. Figma
Works for: everything and anything, wireframing, user flow, user journey map, interface design, vector design, logo creation, and prototyping. Collaboration with designers, developers, reviewers, and testers. A community of designers. Endless resources
Figma is beautiful. It is an interface and prototyping software with interactive editing, live device preview, and team collaboration. It is a multi-system interaction design tool. This means that you can use it to work at different stages of design like wireframing, design, prototyping, and user testing. It’s my main design and prototyping tool at the moment, so I can give some real user reviews on it.
Two things that make Figma stand out is that it is highly collaborative and is web-based. So, for testing out your prototypes, it is super helpful. Someone could be journeying through your prototype and give feedback which you get live. Teammates can also work on a design together and chat about elements.
Pros
- It goes without saying that the comments feature on the prototype view make Figma one of the best tools for getting real-time, near accurate user feedback. Comments are also available in the design dashboard and is a great tool during collaboration.
- You can view your frame prototypes in an in-built mock-up system
- It is an all-in-one design tool, so you can go from design to prototype and vice versa
- Its ruler and layout grid feature is the best I’ve come across (that’s not really saying much, tbh, because I haven’t used many tools )
- The auto-layout feature makes creating multiple, well-spaced elements easy. This way, your prototype can be fuller in cases of scrolling
- Figma allows you to scroll elements vertically or horizontally (you don’t need duplicated pages to achieve this).
- As a web tool, it works on all operating systems
Cons
- Prototyping components is not intuitive and can be quite a complex process (compared to software like Adobe XD).
- Don’t know if it’s just me, but I would like Figma to support video files or at least GIFs.
- The Figma app does not do anything tangible except show you your design on your phone. However, you also have to be viewing it on your computer too. This is quite confusing and defeats the purpose of a ‘Figma app’. I guess that is why it is called Figma Mirror.
5. Justinmind
Wireframing, High-fidelity Prototyping, Micro interaction, Collaboration
This is primarily a prototyping tool, although it can be used for wireframing and interface design. Unlike the multi-design-stage software like Adobe XD, and Sketch, Justinmind is built mainly for prototyping and wireframing. Because of its primary functions, you can import files from other design software and prototype them in the app. It is a high-fidelity prototyping tool, and you can preview, test, and validate every design decision along the way.
Pros
- It supports many interactions, gestures, transitions, and effects functions.
- It allows designers to test their prototypes on the Justinmind mobile app. Another handy feature… and another pun from me.
- It also allows prototypes to be exported to functional HTML
- Importing projects from other UI/UX design tools like XD and Sketch is a great feature, so is importing assets from Adobe Illustrator and Photoshop
- Justinmind creates room for making a design system that can be used in other projects. Pretty cool
- Forms can be created with form validation. This would work well for a login/signup screen
- Like Figma, this software allows users to test designs. It goes a step further, however with its chat function
- Another fantastic feature is that it allows you to group collaborators. That helps you sort things out pretty fast.
- The heatmap feature makes user testing super convenient. So you can verify assumption and get a user-based view of your design concept
- It is highly collaborative because of the team prototyping feature
Cons
- Many of these amazing features come at a monthly cost, which is not bad. However, there are other free alternatives that do similar things. A lifetime subscription plan is also a great alternative
- New users will need some days of tutorial, trials, and errors, to get a hang of it
- Sometimes, alignment poses to be an issue
- It is quite buggy
6. Sketch
Works for: high-fidelity wireframing, Interface design, mock-up creation, Information architecture, vector design, logo creation, prototyping.
Many designers are familiar with Sketch, as it is one of the most popular design and prototyping tool. It has an incredibly large plugins support that many users swear by. Its interface is similar to Adobe XD and Figma and is said to be easy to understand. However, is limited to Mac users. Sketch projects are importable to other software like InVision and Justinmind.
Pros
- It has a wide range of helpful plugins and integrations such as InVision
- Similar to the above, you can export sketch files to software like Justinmind for prototyping
- Its multi-screen feature makes sorting your designs for prototyping easy
- It is great for high-fidelity web and mobile mockups and interactions
- The wires or links, similar to XD and Figma make prototyping fast
- You can add hotspots to spaces around an element that allows users to click an area larger than it. This is very intuitive because realistically, a person’s finger might tap the areas very close to tiny elements. In other software, you have to create those hotspots yourself.
Cons
- As an affected Windows user, you can bet I think that Sketch being available for only Mac is a con.
- It just launched a collaboration function late last year. Although it is still in the beta phase, we look forward to see how it turns out
This list of UI/UX design tools is only a tip of the iceberg. UI/UX design is a wonderful field in tech. I dare say it is on of the powerpoint in tech, as designers are the ones who think up and create tech solutions to problems. Do you think so too? It you want to get started in tech, you can join any of these wonderful guiding communities:
To know more about UX Design, Google and Youtube tutorials away to find endless resources! You can also reach out to me. I’ll be happy to share more tips with you.