Figma vs. Adobe XD in 2020

Read MoreFigma 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 and Adobe XD, head to headIn 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 ContentsSection 1. Pricing (in USD)Section 2. Supported PlatformsSection 3. Collaboration, Sharing & PreviewingSection 4. DesigningSection 5. Design SystemsSection 6. PrototypingSection 7. HandoffSection 8. Miscellaneous & ExtrasSection 9. Final ScoresSection 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 / $45Figma
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.99XD
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: FigmaWhy Figma WinsYou 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 TierIf 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, 2GBShared documents: Figma, unlimited vs. XD, 1Shared links: Figma, unlimited vs. XD, 1First Paid TierOn 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 TierAgain, 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 webinarsWeb-based admin consoleAdvanced technical supportThe Figma “Organization” tier adds:Org-wide design systemsCentralized teamsPrivate pluginsPlugin administrationShared fontsSingle sign on + advanced securityDesign systems analyticsAgain 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 PlatformsXDDesktop: 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 FigmaDesktop:Windows & Mac (official).Linux through the community maintained Figma-linux app – provides support for locally installed fontsDesktop 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: FigmaWhy Figma WinsAt 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.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 & Previewing3a. CollaborationFigma
MultiplayerWith 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 ModeYou 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 LibrariesA 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 SyncImportantly, 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 XDCoediting (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 AssetsXD 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:https://helpx.adobe.com/xd/help/linked-assets.htmlCreative Cloud LibrariesYou 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:https://helpx.adobe.com/xd/help/cc-libraries-xd.htmlWinner: FigmaWhy Figma WinsCollaboration 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. SharingFigma
InvitationsIn 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.PermissionsThere 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.LinksYou 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:https://www.figma.com/blog/introducing-figma-community/https://help.figma.com/article/301-understanding-sharing-permissionshttps://help.figma.com/article/326-sharing-filesAdobe XD
Shared LinksIt’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 reviewDeveloper handoffPresentationUser testingYou 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 InvitationsAs 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: FigmaWhy Figma WinsXD 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. PreviewingFigmaFigma 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.XDAs 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: DrawWhy a DrawBoth 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. Designing4a. Figma’s Frames vs XD’s ArtboardsFigma 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 FramesFigma’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 FramesWhy Figma WinsPut simply, frames can do everything artboards can do, but artboards can’t do everything frames can do.4b. Grids & GuidesGuidesBoth
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 GridsIn 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: FigmaWhy Figma WinsBoth
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 EmulationConstraintsBoth
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.XDRepeat 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:https://helpx.adobe.com/xd/help/create-repeating-elements.htmlResponsive 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_componentFigma 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 textContainers expanding or contracting when child elements are added or removedApplying horizontal and vertical padding settingsApplying “spacing between items”, which effectively behaves as marginsDragging and dropping to sort list items, either horizontally or verticallyDragging and dropping items between separate listsFurther,
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 infoAuto-layout docsFigma Blog – Announcing Auto LayoutAuto Layout PlaygroundSmart SelectionSmart 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:Figma Blog – Introducing Smart SelectionSmart Selection DocsWinner: FigmaWhy Figma WinsThis
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 GraphicsAdobe XDXD’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.FigmaFigma 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: FigmaWhy Figma WinsIf
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. FontsFigma integrates with Google Fonts, while XD integrates with Adobe Fonts. Both can use locally installed fonts.Winner: FigmaWhy Figma WinsGiven
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. StylingLet’s have a quick rundown of the differences between styling options in Figma and XDFigma 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: FigmaWhy Figma WinsThe 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: Components (formerly symbols in XD)Color / effect stylesText / character stylesLet’s look at the ways these three functions differ, or are the same, between XD and Figma.More Info:https://helpx.adobe.com/au/xd/help/design-systems.htmlhttps://www.figma.com/design-systems/5a. ComponentsBoth 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: DrawWhy a DrawFigma’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 StylesXDColors 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: FigmaWhy Figma WinsThis 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 StylesBoth 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: XDWith 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. Prototyping6a. InteractionsSupport for Multiple InteractionsIn 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
TriggersOn clickOn dragWhile hoveringWhile pressingMouse enterMouse leaveMouse downMouse upAfter delayActions: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)BackClose overlayOpen URLTransitionsInstantDissolve Smart Animate (see section after next)Move In Move Out PushSlide In Slide OutEasingEase InEase OutEase In and OutLinearXD
Triggers:TapDragHoverTimeVoiceKeysGamepadActions:Transition (see types in the list below)Auto-animate (see section after next)OverlaySpeech PlaybackPrevious artboardState change (see next section)TransitionsDissolveSlide leftSlide rightSlide upSlide downPush leftEasingNone (aka linear)Ease OutEase InEase In-OutSnapWind UpBounceWinner: XDWhy XD WinsXD
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 / SwappingAdobe 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 XDWhy XD WinsRight 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. AnimationThe
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 PropertiesScalePositionOpacityRotationSolid FillGradient FillSee: https://help.figma.com/article/365-smart-animate#how
XD Auto-Animate Interpolated PropertiesBorder SizeOpacityRounded CornerPosition (X/Y)Size (W/H)Rotation Text SizeCharacter SpacingParagraph SpacingLine Spacing PathsSee: https://helpx.adobe.com/xd/kb/supported-auto-animate-features-in-xd.html#main-pars_text
More informationhttps://help.figma.com/article/365-smart-animatehttps://www.figma.com/blog/announcing-smart-animate-and-advanced-transitions/https://helpx.adobe.com/xd/help/animate-prototypes.htmlWinner: XDWhy XD WinsXD 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. Handoff7a. Code GenerationAdobe XDXD 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: FigmaWhy Figma WinsFigma 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 ExportingFormatsBoth XD and Figma can export images as PNG, SVG, PDF and JPG.Pixel DensityFigma can export PNGs and JPGs at: 0.5x, 0.75x, 1x, 1.5x, 2x, 3x, 4xXD
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 settingsXD
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: XDWhy XD WinsWhile 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 & Extras8a. File SavingNote: Here we are talking about saving your document file, not saving image files as covered in the previous section.FigmaFigma 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.XDXD 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: FigmaWhy Figma WinsBoth 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 OfflineXDXD 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.FigmaFigma 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: XDWhy XD WinsXD 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. InteroperabilityBoth 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 XDPhotoshop
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 EffectsXD 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.IllustratorIt 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:https://helpx.adobe.com/au/xd/help/working-with-external-assets.htmlFigmaFigma 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: XDThere 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. IntegrationsIntegrations 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
ShowcaseBehanceHandoffZeplinAvocodeSympliAdvanced Animation & PrototypingProtoPieKite CompositorTeam & Project ManagementJiraMicrosoft TeamsSlackFigmaShowcaseFigma Community (beta)DribbbleHandoffZeplinAvocodeAdvanced Animation & PrototypingProtoPiePrincipleFlintoTeam & Project ManagementJiraTrelloReceive Comment Notifications in SlackStyle GuidesZeroheightFile SharingDropboxWinner: DrawWhy a DrawFigma 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: FigmaWhy Figma WinsXD doesn’t have any sort of API. Figma does, and it’s been used for very beneficial purposes so far.More Info:https://www.figma.com/developers/apihttps://www.figma.com/blog/https-blog-figma-com-microsoft-automates-design-handoff-with-figmas-api/https://www.figma.com/blog/introducing-figmas-platform/8f. PluginsFor 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.htmlBrowse Figma plugins: https://www.figma.com/cWinner: DrawBoth 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 ScoresFigma Wins: 141. Pricing2. Supported Platforms3a. Collaboration3b. Sharing4a. Frames vs Artboards4b. Grids & Guides4c. Layout & Responsive Emulation4d. Creating Vector Graphics4e. Fonts4f. Styling5b. Color / Effect Styles7a. Code Generation8a. File Saving8e. APIsAdobe XD Wins: 75c. Text / Character Styles6a. Interactions6b. States / Swapping6c. Animation7b. Image Exporting8b. Working Offline8c. InteroperabilityDraws: 43c. Previewing5a. Components8d. Integrations8f. PluginsOverall Winner: Figma, 14 to 7At 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 EachXD’s Strengths: Prototyping, Creative Cloud, OfflineXD 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 softwareFigma’s Strengths: Collaboration, Design, Cross PlatformIf 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, StylingAnd finally, if you have team members who utilize Linux or ChromeOS, Figma has the cross-platform support to provide for these platforms.The Race ContinuesWhen 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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top