Streamlining Your Design Workflow with The Power and Versatility of Design Tokens.
When building your design system, you'll undoubtedly encounter the term "design tokens" frequently. Properly configured, these tokens can seamlessly impact your entire production process, from design to development, with only a few atomic decisions. In this post, we'll explore the fundamental concepts behind design tokens and their potential to revolutionize your workflow. Additionally, we'll emphasize the importance of a solid branding strategy and brand position in defining design tokens from the get-go.
Combining Branding Strategy and Brand Positioning with Tokens: A Powerful Approach
Before delving into design tokens, it's essential to acknowledge the significance of a robust branding strategy and brand position. A well-defined brand identity sets the tone for your design system and acts as a guiding force in shaping design tokens that align perfectly with your brand ethos.
Understanding your brand's personality, values, target audience, and unique selling points empowers you to create design tokens that reflect your brand's essence consistently. Design tokens, in turn, become more than just technical components; they embody your brand's character and enhance user experience across your entire product lineup.
Honest mistakes
Now, let's return to a common scenario in software development. Have you ever experienced the frustration of rebranding an app or website, experimenting with different color HEX values and elevation codes, only to discover inconsistencies in the final appearance? This common issue in software development can be addressed more effectively through a better solution.
Enter design tokens
Design Tokens serve as the single source of truth for style decisions across creative tools and coding languages. They can encompass a wide range of elements, such as colors, fonts, shadows, border radius, spacing, animations, and icon sizing. By applying design tokens to your codebase, you can efficiently update multiple products at once by modifying a few global values.
Incorporating Branding Strategy into Design Tokens
A well-thought-out branding strategy should influence the creation of design tokens from the outset. Colors, typography, and other design elements derived from your brand guidelines should be seamlessly integrated into design tokens, ensuring consistency throughout your products.
The Rise of Design Tokens
Design tokens have become a hot topic within the design community, bridging the gap between designers and developers by adopting practices long used by developers. Recent interest can be attributed, in part, to design tools catching up with the hype.
The key realization was that if developers can benefit from tokens, designers should also incorporate them into their workflows and seamlessly hand them off to production, or vice versa—tokenizing components and maintaining consistent design elements.
Example of Design Tokens
Global Tokens:
Global tokens act as the foundation from which other alias tokens inherit their values.
Alias Tokens:
Alias tokens reference global tokens, enabling the creation of color variations, spacing calculations, border-radius adjustments, and more from a single source token. A change to the source token automatically updates everything, making it an efficient way to handle rebranding or building new elements within an existing system.
For instance, a button token might look like this:
Those tokens will compose your CTA button's color styles - there are others for border ratios, spacing, etc - with your brand's primary color. You don't even have to know the raw value to understand what's it for. That's the idea behind it.
Using these tokens throughout your HTML structure and Sass stylesheets allows you to easily update raw values later by modifying the style guides, effortlessly updating your software.
Implementing Brand Position in Design Tokens
Your brand position, which differentiates you from competitors, should also be translated into design tokens. For example, if you are known for a bold and vibrant brand personality, design tokens can encapsulate vibrant color variations and daring typography choices to maintain brand consistency.
How Design Tokens Are Created
There are various approaches to creating design tokens. You can utilize a JSON file imported into design tools like Figma and Sketch to establish styles and integrate them into your design system. Additionally, plugins like Figma Tokens can help manage tokens, creating them from existing styles and facilitating the creation of new ones. Moreover, these plugins can sync to GitHub, enabling actions that translate the tokens into style guides. This ensures you can apply the styles across multiple platforms, making design tokens technology agnostic. Some tools, like Zeplin, can even handle the entire process for you, seamlessly translating tokens into style guides and stylesheets.
Figma Design Tokens Plugin
Here are a few of our favorite plugins that will let you create design tokens for free — all have premium plans for more advanced users. You may find a few of these available for Sketch, but we mainly use Figma, so we can only speak to that.
Tokens Studio for Figma (Figma Tokens): A comprehensive plugin for managing all aspects of your design systems. It lets you create and adjust global design tokens like border radii, spacer units, color, and typography styles. You can apply these tokens across your Figma files and even push changes to GitHub for developers to apply in their projects. Visit Tokens Studio for more information.
Design Tokens: This plugin streamlines design workflows by enabling the creation and management of various design tokens such as colors, typography, grids, and more. It's compatible with Amazon Style Dictionary, supports Figma Styles and custom tokens, and allows syncing directly with GitHub. This actively developed tool is essential for maintaining consistency and efficiency in design projects. Visit this community page for more information.
Backlight: An all-in-one solution for front-end teams to build, ship, and manage design systems efficiently. It facilitates collaboration across disciplines, offering features like a visually-organized component library, live documentation, and visual pull-request reviews. Unique for its code-centric approach, Backlight also provides a Figma plugin allowing designers to generate UI kits from code, ensuring seamless integration between design and development. It supports various technologies including React, VueJS, and CSS3, aiding teams in kick-starting their design systems with ease. Visit Backlight for more information.
w3c Design Tokens
One of the key benefits of using W3C design tokens is their ability to promote collaboration and efficiency among design and development teams. By establishing a shared set of design variables, teams can work more seamlessly together, ensuring that the visual elements of a project align with the overall brand guidelines. Additionally, design tokens can be easily updated and modified, allowing for quick and consistent changes to the design system without the need for manual adjustments in multiple places.
W3C design tokens can be implemented using various technologies and methodologies. For example, CSS Custom Properties, also known as CSS variables, are commonly used to define and manage design tokens in web development. These variables can be declared at the root level of a CSS file and then referenced throughout the stylesheets. Similarly, other technologies like JSON or Sass can be used to define and consume design tokens in different contexts. Ultimately, the choice of technology depends on the specific needs and requirements of the project.
When to Use Design Tokens
Design tokens can be beneficial in a wide array of projects. However, in some cases, like when designing a webpage using a theme in WordPress or Webflow, tokens may not be necessary initially. Such platforms often provide their own set of tokens, limiting your ability to customize fully.
On the other hand, if you manage multiple customer-facing digital products and aim to expand your storefront and apps, adopting a design system with tailored design tokens becomes a powerful proposition.
Time investment
You don't have to create all your tokens at once. Start with the basics—colors, fonts, and spacing—and gradually expand your token library. Larger projects that involve a full digital transformation impacting multiple products and platforms may require more planning and time, but the long-term benefits will outweigh the initial effort.
Conclusion
As you embark on the journey of implementing design tokens, remember the importance of a solid branding strategy and brand position. These foundational elements will guide you in shaping design tokens that are not just technical components but true reflections of your brand identity. Through design tokens, you can enhance user experience, streamline development, and maintain consistency across your entire product ecosystem. Embrace design tokens as an integral part of your branding strategy, and watch your design system thrive! If you need assistance setting up a design system with design tokens, don't hesitate to reach out. Happy designing and developing your next product!
Streamlining Your Design Workflow with The Power and Versatility of Design Tokens.
When building your design system, you'll undoubtedly encounter the term "design tokens" frequently. Properly configured, these tokens can seamlessly impact your entire production process, from design to development, with only a few atomic decisions. In this post, we'll explore the fundamental concepts behind design tokens and their potential to revolutionize your workflow. Additionally, we'll emphasize the importance of a solid branding strategy and brand position in defining design tokens from the get-go.
Combining Branding Strategy and Brand Positioning with Tokens: A Powerful Approach
Before delving into design tokens, it's essential to acknowledge the significance of a robust branding strategy and brand position. A well-defined brand identity sets the tone for your design system and acts as a guiding force in shaping design tokens that align perfectly with your brand ethos.
Understanding your brand's personality, values, target audience, and unique selling points empowers you to create design tokens that reflect your brand's essence consistently. Design tokens, in turn, become more than just technical components; they embody your brand's character and enhance user experience across your entire product lineup.
Honest mistakes
Now, let's return to a common scenario in software development. Have you ever experienced the frustration of rebranding an app or website, experimenting with different color HEX values and elevation codes, only to discover inconsistencies in the final appearance? This common issue in software development can be addressed more effectively through a better solution.
Enter design tokens
Design Tokens serve as the single source of truth for style decisions across creative tools and coding languages. They can encompass a wide range of elements, such as colors, fonts, shadows, border radius, spacing, animations, and icon sizing. By applying design tokens to your codebase, you can efficiently update multiple products at once by modifying a few global values.
Incorporating Branding Strategy into Design Tokens
A well-thought-out branding strategy should influence the creation of design tokens from the outset. Colors, typography, and other design elements derived from your brand guidelines should be seamlessly integrated into design tokens, ensuring consistency throughout your products.
The Rise of Design Tokens
Design tokens have become a hot topic within the design community, bridging the gap between designers and developers by adopting practices long used by developers. Recent interest can be attributed, in part, to design tools catching up with the hype.
The key realization was that if developers can benefit from tokens, designers should also incorporate them into their workflows and seamlessly hand them off to production, or vice versa—tokenizing components and maintaining consistent design elements.
Example of Design Tokens
Global Tokens:
Global tokens act as the foundation from which other alias tokens inherit their values.
Alias Tokens:
Alias tokens reference global tokens, enabling the creation of color variations, spacing calculations, border-radius adjustments, and more from a single source token. A change to the source token automatically updates everything, making it an efficient way to handle rebranding or building new elements within an existing system.
For instance, a button token might look like this:
Those tokens will compose your CTA button's color styles - there are others for border ratios, spacing, etc - with your brand's primary color. You don't even have to know the raw value to understand what's it for. That's the idea behind it.
Using these tokens throughout your HTML structure and Sass stylesheets allows you to easily update raw values later by modifying the style guides, effortlessly updating your software.
Implementing Brand Position in Design Tokens
Your brand position, which differentiates you from competitors, should also be translated into design tokens. For example, if you are known for a bold and vibrant brand personality, design tokens can encapsulate vibrant color variations and daring typography choices to maintain brand consistency.
How Design Tokens Are Created
There are various approaches to creating design tokens. You can utilize a JSON file imported into design tools like Figma and Sketch to establish styles and integrate them into your design system. Additionally, plugins like Figma Tokens can help manage tokens, creating them from existing styles and facilitating the creation of new ones. Moreover, these plugins can sync to GitHub, enabling actions that translate the tokens into style guides. This ensures you can apply the styles across multiple platforms, making design tokens technology agnostic. Some tools, like Zeplin, can even handle the entire process for you, seamlessly translating tokens into style guides and stylesheets.
Figma Design Tokens Plugin
Here are a few of our favorite plugins that will let you create design tokens for free — all have premium plans for more advanced users. You may find a few of these available for Sketch, but we mainly use Figma, so we can only speak to that.
Tokens Studio for Figma (Figma Tokens): A comprehensive plugin for managing all aspects of your design systems. It lets you create and adjust global design tokens like border radii, spacer units, color, and typography styles. You can apply these tokens across your Figma files and even push changes to GitHub for developers to apply in their projects. Visit Tokens Studio for more information.
Design Tokens: This plugin streamlines design workflows by enabling the creation and management of various design tokens such as colors, typography, grids, and more. It's compatible with Amazon Style Dictionary, supports Figma Styles and custom tokens, and allows syncing directly with GitHub. This actively developed tool is essential for maintaining consistency and efficiency in design projects. Visit this community page for more information.
Backlight: An all-in-one solution for front-end teams to build, ship, and manage design systems efficiently. It facilitates collaboration across disciplines, offering features like a visually-organized component library, live documentation, and visual pull-request reviews. Unique for its code-centric approach, Backlight also provides a Figma plugin allowing designers to generate UI kits from code, ensuring seamless integration between design and development. It supports various technologies including React, VueJS, and CSS3, aiding teams in kick-starting their design systems with ease. Visit Backlight for more information.
w3c Design Tokens
One of the key benefits of using W3C design tokens is their ability to promote collaboration and efficiency among design and development teams. By establishing a shared set of design variables, teams can work more seamlessly together, ensuring that the visual elements of a project align with the overall brand guidelines. Additionally, design tokens can be easily updated and modified, allowing for quick and consistent changes to the design system without the need for manual adjustments in multiple places.
W3C design tokens can be implemented using various technologies and methodologies. For example, CSS Custom Properties, also known as CSS variables, are commonly used to define and manage design tokens in web development. These variables can be declared at the root level of a CSS file and then referenced throughout the stylesheets. Similarly, other technologies like JSON or Sass can be used to define and consume design tokens in different contexts. Ultimately, the choice of technology depends on the specific needs and requirements of the project.
When to Use Design Tokens
Design tokens can be beneficial in a wide array of projects. However, in some cases, like when designing a webpage using a theme in WordPress or Webflow, tokens may not be necessary initially. Such platforms often provide their own set of tokens, limiting your ability to customize fully.
On the other hand, if you manage multiple customer-facing digital products and aim to expand your storefront and apps, adopting a design system with tailored design tokens becomes a powerful proposition.
Time investment
You don't have to create all your tokens at once. Start with the basics—colors, fonts, and spacing—and gradually expand your token library. Larger projects that involve a full digital transformation impacting multiple products and platforms may require more planning and time, but the long-term benefits will outweigh the initial effort.
Conclusion
As you embark on the journey of implementing design tokens, remember the importance of a solid branding strategy and brand position. These foundational elements will guide you in shaping design tokens that are not just technical components but true reflections of your brand identity. Through design tokens, you can enhance user experience, streamline development, and maintain consistency across your entire product ecosystem. Embrace design tokens as an integral part of your branding strategy, and watch your design system thrive! If you need assistance setting up a design system with design tokens, don't hesitate to reach out. Happy designing and developing your next product!
Streamlining Your Design Workflow with The Power and Versatility of Design Tokens.
When building your design system, you'll undoubtedly encounter the term "design tokens" frequently. Properly configured, these tokens can seamlessly impact your entire production process, from design to development, with only a few atomic decisions. In this post, we'll explore the fundamental concepts behind design tokens and their potential to revolutionize your workflow. Additionally, we'll emphasize the importance of a solid branding strategy and brand position in defining design tokens from the get-go.
Combining Branding Strategy and Brand Positioning with Tokens: A Powerful Approach
Before delving into design tokens, it's essential to acknowledge the significance of a robust branding strategy and brand position. A well-defined brand identity sets the tone for your design system and acts as a guiding force in shaping design tokens that align perfectly with your brand ethos.
Understanding your brand's personality, values, target audience, and unique selling points empowers you to create design tokens that reflect your brand's essence consistently. Design tokens, in turn, become more than just technical components; they embody your brand's character and enhance user experience across your entire product lineup.
Honest mistakes
Now, let's return to a common scenario in software development. Have you ever experienced the frustration of rebranding an app or website, experimenting with different color HEX values and elevation codes, only to discover inconsistencies in the final appearance? This common issue in software development can be addressed more effectively through a better solution.
Enter design tokens
Design Tokens serve as the single source of truth for style decisions across creative tools and coding languages. They can encompass a wide range of elements, such as colors, fonts, shadows, border radius, spacing, animations, and icon sizing. By applying design tokens to your codebase, you can efficiently update multiple products at once by modifying a few global values.
Incorporating Branding Strategy into Design Tokens
A well-thought-out branding strategy should influence the creation of design tokens from the outset. Colors, typography, and other design elements derived from your brand guidelines should be seamlessly integrated into design tokens, ensuring consistency throughout your products.
The Rise of Design Tokens
Design tokens have become a hot topic within the design community, bridging the gap between designers and developers by adopting practices long used by developers. Recent interest can be attributed, in part, to design tools catching up with the hype.
The key realization was that if developers can benefit from tokens, designers should also incorporate them into their workflows and seamlessly hand them off to production, or vice versa—tokenizing components and maintaining consistent design elements.
Example of Design Tokens
Global Tokens:
Global tokens act as the foundation from which other alias tokens inherit their values.
Alias Tokens:
Alias tokens reference global tokens, enabling the creation of color variations, spacing calculations, border-radius adjustments, and more from a single source token. A change to the source token automatically updates everything, making it an efficient way to handle rebranding or building new elements within an existing system.
For instance, a button token might look like this:
Those tokens will compose your CTA button's color styles - there are others for border ratios, spacing, etc - with your brand's primary color. You don't even have to know the raw value to understand what's it for. That's the idea behind it.
Using these tokens throughout your HTML structure and Sass stylesheets allows you to easily update raw values later by modifying the style guides, effortlessly updating your software.
Implementing Brand Position in Design Tokens
Your brand position, which differentiates you from competitors, should also be translated into design tokens. For example, if you are known for a bold and vibrant brand personality, design tokens can encapsulate vibrant color variations and daring typography choices to maintain brand consistency.
How Design Tokens Are Created
There are various approaches to creating design tokens. You can utilize a JSON file imported into design tools like Figma and Sketch to establish styles and integrate them into your design system. Additionally, plugins like Figma Tokens can help manage tokens, creating them from existing styles and facilitating the creation of new ones. Moreover, these plugins can sync to GitHub, enabling actions that translate the tokens into style guides. This ensures you can apply the styles across multiple platforms, making design tokens technology agnostic. Some tools, like Zeplin, can even handle the entire process for you, seamlessly translating tokens into style guides and stylesheets.
Figma Design Tokens Plugin
Here are a few of our favorite plugins that will let you create design tokens for free — all have premium plans for more advanced users. You may find a few of these available for Sketch, but we mainly use Figma, so we can only speak to that.
Tokens Studio for Figma (Figma Tokens): A comprehensive plugin for managing all aspects of your design systems. It lets you create and adjust global design tokens like border radii, spacer units, color, and typography styles. You can apply these tokens across your Figma files and even push changes to GitHub for developers to apply in their projects. Visit Tokens Studio for more information.
Design Tokens: This plugin streamlines design workflows by enabling the creation and management of various design tokens such as colors, typography, grids, and more. It's compatible with Amazon Style Dictionary, supports Figma Styles and custom tokens, and allows syncing directly with GitHub. This actively developed tool is essential for maintaining consistency and efficiency in design projects. Visit this community page for more information.
Backlight: An all-in-one solution for front-end teams to build, ship, and manage design systems efficiently. It facilitates collaboration across disciplines, offering features like a visually-organized component library, live documentation, and visual pull-request reviews. Unique for its code-centric approach, Backlight also provides a Figma plugin allowing designers to generate UI kits from code, ensuring seamless integration between design and development. It supports various technologies including React, VueJS, and CSS3, aiding teams in kick-starting their design systems with ease. Visit Backlight for more information.
w3c Design Tokens
One of the key benefits of using W3C design tokens is their ability to promote collaboration and efficiency among design and development teams. By establishing a shared set of design variables, teams can work more seamlessly together, ensuring that the visual elements of a project align with the overall brand guidelines. Additionally, design tokens can be easily updated and modified, allowing for quick and consistent changes to the design system without the need for manual adjustments in multiple places.
W3C design tokens can be implemented using various technologies and methodologies. For example, CSS Custom Properties, also known as CSS variables, are commonly used to define and manage design tokens in web development. These variables can be declared at the root level of a CSS file and then referenced throughout the stylesheets. Similarly, other technologies like JSON or Sass can be used to define and consume design tokens in different contexts. Ultimately, the choice of technology depends on the specific needs and requirements of the project.
When to Use Design Tokens
Design tokens can be beneficial in a wide array of projects. However, in some cases, like when designing a webpage using a theme in WordPress or Webflow, tokens may not be necessary initially. Such platforms often provide their own set of tokens, limiting your ability to customize fully.
On the other hand, if you manage multiple customer-facing digital products and aim to expand your storefront and apps, adopting a design system with tailored design tokens becomes a powerful proposition.
Time investment
You don't have to create all your tokens at once. Start with the basics—colors, fonts, and spacing—and gradually expand your token library. Larger projects that involve a full digital transformation impacting multiple products and platforms may require more planning and time, but the long-term benefits will outweigh the initial effort.
Conclusion
As you embark on the journey of implementing design tokens, remember the importance of a solid branding strategy and brand position. These foundational elements will guide you in shaping design tokens that are not just technical components but true reflections of your brand identity. Through design tokens, you can enhance user experience, streamline development, and maintain consistency across your entire product ecosystem. Embrace design tokens as an integral part of your branding strategy, and watch your design system thrive! If you need assistance setting up a design system with design tokens, don't hesitate to reach out. Happy designing and developing your next product!
About the author
Antonio Guedes is a data-driven designer with a knack for making tech approachable and fun. He's seasoned in guiding tech teams through the maze of bridging the gap between design and development, crafting user-centric designs that not only look good but work smartly. At PHRUTOS, his approach is all about blending creativity with practicality, making the complex world of tech a little more relatable.
Antonio Guedes
CEO and Lead Product Designer
