Organise Components

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 usage guidance or to simplify how the component feels in your design tools by hiding developer-only properties.

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.

If you prefer, many of the configuration settings you can update in Interplay can also be controlled from your repo.

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.

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.

Component 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 components into your new folder
1. 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.