Export design tokens
Export your design tokens from Interplay
In addition to using your design tokens in Figma, you can also export them as JSON files to feed into other delivery stages.
Manual copy and paste
For a one-off quick export you can simply copy the JSON of your design tokens from the Interplay UI and paste it into your destination file.
To do this:
- Go to the Tokens tab in Interplay
- Switch to the JSON view and choose the format you would like to view the tokens in, using the toggle at the top right of the tokens panel
- Key CMD+A to select all, then copy and paste as usual
If your have multiple themes of tokens you can switch between them to access each one in JSON format.
The Interplay CLI (Command Line Interface) is a tool to import/export items to and from Interplay. You can use the CLI to export your tokens as JSON files to your local file system.
To do this, first install the CLI onto your local workstations as described here.
Then you can use the following commands to export your tokens. If the optional theme name, filename or format are not provided then default values will be used
#export the default theme tokens (if you haven't created named themes) interplay export tokens #export the Dark theme tokens (if you have created a theme called 'Dark') interplay export tokens Dark
Specify the output file
By default your tokens will be exported into
.tokens.json files in a folder called
.interplay/export You can specify the output file by providing a relative path.
#export the Dark theme to a specific file interplay export tokens Dark './dark.json'
Export inherited tokens
By default only the tokens you have specified within that theme will be exported. If your theme inherits tokens from another theme, you can include those inherited tokens in the export by passing the
#export the Dark theme in 'full' mode to include inherited tokens interplay export tokens Dark --mode=full #export the Dark theme in 'full' mode to a specified file interplay export tokens Dark './dark.json' --mode=full
Specifying the export format
Interplay implements the DTCG (Design System Community Group) draft standard for design tokens files. We are updating Interplay as this standard evolves, so you can import and export your tokens in the different versions of the format.
Pass the format name to export your tokens in a specific format:
#export the Dark theme in the older w3c@2021-11-01 format interplay export tokens Dark --format=w3c@2021-11-01
You can see the available file formats here.
The CLI can be used as part of your automated build/delivery pipeline using your usual CI tool. The commands above can be added into pipeline scripts to export your latest tokens from Interplay before other steps run that will consume those tokens.
For more information please see Updates and CI