Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Creating Design Tokens

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.
creating-tokens-set.png

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 the save icon.

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

To create a token reference (often called an “alias”), enter the name of the referenced token in the value field. If the referenced token already exists, select it from the auto-complete drop-down and click the save icon.

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

DSM 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 tokens structure.

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.

Learn something new

Craft for design

With Craft designers can speed up their design workflow in Sketch. You can use Craft tools to quickly populate your designs, prototype, and sync design files to InVision.

Learn Craft

Intro to Design System Manager

InVision Design System Manager gives you one centralized place to maintain all of your brand and UX components across design and code–providing the speed and confidence to power design at scale.

Learn DSM

Getting started with InVision Enterprise V7

InVision Enterprise provides a connected workflow that brings together the tools, people and processes needed to build great digital experiences at scale.

Learn InVision V7

Organization setup and team management

Let’s get your organization set up right. You can modify account settings, and integrate with the tools your team already uses. Then invite your team and set permissions.

Learn setup & management

Image of Craft Logo