Design Tokens and Themes

Tokens Overview

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

image

Design tokens are essentially name-value pairs that act as the underlying variables 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 you can create groups of your tokens to organise them into a heirarchy.

Adding Tokens

You can add Tokens either in Interplay in the browser or by loading token data as JSON through the CLI.

Supported Design Tokens files

Adding Tokens in Interplay

To add or edit JSON data for tokens in Interplay, access the Bulk Update option in the dropdown at the top of the Design Tokens panel in your project:

image

This allows you to edit or paste in the token data as a single JSON document.

image

Theme UI structure is supported for edits using this approach. Design Tokens Community Group standard will be supported soon.

Upload from code repo

You can upload your Design Tokens as JSON data from your repo using the Interplay CLI.

For details on the settings required, please see

Editing Tokens

Once you have imported your tokens, they are represented in a folder structure in the Design Tokens tab.

image

Click on a token to edit its properties. The type of the token will determine what options are available to edit here.

image

The value field is locked for editing for tokens that depend on other tokens as in the example above.

image

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

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.