Review: Figma Versus Adobe XD, Part 2

Fonts

Google’s Web fonts library is in common use. Therefore, Figma’s Google fonts are more reliably available than Adobe XD’s Adobe fonts.

Winner: Figma

Again, Figma comes out on top in this contest.

Vector Graphics

Both Figma and Adobe XD are vector-based tools, as is evident from the presence of a Pen tool. Figma provides a Pencil tool as well, which lets you draw free-form shapes. You can double-click the nodes of vectors you have drawn with the Pen or Pencil tool to edit them.

Figma

You can use Figma to create mirrored vectors. You can also draw a vector using the Pen tool, then convert it to a component. You can then duplicate the component and flip the copy horizontally, using Shift + H, or vertically, using Shift + V. Once the vectors are complete, you can use Union Selection to connect the vectors, then flatten the result using Ctrl + E.

Adobe XD

You cannot create mirrored vectors in Adobe XD.

Winner: Figma

Figma emerges as the winner because Adobe XD does not support modifying the nodes of a vector. The Pencil tool and the ability to create mirrored vectors are also missing from Adobe XD.

Arranging Multiple Elements

This is a contest between Figma’s Smart Selection feature versus Adobe XD’s Repeat Grid feature.

Figma

Figma offers a Smart Selection feature that lets you select multiple elements, then arrange them by spacing them out consistently or easily organize them using drag-and-drop.

Adobe XD

Adobe XD has a Repeat Grid feature, shown in Figure 2, that lets you duplicate instances of a shape or object.

Tie: Figma and Adobe XD

It is difficult to project a winner here because Figma’s Smart Selection feature and XD’s Repeat Grid feature are both valuable features that are unique to these applications.

Animation

Both Figma and Adobe XD offer animation features.

Figma

In Figma, the Smart Animate feature lets you connect frames and animate the differences in their properties—for example, scale, position, opacity, rotation, solid fill, and gradient fill.

Adobe XD

In Adobe XD, the Auto-Animate feature lets you connect artboards, animating the differences in their properties, including border size, opacity, rounded corners, X/Y positioning, size by width and height, rotation, text size, character spacing, paragraph spacing, line spacing, and paths.

Winner: Adobe XD

Because the user can apply Auto-Animate to eleven properties rather than only six properties with Figma’s Smart Animate, Adobe XD emerges as the clear winner.

Resizing Elements

Figma’s Auto Layout feature and Adobe XD’s Responsive Resize feature let you easily resize elements.

Figma

Figma’s Auto Layout feature, shown in Figure 3, applies to horizontal and vertical layout. This feature lets you do the following:

• Create buttons that expand or compress when the user edits text.
• Apply automatic layout to existing components.
• Quickly build lists that adapt to adding new items.

To use Auto Layout, select the frame, then expand the Auto Layout section in the right pane to select vertical or horizontal layout.

Adobe XD

Adobe XD’s Responsive Resize feature, shown in Figure 4, lets you resize assets and objects while retaining their position and scale.

Winner: Figma

Figma’s Auto-Layout feature is really flexible. Adobe XD needs to improve its Responsive Resize feature to compete successfully in this area.

Components

Components are similar to masters that you can reuse in your designs as necessary. A header, footer, or even a button can be a component. Once a user has reused a master component multiple times, making any structural changes to that master would affect all other instances. However, you can break an instance of a design component from its parent component and, thus, override the inheritance of the parent component’s properties. You can also nest components in both Figma and Adobe XD.

Figma

In Figma, a dotted, blue, diamond symbol denotes a component, as shown in Figure 5. You can override the following properties in Figma:

• text—Properties include font, weight, size, line height, letter spacing, paragraph spacing, and indentation.
• color—Properties include fill, stroke, background color, and opacity.
• effect—Properties include drop shadow, inner shadow, and blur.

In Figma, there is no specific state function, but you can create a hover effect and toggle the effect on and off to emulate states.

Adobe XD

In Adobe XD, a green, diamond symbol denotes a component, as shown in Figure 6. You can add states to components to create more versions of buttons, toggle states, fields, and more. For example, you can create a button component, then create a hover state to show how the button should behave when the user triggers a hover event.

Winner: Adobe XD

Because Adobe XD lets you add states to components, it emerges as the winner here.

Fixing the Position of Objects

Many design solutions rely on fixed positioning, which both Figma and Adobe XD support in different ways.

Figma

In Figma, you can create fixed headers and footers in prototypes. To achieve this, select the appropriate constraints and click the Fix position when scrolling checkbox to select it, as shown in Figure 7.

Plus, on the Prototype tab in Figma, there is an excellent Overflow Behavior feature that lets you control users’ interactions with content that extends outside a frame’s dimensions. You can achieve advanced interactions using this feature, as follows:

• scrolling left or right to switch between the elements in a slider
• navigating between images, articles, or posts in libraries and galleries
• panning or scrolling to view an interactive map

You can apply Overflow Behavior only to frames, which allows scrolling any objects or layers that are nested within that frame.

Adobe XD

In Adobe XD, you can select an element whose position you want to be fixed during scrolling. Then, on the Design tab, click the Fix Position When Scrolling checkbox to select it, as shown in Figure 8.

On the Prototype tab, Adobe XD has a Preserve Scroll Position checkbox, as shown in Figure 9. This feature works well with artboards that have vertical scrolling.

Winner: Figma

Figma comes out on top again here because its Overflow Behavior feature offers horizontal scrolling within frames—thus, supporting scrolling from left to right in an image carousel.

Plugins and Integration

Both Figma and Adobe XD have plugins and integration features.

Figma

Figma allows integration with applications such as Principle, Zeplin, and Dribbble. Users can install plugins, as well as build private plugins for the use of teams or organization.

Adobe XD

Adobe XD offers many plugins. Users can also create private plugins, building them as .xdx files, then share them with their team.

Tie: Figma and Adobe XD

Previously, only Adobe XD offered plugins. However, in 2019, Figma introduced many plugins. So this round ends in a tie.

Compatibility with Other Design Tools

You can open Sketch files directly within Figma and edit them. In contrast, similar to Sketch, Adobe XD lets you open Photoshop and Illustrator files. You can also export an XD file to After Effects to add custom animations and micro-interactions, as necessary.

Winner: Adobe XD

This is a huge plus for Adobe XD, which emerges as the winner here because XD allows you to edit its files using other applications in the Creative Cloud Suite.

Exporting

Both of these vector design tools can export images as JPG, PDF, PNG, and SVG files. However, there are a few things that differentiate the export capabilities of these tools, as follows:

• Figma offers a Slice tool, which lets you select an area and export it as a JPG, PDF, PNG, or SVG file. Adobe XD does not offer this capability.
• Both Figma and Adobe XD can export images in different formats such as PNG, SVG, PDF, and JPG.

Table 1 provides a comparison of the pixel-density and quality settings for both of these tools.

Table 1—Pixel-density & quality settings in Figma and Adobe XD

Pixel Density		Quality Settings
Figma	Adobe XD	Figma	Adobe XD
PNG and JPG: 0.5x, 0.75x, 1x, 1.5x, 2x, 3x, and 4x	JPG: 1x or 2x. PNG: 1x, 2x, and 3x. Android: 75% ldpi, 100% mdpi, 150% hdpi, 200% xhdpi, 300% xxhdpi, and 400% xxxhdpi.	Offers no feature for setting image quality for a JPG export.	Offers a feature for setting image quality for a JPG export.

Winner: Adobe XD

Adobe XD wins this round because it includes quality settings for image exports.

Conclusion

By now, it must be clear what application I think is the winner of this intense battle. The undisputed winner is Figma. I would be quite keen to know how Figma will evolve in the future because Adobe XD is quickly playing catch-up, releasing one update after another.

Ultimately, it doesn’t really matter what software you use in creating your designs. A design tool can do nothing for you if your problem-solving skills are lacking. Even creating paper prototypes can be a handy way of creating design solutions that generate value. Therefore, use whatever tool you’re most comfortable with. Most importantly, your design solutions must be right for your users and create enduring impact.