Efficient Design System Practices

Ideas for designers looking to maximize their time and increase collaboration with engineers

Celine Fucci
Jan 10 · 4 min read
Two people working together in tandem — a woman holding a computer writing on a whiteboard and her teammate following along.
Photo by Kaleidico on Unsplash

Working cross-functionally with product managers, engineers, and stakeholders is a critical part of being a designer. A key area that requires collaboration between designers and developers is design systems. As Andrew Couldwell explains in his book, Laying the Foundations:

A design system will go nowhere without developers. A beautifully designed library of design components is useless if it lives only in design software and documentation. It has to be built, deployed, maintained, and scaled.

I’m by no means an expert on this topic. In fact, I’m still learning — aren’t we all? I’ve been attending a few design system meetups recently and have learned a few tips that I thought I would share.

Design Tokens

Design tokens are a key part of scaling design systems, especially across enterprise environments. They save time, ensure consistency across platforms, and increase efficiency. I like how Adobe defines them in their Spectrum design system:

Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data.

A JavaScript Object Notation file listing spacing, sizing, border radius, and border width values.
A JavaScript Object Notation file listing spacing, sizing, border radius, and border width values.
Snapshot of a JSON file — Figma Tokens plugin

To add the design token values to your Figma file, load up the plugin and click the “Create Styles” icon in the Tokens tab.

A snapshot of the Figma Tokens plugin with the mouse hovered over an option called “Create Styles.”
A snapshot of the Figma Tokens plugin with the mouse hovered over an option called “Create Styles.”
Tokens tab — Figma Tokens plugin

And just like that, you have an array of type styles, color styles, and spacing parameters to work with. So, how does this help you? Well, imagine you use the default blue brand color in 12 different screens across your app. Let’s change it to red in the JSON file. Once I click “Save & Update” in the Tokens plugin, the blue I used in those 12 screens will now change to red. This increases efficiency big time. It’s also easier than manually adding type and color styles in Figma.

I learned about this plugin from a meetup I attended, so if you’re curious and would like to learn more, I recommend watching the recording. Feel free to check out Part 1 as well.

Naming

If you don’t have a system in place for naming layers or design system files, things can get out of hand quickly. In the past, I’ve used a concept called BEM to name layers in my files. So far, it has worked out pretty well, but I’m always iterating for clarity and simplicity. As for naming files, I’m still studying up on this concept. It involves using shared libraries in Figma (a premium feature). Along with the videos linked above, this presentation deck is a great resource for settling on a file naming convention.

Style Guides

So far, maximizing time has been a theme throughout this article. A design deliverable that certainly will eat up a lot of time is a style guide. What if there was a way to take those type and color styles we added to Figma above and create a consumable document out of them? Enter the Style Guide Generator plugin.

This plugin comes with two templates out of the box. It’s quite simple to get up and running.

  1. Copy one of the templates from the plugin
  2. Navigate to your Figma file
  3. Create a page called “Style Guide”
  4. Paste the template from Step 1 into this new page
  5. With the template selected, run the plugin
  6. See your style guide document magically created within a few seconds
The output of the Style Guide Generator plugin in Figma — an auto-generated style guide with gray HEX and RGB color values.
The output of the Style Guide Generator plugin in Figma — an auto-generated style guide with gray HEX and RGB color values.
Color Styles — Style Guide Generator plugin

In all honesty, I can’t believe I didn’t discover this sooner. I’m just thinking about all of the hours I’ve wasted creating a style guide from scratch.

Conclusion

Maximizing time and increasing collaboration between cross-functional partners such as developers is something we’re always looking to improve on as designers.

Thanks to the folks at UX+Fajitas for hosting events on building scalable design systems. If you’re interested in learning more, I recommend checking out one of their events!

The Startup

Get smarter at building your thing. Join The Startup’s +745K followers.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +745K followers.

Celine Fucci

Written by

A detail-oriented product designer focusing on design systems, interactions, and research — celinefucci.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +745K followers.