This case study explores the implementation of design tokens to tackle challenges in design consistency across multiple platforms. Key findings show significant improvements in design efficiency, cross-platform consistency, and team collaboration.
We faced challenges in maintaining a coherent design language across web, tvOS, iOS, Android, GoogleTV, FireTV, and Roku platforms, so we initiated a project to explore the effectiveness of design tokens in streamlining their design and development processes.
Demo: https://github.com/shahcbs/ds-tokens-banana
🔎 Research Methodology
We conducted internal surveys and interviews with designers and developers, focusing on pain points in the existing workflow. We analyzed feedback and collected data on time spent on design-related tasks and the frequency of design-related bugs.
📃 Pain Points Identification
Key challenges identified were:
- Inconsistency Across Platforms: Maintaining a unified look and feel across different platforms is difficult.
- Scalability Issues: Challenges in scaling the design system with the growing product.
- Collaboration Hurdles: Frequent miscommunications between designers and developers.
- Hard-Coded Design Elements: Inefficiencies due to the use of hard-coded design values.
Consistency is the key to creating products that resonate with users. Yet, maintaining that consistency, especially across multiple platforms, can be challenging. To address this, we embarked on a journey to establish a design token system that would define the visual style of our products through decision values. Design tokens were introduced as a scalable set of variables (like colors, typography, spacing etc.) stored in a JSON format, facilitating consistency and easier management of design systems.
1. Colors 🌈:
Colors play a pivotal role in setting the mood and tone of any design. Our token system ensures that every shade, tint, and hue aligns with our brand's ethos and vision.
2. Typography✏️:
Typography, more than just the choice of fonts, influences how content is perceived. By standardizing this, we've ensured uniformity in message delivery, regardless of the medium.
3. Spacing📐:
Adequate spacing can make or break a design. We achieved a balanced, harmonious layout throughout our interfaces by defining specific spacing values.
4. Sizing🏗️:
Whether it's the size of buttons, icons, or other elements, getting it right is crucial for user experience. Our token system ensures that every element is sized proportionally, enhancing usability.
💡 The Solution
Tools and Technologies
We used Figma for design creation, with a Figma Token Plugin to extract design tokens in JSON. These tokens were then converted into platform-specific styles using Style Dictionary.
1. Intentional Style Crafting 🖌️:
With the assistance of the Figma token plugin, we didn't just create styles; we sculpted them. Every design choice was made intentionally and precisely, ensuring alignment with our brand's ethos.
2. Systematic Token Naming 🏷️:
Our token naming strategy was logical and structured (C=Category, T=Type, I=Item), relying on clear categories, properties, variants, and modifiers. This systematic approach made tokens easily identifiable, usable, and modifiable, streamlining the design-to-development handoff.
3. Seamless Export and Integration 🔄:
After refining our styles to perfection, the export process was a breeze. Styles were effortlessly converted into JSON files, then integrated into our mono repo. This ensured that our design values were readily available for developers, bridging the gap between design ideation and code implementation.
🧑💻 Implementation of Design Tokens
The implementation involved:
- Integration: Transforming design tokens to web, iOS, and Android native styles.
- Overcoming Challenges: Addressing initial resistance and learning curve.
- Improved Collaboration: Enhanced designer-developer collaboration due to clearer communication.
🎯 Results
The results speak for themselves:
- Implementing design tokens led to improved design consistency and team collaboration.
- Our workflow has seen a marked improvement in efficiency. No more second-guessing design choices or discrepancies across platforms.
- We've established a consistent and reusable system, ensuring our products look and feel top-notch, regardless of where they're accessed.
By embracing a design token system, we've refined our design process and taken a giant leap toward creating products that truly resonate with our audience.