Component Suggestions

Component suggestions help you integrate your Ditto components into your projects more easily.

You can view and use component suggestions for a project in either the web app or the plugin. There are 2 types of suggestions:

1. suggestions for new components to create
2. suggestions for existing components in your library to attach

Suggestions will get updated continuously, even as you sync new text or frames to your project.

Suggestions for components to create

These are suggestions for Ditto components that might make sense to create based on repeated text in your Figma file.

For each suggestion, you'll be able to see:

• Potential component to create -- this is based on the details of the repeated text, and includes the text and any notes or tags if they exist
• Number of matching text items in your project
• Button to create the component and attach it to all suggested instances -- this will allow you to name your new component and attach it to all suggested instances
• Button to ignore the suggestion

If text that's repeated already matches an existing component in your library, it won't show up as a suggestion here. It will, however, show up as a suggestion to attach (see section below).

‍

Web app

To view suggestions for components to create, deselect everything in your project (just hit ESC) and head to the Components tab in the right panel. Then, click on the Create sub-tab.

‍

You can click on any suggestion to start previewing the identified instances in the project. Use the arrows to page through the text items.

‍

When you want to accept a suggestion, click the Create and attach to all button and name the new component in the modal:

To hide a suggestion, click Ignore. If you want to see it again in the future, you can just scroll down to the "Ignored Suggestions" section and click Unignore.

‍

Figma plugin

To view suggestions for components to create, click the Components tab in the top navigation bar. Then, click on the Create sub-tab.

For each suggestion, you can view the identified instances directly in your Figma file by clicking the Select link in the top right and using the arrows.

To accept a suggestion, click the Create and attach to all button. Then, name the new component and click Save to attach it to the identified instances.

To hide a suggestion, click Ignore. If you want to see it again in the future, you can just scroll down to the "Ignored Suggestions" section and click Unignore.

‍

Suggestions for components to attach

These are suggestions for Ditto components to attach because they're similar to text in your design file.

For each attach suggestion you'll be able to see:

• Text item(s) identified in your project — clicking on this will also give you the option to select and page through the text in the Figma file itself to check where you may be potentially attaching components!
• Component from your library that's suggested — the percent match to the text identified will also show in the top-right. The suggestions are ordered by percent match, with a minimum of 80%.
• Button to attach the component to the suggested instances — this will attach the component to each of the suggested instances
• Button to ignore the suggestion

‍

Web app

To view suggestions for components to create, deselect everything in your project (just hit ESC) and head to the Components tab in the right panel. Then, click on the Attach sub-tab.

Click on a suggestion to start previewing the matching text items in your project:

‍

When you want to accept a suggestion, click the Attach to all button. This will attach the suggested component from your library to all the identified instances. This newly-created component will now be available in your team's component library for anyone else to use in any other projects.

To hide a suggestion, click Ignore. If you want to see it again in the future, you can just scroll down to the "Ignored Suggestions" section and click Unignore.

‍

Figma plugin

To view suggestions for components to create, click the Components tab in the top navigation bar. Then, click on the Attach sub-tab.

For each suggestion, you can view the identified instances directly in your Figma file by clicking the Select link in the top right and using the arrows. You'll also be able to see the % match with the suggested component.

To accept a suggestion, click the Attach to all button.

To hide a suggestion, click Ignore. If you want to see it again in the future, you can just scroll down to the "Ignored Suggestions" section and click Unignore.

‍

You can still manually attach individual pieces of text to Ditto components. To do that, just select text in Figma and then attach it to a component in our "Selected" tab. For more information about general component usage, check out this guide.