Create design tokens
How to add design tokens to your Design System
You can add design tokens to your design system either in the browser or by importing token data from JSON files in your repo.
Adding Tokens in the browser
You can add tokens in the Design Tokens tab of your design system in Interplay.
If you don't have your own tokens yet or are just exploring, you can get started with a sample tokens file by clicking the link in the welcome screen.
The sample has two themes of tokens, light and dark. You can switch between them at the top right.
You can add and delete tokens from the sample set to create your own tokens.
To upload your own tokens, click Upload and browse to a JSON 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 individual tokens
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.
- For example, a color token will have a color picker attached, whereas a simple text value can be edited in place.
- Tokens can also reference or alias other tokens. For details please see Referenced design tok
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, switch to code view at the top of the tokens screen.