Upgrading Design System Libraries with Alias Tokens

Enhancing Flexibility, Consistency, & Development Efficiency With Design Tokens

Introduction

The evolving landscape of web design demands flexible and scalable systems. At the core of this evolution is a powerful concept: design tokens.

What are Design Tokens?

Design tokens are named entities that store essential interface design attributes such as colours, typography, spacing, and more. As the foundational elements of visual design, these tokens enable designers and developers to create consistent and scalable interfaces by storing style information in a reusable and systematic manner.

Instead of hardcoding styles into individual components, developers can reference tokens. This approach fosters a more systematic and manageable method for implementing design choices and ensures consistent reuse across the platform.

Why Are Design Tokens Essential?

Enhancing Flexibility

• Shared Repository: Design tokens are a central repository for design choices, allowing teams to reference them across the platform.
• Trackstyle Choices: By storing and tracking every design attribute, teams can easily tweak, maintain, and apply changes as design trends or project needs evolve.

Promoting Consistency

• Single Source of Truth: Tokens provide a unified resource for documenting design decisions.
• Unified Look & Feel: Applying tokens ensures design consistency across the platform, creating a seamless user experience.
• Swift Application of Design Changes: Designers can make changes swiftly and confidently, knowing they will propagate uniformly across all touchpoints.

Simplifying Development

Easy Access to Design Attributes: Developers can quickly access and apply the latest design tokens in their code, reducing errors and miscommunication between design and development teams.

Global Tokens

Global tokens are context-agnostic, meaning their names describe their values without tying them to a specific design use case. Key characteristics include:

• Context-Agnostic Naming: The name reflects its value rather than its intended use. For example, a global colour token might represent the hex code. #000000.
• Value-Descriptive: The name mirrors the specific value, clarifying the stored attribute.

Example of Global Tokens: Colour

• Global token name: ds-color-mineShaft
• Associated value: #000000

Fig 1.1 — Monochrome global tokens (local variables) are versatile across components due to their lack of specific design context.

Alias Tokens

Alias tokens offer more context and specificity by naming tokens based on their intended use. This gives developers and designers a clearer understanding of the token’s purpose within a design component.

Characteristics of Alias Tokens

• Contextual naming: Alias tokens reflect their purpose within a design system. For example, instead of focusing on the value, they might be named Content > Default to represent a default content colour.
• Reference to Global Tokens: Alias tokens reference global tokens, maintaining a seamless front-end implementation.

Example of Alias Tokens: Colour

• Alias Token Name: Content > Default
• Global Token Name: ds-color-mineShaft
• Associated Value: #000000

Fig 2.1 — Content alias tokens reference global tokens for their values, enabling more meaningful naming and context.

Fig 2.2 — Colour / Content alias tokens (local variables).

Fig 2.3 — Colour / Monochrome global tokens (local variables).

This approach allows for more descriptive and meaningful token names, which aids designers and developers in more easily understanding the context of each token.

Library Updates: The Shift From Global to Alias Tokens

The transition from global tokens to alias tokens involves:

• Global Tokens Switched Off: Inactive global tokens for new component designs.
• Alias Tokens Switched oOn: Alias tokens become the standard, with all new components and design updates referencing them.

This upgrade enhances the design system’s usability and efficiency, enabling organisations to scale and iterate faster while maintaining consistency across the platform.

Feedback & Adoption

To ensure a smooth adoption process, follow these steps:

1. Accept Library Updates: Designers are notified with a blue badge on the Libraries icon in Figma, ensuring changes are quickly reviewed and implemented.
2. Use Alias Tokens For New Features: Apply alias tokens to all new features. Legacy web components will continue using global tokens until phased out.
3. Establish a Feedback Mechanism: Create a communication channel to capture feedback about alias tokens. Open communication helps address issues or suggestions effectively.

Summary

Upgrading your design system from global to alias tokens is crucial for enhancing design flexibility, promoting consistency, and simplifying development. Alias tokens provide more contextual and meaningful names, making it easier for designers and developers to understand and apply design decisions effectively. This transition streamlines the design process, ensures a cohesive user experience across the platform, and enables quick, confident design iterations.