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

Medium's largest active publication, followed by +756K people. Follow to join our community.

Celine Fucci

Written by

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

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Celine Fucci

Written by

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

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store