Code components can be imported and managed in Design Systems (paid plans only)
You can edit the configuration of your components online in your Interplay project.
If the component was imported from your code repo, editing the config online overrides the imported config to curate how your components are presented. You might do this to add a description or simplify how the component feels in your design tools.
For code components, most of the settings discussed in this section can also be controlled from your repo, before they get to Interplay. For more details about these options for curating your configuration, please see
To access the Edit mode for your component, browse to the component in your Project and click Edit at the top right of the screen.
This will open the component editor. Toggle "Show Preview" to see the live effect of your edits as they will be presented to consumers of your project components:
Component name and description
To edit the component name and description, open the component in Edit mode as described above. On the Basic Details tab, add or edit the name and description for your component.
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.
To start editing the props of your component, browse to your component in your Project, and either
- click Edit at the top right and navigate to the Properties tab in the component editor,
- or locate the properties panel and click Edit Properties
This will bring up the component property editor to edit the properties of your component:
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.
Code components often have properties which are "developer only" or not relevant to designers. Hiding them can greatly simplify the how the component feels to use in your design tools such as Figma.
To hide the property, toggle the Visibility setting.
You can drag properties up and down in the left hand panel of the component property editor to re-order them.
Suggesting components to use inside other components can be a useful way of guiding your designers through the library.
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
Restricting the allowed values
Restricting allows values for a property goes one step further than Suggested values, by only allowing certain values.
For example on the Breadcrumbs component you may set the
children property to be restricted to BreadcrumbItems components if no other child components are allowed in your code.
Organising components into folders
You can organise your components into folders to help consumers of your components work with them.
To create a new folder:
- Navigate to the components tab in your project
- Click the + at the top of the components list and choose Add Folder
- A placeholder folder will be added at the foot of the components list. Double-click on the folder name to rename it
- Drag and drop components into your new folder
For large numbers of components, such as Icons, it is easiest to script this process in your repo by adding a
path property to each component's configuration. For more details please see
Adding or Editing presets
Presets are useful configurations of your components that provide starting points for your designers - they can add presets to their designs and then customise the component properties for their needs. You can create them online in Interplay, or by importing them from files in your code repo.
Once you have imported your code components from your repo, you can create or edit the presets for them manually in Interplay.
For creating large numbers of presets it is usually easier to import them from files in your repo. As they change over time you can re-import them, just as you do for components. For more details, please see the Presets section in
To create a component manually:
- Open your Project in Interplay and navigate to the relevant component.
- Scroll below any existing presets displayed for your component and click 'New Preset' to create a new preset for this component.
- Click Edit Preset to start editing the component properties, add any child components. You can work with the property panel in design view, or you can switch to code view and edit your preset as JSX.
This add a new placeholder preset - an empty instance of this component that just uses the component's default property values.
Presets which have been created or edited through the Interplay UI are locked to prevent their settings being automatically updated by future imports from your repo, so that you don't lose your edits.