Ditto's component library is your team's shared collection of reusable, approved text — CTAs, error messages, legal copy, product names, anything that appears across multiple projects. When you update a component, every instance updates automatically, so you stop chasing edits across screens and files.
This guide covers when to publish something as a component, how to build your library over time, and how to use it in your daily workflow.
When to publish a component
Publish text as a component when:
It appears in multiple projects (not just multiple frames in the same project — for that, use linking)
It's considered approved copy that shouldn't diverge between products
You want changes to propagate everywhere automatically — CTAs, product names, legal disclaimers, error messages
Don't publish everything. A focused, well-maintained library is more useful than a library with hundreds of rarely-used entries.
Step 1: Publish text as a component
When a text item in your project is ready to be reused elsewhere, publish it to the library.
Publish a component:
Select the text item and go to the Library section in the details panel
Click Publish to library...
Choose a folder, edit the name if needed, and click Publish
Step 2: Attach components to existing text
As you work in projects, Ditto will suggest attaching text items that closely match a component in your library. Accept the suggestion to link the item to the component — from that point on, edits to the component apply to it automatically. You can also manually attach any text item to a component, even if there's no match suggestion.
Attach a text item to a component:
Click the Link to library component icon in the Library section of the details panel
Search for the component in your library and click Attach
💡 The Attach to library component icon will turn purple if the selected text matches a component in your library
Step 3: Use components in new designs
Add components directly into Figma mockups from the plugin's Assets tab — no need to write placeholder copy first.
Add components directly into Figma:
Go to the Assets tab and select Library Components
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 using the Figma desktop app (coming soon to the Figma web app).
Tips for a healthy library
Organize by product area or team: use folders to keep things findable (available on Startup and Enterprise plans)
Audit regularly: check the Instances tab to see if components are actually being used; archive or delete ones that aren't
Add variants for translations: when you add a variant to a component, it applies to all instances automatically, which makes localization much faster