Let’s talk design tokens and the lessons we learned! In our quest for a stellar design system, we embarked on the exciting journey of implementing them –– and well, we encountered some roadblocks.
The initial setup was smooth. Our design team had recently switched from Sketch to Figma, and this presented a golden opportunity to integrate design tokens. While Figma didn’t offer much in terms of native token support at the time, we leveraged the Tokens Studio plugin and quickly established a solid foundation.
However, exporting those tokens and integrating them with the app using CSS variables proved trickier. LESS, our preprocessor of choice, threw errors whenever we attempted calculations on size tokens or color adjustments.
Here’s the honest truth: the business value of this overhaul wasn’t entirely clear. The initial setup benefited from the Figma migration, but the work required to finalize the entire system hadn’t been fully communicated to leadership. This resulted in limited resources – developers were strapped for time, and the build pipeline setup fell solely on my shoulders, with only a few scattered days available to make progress. The process felt frustratingly slow. I spent countless hours troubleshooting errors and updating my branch with new features, with little to show for all that effort.
After roughly a year working on them on and off, I realized a different approach was needed.
Learning from Our Missteps: A New Dawn
We’re taking a fresh approach inspired by the MVP (Minimum Viable Product) philosophy. We’re starting simple, focusing on color tokens first. Here’s why colors are a great starting point:
- Easiest token on the block: Color tokens are the low-hanging fruit of token implementation. They’re well-supported by design tools and offer a readily noticeable change in the interface when customized.
- Theming magic: Color tokens pave the way for a more adaptable user experience, enabling features like dark mode and high contrast themes.
- Client customization: Imagine empowering clients to tailor the app’s color scheme to their brand! It’s a win-win for everyone.
A Design System isn’t a Project. It’s a Product, Serving Products
Nathan Curtis
From Manual to Marvelous: Building a Scalable System
I’m currently testing the MVP I just finished. While it involves several manual steps for now, it’s functional enough to prepare a small demo for our Customer Success and Sales teams. This will showcase the possibilities for future app releases.
Since I’m working solely with colors, identifying unmigrated areas of the app is straightforward. I’ve set all colors to red, making the outdated sections (using their original colors) stand out, ready for the token upgrade.
Once complete, we’ll have already delivered tangible value. The next step is to solidify our internal processes. Currently, I’m using Token Configurator, a playground for Style Dictionary, to translate JSON tokens into CSS variables. This tool also provides an “eject” feature to export the setup for independent execution. We’ll focus on building a robust build process and then explore exporting directly from Figma and the Tokens Studio plugin.
When our pipeline feels robust, we’ll progressively add new token types like typography and spacing, following Agile principles and iterating until we have a comprehensive system.
The Takeaway: Design Systems as Products
Here’s the key takeaway: those inspiring design system stories from mega-corporations with endless resources? They shouldn’t set unrealistic expectations, but rather serve as visions for the future.
Design systems, especially for smaller teams, need to function like any other product – focused on delivering value, prioritizing MVPs, and employing agile methodologies. By keeping these principles at the forefront, we can all build design systems that empower our teams and elevate the user experience, regardless of resource constraints.
So, here’s to the next chapter in our design token saga! I’ll keep you posted on our progress, and who knows, maybe you’ll learn something valuable from our journey too.