Design tokens: Unified approach to design system implementation
Introduction
In the ever-evolving landscape of design systems, maintaining consistency and efficiency across design and development workflows is paramount. Design tokens have emerged as a foundational concept, providing a systematic approach to encapsulating design decisions. In this comprehensive guide, we’ll explore the intricacies of design tokens and showcase our implementation approach within Standard Design System. We’ll delve into the specifics for both designers and developers, highlighting how we’ve leveraged Figma variables, Style Dictionary, and Storybook to streamline our processes and foster collaboration across disciplines.
Understanding design tokens
Alright, imagine you have a big box of colorful building blocks. Each block has its own special color, like red, blue, or green. Now, let’s say you’re building a beautiful castle with these blocks. Instead of picking random colors each time you add a new block, wouldn’t it be easier if you had a special guide that tells you exactly which colors to use for each part of the castle? That’s kind of what design tokens are! Design tokens are like special instructions that tell us which colors, fonts, and other design things to use when we’re building something on the computer, like a website or an app. Just like your guide for building the castle, design tokens help us keep everything looking nice and consistent. So, if we decide that our castle should have red walls and blue roofs, we can use our design tokens to make sure every part of the castle follows those rules. It’s like magic! And whenever we want to change something, like making the walls pink instead of red, we just update our design tokens, and all our digital castles automatically change to match! Isn’t that cool?
Design tokens serve as the atomic units of a design system, encapsulating key design decisions such as colors, typography, spacing, and more. They provide a centralized repository for defining and maintaining design properties, ensuring consistency across diverse platforms and applications.
Design token types
Design tokens are the building blocks of design systems. Design token adoption ensures unified, flexible and scale-ready design systems.
Design tokens store repetitive design decisions in a platform-agnostic way. Design tokens act as a single source of truth for the design system.
Design decision refers to the choice that the designer makes from the available choices, like choosing a brand color, typeface, or deciding spacing between a heading and paragraph.
Global tokens | Primitives
Global tokens are primitive values. Global tokens refer to a comprehensive list of all available choices within a design system. Global tokens are also known as base, options, choice or reference tokens.
Global tokens represent static values like color hex-code, type size, spacing, etc. Global tokens are context-agnostic and do not have any associated explicit meaning or intent.
Alias tokens | Semantic | System | Theme
Alias tokens are context-specific and reference global tokens. Alias tokens are also known as semantic tokens.
Component tokens
Component-specific tokens explicitly store and represent unique and specific design decisions associated with a particular component.
For designers
Aligning design tokens with brand decisions
Crucially, our design tokens are aligned with our brand’s visual identity and guidelines. Each token reflects a specific aspect of our brand, from primary and secondary colors to typography styles and spacing guidelines. By ensuring that design tokens directly correspond to brand decisions, we maintain a cohesive brand experience across all digital assets.
Automated cascading to digital assets
One of the key advantages of utilizing design tokens is the automated cascading of brand decisions to digital assets. When a change is made to a design token — such as updating a primary color or font style — it automatically propagates to all digital assets that reference that token. This automated process ensures consistency and accuracy across our digital ecosystem, minimizing the risk of discrepancies and errors.
Defining design tokens -aka variables- in Figma
Our journey into design tokens begins within Figma, our primary design tool. Designers play a pivotal role in defining and organizing design tokens using Figma variables. By establishing a comprehensive library of variables, designers create a single source of truth for design decisions, streamlining the process of updating and iterating on our design language.
Organizing tokens for clarity and efficiency
Effective organization of design tokens within Figma is essential for clarity and efficiency. We categorize tokens into logical groups such as colors, typography, spacing, and components, ensuring easy accessibility and maintenance for both designers and developers.
For developers
Exporting design tokens with Style Dictionary
With our design tokens defined in Figma, the next step involves exporting them into a format that developers can utilize within their codebase. Enter Style Dictionary — a powerful tool that transforms design tokens into platform-specific assets. Developers can leverage Style Dictionary to export tokens into various formats such as JSON, SCSS, and more, ensuring compatibility across different development environments.
Integration with Storybook for seamless component development
Integrating design tokens into our development workflow is seamless with Storybook — an indispensable tool for building UI components in isolation. By incorporating design tokens into our Storybook setup, developers gain access to a unified set of styles and behaviors, ensuring consistency and efficiency in component development.
Standard Design System implementation
Standard implements design tokens using Figma variables to define colors, borders, spacing and breakpoints. Figma variables are exported as a JSON file, then parsed with Style Dictionary and updated on Storybook and GitHub as CSS design tokens.
Standard hybrid design token approach
Standard employs a hybrid approach to design tokens, utilizing primitive tokens to store values such as hex color codes and pixel spacing. These primitive tokens are not directly applied to components. Instead, they are assigned to semantic tokens, which represent meaningful design decisions applied across Standard. These semantic tokens are then applied to the components. Finally, if there is a component-specific design decision that cannot be addressed with semantic tokens relevant to the entire design system, we utilize component-level tokens.
- Primitive tokens are value based and store color, spacing, radius, border and breakpoint.
- Semantic tokens are meaningful and store design decisions that are applied across the UI. For instance, white is the base background color, and the same token std-semantic-color-bg-base is applied to many components for light mode, in dark mode the token value switched to deep blue.
- Component tokens store design decisions specific to the component that cannot be solved using semantic tokens. For instance, Standard cards light blue variant uses std-component-card-color-bg-lightblue.
Benefits of our approach
- Consistency: Design tokens serve as the cornerstone of our design system, promoting consistency across all our applications and platforms.
- Efficiency: By abstracting design decisions into tokens, both designers and developers can work more efficiently, saving time and effort in the process.
- Flexibility: Design tokens provide the flexibility to adapt and evolve our design system over time, empowering us to iterate and refine our design language as needed.
- Collaboration: Our implementation of design tokens fosters greater collaboration between designers and developers, enabling them to work closely together towards a shared goal of creating exceptional user experiences.
Conclusion
In conclusion, design tokens represent a paradigm shift in how we approach design system implementation, offering a unified approach that bridges the gap between design and development. By leveraging Figma variables, Style Dictionary, and Storybook, we’ve established a robust foundation for Standard Design System, enabling us to deliver cohesive and polished user experiences across all our digital products. As we continue to refine and expand our design system, design tokens will remain at the forefront of our approach, driving consistency, efficiency, and collaboration across our organization.
