Add example configurations of components to use in your design tools

Last updated on Invalid Date

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.

Did this answer your question?