Figma vs Sketch

Sketch to Figma

Salsa Digital, like many digital agencies, has been designing in Sketch for years. However, when one of our developers was looking for a Sketch alternative to perform frontend development on his Linux laptop, we stumbled upon Figma.

It looked like a simple vector web-app at first glance, but the more we saw, the more we realised this had potential to change our whole design/delivery process in ways similar to how Google Docs revolutionised sharing word documents.

A brief history of web design tooling

Many people, designers included, don't like change. Regardless of promised benefits, the idea of learning a new tool can often frighten rather than excite. Perhaps this is why Photoshop, a photo-manipulation program, was the ill-fitted tool of choice for designing web interfaces for many years.

However, Photoshop was not built for creating web interfaces, and as the web moved to responsive designs and high resolution displays, being raster-based meant additional work was needed for adding and exporting vector icons at different sizes and different file types. Multi-page designs meant multiple Photoshop files, and shared colours and components just weren’t possible. Also, the filters and effects that Photoshop provided did not always translate well to CSS. While there were a few others tools better suited to interfaces, like Adobe Illustrator and (Macromedia/Adobe) Fireworks, many designers still chose Photoshop.

Then things changed. In the past five years, there's been a large uptake in Sketch for web design. Sketch, with its interface-focused vector tooling and comparatively cheap price, answered many of the shortfalls of Photoshop for web design and became the tool for designing websites on Mac.

While Sketch improved the web design tooling, it still followed similar delivery mechanisms of the old days. That is, single large files stored locally, requiring a licensed copy of Sketch on any computer that needed to view the file. But with the rise of cloud-based services like Google Docs, the delivery workflow of Sketch felt somewhat archaic. This in turn sprouted a whole new ecosystem around Sketch (InVision, AvoCode, Zeplin, etc.) providing additional application/cloud-based services for exporting or exploring Sketch designs.

So with Sketch firmly established in the web designer mindset, where does Figma come in? What does it offer that isn't already available, and does Figma even have a chance to compete?

Figma

Figma could be described as "Sketch in the cloud". It provides a similar tooling experience as Sketch, but using browser technologies. This means you can run Figma from your web browser, without the need for a paid license or installation, on any device or operating system.

Not only that; Figma makes its own improvements on various design tools. Personal highlights include:

• Vector networks — multi-point paths for drawing shapes. Something you'll definitely love if you do any iconography

• Real-time collaboration on documents — many users can make changes simultaneously

• Prototyping tools brings the best of InVision's clickable interface builder right beside your design tools

• Team libraries, symbols — for cross-page, cross-project asset sharing

• Google fonts integrated — makes integrating typography super easy for web designs

• Many auto-alignment tools for simplifying layout changes

• Add comments directly to designs

• Regular meaningful releases — there's constant improvements happening

There's a lot to love here, and the fact it's all built on web tech and still runs silky smooth is magic. These unique things alone make it definitely worth checking out for big productivity gains, but there are two important foundational things that I love about Figma that really change up a lot of the usual design trends.

Versioning and Figma

Google Docs revolutionised document collaboration. Having your documents stored remotely meant your files were always up-to-date and accessible from anywhere. I shudder to think of ever returning to using email to share and collate documents.

However, the "file passing" workflow was still a reality in the design world until very recently. Unlike documents, design files often don't have the luxury of small files sizes, and their big size means storing PSD or Sketch files in the cloud has the additional problem of keeping local and remote files up to date. Not to mention storage limits, internet quality at different locations, etc. Keeping track of design versions is often as simple (or as rudimentary) as suffixing a file with a '-v2'. This can be an unnecessary headache for developers if development starts based on a supplied design file, only to discover midway that the design has progressed three versions with no supplied file update.

Versioning of the Sketch file for internal use is one thing, but your clients need to see the designs as well. A separate service "InVision" provides a way to present JPEG output from your Sketch designs, but this can be another point of failure in design versioning. Now we have to consider what version InVision is showing, what distributed version of the Sketch file is available to developers, and the latest working Sketch file. Plugins may exist to simplify the flow, but it's fundamentally a broken system — we're still sharing snapshots of an ever evolving design.

This is where Figma has, at its core, a solid foundation for versioning, sharing and presenting designs. Everyone accesses the same file. Sharing is a URL. You can put it on a JIRA ticket, in an email, store it as a bookmark, and you'll always be accessing the most up-to-date design. You can name versions and jump between them in the same file. Simple. All the above Sketch problems, all the work-arounds and additional services you need to subscribe to, are no longer required.

Given the benefits of up-to-date versions, this makes it very convenient for all project stakeholders, but this can be coupled with one other benefit.

Figma is available everywhere

Understated, but highly valued — Figma is cross-platform! Stack Overflow Professional Developer Statistics for 2019 show Windows as the preferred operating system for development, with Windows (45.3%), macOS (29.2%) and Linux (25.3%). Business and enterprise have a greater skew towards Windows for employees as well. So with Sketch being macOS exclusive (and unlikely to change*), does it make sense to build designs that can only be opened on a limited number of stakeholder devices?

* Sketch's response to supporting Windows/Linux versions: "Due to the technologies and frameworks exclusive to OS X that Sketch has been built upon, regrettably we will not be considering supporting Sketch on either of these platforms."

Figma limitations

When choosing software, I often think of the system’s development life cycle. Specifically the last few steps — 'retirement', 'phase-out' and 'disposal' of a software system. It's inevitable that all projects will eventually end — and it's reassuring to know that if or when that happens, you’re still able to access your files. In an increasingly "software-as-a-service" world where software is served through an online infrastructure this should be a cause for anxiety.

Traditional installable desktop applications, like Sketch or Photoshop (CS6 and below) give you assurance that even if another update is never released, you’ll still have a version of the software that can be used now and into the future.

And with online storage, if a service like Dropbox ever closes down presumably my files could be downloaded and stored locally, or moved to another service. The files themselves will still be preserved even if the service doesn't run.

However, Figma is software-as-a-service — the application only exists for as long as the servers are up. If Figma hits end-of-life, how will you open an exported ".fig" file when there is no portable desktop application to install? Will you be able to easily move your ".fig" files into another application like Sketch? Not currently, and no one knows if this will be an option in the future. This makes switching to Figma a harder proposition when considering archiving and retrieval of assets 10 years from now. This is further compounded as Figma is not open source, has no packaged installable, and provides no file conversion tools — where is the assurance that moving designs onto this platform won't lock you out of your own files in the future?

Closing

In an online world, Figma feels a natural progression for design development. It provides an incredibly compelling feature set, while filling in the blanks on client and developer delivery workflow and versioning. But it's convenient, cloud-based "software-as-a-service" model may also be its main drawback for the future-wary designer.