A design systems tale, how Figma changed our workflow

It's really 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.

Marcelo Brum avatar
Mar 16, 2021
An illuminated roadPhoto by JOHN TOWNER on Unsplash

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!

designer materials

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.

Enter Figma

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.

people starring at a screen

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.

cards samples

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.

color swatch

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.

color swatch

One common mistake designers without much experience building systems fall into is to add shades of a color based on perception.

blue palette

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%.

In this 20% rule, you'll be adding lightness (white) and darkness (black) on top of the primary color in steps of 20%.

blue palette in HSL

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.

Sustainable sizing

a design system spaces implementation

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.

Final thoughts

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.