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 properties 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 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 as a component:

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.

Publish a new component:

Once you’ve published your components, you can attach them to your text items in three ways:

Ditto automatically detects text items similar to components in your library by evaluating how closely they match, and will surface a suggestion to attach the matching component if any are found. The fuzzy match types include:

Attach a text item to a suggested component:

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

Attach a text item to a component:

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 detach a text item from a component, select the text item and click the detach 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 properties, 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 the component name 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 view in that Ditto project.

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.