Efficient Design System Practices
Ideas for designers looking to maximize their time and increase collaboration with engineers
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 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.
To add the design token values to your Figma file, load up the plugin and click the “Create Styles” icon in the Tokens tab.
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.
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.
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.
- Copy one of the templates from the plugin
- Navigate to your Figma file
- Create a page called “Style Guide”
- Paste the template from Step 1 into this new page
- With the template selected, run the plugin
- See your style guide document magically created within a few seconds
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!