Figma vs Sketch: The Battle of the Web Design Tools

Louis Mardlin

If you’ve worked in web design for a while you probably remember designing sites in Adobe Photoshop. Photoshop was heavy and clunky for web design, but that’s not Adobe’s fault! Photoshop, hence the name, is designed primarily for editing photos, not working on UX & UI projects. In 2010 many web designers made the jump over to Sketch but now there are more options to choose from; one of these being Figma. We believe Figma is the best prototyping tool out there right now and let us tell you why.

Less is more

Using Sketch as a web design tool can get messy. A lot of the time you can’t solely use Sketch to achieve your required outcome, instead, designers often use Sketch in conjunction with InVision, Abstract or Zeplin. This makes for a complicated workflow and also involves designers understanding the ins and outs of 3 or more different applications.

Unlike Sketch, Figma is an all-in-one solution eliminating the need for multiple applications and confusing processes. It allows designers space to organise their work on a single platform. With the recent introduction of Figjam, Figma can even be used to complete work prior to the web design process replacing applications like Miro, Mural and Milanote.

What’s more, Figma truly is built with the designer and their team in mind. The product design workflow allows you to collaborate on files, prototype interactions and animations, share work with your clients and collect feedback. It even allows you to grab code snippets and specs for developers.

‘Comparing Sketch and Figma is like comparing Notepad and Google Docs’

-Creative Director - Unfold

The Power of Love (We mean cloud, but we like to sing that bit!)

A common problem designers face is storage, storage storage. When creating large design files for multiple clients, the cloud really is your best friend. Applications such as Sketch store files locally on your hard drive. This takes up tons of storage space and comes with the hefty responsibility of keeping all those files safe. God forbid, you lost a masterpiece design you’d spent days working on for a client. Figma relies solely on the cloud, allowing teams to work seamlessly online and allowing the team to sleep easy at night knowing it is all safe and sound. Right, back to counting sheep.

File management is also made simple as being web based means you can use Figma on any operating system being OSX, Windows, or Linux and you’ll never have to install a software update. As your files are stored in the cloud versioning is made drastically easier allowing for smooth transitions across different computers without having to transfer files.

Performance

Many people may have the misconception that web based applications lack the performance of local ones. In fact (depending on your system specs) quite the opposite could be true, backed by a 2D WebGL rendering engine, very large documents are supported without affecting your performance. As a result, Figma is often better at processing large files than Sketch, saving you from the ‘Spinning wheel of misfortune.’ We have all been there! Additionally, being web-based offers more features such as continuous auto-saving, real-time updates and collaboration.

‘Figma is fast. Files are always up to date. And it’s easy to share designs across the organisation and collaborate.’

- Sr. Design Manager - Twitter

Working Collaboratively

Figma was built with collaboration at its core making sharing, collecting feedback and working on files together easy. Figma allows you to share files and work on them collaboratively in real-time.

Although the thought of the team watching you design could seem intimidating it’s not as scary as it seems. Similarly to Google Docs, your files remain private until you decide to share them. Even after you’ve shared your file you have full control over who can edit or simply view. Sharing live files on Figma allows you to get instant feedback directly on your design eliminating the need for you to keep exporting and sending new files.

‘Better collaboration means we end up building the right things.’

- Principal Designer, Airbnb

Plugins & Resources

All plugins designers are used to using in Sketch are likely to be in Figma too. With the Figma community you can easily search for plugins that are trusted and rated by other users as well as many other files and resources provided by other Figma users. This is super handy in saving time hunting the depths of the internet for a plugin that is right for your project. Here is where the cloud once again is your best friend, unlike Sketch your plugins will always be up to date as they update automatically!

So when looking retrospectively at the power of a web-based application hosted in the cloud we think Figma is the clear winner. We highly recommend Figma if you are working in a team of designers, as the art of collaboration is simply second to none.

Quick tip: migration over from other platforms can be daunting. Sketch does allow you to import files directly into Figma keeping your layers intact and even bringing over symbols and components.