<aside> 👉 Design tokens and themes can be created in Design System projects
</aside>
The Design Tokens tab in your Project gives you access to create and manage Design Tokens and Themes for your components.
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.
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.
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:
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
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. 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:
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.
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.
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.