--
Learn things you need to know to get started with Design Tokens.
As a product designer, I used to think of design systems as a buzzword without fully appreciating their power. But since working on the design system at Double Good, I’ve seen firsthand how it can transform the way we develop products. Our system has not only reduced friction in the development process but has also enabled us to maintain consistency and scalability across our products. In this article, I’ll share my experiences and insights on creating a successful design system.
Design tokens are a way of storing and managing design decisions (primitives), such as typography, color, spacing, and animation, in a format that can be used across different platforms and technologies. Design tokens are powerful tools that enable teams to scale their design systems and maintain consistency and coherence in their products. In this article, I’ll explore what design tokens are, why they’re important, and how they work.
Design tokens are not a new concept; they have been used by companies like Salesforce and Adobe for their design systems. However, they are becoming more popular and relevant as the complexity and diversity of the platforms and technologies we use increase. Design tokens can help us create more efficient and adaptable design systems that can meet the needs of our users and developers.
CSS classes are commonly used in web development to apply styles to HTML elements based on their attributes. They are often specific to the technology and platform used to create them. In contrast, design tokens are a set of standardized visual style definitions that can be applied to various platforms, including web, mobile, and even print. Unlike CSS classes, design tokens abstract the visual styles from the specific technology or platform, making them more flexible and reusable.
There are 2 major types of tokens — Alias and Global tokens. Alias tokens, also known as Semantic tokens, are design tokens that serve as a shorthand or alias name for specific design values. They reference another token, allowing designers and developers to reuse values across the system. Alias tokens represent micro-level design decisions such as a specific color, font size, or spacing and help reduce the amount of redundant code and make it easier to update values in the future.
On the other hand, Global tokens, also known as Base tokens, are design tokens that hold a single design value and are intended to be used across the entire design system. They are typically defined at the root level of a design system and are accessible to all components and design elements. Global tokens represent macro-level design decisions, providing a way to manage design elements.
// Define a global token
$global-color: #007FFF;// Define an alias token that references the global token
$alias-color: $global-color;
// Update the global token value
$global-color: #FF6347;
When we started building the token library at Double Good, we faced a dilemma: whether to use Alias or Global tokens. After careful consideration, we decided to go with Global tokens because it made more sense for us at the time. While Alias seemed like the best way to build a token system, the cost of maintaining such a complex system was too high, and the ROI from Alias was lower than that of Global tokens. Additionally, Global tokens served as a good MVP, as we could always switch to Alias later if needed. Although it would be a bit of a pain to switch, it wouldn’t be too difficult.
- Consistency
Design tokens help ensure consistency in design across multiple platforms and applications. By using a shared language for design elements such as colors, typography, and spacing, designers can create a unified look and feel for a brand or product. - Maintainability
Design tokens make it easier to update design elements across an entire system. By changing a design value in a single token, designers can update that value across all design elements that reference that token, without having to manually update each individual element. - Scalability
Design tokens help design systems scale by providing a way to manage and organize design elements. By creating a shared library of design tokens, designers and developers can work together more efficiently and build more complex systems with ease. - Shared Vocabulary
Collaboration between engineers and designers is improved through a shared vocabulary, which leads to fewer human errors and faster development time. The design QAs or handoff become so much faster when the PMs, engineers, and other stakeholders all speak the same language, bridging the knowledge gap between them.
Design tokens are often stored in JSON (technology agnostic) files, which can then be transformed into platform-specific code by tools like Amazon Style Dictionary or Figma API or Theo. This way, you can have a single source of truth for your design system and avoid duplication and inconsistency across your web apps, native apps, and websites. For example, you can define your typographic scale as a set of design tokens, and then use them to generate CSS variables, Android XML, or iOS Swift code.
1. Choosing the Tokens
- Listing all the values these primitives represent. For examples:
Types — Color, Type, Border Radius, Size, Paddings, Shadows, Icons, etc.
Levels — Primary — Secondary — Brand — Tertiary — Content - Creating a structure for the token architecture
2. Naming the Tokens
- The naming convention is one of the most important aspects while creating tokens (I’ll maybe write another article on this later).
- One of the considerations would be to make the tokens semantic and scalable, making it easier for designers and devs to use them and support the products in the future.
3. Execution
- Work with the engineering team to store these tokens into a .json file, and then convert them into technology-specific styles using tools like Amazon Styled Dictionary or Theo.
- Create a single source of truth where you maintain all these properties
- It’s very critical to make all the teams adopt the design token in their workflow.
Currently, design tools do not fully support all styles as tokens, such as padding, animation, and border-radius, but there are some emerging tools such as Figma Design Token and Usearcade.com that are working towards improving tokenization capabilities, which could lead to more exciting possibilities for design systems.
It’s important to build your own token architecture that is tailored to your team’s needs instead of copying others and to stay prepared to leverage advancements in technology to provide a great experience to your users, as design tokens and technology evolve.
- ‘Nathan Curtis’ — Read through his medium articles and follow him for lots of design system stuff!
- ‘Lukas Opperman’ — Read through his medium articles, he extensively writes about tokens.
- GitHub — sturobson/Awesome-Design-Tokens: A list of resources on all things to do with Design Tokens
- Tokens in Design Systems by Nathan Curtis
- How to manage your Design Tokens with Style Dictionary
Thank you for reading this article! Your feedback and comments are always welcome. I recently started writing and will be publishing more soon. If you have any specific topics you would like me to cover, please let me know in the comments.
Thank you again for taking the time to read my work!
