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:
- Navigate to the component in your design system in Interplay
- 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.