Component Settings

Settings to control component-specific behaviour


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
  1. Click on Settings button
    1. Notion image

Basic details

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

Notion image
  • Name
  • Description
  • Parent folder/component - use this to control where the component appears in Interplay


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

Notion image


The advanced settings of the component control rendering behaviour.

Notion image

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.

Did this answer your question?