In our journey at GR8 Tech, we discovered the transformative power of design tokens. While they presented solutions, they also introduced challenges. Dive into our experience on how and why we streamlined our design system through automation with tokens.
Understanding Design Tokens
At its core, design tokens encapsulate style values—think colors, fonts, and more. This ensures consistent application across designs, codebases, platforms, and tools.
A design token represents specific UI information. By naming a token, you define the visual attributes of an interface element. Consider this: if you create a token for a title and specify its style attributes, every title across the product will possess a uniform appearance.
In the past, design style naming was largely guided by conventions like "Primary100", denoting the type and shade of a color. However, such naming lacked context. Contrastingly, design token naming zeroes in on the particular component or context where a style will be applied—like "control-button-regular".
Now, you might wonder: why invest in renaming? Challenges arise when re-theming. Take GR8's signature yellow—it's splendid in dark mode. But in light mode? It demands a switch to a deeper shade or perhaps a solid black. Without tokens, such shifts become cumbersome, necessitating manual hard coding.
Recognizing the inefficiencies, we knew we needed a sustainable system. That's when we embraced the game-changer: design tokens.
The Time-Saving Power of Design Tokens for Designers
Design tokens streamline the design process in multiple ways:
- Versatile Theme Support: They allow seamless integration of multiple color themes.
- Quick Design Overhauls: Implementing wholesale changes, be it a button’s shape or a complete recoloring, becomes a few clicks away.
- Guaranteed Consistency: Design tokens champion uniformity across the product.
Design tokens are indispensable for products that toggle between light and dark modes. Imagine crafting a single design and effortlessly flipping between modes: turning dark mode visuals to their light mode counterparts is just a click away. Moreover, they simplify global font replacements, especially if your product utilizes varied font pairings across platforms like iOS and Android.
Design tokens are akin to a comprehensive style guide. Designers no longer pause, pondering the right shade of gray for standard text or hints—the tokens’ naming convention already offers that clarity. This not only expedites the design process but also minimizes potential errors.
The real beauty of design tokens lies in bridging the designer-developer gap. The ease with which a designer can recolor a theme is mirrored in the developer’s experience. This unified approach ensures consistent aesthetics and functionality.
Streamlining Design Tokens at GR8 Tech: Our Approach
Harnessing the strengths of design tokens doesn't come without challenges. At times, we found ourselves inundated with an overwhelming number of tokens. Managing such an extensive system poses its own set of difficulties. Additionally, as we continuously refine and introduce new tokens, how can the development team track these updates?
Our solution: Embrace automation. We've ensured seamless synchronization between design and development by integrating Continuous Integration (CI) and adopting a Continuous Release cycle. Our CI tools diligently scan Figma styles, converting them into code. This means any stylistic change a designer initiates is instantly accessible to developers.
Without an automated delivery system for tokens, their utility diminishes. It's crucial for the design envisioned in the system to be a true reflection of the underlying code. Regular token verifications are what maintain this alignment between design and development.
Here's our workflow:
- Integration with Figma: Developers provide a CI script with a link to the Figma file.
- Extraction: The script retrieves the file, pulling all its data—including tokens and images.
- Build & Deployment: CI then crafts packages tailored for web and mobile platforms. These assets are subsequently deployed to their designated repositories, making the tokens immediately available for coding purposes.
Design tokens are indispensable for products that toggle between light and dark modes. Imagine crafting a single design and effortlessly flipping between modes: turning dark mode visuals to their light mode counterparts is just a click away. Moreover, they simplify global font replacements, especially if your product utilizes varied font pairings across platforms like iOS and Android.
Design tokens are akin to a comprehensive style guide. Designers no longer pause, pondering the right shade of gray for standard text or hints—the tokens’ naming convention already offers that clarity. This not only expedites the design process but also minimizes potential errors.
The real beauty of design tokens lies in bridging the designer-developer gap. The ease with which a designer can recolor a theme is mirrored in the developer’s experience. This unified approach ensures consistent aesthetics and functionality.
Structuring Design Token Names at GR8 Tech
Within Modulor, our proprietary design system at GR8 Tech, we've employed a three-tiered hierarchical approach for naming design tokens:
- Global Color Modes: This refers to overarching themes such as light mode, dark mode, or other specialized color schemes.
- Component Categories: Here, related components are clubbed together. For instance, the 'backgrounds' category encompasses all the diverse backgrounds across our product. Other categories include controls, text styles, icons, text fields, dividers, and dynamic colors, which feature color blocks and content.
- State or Distinct Style Attributes: This signifies specific properties such as primary, hover, or disabled.
This structured naming convention facilitates both scalability and navigability within our design system. Plus, the token's name doubles as a directive for our developers. If they encounter a color labeled as "Title," its intended application—headings in this case—becomes intuitively clear.
Introducing Token Master: Revolutionizing Token Management
While design tokens offer solutions, they occasionally birth new quandaries. Picture a scenario with a signature yellow color that's utilized across buttons, icons, switchers, and text. Given our naming strategy, every element gets its own token—even if the hue remains unchanged.
Maintaining a few duplicate colors is manageable. But envision a scenario wherein your brand's staple green has to be swapped for red across 45 tokens or consider a design system like VK's with nearly 200 styles. Anticipating the complexity such situations could introduce, we decided to be proactive.
Enter Token Master—our game-changing Figma plugin. Its specialty? Automating the color design token process. Tokens with identical HEX color values are grouped. Do we need to swap 45 green tokens for red? Token Master accomplishes it in mere moments.
Conceptually, Token Master acts as a universal token. In web development, token dependencies are a reality: modify a global token, and linked tokens adjust accordingly. Figma lacked this inherent feature, so we innovated and incorporated it.
Token Master has transformed our design process. Designers can now conjure a brand-new color scheme in roughly ten minutes. Without this tool, the same task would demand nearly two whole workdays.
The Evolving Horizon of Token Master
Our journey with Token Master isn't confined to just color coordination. We're excited to unveil some groundbreaking features on the horizon:
- Seamless Mode Switching: Soon, users will be able to toggle between light and dark themes directly within the plugin. No longer will there be a need for distinct designs tailored to each color scheme. While tools offering such capabilities currently exist, they often necessitate full-file editing privileges. For our team dynamics, granting every designer such extensive access isn't feasible.
- Enhanced Font & Shadow Tools: Like colors, the forthcoming updates will empower users to manage fonts and shadows with unparalleled ease.
Keep your eyes peeled for what's next!
