Design systems

A design system in Interplay is a place to manage your design tokens and code components, and publish them to use in Figma via our Figma plugin. You can also connect your tokens to your code components so that you can immediately see the impact of token changes.

Creating a Design System

To create a new Design System, go to your Workspace dashboard

Click on Design Systems on the left hand side, then click the New Design System button on the right hand side.

You will be presented with a choice:

  • Choose an existing open source design system as a template to get started (recommended when exploring Interplay)
  • Or start with a blank design system to import your own design tokens and code components.

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).

For more details about managing design tokens, see Managing design tokens in your design system 

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. For more details about importing your own code components, see Getting started importing from your repo

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. For more details about curating your imported components, see Managing code components

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 - please let us know if we can help!

Publishing pending changes

Any changes you make to your Design System are immediately saved as pending changes, which you can then either publish or discard. Publishing your design system commits these changes into the design system and makes them available in the Figma plugin.

Viewing pending changes

When your design system project has pending changes, a notification badge will appear on the Publish button at the top right of your screen:

Click the Publish button to see a list of your pending changes. Click on each change to see more details about the change:

Publishing changes

Publish your pending changes to commit them to the project and make them available in the Figma plugin. When you publish, a new version is added to the version history of the project. 

To publish changes to the project:

  • Click on the Publish button to bring up the list of pending changes.
  • Use the checkboxes to select which changes you want to Publish. Use the heading checkboxes to select multiple at once. (Note that further changes made to the project while you have this panel open will not automatically be checked here.)
  • Set the version, enter a commit message and click Publish

If many changes are being published at once, a progress bar will displayed while any related navigation thumbnails are updated to reflect your changes.

Discarding changes

To discard pending changes you've made in the project:

  • Click on the Publish button to bring up the list of pending changes.
  • Right-click on the change you wish to discard and choose "Discard Change" to roll the item back to its previous settings:

Version History

Each time you publish changes for your project, you create an entry in the version history of your project. 

To view this history, click on the Version History tab (bottom left of screen) to see a timeline of changes.

To tag a new release or edit an existing release, click on the entry in the timeline and set a new version number and/or summary message. 

Publishing a release of your project makes it available in other projects and in the Interplay design tool plugins. Releases allow you to present a controlled, named set of versions out to the consumers of your design system.

In the Figma plugin, designers can then either choose to work with the "latest" release of your design system, (default) or work with a specific version you have published. They can make this selection under the Manage Libraries menu option in the plugin.

Next: Managing Design Tokens and Themes