Create design tokens

How to add design tokens to your Design System

The Tokens Editor

The tokens editor is a powerful tool for adding, editing and managing your design tokens.

Notion image

In the editor you can:

  • Add and edit individual tokens and token groups
  • Manage inheritance across child groups and tokens
  • Add themes and manage them side-by-side
  • Filter the tokens and customise the columns displayed
  • Make token edits and interactively see your code components change

Adding Tokens

You can add design tokens to your design system in the Design Tokens tab of your design system in Interplay. You can also automatically sync the tokens in from your code repo.

Notion image

Starting with sample tokens

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

The sample has two themes of tokens (light and dark), which you can view side-by-side in the editor:

Notion image

You can add and delete tokens from the sample set to create your own tokens. It is also a good way explore inheritance of token settings within token groups.


Adding tokens and groups

To start creating your own tokens, you can edit the sample tokens or click ‘Add a token group’ on the welcome screen:

Notion image

The tokens editor will appear and you can name your token group, then add tokens and child groups within your group using the + context menu:

Notion image

For more information about editing your tokens, see Editing tokens below.


Uploading tokens

To upload your own tokens, click ‘Upload a JSON file’ and browse to a 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

Click on the fields in the token editor to edit a token’s description, type, use and value:

Notion image

Description - optionally describe the intent for the token

Type - choose from the available token types

Used For - optionally restrict where the token will be available in Figma. The token type will determine what options are available e.g. restrict colors as used for text, backgrounds or borders. See Mapping to Figma for more information.

Value - set the value of the token:

For more information about token values, see Token values and types


Bulk Editing in JSON view

If you want to edit multiple tokens, it can be easier to work directly with the underlying token data in JSON.

To do this, switch to JSON view at the top right of the tokens screen.

Notion image

If you have created multiple themes then you can edit the JSON for each theme by switching themes at the top right of the screen.

The format of the JSON in the editor follows the Design Token Community Group spec. For more information about this format, see Design Token File Formats.

Did this answer your question?