interplayapp Documentation
Documentation
  • Start Here

    • Overview
      • Welcome
      • FAQs
      • Help and feedback
    • Workflows
      • For Design Systems
      • For Designers
      • For Engineers
    • Getting Started
      • Quick start guide
  • Design Systems

    • Overview
      • Create a Design System
      • Versions
      • Settings
      • Permissions
    • Creating Documentation
      • Starting your docs
      • Tabs, Sections and Pages
      • Formatting text
      • Documenting tokens
      • Documenting components
      • Embedding Figma
      • Embedding Storybook
      • Integrations
    • Design Tokens
      • Create design tokens
      • Apply design tokens
      • Token values and types
      • Mapping to Figma
      • Themes
      • Exporting design tokens
      • Token file formats
    • Code Components
      • Supported components
      • Import Components
      • Organise Components
      • Properties
      • Examples
      • Component Settings
    • Import from your repo
      • Overview
      • Prepare to import
      • Import Design Tokens
      • Import Code components
      • Example Import Settings
      • Updates and CI
    • Advanced configuration
      • Custom builds
      • Control parsing
      • Parse examples
      • Modify output config
      • Pass tokens to components
      • Includes and Font mappings
      • Upgrade CLI version
  • Figma Plugin

    • Use Interplay in Figma
      • Overview
      • Install plugin
      • Choose a design system
    • Features
      • Design Tokens
      • Code Components
      • Live Preview
      • Code View
      • Versions
      • Specs
      • Keyboard Navigation
  • Handoff Specs

    • Share Designs
      • Create a Spec
      • Publish changes
    • Inspect Designs
      • Open a Spec
      • Inspect
  • Workspace Setup

    • User Accounts
      • Account settings
    • Workspaces
      • Create a workspace
      • Invite members
      • Roles and security
      • Billing
  • More

All Categories
Design Systems

Overview

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

Creating Documentation

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

Design Tokens

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

Code Components

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

Import from your repo

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

Advanced configuration

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