Create a Design System

Document, manage and publish your design system in Interplay

Design systems in Interplay

Create a design system in Interplay to:

  • Publish your tokens and code components to use in Figma via our Figma plugin

You can import your own design system, or customise and use one of the open source design systems we have already imported.

Creating a Design System

To create a new Design System:

  1. Go to your Workspace dashboard at https://app.interplay.io
  1. Click on Design Systems on the left hand side, then click New Design System
  1. You can choose to start with one of the open source design systems we have already import or a blank design system to import your own tokens and code components
    1. You can create more than one design system if you would like to explore both options.

Design Tokens

To add your design tokens to your design system, you can:

  • Manage them through the browser (free on our Starter plan)
  • Import them from JSON files in your code repo (available on our paid plans).
 

Code components

To import your code components into your design system, you need to provide a build of your components and JSON configuration describing them.

The Interplay CLI can help you create and deploy both of these, or you can provide your own. See import overview for details.

Once you have imported your code components you will be able to curate their configuration in your project, to control how they are presented in Interplay and your design tools.

Design System Navigation

On the left hand side of your screen you have the navigation tabs available in your design system:

  • Components: contains code components imported to this project.
  • Tokens: contains design tokens imported into this project, organised into groups (special folders).
  • Version history: see history of changes to your design system
  • Settings: Edit the settings for this project
  • Help: Links to our documentation and support chat - let us know how we can help!
Did this answer your question?
😞
😐
🤩