An Interaction Designer’s Guide to Sketch, Adobe XD and Figma
Sketch — Avoid if prototyping is an important part of your workflow
Pros: Symbols are powerful and can be used in creative ways
Cons: Prototyping is extremely basic and hasn’t improved much in a long time.
Adobe XD — Good all-rounder, but always seems to be missing a critical feature
Pros: Familiar for long time Adobe users. Great prototyping. States!
Cons: Always seems to lack a critical feature when I need it most
Figma—The best balance between design and prototyping
Pros: Design execution basics with prototyping that gets better all the time
Cons: I wish components worked even half as well as Sketch’s
As a long time designer, I understand that my primary tools are my creativity, curiosity and experience, but it’s also great to find software tools that help me execute my vision.
In the mid 2000s, my main tool for digital / interaction design was Photoshop, and while it did a good enough job at the time (glossy buttons!), it left a lot to be desired — particularly in terms of usability. Adobe Fireworks tried to address some of those gaps as well as bring in some critical features (symbols), but I was never that convinced, and never used Fireworks for actual design work.
Today however, we are spoilt for choice, yet finding the right tool has been a challenge for me over the last year. To that end I have frequently looked at posts or reviews that compare the most common interaction design tools — specifically Sketch, Adobe XD and Figma — but have found most of the reviews too light touch or high level to really help me know where to commit.
As a result I’ve bounced between these three a lot over the last year, and have a pretty good idea of what works for me, and I think, many other interaction designers.
One of the earliest successful innovators in the interaction design space (almost a decade old!), Sketch got so much right early on which helped drive its adoption. However, I believe that it has lost its way in terms of what many of us considered its primary focus — to design interactive products — and is instead moving towards becoming an amazing but agnostic design and layout tool.
The reason for this is simple: terrible prototyping. While everyone else has continued to innovate, Sketch has remained stuck with the most basic of prototyping for what feels like years. Don’t believe me?
Version 67.2 7 July 2020 — Fixed a prototyping bug
Version 66 19 May 2020 — Renamed the Prototyping Menu to “Prototype”
Version 65 28 April 2020 — Introduced “Maintain scroll position after click”
Version 53 5 February 2019 — “Remember scroll position of previous screen when going back”
And so on… Given the importance of prototyping to the digital product design workflow, this is either an egregious oversight, or evidence that Sketch is not focusing on digital product design, but rather layout design more broadly.
And that’s ok, because as bad as Sketch’s prototyping is, its symbol workflow is truly transformative.
This is not an exaggeration; Sketch’s symbol system is so amazing, so powerful, so creative, that it has fundamentally changed how I design
The how and why will be explained in another post, but there is no denying that Sketch Symbols are a powerful feature and much better than XD and Figma.
XD has always baffled me — I love how familiar it’s always felt, and being a long time Adobe user I was primed to become an advocate. At the same time, I’ve always felt that its feature implementation was really sporadic. For example, typography tools in XD were extremely basic at first.
That might make sense for a startup, but for a company with a typographical pedigree like Adobe, it was confusing. Layer modes was another feature that took ages to implement. Layer modes. One of the most basic features of photoshop since forever.
I still run into these small but incredibly annoying omissions from time to time, and have started several projects in XD only to give up and start again in Sketch or Figma.
The prototyping has always been, and still is great, even if it has fallen behind Figma now. Intuitive, and with the introduction of Auto-Animate, very powerful. Best of all was the introduction of States. Such a brilliant implementation of a basic but important need. I love it.
However, In spite of how much I like designing in XD, and how good its prototyping is, it just never seems to deliver exactly what I want. Not a deal breaker, but a frustration I can do without.
To be honest I avoided Figma as long as I could. Bouncing between Sketch and XD was enough trouble, and there is something about designing in the browser that I just never liked.
I still feel that that designing in Figma is less enjoyable than designing in Sketch or XD (possibly because even the desktop version feels a lot like I’m designing in a browser), but Figma is now my go to tool.
There is so much to like about Figma — it’s powerful (can do all the design stuff), incorporates a mental model that mirrors front end development to some degree (frames = divs), and the prototyping is fantastic and just keeps getting better.
Figma truly feels like a piece of software designed to create interactive products and I think a lot of people agree. It’s what convinced me to try and I’m very glad that I did.
I’m still getting used to it, and there are some improvements I would like to see. After being able to intuitively understand Sketch’s symbol system, Figma’s components are clunky and sometimes confusing in comparison. Why can’t I create a new master component in an existing master component? This is easy to do in Sketch and one of the reasons it is so powerful.
Given the focus of past updates, I’m confident that this is something that will only improve, and Figma seems to have found the sweet spot between implementing new features while improving existing ones based on key user needs.