For Design Systems

Design token management

Interplay allows you to manage your design tokens in tiered layers in the browser. You can create themes as sets of tokens, inheriting from base themes.

And because Interplay also connects your code components, you can interactively see the impact of design token changes across your system:

When you are ready, publish your tokens for your designers to use directly in Figma, specifying their intended use e.g. so that certain color tokens are for text and others for fills.

Automated code import

Automatically sync your production code components from your code repo and publish them for designers to use in Figma designs, side-by-side with Figma components.

By working directly with your code components, designers can compose screens with your production interactions, previewing their work in the browser and setting the same props as developers use, removing ambiguity from handoff.

Design System adoption

Interplay helps evolve your design system from a reference manual into tooling that accelerates design-to-code iteration in your product teams:

• Publish your design tokens and code components for designers to use directly in Figma.

• Create specs from these designs with JSX and token information intact

• Automate translation of Figma layout to your custom layout components

Manage contributions

Interplay helps manage contributions for your design system:

• Using Interplay specs, designers can provide specs of new or modified components for your design system.

• Automated translations help engineers implement these specs in your design system code

• Once implemented, Interplay syncs these new components and design tokens from your repo for you to publish in the next release of your design system.

Design System documentation

You can embed the latest component, token and spec information directly from Interplay in content tools such as Notion, so your documentation will stay up to date with these changes without a separate manual maintenance step.