Figma vs. Sketch vs. Adobe XD

Navigate: Right/Left Arrows (or Swipe Left/Right)
Zoom Out: Press Esc (or Pinch)

Check out our classes for Figma, Sketch, and Adobe XD.
These slides are for the seminar: Figma vs. Sketch vs. Adobe XD

The Plan

Go feature-by-feature, comparing the capabilities.
My goal is to help you decide which is best for your needs.

My Qualifications

I’ve been designing (and coding) websites since 1998!
For UI and web design I’ve used ImageReady, Fireworks, Photoshop, Illustrator, InVision, Sketch, Adobe XD, and Figma.
I know other design apps and have been teaching professionals for over 20 years.
Many designers focus on one app, but I have used (and teach) all 3 of these apps.
I want to use and teach the best apps, and have no vested interest in which succeeds or fails, so I try to be impartial.

Rules for Comparing

I’m going to talk about native features. I won’t go into plugins or third party integrations which may allow these apps to do more.
Updates and new features come out every month or two. As of today what I’m saying is accurate (to the best of my knowledge). When you’re watching this video, capabilities may have changed.

When where they released?

Sketch: Sept 7, 2010
XD: March 14, 2016 (beta). Out of beta Oct 18, 2017
Figma: Sept 27, 2016 (had a closed beta in 2015)

Feature Comparison

Let’s get into it!

Native App vs Web App

Sketch is Mac only, so it does not work on Windows.
XD very similar on Mac and Windows.
Figma is the only one that’s a web app and can work on any platform via a web browser.
Figma does have a native app which provides a few UX improvements such as top level menus for Mac users (which sadly the native Windows app does not have).

Figma is a Web App

Figma requires a constant internet connection.
All files are stored and edited on Figma servers.
Without the internet, you cannot create or open files.
If a file is open and you lose internet, you can keep working. Changes are saved in your browser (even if you close the file). When you reconnect, the changes will sync.

Local vs Cloud Files

XD and Sketch let you choose to work locally or online (some features require internet or cloud files).
Figma only works online & files must be stored online.
Figma can download a .fig file but you can’t work on it locally, you must re-upload it to work on it again.

Benefits of Being a Web App

You can start working quickly by logging into the Figma website. You don’t have to install an app (unless you need local fonts).
You get all Google Fonts without having to install them.
Community files (like UI kits) are easily duplicated directly into your account with nothing to download.

Prototyping

Figma and XD both have much stronger prototyping features than Sketch: overlays, drag interactions, key presses, and more.
XD: The only app that also has voice prototyping.
Sketch: Has only basic prototyping features to go from one artboard to another. No overlays, drag interactions, etc.

Animation

Figma and XD: Both have auto/smart animate features.
Figma: Has more built-in easings than XD, and can define custom easings.
Sketch: Has a few transitions for its basic prototyping features, but otherwise does not create animations.

Auto Layout

Figma: Has powerful auto layout features that were recently upgraded. Elements can now even have negative spacing (and absolute positioning) so they overlap.
XD: Calls it responsive resize. Initially it may be easier to apply because it can handle variable spacing and will create nested groups to protect elements that don’t fit the main direction. It’s not as fully featured as Figma, and does not support negative spacing to overlap elements.
Continued on next slide...

Auto Layout

Sketch: No general auto layout feature. Only Symbols have an auto layout feature, so you end up making lots of nested symbols when you didn’t really want them to be symbols.

Multiple Pages

Sketch: Yes
Figma: Yes
XD: No

Storing Components

All apps have components (Symbols in Sketch),
but there are differences.

Sketch: Offers to send Symbols to a Symbols page to keep them organized. Prototypes can link across pages.
Figma: Prototypes cannot link between pages, so that can limit your use of pages. So you’ll likely store main components on the same page.
XD: Does not have pages, so everything must be on a single page.

Overriding Components

Figma: Go into an instance and start making overrides, or set up a system of options and variants for more defined control which helps in managing larger design systems.
Sketch: You can override specific things you’ve used in a symbol: text, images, styles (text and layer styles), and nested symbols.
XD: Go into an instance and start making overrides. It’s not as systematic in its approach Figma and Sketch, so it’s less manageable on larger design systems.

Component Variants

Figma: Variants let you build variations into a single component with options you define to make finding the right one easy.
XD: States can be Hover, Toggle, and more. The problem is choosing one. You’d see a list of every possible option: Solid Black, Solid Brown, Outline Black, Outline Brown, Solid Black with Icon, and so on. In Figma you’d make a color option with the colors, appearance option with outline/solid, and toggle switch for icon, so finding the right options is easier in Figma.
Continued on next slide...

Component Variants (continued)

XD: You can only see one XD state at a time for editing. In Figma you can see them all and make edits across variants as the same time, which is a lot faster.
Sketch: You can change certain attributes of symbols, but it’s not a direct equivalent and not as controllable or flexible as variants in Figma.

Text Styles

Text styles are disappointing in all these apps.

Figma: Has text styles, but there are some weird things.
Figma: You can apply multiple text styles in a single text frame, but you don’t have space before/after a paragraph when using multiple styles.
Figma: You can’t apply color as part of a text style. Why?
Figma: Applying overrides (like making a superscript, etc.) either can’t be done or doesn’t work well.
Continued on next slide...

Text Styles

Sketch: Has text styles, but only one per text frame.
XD: Does not have true text styles at all. What they call “Character Styles” are actually saved find/change queries.
XD: Character Styles are not usable because they can accidentally change things throughout your entire file (because you can’t link the styles to specific bits of text).
XD: From a company that makes InDesign (which has amazing styles), XD text styles are appallingly designed and implemented.

Other Kinds of Styles

All apps can save colors for reuse/global updates.
Figma has grid styles (which the other apps do not).
XD lacks a way to save appearance styles (like drop shadow, etc), which Figma and Sketch both have.
Sketch layer styles are more robust than Figma and can save everything together (fill, stroke, effects, etc.) whereas Figma has separate color and effect styles, but no stroke styles.

Libraries

All 3 apps have shared cloud libraries, but there are some differences.

Figma: can easily swap libraries (example: light and dark modes, version1 to version2, etc.)
XD: Seeing as Character Styles are virtually useless in a single file, they are even more dangerous in a library shared across multiple files. It’s a disaster waiting to happen!

Cropping Images

XD: Cropping images is easy and intuitive (once you know to drag and drop an image onto a box).
Figma: Switching from an auto sized image to a cropped image works, but is clunkier than XD.
Sketch requires masking and is not as fast and intuitive as Figma and XD.

Keystrokes

XD and Sketch are like other apps, but Figma sometimes uses odd keystrokes because it’s a web app.
Example: In Figma Shift–G shows/hides the layout grids. You get used to it, but it’s weird.

Exporting

None of these apps are great for optimizing to a specific file size, especially compared to Photoshop.
You can’t preview the compression, and they have very few (if any) options for reducing file size.
Figma and Sketch: Very similar workflow, but Figma can’t even set a JPEG quality. So you’d export a PNG and optimize in Photoshop.
XD: The workflow is horrible. You can’t mark a file format, so you select elements and export to one file format at time.

Playing Video

XD: Yes (up to 25MB in size)
Sketch: No
Figma: No

Playing Animated GIFs

Figma: Yes
XD: No, but you could convert into a video (which will play)
Sketch: No

Eye Dropper Tool

XD and Sketch can sample from outside the app (very useful).
Not sure if this will be possible in Figma because it’s a web app.

OpenType & Variable Fonts

Do they display additional options to control these kinds of fonts?

Figma: Yes
Sketch: Yes
XD: No

App Interface

Figma and Sketch have dark mode. XD does not.
I find XD to be the simplest UI, followed by Figma and Sketch. But they are all very similar.
Figma has some pop-out panels that I’m not that fond of because they cover over the design area (like when cropping a photo).

Color Management

Figma and Sketch both have color management.
XD does not have color management, so colors can shift from in the app to a web browser.

File Compatibility

XD can open Sketch, Photoshop, & Illustrator files.
Figma can open Sketch files.
Sketch can’t open any other files.
There are websites that will convert files.

Integration with Adobe Apps

Unsurprisingly, XD integrates better with Photoshop, Illustrator, & After Effects.
Figma and Sketch have no integrations.

Comments

Figma: Comments are integrated into the app as well as shared links, so reviewing comments is easy.
XD and Sketch: Comments are not integrated and are only viewable in the shared links (so reviewing is not as easy).
XD is the only app to allow guests to comment without creating an account.

XD Unique Features

3D Transforms
Voice Prototyping
Can use audio in prototypes
Repeat grid
Record a video of the prototype (Mac only)

Figma Unique Features

Can add strokes individually to each of the 4 sides of a rectangle
All Google fonts included without having to install them
Integrated comments
Component Variants
Branching and merging (requires an Organization plan)
No app to install
Easy to duplicate community files

Figma Unique Features (continued)

Grid styles
When dragging icons to change values, Figma loops around the screen so you can keep going
Vector networks

Sketch Unique Features

Native Mac interface
Prototype links work across pages
Motion and zoom blurs

Is it Free?

Figma: Has a free starter plan that’s good, but has limitations
XD: Has a free starter version with limitations (similar to Figma’s free starter plan, but more restrictive)
Sketch: Does not have a free plan (only a 30-day trial)

Cost of Paid Plans

Sketch: $9/month
XD: $9.99/month (or included with Creative Cloud)
Figma: starts at $12/month

App Updates

Figma gets automatic updates you do not install. Some people like not having to manage updates... but you don’t have a choice if you don’t want to update (like in the middle of a deadline or right before a big presentation).
XD and Sketch let you choose when to update. But collaborators usually must all upgrade at the same time to stay compatible.
XD and Sketch have system requirements and may require an OS update (which doesn’t apply to Figma because it’s a web app).

My First Impressions

The first time I used both Sketch and XD I liked how easy they were. Learning them seemed intuitive and easy to me.
Coming to Figma (knowing both Sketch and XD), I found it less intuitive and had to look up more things that I felt should have been easy to figure out.
While my first impressions were a bit less positive with Figma, once I figured it out I became impressed with its feature set.

Summary

These apps are all still pretty young and developing. None are perfect, each having certain strengths and weaknesses.
Sketch has fallen behind in terms of features. Figma & XD have a stronger set of features, especially for prototyping and animation.
Figma’s overall feature set is probably the strongest.
XD has some limitations holding it back from scaling to larger design systems, which is one area Figma is leading.
Job market: Currently we see more UX/UI jobs asking for Figma and Sketch, than Adobe XD.

What Do You Think?

What do you like (or not like) about these apps?
Leave a comment so others can benefit from different perspectives.

Learn More

Figma, Adobe XD, or Sketch Classes
UI Design (Visual Design) & UX Design Classes

Certificate Program

UX & UI Design Certificate

Learn live online or in-person in New York City