top of page

DESIGN TOKENS FOR
T-MOBILE DESIGN SYSTEM

tokens thumbnail.jpg

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.

Screen Shot 2022-03-30 at 2.17.43 PM.png

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.

without tokens.jpg

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.

with tokens.jpg

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

Token types.jpg

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.

token naming.png

Below is an example of how we named our primary button component using our token naming system.

button naming.png

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.  

XD+VS.jpg
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.

des vs dev view.png

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

bottom of page