Get in touch

Let us know your requirements and we'll get back to you as soon as possible.
Drop files here or click to upload

We care about your privacy and automatically agree to the following NDA. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Submit

Thank you, !

Thank you very much for submitting your inquiry to Xfive! We'll be in touch with you soon.
Ingrid Getzan Van Cafe
Their designs are exceptional and their communication is great. They also do things in a timely manner, which is amazing.
Home Blog Why Figma Is the Best for Designer-Developer Cooperation

Why Figma Is the Best for Designer-Developer Cooperation

Whatever UI design tool designers prefer, certain features make cooperation with developers easier.

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.

Fortunately, Sketch offers discounts for multiple licenses. Affinity Designer offers discounts too, but only starting from 10 licenses.

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 share design 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.

Comments

In addition to prototyping, comments allow designers to further explain design and user interactions. Ideally, you could pin comments anywhere on the design.

Figma shines here again because it has pinned comments, and you can add comments to design directly by using the Comment Tool inside the app.

Adobe XD also uses pinned comments, but only on preview shared online, not directly in the tool.

Sketch allows you to add comments in files shared in Sketch Cloud, but you cannot pin comments on the design.

Photoshop and Illustrator implement commenting on Creative Cloud previews.

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 XD is 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.)

Xfive designer-developer cooperation services

If you are looking for a reliable and quality development partner who can bring your designs to life, we have all modern UI design tools covered:

About the author

Lubos Kmetko

Lubos Kmetko LinkedIn

Lubos Kmetko started to work for Xfive as a front-end developer in 2006. He currently helps with business operations and writes for the Xfive blog.

More from Lubos
More from Lubos

Comments (8)

Write a comment

Carlos Souza

Interesting! Never heard about Figma before, but I'll take a look :)

At Coopers we're still using Sketch with Measure plugin to export a prototype and improve development workflow.

Sep 21, 2017

Lubos Kmetko

@carlos thanks! Figma is definitely worth to try :)

Btw. they've just released a big update to the Team library which makes cooperation inside the teams even easier - https://blog.figma.com/team-library-1-0-d1427092323a

Sep 22, 2017

jsdesign

I switched to Figma about three months ago and I absoluetly love the tool. It does everything I need and more, and it took less than a week before I moved all my webdesign and UI projects to figma. For me the platform agnostic web approach is perfect: I'm working mobile with a MacBook Pro and use a PC workstation at my homeoffice. Sketch can't do this and XD isn't ready for production. Also the functionality and approach of Figma is awesome; you can do so much with it.

Oct 10, 2017

Lubos Kmetko

@jsdesign great to hear more people are moving to Figma!

Oct 10, 2017

Stephany

Hey Lubos, Great useful post. We are coffee roasters, currently working with a web design agency in Sunshine Coast to build our new brand and to promote it in online. Here I got know about Figma, and sure will use Figma in our future designs. Thanks for sharing.

Jan 23, 2018

Wayne Stewart

Figma is great. As a long time user of photoshop, fireworks and Illustrator. Figma has pretty much replaced the all when I'm building out interfaces. I moved all projects to Figma and have not looked back.

Mar 16, 2018

Troy

Your comment about "free and open source" is all wrong. SaaS solutions are the most locked down, walled gardens ever invented.

1) Can't get access if you not connected... is a 95% available solution acceptable?
2) Can't open files 10 years later if you a) don't pay OR b) the company is gone.
3) You don't own your data, and have limited way in and out of the application,
4) workflow, automation, copy/paste are are very limited in a browser... which was designed to restrict those things.
5) Interoperability is limited. Extensive OS Frameworks like Cocoa and .Net not only make developers WAY more productive than the lightweight web frameworks like React and Angular, they also make all the applications built on them highly interoperable. The SaaS space is like Window 3.1, and there is end in site to the wild west reinvention of infrastructure

All in all, buying a Mac to run sketch or any other native software is a bargain.

Apr 11, 2018

Geoffrey Barnes

Hey Lubos,

Thanks for putting together this post on why Figma is the best for Designer-Developer Cooperation. It is a great read. I particularly find your thoughts about Code Export interesting.
Keep up these insightful posts.

Cheers!

Apr 11, 2018

Would you like to add something?

All fields are required. Your email address will not be published.

Submit

Related blog posts