Figma vs. Xd

In my prototyping work for RocketReach, I’ve recently had to switch back and forth between using Adobe’s Xd or Figma. For the uninitiated, Figma is a prototyping SaaS whose selling points include good developer info lookups (something Adobe Xd would add later), a really robust file/screen organization system, and multi-user collaboration on the same prototypes. Both apps are good, but both lack pretty glaring features. I’m going to go over a little bit about each app, with pros and cons.

Adobe Xd

When Adobe Xd came out in beta in 2015 (then known as Project Comet), it immediately grabbed my attention. Here was the biggest juggernaut in the design business recognizing UI/UX design as a need and building something to fill that void. It was fast, intuitive, shared almost all of Illustrator’s hotkeys, and best of all, supported copy-paste right from other Adobe products. It came out without animation (a rudimentary animation engine would be added later) and complex interactions, but I was willing to forego that for something that worked so effortlessly with the rest of the Adobe Creative Suite.

Since then, Adobe Xd has been improved upon. It’s left beta, and gained a whole suite of features (among them developer handoff aids, animation tools, and Adobe’s context-aware toolbar.

Figma

I was first made aware of Figma through RocketReach, whose previous designer had used it. Based on my test drive and browsing of the marketing materials, it had a pretty similar value prop to Xd. It was fast, intuitive to use, and had browser and thick client versions. It had great developer handoff tools, and great handling of styles. Other than that, it’s pretty similar.

Pros and Cons

As the de-facto king of creativity software, Adobe has created something that is truly easy to use. Everything behaves as you expect it to (if you spent a bunch of time in Adobe products before), and affordances like the context-aware toolbar are a godsend. It also handles things from Adobe Illustrator perfectly, keeping your groups and vectors organized upon paste.

Where Adobe Xd falters a little is its ability to organize prototypes and screens for developer viewing. Sure, it has the developer/code handoff tools that Figma started with, but the file system leaves a lot to be desired. The links intended to be consumed by developers are one-offs, and then have to be managed separately in a clunky piece of browser software. The files can be organized in Adobe’s Creative Cloud, but I would argue that’s better for larger-scale image-based collaboration (again, Adobe’s forte) and not page-based software building.

Figma’s file explorer experience is pretty ideal. Developers and designers all have access to the same file system, and developers simply need to shift to a different tab to comment or retrieve code callouts. Each document has sub-sheets (think Excel) as well as artboards (called frames in Figma). It’s incredibly easy for developers to give feedback, browse the screens, and then get code callouts when necessary.

Figma’s actual design interface, both in browser and thick client, leave something to be desired. In multiple cases, .svg’s I imported from Adobe Illustrator came into Figma mangled. The frame system isn’t perfect and adds a group to everything by default on import. The layer styles and effects feel limited in comparison, and you can’t paste from Adobe Illustrator directly. Although funnily enough, you can paste from Illustrator to Xd and from Xd to Figma. Go figure.

Conclusion

Adobe Xd offers the better experience for designers, especially those who’ve worked with Adobe products in the past. Figma offers a better experience for developers and people browsing your work. Both have things they can learn from each other.