Export design tokens

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.

Automated exports

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.

Basic export

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 mode=full

#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.

CI pipelines

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