What is a prototyping tool anyway?
The best fit for the digital team
The contestants
There are a mix of Windows and Mac users on the team so we wanted to use a platform-agnostic tool. This took Sketch out of the running, leaving us with a head-to-head contest between Figma and Adobe XD.
Both tools have their pros and cons but when all is said and done, they are very similar to one another. Both have a similar interface and workflow, and broadly share the same features. Probably the most important difference is that Figma is available in a web browser whereas Adobe XD is only available as a desktop app. This means Adobe XD starts off with a larger barrier to entry.
The test
There are several roles on the digital development team including designers, front and back-end developers, not to mention stakeholders outside of the team. Each have their priorities when it comes to tools like these. However, after a team discussion, we decided that the most important requirements for our prototyping tool are:
-
Create flexible, high-fidelity prototypes that are nearly identical to a finished web page in terms of look and behaviour
-
Component structure should be fundamentally similar to how they are structured on our live site
-
Must be able to deliver interactive prototypes that behave 'like the real thing'
-
Stakeholders outside of the development team must be able to access prototypes without friction. This means no need to sign up for accounts
-
Designs must be accompanied by useful specifications. Ideally these should include exportable assets and CSS to make the developer hand-off process as easy as possible
With these requirements in mind, we set ourselves a task that would emulate a typical story that we would work on as a team. The task involved reconstructing one of our web pages in both Figma and Adobe XD and then adding a mock new feature to it. The feature is question? A button that appears when a user scrolls down the page and, when used, takes the user back to the top of the page.
Once built, we give the interactive prototypes and specs to our front-end developers. They were tasked with correctly identifying the design intent from the prototypes and then extracting the specs (size, padding values, typography, and colour value) of the new button.
While it was tempting to carry out this evaluation as quickly as possible, we decided to do things properly, in order to get a feel for the real workflow for each tool.
This meant building out the foundations like layout grids, style libraries, and component libraries. Or at least enough of them to give us a good idea of what that process was like. We could have skipped this step, but, constructing and maintaining a style library or a design system is an important part of using tools like these.
And the winner is...
When it comes to the key requirements that we set out, both tools performed well and got the job done. Both our front-end developers were able to get the gist of what the button did using the interactive prototypes and were able to export the button's icon asset and get its specs. They were able to do this more quickly using Figma but in fairness, they both had previous experience with it.
But we can't sit on the fence forever. And, while both tools are up to the task we must pick a winner... and that winner is Figma.
Figma has several advantages over Adobe XD that make it a better fit for the digital development team here at the University of Bath. You access it from a web browser so it's completely device-agnostic. It has a few more features including more animation triggers which means prototypes are more likely to behave like a finished product. Its collaboration tools are much more robust than XD's making it easier for more of us to work on a file at the same time. It's also more widely used and therefore more widely supported. But more than all that, it was able to do virtually everything XD can do and then some*.
I say all this as a long time user of Adobe XD and I must admit I was secretly rooting for it to come out on top. But I have to admit that Figma is the better tool for most scenarios. While it's important that the tool meets the needs of the entire team, as well as other stakeholders, it's the user experience designer who will use it on a daily basis and Figma surprised me with how easy it was to pick up and how I kept on finding little bits of functionality that Adobe XD lacks.
So after all that, it turns out we made the right choice all along. But sometimes you need to go through an exercise like this to make sure you're not just sticking with what you know. Ask yourself if your tool really is the best one for the job.
* In the interest of fairness, I should point out that at the time of writing, a lot of Figma's more robust features (including style and component libraries) are locked behind its professional tier. However, they offer this tier free of charge if you're a student or an educator.
Respond
