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 properties 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. Attach 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:
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
Attach text to a component
You can attach a component in your library to a text item in your project. The component’s text copy, properties, and variants will replace the text item’s current values.
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
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:
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).
