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:
Suggestions will get updated continuously, even as you sync new text or frames to your project.
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:
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).
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.
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.
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:
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.
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.
You can also get Ditto to automatically attach any text to a component if that text is a 100% match.
To turn on this functionality, just click the 3 dots in the top right corner of your project, and select “Sync Settings and Automation” from the dropdown list. This modal will give you the option to automatically attach exact component matches. Once you check the box, you’ll be able to choose whether you want to attach to all components, or only components in a specific folder.
Once you enable this setting, Ditto will automatically attach any components to existing text, or any time you edit text to match a component. If you don’t like a match, simply select “Undo” in the activity log to reverse the action.
✍️ Note: If your text or component has variants associated with it, the base text and variant text will have to be exact matches in order to be auto-attached.
When Ditto automatically attaches component matches in a project there is a brief period of time when you can bulk revert the action. This gives you the chance to un-attach the text items that Ditto automatically attached to components in your project.
✍️ Note: Bulk revert is only available for a short period of time—about ten minutes. This is to prevent inadvertent data loss if text items are changed before a bulk revert is carried out.
