Managing code components

Once you have imported code components into your design system, you can curate their configuration to make them most useful to your designers in Figma. For example, you may hide developer-only properties and provide guidance for how the components should be used.

Overview

You can edit the configuration of your components online in Interplay to curate how your components are presented - you might do this to add a description or to simplify how the component feels in your design tools.

Editing your component settings overrides the configuration imported from your repo. You can still continue running automated imports from your repo to keep your components up-to-date and your overrides will be re-applied to each import.

This article outlines what you can customise for your components. Most of the configuration discussed in this section can also be controlled from your repo, before it gets to Interplay. For more details please see Curating your Import.

Component Edit mode

You can edit the configuration of an imported component by browsing to it in your design system and clicking 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 on how the component will appear to designers in the Figma plugin.

Curating Components

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.

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.

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.

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

  5. 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. Please see Curating your Import for more details.

Adding or Editing presets

Presets are useful configurations of your components that provide starting points for your designers.

For example, a Button component may have presets with the Button configured in Primary, Secondary and Outline states. Designers could drop these presets into their designs and then customise the component properties further for their needs.

You can create Presets online in Interplay, or by importing them from files in your code repo. 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 Importing code components from your repo.

To create a Preset for a component manually in the browser:

  • Open your Project in Interplay and navigate to the relevant component.
  • Click 'New Preset' (below any existing presets) 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 system settings