Curating your component config

By default when you run the CLI, it bundles your code and aims to generate config for all your components, all their props and all matching presets (depending on your import settings). But some of the components and props might not be useful for your designers. This article shows you how to curate your imported config to keep everyone productive.

In this article

Why curate?

If our code repo is the source of truth, why curate the import? There are a few common reasons why you'd want to curate the 'everything' imported by default:

  • Hiding component props that are not relevant to designers
  • Providing guidance on how to use the components that is not enforced in the code e.g. by adding descriptions or constraints to simplify the design-tool experience
  • Adding information that could not be detected via parsing the code
  • Creating designer-friendly presets of common usage (e.g. Menu pre-filled with MenuItems)
  • Organising components into folders

Curating your import is optional - you can leave your components and props configuration unchanged and work with them in Figma and Interplay as imported.

👉 You don't need to modify your component code for Interplay - your components should be the same as you use in your production applications.

Approaches to curating

There are 3 ways of curating your imported configuration as outlined below. You can use a combination of these to manage different parts of your configuration.

1. Curating in Interplay

Perhaps the most convenient way of changing your configuration is by updating the imported configuration online in your Project. For example you can:

  • Update a component description to explain when it should be used
  • Set developer-only props to hidden so they are not displayed
  • Restrict the allowed child components for a component to guide your designers in how to use the system.

Updates you make to imported configuration via the Interplay UI are treated as overrides of the underlying 'truth' - the config received from the code repo. These overrides are preserved and re-applied to future imports unless the same setting is later changed in the code, in which case "code change wins" and the UI override is discarded.

For more details about editing components you have imported into your Design System, see Managing Components in Interplay

2. Curating from your repo

An alternative approach to curating imported items is to update the generated configuration before it gets to Interplay - effectively sending a different 'truth' to Interplay about what your repo looks like. We make these modifications in a way that is applied every run of the import.

  • To change how the component config is generated from the repo we can update the CLI settings used and use JSDoc tags to annotate component properties - see Parsing components for more detail.
  • To change how presets are generated we can apply preset rules or use data attributes in the JSX - see Generating component presets.
  • Alternatively we can generate the config using the CLI, and then curate it programmatically before sending it to Interplay - see Programmatically modifying config

3. Providing your own configuration

The Interplay configuration is simply a JSON config file that matches the Interplay Schema. This schema describes:

  • Components and their props in your build
  • Design tokens
  • Component presets
  • Includes - URLs that must be included to run your components, such as your deployed build files

Usually you can generate this config using the Interplay CLI, but you can instead generate your own JSON configuration file matching this schema. We still recommend using the Interplay CLI to deploy your generated configuration to Interplay because it will authenticate to your project, validate your config and call the Interplay API to deploy. It can also be used in your CI process to automatically keep Interplay updated.

We will be posting more details about the Interplay Schema very soon - please contact us if we can help with your configuration.

Next: Custom component builds