Skip to main content
InVision Support Home Page

Getting Started

Loading...

[[ rootSection.name === "Studio" ? "InVision Studio" : rootSection.name ]]

Importing Design Tokens in the new DSM

This article documents three key aspects of the DSM design tokens import feature:

  1. Understanding properties mapping on design tokens import
  2. Changing token names in bulk
  3. Grouping imported tokens
invision-new-dsm-import-tokens.png

Understanding properties mapping on design tokens import

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 change the naming and organization of the tokens in DSM, including making name changes in bulk.

Example of 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:
invision-dsm-tokens-import-appearance-modal.png

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

Here's the same token seen in the JSON editor in DSM:
invision-new-dsm-import-token-created-in-json.png

In DSM’s table view, the token would appear as follows:
invision-new-dsm-import-token-table-view.png

Changing token names in bulk

DSM accepts any string token name. That said, 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 design token names in bulk by using JSON editing in DSM.

invision-new-dsm-import-tokens-bulk-name-change-example.png

For example, if you’re looking to only keep H1 in token names and remove Fonts and Brand in the example directly above, follow these steps:

  1. Switch to JSON editing mode. Note that multiple properties will be grouped under H1.
    invision-new-dsm-import-tokens-bulk-name-change-json-step-1.png
  2. Delete the top nodes, Font and Brand, by deleting them and their matching curly brackets.
    invision-new-dsm-import-tokens-bulk-name-change-json-step-2.png
  3. Before saving the change, we recommend clicking the download the previously saved tokens link, so you can easily revert the change if something goes wrong.
    invision-new-dsm-import-tokens-bulk-name-change-json-step-3.png
  4. Click Save changes, and then switch back to table view mode, where you should see the Fonts.Brand prefix has been removed for all tokens.
    invision-new-dsm-import-tokens-bulk-name-change-json-step-4.png

Grouping tokens

There are two primary ways to import style properties. The first involves extracting properties for each style into a new token set.

For example, consider the styles H1, H2. Extracting each style into separate sets would obviously result in two sets in DSM, and each set (H1 and H2) would have its own tokens representing properties, like in following example:

invision-new-dsm-tokens-import-example-of-grouped-tokens.png

The second option is to import properties from multiple styles into a single set. Typically, this option is used to import different possible values for the same property across styles. In other words, it’s used to bootstrap core values in the system rather than 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 only the color property in the properties dropdown. Then, set the import destination to a single set.

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 seen in this example:

invision-new-dsm-imported-tokens-grouped-set-renamed.png