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
- Connect your tokens to your code components, so that you can interactively edit your tokens and see your code components change.
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:
- Go to your Workspace dashboard at https://app.interplay.io
- Click on Design Systems on the left hand side, then click New Design System
- 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
You can create more than one design system if you would like to explore both options.
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).
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!