Getting started with Interplay

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.

If you are a new customer: Please go to https://interplayapp.com/ and click "Join Waitlist" to register your interest - thank you! We are sending out invites in stages to ensure the best experience for everyone. Once you receive your invite email, click through to create your account and your new workspace.

If your are invited to an existing workspace: You can simply click through on the invite email to accept your invitation and join the workspace.

2. Design with code components and design tokens in Figma

Now that you have an account, we recommend taking a brief tour of Interplay plugin in Figma, to see how easily you can work with code components and design tokens, preview your code-based designs in the browser, and push your designs to Interplay:

  1. Install the Interplay plugin for Figma: https://www.figma.com/community/plugin/736368164448889527/Interplay
  2. Create a new document in Figma
  3. Open the Interplay plugin and login with your Interplay account
  4. Choose the BaseUI sample design system and follow the onboarding tour:
  5. image

For help with the Figma plugin, see

3. Inspect your designs in Interplay

At last, a handoff tool that understands your design tokens and custom code.

By pushing your designs to Interplay, you can inspect the design layers as you can in other tools. What makes Interplay different is that you can also inspect the code components and design tokens used - exactly as the designer composed them.

To inspect a design:

  1. Push a Figma frame into an Interplay by choosing the upload icon in the Interplay plugin:
image

  1. Choose or create the project you would like to upload your design to.
  2. After the upload is complete, click through on the link provided to open your Interplay project, and inspect your design by clicking on the different parts of your composition.

4. Next steps

There are lots of things you can do at this point!

On our free Starter plan, you can:

On our paid plans, you can also:

  • Import your custom code components from your code repo:
    Import Overview
  • Automatically sync design tokens from your code repo.
  • Add Interplay to your Continuous Integration process to automatically keep Interplay and Figma up to date.

👉

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 in Interplay.