What are Design Tokens?
Design tokens serve as a linchpin in digital product design, anchoring the visual language of a product to a system of values that reflect the brand’s identity. These named entities store visual design attributes and are instrumental in creating a uniform design system across different platforms and devices. Be it colors, typography, spacings, animations, or other aspects, they encapsulate a broad spectrum of a product’s style guide. To exemplify, a design token representing a particular color eradicates the need for coding multiple elements with the same hex color code. A change in the token directly applies to all instances where the token is utilized, thereby streamlining the process.
Who are the users Design Tokens serve?
Design tokens are primarily employed by three groups – product designers, engineers, and sales/marketing teams. Each faction uses tokens to ensure design consistency across different digital assets and platforms. The dynamic nature of design tokens sets them apart from static design components such as a style guide color palette. Unlike the latter, design tokens offer flexibility and efficiency – when a color or any other attribute needs an update, only the relevant token needs to be changed, and the alterations automatically reflect across all instances where the token is used.
While the properties of design tokens emanate from the brand identity, the final say on the source of truth generally resides with the system design team. It’s their responsibility to create, manage, and update tokens as required, ensuring their uniformity across the design system. However, the marketing department or agency responsible for designing the branding guidelines should also be involved in discussions to guarantee a unified look and feel across all channels.
How to name Design Tokens
A well-defined naming convention enhances the utility of design tokens. The names should be descriptive, representing what the token is used for. For instance, a specific color can be denoted as “primaryColor” instead of a generic “color1”. Consider structuring your naming conventions based on token type (color, spacing, typography) or token level (global, theme, property) to enhance clarity and ease of use.
Variables from Config 2023 are in Figma, how do they work?
Design tokens and variables are integrally linked in platforms such as Figma. Variables in Figma, which are now replacing some “styles”, can represent properties like color, number, string, or boolean values. Once these variables are created, they can be applied to various design elements. Establishing these variables can be achieved by clicking on the “Local Variables” button in the right-hand sidebar and adding the desired key/value pair. These variables can then be grouped and linked to upstream tokens, facilitating easy duplication and efficient organization.
Will Design Tokens reduce by creativity as a product designer?
Far from stifling creativity, design tokens provide a consistent framework within which innovation can thrive. They help uphold design consistency and coherence while leaving room for creative exploration within set boundaries. However, it’s not necessary to utilize all the tokens while designing a product. Tokens should be employed where they make sense and add value, while creative options outside the defined tokens can be explored as deemed suitable.
Don’t we already have Engineers using Variables in code today?
While developers often use variables in code, design tokens provide an additional layer of efficiency by offering a shared language between design and development. These tokens can be transformed into different platform-specific code, facilitating a smoother transition from design to development. Tools like Amazon’s Style Dictionary can convert tokens into formats suitable for iOS (Objective-C, Swift), Android (XML), Web (CSS, SCSS, HTML, JS), and other platforms, thereby ensuring design consistency everywhere.
Levels of Design Token Architecture
The purpose of global tokens is to keep promotional/seasonal colors constant, facilitate downstream changes to all linked tokens, and provide a range of options for future changes.
Theme tokens, on the other hand, link their values to global tokens upstream, thus adhering to the principle of ‘Don’t repeat yourself’.
Property tokens reflect the practical application of styling properties to elements and resemble CSS class names.
What are the advantages of using design tokens
The advantages of using design tokens are manifold. They allow for a scalable naming convention, consistent application of styling properties, built-in accessibility, and a faster, more efficient design and development workflow. Furthermore, they simplify maintenance and reduce errors, particularly useful in complex systems that need to be consistent across multiple platforms. Indeed, design tokens have revolutionized the digital product design landscape, fostering efficiency, consistency, and scalability in an ever-evolving ecosystem.
A product that has an aesthetic consistency and uniformity enhances the user’s experience and reinforces brand identity. How do we accomplish this across a range of platforms and channels, from web and mobile applications to marketing materials? This is where the concept of “Design Tokens” comes into play.
Design tokens, the atomic design elements in a design system, store the aesthetic attributes that you want to keep consistent throughout your products, regardless of the platform or device it’s displayed on. These entities embody a multitude of design aspects from your style guide like colors, typography, spacings, and animations. Instead of manually coding these elements with specific values (such as a hex color code), you create a design token to symbolize that value. Then, this token is employed across your system, so when you need to modify the color in the future, you only adjust the token, and this alteration will apply universally.
User Segments of Design Tokens
Design tokens are primarily used by three groups of professionals: Product Designers, Engineers, and Sales/Marketing teams. Product designers utilize tokens to construct consistent and uniform designs, Engineers apply them to translate designs into code, and Marketing teams leverage tokens to ensure that brand aesthetics are coherent across various digital touchpoints.
Design Tokens vs. Style Guide Color Palette
While a style guide color palette is a static compilation of colors for use in designs, design tokens offer a dynamic solution. The flexibility and efficiency of design tokens stem from their dynamic nature, which enables global changes to be made to an attribute (like color) through a single modification in the token, as opposed to changing it everywhere it appears in the design.
Source of Truth in Design Tokens
The ultimate authority on the truth of design tokens usually falls on the System Design team. This team is responsible for creating, managing, and ensuring consistency across the design system and updating tokens as required. However, the brand identity should be taken into consideration, which means the Marketing Department or Agency who designed the branding guidelines should be involved to ensure a unified aesthetic.
Naming Conventions in Design Tokens
A structured and meaningful naming convention is essential for design tokens. A token’s name should reflect its purpose – for instance, a specific color token could be named “primaryColor” rather than a vague “color1”. The structure of naming conventions can be based on the token type (color, spacing, typography) or the token level (global, theme, property), enhancing clarity and understanding for all token users.
Variables in Figma and Design Tokens
In the design tool Figma, variables, which are replacing some “styles”, serve a similar purpose to design tokens. They can be created for properties like color, number, string, or boolean values and can be applied to various design elements.
Creating a variable in Figma involves deselecting any frames and clicking on the “Local Variables” button in the right-hand sidebar. A collection (for instance, “Global”) is named, and then desired key/value pairs are added using the “+” button. Groupings of variables, such as “Lavender”, can then be created, which can be duplicated to save time when building out your design tokens.
Creativity and Design Tokens
Design tokens do not stifle creativity but rather provide a structured framework within which creativity can thrive. They help maintain design consistency while providing freedom to develop innovative and creative solutions within those boundaries. You’re not obliged to use every token in every design. Use tokens where they make sense and add value, and feel free to explore outside the defined tokens when it’s appropriate.
Design Tokens and Code Variables
Engineers commonly use variables in code. However, design tokens provide a bridge between design and development by providing a shared language. They can be converted into different platform-specific code, making the transition from design to code smoother and more efficient.
Compiling Design Tokens for Different Platforms
Tools like Amazon’s Style Dictionary allow for the conversion of design tokens into platform-specific formats such as iOS (Objective-C, Swift), Android (XML), and Web (CSS, SCSS, HTML, JS). This means the same tokens can be used across different platforms, ensuring design consistency.
Levels of Tokens and Their Purpose
Design tokens can be categorized into three levels: Global, Theme, and Properties.
Global tokens are like a library of all possible color palettes (including seasonal or non-digital use) that ensure promotional colors remain constant. Any changes flow downstream to all linked tokens, providing a range of options for future modifications.
Theme tokens, which link to Global tokens, handle changes at this level. Most of the global colors are not linked, so making changes at the global level could result in wasted effort. The principle here is DRY – Don’t Repeat Yourself.
Property tokens are named to reflect their practical application in styling properties to elements. The naming at this level should balance clearly defined but not overly specific names to prevent ambiguity and bloat. For example, “Interactive-Primary-Enabled” or “Static-Surface-Primary”.
Advantages of Using Design Tokens
The use of design tokens streamlines the design-to-development process, reduces errors, and facilitates the implementation and maintenance of design systems. It’s particularly useful when dealing with complex systems that need consistency across various platforms, as tokens can be transformed into platform-specific formats. Other advantages include scalable naming conventions, consistent application of styling properties, built-in accessibility, faster and easier maintenance, and a quicker design and development workflow.
In conclusion, the Pegasus Token Naming Standard represents a significant step forward in the effective management of design systems, enhancing consistency, efficiency, and the overall quality of digital products across platforms. By fully understanding and implementing this standard, organizations can significantly enhance the effectiveness of their design and development processes.
With the comprehensive overview of design tokens and the Pegasus Token Naming Standard, let’s delve deeper into some additional areas:
Pegasus Token Naming Standard vs. Other Naming Standards
The Pegasus Token Naming Standard has its unique benefits compared to other naming standards. While most other naming conventions primarily focus on the specifics of design tokens, the Pegasus standard follows a more structured approach, aligning each token type to its specific level (Global, Theme, Property). This enhances clarity and reduces confusion among the team members who interact with these tokens.
Design Tokens and Future Technologies
Design tokens play a crucial role in accommodating future technologies. They are platform-agnostic, meaning they can be easily translated into any platform-specific code. This provides a future-proof way of maintaining consistency in design systems even as technology continues to evolve.
Feedback Mechanism and Iterations in Design Tokens
Design tokens should not be static; instead, they should evolve with the needs of the product and the users. A robust feedback mechanism allows designers and developers to understand how tokens are being used, what’s working, and what needs improvement. This continuous feedback and iterative process ensure that design tokens remain relevant and effective.
The Impact of Design Tokens on the End-Users
While design tokens might seem like a technical or design-focused concept, their ultimate goal is to enhance the end-user experience. Consistent design contributes to improved usability and user experience. When the aesthetic elements of a product remain consistent across platforms, it makes the product more predictable, approachable, and easier to use for the end-users.
Design Tokens and Accessibility
Design tokens can play a pivotal role in improving accessibility. By defining specific tokens for accessibility needs (like contrast ratios, font sizes, etc.), products can be made more accessible and inclusive. Furthermore, any changes required for accessibility can be made at the token level, ensuring that they are implemented consistently across the design system.
Conclusion
As the digital landscape continues to evolve, design tokens are proving to be an indispensable tool in managing design systems. They bridge the gap between design and development, enable consistent branding, and facilitate a smoother design-to-development workflow. By implementing the Pegasus Token Naming Standard, organizations can reap these benefits while also enhancing their design system’s clarity and usability.
Posted by
Leave a Reply