Figma VS Sketch
design
Discussions on the topic of which design editor is better Figma or Sketch has been taking place for over 2 years now.
We’ve experienced working on both of them so I decided to summarize my thoughts on how Figma competes with Sketch and what unique features each one of them brings to the table. For this purpose, I’ll use a few criteria.
The criteria for my judgment include :
- compatibility with operating systems;
- functionality;
- performance;
- designer-to-developer handoff;
- collaboration;
- additional extensions;
- program progress;
- the cost of the program.

Let's dive in and see which experience is more delightful.

First of all, I have to say that Sketch was first released in 2010 whilst Figma in 2016. Therefore, no wonder that Sketch has been the primary design tool for a while. But in the last couple of years, a number of competitors started to seriously rival Sketch as the current tool #1. And Figma is among them.
Compatibility with operating systems
One of the biggest differences between the two tools is that Figma works in-browser, whereas Sketch is a desktop app only available for Apple computers. So what does it mean?
Sketch: If you or your team members use different operating systems on their PCs ( like Linux, Windows), one would need to use specific third-party tools as this editor was made exclusively for macOS.
Figma: Figma is the first browser-based designing app, that you can run in a browser or download as a separate app. All you need is Internet Access. Well, yes. It might be a pain point for someone who travels a lot. You can’t open Figma offline (only work offline with already opened projects and later auto-save it online). But as a company, we didn’t have any troubles on this matter as we work in office with consistent Internet access.
Functionality

Interfaces are similar, artboards and frames stand for the same. They both have a similar set of functionality, smart layout, components (or symbols), drawing tools, and editors. In fact, Figma had adopted certain features of Sketch as they wanted to make the transition process from Sketch to Figma as effortless as possible.

What I find a bit complicated in Sketch are symbols. If you have a symbol you can only modify the symbol through the overrides, but you cannot remove elements inside the components. For example, if you have a button with an icon, you have to create 2 symbols, with and without an icon.

Figma supports most Sketch formats, but Figma does not support EPS and PSD. Also, an interesting observation, when you have Figma file fig., there is not possible to open it from Finder on macOS as it doesn't recognize Figma as a supporting platform. The only solution is to open it directly from Figma.

The other thing that was driving me crazy is resizing frames in Figma. Resizing frames without scaling content requires you to hold Command while resizing. I think this is not intuitive (since there's no hint in UI) and there's no UI equivalent (like Sketch) for enabling/disabling per Frame.

Anyway both programs are really user-friendly and simple to use (for instance if compared with poorly adapted for User Experience and UI Development Photoshop or After Effects). Once learned shortcuts, life becomes a thousand times easier. At this point, both Sketch and Figma are almost equal.

Performance

From our personal experience, we didn’t notice a sufficient difference between the 2 platforms' performance. While working with a huge amount of artworks/frames, both programs perform somehow slower.

For example Figma, as a browser program, uses operational memory, and when you keep it open for a long time, one may notice sluggish performance. The solution may be reopening it again.

Plugins and third-party integration

Although sketch has a wide selection of plugins, great integration ecosystems, Figma does not graze the rear. All plugins that I use are available both in Sketch and Figma. However, some design systems, UI Kits (for instance, the IBM Design system), are only available for Sketch.

Sketch: All plugins have to be downloaded externally and added to an app.

Figma: Its an all-in-one platform, where you can download desired plugins, explore different community files while keeping everything on cloud.

While Sketch uses various third-parties like Zeplin, Angle, or InVision for additional features, Figma’s native toolset has enough functionality to make a good product without the extensions. Still, the latest updates in Figma enabled designers to use specific third-party tools as well.

Prototyping

Both Sketch and Figma were created for static design, and prototyping tools are pretty basic, great for showing user flow though.

Figma and Sketch make it super simple to create prototypes using transitions. The prototype tool is in its own tab in the Inspector. You set a Home screen, then connect to new screens using a string. Transition animations can be set between Instant, Dissolve, Move, Slide, and Push.

Additionally, Figma has a smart animate feature for Loading sequences, Parallax scrolling, Touch gestures e.g. Drag, Swipe, Long-Press, Sliders, Toggles, and Switches, Expanding content (Show more / Show Less). So it’s definitely a plus.

However, there are so many great third party programs for hi-fidelity prototyping like Flinto, Protopie, Principe, and After Effect after all, which I enjoy using, and they have integration with Figma and Sketch.

Collaboration

One area in which Figma really shines is teamwork. To my mind, one of the main reasons why specialists actively move to Figma lies in its built-in teamwork features. The way clients, designers, and developers work in a team influence the speed and quality of the project. Collaborative features in designing editors allow including clients, developers, content makers, project managers, and other stakeholders in the design process to make it more productive. It reminds me of Google Docs.

Sketch: Sketch has always been a desktop app. It works well for static design, but it doesn’t allow teams to edit files online without the “Sketch for Teams” extension which works only with macOS obviously. Understanding that teamwork and 24/7 availability of the platform is a top priority today, the Sketch founders released a promising beta version of an extension, that’s similar to the Figma collaboration capabilities, but definitely still is a far cry from Figma live collaboration.

Figma: Figma users can have unlimited access to the project and work in the same file simultaneously. Every team member, including clients, can easily review designs, leave comments for specialists in real-time, and communicate via Slack integrated into Figma. For us, the ultimate benefit.

Designer-to-developer handoff

Figma: Figma has built-in developer handoff features, which makes implementation and testing processes faster and more efficient. The coding mode allows developers to inspect design files and see code in CSS, Swift (iOS), and XM (Android).

So, any document in Figma can be shared with anyone. Most importantly, developers can come in and inspect design elements to get the color properties, sizes, and distances. They can select any asset and decide to export to PNG, SVG, or in code using Swift, Java, or CSS.

We had a few bugs on this point when font properties were not displayed accurately (when our developer did not have a specific font downloaded ( suffered font size, weight, and spacing). So be careful and download all missing fonts( even for resizing the borders). This code may serve as a reference point for them, considering the peculiarities of how a particular project must be done.

Sketch: sketch app doesn't have built-in inspection mode, but the solution like Zeplin or Avocode helped deliver Sketch specs to developers. In 2019, Sketch launched Sketch for Teams, which enables designer-to-developer handoff. Designers are now able to save documents in Sketch Cloud and share them with all stakeholders. Developing real-time collaboration is in progress.

The cost

Sketch pricing: a personal license costs $99 yearly, the “Sketch for Teams” license is additionally available for $9 a month ($99 per year).

Figma pricing: free for up to 2 editors in one file; a team plan for $12 a month per user (annual plan) or $45 per user (monthly plan) for an organization with multiple perks. But a free plan is absolutely enough for a team of 2 designers to work on the same project simultaneously. We use it and it’s totally great. To my mind, considering the improvements and growth rate, Figma will change its pricing policy in a near future.

Improvements

I pay a lot of attention to how fast a tool develops and keeps up with time. For this reason, I addressed blogs of Sketch and Figma, the place where the companies share about their releases and progress. No doubt Sketch is actively developing. During the last year, they added “Sketch for Teams”, and a bunch of smaller updates. which made it possible to catch up. The key phrase here is "to catch up". The thing is, Figma is developing much faster. Just a few days ago, Figma addressed a new feature “stretch”—an alignment option that would allow components in an Auto Layout frame to expand, filling the entire width or height of the container, no matter how it was resized. To my mind, lots of designers are still using Sketch due to the complicated integration process, as not all info is fully preserved in Figma when you import Sketch files. but it’s all just a matter of time unless Sketch offers something really sufficient. We all await.

Why choosing the right design tool is crucial?

It all comes down to choice. We create digital products from initial ideation till development and launch. This process is not linear and sometimes we have to go back and forth between tools and platforms hence the time is one of the crucial aspects of our work. We are convinced that the right solution increases productivity, influences team collaboration, and positively affects the successful product release. So the main question: which platform is better.

I use Figma, I understand its pros and cons and for me, it's the best and the fastest that a tool can get (so far), although my co-workers prefer Sketch.

To sum up, avoid falling into the comfort zone when you are too lazy to relearn. It’s not the sphere where you can learn something and be a professional. "Wake up, you only know the old patterns, and it’s not enough anymore. There were times where we moved from Photoshop to Sketch. But Sketch is really more convenient and faster. The concept that you need to constantly learn, read a lot of literature to move forward is not new. If you are the best today, but you are standing still, then tomorrow someone else will be the best.

Share
Table of contents
Compatibility with operating systemsFunctionalityPerformancePlugins and third-party integrationPrototypingCollaborationDesigner-to-developer handoffThe costImprovementsWhy choosing the right design tool is crucial?
Share