Create design tokens

How to add design tokens to your Design System

Adding Tokens

You can add design tokens to your design system either in the browser or by importing token data from JSON files in your repo.

Adding Tokens in the browser

You can add tokens in the Design Tokens tab of your design system in Interplay.

Sample tokens

If you don't have your own tokens yet or are just exploring, you can get started with a sample tokens file by clicking the link in the welcome screen.

The sample has two themes of tokens, light and dark. You can switch between them at the top right.

You can add and delete tokens from the sample set to create your own tokens.


Upload tokens

To upload your own tokens, click Upload and browse to a JSON file containing your tokens, or drop the tokens file onto the upload panel. 

For information about the JSON file formats supported, please see: Design Tokens JSON formats


Importing tokens from your repo

On our paid plans, you can sync your Design Tokens from JSON files in your code repo using the Interplay CLI - please see Importing from your repo


Editing Tokens

Editing individual tokens

Once you have added your tokens, they are available in a folder structure based on the token path:

Click on a token to edit its type, description and value.

The type of the token will determine what options are available to edit here.

  • For example, a color token will have a color picker attached, whereas a simple text value can be edited in place.
  • Tokens can also reference or alias other tokens. For details please see Referenced design tok

Bulk Editing tokens

If you want to edit multiple tokens, it is often easier to work directly with the underlying token data. To do this, switch to code view at the top of the tokens screen.

Did this answer your question?