Component Settings

Components can sometimes require custom settings to display properly in Interplay or Figma. To open the custom settings for a component:

1. Navigate to the component in your design system in Interplay

2. Click on Settings button

Basic details

Use this tab to edit the basic display of the component in Interplay.

• Name

• Description

• Parent folder/component - use this to control where the component appears in Interplay

Properties

This tab shows any properties that have been parsed or addedfor this component.

• For more details, see Properties

Advanced

The advanced settings of the component control rendering behaviour.

Component styles

• Styling method
• None
• Use a component style property
• Wrap the component with stylable html
• Use a custom styling extension

• Wrapping element

Enter any element that should be used to wrap the element when rendering the component

Advanced settings

• Delay snapshot (milliseconds)

When you publish your design system, Interplay takes a snapshot of each component to use as a thumbnail in navigation and test the component renders visible content.

You can use this setting to tell Interplay to wait before taking this snapshot e.g. if your component fades in and doesn’t display anything for 100ms

• Returns fragment

Use this setting to tell Interplay that your component returns a React fragment, that may require special handling to display in an absolute position canvas.

• Force refresh

Setting this will force a full re-render of the component for each property change. This is useful if the component saves properties on the component state which you want to change.

• Resizable

Specify which dimensions can be resized in design. Most components auto grow their height based on width and contents, so resize by width is the default value.