<aside> 👉 Code components can be imported and managed in Design Systems (paid plans only)

</aside>

Overview

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.

<aside> 👉 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 Curating your import

</aside>

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.

Editing properties

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:

<aside> 👉 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

</aside>

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

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.

Re-ordering properties

You can drag properties up and down in the left hand panel of the component property editor to re-order them.

Suggesting values

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 children too.

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:

1. Navigate to the components tab in your project

   

2. Click the + at the top of the components list and choose Add Folder

   

3. A placeholder folder will be added at the foot of the components list. Double-click on the folder name to rename it

   

4. 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 Programmatically modifying config

Adding or Editing presets

<aside> 👉 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.

</aside>

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 Running the CLI

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.

  

  This add a new placeholder preset - an empty instance of this component that just uses the component's default property values.

• 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.

Locking presets

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.

Next: Design Tokens and Themes