Enhance and iterate your designs with tokens and code components
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:
- communicating your design intent precisely in specs with no ambiguity because engineers can access your exact design tokens and component configuration
- 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.
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.
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.
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.
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.