Vako Shvili

Product and UI designers often face a difficult decision when it comes to which tool they’ll use: Figma or Sketch? Let’s finally settle the score of the Figma vs. Sketch debate. By the end of this article, we will have the clear winner and you will know which app is best for your purposes.

I’m a Web and UI Designer. When I first tried Sketch, I fell in love with it. Sketch was fast, lightweight, and easy to use. It was perfect for interface design. 

Complete Web Design: from Figma to Webflow to Freelancing

Last Updated October 2020

Bestseller
  • 199 lectures
  • All Levels
4.8 (2,636)

3 in 1 Course: Learn to design websites with Figma, build with Webflow, and make a living freelancing. | By Vako Shvili

Explore Course

Most UI designers felt the same way. Until Sketch appeared, we had to use Photoshop for interface design. Photoshop has its purposes, but it’s not made for UX and UI design. It’s made for photo manipulation. Hence the word “photo” in its name.

Soon enough, Sketch became the industry standard and stayed that way for many years.

Enter Figma, sometimes referred to as “Sketch on steroids”.

Why I had to decide between Sketch and Figma

When I first tried Figma, I didn’t see any major benefits, so I went back to Sketch.

But a few years later, when I started creating a web design course, I needed to choose an interface design tool to teach. Sketch was not the best choice because it’s only on Mac and you have to pay for a license. I needed something free and available for all machines.

This brings me to the most important difference between Figma vs. Sketch.

Difference #1: Platform availability

While Sketch is only available on macOS, Figma works on Mac and Windows and has a web app.

If you don’t own a Mac, this simple fact is enough for you to make the decision. 

Even for Mac-owning designers, this is still an important fact. When I’m working on a big UI project like a mobile app design, I work with a team. There are times when I need to give design files to another designer. If they have a PC, there’s no way for me to share my Sketch files.

Winner: Figma

Difference #2: Cost

Figma is free for individual designers but costs money for teams with more than two designers (editors). Then it gets more expensive than Sketch, starting from $12 per editor/month. But that’s for your employer to worry about.

Sketch is a flat $99 to download. 

Sketch plans
Sketch plans
Figma plans
Figma plans

Winner: Figma

Difference #3: Styles

I started using Figma for my course. I began noticing tiny but meaningful differences. 

The difference between styles in Figma vs. Sketch is what made me switch to Figma for my freelance work.

In Figma, you can create independent styles from Text, Color, Stroke, and Effects. You can apply these styles however you want to any layer. You could apply a text style and a color style, only a shadow, or everything together.

In Sketch, that’s not possible. You only have two types: Text and Layer Styles. Every property becomes part of that one style. For example, a pink rectangle with a drop shadow in the example below is a single layer style.

Layer style in Sketch
Layer style in Sketch

I can’t apply that pink color or shadow independently on any other element.

In Figma, the pink color and shadow styles are independent:

Color and shadow styles in Figma
Color and shadow styles in Figma

This small detail makes all the difference. I need to create a pink color or drop shadow style once and then use it across the entire project. It doesn’t matter if I apply it to text, rectangle, ellipse, group, frame, or anything else. Color is color and shadow is a shadow (not according to Sketch though).

I can later decide to change the pink color style to blue. And the change will affect every single layer with that style. All pink buttons, pink text, pink icons, and everything pink will become blue. A single-click paint job. Whoa!

You could achieve something similar in Sketch. But you will need to combine styles, nested symbols, and more. Figma’s approach is much more elegant.

Text Styles

There’s more. Figma handles text styles much better than Sketch. In Sketch you can’t override any of the properties of a particular text style.

For example, say we have a Big Headline text style: Roboto, bold, 45px, left-aligned, in black color.

Throughout the project, we will need the headline sometimes center-aligned, sometimes left-aligned, and sometimes blue instead of black.

Text style overrides in Sketch
Text style overrides in Sketch

In Sketch, we can make these overrides, but they are temporary. The moment we need to tweak something about the master style, like changing the font, all those overrides will disappear:

All overrides lost after updating Big Headline style.
All overrides lost after updating Big Headline style.

Not even the alignment stays. So, to make use of text styles in Sketch we can’t have one Big Headline text style. We need to have:

And so on for every color variation. And that’s just for one type of headline. We need the same for other headlines, subheads, paragraphs, links, and captions. This creates such a mess that often it’s better not to use styles at all.

In Figma, there’s only one Big Headline. Notice how all color and alignment properties persist as I update the master text style:

Text style updates in Figma
Text style updates in Figma

How many Big Headline text styles do we need in Figma? One. This discovery almost brought me to tears.

Winner: Figma

Difference #4: Live collaboration

The most discussed detail about Figma is its real-time collaboration feature.

Real-time collaboration demo. Source: Figma.com
Real-time collaboration demo. Source: Figma.com

Due to this feature, many have dubbed Figma “the Google Docs of digital design.” Here’s how it works:

This is a game-changer for large teams with many designers working on the same project.

Sketch is far from having this feature yet. They do have a cloud feature, but so far it’s more like Dropbox for file sharing.

Winner: Figma

Difference #5: Prototyping

From my experience, Figma’s prototyping is superior to Sketch. Here’s why:

Bouncing ball animation using Figma's Smart Animate
Bouncing ball animation using Figma’s Smart Animate

Where Figma prototyping fails

Figma’s prototyping is missing one crucial thing — linking between pages. For now, it doesn’t allow us to connect frames if they are on different pages.

In Sketch, this isn’t a problem. Why would you need this?

Often, I work on apps that have more than 300 screens. In Sketch, I organize these screens in pages. For example, I will have pages like these:

This way, if I need to make an update to the user’s avatar, I can go to the “User profile screens” page and easily locate the avatar.

But since Figma doesn’t allow prototype linking between pages, I need to have them all on the same page:

317 app screens on the same page in Figma
317 app screens on the same page in Figma

In Figma, I waste a lot of time looking for screens. For easier searching, I must take the time to organize screens in different groups.

If I know the name of the frame and I use a search plugin, I can easily locate it. But I can’t memorize what I’ve named 317 screens. I need to visually browse through what’s out there.

Also, when you have 300+ screens on the same canvas, you end up zooming and panning a lot to go between screens that are far from each other. But with pages, you can get to that screen with a single click.

I need this feature more than those fancy animation options. So for me, this one goes to Sketch.

Winner: Sketch

Difference #6: Plugins

There’s an ocean of great plugins to fill the gaps of missing Sketch features.

Figma falls short of Sketch when it comes to the number of available plugins. That’s because it’s a new tool and they launched plugin support in 2019.

But what Figma lacks in quantity it makes it up in quality:

Here’s how to find and install a Figma plugin:





Demo of Figma plugin installation

Figma needs a bit of time so that third-party developers can catch up and create more plugins. For now, let’s call it a draw.

Winner: Draw

Difference #7: Symbols and components

Symbols in Sketch are the same as Components in Figma. They work in a similar way, except for one major difference.

In Figma, you can override most properties of a Component. In Sketch, you can only override the text of a Symbol, unless you prepare the Symbol by nesting other Symbols and Layer Styles inside it. And still, that only limits you to the nested options.

Components in Figma
Components in Figma 

Above is a single button Component in Figma. The differences in colors are simple Fill overrides. I don’t need to have four different button Components or nest layer styles inside it. One Component can rule them all.

And if I want to standardize the button colors, I can pick the color from my universal Color Styles:

Color override using Color Styles
Color override using Color Styles

Winner: Figma

Difference #8: Dark mode

Dark mode doesn’t just look great. It’s necessary for accessibility and to prevent eyes from getting tired.  

The opposite is true as well. Working in dark mode during bright daylight is difficult. The visibility of the UI is very low and you end up squinting most of the time. 

That’s why having both the light and dark modes is ideal. You get optimal viewing any time of day.

Sketch Light & Dark Modes
Sketch Light & Dark Modes

Sketch has both modes. But Figma has only one, light mode. You could manually change the canvas color in Figma, but that’s about it. The UI stays white.

Winner: Sketch

Difference #9: Third-party resources

Kick-starting design projects is often easier if you’re using ready-made UI kits.

Example UI kits for Sketch
Example UI kits for Sketch

Sketch is a winner here. It’s been around longer and it has a larger market (for now), so there are plenty of paid and free kits to download.

You can import a Sketch file into Figma, but styles won’t convert and you’ll lose important features within the kit.

Winner: Sketch

Difference #10: User delights

I’m an Apple “fanboy.” What I love the most about Apple products are small but delightful details. For example, a genie effect when minimizing a window on macOS.

I’ve found many delightful details in Figma, too.

Disappearing group 

In Figma, if you delete all layers inside a group, the group disappears too.

The group disappears after deleting children
The group disappears after deleting children

It’s small, but this tells a bigger story about who’s behind the product. Everyone can get the basics right. But to make something delightful and awe-inspiring takes extra effort and dedication.

Copying properties

In Sketch, you can copy all properties from one element and paste it on any other element. It’s a handy feature. But you can’t copy only one property, like a background shadow.

In Figma, you can copy a single property. For example, I apply a shadow on a button, I want to use exactly the same shadow on other elements too. I can select that property in the properties panel, copy it, and then paste it on any other layer.

Copy-pasting a property in Figma. I'm using the standard Copy (CTRL+C) and Paste (CTRL+V) function.
Copy-pasting a property in Figma. I’m using the standard Copy (CTRL+C) and Paste (CTRL+V) function.

Shortcuts tutorial

There’s this little-known shortcuts tutorial bar in Figma. It shows all shortcuts nicely broken down in categories.

Shortcuts in Figma
Shortcuts in Figma

The shortcuts you’ve already used are highlighted in blue. This way you can tell all the shortcuts left to learn. This is what I call a delightful product.

Automatic frame numbering

When I’m working on an app with 300+ screens, I absolutely need to number them. When I ask my product manager which screen they’re talking about, they need to be able to say “#51” not “that booking screen that comes up before that final payment confirmation.”

In Sketch, I have to manually number frames, but Figma does this automatically.

Automatic frame numbering in Figma
Automatic frame numbering in Figma

There are more ways Figma delights, but I’ll let you discover those.

Winner: Figma

Conclusion

Let’s tally up the score.

There used to be even more differences between these two apps. But they are quick to catch up on any new feature the other one introduces.My bet is on Figma. I hope after reading this article, yours is, too. And if you want to learn design using Figma, this course might be for you. Spoiler alert: I’m the instructor.

Page Last Updated: September 2020

Top courses in Web Design

Landing Page Design & Conversion Rate Optimization 2018
Isaac Rudansky
4.7 (6,297)
Bestseller
Learn Website Designing [Beginner to Advance]
Ali Raza Sardar Ali, Ayesha khan
4.6 (25)
Highest Rated
UI & Web Design using Adobe Illustrator CC
Daniel Walter Scott, Instructor HQ
4.7 (2,441)
Highest Rated
Learn Photoshop, Web Design & Profitable Freelancing
Cristian Doru Barin
4.5 (5,634)
Bestseller
Master Web Design in Photoshop
Cristian Doru Barin
4.6 (2,140)
Adobe Photoshop CC - Web Design, Responsive Design & UI
Daniel Walter Scott, Instructor HQ
4.6 (658)

More Web Design Courses

Web Design students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy for Business.

Request a demo