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: 06/29/19
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 system 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 its 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 files and prototypes and add comments — for free.
Symbols and Libraries
Winner — Figma
- Sketch uses a drop-down menu to access symbols, making it harder to select design elements. The do support design libraries in a dialog to let you open up your design system files for management.
- Figma uses a dedicated dialog so they are easily available and somewhat better organized.
06/29/19: There are several design system creation tools that work with both Sketch and Figma now. Check out Abstract and Zeroheight for examples. Both companies are pushing to make their tools work as a part of your design system, I still contend that Figma does it better because of the real-time nature of the app. Bohemian Coding is working on Sketch for Teams, which apparently lets you collaborate on a file at the same time. We’ll have to wait and see if it is just a hack to catch up to Figma. Sketch for Teams also adds automatic versioning, something Figma has had and improved for a couple years.
- Sketch adds local symbols to an additional page in the .sketch file (or optionally on the same page), whereas Figma has a dedicated dialog of same page “components” (as Figma calls symbols). Figma doesn’t create an 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.
- 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.
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
Winner: 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.
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 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 Sketch Cloud or other tools to sync and/or do presentations.
- In Figma, you can just press a “Present” arrow in the toolbar to start a live presentation and navigate between frames.
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
Winner: Figma
06/29/19: This was a draw until this update, Figma has done such a great job with the Sketch import and export features, the take the prize. And you can’t take a Figma file and import it into Sketch.
- 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. And Figma has continued to improve the Sketch import feature.
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 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 and reinstall.
- Figma also uses Intercom help that has become commonplace on web apps; I find this incredibly useful for quick questions and release note access. And release notes are a click away from their ? menu at the bottom right of the app.
- 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. 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 (for now)
06/29/19: Figma will soon support plugins, and you can output to Zeplin for redline work.
- 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 — Draw
- 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, thereby promoting changes directly to a staged build.
- Google has 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 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 an avid user for 3 years; I just think Figma’s approach and feature set wins this head to head.
Thanks for reading!
