Creating and Editing Design Tokens
  • 27 Jan 2023
  • 2 Minutes to read
  • Dark

Creating and Editing Design Tokens

  • Dark

Article Summary

This article applies specifically to the new DSM. If using legacy DSM, check out this article instead.

With DSM you can quickly create and edit design tokens, allowing you to build out a robust documentation site for your design system.

Creating a new tokens set

Tokens in DSM are organized into sets. Tokens sets correspond to JSON files with multiple tokens.

To create a new tokens set:

  1. Open your design system in the DSM web view and navigate to the Tokens page.
  2. In the left-hand navigation, click Add > Tokens set.

Adding a new token

To add a new token:

  1. Open a tokens set and click Create new token.
  2. Add a Name and Value for the token.
  3. Click Save ().

To add more tokens, select the table and click New token.

Removing a token

To remove a token:

  1. Navigate to the token table and select a specific row.
  2. At the end of the row, click the remove icon (remove-icon.png).
  3. To confirm, click Delete token.

Removing referenced tokens

When you remove a token, DSM will replace token references with the removed token’s value.

For example, assume there are two tokens: = #0B99FF
color.brand.primary =

If is removed, the value for color.brand.primary becomes #0B99FF.

Renaming a token

If you rename a token in the table, DSM will rename it across the system.

For example, assume there are two tokens: = #0B99FF
color.brand.primary =

If you rename to, DSM will change the value of color.brand.primary to automatically.

Creating a token reference (alias)

Reference or alias tokens set another token as their value.

To create a reference token, add a new toke as mentioned above. In the Value column, enter the name of the token you wish to reference.

For instance, you can set the color.brand.primary as by typing “” in the value column. If DSM identifies an existing token with the same name, it’ll auto-suggest the token as you type. You can simply select it from the auto-complete drop-down and click Save (save-token.png).


After creating the token reference, it will appear as a link in the Value column. Hover over the link to see the current value of the referenced token. If the referenced token is defined more than once (e.g., to support themes), the hover state will show all possible values.

Viewing and editing JSON

Editing tokens in JSON is helpful when you need to:

  • Add tokens in bulk. You can quickly do so by copying and pasting a set of tokens from an existing .json file.
  • Add token attributes. You can add any type of metadata to tokens in the JSON editor. Viewers can then access the attributes by selecting the table and clicking View in JSON. In the future, you’ll be able to add custom columns to surface custom attributes in the table view.
  • Change token names in bulk. For example, if “core” changes to “global”, you can change the “core” node in JSON to “global” (instead of individually editing multiple tokens).

NoteDSM will not propagate token name changes nor convert deleted token references to values as it does in table editing mode. The editor will need to ensure the validity of the structure of the tokens.

To edit tokens in JSON mode:

  1. Select the tokens table and click Edit JSON.
  2. Make the necessary edits and click the save icon ().
  3. To confirm, click Save changes.
  4. Exit the editor by clicking Back To Table.

Was this article helpful?