Design tokens in legacy DSM
  • 06 Feb 2023
  • 1 Minute to read
  • Dark

Design tokens in legacy DSM

  • Dark

Article Summary

This article applies specifically to legacy DSM. If using the new DSM, check out  Intro to DSM Design Tokens.

Design System Manager (DSM) supports design tokens, which lets development teams use the colors and styles defined within DSM directly in their code. The design token feature supports different formats like CSS, Sass, Less, Stylus, and others. These files are accessible with the DSM API, so developers can propagate design tokens to different applications and can also import the remote file to ensure that they’re always seeing the latest colors and text styles defined in DSM.

NoteCurrently, DSM only supports color, text style, and icon export. Icons are not design tokens, but they are available for download in the same place as color and text style design tokens.
TipIf you're trying to get or share code snippets for specific layers, groups, or components in a prototype, we recommend using Inspect instead.

Accessing design tokens in legacy DSM

To access design tokens in legacy DSM:

  1. Sign in to the DSM web view and open your legacy design system.
  2. At the top right of the page, click the development icon  (), and then choose Design tokens.
  3. In the left-hand list, select the relevant format or framework.
  4. After selecting a framework, copy the URL or download the files to use locally.

Was this article helpful?