Sketch vs Figma vs XD: which to choose in 2022?

The search for the perfect set of tools is a perpetual one. As web developers this hunt is not a new; we are forever exploring the flavour of the month framework or library and evolving our workflows to suit. Similarly but at a refreshingly slower pace, our design workflow is evolving as well. As our design team in Arnhem grows, so do the preferences and voices for each side of the choices we make become.

Gone are the days of Photoshop for web design, although I miss them in a little bit, it was a simpler time. I was even a huge fan of Macromedia’s Fireworks and it’s vector based approach, a first for the industry, and possible precursor to today’s awesome set of software we can choose from.

Nowadays the demands are far greater with a need to support a wide array of devices across platforms and unity throughout a product’s design. Of the tools on offer we see Figma, Sketch and XD as the holy trinity of modern design UI design, each offering a similar take on the same problem. This conversation has been covered in great detail over the years (smashingmagazine.com) so I won’t try and analyse them in detail, instead look at the 3 from a small studio’s perspective.

Sketch vs Figma vs XD – Battle of the titans!

Organisation, Speed & Simplicity – Winner: Figma

Our primary work at Instance is the design and development of websites. The effective transfer of assets from designers to developers can be a bottleneck that we wanted to eliminate. Our developers must be able to quickly pick up a design file, extract the measurements, UI components, style guide and interactions without friction. We found Figma, in its use of Pages, Frames and Components offers the most simple and intuitive set up for rapidly breaking a design down for development. Oftentimes XD becomes confusing and groupings overly complex, auto switching of layers and artboards causing struggles and frustration. Sketch is equally obvious and easy to use, however in our experience it’s symbols are inferior to Figma’s components.

Performance & Pricing – Winner: Sketch & Figma

Figma and Sketch both perform fantastically, even on our older computers (2013) in the office. XD on the other hand is hamstrung by Adobe’s Creative Cloud which is both slow, hard to keep updated, and expensive. The pricing for the other two options is very competitive and very suited for a small team such as ours.

Collaboration is key – Winner: Figma

Whether its collaboration between members within our team or externally from one of our design partners, Figma is the clear winner. The simple fact that the full Figma software is accessible from the browser and free to view/comment, blows the other two out of the water. XD attempts to fill the gap with prototype sharing but falls short consistently. Alternatively Sketch, and it’s restriction to Apple devices is a huge impediment for effective collaboration. This reason alone is enough for a lot of studios to ditch Sketch for one of the others.

Updates & Community Feedback: Figma

A good indicator of how well a software is kept up to date is the features request forums online. XD forums have requests dating back 2+ years with updates every week from others re-requesting the feature. Instead of solving these issues, XD is releasing brand new features week in and week out, many of which are unnecessary such as Augmented Reality. The same can be said for Sketch, and when compared to Figma it’s a non-competition. Figma continues to improve while the others lag behind.

Winner: Figma

And it’s the winner by a huge margin. For us, Figma’s collaborative tooling, update track, performance and competitive pricing make leave the other options in the dust. We considered Sketch the king and used it successfully for years, and part of me wishes it makes a comeback at some point. But for now and in 2021, the king is dead, long live the king.