Monday, January 6, 2020

Figma vs. Adobe XD in 2020

Figma and Adobe XD have been in competition since XD’s release in 2016. At first that competition wasn’t very stiff, with XD’s early releases missing a lot of key features, but things have changed over these past few years. The race between the two applications is now much tighter, and it’s no longer as easy to spot which one will be most suited to you and your workflow.

figma vs adobe xd
Figma and Adobe XD, head to head

In this showdown we’re going to go through a deep and comprehensive comparison of Figma vs Adobe XD, find out where each one shines, which one is better overall, and which one is better for your specific set of circumstances.

Let’s begin!

Table of Contents

Section 1. Pricing (in USD)

We’re going to get into pricing as our very first comparison so as we go through the features of both programs you’ll have context to assess how much value you will be getting in each case.

Figma: Free / $12 / $45

Figma Free 12 45

Figma is has a free tier with unlimited storage for up to two editors and three projects. Projects can contain an unlimited number of documents that can be saved online and offline. It has two paid tiers with team focused features named “Professional” and “Organization”, priced at $12 and $45 respectively per editor, per month.

XD: Free / $9.99 / $22.99 / inc CC $52.99

XD Free 999 2299 inc CC 5299

XD also has a free tier with no limit on projects, however files cannot be saved locally and must be saved to the cloud, with a storage allowance of 2GB. The paid tier is $9.99 per month, or included with a Creative Cloud subscription currently $52.99 per month. The paid tier allows local saving and also increase your cloud storage to 100GB.

Note: As at the time of this article free accounts include unlimited shared documents & shared links plus local saving. However from April 2020 shared documents and links will be limited to one of each, and a paid tier will be required for local saving.

Winner: Figma

Why Figma Wins

  • You get more in Figma’s free tier than XD’s.
  • XD’s paid tiers are cheaper, but Figma’s paid tiers have considerably more features.

Let’s have a rundown of why Figma’s pricing wins, tier by tier.

Free Tier

If not for April’s upcoming restrictions to collaboration and local saving with XD, the competition on whose free tier is most compelling would have been much closer. However as it stands you get more from Figma’s free version than XD’s:

  • Cloud storage: Figma, unlimited vs. XD, 2GB
  • Shared documents: Figma, unlimited vs. XD, 1
  • Shared links: Figma, unlimited vs. XD, 1

First Paid Tier

On the first level of paid tier, XD is $2.01 cheaper per user, which should be noted.

However much of what you get in the paid tier of XD is already available in the free tier of Figma, i.e. unlimited shared documents, unlimited shared links, larger amount of cloud storage.

As for the rest of the paid features in the first tier, Adobe’s main point of difference is it includes access to their full font library, otherwise only available via Creative Cloud. For comparison, Figma provides access to Google Fonts, without a font library of their own.

In contrast, Figma’s first paid tier adds custom file / user permissions, invite-only documents and shared team libraries.

As such, the value provided to you on the first paid tier of these applications will come down to whether fonts or features for collaboration and demonstrating to clients are worth more to you in your workflow.

Generally speaking, web designers would be more likely to find value in the collaboration, permission and sharing features of Figma’s first paid tier than they would the font library of Adobe’s first paid tier.

Note: Figma’s “Professional” tier also extends version history from 30 days to unlimited.

XD just added version history in November 2019, and it has a 30 day limit by default, with the option to mark specific versions to keep indefinitely. This appears to be the same on both free and paid tiers.

Second Paid Tier

Again, XD’s second paid tier is cheaper than Figma’s, this time by $22.01.

However, it would seem XD doesn’t offer as many additions on this tier as does Figma.

The “XD for teams” tier adds:

  • On-boarding webinars
  • Web-based admin console
  • Advanced technical support

The Figma “Organization” tier adds:

  • Org-wide design systems
  • Centralized teams
  • Private plugins
  • Plugin administration
  • Shared fonts
  • Single sign on + advanced security
  • Design systems analytics

Again in this case, even though XD’s second tier is cheaper, Figma’s seems to offer more value in the form of features that will be practically useful to large organizations.

Section 2. Supported Platforms

XD

Desktop:

Windows & Mac.

Desktop & Mobile device browsers:

XD can generate previews of your designs viewable in the browser to enable clients to give feedback.

Mobile device app:

Adobe XD app on iOS or Android. Emulates mobile devices for live previews

Figma

Desktop:

Windows & Mac (official).

Linux through the community maintained Figma-linux app - provides support for locally installed fonts

Desktop browsers:

Figma can be used for editing in any WebGL supporting browser. This also enables editing via ChromeOS and other Linux / BSD based systems.

Additionally, designs can be previewed by clients in desktop browsers.

Mobile device browsers:

View-only mode allows previewing of designs on iOS and Android. Officially supported in Safari and Chrome but also works in Firefox in my tests.

Mobile device app:

Figma Mirror app on iOS or Android. More closely emulates mobile devices than the browser does for previewing

Winner: Figma

Why Figma Wins

At present Adobe provides no way to access XD outside of Windows or Mac, while Figma can also be accessed via ChromeOS and Linux.

A little over a quarter of respondents to the 2019 Stack overflow developer survey reported using a Linux based system as their primary operating system, and it is a commonly used platform among people involved with the coding phase of web development. With Figma being accessible on Linux and ChromeOS via the browser or community maintained desktop app, this makes it the tool of choice for any team who aren’t 100% Mac / Windows based.

A little over a quarter of respondents to the 2019 Stack overflow developer survey reported using a Linux based system as their primary operating system

That said, if your team is running entirely on Mac & Windows, you won’t experience any significant difference in terms of platform support.

Section 3. Collaboration, Sharing & Previewing

3a. Collaboration

Figma

Multiplayer

With Figma’s “multiplayer” feature any number of people can be logged in and editing a document simultaneously. You will each have an an avatar that appears in the top toolbar, and each person’s cursor will be displayed with a different color and their name attached to it.

Observation Mode

You can also activate observation mode by clicking the avatar of any other user logged in and on the same document as you. Once this is activated your screen will mirror theirs, showing you every action they take as they move around the document. You can use this both to showcase a document to another person, or to watch a person move through a prototype in order to test its weaknesses.

Team Libraries

A majorly helpful feature is team libraries. Not only can you create design systems comprised of reusable components, color schemes and text styles for your own work, but you can make said design systems available for your entire team so everyone is working with the same common elements.

Automatic Save and Sync

Importantly, Figma automatically saves and syncs any changes to documents and design systems therein. If a person is working on a shared project and a change occurs, they will be notified and able to update what they are seeing immediately so all team members are up to date at all times, no file uploads, downloads or manual merges required.

Adobe XD

Coediting (beta)

As of November 2019 Adobe XD has collaborative “coediting” design in beta, which behaves very much like Figma’s “multiplayer” features. At present the only stand-out visual difference between the two is you don’t see the cursor of other designers working on the document.

Linked Assets

XD also has “Linked Assets”, whereby if a document is saved to the cloud its components and styles can be accessed from other documents through linking them. If the original component is changed then saved in the source document, the linked document will receive a notification that it can update to see the changes.

More Info:

Creative Cloud Libraries

You can also organize and access assets through Creative Cloud Libraries. This begins to approach the functionality found in Figma’s Team Libraries, but the features to facilitate the types of team structures people use on projects are not as strong.

If original assets from a CC Library are updated, they won’t change in other documents that are using them.

More Info:

Winner: Figma

Why Figma Wins

Collaboration is the central functionality around which a lot of Figma is built, and it shows. Being web based means collaboration features are very quickly and easily accessed, the multiplayer mode is currently more advanced than XD’s coediting beta, it includes observation mode, team libraries, and a smoothly flowing process to sync and update changes to shared assets.

3b. Sharing

Figma

Invitations

In Figma you can send invitations to specific people and set whether they can view, edit and add comments. It’s also possible, rather than inviting individuals one at a time, to create teams, add people to those teams, then share with the required team instead. Further, you can share all the documents in a project with a team rather than having to share one document at a time.

Permissions

There are also four levels of permissions a person can have: viewer, editor, admin or owner. These permissions can be set at the team, project and document level.

Links

You can share a document by sending the the same link you use to edit the document in the browser. Again, you can control what access via link allows, whether that be editing or just viewing. This facilitates an environment of sharing between designers, similar to GitHub or CodePen, and that is going to be buoyed by the upcoming Figma community pages.

More Info:

Adobe XD

Shared Links

It’s possible in XD to generate a link to a web based version of a document. These links can be generated as optimized for:

  • Design review
  • Developer handoff
  • Presentation
  • User testing

You can also apply custom settings to your generated links instead.

It is possible to allow open access to your shared link, or require a password of your choosing.

Private Invitations

As of June 2019, XD has the ability to email individuals private invitations to view shared links. This system will allow you to further ensure, beyond password protection, that only invited persons are able to view a published prototype online.

If access is restricted to invitation only, a Creative Cloud account will be required by the people invited.

Winner: Figma

Why Figma Wins

XD made a great advance when it added private invitations, however it remains significantly behind Figma’s advanced team management and permissions system, and the ease of allowing open sharing via the browser.

3c. Previewing

Figma

Figma gives you the ability to simply send a client or manager a link to demonstrate a mockup to them live in the browser. You can either set the link to be “view” only so the person can’t inadvertently make unwanted changes, or you can give them “edit” capability so they can directly interact and show you what they’d like to have happen in the design, or make changes such as adding copy they have prepared.

You can also use the “observation mode” described above to show someone through the mockup.

Embedding documents is also possible so they can be displayed within a webpage if you would prefer to preview in this way. To draw a comparison with CodePen again, this is similar to embedding a pen in a page, but in this case showcasing design rather than code.

XD

As mentioned above, you can generate a link to your XD design that, when shared with a client or manager, will allow them to view the mockup and leave comments on it. However, if you want to allow the person to get more involved, i.e. to give them any editing privileges, this is not currently possible.

A strong point XD has over Figma, though, is the ability to add voice narration to step your client through a demonstration, an excellent feature should you be working with people in different timezones or who have busy schedules:

Winner: Draw

Why a Draw

Both applications have very strong features for previewing documents, especially to clients, including the ability to send a link that allows for inspection in the browser.

On the one hand Figma allows you to let other interested parties interact directly with the document, and if doing a live demonstration they can see your cursor moving around, or they can watch through observation mode. It also has the ability to embed documents into websites.

And on the other hand XD gives you the ability to record a voice walkthrough for a client, something that could be super useful when a real time conversation is not an option. Especially for freelancer web designers, this feature could save a lot of time and potential miscommunication when used instead of written explanations of mockups.

Section 4. Designing

4a. Figma’s Frames vs XD’s Artboards

Figma uses “frames” while XD uses “artboards”. They are similar in functionality, so which one is better and why?

XD’s Artboards

XD’s artboards act as containers representing viewports that hold designs, e.g. a phone screen vs a tablet screen. You can create as many artboards as you like, and when prototyping you can link artboards together to emulate the flow a user might follow through a site or app.

Figma’s Frames

Figma’s frames also act as containers the way artboards do, but these containers can both represent viewports and design sub-elements such as buttons, sections of content, navigation elements and so on.

When used at the top level to represent a viewport, frames have all the functionality artboards do. But because they can be nested and used to create buttons, navbars and so on they also bring added functionality to these elements, such as grids and auto-layout.

Winner: Figma’s Frames

Why Figma Wins

Put simply, frames can do everything artboards can do, but artboards can’t do everything frames can do.

4b. Grids & Guides

Guides

Both XD and Figma have guides.

For a good while XD didn’t have guides and you would have to awkwardly emulate their functionality by adding rectangles or lines to your page that other objects could snap their alignment to. You might have encountered this workflow hurdle in the past, but guides have since been added, so rest assured functionality is now equal between XD and Figma in this regard.

Both applications also have grids, but there are some differences in how they function, described below.

Adobe XD Grids

In XD grids can be added to artboards. An artboard’s grid can be set to either a square grid or set of vertical columns. Once a grid is created it can be set as the default grid for your document so it can be easily applied to other artboards.

Figma Grids

In Figma grids, aka “layout grids”, can be added to any frame whether it be a top level frame acting as an artboard, or a nested frame acting as a design sub-element. This means you can have differently configured grids nested within the same design.

Figma also allows you to use multiple grids at once on a frame, with each one overlaid on the other. As such you can have a square grid and columns and rows.

Once a grid is created it can be saved as a grid style and applied to any frame or component. You can save as many grid styles as you like.

Winner: Figma

Why Figma Wins

Both applications have grids and guides, but Figma allows you to combine grid types, use them in nested items, and save multiple grid styles.

4c. Layout & Responsive Emulation

Constraints

Both applications have constraints, which allow you to tell components to stay in position or resize relative to certain sides of their parent frame / artboard. They provide essentially the same settings, so are equivalent in function for all intents and purposes.

There are layout and responsive emulation functions in each application that are quite different, however, so let’s take a look at them.

XD

Repeat Grid

XD has the “Repeat grid” function, which is an excellent time saving feature. To use it you can select any element, or multiple elements, press the “Repeat grid” button and your selection will automatically be set to repeat as many times as you like, horizontally and / or vertically. The repeat grid element can then be resized and have the spacing between elements changed as needed.

More Info:

Responsive Resize

XD also has the responsive resize function, which tries to guess what you are likely to need in a given element. It will then apply constraints to the element accordingly.

As with many features, how helpful this is will depend on your particular workflow. You may find it aligns with the way you work and hence saves you a lot of time, or you may find you often have to override the automatically applied constraints. The best way to find out is to give it a test run and see how it fits for you.

Note: XD components (aka symbols) were previously unable to resize, however that’s no longer the case: https://helpx.adobe.com/au/xd/help/components.html#resize_component

Figma

Auto Layout

Auto layout is the newest feature in Figma and it is highly advanced and incredibly helpful for web design mockups.

It allows for things like:

  • Buttons automatically resizing to suit the width of their inner text
  • Containers expanding or contracting when child elements are added or removed
  • Applying horizontal and vertical padding settings
  • Applying "spacing between items", which effectively behaves as margins
  • Dragging and dropping to sort list items, either horizontally or vertically
  • Dragging and dropping items between separate lists

Further, you can nest one auto-layout frames inside another, differently configured auto-layout frame.

This means you can effectively create grids by using horizontal auto-layout frames for rows, with a parent vertical auto-layout frame for each column. You can also use nesting to create complex layouts such as multi-post content spaces.

These auto-layout features give Figma the closest emulation of real browser behavior I’m yet to see in a design / mockup application.

More info

Smart Selection

Smart selection may not be needed as often now that Figma has auto-layout, but what it allows you to do is select multiple elements and quickly adjust the spacing around them.

I’ve seen this function described as Figma’s answer to XD’s repeat grid function, however I would say that, although it does allow you to modify spacing in a similar way, it doesn’t compare directly as it doesn’t handle the automatic replication of items into a grid for you.

More Info:

Winner: Figma

Why Figma Wins

This comparison is a much harder one to call, because XD’s repeat grid function is fantastic, and responsive resize can be helpful in certain cases.

However, Figma’s smart selection functionality was already excellent, and now its auto-layout functionality is the most advanced system of its type we’ve ever seen in UI design / mockup software. It’s going to take a lot for any other application to catch up with auto-layout, let alone overtake it.

4d. Creating Vector Graphics

Adobe XD

XD’s vector drawing tools include shape tools and a pen tool. However there is no way to edit the nodes of predefined shapes and editing of pen drawn vectors is limited.

The general idea of vector editing in XD is that you use it for wireframing, and you switch to Illustrator if you want to create graphics.

Figma

Figma also has shape tools and a pen tool, but it adds a freehand pencil tool, and as well as the predefined shapes available in XD it has star and arrow shapes.

You can edit the nodes of any shape, either predefined or drawn with the pen / pencil, by double clicking it to enter node editing mode. Figma also has the unique “vector network” functionality whereby any number of segments can branch from a single node, not just one or two.

Figma’s vector editing tools mean it is fully capable of creating many of the types of graphics used in web design, such as icons, logos and illustrations.

Winner: Figma

Why Figma Wins

If you want to create graphics from scratch you can do it right inside Figma, whereas XD is not equipped for this task, requiring a second piece of software instead.

4e. Fonts

Figma integrates with Google Fonts, while XD integrates with Adobe Fonts. Both can use locally installed fonts.

Winner: Figma

Why Figma Wins

Given this is a comparison for web designers, and Google Fonts is the most used web font library, it makes Figma’s font library generally more helpful in this regard.

That said, if you are using Figma for non-web design work you may find having access to Adobe’s fonts more useful. Additionally, Adobe does have some web fonts so it might be worth your while to check out their collection to help you decide if it provides value to you.

4f. Styling

Let’s have a quick rundown of the differences between styling options in Figma and XD

  • Figma has multiple fills and strokes. XD has only single fills and strokes.
  • Both allow you to control advanced stroke settings like caps, miters and stroke alignment.
  • Both have curved corners and blend modes.
  • Both have effects, with both having drop shadows, object / layer blur and background blur, but only Figma has an inner shadow effect.
  • Figma has additional advanced type settings XD doesn’t have.

Winner: Figma

Why Figma Wins

The competition on styling is pretty close, but Figma does come out on top due to its multiple strokes & fills, inner shadow and advanced type settings. For non-web work this would be less significant, but only Figma will allow you to design the types of multiple fills or multiple shadows that are possible via CSS.

Section 5. Design Systems

Both XD and Figma have the three essential pieces of functionality required to make design systems:

  1. Components (formerly symbols in XD)
  2. Color / effect styles
  3. Text / character styles

Let’s look at the ways these three functions differ, or are the same, between XD and Figma.

More Info:

5a. Components

Both XD and Figma use a master and instance system with their components, with the ability to override properties on component instances. Both also allow for nested components.

Both can allow components from one document to be accessed in another. With Figma this is done through publishing components to the “Team Library”, and in XD it is done with “linked assets”, whereby components can be pulled in from cloud documents.

As mentioned earlier, there used to be an issue with components in XD that they could not be made responsive, but with the introduction of constraints that was no longer the case.

Winner: Draw

Why a Draw

Figma’s components used to be leaps and bounds more advanced than XD’s symbols, but Adobe really closed the gap on this one. The two now are so near to each other in component functionality that neither has any huge advantages over the other.

5b. Color / Effect Styles

XD

Colors are saved in XD by selecting an object then clicking the + button in the Assets > Colors section of the interface. This will add both the stroke and fill colors to the palette. They will be named according to their hexcodes but can be renamed, and can be dragged and dropped for sorting.

XD doesn’t have a way to save effects, like shadows, as styles.

Figma

Colors are saved in Figma by selecting an object then clicking the button that looks like four squares near either the Fill, Stroke or Effects sections of the right sidebar. A name of your choice can be provided at this time. If you use the syntax category / name your styles will automatically be sorted into groups, e.g. buttons / nav. They can also be dragged and dropped for sorting.

Figma can also save effects as styles, such as drop shadows or blurs.

Winner: Figma

Why Figma Wins

This one is very close, almost close enough to call a draw. But Figma having the ability to save effects as styles is very helpful for a design system, as is the ability to choose individually whether to save stroke and fill colors. Automatic sorting into groups is also a handy feature.

5c. Text / Character Styles

Both Figma and XD allow you to save out font styling, referred to as a text style in Figma or a character style in XD. The means of saving these styles is the same as used for saving colors in each program.

Both applications allow you to save all of the font styling options they provide. The only significant difference is that XD allows you to also save a default color for the character style. It can be overridden but will be used when the style is first applied.

Winner: XD

With all other things being equal, the fact that XD lets you set a default color for your character styles is quite helpful, and gives it the edge in this case.

Section 6. Prototyping

6a. Interactions

Support for Multiple Interactions

In Figma you can have 1 interaction per item, for example, a hover interaction or a click interaction.

In XD you can have multiple interactions per item, for example, a hover interaction and a click interaction.

Let’s see a list of the interaction triggers, actions, transitions and easing options available in each application.

Figma

Triggers

  • On click
  • On drag
  • While hovering
  • While pressing
  • Mouse enter
  • Mouse leave
  • Mouse down
  • Mouse up
  • After delay

Actions:

  • Navigate to (frame - use to move between artboard type frames)
  • Open overlay (frame)
  • Swap with (frame - use to swap in alternate component type frames, e.g. buttons, see next section for more info)
  • Back
  • Close overlay
  • Open URL

Transitions

  • Instant
  • Dissolve
  • Smart Animate (see section after next)
  • Move In
  • Move Out
  • Push
  • Slide In
  • Slide Out

Easing

  • Ease In
  • Ease Out
  • Ease In and Out
  • Linear

XD

Triggers:

  • Tap
  • Drag
  • Hover
  • Time
  • Voice
  • Keys
  • Gamepad

Actions:

  • Transition (see types in the list below)
  • Auto-animate (see section after next)
  • Overlay
  • Speech Playback
  • Previous artboard
  • State change (see next section)

Transitions

  • Dissolve
  • Slide left
  • Slide right
  • Slide up
  • Slide down
  • Push left

Easing

  • None (aka linear)
  • Ease Out
  • Ease In
  • Ease In-Out
  • Snap
  • Wind Up
  • Bounce

Winner: XD

Why XD Wins

XD has a collection of triggers you can use for interactions that Figma does not have, in particular: voice, keys and gamepad. It also has speech playback and state change actions Figma doesn’t have. As such, XD facilitates more types of UI designs such as voice controlled / oriented apps or web game UIs.

On top of that it allows more than one interaction per item, allowing you to achieve prototypes with functionality more similar to their behavior in the browser.

6b. States / Swapping

Adobe XD

XD has a “states” feature to make it easier to design things like button hovers or switch toggles.

In XD you just create a component, add a hover state, then restyle the master component’s hover state right in place. When you preview your artboard you will automatically have the hover interaction working. Further, every time you add the component to an artboard its hover states, toggle states and so on will already be baked in and ready to go.

Additionally, you can create as many states as you need, beyond just default and hover.

The only downside is you can only use a hover trigger to initiate a hover state, and can’t use one to trigger other actions such as moving between artboards.

Figma

In Figma there is no explicit “state” function. You can create things like hover effects and switch toggles but to do so you’ll need to create two separate components and animate between them either by swapping with another frame or opening an overlay.

If you swap between frames you can use smart animate to handle the transitions, but you would need to make a duplicate artboard style frame for every hover or toggle effect you wanted to create. For example, to show three button hover states you’d need three duplicate frames, one per hover state.

If you want to work within a single frame you can instead open an overlay, where the overlay is a frame representing the new state, such as a hover styled button. However with this option you can only use dissolve or “move in” transitions, and not smart animate, meaning you can’t create something like a switch toggle slide effect.

You would also need to wire up these swapping driven states every time you add a component instance, unlike XD’s components where the states are built in.

Winner: Adobe XD

Why XD Wins

Right now Figma doesn’t really have a state system, but rather a workaround using swapping to create something similar. XD’s state system on the other hand is robust and provides more methods of creating interactions and emulating browser functionality. It is also faster and more convenient to use given states can be saved into components and are then present when you add said component instances.

6c. Animation

The availability of animations in XD was a strongly differentiating feature between it and Figma for some time, however Figma has also recently added in animations, shrinking the gap in this category.

Both applications have similar functionality, whereby you can transition between two artboards / top-level artboard style frames, and any layers with matching names across those frames can have animations automatically applied to them.

However with XD a key difference is you can also use auto-animate to transition between component states, not solely between frames.

Additionally, XD supports interpolation between more properties than Figma. Let’s take a look at the interpolation available in each:

Figma Smart Animate Interpolated Properties

  • Scale
  • Position
  • Opacity
  • Rotation
  • Solid Fill
  • Gradient Fill

See: https://help.figma.com/article/365-smart-animate#how

XD Auto-Animate Interpolated Properties

  • Border Size
  • Opacity
  • Rounded Corner
  • Position (X/Y)
  • Size (W/H)
  • Rotation 
  • Text Size
  • Character Spacing
  • Paragraph Spacing
  • Line Spacing 
  • Paths

See: https://helpx.adobe.com/xd/kb/supported-auto-animate-features-in-xd.html#main-pars_text

More information

Winner: XD

Why XD Wins

XD allows you to animate between component states as well as artboards / frames, and supports interpolation on more properties in the process. Note in particular its ability to interpolate paths, meaning it can morph between one shape and another. These factors make it the strongest in animation right now.

Section 7. Handoff

7a. Code Generation

Adobe XD

XD can generate CSS code. In order to see this code you have to generate a developer link then visit said link in a browser. If there is any change to the document you’ll need to regenerate this link and refresh it.

Figma

Figma can generate CSS, Swift for iOS and XML for Android.

To see generated code you just open the Code tab in the right sidebar. If there is a change to the document the code will be regenerated in real time, automatically.

Figma will also allow you to directly copy CSS or SVG code by right clicking an object, choosing copy / paste, then selecting either Copy as CSS or Copy as SVG.

Winner: Figma

Why Figma Wins

Figma can generate code for iOS and Android as well as CSS. That code is much easier to access inline in the Figma application rather than XD’s process of generating a link then visiting it in the browser. Figma code updates in real time, and CSS and SVG can be copied directly from the canvas. These features add up to making Figma a clear winner on code generation.

7b. Image Exporting

Formats

Both XD and Figma can export images as PNG, SVG, PDF and JPG.

Pixel Density

Figma can export PNGs and JPGs at: 0.5x, 0.75x, 1x, 1.5x, 2x, 3x, 4x

XD can export JPGs at either 1x or 2x. It can export PNGs at 1x, 2x, 3x, or if exporting for Android, 75% ldpi, 100% mdpi, 150% hdpi, 200% xhdpi, 300% xxhdpi, 400% xxxhdpi.

Quality settings

XD has the ability to set image quality as a percentage on JPG export, while Figma does not, meaning after exporting from Figma you’ll likely have to re-export to get the file size down to a suitable amount for the web.

Winner: XD

Why XD Wins

While Figma has a little more flexibility with pixel density export settings, XD includes quality settings, and for web designers that’s very important. For this reason, and for web designers specifically, XD is the winner on image exporting.

Section 8. Miscellaneous & Extras

8a. File Saving

Note: Here we are talking about saving your document file, not saving image files as covered in the previous section.

Figma

Figma files are auto-saved online and can optionally be saved locally as .fig files. Both types of saving are available at all pricing tiers.

Figma also allows you to maintain an extensive file history collection, allowing you to revert to prior versions at any time. The free tier has 30 days of history while paid tiers have unlimited history.

XD

XD files can be save to Creative Cloud documents on the free tier. On paid tiers they can also be saved locally as .xd files.

XD also allows you to maintain document histories. By default these versions last for 30 days, with the option to flag specific versions to keep. I could not confirm if there is a difference between free and paid tiers for document history in Figma, but from available information it seems to be the same in both.

Winner: Figma

Why Figma Wins

Both Figma and XD have local and online / cloud saving, however Figma provides both of these options in their free tier while XD requires payment for local saving and has cloud storage caps. Additionally, Figma’s auto-saving function is very convenient and helps prevent lost work.

8b. Working Offline

XD

XD allows you to work offline at any time, however you will need a paid account in order to have saved your files locally before going offline.

Figma

Figma does allow working offline, but you need to have had an internet connection when you first began your session in order to properly load the software. After that you can continue working offline.

Winner: XD

Why XD Wins

XD is the only option of the two that allows entirely offline work. If you’re living or traveling in an area with intermittent internet connectivity, XD is going to be the better choice.

8c. Interoperability

Both XD and Figma have interoperability with Sketch in that they allow you to open Sketch files and continue working on them. Let’s see what other software each can interoperate with.

Adobe XD

Photoshop

You can right click an PNG, JPG, BMP or GIF image that’s been added to an XD document and select Edit it in Photoshop. The image will open in Photoshop, and after making your edits you can save the file and your changes will be reflected in XD.

You can also directly open a PSD in XD, an extra helpful feature if you want to work with template assets you have purchased from other designers that were made in Photoshop.

After Effects

XD already has strong animation functionality with auto-animate, but even more sophisticated animations and micro-interactions can be created by bringing After Effects into the workflow. You just select an artboard of layer you want to animate then export to After Effects where you can put your animations together.

Illustrator

It was mentioned earlier that vector illustration can’t really be done inline in XD because instead the idea is you use Illustrator as part of your workflow. To use Illustrator to edit vectors already in your document you can select them then copy paste vectors directly onto a canvas in Illustrator, then copy paste back again when you’ve finished editing. By the same token, you can copy vectors you have created in Illustrator directly into XD.

More Info:

Figma

Figma isn’t designed to interoperate with other design software in the way XD is. However what you can do is copy vectors created in Figma as SVG, and then most vector editing programs, (like Affinity Designer or Inkscape), will allow you to paste those vectors onto their canvas for further editing.

Winner: XD

There really isn’t any significant competition between Figma and XD on interoperability–Figma isn’t designed for it, while XD works in with other software in the Creative Cloud suite. Granted, Figma already has strong vector editing tools built in, but XD definitely has an advantage in being able to facilitate more advanced editing through Illustrator, Photoshop and After Effects.

8d. Integrations

Integrations with third party software is something I’m classing separately to interoperability, where the former facilitates a portion of workflow outside of mockup creation, while the latter is used during the design process. Let’s check out a list of the integrations XD and Figma support.

Note: In some cases there may be plugins that enable extra integrations but we are focusing on official integrations.

Adobe XD

Showcase

  • Behance

Handoff

  • Zeplin
  • Avocode
  • Sympli

Advanced Animation & Prototyping

  • ProtoPie
  • Kite Compositor

Team & Project Management

  • Jira
  • Microsoft Teams
  • Slack

Figma

Showcase

  • Figma Community (beta)
  • Dribbble

Handoff

  • Zeplin
  • Avocode

Advanced Animation & Prototyping

  • ProtoPie
  • Principle
  • Flinto

Team & Project Management

  • Jira
  • Trello
  • Receive Comment Notifications in Slack

Style Guides

  • Zeroheight

File Sharing

  • Dropbox

Winner: Draw

Why a Draw

Figma may have more integrations that XD, with 12 vs. 9, but that in itself is not inherently meaningful. Rather, it’s whether the apps you use in your workflow are supported that determines the value of these integrations. As such, given both have a solid offering of integrations in multiple categories, we’ll call this one a draw.

8e. APIs

Figma has an API that allows design files to be output as JSON data, can read & write comments, and generate image files. This allows development of all kinds of integrations into a Figma based design workflow. For example,

  • Uber used the API to display in-progress designs on TVs around their office, and allow staff to peruse them through an in-house browser based showcase.
  • Microsoft used the API to facilitate an automated design handoff process they estimated reduced their workflow by 70%.
  • GitHub built a system that allows their entire icon system to be managed from a single design file.

The API is openly accessible to anyone with a free or paid Figma account.

Winner: Figma

Why Figma Wins

XD doesn’t have any sort of API. Figma does, and it’s been used for very beneficial purposes so far.

More Info:

8f. Plugins

For a while only XD had plugins and it was a pretty significant advantage over Figma. However now both XD and Figma have plugins, so the strength of each in this category will probably come down to how applicable the plugins for each application are to your specific workflow.

Browse XD plugins: https://www.adobe.com/products/xd/resources.html

Browse Figma plugins: https://www.figma.com/c

Winner: Draw

Both Figma and XD have a healthy plugin ecosystem right now with a lot of useful community made tools.

Note: Figma does have the additional feature that in the Organizations tier private plugins can be created and used, however given that’s only on the highest tier it’s probably not enough of a differentiating feature to say that Figma’s plugin system will be more valuable to most designers.

Section 9. Final Scores

Figma Wins: 14

  • 1. Pricing
  • 2. Supported Platforms
  • 3a. Collaboration
  • 3b. Sharing
  • 4a. Frames vs Artboards
  • 4b. Grids & Guides
  • 4c. Layout & Responsive Emulation
  • 4d. Creating Vector Graphics
  • 4e. Fonts
  • 4f. Styling
  • 5b. Color / Effect Styles
  • 7a. Code Generation
  • 8a. File Saving
  • 8e. APIs

Adobe XD Wins: 7

  • 5c. Text / Character Styles
  • 6a. Interactions
  • 6b. States / Swapping
  • 6c. Animation
  • 7b. Image Exporting
  • 8b. Working Offline
  • 8c. Interoperability

Draws: 4

  • 3c. Previewing
  • 5a. Components
  • 8d. Integrations
  • 8f. Plugins

Overall Winner: Figma, 14 to 7

At this stage Figma remains a fairly dominant winner over Adobe XD with 14 wins to 7, and the remaining 4 points of consideration a draw. There are still conditions in which you might prefer Adobe XD though, and that is if the 7 areas it wins are more important to you than the 14 areas Figma wins.

Strengths of Each

XD’s Strengths: Prototyping, Creative Cloud, Offline

XD has a good chance of being better for you if you’re already deep into working in the Adobe ecosystem. If you’re all in on Adobe software and you want something better for interface design than AI or PS but still in the Creative Cloud family, XD is your solution.

Additionally, XD’s area of stand out strength at the moment is its prototyping, having taken the win in our three prototyping subsections: Interactions, States and Animation.

XD also might be a better choice for you if you don’t have access to reliable internet or want to use desktop native / non-web-based software

Figma’s Strengths: Collaboration, Design, Cross Platform

If collaboration is a high priority to you and your team, Figma is currently unrivaled in this space. It’s been built from the ground up with collaboration in mind and as such it will be hard for any other app to knock it from the top spot in the near future.

It also currently outpaces XD quite considerably as a design tool, taking the wins in all six of our design subsections: Frames vs Artboards, Grids & Guides, Layout & Responsive Emulation, Creating Vector Graphics, Fonts, Styling

And finally, if you have team members who utilize Linux or ChromeOS, Figma has the cross-platform support to provide for these platforms.

The Race Continues

When Adobe XD first came out, it was really no significant competition to Figma at all, acting more as a better option for Creative Cloud based interface designers than was Photoshop or Illustrator. However since then, while Figma may still be ahead at the moment, XD has certainly closed the gap quite a bit.

The competition between Figma and XD goes on, and each program is most certainly pushing the other to keep stepping up its game. We see features that were exclusively in one appear in the other on a fairly regular basis. The pressure they apply on one another to innovate is yielding excellent results for us as designers.

So whichever you decide to use in 2020, keep an eye on what the other is doing as, who knows, it might become your new favorite at any moment.

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)