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


Creating Tokens

Follow
The Design Tokens feature is currently in beta and is available to a limited number of users. Please note that the functionality of this beta feature is subject to change.

Create a new tokens set

Tokens in DSM are organized into sets. Tokens sets correspond to .json files with multiple tokens. To create a new token set, click the “Add token set” in the left navbar.

creating-tokens-set.png

Add a new token

If you’re starting from an empty token set, click the “Create new token” button, and continue to add the first token in the table.

To add a token to an existing table, select the table, and click “+ New token” in the table edit bar.

Remove a token

To remove a token, select the table, then the row to remove. Click the remove button that appears at the end of the row.

When deleting a token, DSM will replace references to the token with the deleted token’s value.

For example, assume these are two tokens in the system:

color.core.blue = #0022CC,

button.border.color = color.core.blue

Rename a token

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

For example, assume these are two tokens in the system:

color.core.blue = #0022CC,

button.border.color = color.core.blue

If you rename color.core.blue to color.global.blue, DSM will change the value of button.border.color to color.global.blue automatically.

Creating a token reference

To create a token reference (often called “alias”), enter the name of the referenced token in the value field. If the referenced token already exists, select it from the auto-complete dropdown.

To save, click the checkmark button at the end of the row.

After creating the token reference, it will appear as a link in the value column. Viewers can 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.

JSON view and editing

Editing tokens in JSON is useful in a few cases:

  1. Copy a set of tokens from an existing .json file and paste to add tokens in bulk.
  2. Add token attributes. You can add any type of metadata to tokens in the JSON editor. Viewers will be able to view the attributes by selecting a 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.
  3. Change token names in bulk. For example, if “core” changes to “global”, you can change the “core” node in JSON to “global” instead of having to repeat the name change in multiple table lines.

Think of JSON editing as a Power Feature. 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 in JSON mode, select the tokens table and click “</> Edit JSON” on the edit bar.


Was this article helpful?

Still have a question?

Contact Us