And …. It’s Figma (By A Nose)

Small Planet Creative Director Julian Damy’s review of the interface design tool.

Whether you’re a professional designer, or a student just starting in the field, several things will catch your attention about Figma, the latest horse in the tight race for best interface design tool:

• It’s browser-based, which means you can use it on a Mac, PC, or even a tablet, and yet it runs as seamlessly as any other software
• All the files you create are stored in the cloud and accessible to anyone in your team without using third-party tools like Dropbox
• Collaboration happens in real time
• There’s a fully-functional free version

All impressive features, especially considering they were already included when it launched three years ago. Then there’s the name: Figma. It’s simple, it’s easy on the tongue, and it’s irresistible. It’s impossible for me to say without automatically adding: “…of your imagination.”

The Contenders

Figma is one of the strongest contenders in the world of interface design tools, together with the leading software, Sketch, and the new(ish) Adobe XD.

It should be noted that InVision, the prototyping tool par excellence, now has a horse in this race with InVision Studio, but it isn’t so much a horse as a colt (young, gangling, with quite a few bugs). So we’re not going to include it as a serious contender just yet.

Just a few years after its 2010 launch, Sketch became the standard tool for interface designers (and the horse to beat). Thanks to its ease-of-use, powerful vector graphics editing capabilities, constant updates, and a vast network of developers busy creating all sorts of new and (mostly) useful plug-ins, Sketch quickly replaced the clunky Adobe Photoshop as the industry standard.

Surprisingly, the Silicon giant was slow to respond. In fact, Adobe was in a bit of a catatonic state for what amounts to a digital eternity — about seven years — before it finally launched XD. To be fair, and because it has Adobe’s muscle behind it, it’s a pretty solid alternative to Sketch. XD is very much like an “Illustrator Lite,” yet it incorporates much of Sketch’s functionality, like Artboards, Symbols, and Share Assets, with the advantage of cross-platform and very smooth performance. (Read more about XD here.)

Then, in 2015, the fast, slick, beautiful, and totally unknown Figma entered the race and blew enough minds to make it one of the top three interface design tools in the market. How did it get here so quickly?

No More Workarounds

Figma (now in version 3.6) is to Sketch what Google Docs is to Microsoft Word. But, it’s so much more than that. Figma works on any web browser, on any platform, and allows you to save your files in the cloud, plus it has a pretty slick native app. No more will you have to think of a workaround when handing off to a PC-based developer in your team, and with the native app you can still work on your files while working offline.

In terms of performance, Figma holds its own, even compared to the super-smooth Sketch. As you move seamlessly across your screen you quickly forget you’re actually working on the web and it feels just as responsive as any other software.

The first thing you’ll notice when you open Figma is how familiar it all looks. Figma didn’t try to reinvent the wheel. Instead, it copies many of the tools, UI, and features already available in Sketch, such as layers, frames (you know them as artboards), components (symbols), resizing, and styles, to name a few.

Yet Figma added enough new and unique features that make the possibility of (gulp) switching from Sketch a not-so-crazy temptation.

Pricing

If you are a freelancer or a student, Figma is completely free. Not 30-day-trial free, but free forever, a fully-functional version with (almost) all the bells and whistles.

That said, if you want all the features like unlimited projects instead of three, or unlimited version history instead of 30 days, then you’ll need to pay $12 per person per month. Annually that makes it about $45 more expensive than Sketch.

File Importing

Figma is compatible with Sketch, so if you’re a Sketch user, fear not. Or at least, fear very little, and import your files from Sketch into Figma expecting only minimal effort to make it look like your original file.

You can also copy and paste from Illustrator with the same good-enough results you get in Sketch.

Vector Networks

Figma’s Vector networks feature is a pen tool on steroids. The pen tool we use every day has basically remained unchanged since it was introduced 30 years ago. Figma decided to change that. Its vector tool allows you to draw complex forms much faster and more intuitively, like drawing on paper.

The Figma team explains it this way: vector networks improve 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. Got it? Me neither, but it just works!

At first, you probably won’t notice the difference. But when you go back to Sketch you will immediately notice how you’re missing Figma’s flexibility and control, and then you’ll wonder how on earth you were able to draw on a computer without it for thirty years.

Grids and Constraints

While most of the responsive functionality available in Figma comes directly from Sketch, Figma went up an impressive notch and made guides responsive as well. You can use grids and constraints to make complex and responsive layouts that wouldn’t be possible with Sketch.

Figma smartly assumes you want your different elements to align with the grid, and what use is the grid if it stays fixed when resizing my device? (I’m talking to you, Sketch). As a result, constraints are always based on the grid in Figma, and since the grid stretches or contracts as you resize your frame, the left and right coordinates of your elements will change accordingly as well.

Important note: have you been dreaming about scaling while keeping the aspect ratio of your objects? Well, bad news, you’ll need to keep dreaming because neither Sketch nor Figma allows for that yet. Sorry.

Components

Components are not unique to Figma. You might know them by their more intuitive Sketch name: Symbols. However, in Figma components are much more powerful. You can create overrides like different font size, border width, or background color, without needing to create a different component for each version.

Plus, you can edit components without leaving your artboard. Components made their appearance just last year, but considering how much more powerful they are compared to Sketch’s, it was worth the wait.

Live Team Collaboration

In today’s team-oriented environment, designing with others just feels right. Right?

Not really. To me, it sounds too much like designing by committee. Before you know it, half-a-dozen people will be looking over your virtual shoulder and telling you to move the red circle 10 pixels to the left, and that your blue is too purple.

However, done right, Figma’s live team collaboration makes it very easy to communicate with other members of the team without having to export files or create PDFs or take screenshots.

You can add comments, reply or resolve comments posted by others as well. You also have collaboration built in Sketch, but it requires the extra step of uploading and sharing the file, and it does not allow for live tweaking of the files you’re presenting.

Developer Handoff

With Figma, you can share view-only files with your dev team, and they won’t even need a Figma account to access them. They can copy/paste CSS, iOS, or Android data from the properties panel into their own code. Who needs InVision?

Prototyping

Figma launched a prototyping feature in its 2.0 version (beforeSketch included theirs). You can easily create quick prototypes à laInVision, including the ability to:

• Choose a device to show your prototype
• Have fixed elements like a nav bar or status bar
• Create transitions that make it looks more realistic, like dissolve, slide or push, with options for easing and timing

Figma also supports smart-linking, so you can add hotspots to objects within components, removing the need to add them to a nav bar each time.

As good as Figma is in the prototyping department, it does not allow you to create rich animated prototypes (at least not yet). And, because it doesn’t work at all with InVision, you can’t use their new InVision Studio to create them either.

That doesn’t mean you’re out of options. Figma is compatible with a powerful code-based prototyping tool named Framer (read more about it here) and you can always export your own assets and use other animation and prototyping tools like Tumult Hype, which creates HTML/CSS files that can be easily shared with your clients.

And the winner is…

Figma, as young as it is, has already proven it can compete with even the favorite horse. What it lacks in certain areas, like InVision integration, it more than makes up for it with unique features that actually make the need for InVision a thing of the past.

Granted, there is no dev community creating plug-ins, so that will be a loss if you make the switch from Sketch. But considering how short-lived those plug-ins have become — launching and dying every other month with the different Sketch updates — it won’t be a huge loss.

The powerful components, advanced resizing constraints, one-of-a-kind pen tool, and image-sharing, prototyping, and handoff capabilities all help move Figma ahead in the race.

But, Sketch has noticed, so I wouldn’t be surprised if in the next major update Sketch incorporates some of these features as well. In the meantime, I’m betting on the horse with the beautiful name.

Selected images courtesy Figma.