Properties
Configure component properties to guide users of your components
Properties Overview
Code components usually have powerful properties that allow developers to customise their behaviour to meet the needs of the application. Interplay exposes those exact same properties for designers to use.
When editing properties, it is very useful to enable Show Preview to see how your component will be presented to your designers after your edits:
To edit a property, click on its name on the left hand side and change its attribute values on the right hand side. Some of these attributes are highlighted below.
Hiding properties
Toggle the Visibility property to hide the property so that it is not displayed in Figma or the properties panel. Typically you would do this for properties which are "developer only" or not relevant to designers - hiding these can greatly simplify the how the component feels to use in your design tools.
Re-ordering properties
You can drag properties up and down in the left hand panel of the component property editor to re-order them.
Suggested values
Suggesting components to use inside other components can be a useful way of guiding your designers in using your components. For example, on the Card component you might suggest CardActions and CardMedia as suitable values for the children property. When a designer adds the Card component to their design, CardActions and CardMedia will be suggested for the children property, but they will allowed to use other components for children too.
Restricted values
Restricting the allowed values for a property goes one step further than Suggested values, by only allowing certain values. For example on the Breadcrumb component you may set the children property to be restricted to BreadcrumbItems components if no other child components are allowed inside Breadcrumb.