How to choose the right UX design tools

By Giles Airey

17 October 2018 Experience design

‎

Recent years have seen the emergence of countless new UX design tools – from Sketch and Adobe XD, to Framer and Figma. But do these tools really simplify the design process and how do you know which one is right for your team? We ask Inviqa’s associate creative director, Giles Airey.

A crowded UX design tools market

The last five years has seen rapid prototyping emerge as a key lynchpin of not only web design, but product design too. The speed of the tech evolution, from operating software features to app-based functionality, is encouraging us to explore how we can further integrate ourselves with the world around us.

Designing and creating digital solutions has never been so open and, with that, it requires a multitude of ways to plan what to create and how to start. Design sprints, service blueprinting, and experience mapping are just some of the examples we can use to draw information about customers and demographics.

Maybe it’s symptomatic of a world that exists in the here and now, but the days of cleanly-mounted, printed visuals are now bound to underwhelm. Clients want to touch, experience, and see in situe how their products will work and make them feel.

And of course they want it all tomorrow (or yesterday!) and, as designers, we need to stay on top of this, not just to show the product off in its best light, but also to show that we, the service provider, are not getting left behind.

Fortunately the market is now saturated with a myriad of software solutions to create and prototype accurate versions of products in their early stages to bridge successfully the gap between client and designer, and also between designer and developer.

The problem is finding which one works for best for you.

How to pick your UX design tools

Digital teams can now choose from a wide range of sophisticated, cloud-based tools designed to simplify elements of the design workflow and to democratise the design process, making it more accessible to designers and non-designers alike.

But these tools do come at a cost. For starters, how are you supposed to know which one(s) to pick? If your teams are using more than one of these tools, are they compatible?

How easy is it to work across these tools at the same time? And where a tool deals with a specific part of the design workflow, how easy is it to move between different environments – for example, from visual design to prototyping? There’s also the question of how much upskilling and onboarding time is required of your team to get started.

As a 41-year-old designer with more than 20 years’ experience in graphic design, marketing, branding, advertising, and UX I’m happy to admit that the pace with which these applications come to market is overwhelming and often makes early-stage decisions harder than they should be. But, as with anything, time and effort has given me insight.

To help explore some of the above questions, here’s a high-level view of some of the most popular tools and the types of working to which they’re best suited.

Note that the below is not an in-depth comparison of tech specs; this is just some observations based on my experiences of working with these tools with clients here at Inviqa.

It’s also important to note that there are different ways to work on a design projects and there’s no ‘silver bullet’ tool that will solve every pain point in the design workflow.

Some popular UX design tools

1. Framer

Possibly the most advanced prototyping tool on the market at the apex of where design meets development. It offers the most real-world example of how a product can act, feel, move, and transition. In the hands of an experienced Framer designer it can take prototyping to another level and provide agencies with virtually replica outputs for user testing.

It's ideal for specialist UI designers who want to take their work to another level. It is a great tool for enabling teams to create prototypes that doesn’t have to involve teams of developers.

Framer pros

Requires basic JavaScript input so it translates very well into development, enabling greater early-stage collaboration.
Supports complex prototypes like AR and VR experiences.
It can be the difference between winning and losing a pitch, such is the impressive interface it can provide.
Superb for creating important, subtle transitions that can embed elegant and delightful UI and UX early on in a project’s requirements and ensure that it doesn’t get missed.
Great community meetups to advance and support the application.

Framer cons

Requires a fair amount of upskilling to use it to a level where it really makes a difference to what other applications can offer.

2. Adobe XD

I was a big fan of this when it came out. Maybe it was the level of comfort and bias I felt after using Adobe CS for many years. Maybe it was because it was the first prototyping tool I really explored. Cut after a project or two, its limitations became steadily exposed.

It's ideal for rapid ideation and prototyping for designers at all levels. Particularly useful for senior design leads, UX strategists, and creative directors who need to get their ideas across to their team and the client quickly, but without having to create in-depth symbol libraries and style sheets.

Adobe XD pros

Intuitively dovetails with the other Adobe CS interfaces (having the ‘Adobe’ name behind it does give you confidence).
Available with your CS package.
Good support as you would expect from Adobe and lots of info can be found in many forums.
Superb integration between design and animation; nice and clear and keeps the two things orderly and separate.
Does it all: provides links to designs and recordings of demos without the need for third-party plugins and applications, which makes it a great tool for more experienced, senior designers looking to deliver their ‘vision’ to the team quickly.
Can accurately create, preview, and play with your design entirely offline which makes it invaluable to for those long train journeys.
Reliable mobile-mirroring functionality.

Adobe XD cons

It’s limited and struggling to keep up with demand for even some of the most basic features.
Not yet advanced enough for higher-end prototyping.

3. Sketch

This is the industry-standard package and has been at the forefront of revolutionising not just web but also product design. It’s easy to use and allows a senior design lead to map out top-level ideas quickly and effectively. But, as an application with enormous depth and multiple layers of categorising, Sketch in the hands of an experienced UI designer has the capability to run entire projects involving multiple plug-ins and sister applications.

It's ideal for UI designers who are going to ‘own’ a project. By that I mean setting up the initial design systems and having a good knowledge of and intent to use Abstract to collaborate with other designers, Zeplin to work with developers, and InVision to collaborate with everyone, including clients. Ideal for those with time to spend to working with developers and getting everything right so the project can progress at an efficient and accurate velocity.

Sketch pros

Is largely considered the industry standard and is the tool most designers are using – therefore ubiquitous amongst agencies.
Has multiple plugins such as Craft or Anima that continue to evolve and enhance efficiency and the quality of the design work.
Although time-consuming, the structure of the application, when adhered to correctly, allows the designer to create a rigorous archive of symbols and design rules that can help development.
There’s a great deal of resources, libraries, and templates available for free to download that can kick-start any project and do some of the initial heavy-lifting.
Dovetailing with InVision provides a team and clients with presentable links that place the designs in context, such as a mobile frame.
Abstract is a great collaboration platform that works with Sketch and provides multiple users with the opportunity to work on the same project, creating archives, branches, commits, and merges as they go. Think GitHub for designers.
It has reliable phone-mirroring functionality.
It dovetails well with Zeplin bridging ‘that’ gap between design and development by providing HTML.

Sketch cons

It is best to set up files robustly from the start as that can aid efficiency in design from an early stage. This can be very time-consuming and require a fair bit of knowledge to get it right.
If Sketch is to be used for the entirety of a project then getting some symbols and styles documented incorrectly from the start can lead to larger problems later on.
As a design lead it can often be more problematic to start a project in Sketch and pass on files to the team as there is every chance that rework will be required to get the designs up to speed. And that way, in my experience, confusion can creep in as legacy design can often crop up.
It requires so many third-party plugins and sister programs such as InVision which can be quite confusing when starting out.

4. Figma

I have only really used this from a UX consultant aspect but have found it to be a great collaborative tool that allowed me to ‘walk’ right into a client’s project online and see everyone working away on different artboards. I felt a little intrusive but once I got my bearings I could comment and feedback clearly – either independently or by joining conversation threads to help guide any designs.

It's ideal for teams and varied roles working in multiple locations. The visuals of all the different accounts beavering away in all the different areas of the artboards, and the seamless integration of the comments feature, makes for an almost virtual studio without the need for a third-party plugin the way that Sketch relies on InVision.

Figma pros

Allows designers to move seamlessly from visual design to prototypes.
Web-based approach: browser-based, shared files / design studio in the cloud.
Mobile pairing / mirroring
Ability to comment live on designs.
Non-designers have access / can have different levels of access across the team.
It has very good responsive features that can enable quick broad-stroke designing for multiple screen sizes
Offline accessibility (more on this here)

Figma cons

I simply could not get the mirroring to work on my phone. I’m unsure whether this was a file-size issue, but it hindered me time and time again.
I struggled with enacting the preview function to get an idea of how the flow was coming together from a device-specific aspect in my browser.
I get the impression that this is a great idea-generator but may not be as ‘dev-ready’ for handover as some of its rivals.

Improve collaboration beyond your UX design tools

Tools like Figma and Framer exist to make life easier when it comes to creating digital products and collaborating with the entire product team. But they’re only as effective as the structures, approaches, and mindset of the people using them.

When considering a new tool, teams need to be having a wider conversation about how their design processes work and where they can made more inclusive. Why? Because bringing more people into the creative process is in everyone’s interest.

Making it easier for a more diverse pool of non-designers and business stakeholders to access, manipulate, and monitor progress on designs and prototypes means better collaboration and better outcomes.

Teams should also consider other ways in which the design process can be simplified, because, more often than not (especially where multiple companies or agencies are working together on a project), product designers and software engineers are using multiple tools and workflows which can result in longer processes, lost communication, and more manual work – things that can all jeopardise the quality of output.

That’s why it’s well worth considering tools that help to close these gaps and promote collaboration through compatible, cloud-based spaces, and ultimately those that will help produce better digital products.

We're helping a diverse range of organisations to deliver game-changing digital experiences. Speak to us about your UI / UX design requirements today