Import Overview

In order to use your code components and design tokens in Interplay and the Figma plugin you need to import them into Interplay.

Interplay provides a CLI tool that will help you do this.

You can import your own code components and tokens on our paid plans. To upgrade please see

Code components requirements

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 import your own code components you need to provide:

  • a UMD bundle of your components
  • JSON configuration describing your components

The Interplay CLI can help you create these by automatically bundling and parsing your code.

Alternatively you can create your own UMD build and configuration and use the CLI to deploy them to Interplay.

Design Tokens Requirements

You can import your tokens by providing a JSON file containing your token and theme information and then using the CLI to import this configuration to your project in Interplay.

  • The CLI supports the Design Token Working Group Draft Spec to import components from your repo.
  • Alternatively you can upload JSON containing your tokens to your project in Interplay in the browser, which supports both:
    • the Design Token Working Group Draft Spec and
    • ThemeUI token format

Getting started

Here are the steps to get started with importing from your code repo.