Creating and Editing Design Tokens

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 ().
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:

color.core.blue = #0B99FF
color.brand.primary = color.core.blue

If color.core.blue 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:

color.core.blue = #0B99FF
color.brand.primary = color.core.blue

If you rename color.core.blue to color.global.blue, DSM will change the value of color.brand.primary to color.global.blue 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 color.core.green by typing “color.core.green” 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 ().

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).

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.