Create a Design System

Create a design system to manage and publish your design tokens and components

Versions

Version your design system with releases

Settings

The settings available for your Design System

Permissions

User security is managed at the workspace level

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

Themes

Manage multiple sets of tokens as themes

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

Presets

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

Generate presets

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