After a few years under development (as a response to Sketch quickly leaving Photoshop in the dust as the UI design tool of choice in the early 2010s’), Adobe XD was first released (out of BETA) in October 2017.
I’ve kept an eye on Adobe XD since it was released; in its earlier stages, I felt like it really couldn’t compete with Sketch, and felt it was kind of “too little, too late” from Adobe. However, since then, XD has shipped a bunch of new features that have helped bring it into the “top 3” UI design apps, alongside Figma and Sketch to be a real competitor.
At this stage, I think the gap has narrowed, and might still make sense if you’re trapped in the Adobe Creative Cloud. As we’ll see later in the article, there are places where XD has an advantage over Sketch or Figma.
How designers work with developers in Figma vs Adobe XD
Adobe XD has a feature that lets you “publish design specs” and share a link that you can give to developers. This URL essentially loads up the designs in a web browser, and shows you a summary of all the colours and fonts used in the design, as well as letting you click on individual elements and seeing some of the sizing values associated with them.
In this scenario, I think Figma is still ahead. In Figma, you’ll be able to invite developers directly into the Figma file, so they can view it in real-time and jump straight into the “code” panel, where they can view any element’s properties broken down into “CSS”, “iOS” and “Android” options.
These are awesome, as you can literally copy/paste real code directly from Figma into your codebase, without having to translate all the random properties into their respective styles (depending on your codebase).
This is such a crucial feature that Figma offers, as it means you really don’t need to leave the one app and use other 3rd party services.
If you are using XD, then 3rd party “handoff” services like Zeplin, Avocode or Sympli are likely going to be required, as I don’t think the Adobe XD feature is quite streamlined or detailed enough for a developer’s normal workflow.
However, this does come with a downside, as you’ll need to continue making sure the designs are in sync with those 3rd party services, so you add the risk of a developer working off old designs. Again, with Figma, this is not an issue, and the developers are always going to be on the same page (literally) as the designers.
Performance of Figma vs Adobe XD
While Figma can be run in either the desktop or in the browser, Adobe still requires you to have Adobe Creative Cloud installed and also a Adobe XD desktop app in order to use the software. This might not be an issue if you’re already using the Creative Cloud suite, but it does feel less “portable” than Figma, which can be spun up on any computer in the web browser (with no other dependencies).
In terms of actual performance, Figma uses WebGL under the hood and can handle very large design files without seeing much slowdown at all; it’s notably extremely smooth.
Adobe XD generally performs fairly well, but there are lots of reports from people online who are experiencing slowdowns with larger files or working from the “cloud” (instead of local files).
I still believe being built on web technologies is a very underrated aspect of Figma, and I would speculate that they will be in a much better spot in the future when rolling out bigger product updates.
Figma plugins vs Adobe XD plugins
There was a time when Adobe XD users might have shunned Figma for not having plugins, but that ended in August 2019, when Figma opened its own plugin directory. Just like Figma (but unlike Sketch), Adobe XD has a plugin directly built into their app, which is great.
At the time of writing Adobe has 256 plugins in its directory available to install. Despite being around for longer than Figma’s plugins, Figma has more than triple that amount currently live in its native plugin directory.
There is some cross-over between the plugins that Figma has and the plugins that Adobe XD has; but it does seem that Figma has the upper hand on plugins, if not for sheer amount of choice and variety.
Collaborating with the rest of your team in Figma vs Adobe XD
While Figma has had collaboration (or “multiplayer mode”) since its inception, which was a core difference to any other design tool at the time, Adobe XD did not launch with real-time collaboration.
It was until November 2019, when Adobe XD introduced a BETA with support for the same feature that Figma had become so loved for. This has helped bridge the fundamental divide between Adobe XD and Figma.
This is now an advantage that Figma and Adobe XD both have over Sketch, which announced real-time collaboration about a year ago, but hasn’t started shipping it yet. In this respect, Adobe XD and Figma are relatively similar (and ahead of Sketch) as of 2020.
Learning Figma if you’re coming from Adobe XD
If you’ve been an Adobe XD user, but you’re thinking of making the switch to Figma, the good news is that the learning curve will be very low.
Figma has all of the features you’ve come to expect in Adobe XD, with a bunch more that will serve as nice little surprises as you explore the feature set over time.
Unfortunately, Figma doesn’t support importing your Adobe XD files (as it does with the native Sketch file importer, which works well), so you’ll likely need to move any legacy designs over manually or use a third party service to help with this.
Some advantages that using Adobe XD might have over using Figma
Adobe XD plays nice with other Adobe software
If you or your company are already signed up to Adobe Create Cloud and use their suite of other products, then Adobe XD might make sense to adopt as your primary UI design tool, especially if you need some level of interplay with Photoshop, Illustrator or After Effects.
Figma (and Sketch) have not taken to supporting the Adobe ecosystem, opening their files or exporting files out to those formats so far. This may change in the future (it seems unlikely), but for now, if you do need to work with those other Adobe products, then XD might be a good choice for now.
Adobe XD supports prototyping voice interactions
The one area I have to give Adobe credit for is their initiative to focus on an area of design that seems fairly neglected industry-wide, so I would say that it’s fairly underrated at this stage.
With Adobe XD, you can use your voice as a “trigger” to initiate an interaction in your design prototype.
While this is a nice bonus that you get in Adobe XD, I can’t imagine that it would be a huge undertaking for Figma to expand its own prototyping feature set and include “voice” at some stage in the future; once again reducing the distance between Adobe XD and Figma’s differences.
Figma is the future; but if you can’t escape the the Adobe ecosytem, XD might still be your best bet
While I believe Figma is still the best overall UI design tool, Adobe XD is a decent alternative if you can’t leave the Adobe Creative Cloud in your own company. They are comparable enough that you’re not going to be suffering as you might if you were still forced to used Photoshop for some reason.
It’s my hope that Figma and Adobe XD could continue to innovate in parallel, and cross-pollinate the best of each other; for example, Adobe XD adding “multiplayer”, in the same way that Figma could add “voice” into their prototyping features. Having the two exist is a net positive, so I don’t think we need to say one is “bad” and another is “good”; they can both co-exist just fine.
Pro Bundle