Getting Started

Getting Started

Welcome! Here are the steps you need to get up and running:

1. Create your Interplay account

Currently, you'll need an invite to create your account. We are rolling these out as fast as we can - please go to https://interplayapp.com/ and click "Join Waitlist" to register your interest - thank you!

When you receive your invite email:

  • Click through to create your account.
  • When prompted, enter a name for your Workspace. This is where you will create projects in Interplay.

2. Install the Figma plugin

To understand Interplay, we recommend first seeing how Interplay allows designers to use code components in Figma.

Follow the link on the welcome screen to install our Interplay plugin for Figma.

Once the plugin is installed:

  • Create a new document in Figma
  • Open the Interplay plugin and login with your Interplay account.

3. Design with code in Figma

You can start designing with code components and design tokens! We've imported an open source library to help you get started.

Follow the purple onboarding steps in the plugin:

image

In this brief tour you will:

  • Drag and drop code components into frames in Figma and set their properties
  • Run your screens in React by previewing them in the browser
  • Experiment with tokens and themes
  • Push your screens to an Interplay project to further iterate them with code

For help with the Figma plugin, see

4. Next steps

There are lots of things you can do at this point. We suggest exploring the Interplay webapp at https://app.interplay.io/

On the free Starter plan, you can :

On paid plans, you can:

  • Import, curate and publish code components from your repo. You can also import design tokens from JSON files in your porand design tokens to use in Figma. For example:
  • Import your own code components and tokens:
    Import Overview

👉

Please let us know if you have any questions as you explore! You can contact us at support@interplayapp.com or via the Help menu at the bottom left of the Interplay webapp.