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