Design Tokens

Design tokens serve as a single source of truth for all design language decisions, ensuring consistent application across products and platforms.

Applying tokens in Figma

The MDS Tokens 2.0 library uses Figma Variables and Styles to ensure consistency across themes.

When designing in Figma, follow these practices:

Themes

Set the theme (e.g., GX Light, B2B Dark) at the page level to preview the correct values.

B2B Light is the default theme. If you're designing for B2B Light, you don’t need to apply a theme.

Components

Use components straight from the library, as tokens are automatically applied at the component level.

Page layouts and compositions

While not generally intended for direct use, some foundation tokens, such as spacing and typography styles, can be applied directly in page layouts and compositions.

Use variables for colors, spacing, sizing, and borders.

Use styles for text and shadow effects.

Applying tokens in code

For guidance on using our tokens in code, refer to these resources:

Design tokens: Overview of how tokens work across platforms, with setup tips and usage examples using getToken and getSpacingToken.

I ntroduction to tokens: A hands-on guide from the Engineering Onboarding Path with implementation tips.

For specific guidance on which tokens to use, visit their respective foundation page.

Typography

How to choose the right typography

Spacing

How to apply spacing tokens in layouts

Elevation

Understand the different types of elevation

Contributing Design Tokens

How designers can add or update tokens