Similar to how design systems keep UI consistent, use Ditto components to build a reusable text library to keep text consistent at scale.
Components are reusable text items that keeps your repeated text in sync across Ditto projects and live inside your component library. Any edits to a component's text or metadata update instantly across all instances.
As your team builds out your component library, you create a readily available collection of pre-approved, standardized text that’s easy to reuse in future projects. Link these components directly to your Figma designs to ensure text consistency and automatically sync copy changes across all linked instances. This means you’ll spend less time copying and pasting edits between projects, making your workflow much smoother and faster.
Publish reusable text to your component library
Publishing a component lets you reuse a text item not just within the same project, but across all your Ditto projects. Typically these are headings, CTA buttons, and footer copy which can be expected to be reused many times.
Publish a component:
Select the 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
Link text to a component
You can link a component in your library to a text item in your project. 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
💡 If there’s a match in your library, the Link to library component icon will turn purple — click it to link the suggested component
Add components directly to your design
When creating a new designs, its useful to add some relevant copy into the mockups to give the designs some context and structure. In Figma, add pre-approved components straight into your mockups to save time on writing placeholder text and enforce consistency across your product copy.
Add components directly into Figma:
Open the Ditto plugin in Figma
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 using the Figma desktop app (coming soon to the Figma web app).
