Verve Search logo

Figma vs Adobe XD: which tool should you design with?

With remote working presenting new challenges to our creative process and our production team wanting to experiment with new design features, we’ve recently switched to a new design tool. But which option would work best for you?

In 2016, Figma introduced an innovative browser-based interface design tool. The same year, Adobe Inc. released its own version of a UX design tool: Adobe XD.

Alongside other popular editing software options such as Sketch, both Adobe XD and Figma have evolved into competitive design platforms, and our production team decided to investigate the pros and cons of each. Here’s what we found:

Platform and performance

The most obvious difference between the two platforms is that Figma is browser-based, whereas Adobe XD is a downloadable desktop application.

Adobe XD allows users to work with local files offline. It also allows users to share and get feedback on their design, thanks to its cloud capabilities. In its recent update, Adobe took a step further and XD now integrates with apps and services across the Creative Cloud suite. This means that sharing assets between apps and users with Creative Cloud Libraries is now easier.

Some might assume that Figma’s browser-based approach to designing is limited to internet connectivity. However, Figma allows its users to work offline on a pre-opened file via a desktop app (available for both Mac and Windows).

When comparing the two, it all comes down to individual preference and work style. However, working on a browser-based platform like Figma definitely has some advantages when it comes to collaborative work and live updates.

Pricing

Both Figma and Adobe XD offer free and subscription-based pricing options. XD’s single-app plan for professionals and small teams costs £9.98 per month (without a trial) and is free for personal use. Figma’s pricing options break down as follows: free for personal use; $12 per editor/month on the Professional Plan; and $45 per editor/month on the Organization Plan (annual billing only).

It’s worth mentioning that Figma’s free version allows unlimited editors on 1 project and 3 team files, as well as a 30-day version history, unlimited cloud storage, and unlimited viewers. Adobe’s free starter plan only allows for collaboration on one shared document and one additional editor, limited cloud storage (2GB), and a 10-day version history.

Here a more detailed view on the price differences between the two:

Click to expand table

Features and functionality

Figma and Adobe XD are becoming more similar in terms of features and functionality. Each platform seems to adopt something new with every update. For example, Adobe XD has been working hard to achieve something similar to Figma’s game-changing collaboration features. On the other hand, Figma only recently introduced its Smart Animate feature, which is very similar to the Auto Animate feature that Adobe XD introduced some time ago and changed the prototyping experience completely. However, there are still some visible differences in workflow. Let’s discover them below:

Figma Pros:
Free unlimited viewers without registration
Free collaboration with live-work updates from team-mates
Unlimited cloud storage
Browser-based (no installation required)
Observation mode makes it easy to follow team-mates
Overlays capability
Export assets (PNG, JPEG, SVG, PDF)
Gradient Smart Animate transition
Border gradient feature
Dynamic overlays allow multiple layers of an interactive content
Deep selection tool makes the workflow more efficient
Sketch import
Pages in file capability
Custom frames
Multiple shadows capability
View prototypes on device placeholders

Figma Cons:
Safari version bugs (e.g. cursor doesn't update)
It takes time to create a set of repeated elements
It is time-consuming to design scrollable UI elements (e.g. image carousel, interactive maps)
Projects need to be opened in a browser or Figma app online before working on them offline
Interactive components not yet available
Interactive components not yet available

Adobe XD Pros:
3D Transform (shapes, text, groups)
Repeat Grid makes it faster to create a set of repeated objects
Scroll Groups makes it easier to design scrollable design elements
Voice prototyping (e.g. voice commands, build-in speech playback, sound with the voice-enabled feature)
Component states (e.g. hover state, selected state)
2 video exports (Unlimited until June 2021)
Adobe Fonts Access (Basic Library)
Export assets (PNG, JPEG, SVG)
Import from Photoshop, Illustrator, and Sketch
Record videos for prototyping and interaction previews.
Custom passwords to Share Links and Design Specs for enhanced security.
Share individual boards
Collaborative plug-ins (Workfront, Asana, Monday.com)
Toggle state shortcut

Adobe XD Cons:
10-day version history (free plan)
Registration required to view documents
Limited cloud storage
Co-editing feature fee for corporate use (£9.98 /per month)
Cannot Auto Animate gradient transition
No border gradient feature
Not as intuitive when selecting multiple elements
2 PDF exports (Unlimited until June 2021)
Pages in file capability (upcoming feature)
Collaboration on a separate file
Click to expand table

What are we using at Verve Search?

At Verve Search, we’ve chosen Figma over other prototyping design options.

Here are the five reasons we decided to go with Figma:

1. Figma is free

Team accounts are paid but individual accounts are free and include all the same key features as the paid version.

2. Simpler developer handoff

Our developers can get dimensions, styles, and download icons and images from the project URL. Resources such as images and SVGs can be exported globally and locally.

Image illustrating development stage. A design is overlaid with a box showing CSS code being edited.

3. Easy collaboration

Co-designing alongside your co-workers is no longer a fantasy. Our team can now edit files together in real-time, leave comments with mentions, and follow along via Observation Mode. This has been particularly useful for remote working.

Image illustrating collaboration. Multiple users' cursors are hovering over a prototype design

4. All-in-one platform

It’s an all-in-one platform that does not require switching from one system to another in order to complete or share the design process. Designing, prototyping, reviewing work, and sharing feedback are all in one place.

Image illustrating user hovering over Figma software window, prototype view window, and a selected design element

5. Design features

Tools like ‘deep selection’ provide more control over design elements and save time during editing. Other features that our team enjoy working with are instant arcs, overlays, gradient borders, smart animate gradient transitions, and much more. Figma helps our designers to expand their creative ideas and showcase their visions throughout the design process.

Image showing the user's cursor selecting a design element.

Final thoughts

Figma made the right choice to focus on collaborative work and the ability to access files from the browser without installation, while I find that XD’s strength is in finding new design processes, such as Scroll Groups, 3D Transform, and Repeat-Grid features.

Only time will tell which platform will gain more recognition among designers. So far, Figma and Adobe are doing well at listening to user feedback and transforming it into real features, bringing visual design onto another level.

Features and images presented in this article are extracted from the official websites of Figma and Adobe. Figures for both are correct as of May 2021.


Interested in our content marketing and digital PR services? Get in touch.