<aside> 👉 Design systems in Interplay are a special type of project that allow you to organise and publish design tokens and code components for use in your design tools.

</aside>

Design system projects are automatically available in the Interplay design tool plugins, so when you import components and tokens into your design system in Interplay, you are making them available in Figma too.

You can control how they are available in Figma using versioning and releases.

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 details of the import process, see Import Overview

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

Design Tokens

"Design tokens are are named entities that store visual design attributes, such as values for margins and spacing, font sizes and families, or colors values" - Jina Anne

Design tokens make up your design language, and adding design token information into Interplay allows you to compose your designs using the tokens instead of working with individual styles. When you push these designs to Interplay, developers can inspect the token information, eliminating translation and a key source of ambiguity in the handoff process.

To make your design tokens available in in Interplay, you can:

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

You can also combine the two approaches.

Managing tokens in the browser: Design Tokens and Themes Importing design tokens from your repo: Import Overview

Versions and Releases

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.

Designers who have their plugin pointing to the "latest" release (default) in the plugins will receive a notification when when a new release is available. Alternatively they may choose to work with a specific published version.

To publish a new Release of your project

• View your project history by clicking on the Changes and History tab
• At the top of the panel, click History to show the list of previous commits.
• Right click on the commit you want to publish and choose "Tag as Release..."

• Give the release a version name and a summary description. The commit messages since the last published version are shown by default.
• Click Publish

In the Figma plugin, you can see the available published versions under Manage Libraries. Typically designers will want to point to "latest" which means they will be using the most recent published version.

Next: Pending Changes and Commits