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.
💡 For more tips and tricks on making the most of Ditto components, check out our guide on building out your reusable text library!
Component library basics
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.
Creating a component
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.
Publish text to 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:
Under the Library section in the details panel, click the Publish to library... button
Choose a folder to store the component
Edit the name if needed, Ditto will generate a name based on the component text
Click Publish
Create a new component in your library
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:
Click New component
Enter the text value
Choose a folder. If you are creating from inside a folder, it will get auto-assigned.
Edit the name if needed, Ditto will generate a name based on the component text
Click Create
Use components in your projects
Once you have built out your component library, you can link them to your projects in three ways:
Suggested components: If a text item matches an existing component, Ditto will suggest linking it
Link to an existing component: Link any text item to a component in your library
Add directly to your design: Insert components straight from the Ditto plugin into your designs
Suggested components
Ditto automatically detects text items similar to existing components in your library by evaluating how closely they match. The fuzzy match types include:
Exact match: 100% match
Almost exact match: Differs only in styling or casing
Close match: 80% similarity
Similar match: 50% similarity
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.
Link to an existing 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:
Select the text item
Click the Link to library component icon in the Library section of the details panel
Search for the component in your library and click Link
Link a component during text import:
Select the text to import as a component
Click Link → Library component
Search for the component in your library and click Link
Add components directly to your design
Designers can add components straight into their mockups without importing text into Ditto first.
Go to the Assets tab and select Workspace library
Browse and select a component
Click Add to insert it into your design as a text layer
Alternatively, you can drag and drop the component into your design from the plugin.
💡 Drag & drop is currently only supported on the Figma desktop app, not the Figma web app
Unlink a component
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.
Managing your component library
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.
Navigate to your library
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.
Manage components from 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.
Component folders
On Ditto’s Startup and Enterprise plans, you can create folders to categorize components by product area, team, or function.
Create a component folder:
Click the + button on the left side back
Select New folder
Name your folder and click Create
Move components between folders
There are a few ways to organize components in folders:
Create component directly in folders
Move components between folders via drag & drop
You can multi-select components and move them in bulk via drag & drop too.
Move components to a target folder
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.