Getting started importing from your repo

Import overview

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

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

Import steps

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

  1. Create a local copy of your repo and install the Interplay CLI, our tool to help import design tokens and code components from your repo - see Preparing to Import
  2. Edit the CLI settings files to set the entry points for your repo and run the CLI to import design tokens and/or import components
  3. Curate your imported components and tokens, to organise them for your designers - Curating your import

Next: Preparing to import