Figma & Sketch: what’s the difference?

For a while I’ve been advocating for Figma as a design tool. We use both Figma and Sketch at Mono. In this post I want to explain how Figma is different from Sketch. Let’s talk about the pros and the cons.

+1 for Sketch: works offline

Sketch works offline, 100% of the time. This is awesome when you travel a lot.

With Figma, when your connection drops, you can keep working in your file, and when you regain a connection it will try to resync. So if you are still working alone in a file, this works, but can get dangerous when relying on “multiplayer” (i.e. the collaborative editing mode in Figma).

You can save .fig files, but this does not lead to being able to edit a file offline. In fact, it’s quite unclear what this does.

+1 for Sketch: a beautiful, native macOS interface

Sketch follows the rules for a native macOS UI. While Figma’s UI is certainly well done, I appreciate a native macOS look.

The Sketch UI also feels more responsive in general, probably partly due to only relying on local sources.

+1 for Sketch: collapse groups

In General, Sketch has better functionalities to work at scale, for instance the feature to collapse all groups in your layer list at once.

+1 for Figma: works on Windows and Linux

Figma works on Windows and Linux.

So if you’re like me, disappointed in Apple’s recent Macbook offerings and looking at alternatives, here’s a chance that your main design app can work on a Windows-based laptop or even on a Chromebook.

+1 for Sketch: numerical scale

The scale feature is a bit hidden in Figma (the shortcut is “K”). It only allows you to resize by dragging whereas Sketch allows you to scale layers precisely using numerical values.

+1 for Figma: free to start with

Figma is free to start with, making it an ideal tool to get people introduced to UI design without an upfront cost.

I don’t mind paying for software but there are plenty of situations (students, hackathons etc.) where it is just entirely practical that part of the app experience is free.

I’ve also found that clients with some design skills are much more likely to try it out and make it part of their workflow.

The past few months I’ve seen at least two clients start their own Figma accounts.

+1 for Figma: component overrides

If you make a slight change to a component, Figma treats it as an override. This allows you to

• Keep working in context (sometimes in Sketch it feels like I am only ever editing symbols outside of my main artboard)
• Limit the amount of components you need

Color, text content, font size, and a new layer within a component are treated as overrides. Layout and positioning of the layers within a component are treated as non-changeable.

I find that in general, the Figma workflow suits me better to build scalable component systems.

In Sketch, I often find myself working in another layer of abstraction instead of in the context of my design.

+1 for Sketch: Abstract integration

Sketch integrates with Abstract.

If you work in a large team and you have a big need for structured design review, I imagine an Abstract-based workflow will work better than the way things are handled in Figma.

Personally, I feel the combination of Sketch’s symbols handling and Abstract makes design a very technical endeavour and takes all the flow and creativity out of my work. It’s not for me, but I can imagine it could work very well in a larger organisation context.

+1 for Figma: nicerarrows!

This might sound like a niche thing, but good arrows are a staple of explaining flows in my UI designs. Arrows in Figma work better than in Sketch, with a dedicated shortcut, an easy way to set the weight, and much better looks.

+1 for Sketch: copy paste to different apps

Sketch is much better at putting artboards in your paste buffer. You can Alt+Drag to share a screenshot to other apps like Slack; you can ⌘+C an artboard to Keynote*.

In Figma, your only option is to do an export or take a screenshot, both of which are annoying.

*This doesn’t always work perfectly though.

+1 for Figma: multiplayer/collaborative editing

Being able to work on the same file at the same time in Figma is pretty awesome.

Working with Sketch, I would often have to ask designers in our team whether their Google Drive is in sync. Figma files are never out of sync.

+1 for Sketch: Fast loading & performance

Sketch is much better at handling large files than Figma. I am talking about files with hundreds of artboards here.

When files get larger in Figma, the loading times can be considerable.

+1 for Figma: vector network

Drawing icons in Figma is awesome. The way the vector engine handles paths, joining etc. is so much more intuitive than in other design apps.

I still like to go to Adobe Illustrator for complex vector work sometimes, but Figma is pretty great.

+1 for Figma: sharing and live embeds

Figma allows you to link to an artboard directly via a URL. It also allows you to link to prototypes.

You know that situation where you are e-mailing PNGs to a client and you notice a mistake right before you send them, and you have to re-export them again? Well, that just doesn’t exist anymore if you give your clients view access to the design file.

It is also possible to embed an artboard in a different document context, for example on Dropbox Paper. This allows you to create “live specifications”, where the latest design will be reflected in your spec(if you don’t delete your artboards)

+1 for Sketch: design privacy

Sometimes you’re just toying around with ideas, and you’re not ready to show it to the team/client/whoever you are working with. Because of Figma’s collaborative nature, sometimes it might feel like someone is spying on your design work.

I don’t mind it in general but some of my colleagues really hate the multiplayer cursors.

+1 for Sketch: plugin architecture

Sketch allow you to customize the application with various plugins.

If you need something specific, chances are big somebody else ran into the same problem and built a plugin for it. This can be a blessing and a curse.

Personally, I love plugins like Sketch Runner and RenameIt. I miss those functionalities in Figma.

Conclusions

I love the competition between Figma and Sketch to become the best design tool.

For me, Figma has been on the rise for quite a while, and it has become my go-to design tool.

But I also find that since Sketch has more uptake within our team, it often makes sense to work in Sketch to make it easy to collaborate.