Create design tokens
How to add design tokens to your Design System
The Tokens Editor
The tokens editor is a powerful tool for adding, editing and managing your design tokens.
In the editor you can:
- Add and edit individual tokens and token groups
- Manage inheritance across child groups and tokens
- Add themes and manage them side-by-side
- Filter the tokens and customise the columns displayed
- Make token edits and interactively see your code components change
Adding Tokens
You can add design tokens to your design system in the Design Tokens tab of your design system in Interplay. You can also automatically sync the tokens in from your code repo.
Starting with sample tokens
If you don't have your own tokens yet or are just exploring, you can get started with sample tokens by clicking the link in the welcome screen.
The sample has two themes of tokens (light and dark), which you can view side-by-side in the editor:
You can add and delete tokens from the sample set to create your own tokens. It is also a good way explore inheritance of token settings within token groups.
Adding tokens and groups
To start creating your own tokens, you can edit the sample tokens or click ‘Add a token group’ on the welcome screen:
The tokens editor will appear and you can name your token group, then add tokens and child groups within your group using the + context menu:
For more information about editing your tokens, see Editing tokens below.
Uploading tokens
To upload your own tokens, click ‘Upload a JSON file’ and browse to a 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 Tokens
Editing individual tokens
Click on the fields in the token editor to edit a token’s description, type, use and value:
Description - optionally describe the intent for the token
Type - choose from the available token types
Used For - optionally restrict where the token will be available in Figma. The token type will determine what options are available e.g. restrict colors as used for text, backgrounds or borders. See Mapping to Figma for more information.
Value - set the value of the token:
For more information about token values, see Token values and types
Bulk Editing in JSON view
If you want to edit multiple tokens, it can be easier to work directly with the underlying token data in JSON.
To do this, switch to JSON view at the top right of the tokens screen.
If you have created multiple themes then you can edit the JSON for each theme by switching themes at the top right of the screen.
The format of the JSON in the editor follows the Design Token Community Group spec. For more information about this format, see Design Token File Formats.