Importing Design Tokens in the new DSM
  • 27 Jan 2023
  • 3 Minutes to read
  • Dark
    Light

Importing Design Tokens in the new DSM

  • Dark
    Light

Article Summary

Importing tokens from Sketch

NoteIt is currently not possible to import design tokens from Figma libraries yet.

Preparing your import

Before you can import design tokens directly from your Sketch files, you’ll need to upload one or more Sketch files containing the text styles, layer styles, and color variables you want to use as tokens to DSM. You can learn how to do it here: Creating a Design System

Importing tokens

Once you’ve uploaded your Sketch files from Sketch, follow these steps to import tokens:

  1. Open the web view of your design system.
  2. On the top navigation bar, open Tokens.
  3. Hover over the folder or set where you wish to add the tokens to reveal the ⋮ (more) menu. Click the menu and select Import style tokens from the dropdown.
    Importing DSM design tokens from a previously uploaded Sketch file
  4. Select Text styles, Colors, or Layer styles.
  5. If necessary, change the grouping settings and choose the properties you want to import.
  6. Select the styles you wish to add, and click Import tokens to confirm.
    Screenshot of the token import modal in DSM

Understanding how properties are mapped on token imports

When importing styles, DSM creates a token for each selected style property, using the style’s name as a prefix to the property name. Once imported, you can rename/reorganize the tokens in DSM, including making name changes in bulk.

Example of a style imported from Sketch to DSM

To better understand how properties are mapped when importing design tokens to DSM, consider the following example of a font style named Fonts / Brand / H1 with its opacity set to 0.7 in Sketch:

Screenshot of the text properties panel in Sketch. The Text style name is Fonts/Brand/H1 and the opacity is set to 70%

When importing the font style above, DSM would create a corresponding token: Fonts.Brand.H1.opacity = 0.7

The same token in the JSON editor in DSM would display:

Screenshot of the mentioned values in the JSON editor

In DSM’s table view, the token would appear as follows:

Screenshot of the table view for a token: The name is Fonts.Brand.H1.opacity, the value is 0.7, and there are no references

Changing token names in bulk

DSM accepts any string token name. However, if you’d like to take advantage of Style Dictionary’s default transformations of tokens into platform-specific files, you’d need to adhere to Style Dictionary's established naming convention.

You can change your token names in bulk using JSON editing in DSM.

Changing token names in bulk using the JSON editor in DSM

If you’re looking to only keep H1 in the token name and remove Fonts and Brand in the example above, follow these steps:

  1. Switch to JSON editing mode. Note that multiple properties will be grouped under H1.
    Changing token names in bulk using the JSON editor in DSM - Step 1
  2. Delete the top nodes, Font and Brand, by deleting them and their matching curly brackets.
    Changing token names in bulk using the JSON editor in DSM - Step 2
  3. Before saving, we recommend clicking the download the previously saved tokens link, so you can easily revert the change if something doesn't go as expected.
    Changing token names in bulk using the JSON editor in DSM - Step 3
  4. Click Save changes, and switch back to the table view mode. You should see that the Fonts.Brand prefix has been removed for all tokens.
    Changing token names in bulk using the JSON editor in DSM - Step 4

Grouping tokens

There are two ways to import style properties:

  • Primitives
  • Styles

The Primitives option is used to import properties from multiple styles to create a set of core properties that repeat frequently across styles.

NoteIf you're new to tokens, we recommend defining Primitives before adding Styles.

For example, say the Sketch styles H1, H2, Body, and Subtitle all use a different text color value. You’d like to create four text color tokens to be used consistently in the system. You can select the above four styles from the style picker during import, and then select the Color property in the properties dropdown.

This will import all four color values into a single tokens set. You can then rename the tokens to their token names—e.g. text-base, text-primary, text-secondary, and text-tertiary, as illustrated in the following example screenshot:

Tokens grouped as a set of primitives

The Styles option is used to import multiple style properties as a single set. For example, consider the Sketch text styles H1 and H2. Importing these styles will result in two separate sets in DSM (H1 and H2), each with its own tokens representing properties, like in the following example screenshot:

Tokens grouped as a set of styles

It’s also possible to import additional styles to the same token set by clicking Import in the table menu of a specific set, as in the screenshots below:

Button to import new tokens to a new token set
Multiple styles added into the same token set

Was this article helpful?