Why our remote design team is moving from Sketch to Figma
If you’re part of any kind of design team that’s using Sketch to design products, Figma is a compelling alternative—here’s why…
Every week there’s a handy article/hack on Medium about how to get around a limitation in Sketch. It’s saved my ass a few times (cheers all) but it drove me to look for alternatives…
There are plenty of Figma vs Sketch articles going into intricate detail about specific functionality but I wanted to highlight the main problems and processes that ultimately pushed us to make the change to Figma.
Workflows: Sketch vs Figma
Old setup:
Sketch (design)+ Abstract (versioning)+ Zeplin (handoff)+ InVision (present/prototype)
💰4 tools, all billed monthly. (5 with Framer)
New setup
Figma (design, versioning, prototyping, presenting and handoff)
💰1 tool, billed monthly (2 with Framer)
Design and versioning: Sketch + Abstract
Using Sketch and Abstract to build a design system with comparatively few linked libraries and pages, at first, was great—loving the systematic way of designing with Abstract but as the libraries grew, it became painfully slow for the team:
This was most apparent when trying to merge / sync changes across the team, sometimes this process could take up to 15 minutes. When facing tight deadlines, this becomes seriously frustrating. In the end we pulled all files out and just worked in Dropbox and shouted when we were in a particular file.
Having to re-open files to sync/commit/merge a new library update is not too smooth.
Creating with Figma
You can design with other team members at the same time. For us, this is great — appreciate this is not for all designers who like to design in a cave and present later. For us, it actually encourages better design decisions and collaboration.
It also goes a long way in eliminating ‘preciousness’. Designing a flow or specific element for hours in isolation often results in a designer becoming rather too attached to their design solution.
Opening it all up means there’s nowhere to hide and collaboration happens naturally.
Presenting design work: From Abstract to InVision
So you’ve completed a bit of design work and you need to present internally or to the client. Heres our old process:
- Fire up Invision
- Open untracked Abstract master Sketch file and sync using Craft
- Create hotspots within Invision (or using Craft)
- Present to the client using InVision Freehand or screen-share over Skype or appear.in
- Record actionable feedback
- Make necessary changes
- Rinse and repeat
Presenting with Figma
Prototyping (basic but powerful), commenting (basic but useful) and versioning is built-in.
This means:
- there is no exporting, you just hop on a call and share a view-only link, the client’s cursor follows where you are on screen as you discuss and present
- there is no back and forth with commits etc, versioning just works in the background
- you don’t need additional tools to prototype
During ideation phases, we’ve had one team member making small changes while another team member presents to the client… live.
The time savings are immense. The feedback loop is so much smaller, and it provides the client with a greater sense of ownership. I’m not talking design-over-your-shoulder feedback here, that’s horrible—it’s more about fostering useful conversation in the early stages of a project. Useful client collaboration.
Creating a typography system in Sketch is crazy
With text being such a huge part of any digital product, it should be a priority. Setting up a system for typography means setting up 50+ symbols for the various weights, alignments et al. This defeats the object. It’s painful. Text styles do not solve this either.
Typography in Figma
You just setup master typography components with base styles and use instances when you need to change alignment/weight etc. It’s sensible if you’re sensible with it and takes minutes to set up.
You can even make a fluid type scale:
Overrides in Sketch become unwieldy
I initially loved symbol overrides, but there is a disjoint—on more complex symbols, the override panel just doesn’t work, you lose context. Despite locking layers and renaming with emojis. Handing this to another designer isn’t going to make their day (labelling could be better here, but still).
Update: release 49 included a change that improves this somewhat:
Figma: Instances make contextual changes a breeze
Figma uses a master component (aka Symbol in Sketch) which you then duplicate into an instance. Any changes to the instance do not affect the master but change the master and it changes the instance. Trial it, it’s clever, real clever.
Sketch + Zeplin hand-off
Though I love Zeplin, it’s another thing to export. Another thing to keep up to date. Figma hand-off is ready to go instantly… it’s always up-to-date. It also has a Zeplin integration so if you’re attached to Zeplin, you can stick with it.
Objections to overcome
Figma is in-browser: this takes some getting used to, but it’s just as fast, if not faster than Sketch once a file is loaded. It does have a downloadable app that is essentially just a wrapper but might ease the transition.
No Sketch files: Clients like owning files. Figma does have .fig files but the iterative nature of product design does mean ‘final’ files are less important. Plus Figma’s Zeplin integration should be enough for devs resistant to change.
No plugins: The main plugin we’re missing is related to accessibility (Stark) but there are browser tools that accomplish the same thing.
Monthly billing: Sketch now bills annually, plus paying monthly for InVision, Zeplin and Abstract quickly add up!
So is Figma ready for high-value projects—the big leagues?
Yes, coming from a remote design team, it has made commercial sense so far. For the solo designer? I think its handling of components and combination of presentation tools make it more than enough to challenge Sketch.
👏 if you found this handy at all!
