Figma Vs. Sketch

Author note: As with any software, this review is done on versions available on the original publish date; both have had updates and I will try to keep these product comparisons and reviews updated as well.

Updated: 07/16/18

Since most of the UX designers in my previous job used Sketch and few had even tried Figma , I thought I would do a head-to-head contest based on my last 18 months using Figma as my primary design tool.

At a previous company I promoted Sketch over Illustrator, and found similar resistance to the “new thing”. My goal as a design tool aficionado is to find the best tool for whatever job needs doing.

I should preface this comparison with a few comments:

  • The reason some people don’t see the advantage of Figma over Sketch is simply because they don’t closely collaborate on specific files with other team members. This is not a criticism — they work on a single Sketch file and only share it as a sync or export to Invision or a folder. Since they can’t work on a file together (like you can in Google Docs or Figma), they don’t.
  • You have to use Figma in a team setting to truly see how fantastic it is to work together on project files. If you find Google Docs collaboration is “creepy” and think you work better alone (which you should not in UX today), then you are not embracing the future and the nature of design systems principals. It is all about the collaboration of cross-disciplinary teams.
  • The other reason is that many of us don’t use symbols or components in our work; we just duplicate elements as needed and create another page without using symbol technology to update elements. Even with my company’s pattern library tear-sheets, you have to deliberately create symbols to take advantage of this in Sketch. If you are not using symbols in either tool, you are not using the tool to it’s best ability.

Features Head to Head

Cost

Winner — Figma

Note that this is based on being able to edit or comment on a design file on first use; with Sketch you have to install a licensed copy.

  • Figma is free for any number of people, until you use team projects, and then it is $12 a month per editor.
  • Anyone can open a Figma file without installing an app; they can also review and distribute comments — for free.

Symbols and Libraries

Winner — Figma

  • Sketch uses a drop-down menu to access symbols, Figma uses a dedicated panel so they are easily available and better organized.

Update: Just after this was published, Sketch released a more robust team library feature that allows you to use symbols across files but they still use a hierarchical organization method from the toolbar I find maddening.

Update: Figma also made changes to their team library and it now displays as a modeless dialog (meaning you don’t have to close it) instead of as a tab in the left pane.

  • Sketch adds local symbols to an additional page in the .sketch file (or optionally on the same page), whereas Figma has a dedicated panel of same page “components” (as Figma calls symbols). Figma doesn’t create a instance of the symbol either, which I find cumbersome in Sketch, especially since if you are creating a library with loads of symbols.
  • Sketch only recently provided the capability to use team libraries and cross-file symbol updating, whereas Figma has been doing so near inception.
  • You can also swap shared components across files, meaning nested components will maintain their state as an instance so you can swap the nested instance for others.

Update: As mentioned, Sketch now does this, but their approach is to have overrides in a long list of drop-downs in the properties panel, whereas Figma lets you do overrides in place, which I find much easier and more intuitive.

Update: Shared Styles

Winner: Figma

  • Both apps now support styles in the team libraries so you can change styles across files, but Figma’s implementation is more granular and gives you better control. For example, I can specify styles for a particular fill, stroke, effect, text style, even layout settings, and override them without having to hunt for a particular named override in the properties panel.

Drawing Tools

It’s a Draw

  • I would argue that there are more glitches in Sketch drawing tools, but essentially the tool set works the same. Sketch has more tools, but they are not essential and add complexity to the overall app.
  • The snap points, layouts, and guidelines in Figma are much easier to use and understand. What it lacks in features it gains in well nuanced tools with fewer bugs. Try out their bezier line tool compared to Sketch.
  • I think the guides on both products could use improvement; we should be able to group them, select and delete them (instead of dragging them off canvas), even save them. And they do the opposite when creating guides, Figma guides dragged from the x ruler create a horizontal guide, while Sketch creates a vertical guide when you click on the x ruler. This is one of those features that make sense either way you look at it for some reason.

Speed and Performance

Winner — Figma

  • Hands down, Figma is much faster when editing and viewing of files. Sketch files may load faster after the initial launch of Sketch, but I’d rather have fast zooming, panning, and tool execution after the file is loaded.

Update: Sketch 5.1 has been released and boasts better performance and it does seem snappier during overall interactions. However I don’t have 20 plugins loaded that may impact it.

File System

Winner — Figma

  • Figma is platform agnostic since it runs in a browser so you can run it on any machine with a browser.
  • Figma files are available to anyone. Here’s a link to a demo file that displays one Figma frame showing the potential reduction in process steps when you use the tool as part of the UX process.
  • There is also a Figma desktop app for those that prefer a local app over a browser. This is available for Mac and Windows.

Collaboration

Winner — Figma

  • As a browser based app, Figma allows full real-time collaboration on projects and files. Selecting anyone’s avatar takes you to their current view.
  • There is a very important aspect to using live collaboration in a design file that I’ve written about in Medium — avoiding design drift.
  • Developers are always up to date and can query a Figma file (without separate plugins or tools) to get attributes of objects for their work.

Reviewing

Winner — Figma

  • Since the files are viewed live, any reviews can be done by any number of people, navigating to each other’s views by clicking on their avatar in the Figma header, especially powerful during remote work.
  • Sketch is file based, and therefore has no way to share your work unless you rely on other tools to sync and/or do presentations.
  • In Figma, you can just press the presentation button in the toolbar to start a live presentation and navigate between frames (artboards).

Commenting

Winner — Figma

  • Figma has built in commenting that is synchronized with a Slack channel per project. Any comments left in the dedicated comment thread panel in a Figma file show up in the Slack channel for full team review and response.
  • Sketch does not have a commenting system and relies on exporting or syncing to other tools or plugins.

Importing/Exporting

It’s a Draw

  • Both tools can import/export bitmaps and SVG, and both do a similar job. However you can drop a .sketch file directly into Figma and have full parity, you cannot import Figma files into Sketch except as SVG which have the typical degradations.
  • One of the main reasons I switched to Figma was being able to drop my existing Sketch files into Figma and just keep working. I never looked back — didn’t need to.

Update: Figma recently improved their Sketch import capability.

Sharing

Winner — Figma

  • You can share any Figma file and set permissions in one step, and you can have the share view be based on file, page or artboard (frame).
  • In Sketch you can use their upload to cloud feature but it requires manually updating every time a change is made. Or you can use syncing tools that are not real time and still suffer from sync lag.

File Embedding

Winner — Figma

  • Sketch does not support live file embedding; with Figma you can use an iFrame and load a real time updatable Figma file. I have embedded our mockups into Confluence for example, using the “HTML insert” macro in Confluence
  • Your PO’s and developers never have to ask “is this the latest version”? It always is — you can even put the Confluence page view next to the Figma file view and watch changes to the Figma file update in Confluence in real time. Just awesome.

Updating and Help Access

Winner — Figma

  • Figma is a browser based app that is always up to date every time you launch it. You do not have to wait for a full app update.
  • Figma also uses Intercom style help that has become commonplace on web apps; I find this incredibly useful for quick questions and release note access.
  • Sketch requires updates that in can frequently caused plugin failure. It was one of the main reasons I became so frustrated with Bohemian Coding; they have created a platform but don’t have a very solid system of maintenance for the third party vendors.

Update: Sketch has improved the updating process recently and now shows a tiny toaster (come on guys, I wouldn’t be offended if it was larger, I barely notice it) to alert of updated plugins.

Plugins

Winner — Sketch

  • Figma doesn’t support plugins, except they do work with Slack as mentioned previously, and output to Zeplin for redline work.

Update: Figma now has an open API that promises to spawn a community of Figma add-on developers. My main concern is how this is handled — as mentioned Sketch was breaking plugins constantly when they started offering the feature.

  • Sketch has a multitude of plugins for all kinds of functionality, and with the recent addition of live plugin updating, they are less likely to break with every new app update.

Design System Support

Winner — TBD

  • The biggest problem most design tools have now is they have no way to become the “living” front-end to a design system. Changes made to a master design file should be automatically updating a design pattern library (like our VDL), thereby promoting changes directly to staging build.

Update: Google recently provided the Material Design plugin for Sketch which is very well done.

  • There is a breakneck race to see who will win in this arena; I surmise that Figma has an edge because they are a browser based platform, and have even proposed a possible solution to them some months ago.

In Conclusion

As my colleagues know, I have a fanatical bent toward Figma, the same I had when Sketch arrived on the scene and everyone was using Adobe products. But if you give Figma a try in a real work environment and keep an open mind, I do think you’ll come to the same conclusion.

Please note that I still think Sketch is a great tool, and was a avid user for 3 years; I just think Figma’s approach and feature set wins this head to head.

Thanks for reading!