Adobe XD vs Figma: The Final Boss Battle

Which UXUI tool will be the champion?

September 15, 2020
Sarah Corner
Designer & Animator

When Adobe XD released their shared file system, we hopped on board immediately with our project, a  UI/UX overhaul of Clutch. Being able to share a file with team members and work on the same artboard at the same time was *chef’s kiss* a dream. Sure, we knew Figma already had that up their sleeve, but XD was initially our preferred program.

Fast forward to several months later. The project started small and grew in extravagance within months and, in doing so, outgrew Adobe XD’s capabilities. The canvas wasn’t infinite like our old days in Sketch. While it had advanced features like States, which reduced the number of master components on a file, it was difficult to organize the clutter. Unlike Adobe XD, Sketch had the option to create separate pages, and boy howdy did we miss that.

But then, we entered the world of Figma. With Figma’s San Francisco conference coming up and with two flights booked and California-bound, Liam dove head-first into Figma’s features that we realized were a perfect blend between Sketch and Adobe XD—but, dare we say it, even better.

Figma’s initial selling point boasted a cost-efficient, all-in-one platform on an entirely online system — one which featured collaboration at its finest. Not only that, but it offers a slick free license that allowed us to get our bearings without the fear of dumping money into yet another subscription pack to add on to Sketch, Zeplin, InVision, Adobe, Abstract… The numbers add up

With Figma being a free, online platform, this means that clients can easily jump into the program without installation and just view the content from a webpage. Not only that, but it offers a comment feature not unlike Adobe Acrobat, but make it cooler and maybe with sparkles and sunglasses and fireworks because you don’t have to download PDFs to see the comments only for your computer to auto-open it in Preview. And while Adobe XD has a comment feature, it’s reserved for shared links, which takes the user from the program and into their web browser — and only then you can only share prototyped artboards. With Figma, you never have to leave the program to acquire comments, and it all exists within the same canvas.

Now, this isn’t to say we’ve fully migrated to Figma. It’s helpful to have a host of platforms in order to cater to what a client’s comfortable with. It’s especially important when working with developers that are most comfortable with certain platforms. Figma features much of what Invision, Zeplin, and Adobe XD offer in terms of features for developers. Figma exports in CSS, XML, and Swift while also providing assets and the option to compress said assets. 

We’ll reiterate it again: Figma really is an all-in-one platform. If we haven’t sold you on these points yet, let us tease the perfectionist in you with an enticing new offer:

Projects. But not just any project: projects with structure. We’re talking project libraries, baby, and that includes a whole host of files sharing a design system with all your favorite components in one (or more) places. Not only that, but each file functions like a Sketch file with page structures that you can tab between. This made it easy for us to organize the variety of flows from Adobe XD and branch them out into pages all while pulling from a global design system. 

Global Design system

Another surprising detail we discovered in Figma was their auto layout feature, which groups items together and distributes them evenly regardless of copy edits, image changes, and asset additions. This, along with their organizational features, are the main aspects of Figma that differentiate it from its competitors. With Figma, we’re one step closer to dismantling the pixel-pushing empire, which saves time and an awful lot of arrow-key mashing.

There’s a lot we could say about Figma, but one thing’s certain: The field of interface programs is constantly changing, growing, and competitive. We’re glad to have discovered Figma’s place in the field and incorporated it into our own workflow. Stay tuned for more program reviews by signing up for our newsletter!

Here is a bonus battle! See how Adobe XD stands up in a duel with Sketch — See Toptal's article Adobe XD vs Sketch – Showdown 2020