Create a Design System

Document, manage and publish your design system in Interplay

Versions

Version your design system with releases

Settings

The settings available for your Design System

Permissions

User security is managed at the workspace level

Starting your docs

Get started documenting your design system in Interplay

Tabs, Sections and Pages

Organise your content using Tabs, Sections and Pages

Formatting text

Format text using text blocks

Documenting tokens

Document design tokens managed in Interplay

Documenting components

Document your components in Interplay

Embedding Figma

Embed components and other content from Figma

Embedding Storybook

Embed storybook stories in your documentation in Interplay

Integrations

Embed automated content from Interplay in Notion and other tools

Create design tokens

How to add design tokens to your Design System

Apply design tokens

Use your design tokens in Figma

Token values and types

Types, aliases, functional tokens and controlling usage

Mapping to Figma

Guiding designers when using tokens in Figma

Themes

Manage multiple sets of tokens as themes

Exporting design tokens

Export your design tokens from Interplay

Token file formats

JSON file formats for importing your tokens

Supported components

Code frameworks currently supported by Interplay

Import Components

Import code components from your repo

Organise Components

Rename your components and organise them into folders

Properties

Configure component properties to guide users of your components

Examples

Add example configurations of components to use in your design tools

Component Settings

Settings to control component-specific behaviour

Overview

Import your code components for rich prototypes and streamlined collaboration

Prepare to import

Prepare to import by cloning your repo and installing the CLI

Import Design Tokens

How to import design tokens from your repo using the CLI

Import Code components

Import code components in stages, creating the configuration settings needed for each stage

Example Import Settings

Example CLI settings for different code repos

Updates and CI

Stay up to date automatically by adding the CLI to your Continuous Integration process

Custom builds

Customise the CLI build process, or provide your own build

Control parsing

CLI settings and JSDocs in your repo

Parse examples

Modify output config

Programmatically update the generated config

Pass tokens to components

Interactively use your tokens to theme your code components

Includes and Font mappings

Map fonts for use in Figma

Upgrade CLI version

Upgrade to the latest CLI version