AI replaces components

AI Design System Creator and AI Design System Maintainer allow you to easily extract elements that can be turned into styles or components from design files. Designers can create their own styles from suitable candidate styles or components.

For the remaining candidate styles and components, Motiff supports one-click replacement with styles or components in the design systems using AI replaces components.

The AI replaces components plays a crucial role in the following scenarios:

• When design elements in a file need to reference a style, they can be replaced with styles that already exist.
• When properties are incorrectly used in design files, they can be replaced with styles from the design system.

Replace styles and components

1. 1.In the recognition results, select one or more candidate styles or components that need to be replaced.
2. 2.In the Candidate style or Candidate component modal, click .
3. 3.Select the style or component you want to replace in the Replace styles panel and click Replace.

Publish the replacements

1. 1.Click in the upper right corner of the canvas to open the Publish replacements panel.
2. 2.View the replacements to be published in the Publish replacements panel and click Publish replacements.

Accept style or component updates

When the candidate styles and components that need replacement are published, the corresponding design files will receive update notifications.

1. 1.Open the relevant design files that contain the styles or components you want to replace, click in the toolbar to update them.
2. 2.In the Replace styles or Replace components panel, you can view and replace styles or components for the current page or file.
   • Click to locate the layer that needs replacement.
   • Click Replace to update the styles or components.