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
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:
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
- See Create Documentation for details
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
- See Manage Tokens for details
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
- See Manage Components for details
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
- Create Github PRs can call webhooks - see Publishing changes