Figma editor’s note: We don’t usually put Figma reviews on our blog, but here we made an exception. Marco Pacifico explained our tool’s benefits better than we could have, so we wanted his article (which originally appeared on Prototypr.io) to be a resource for our users. Thanks Marco for letting us cross post it 🤗!
I used Figma for a month and I was blown away by its features and how well it works. I liked it so much that I’ve been campaigning for my team to switch from Sketch. This post is adapted from conversations I’ve had at work, and it’s sort of a pitch for product teams, especially distributed ones, that talks about why Figma is better in many ways that matter.
It’s like Craft Freehand but with all the features of Sketch (and more). It works in web browsers, and there are also native apps that let you work offline.
Nope. People experience Figma being more performant than Sketch. This has been my experience as well, even when working with a large file.
Well, I’m here to tell you that we’d lose nothing significant by using Figma; we’d only gain.
Figma covers all the bases with the features mentioned above. But it gets really interesting when you consider how it improves our workflow.
Below are four ways Figma can fundamentally improve how we work.
You can do a design review, make updates on the fly, and instantly get feedback on your changes. The time between iterations can go from days down to minutes because there is zero time wasted uploading or syncing screens, creating share links, messaging people to look at the links, and so on. When I experienced this first-hand it was so amazing that I shed a single tear of joy.
Below are some real-life scenarios that can make work slow and tedious at the best of times and incredibly frustrating at the worst of times. All of these scenarios go away by using Figma:
All of a sudden the design file becomes a venue where anyone can meet up and have a discussion about the designs. This means that it’s easier for designers to work in parallel, exploring options and iterating in shorter increments. This means that developers can spot and voice technical concerns sooner rather than later. And this means that stakeholders, project managers, or anyone with the link can see how the design is unfolding from an idea to a polished visual, rather than waiting for a big reveal.
Instead of fragmenting the design process across multiple files, there is now one place that can tell the whole story and evolve as the design process unfolds.
I like what Thomas Lowry, a designer at OpenText, wrote about how his design process has changed by using Figma:
As we begin to dive into a massive website project, Figma is quickly becoming an essential part of our process. We will produce our wireframing and low-fidelity prototypes in Figma all the way through to the the visual design phase. During this process we will begin establishing components and push them to the team library for use across many files. As we vet out the components in different scenarios, and the design evolves, being able to make modifications that are global across all files will be a huge time saver.
That’s because with Figma, it’s easier to structure our designs in a way that reflects how those designs will be coded.
To understand why, you need to know how frames work. Figma uses frames instead of artboards. Frames are different because you can nest frames inside a frame. When you place a smaller frame over a larger frame, the two frames are automatically grouped and the smaller frame becomes the child of the larger, parent frame. Children frames are positioned and constrained relative to their parent. This is one of those things that takes some getting used to, but then once you do, you wonder how you ever did without it.
You can use frames to divide a screen into content areas and then nest components (which are themselves a bunch of nested frames) inside of those sections. This approach combined with auto-grouping, relative positioning, and constraints makes it easy to quickly build out consistent and responsive designs.
Using frames like this is helpful for developers because a frame in Figma is akin to a container in HTML. When developers inspect the designs, they’ll be able to see UI elements nested in their respective containers, which means they’ll have a more accurate blueprint to refer to as they write their code.
Sketch has Symbols and Figma has Components. The difference is that components are more flexible than symbols, which means we can do more with less of them, which means we’re more likely to actually use them instead of breaking them or starting from scratch.
In Sketch you can use Symbol Overrides to edit text or swap out nested symbols. But if you want to change anything else — say, text size, border weight, or background color — you’d have to Detach from Symbol and create a slightly different version of the same UI element. To solve this you can nest every variation in one symbol, but then you end up with an overrides panel from hell. With large projects and complex UIs, organizing and maintaining all the permutations quickly becomes untenable.
With Figma, you can access and modify the properties of any layer in a component without detaching it from the master. The same thing goes for nested components. Now whenever you change a property of a layer in the master component, those changes will only get propagated to instances for which that property hasn’t already been overridden.
I think these three gifs do a good job of visually describing how it works.
First of all, you don’t have to worry about a naming structure (i.e. Icons/Search) as you’re creating components. You can rename a master component later and it will update all instances — not the case in Sketch. And to create a category of components, just group them in a frame and name that frame whatever the category is. That means it’s easy to reorganize things later just by dragging components around. For me, this really reduced the cognitive overhead of both creating components and keeping track of them.
Second of all, accessing components in Figma is way easier than accessing symbols in Sketch. Once again you don’t have to think about a naming structure to navigate a nested menu of symbol names. Instead, you can find (and see!) components as a list of thumbnails. To add a component to a screen or to swap an instance, just drag and drop to the canvas. Or you can copy-paste the master component to create a new instance — you can’t even do this in Sketch without creating a new symbol.
Another thing that makes designing with components easier is that in Figma you can edit the master component in context of the larger view, rather than having to go to a separate page to make edits. I find it super annoying getting bounced to another page in Sketch every time I want to edit a symbol, then having to switch back to the design to see if my changes line up.
The more I use Figma, the more reasons I find to like it. There are a ton of details you end up discovering as you start working with it. Overall it feels like a more evolved and well-thought-out tool for interface design.