Where designers and engineers build products togetherInterplay is a design systems platform that connects your design tools and code workflows
“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
The design APIA workflow for design systemsInterplay streamlines your design system workflow by using code as the source of truth. Save time on repetitive work and focus on driving adoption of your design system throughout your organisation.
Import React componentsImport React components directly from your design system repository. Support for Vue and Web Components coming soon.
Design with code components in FigmaCompose with production code components and tokens in Figma and Interplay.
Inspect code, not picturesExport and copy JSX and token values straight from designs – no detective work required.
A truly shared languageCode as the source of truthInterplay replaces UI Kit LibrariesInterplay lets designers consume React components and Design Tokens in Figma and Interplay. They're synced with your repo so they're always up to date.Speak the same languageEveryone can work with the same code components and design tokens, so designers and engineers finally have a shared vocabulary.
A collaborative workspaceLet’s end handoff, togetherPush from Figma and inspect JSXInterplay preserves the mapping between design and code components and tokens so developers can inspect JSX that's ready to hook up to back end logic.Iterate togetherIn the Interplay Editor you can increase design fidelity by replacing design layers with code, remixing components and specifying design tokens.
Built for design systemsUnlock the potential of your design systemPublish versioned releases of the latest design system to all of your projects across Figma and Interplay. No redrawing components required.Continuous integration workflows with CI tools and Github actions so design and code stay in sync automatically.First class design token support so you can import, edit and publish design tokens. Full support for theming and the draft Design Token Community Group Specification.
How it worksAutomate repetitive work so you can focus on higher impact workWork directly with the real code components and design tokens you already have side-by-side with new design components
Import your repositoryUse the Interplay CLI to import your design system straight from your repo, or generate your own build and config.
npm @interplay/cli
Distribute everywhereCurate and publish versioned releases to make your design system available in Interplay, Figma and Sketch (coming soon). Add release notes so everyone knows what’s changed.
PublishedVersion 1.2.9Updated examples and docs for Card component
Design with codeRapidly compose screens in Figma with the Interplay plugin. Increase fidelity, remix components and edit design tokens in the Interplay Editor.
Coming soon
Integrate with codeExport 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"/>
RepeatTrigger automatic imports back into Interplay with Github actions or CI tools so design and code are always in sync.
on: committrigger: interplay
Join the waitlistLet’s end handoff, togetherInterplay helps high performing product teams work together and collaborate with code as the single source of truth.
Copyright © 2021. Interplay, Pty Ltd. All rights reserved.