Figma vs Sketch: which one should you pick?

Figma and Sketch are collaborative design tools that allow you to create things for the web. These can range anywhere from marketing graphics to complex, multi-step checkout flows.

Both are popular with designers and offer an alternative to more traditional tools like Adobe XD. They’re both slick, easy to use and make collaborating super seamless.

But what exactly are the differences between them? On the surface, they seem like pretty similar tools. They’ve become increasingly popular with designers who work for small brands (like me), and many other tools integrate with them (like Dash).

Since I’ve worked with both during my career, I think it’s about time we hashed it out. 🥊

What can you use Figma and/or Sketch for?

There are several reasons you may use Sketch or Figma. As the UI designer for Dash, I mainly use them for two things:

Creating marketing graphics - At Dash, I’m often asked to create marketing graphics for our website. Let’s say marketing need to add a new section to our site about how you can use Dash to share files easily. They’d need a supporting graphic to help communicate that message. That could be a graphic showing a particular scenario in the Dash app or some simplified UI for a specific feature.

An example of simplified UI that features on our website

Designing and prototyping new product features - Over time, I’ve built up a library of design components that feature in Dash. These are things like buttons, search boxes and form fields. When I’m designing a new feature I can use these to mock up what it would look like. This gives our developers something to work from when they build it. The team (and sometimes customers) can then poke and prod to see if it fits the bill and give feedback.

Here's a peek at what prototyping looks like in Figma 

What are the key differences between Figma and Sketch?

One of the key differences between Figma and Sketch is where they’re hosted.

Sketch is a desktop-only app and is exclusive to Mac. Figma, however, can be used directly in your browser. There’s also an option to download Figma on iOS and Windows. Does this instantly give Figma the upper hand? Maybe.

But Sketch’s exclusivity means it’s totally optimised for your Apple computer. 🍏 We’ll dig into that some more later.

For now, let’s take a look at how much these tools cost.

Figma vs Sketch: Price

Both Figma and Sketch are billed on an editor-to-editor basis. Basically, the more users you have, the more you pay:

Figma

• Starter: Free
• Professional: $12/£10 per editor per month (billed annually) or $15/£12.50 per editor month-to-month
• Organisation: $45/£38 per month (billed annually only)

Note: these prices are for the design and prototyping package. There’s also Figma for whiteboarding, but that has an entirely different use case.

Sketch

• Standard - $99/£83 per editor per month (billed annually) or $9/£8 per editor month-to-month
• Business - minimum of 25 editors (you’ll need to get in touch to get a price)

Note: Sketch offers a 30-day free trial, no credit card required.

Figma vs Sketch: Features

There are several features that Sketch and Figma share. For example, you can collaborate in real-time on both platforms. This means two or more users can work on the same project at one time. You can also control access (a bit like Google Docs) and share prototype links.

Where do they differ? As I mentioned, Sketch is solely on iOS. That means it’s optimised for Mac and offers features that Figma can’t. These include fast performance on Apple silicon, native font rendering and P3 colour profiles. What’s more, Sketch gives you a full offline workflow — handy if you have wifi problems.

Figma, on the other hand, is cloud-based which means you’ll get real-time updates and you can use it on any computer, including those that aren’t Mac.

Want a quick breakdown of features? Take a look below. 👇

Feature 

Figma 

Sketch 

Prototyping (all in one app)

✅

✅

Share prototypes 

✅

Share via URL (non-editable)

✅

Invite users for free 

Autolayout 

✅

If you’ve written CSS before then you should pick this up easily as its similar to FlexBox

😬

Known as Smart Layout: Some configuration required 

Plugins and widgets 

✅

😬

Most plug-ins are created by third-party developers which need to be purchased. (There are some free Sketch plugins too). 

Components 

✅

Includes component properties and variants. This lets you configure the components when you reuse them. For example, you might want to toggle the visibility of an icon or display a text field in a focused state. You eventually build up a library of configurable components which you can reuse and drop into future designs. 

✅

Permissions 

✅

✅

Developer handoff 

✅

✅

Add comments and feedback on work 

✅

✅

Mobile app 

✅

😬

(iPhone only)

Full offline workflow 

😬

✅

Community 

✅

Get inspiration and use designer templates 

✅

Event meet-ups and webinars 

Figma vs Sketch: Plugins and integrations

When it comes to integrations, both Sketch and Figma have loads to choose from.
Figma integrates with lots of design tools as well as plugins to help productivity and collaboration including Slack, Notion and Trello.

Sketch is focused on plugins that aid design and development including Stark, Chart and Overflow.

Both integrate with our very own digital asset management (DAM) tool, Dash. This means you can drop assets directly into Sketch or Figma via the CI HUB connector. And anything you design can be uploaded straight back to Dash. Not only does this save time on downloading/uploading, but it means your marketing teams will have access to your finished graphics (and they don’t need to come to you every time)!

Figma vs Sketch: Usability

If ease of use is a big factor for you, then you’re in luck. Both Figma and Sketch are pretty easy to use. The only thing to bare in mind is that they both have a bit of a learning curve to get up to speed. Figma can get more advanced if you want it to. But you don’t need to touch any of the advanced functionality if you don’t need to — you’ll still make good use of the system regardless.

The good news is that both platforms have great help articles and videos for you to learn from. 🤓

What’s the verdict?

After learning the differences between Figma and Sketch, which one should you use?

For me personally, Figma is the winner. 🥇I love the autolayout feature and the Figma community really helps when I’m in need of a little inspiration.

But that’s not to say Sketch isn’t the one for you. Aside from being a fantastic tool for UI and UX designers, this platform really shook up what a web design tool could be. It’s the original tool that many web designers cut their teeth on and is well-loved in the industry.