Background

Tokens missing as part of the components overview design definition. Tokens are the smallest pieces of our Design System. We need to create the tokens as styles in Figma and link them in each component created in our library.

User stories

• As a designer, I need to be able to reuse design tokens for specification in Figma.
• As a designer, I need to be able to consult the token specification of system components in Figma.
• As a designer, I need to be able to apply reusable Figma styles that are aligned with (named after) the system's tokens.

Conditions of Satisfaction

The figma file should reflect the most up to date information

Testing Instructions

Before an official "release" this should be tested with members of both the WMF design and engineering teams.

Acceptance criteria (or Done)

Create styles in Figma:

• Create a new Design Tokens library to collect there all the styles and tokens spec sheets.
• Figma styles are created and labelled in a way that reflects our base tokens (just the following tokens can be created as styles in Figma):
  • Color Styles
  • Text Styles
  • Effect Styles (shadows)
  • Grid styles
• Brief documentation about what are tokens and how to use it in Figma

Apply styles in Figma:

• Link styles to the Codex library components:
  • Colors
  • Text styles
  • Sizing scale (add the right token in the "Guides" section of each component spec sheet)
  • Opacities (they will be added as color styles in Figma)
  • Box Shadows
  • Border and Border radius (add the right token in the "Guides" section of each component spec sheet)
  • Motion: animation & transition (add the right token in the "Guides" section of each component spec sheet if needed)
  • Grids (update the sizes of grids and breakpoints in the responsive section of each spec sheet)
• Review the Codex components and make sure they didn't change after apply the new styles (e.g. new text style line height)

• Link styles to the OOUI library components:
  • Colors
  • Text styles
  • Sizing scale (add the right token in the "Guides" section of each component spec sheet)
  • Opacities (they will be added as color styles in Figma)
  • Box Shadows
  • Border and Border radius (add the right token in the "Guides" section of each component spec sheet)
  • Motion: animation & transition (add the right token in the "Guides" section of each component spec sheet if needed)
  • Grids (update the sizes of grids and breakpoints in the responsive section of each spec sheet)
• Review components and make sure they didn't change after apply the new styles (e.g. new text style line height)

• Publish Codex and OOUI libraries with the new styles applied
• Remove old styles from the icon system library (old styles were there) and OOUI library (we had some old text styles there too)