<aside> 👉 Design tokens and themes can be created in Design System projects

</aside>

Tokens Overview

The Design Tokens tab in your Project gives you access to create and manage Design Tokens and Themes for your components.

Untitled

Design tokens in Interplay are essentially name-value pairs capturing the decisions in your design system.

A token may be a simple value such as a color, or it could be a reference another token. Usually tokens will have a meaningful name that indicates their role within your system.

You can give each token a type that determines how it will be treated in Interplay (and Figma), and you can create groups of your tokens to organise them into a hierarchy.

Adding Tokens

Design tokens can be added to Design System projects. You can add Tokens either in the browser or by importing token data from JSON files in your repo.

Adding Tokens in the browser

Untitled

To add design tokens, navigate to the Design Tokens tab in your design system project, where you can add tokens in JSON format in a few different ways:

Browse files - Click the 'browse files' link to choose a JSON file to upload

Drop a file - Drag-and-drop a JSON file from your computer onto the drop area in the browser. The JSON will be uploaded

Start with blank tokens file - use this option if you don't have a local JSON file of tokens. Your design tokens will be initialised with a few sample values that you can edit.

For information about the JSON formats supported, please see:

Design Tokens JSON formats

Importing from your repo

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

For information about the import process, please see Import Overview

Editing Tokens

Editing individual tokens

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

Untitled

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. A color token will have a color picker attached, whereas a simple text value can be edited in place.

If a token references another token for its value, the value field is locked for editing:

Untitled

If you want to override this behaviour you can choose to unlink by clicking on the icon that appears when you mouseover the value field.

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, click Edit JSON at the top right of the tokens screen. This will display the token JSON side-by-side with the token display. You can edit the tokens on either side.

Creating Themes

Depending on the requirements of your code library, you can create a theme from your design tokens and pass it to your components.

We will add more details for creating themes here soon - for now, please contact us for help setting these up.

Settings