Why Figma is the best for designer-developer cooperation

There’s no doubt designers can achieve effective cooperation with developers with third party tools like Zeplin or Avocode; but, when we look at the out-of-box capabilities of the UI design tools, Figma offers the most features for the least amount of money.

UI design tools comparison

Figma

Sketch

Adobe XD

Affinity Designer

Photoshop / Illustrator

Platform

Mac
Windows
Linux

Mac

Mac
Windows 10

Mac
Windows

Mac
Windows

Price for Designer

Free or $12 / mo

$99 / yr

Free (Beta)

$50

$30 / mo

Price for Developer

Free

$99 / yr

Free (Beta)

$50

$30 / mo

Sharing

Design

Preview

Preview

No

Preview

Prototyping

Integrated

3rd party

Integrated

No

3rd party

Comments

Pinned on design

On preview

Pinned on preview

No

On preview

Code Export

CSS / iOS / Android

CSS

No

No

CSS

Assets Export

SVG, PNG, JPG / various sizes

SVG, PNG, JPG, WebP / various sizes

SVG, PNG / various sizes

PNG, SVG, JPG, etc. / various sizes

PNG, SVG, JPG, etc. / various sizes

Let’s take a look on these features in more detail.

Platform

Figma is a web based application, so it works on various platforms, which is a huge competitive advantage. They have a bigger potential customer base and can focus on adding new features.

Contrary to that, Adobe XD has to develop two applications, one for Mac and another one for Windows 10. It’s not exactly a fast process – it took one year for the Windows version to catch up with the Mac version.

Sketch is and will remain Mac only. This will eventually contribute to Sketch losing its lead position among UI design tools.

The more accessible software is – multi platform, open source, free – the more vital it is.

We cannot expect professional design tools be free or open source, but limiting them to one platform limits freedom of their potential users; imagine a Mac only web browser – it would hardly become the most popular browser.

This applies to niche products as well. It seems that nothing can threaten Sketch’s position, but we could’ve said the same thing about Photoshop. Sketch has a three year head start in gaining market shares (since the v3 release in 2014); however, the real competition of the UI design tools has just begun in 2017.

Pricing

Developers usually don’t need the full power of a design tool. Yet, they often pay the full price just to inspect the designs and export assets.

This is the case for Sketch, Affinity Designer, Photoshop, and Illustrator. Photoshop and Illustrator are the most expensive, so it’s good that better and cheaper alternatives exist. You can buy Affinity Designer and Sketch for a one-time fee. However, in the case of Sketch, developers will need to renew the license each year to keep up with the designers’ version.

Adobe XD is still in beta, so it’s free. Once it’s a stable release, we can expect it to become a part of the Creative Cloud. It will be interesting to see if it gets some special offer as a standalone app. At $30 / month (as Photoshop or Illustrator), it will not be that attractive as other design tools.

Figma has the best pricing model – although professional designers will most likely need a paid plan, it’s free for individuals.

Sharing

Sharing designs from inside the tool simplifies the delivering of designs for review and coding.

Since Sketch, Adobe XD, Photoshop, and Illustrator save source files locally, they just sharedesign previews in their cloud service:

To share source files, a designer needs to use services like Dropbox or use a third party service like Zeplin or Avocode, which processes the source files and allows for their further inspection.

Figma is a web based service, so designers can share an editable design with others. In addition, designers can also handoff files to developers in a view-only mode. In this mode, a developer can inspect designs and export code and assets without accidentally editing the file.

This is by far the best workflow among the current UI design tools, especially when combined with prototyping and commenting.

Prototyping

Prototyping helps designers display flow and interactions in their website or app. It can replace site maps and extensive documentation. If it’s integrated directly in the tool, it can also reduce the need of third party tools.

From the reviewed tools, Figma and Adobe XD both have prototyping built-in, but you need to use tools like InVision with the other design tools.

Code Export

Code export is a feature that was pioneered by the CSS Hat Photoshop plugin. Design tools have gradually adopted this feature.

While Figma, Sketch, Photoshop, and Illustrator allow the copying of CSS from the elements, the implementation is pretty basic in comparison to CSS Hat or its successor, Avocode. In addition to CSS export, in Figma you can also export iOS and Android code.

Unfortunately, Adobe XDis missing this feature and it looks like it’s not even under consideration. Similarly, Affinity Designer lacks this feature as well, this is probably the result of its orientation as a multi-purpose illustration tool.

Asset Export

When it comes to asset export, the all of the reviewed tools are approximately equal in their capabilities; allow developers to export assets in common image format and in various sizes (1x, 2x, 3x, etc.)