Building your product copy source of truth starts with bringing text you care about into Ditto. This text lives inside Ditto projects, a space where you will work on your text day to day with your team. You can think of a project as the home that holds all the copy for a specific feature, product, or Figma design file.
This guide walks through using Ditto’s web app and Figma plugin, creating a Ditto project from your Figma file, and bringing text into your projects.
When to use Ditto’s web app and the Figma plugin
Ditto offers two ways to manage your projects: the Ditto web app and Figma plugin. The two have functionality parity, meaning you can edit, collaborate, and manage text from both platforms, but they are optimized for different workflows.
The web app is better suited when you want to edit and review copy across multiple screens, search or organize your content, or draft text that won’t get mocked up (eg. error states, accessibility text). Additionally, anyone who don’t have Figma access or isn’t usually in the design file can still collaborate on copy through the web app. This is also where you manage everything outside a project, including components, variants, variables, and developer integrations.
The Figma plugin is more useful for those drafting and making edits who benefit from having the Figma design context and workflow. Designers can stay in Figma while getting the latest copy updates from Ditto synced automatically into their designs.
💡 Open your project in the web app by clicking the three-dot menu (…) in the top right of your Figma plugin, then click Open project in Ditto.
You can choose which platform works best for your day-to-day workflow since Ditto will sync any copy changes between the web app and your Figma files, ensuring you always have the latest copy at hand!
Create your first Ditto project
Easily keep your content and design in sync by importing your Figma file into Ditto as a new project.
💡 Don’t have a Figma file yet? Create a draft project first and start collaborating on your copy!
Create a Ditto project from the Figma plugin:
Open and log into Ditto’s Figma plugin (Actions → Plugins & widgets → Ditto)
Copy your Figma file’s URL and paste it into the plugin
Select Start a new project and click Continue
Congrats, you just created your first Ditto project! 🎉
Bring text in from designs
Now that you’ve created your Ditto project and connected it with your Figma file, it’s time to get some text in there for your team to collaborate on!
In Ditto, text items are the basic building blocks for your source of truth. Bring in text from your designs that you want to iterate on with 3 simple steps.
Import text from your Figma file
For any text layer in Figma, you can import them into Ditto as individual text items or as part of a block.
Import a text item:
Select a text layer in Figma
Click Import in the Ditto plugin
💡 To import multiple text layers at once, hold Shift while selecting them
Text in your product often appears together with other text. In Ditto, you can group related text items together using a block to help you establish hierarchy and context within your project. For example, import all your hero copy together as the Hero block.
Import text as a block:
Select the text layers you want to group in Figma
Click Import as block in the Ditto plugin
Name the block to keep it organized
In the web app you can see the new block with the imported text group in its own section.
💡 Avoid importing all of your copy from a frame or page all at once, as this clutters your project with text and you lose the opportunity to create blocks upon import
Link repeated text together
Once copy is imported, Ditto automatically detects any repeated text items and blocks within the same Figma page, and surface a suggestion to link these instances together. If you accept, any time you edit one instance, all the others will automatically get updated as well — making it easy to keep text consistent!
Link repeated instances:
Click on a text item or block in Figma and check if any repeated text are found
Preview match to see all repeated instances in your project
Select Link to link all instances together
💡 If you want to link repeated text across multiple projects, you should publish the text as a component
Provide additional context for teammates
After linking any repeated copy instances, add some context to your text items! Assign copy to a team member so there’s a clear owner of that text, and add metadata like status and tags to track copy progress. All text assignments and metadata will be applied to all linked text instances immediately.
Add metadata to text:
Assign copy to the relevant team member or yourself
Set the status to 🔴 Work in Progress
Add any tags or notes for further context and organization
➡️ Up next: Learn how to iterate on product text with your team inside a Ditto project