It's no wonder how Figma rapidly rose and took over the design market - the majority of the design community moved in 2020 from Sketch to Figma, as most surveys out there show.
For us, switching from Sketch to Figma was without a doubt the best decision regarding our workflow, and there is no single reason to look back.
The old days
We used to have our Sketch files on a Google Drive folder, so anyone on the design team could access them and make changes. That, as silly as it might sound, was pretty awesome back in the day when there was simply no better solution.
But as time moved forward, the team and the folders grew, it all started to become a big, giant mess. We began having sync problems, needing to wait for someone to finish what they were doing on a specific file, close it, wait for it to sync, then open it, only to find that all changes that you had made the day before were all gone, for some unknown inexplicable reason!
Then there was Git
We desperately needed to leave the old Google Drive approach for a reliable Git-like file version manager software. After testing several tools, we decided to give Abstract a try.
I remember the adoption curve was quite steep for the team. Overnight, we had to understand how Git works to do the same things we were used to doing before. We had to add several extra steps to the process: Make a branch from
master, add a branch name, make commits, ask for PRs, merge again, etc.
Despite all this heavy lifting, within a few weeks, everyone had embraced this new, energy-consuming process for the sake of achieving the only clear benefit it had: rest assured that our commits were safe.
Looking back, boy, was it expensive! - We had to add a quite heavy, high-cost, time-consuming process layer on top of our design tool to cover a fundamental part that Sketch was missing: If one of us was working on a file, the others had to wait.
The real-time collaboration was the one thing that disrupted the design market. It was a game-changer and separated Figma from the herd as it created a new standard. Now every new copycat you see on Product Hunt looks and feels like Figma.
This feature meant a huge improvement. It solved a fundamental problem we had, bringing down infrastructure costs and saving the whole team time and energy. But that was just the beginning.
A smarter approach
Pretty soon, we realized all the small key decisions Figma added to our workflow. They didn't just create a better-looking software to compete against Sketch. Instead, they focused on adding value, making a better tool, not just an alternative.
For example, It fundamentally changed how we work with styles, making them closer to how CSS classes work. Also proposed a different approach to working with layouts, based on "Frames" much closer to what the CSS Box Model is and adding auto-layout, quite close to what "Flex" is for front-end web development.
How we handle our Design Systems
It wasn’t until we started creating complex Design System that we understood Figma’s true potencial.
Working on product design, you'll find yourself using the same components, buttons, switches, patterns over and over again. That's why we centralize all core elements in a Master DS.
This approach allows us to save a lot of time and keep the focus on what's important. Projects should not start from scratch every time. When that happens, it's a clear sign something is off with the process.
On a Master DS, we define common stuff every child DS should have, such as font styles and spaces to name a few.
When we realize changes on a project could be used on other ones, we update the Master DS and synchronize it back to its children. It saves tons of energy and helps us keep track of things. If something breaks, we fix it once and get replicated everywhere automatically.
Another good example is how we handle colors and color creation. First, on a Master DS, we have a single component used to display colors for any child DS.
We use this component when creating every new chroma palette. This way, we don't have to re-invent a micro language for communicating the same type of information every time.
Brand identity sustainability
After many years working in the field, making mistakes, learning, reshaping processes and systems, we've come to design our own technique that allows us to work with consistency throughout large projects sustainably and reliably.
For example, when starting a DS for a project, we take the client's primary chroma palette, document it on the DS, and deconstruct every main color using HSL. We designed this process internally, and I'm not aware other companies do it this way.
Imagine a client's primary brand color,
#267DFF. We use it as a starting point and define it as the
100 version. Then break it into logical, traceable HSL steps. While simple, this is an essential step to keep the brand consistent.
One common mistake designers without much experience building systems fall into is to add shades of a color based on perception.
This approach generates a couple of problems: The new colors are similar but not consistent. If you start analyzing their composition, you'll find that some are warmer (closer to yellow), and some others are closer to purple. There is no way to repeat the formula because there isn't one. How do you add an extra color between random color one and random color two?
HSL stands for Hue, Saturation, and Luminance. To create and evolve a chroma palette that respects the brands' identity, we only adjust luminance values, not hue nor saturation. You do that by defining a clear rule, say increments of
20% rule, you'll be adding lightness (white) and darkness (black) on top of the primary color in steps of
Later, if designers detect the need for a different shade of color, there will be a clear rule for adding them. For example, designers can add a version of blue that is
20% darker than the "Blue120", resulting in a new "Blue140" color.
All in all, this is an approach that we keep when creating systems. The same logic applies to different sections, such as font styles, margins, and paddings.
Sizing and white space are an essential part of the design. For example, in our DS, we always use a consistent sizing rule of multiples of
8. This constraint brings consistency to the design from the smallest atoms to the larger sections, all across the project.
I hope this story on how we moved from Sketch to Figma and how we discovered design systems encourages you to pursue a similar path and stop reinventing the wheel for every new project.