Quick start guide

Suggested steps for getting started with Interplay

Quick start

1. Install the Figma plugin

Install the Interplay plugin for Figma:

https://www.figma.com/community/plugin/736368164448889527/Interplay

 

2. Create your free Interplay account

Once you’ve installed the Figma plugin:

  1. Create a new Figma file
  1. Start the plugin
  1. When prompted, create your free Interplay account.
 

3. Try an open-source library

Login to the plugin and choose an open source design system to experiment with. (Yours will be available here too when you publish it in Interplay)

💡 Drag some code components from the plugin into frames in Figma and set their React properties.

 💡 Style some Figma objects using design tokens

💡 Click play in the plugin for a live browser preview, with working code components.

💡 Switch to code view to configure components in JSX

 

4. Create a spec for handoff

You can create Specs in Interplay to share your designs and collaborate on the implementation.

To create a spec:

  1. Go to the Specs tab in the Interplay plugin and click to Create new spec
  1. Select the frames you want to share and Add to Spec
  1. Publish your spec.

Once the spec is published, follow the link to inspect the spec in Interplay or go to https://app.interplay.io to find it in your workspace.

Unlike image-based handoff tools, Interplay understands design tokens and code components, so your team can inspect them in your spec for a precise, unambiguous handoff.

 
 

Next steps

Now you’ve experienced Interplay with an open source design system, create your own! You can either customise an existing one or import your own tokens and components.

Customise an open source library

The easiest way to create your own design system is to customise an open source library by updating its design tokens.

To do this:

  1. Go to the design systems tab in Interplay and click Create New
  1. Choose which open source library to use as the base
  1. Update the design tokens to customise your design system’s appearance.
  1. Publish your design system.

Once published, you can start using your design system in the Figma plugin.

 

Import your own design system

If you have your own design tokens and/or code components, you can start a new empty design system in Interplay and import them.

To do this:

  1. Go to the design systems tab in Interplay and click Create New
  1. Choose to create a new design system.
  1. Follow the steps in Importing Tokens and Importing Code Components to set up your design system.
  1. Publish your design system.

Once published, you can choose your design system in the Figma plugin.

 
 
 
 
Did this answer your question?
😞
😐
🤩