Plugin Overview

Overview

Interplay has a native plugin for Figma which allows you to:

• Work with your latest production code components in Figma

• Use your design tokens in Figma

• Work with component props or code view

• Live preview your design in the browser

• Create specs and share them with engineers to inspect in Interplay

Design with code components

Once you have added your code components to Interplay you can work with them directly in your Figma designs.

In this example we are adding a React code component from the open source Base UI design system. When we update the react props in the plugin the component is updated on the Figma canvas.

So designers can work with exactly the same code components that your engineers are using to build your product.

Work with design tokens in Figma

You can also import your design tokens into your design system and publish them for use in Figma.

Different tokens can be mapped for different uses in Figma.

In this example we are styling Figma text and a frame using design tokens. When we click on the text we are guided to use tokens mapped for typography and text color, and for the frame we are guided to use tokens mapped for fill, shadow and border.

So as designers we can confidently apply tokens from the design system.

Work with code view

When working with code components we have the option of flipping to code view to configure the components using JSX instead of the props panel.

In this example we have switched to the code view to add another link into the Breadcrumbs component.

Live preview in the browser

At any time we can click play in the plugin to see a live preview of our work in the browser. This runs your design as the live React components.

So when we click play in the plugin, the browser opens with our screen running. We’ve used production code components to create the screen, so when they are running in the browser we can interact with the calendar and menus, and the navigation bar behaves responsively.

Creating Specs

We can create specs to share our work with engineers.

In this case we’ll create a spec for our demo screen and save it to Interplay…

…so our engineers can inspect the spec in the browser and see the exact configuration of code components and design tokens that we used, in addition to css and position information:

• The code components are displayed as JSX with the props we set

• The design components are shown styled as CSS, with the precise design tokens we used