DESIGN TOKENS FOR
T-MOBILE DESIGN SYSTEM
WHAT ARE DESIGN TOKENS?
"Design tokens are design decisions, represented as data, that ensure systematically unified and cohesive product experiences."
— Spectrum, Adobe’s Design System
The key to design tokens is that they facilitate cross-disciplinary collaboration. Tokens ensure that every element of the same type is the same across the entire design network. So for example that a button is the exact same size, shape, color no matter where in the design it appears.
WHAT WE TRIED TO SOLVE
• Inconsistent brand experience between platforms
• All values are hardcoded which makes it difficult to make any changes
• We had multiple internal/external teams that define all sorts of digital experiences amongst digital channels. Too much time is spent working out a simple style of communication.
APPROACH
Before diving into building the tokens, I've tried to visualize the high-level idea of how tokens will work in our company and how they will potentially solve our problems.
Our process of communication design decision before tokens:
We had a defined brand color, spacing, typography, but every platform uses different measurements to describe values: for colors, the web uses HEX, iOS - RGB, for spacing on the web we use px, for Android dp, etc.
When it comes to updating the element, it will add a lot of additional work and communication between developers and designers.
How it will look with a tokens system:
When a token name is assigned to the color, designers can manage the hard-coded color value associated with that token, and it will be changed automatically in a code for every platform.
TOKEN TYPES
We’ve decided to break down a token system into three levels.
Global tokens: base elements of the design such as color, animation, typography
Alias tokens: global tokens don’t necessarily bridge the gap between naming and use. Designers need to know what options they should apply in a particular context, and that’s why we use alias tokens
Component tokens: these are very specific representations that often derive from an alias; use to evolve design elements
NAMING TOKENS
Naming tokens is one of the important parts of the process. Every token must have a name and the name must be unique for that token type.
The token name should be understandable for designers and developers.
Effective token names improve and sustain a team’s shared understanding of visual style through design, code, and other interdisciplinary handoffs. We approach the naming by creating separate levels of the hierarchy.
Below is an example of how we named our primary button component using our token naming system.
HOW IT WORKS
For the Design system team:
After we created a naming system and get approval from the teams, I’ve started to create tokens documentation in Adobe XD for the foundation elements such as colors, typography, sizing.
When my documentation was ready I’ve shared the XD token library link with a design system developer who, by using the Adobe XD extension for Visual Studio Code creates Design System Packages (DSPs) that contain all information developers need to reference while coding, including compiled design tokens, code snippets, and design systems documentation.
When my documentation was ready I’ve shared the XD token library link with a design system developer who, by using the Adobe XD extension for Visual Studio Code creates Design System Packages (DSPs) that contain all information developers need to reference while coding, including compiled design tokens, code snippets, and design systems documentation.
When my documentation was ready I’ve shared the XD token library link with a design system developer who, by using the Adobe XD extension for Visual Studio Code creates Design System Packages (DSPs) that contain all information developers need to reference while coding, including compiled design tokens, code snippets, and design systems documentation.
How it works in the designer-developers handoff process:
The design system team has added token naming to every foundational element of our UI kit library, so designers while building their designs just have to select the right element from the library and it’s automatically will assign the right token name. The developer, when receiving the design prototype, will see the component together with the correct token name.
THEMING OPTIONS
In parallel with the token project, a company was making a migration from the Adobe design tool to Figma. It allowed us to put the token organization to the next level.
T-Mobile has different lines of business which means that we needed to deal with different theming options. Using the Figma Token Plugin we organized our foundation and components by theming directly in the Figma and helped us to create a scalable token theming across a line of businesses.
RESULTS
What we achieved with the tokens:
For internal teams:
• Streamlined the delivery process between design and development
• Avoided manually redlining and time saving
• Reduced errors and increased design automation
• Reduced dev reworking effort when updates needed
For consumers:
• We are a step closer to creating a consistent UI/UX across platforms
• We aligned brand styles across all platforms