For Designers

Enhance and iterate your designs with tokens and code components

Last updated on Invalid Date

Design with code components in Figma

The Interplay plugin allows designers to use your latest React code components in Figma alongside your design components.

Designing with code means you can use exactly the same components as your engineers:

  • iterating screens directly with users, using production code components
  • gaining a deeper understanding the capabilities of the design system
  • using a common language with your engineers

You can still use normal Figma components and layout tools such as pinning and auto layout.

Notion image

Guided use of design tokens in Figma

Design tokens added to Interplay can be mapped for specific uses in Figma - for example, some color tokens could be mapped for use with text and others for fills.

This means that using Interplay, designers can confidently apply design tokens without needing to constantly context-switch to documentation or hunt around through long token paths.

Notion image

Live preview in the browser

You can click play in the Interplay plugin to preview your designs in the browser. Your design will displayed and any code components you’ve used will run as in production.

So you can enhance your prototypes with rich interactions of your coded components and you can get realistic feedback from your users.

This browser preview is live-updated as you change the design, so you can iterate quickly.

Easy, precise handoff using specs

You can share your designs as specs in Interplay without having to modify your design file. Simply create a spec and add the items you want to share.

Unlike other handoff tools, Interplay is aware of your code components and design tokens. So engineers can inspect the exact component properties and design tokens you used, with no redlines and nothing lost in translation.

Notion image

Contribute to your design system

Specs are often used for handoff of whole screens, but you can provide specs for components for your design system.

 

Code view

Should designers code? We say yes - if they want to!

Interplay allows you to flip between design and code view in Figma, working with a props panel or with the JSX of the code components you are using. Code view also works with our live browser preview.

And your engineers can inspect the exact JSX you composed in your specs, which eliminates duplication and misunderstandings.

Notion image
 
Did this answer your question?
😞
😐
🤩