The Design Tokens tab in your Project gives you access to create and manage Design Tokens and Themes for your components.
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.
You can add Tokens either through the browser or by loading token data as JSON through the CLI.
To add or edit JSON data for tokens through the browser, access the Bulk Update option in the dropdown at the top of the Design Tokens panel:
This allows you to edit or paste in the token data as a single JSON document.
Theme UI structure is supported for edits using this approach. Design Tokens Working 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 more details, please Providing your own configuration in
Once you have imported your tokens, they are represented in a folder structure in the Design Tokens tab.
Click on a token to edit its properties. The type of the token will determine what options are available to edit here.
The value field is locked for editing for tokens that depend on other tokens as in the example above.
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.
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.