For Engineers

Precise design handoff and automated translations to your custom JSX code

Code-based handoff

Interplay specs provide a secure space for designers to handoff their work for implementation. Interplay empowers designers to work with your production code components and design tokens, and where these have been added will show through as JSX in the spec.

So instead of receiving pictures from designers to re-implement in code, you and your designers can iterate a clean configuration of your own production components together.

Where a component only exists as a design component, Interplay shows any design tokens used in styling it addition to the usual positional handoff information found in image-based tools.

Notion image

Design-to-code translations

Figma provides designers with tools such as styles and auto layout frames instead of design tokens and layout components.

You can configure Interplay to translate these and other Figma config to components in your design system - automating what you would do manually.

For example, a horizontal auto layout in Figma might map to a Stack component in your design system with an orientation prop set to ‘horizontal’.

Closing the loop

Once you have implemented a new component in your code repo, it can be imported into Interplay as part of your design system - either as part of your company-wide design system or a project-level design system.

Your designers will then always have the latest version of the component to work with in the next iterations of any screens that need it, and you can configure design-to-code translations using that component.

So as your component libraries mature, the higher the “coverage” they provide, and you can focus on assembling and iterating product screens as a team.

Notion image
Did this answer your question?