Quick start guide

Suggested steps for getting started with Interplay

Welcome to Interplay! 🎉

Interplay is a platform that uses design systems to streamline workflows for digital product teams. It combines the following tooling into a single workspace:

  • Design system management, including managing design tokens and code components that sync with your code repo
  • Design system documentation including your components, tokens and free-form content
  • A plugin to work with design tokens and code components in Figma
 

Quickstart

👇
Here are some recommended steps for getting started. Let us know if you have any questions via the chat or support@interplayapp.com

1. Create your free Interplay account

Sign up for your free Interplay account at https://app.interplay.io and create your workspace when prompted.

If you’ve been invited to an existing workspace you will automatically join this when you click on your invite and create your account.

2. Create your Design System

A Design System in Interplay is a place for your documentation, components, tokens and other settings.

In your workspace dashboard, choose New Design System.

When prompted, choose either a blank design system or start with one of the open source libraries we have imported.

 

3. Manage your design system

Your design system is organised across 3 navigation tabs:

Notion image
 

On the Docs tab, you can document your design system in the browser with our blocks-based editor:

  • Add tabs and pages, and type / (forward slash) to set the type of block
  • Embed content from Interplay and other sources such as Figma and Storybook
  • Publish your docs to a custom domain
 
 

On the Tokens tab you can add and manage your design tokens:

  • Add tokens individually, upload a JSON file or explore some sample tokens
  • Automate token imports and publish token out as Github PRs
 
 

On the Components tab you can add and manage your components:

  • Register components manually through the browser or import from Figma (soon)
  • Import from your code repo
 
 

4. Publish your design system

Publish your design system to create versions and make it available outside Interplay:

  • Work with your design tokens and components in Figma - see Design to Code
 
 
 
 
 
 
Did this answer your question?
😞
😐
🤩