It’s time for a battle between two UI heavyweights: Figma vs Sketch. In this article, we’re going to compare both tools. Rather than focusing too much on features that support an individual’s work, we’ll take a closer look at how Figma and Sketch fare in a team project environment. I think that’s the most important aspect to consider when deciding between two otherwise comparable tools.
The gold standard and the prodigy
In 2010, Sketch revolutionized the UI and UX design tools landscape. It was the first software truly tailored to UI design needs and quickly became the gold standard. In 2018, a whopping 56.4% of files uploaded to Avocode, a popular design collaboration app, were Sketch files.
Two years ago, Sketch still reigned supreme, but new interface design tools emerged and were catching up. The most notable of them was, surprisingly, a web-based app called Figma. It was launched in 2016 and, according to uxtools’ annual survey, its usage almost doubled from 12% in 2018 to 23% in 2019. Figma is still gaining popularity and a lot of new designers are choosing it over Sketch.
Let’s see why.
Sketch is an Apple-exclusive software. Figma, on the other hand, is a universally accessible web-based tool that can run on any device which connects to the internet. It doesn’t care about your operating system, so you can use it with Windows, MacOS, or Linux.
This gives Figma a huge advantage. While most designers use Macs, other people in their team or company might not, making it a pain to open Sketch files. In the past, a lot of designers would get Macs because of Sketch – it used to be the ‘must-have’ design tool – but that’s not the case anymore.
In contrast, Figma allows you to work and access your files from pretty much anywhere, regardless of the platform. This can be a lifesaver if anything unforeseen happens (e.g. your computer crashes).
But what happens with Sketch and Figma when there’s no internet connection?
As long as your files aren’t stored in the cloud, Sketch works as normal.
With Figma, it’s a different story. The web tool obviously doesn’t work, but you can download a desktop app available for Windows and Mac. You also have to download the files that you want to work on offline, otherwise you’ll have no way of accessing them. You can’t open a new file when you’re offline, and you won’t have access to all of Figma’s features.
As stated on their website: “Figma is designed for the browser, and real-time collaboration is at the heart of what we do. We don’t currently have plans to support a fully-featured offline mode.”
Basic Sketch doesn’t offer much in terms of team collaboration features. However, Sketch has released Sketch Teams, which they say is “built for collaboration”. It comes with an additional monthly or yearly subscription and a roadmap detailing the features that they’re working on.
The list of current features includes:
- Shared Sketch Cloud Libraries for a single source of truth.
- Prototype previews for user testing and research.
- Easy organization with projects.
- Free developer handoff, right inside the browser.
The most glaring omission is real-time collaboration… especially as that’s one of Figma’s biggest strengths.
Figma works pretty much like Google Docs and allows designers to view, comment, and work on the same document simultaneously. Furthermore, anyone can comment on a project if they have a free account. Each project has its own URL, so file sharing is hassle-free. This is a game-changer, particularly for remote teams.
It means that a developer wanting to view a certain project doesn’t need to install a design tool that they won’t use for anything else. The design files are literally one click away, which often encourages developers, stakeholders, and others to actually comment and contribute important information straight away.
Figma also autosaves changes so that users are always viewing the latest version of the design. This makes version control a breeze. Real-time collaboration also means that brainstorming and visually showing what you mean is really simple.
These features make reviewing and showcasing the files super easy, and it’s why an increasing number of project managers and team leaders are falling in love with Figma. If you start using it, you’ll instantly notice how much it streamlines your team’s workflow.
There is one drawback though – when you’re working on a design, it can feel like someone is looking over your shoulder. Unsurprisingly, some people dislike this. However, there is a workaround – you can always save the file as a local copy and upload it once you’re done.
When you’re primarily using one design tool, you want it to handle your design system, at least to a certain extent. The ability to add, change, and apply ‘master elements’ quickly and easily can save you a lot of time.
Sketch has a separate symbols page, where you can organize your design elements. Whenever you create a new symbol (e.g. a button), this element automatically moves to the symbols page and leaves behind a flattened copy. You can copy the symbol from the symbols page to add it to your design whenever you need it.
When you change the master symbol on the symbols page, all of its copies will also change accordingly. However, you can choose to tweak each individual copy through the overrides panel.
Sketch also has components libraries that can be shared within your organization. Components include symbols, text styles, color variables, and layer styles. Once you update a component, documents that contain it will get an update notification. You can review and confirm these changes to make sure that you’re always using the most up-to-date components in your work.
Figma also calls its elements components (instead of symbols, as Sketch initially did). It doesn’t have a separate page for them. Instead, it leaves the master component in place and if you make an edit, it changes all of its copies.
While Figma does offer enough to build an organized design system, it’s really up to you how you tackle it. This may lead to some accidental changes of elements, which can be quite annoying.
Sketch’s separate page for symbols makes accidental changes to master elements unlikely. It also gives you more control over the design system and helps with its implementation, as you pretty much have to use it.
A handoff is more than just a simple exchange of data between designers and developers. It’s an opportunity for designers to communicate the idea behind their design and help developers to connect form and function.
Both Figma and Sketch help to streamline the handoff with their component/symbol libraries, from which developers can extract the element’s layout and design information.
While each tool does allow you to export mockups, both are looking to streamline the handoff process further. However, designers are still using Invision or Zeplin in combination with Sketch, as both options result in a better handoff.
In 2020, Sketch launched a Cloud Inspector Beta, which allows developers to get the information they need to turn pixels into code in their browser and, most importantly, it’s free. There’s also a free alternative called Sketch Measure, which works just as well.
You may be thinking, “That sounds like Figma!”. Well, yes – Figma’s been doing this for years and Sketch is finally catching up in this regard.
Figma allows you to create a link, choose what the developers can see, explain anything important, and share your work. Developers can click on elements, inspect them, see their styling, position, obtain code, export layers, and get pretty much all of the specs that they need.
It’s the easiest way to handle a handoff and it also allows you to go through your design with a developer in a very simple way. Fortunately for Sketch users, they now have this option as well, although some features are still being developed.
These are the most important teamwork features of both tools. I’m sure that you can see why Figma is on the rise. But before concluding our comparison, we must take a quick look at some of the hands-on design features.
PS. I’m using CraftSync from Invision for handoff.
Individual work aspects
As Sketch was the go-to UI tool for quite some time, it’s not surprising that many other design tools employ a very similar user interface. Figma is one of them.
Both programs have the main canvas in the centre, layers on the left, tools at the top, and properties on the right.
It’s no accident that Figma, the new tool on the block, wanted to create a feeling of familiarity when designers tried it out for the first time. These similarities make it easy to switch from one tool to the other.
Artboards and frames
When it comes to artboards, there is one main difference between Sketch and Figma:
- In Sketch, each artboard represents one page.
- In Figma, you can nest frames (Figma’s term for artboards) within one another.
This means that Sketch’s artboards are rather simple. Figma allows you to include separate frames for any design element you’d like – headers, menus, tabs, etc.
Neither program is a powerhouse like Adobe Illustrator or Photoshop. Still, both offer plenty of powerful tools for designing elements.
While both offer similar tools, Figma is a bit more flexible when it comes to vector drawing because it employs vector networks.
Most pen tools draw paths in a loop with a defined direction, chain points together, and reconnect to their original point.
However, Figma’s vector networks support curves between any set of points. They don’t have a direction and can fork off in different directions without requiring a separate path object to be created. As a result, designers can connect several lines at a single point instead of creating two separate paths, as demonstrated below.
Both Figma and Sketch offer a rather intuitive way of creating simple prototypes with object-to-artboard/frame linking and a limited set of transitions. The features are good enough for testing most sites and mobile apps.
The main difference here lies not in their prototyping capabilities, but in Figma’s well-integrated system that updates in real-time without the need to refresh HTML pages when a file is updated.
Figma’s prototypes are therefore easier to share and simply more accessible than Sketch’s prototypes.
A huge library of plugins was considered to be Sketch’s biggest advantage. It allows you to turn Sketch into a very customized design tool. However, Figma introduced their own plugins in 2019 and since then, its community has created heaps of useful additions.
While Sketch’s library is still more extensive, Figma is not far behind – it has all of the most important plugins that the majority of designers need. Choosing Sketch purely because of its plugins is quickly becoming moot.
Let’s move on to the final point of the comparison:
Sketch has two pricing options.
You can pay $99 and that’s it – you get your own Sketch software. However, it comes with a license for just one year of updates; if you want to update your Sketch after that, you’ll have to pay $79 for another year of updates.
Sketch’s team model is different and is subscription-based. Teams pay $99/year per contributor. A contributor is defined as someone who edits and changes the documents.
Figma has three pricing plans:
- Starter – This is Figma’s free option for up to 2 editors and 3 projects, with some other limitations. It’s a great choice for beginners and small teams who only have one or two designers.
- Professional – $12/month per editor. This option is aimed at mid-sized teams and companies.
- Organization – $45/month per editor. This option comes with some features aimed at big enterprises.
The better pricing model depends on your/your team’s needs. Generally, though, the pricing options are similar enough (with the exception of Figma’s Organization plan) that you can really just choose the tool you prefer without looking at which one is cheaper.
Should you choose Figma or Sketch?
So, which tool emerges victorious in the battle between Figma and Sketch?
In theory, designers should be tool agnostic and able to adapt to whichever tool our client or company prefers. Fortunately, both Figma and Sketch have similar enough interfaces to enable a smooth transition from one to the other.
I personally prefer Sketch. Strictly because I’ve got better experience working offline with it. Figma always acted sort of slow.
However, when we look at both tools strictly from a collaborative perspective, there is no doubt that Figma is the better choice. That combined with it’s free plan is why it’s getting more and more popular.
I’d say both tools are more than good enough to be “the right choice”. Try them out (Sketch does have a trial option) and see which one suits you better.
If you’ve enjoyed this comparison and would like to see some more nifty design resources and actionable knowledge sent straight to your inbox, subscribe to my newsletter below.
Hungry for more UX articles?
Oh hey, I’m Romina.
I am a Design Strategist who holds a Master of Business Administration. I have 15+ years of career experience in design work and consulting across both tech startups and several marquee tech unicorns such as Stellar.org, Outfit7, Databox, Xamarin, Chipolo, Singularity.NET, etc. I currently advise, coach and consult with companies on design strategy & management, visual design and user experience. My work has been published on Forbes, Hackernoon, Blockgeeks, Newsbtc, Bizjournals, and featured on Apple iTunes Store.