Decoding Compound Tokens
Discover why bundling multiple properties in one token challenges the core principle of "one token, one value".
Welcome back to the uniquely dedicated newsletter on design tokens!
In this issue, let's dive into a crucial aspect of design tokens — the concept of "compound tokens."
Design tokens have shaken up how we maintain consistency in our designs, but it's crucial to ponder the implications of straying from the fundamental "one token, one value" principle.
Remember: design tokens should stick in your memory.
If they don't, no one's gonna use them.
What are compound tokens?
Compound tokens are like the swiss army knives of design properties.
They're tokens that pull together multiple design aspects into one, like a superhero of tokens.
Instead of juggling a bunch of individual tokens for every property, you can create a powerhouse token that wrangles various aspects together.
How they work
Alright, so compound tokens roll with the semantic (or alias) tokens. The values inside them? Well, those are the global (or core) ones.
But, wait a second, why not just use the global tokens directly?
Good question! If all you're doing is creating token squads, maybe it's better to stick with the global tokens. Plus, how the heck do you remember which global tokens are jam-packed into a compound semantic token?
Let's crack this nut open by looking at a classic example - a typographic style.
Example: the typographic style
One of the most obvious examples of compound tokens is a typographic style.
In Figma, when we're feeling all design-savvy, we create a typographic style with a bunch of properties (family, size, weight, line height, etc.) snuggled under one funky name.
Now, in CSS land, we get the same vibe using a class (or a mixin in Sass, but not a variable!) that packs in those Figma-style properties.
/* Compound Token as CSS class */
.headline-default {
font-family: 'Mona Sans, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 36px;
}For instance, meet the .headline-default class, our token superhero combining multiple typographic properties.
But hold up – while this seems like an efficient move, it can throw shade on the "one token, one value" rule.
The Consequences
1. Reduced Modularity
Compound tokens shake up the modular vibe of design tokens. Tweak one property, and suddenly, you're affecting the whole gang.
2. Maintenance Challenges
Updates turn into a designer's scavenger hunt through compound tokens to find and modify specific values.
3. Inflexibility
Design tokens should be like chameleons, adapting and blending in. Compound tokens, on the other hand, tie different properties together, cramping their style.
Other cases
Look, it's not just the typographic styles. Similar token huddles happen with borders, shadows, or animations.
These bad boys group a bunch of properties, making it a designer/developer's dream (or nightmare) to remember.
In the example above, the three tokens related to shadow go all-in, bundling offset-x, offset-y, blur radius, spread-radius, and color.
Sure, it's easier to remember a single name than a shopping list of properties, but at what cost?
Limit the usage
While we're all about pushing boundaries, let's not go wild with compound tokens. Use them wisely, like a spice in a gourmet dish.
Fixed component styles: if a particular component is all about a set of properties, give it a compound token. Just don’t go overboard.
Exceptional cases: for those oddball moments where you need a unique blend of properties, a compound token is your design superhero cape.
Optimizing for performance: when the number of tokens is clogging up your design system like a bad hair day, consider sneaking in a few compound tokens for that sweet optimization.
In conclusion, the world of design tokens is ever-evolving, and our exploration doesn't end here.
The delicate balance between efficiency and design principles is a dance that continues with each project.
Remember, design systems are dynamic, and adaptability is key.
Stay tuned for more exciting updates, deep dives, and practical tips in the realm of design tokens. 🙌