Blog PostSketch vs Figma - Side by Side

Nicolas Matias's picture

Nicolas Matias

/

Mar 17 2020

Sketch has long been the tool of choice for designers, but now it seems there’s a new kid in town. Figma is the first browser-based interface design tool to grace the market, and it’s a name we’re hearing more and more within the industry.

It’s okay for a novice designer to hesitate about which tool to use first. Even seasoned veterans, who have been doing this for years, sometimes look for clues and hints to choose which designer tool they should be using.

It’s no wonder that even the pros are looking for advice. There are a lot of great programs out there that do the job just fine, however, in the digital sphere, everybody is looking for the most compatible one.

That’s why we’ve decided to compare two of the most popular design tools out there: Sketch and Figma. Some consider the former as old news and the latter as the new big thing. Let's compare!

Sketch vs Figma:

Features & Functionality

Now let’s delve into some specific functions and features. In fact, there’s pretty much nothing you can’t do in Sketch if you’ve got the right plugin. Whilst it’s true that Figma comes with native prototyping and developer handoff capabilities, there are plenty of plugins which integrate Sketch with the most popular tools in the industry, such as Zeplin, for developer handoff. For many designers, having to install a plugin is not enough of a hassle to swing them from Sketch to a new, less well-known tool.

However, one area in which Figma really shines is teamwork. Its most noteworthy feature is real-time collaboration and, just as the name suggests, multiple team members can work on the same design project simultaneously. There's no need to communicate edits back and forth; each participant can view them directly in the tool as they happen. Not only is this a game-changer for remote teams, but it also significantly streamlines in-house processes. Another advantage here is that Figma is browser-based, so a developer wanting to view a certain project, for example, doesn’t need to install a design tool that they won’t otherwise use. Each project has its own URL, so file-sharing is hassle-free.

In terms of design tools, Figma also offers a couple of features that could be considered superior to their Sketch counterparts. Grids and constraints allow for total flexibility when it comes to creating resizable, responsive layouts. This is also possible in Sketch using the group resizing feature, but you are limited to only four options.

Figma has also taken the traditional drawing tool and improved it by using vector networks instead of paths. As Figma co-founder Evan Wallace explains: “A vector network improves on the path model by allowing lines and curves between any two points instead of requiring that they all join up to form a single chain.” In practice, this essentially means more flexibility when drawing.

Artboards/Frames

Both programs allow users to create multiple artboards with custom grids, layouts, and scaling constraints. Sketch keeps artboards simple: each one represents a separate page. As a result of this philosophy, Sketch’s artboards are pretty standard. This walkthrough describes all the juicy details.

Figma’s “frames”, on the other hand, are much more versatile. While Sketch only allows one artboard per page, Figma encourages designers to nest frames within one another. That means that designers can include separate frames for headers, footers, menus, tabs, and lists, and more. Since each frame can include a separate custom grid, designers can explore using different rulers and guides on different parts of the screen.

However, there is a trade-off. To encourage nesting frames, Figma does not support constraining groups. Ultimately, while Figma’s frames are more powerful than Sketch’s artboards, both programs are competitive.

Sharing

In Sketch you can use their upload to cloud feature but it requires manually updating every time a change is made. Or you can use syncing tools (ex: Invision) that are not real time and still suffer from sync lag.

You can share any Figma file and set permissions in one step, and you can have the share view be based on file, page or frame.

The Verdict

During the last few years, Figma has become a serious competitor to Sketch because of its speed and outstanding features. However, Sketch developers made a few crucial updates and improvements to up the game, especially with Sketch for Teams feature. Sketch indeed may be the most convenient and time-saving (if you’re a Mac user), but Figma will offer you more cross-platform freedom. Finally, it all boils down to personal preference. Some will always like Sketch more, others will swear by Figma. If you feel more comfortable working with the first one, it’s cool. If you like Figma, more power to you. What’s positive here is that you see these software developer companies pushing each other to the limits by introducing more advanced solutions. Make sure to keep an eye on both tools, learn them both and use the one you like the most. Cover photo by UX Store on Unsplash