Code Components

Add components to the canvas

To add component to the canvas:

From the plugin library, click and drag a component onto the canvas.

Release the mouse where you want to place the component. That’s it!

When you add a component to the canvas like this, Interplay generates a design component on the fly and keeps it connected with the related code component so that your design is always in sync with your production code.

If a component has more than one example, the default example for that component will be added to the canvas.

Using Component Examples

Each code component can have one or more examples configured:

A component example is a handy starting configuration your instance of the component - you can edit the properties of the component you just dropped to tailor it for your needs.

To add a specific example to the canvas:

From the plugin library click on a component. The available examples will be presented as thumbnail cards.

Drag the example card anywhere on the canvas

You can configure more available examples for your components by adding them online in your workspace project, or by generating more examples when importing components from your code repo.

Setting component properties

Code components in Interplay have properties which can be edited in the plugin.

A property is simply an option that lets you control how the component works or is displayed. For example a Button might have a props like Label (the button text), Type (Primary, Secondary, Danger) and Size(Small, Medium, Large)

To edit the properties of a component:

Click on the component that you want to edit on the canvas.

The plugin will display the available properties for the selected component.

Edit the properties you want to change.

Interplay will render the changes in real time on the canvas.

Click on a component on your frame and flip between the design and code tabs in the plugin to edit your components in design mode or JSX view:

To clear a value for a property

On the plugin Design tab, properties that have values set have their names displayed in bold. Click on the property name and choose Clear Value to pass no value to the component for this property.

On the Code tab, edit the JSX to remove the property value that is being passed for the property.

Resizing components

To adjust the size of the component you can resize the component directly on the canvas using the native drag handles.

👉 Note: If the code component doesn't have a width or height specified (for example, the size of a button might be determined by the content and padding, rather than a set width or height), then the component will snap back to the correct size.

On-Canvas Editing

You can edit string values, such as text, directly on the canvas using the native text tools in Sketch and Figma.

Select a text box on canvas (Tip: Use Cmd + Click to select deeply nested elements)

Enter text edit mode on the canvas by hitting return or double clicking.

Edit the contents of the text box. The property associated with the text string will be updated in real time.

👉 If the plugin isn't open when you edit a string on canvas, your on-canvas changes will be synced to the plugin when you next open the plugin.

👉 Note: Almost all text displayed in components will have an associated property, however, if you edit text which does not have a corresponding property, the changes will not be saved.

Nesting components

Some components will have properties which can accept child components. This lets you easily build up complex configurations from simple components.

You can nest components in the Design panel or by editing the JSX

This section describes nesting using the Design tab in the plugin. You can also nest components using the code view.

Add a child component

Click the plus icon to open the component picker.

Choose a component from the component picker to add it as a child.

👉 Note: Some components are designed to only work with specific child components. You can guide your designers by configuring which components are available for selection by editing the component properties in your Interplay workspace project.

Remove a child component

If you don't need a child component anymore you can remove it.

Click the minus icon to remove the child component. By default the last child component at the bottom of the list will be removed.

To remove a child component that is not the last child of the list

Select the child component you want to remove by clicking on the background just outside the card.

Click the minus to remove the selected child component.

Duplicate a child component

Select the child component item you want to duplicate by clicking on the background just outside the card.

Use the keyboard shortcut Cmd + C to copy the child component

Use the keyboard shortcut Cmd + V to past the child component

The child component will be added at the end of the child component list

Edit a child component

You can edit the properties of a child component just like any other component.

There are 2 primary ways to select a child component

Click on the child component item in the properties panel

Select the child component directly on canvas

Double click to drill into child elements on canvas until you have selected the right child component.

Use Cmd + Click on canvas

With the parent component selected, hit enter to drill in

To return to the parent component

Click the parent component name in the breadcrumb

Select the parent component directly on canvas

Reorder child components

Select the component on the on the component on the properties panel open, Click and drag a child component item to reorder

Design overrides

The Interplay plugin will automatically detect any changes you make to a component instance after you add it to your canvas.

We try to match these updates with properties the component accepts, e.g. string or number values. When we find these we will notify you which properties will be applied before re-rendering onto the canvas.

If there are design overrides which do not map directly to code component properties, you have the option to reset those changes, or detach the component to request a developer make the required changes to the code.

Troubleshooting

Sometimes code components do not render correctly in Figma.

Browser check

The first thing to check is if the code component is rendering correctly in the browser. This will check that the code itself has imported correctly and that your component instance has valid configuration.

To run your component in the browser it is usually easiest to:

Add it to a frame in Figma

Preview this frame in the browser by selecting the frame on the canvas and pressing the Play button in the Interplay plugin.

The browser will pop up, showing the currently selected frame in Figma and you can see if the component instance is display correctly.

Reporting rendering bugs

If the component is working in the browser but not in Figma please let us know and we can investigate.

The easiest way to let us know is via the plugin menu which lets you notify us and send all the component information with a couple of clicks.

Alternatively you can reach us on Slack or email support@interplayapp.com - please see Help and Feedback