Without the right tools, keeping copy consistent across projects is time-consuming and messy. Ditto’s library eliminates that friction by creating a central repository of reusable, approved content. Any changes made to a component will sync automatically across all projects.

This guide covers how to create, use, and manage components in your library to make your workflow smoother and more efficient.

Components are reusable text items published from your Ditto projects. Your library stores all components in an organized, searchable space. Any edits to a component's text or metadata update instantly across all instances—no need for manual changes.

For example, if you change a "Continue" button component to say "Next" in one project, every linked "Continue" instance in other projects updates automatically to "Next".

As your team works in Ditto, you’ll build a library of standardized components — like CTAs and error messages — eliminating the need for copy-pasting across screens and projects.

There are two ways to create Ditto components. You can publish a text item from your project to the library, or create a new component directly in your library.

If you’re working in Ditto and want a text item to be reused across projects, you can publish it directly from the web app or Figma plugin.

Publish a text item:

If you already know a piece of text — like an error message or product name — will be reused, you can create it directly in the library and link it later.

Create a component in your library:

Once you have built out your component library, you can link them to your projects in three ways:

Ditto automatically detects text items similar to existing components in your library by evaluating how closely they match. The fuzzy match types include:

Ditto will surface these suggestion matches in two places:

When linking a Figma text layer to Ditto. A Link option appears in the plugin — click it to link to the suggested component.

When selecting a Ditto text item. If there’s a match in your library, the Link to library component icon will turn purple — click it to link the suggested component.

You can link any text item in your designs to a component, even if they aren’t an exact match. The component’s text copy, metadata, and variants will replace the text item’s current values.

Link a text item to a component:

Link a component during text import:

Designers can add components straight into their mockups without importing text into Ditto first.

Alternatively, you can drag and drop the component into your design from the plugin.

To unlink a text item from a component, select the text item and click the unlink from component icon next to the component name in the details panel. Once you do this, this text item will become a regular text item, and edits will no longer be synced with the component. The component will remain in your library and other component instances will be unaffected by this action.

Keeping your library organized makes it easier for your team to find and reuse components. You can manage components directly from the library by editing text, adjusting metadata, and tracking usage.

To access your component library, click Library in the web app’s sidebar. This takes you to an overview of your top-level folders.

If you’re working in a project, click the view component in library ⎋ icon next to a component to be brought directly to that component in the library.

Selecting a component in the library opens a details panel where you can edit text, manage variants, and see activity and comment logs.

To see where a component is being used, go to the Instances tab. This lists every project and specific frame that contains the component. Clicking a frame name brings you directly to the design preview in Ditto.

On Ditto’s Startup and Enterprise plans, you can create folders to categorize components by product area, team, or function.

Create a component folder:

There are a few ways to organize components in folders:

You can multi-select components and move them in bulk via drag & drop too.

Multi-select components and choose Move to folder in the details panel and select the folder destination. This method is handy to move components in bulk between nested folders.