Making design systems flexible with Design Tokens
In this article, we will discover the benefits of using Design Tokens with your own Design System.
Can you create a design system that’s flexible, able to adjust to whatever design decisions you throw at it and be easy to use at the same time?
That’s what myself and Marc Andrew set out to do recently. Let me share my thoughts.
Oh. Before you read the rest of the article…
🏠 Growing a SaaS startup? I combine strategic design with proven founder experience to help you build products users love.
Join the Haus waitlist for early-bird perks → https://gohaus.design/
Several months ago, Marc and I got together to start talking about ways to introduce the concept of Design Tokens into Marc’s design system; Cabana. With the help of my plugin Figma Tokens, it could be easily doable while keeping all design decisions in a format that’s easily transformable to something useful for engineers: JSON.
Design Tokens are design decisions stored in a platform-agnostic way. Meaning decisions such as colours, typography, border radii, spacing etc., are all stored so that other tools can pick them up or transform them into something a development team can use. It was the idea that we could have one source of truth for design and development, effectively bridging a gap between the two.
The W3C Design Tokens Community Group is currently working on a draft to standardise this new format, making it much easier for tools like Figma to talk to transformers or other vendors, making design decisions independent of the tool they were built in.
When I think of a fully-tokenised Cabana, I imagine a design system that we’re able to customise in every aspect. Colours, typography, shadows, spacing and sizing values or border radii are all properties that make up a design. By giving designers the ability to quickly re-theme these, you give them superpowers to bring their brand’s aesthetic into Cabana.
Creating a fully tokenised design system is challenging, so we wanted to bring value to customers as soon as possible. Adopting a system like Cabana makes customising design decisions according to your brand an easy task.
With this first version of Cabana & Design Tokens, we’re shipping Colours and Shadows. But we won’t stop there. We’re working on tokenising Typography as a second step, allowing you to customise the base font family of Cabana easily or create different themes with different type in a matter of seconds.
Here’s a few things that get me excited about working with design tokens and Cabana…
Instantly re-theme according to your brand
By bringing semantic colours with smart aliases to a global colour palette, designers don’t have to second-guess what colour to apply for a background. They don’t have to choose between grey.100 or white. Instead, they’d apply a design decision with an example name of background.canvas. By using this approach, changing from light to dark mode is only a matter of switching the values this colour has, instead of re-applying the dark colour styles.
Creating new themes is a matter of seconds, not hours
Once set up correctly, creating a new theme is much easier than before. You’d use an existing theme as a basis and apply new decisions, e.g. switching the source for background.canvas from white (in light mode) to black (in dark mode). Or changing your accent colour from blue to the colour your brand is using, e.g. red. With all those smart aliases in place, you don’t have to re-apply new styles. Instead, the applied styles stay the same, only their value changes.
Sync to code, one source of truth
As our design decisions would be stored in a format code can read, we can utilise Style Dictionary to transform all of them to a format we require them in. Think of the web, where we could use CSS variables, a Tailwind or a CSS-in-JS config like Stitches. The benefit of this is that we could use our design tokens file as the one source of truth for both design and development. Changing a colour would only require a designer to make the change, with all that’s left for engineering to do is approve a pull request.
With this first release of Cabana with design tokens, we’re only using a portion of what’s possible. I’m excited to bring you in on that progress as we add more value by adding typography, border radii, spacing and sizing tokens to Cabana.
Oh. Before you go…
🏠 Growing a SaaS startup? I combine strategic design with proven founder experience to help you build products users love.
Join the Haus waitlist for early-bird perks → https://gohaus.design/
