What the Figma?
Thoughts on design software and why we migrated the Unsplash Design Library to Figma.
There was a time when life was simple: I was a college student with an “extended trial” version of Photoshop and Illustrator—all you needed to get started in web/graphic design. Throw in Notepad++ if you dabbled in code.
How things have changed. Until recently, we’ve juggled multiple subscriptions to handle our team’s product design and development stack: Creative Cloud, Sketch, Abstract, Marvel (at some point we also had InVision and Redpen), Dropbox, Trello, GitHub and Slack just to name a few. All amazing companies/services that make our work life, to an extent, a little easier.
As a result, having an abundance of services lead us to an overcomplicated design workflow: jumping from Trello to Dropbox Paper to Sketch files scattered throughout Dropbox.
Have you tried Sketch?
Before we dive into why we switched to Figma, let’s take a step back and look at why we switched to Sketch in the first place.
Charles Deluvio and I were those guys: solely designing in Adobe Illustrator—while the majority of designers were using Adobe Photoshop for web and interface design. When Sketch picked up hype, most of the shiny features that wow’ed Photoshop kids have been a long time part of Illustrator: art boards, vector-based, SVG support, grids, small file size, symbols, etc. We gave Sketch a shot but never had a good enough reason to jump ship to an unstable software that might not even exist tomorrow.
Fast-forward to a year later and most designers have shifted to Sketch, while we were still rocking Illustrator. Then came along Sketch 3—with introduction of symbols, major improvements to speed, templating, SVG support, better style handling and more. We had also happened to hire a new teammate who was a Sketch user. This made us re-visit Sketch, fall in love with its speed, simple UI and focus on interface design—ultimately pushing us to work in Sketch and transitioning over.
Sketch set the new standard for interface design tools. Sketch is king 👑
New kids in town
Sketch was king. Today, we have choices. Competitive choices between some industry heavy-lifters: Adobe XD, Figma, Framer, InVision Studio, Sketch, UXPin—and probably more that I’m not even aware of. Each company is trying to sway us into using their product by providing solutions to some of our “problems” or by simply offering a better alternative. These solutions are driven by marketing, fancy presentations and hype. Mainly hype.
After trying out numerous αlphas and βetas, the line between apps quickly blurred: sleek UIs, libraries, component-based, responsive layout support, prototyping baked in, etc. Each tool is piggybacking on each other’s weaknesses.
So how do you choose?
For a long time we didn’t. We’ve put these αlphas aside and went back to using whichever tool we were most comfortable with and was getting the job done—for us it was Sketch.
Why we switched to Figma
Fundamentally, file naming conventions, file management and versioning at scale became cumbersome over time. We had a system in place to handle it all, yet it kept failing. As a result, we’ve ended up with numerous Sketch files scattered throughout our Dropbox.
There are even numerous tools and plugins to help you organize and keep your Sketch files clean. Welcome to Plugin Hell 🔥
We’ve tried Abstract, and while the idea behind it is great, it always felt like a patch than a permanent solution to our problem.
And we’ve all been there: the dreaded Sketch Update Day.
A new version of Sketch is available!
It’s 10 AM and you’re scrolling through comments on Designer News to see if it’s safe to update. Little did you know, your teammate has already updated and the newly generated files aren’t backward compatible.
“Is it safe to update Sketch? “
If this wasn’t enough, let’s not forget about the process of managing Sketch licenses, onboarding and sharing Sketch libraries with new teammates.
*shudders*
It’s not you, it’s me
As a first solution, we decided to go over our file naming and handling process—but since Figma’s name kept popping up in our conversations, we could no longer disregard it. The more we looked into it, the more it made sense.
The idea behind Figma was a breath of fresh air from the rest of the herd.
No more files. No more syncing. No more Dropbox.
And most importantly: it’s all about inclusive, transparent collaboration in the cloud. Charles and I have worked on Keynote iCloud decks in the past, so the idea of a collaborative workflow wasn’t new. The advantage of working in the same document simultaneously is hard to beat—which is Figma’s foundation.
To add to that, the simplicity of copying a link and passing it to any stakeholder was a game changer. Not to mention Figma’s multi-platform compatibility: Linux? No problem.
Jumping ship
I won’t go into details about how we migrated to Figma, but rather outline the steps that we took that helped us switch confidently:
- Outlined the issues with our current workflow
- Read up on Figma and watched tutorials to get the feel of a possible workflow
- Noted down our findings, links to resources, tutorials and relevant articles
- Ran a test project on Figma
- Outlined the pros and cons of switching
- Split up our components and migrated them one by one in the span of a few weeks
There are cons
February 19th, 2020 update: Figma released Auto Layout which solved a good chunk of our problems as well as the introduction of Figma Plugins (Unsplash for Figma being at the top of the list with over 100k installs).
Figma isn’t perfect. Like any software, there are bugs and issues. We have an ongoing wishlist of features that we’d love to see. Dynamic buttons (rename and resize a button automatically) and dynamic placeholder images being the biggest hindrances for our team (Unsplash API could come in handy here 😉).
One thing to keep in mind is that what works for one organization could be a disaster for another. Do your due diligence before jumping on the latest design tool fad. At Unsplash, Figma has been a tool that we’ve been discussing since its early days and have only migrated 3 years into its development—primarily because of our internal needs.
What’s next?
Moving forward, we’ll be migrating our remaining assets to Figma: mobile library, iOS library and various marketing graphics.
We’ll also keep an eye open on the progress of competitor tools. Perhaps we’ll switch to something like Modulz and do this all over again.
If you’re thinking of switching to Figma (or another design tool), I’d love to hear about your process. Leave your comments below or send me a tweet.
