Requirements

Code components

In order to use your code components in Interplay and Figma you need to import them from your code repo. Interplay provides a CLI tool that will help you do this.

Interplay currently supports React code components. Most component libraries can be imported without needing to modify your components or to wrap each one in proprietary code.

To run your code components, Interplay needs a UMD bundle of your components and JSON configuration describing them. The Interplay CLI can help you create these by automatically bundling and parsing your code. Alternatively you can create your own and use the CLI to deploy them to Interplay.

Design tokens

You can also use the CLI to import your tokens from JSON files in your repo.

Alternatively you can upload JSON containing your tokens to your Design System project in the browser. More details: Design Tokens and Themes

<aside> 👉 You can run automated imports from your repo on our paid plans. To upgrade, please see Upgrading Your Account

</aside>

Import steps

https://vimeo.com/637487369

Here are the steps to import code components and/or tokens from your code repo.

1. Prepare a local copy of your repo by cloning it and installing the dependencies Preparing your repo
2. Install and Initialize the Interplay CLI - our tool to help build your components, generate config for them and deploy to Interplay.
   Installing and Initializing the CLI
3. Edit the CLI settings files to set the entry points for your repo and run the CLI to import components and/or design tokens. Running the CLI
4. Curate your imported components and tokens, to organise them for your designers. Curating your import

Next: Preparing your repo