Introducing Interplay AI to create and maintain your design system documentation ⟶
The design systems platform that connects design and codeInterplay connects and automates design and code workflows to align your entire product team around a single source of truth
“This finally connects design tooling with development in a practical way — unlike other tools, Interplay is built to integrate with existing design and dev workflows.”
HAMISH O'NEILL,DESIGN MANAGER AND DESIGN LEAD, ANZ
Design System DocumentationNEW
A single source of truthUnify, streamline, and elevate your design system with Interplay. Seamlessly integrate React and Figma components, manage Design Tokens, and author comprehensive guidelines.Plus now with Interplay AI - automating your design documentation, minimizing errors, and boosting productivity.
Design Token ManagementCreate, manage and distribute design tokensDesign tokens are the foundation of any design system. Interplay provides a single place for everyone on your team to define, manage and collaborate on design tokens. Interplay supercharges design token management and promotes consistency across your product.
Getting started with design tokens
29s
Managing Themes
29s
Figma PluginDesign with React components and design tokens in FigmaKeeping design libraries up to date with code can be a full time job. Interplay lets designers use the latest production React code components and design tokens in Figma. It’s like having a visual React playground in Figma. No coding skills required.
Design with React components in Figma
26s
Using design tokens in Figma
25s
Automations and CI workflowsAutomate your design system operationsBuilding components and writing documentation is only one part of the work in a successful design system. Interplay helps you save time on repetitive work so you can focus on driving adoption of your design system throughout your organisation.
Importing code with the Interplay CLI
28s
How it worksUnlock the potential of your design systemInterplay imports your React components and design tokens and creates a 1:1 mapping between design and code and keeps design and code in sync automatically.
Import your assets
Import your design system assets from NPM, Figma or straight from your repo.⟶⟵
Distribute everywhere
Curate and publish versioned releases to instantly make your design system available in Interplay and Figma. Add release notes so everyone knows what’s changed.PublishedVersion 1.2.9Updated examples and docs for Card component
Design with code
Rapidly compose screens and apply design tokens (including spacing, border radius and border) in Figma with the Interplay plugin.⟶⟶
Integrate with code
Export component JSX and Design Token JSON. Copy and paste the latest changes.<Banner title="Success" text={["PR created in Github"]} action={["Review in Github"]} type="success"/>
Automate and repeat
Set up webhooks and Github actions to automate imports back into Interplay so design and code are always in sync.on: committrigger: interplay
Get started for freeSupercharge your design systemInterplay helps high performing product teams work together and collaborate using a single source of truth.Get started for free →
Copyright © 2022. Interplay, Pty Ltd. All rights reserved.