This article applies specifically to legacy DSM. A completely redesigned experience for design tokens is coming to the new DSM later this year.
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.
Currently, DSM only supports color, text style, and icon export.
If 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:
Sign in to the DSM web view and open your legacy design system.
At the top right of the page, click the development icon (), and then choose Design tokens.
In the left-hand list, select the relevant format or framework.
After selecting a framework, copy the URL or download the files to use locally.