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 truthDocument your design system and bring all of your design system artefacts together into a single place. With Interplay you can document both React and Figma components side by side, manage Design Tokens and author content and guidelines to align your whole team around a single source of truth. Interplay is where design and code work together.
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
Handover & InspectInspect code, not picturesWith Interplay Inspect, engineers can finally inspect and copy accurate, production ready JSX from designs. Instead of a link to documentation, Interplay Inspect exposes every component, prop value, and design token used in the design. Optionally specify code translations to save even more time.
Inspect code
22s
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 betwen design and code and keeps design and code in sync automatically.
Import your repository
Use the Interplay CLI to import your design system straight from your repo.zsh
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.Coming soon
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 system adoptionInterplay helps high performing product teams work together and collaborate with code as the single source of truth.Get started for free →
Copyright © 2022. Interplay, Pty Ltd. All rights reserved.