<aside> 👉 Design tokens and themes can be created in Design System projects
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:
Design Tokens JSON formats
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.