Efficient Design System Practices

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

Celine Fucci
The Startup
4 min readJan 10, 2021


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.

Design systems are extremely complex and it can be easy to get caught up in the details. This is why designers must find ways to speed up their workflows. Maximizing time becomes top of mind when you have a looming deadline or a stakeholder presentation. Additionally, designers can create solid relationships with developers when they learn how to better gauge technical feasibility and capabilities.

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.

These design tokens are usually stored in a JSON file. JSON stands for JavaScript Object Notation. As a designer, it’s relatively simple to get started with JSON. I recommend downloading a Figma plugin called Figma Tokens. The plugin comes pre-installed with this JSON file pictured below.

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


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


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!