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, every piece of copy is a text item. Text items capture your copy, properties like status, tags, and notes, and give you a place to share comments or suggest edits. Figma text layers or text in Ditto’s design previews can be linked to text items to sync your changes everywhere, in real time.

There are 2 methods to bringing text from your mockups into your Ditto project: either directly from your Figma file or through Ditto’s design view.

Create text items directly from your Figma mockups

For designers drafting copy or writers working directly in Figma, you can create Ditto text items right from inside Figma with all the design context in front of you.

Once you’ve created your Ditto project, click on any text layer in your Figma mockups. This will open the details panel in your Ditto plugin. By taking an action in the details panel, such as editing the text, changing its properties, or leaving a comment, Ditto automatically creates a new text item in your project and links it to the selected Figma layer. Ditto handles the creation and linking for you, so you can add text seamlessly as you work in Figma, while keeping everything in sync with your project in real time.

Create a text item from a Figma text layer:

Select a text layer in Figma
Take an action on the text and Ditto will automatically create a new text item

Create text items from Ditto’s design view

For writers who prefers working in a copy doc or don’t have a Figma seat, Ditto’s design view provides a dedicated space for product text while still giving access to the most up-to-date design context.

In this workflow, designers are responsible for creating the Ditto project from their Figma file. Once the project is set up, the easiest way to hand off designs to writers is by adding the relevant Figma frames into Ditto. If the full set of design is ready, designers can add all the frames to Ditto in one step. If the designs are evolving, frames can be added gradually on an as-needed basis.

Add Figma frames to a project:

Select the frame(s) in Figma
Select the … in the top right corner of the plugin and click Add frame(s) to Ditto

💡 To add multiple frames at once, hold Shift while selecting frames in Figma

Once the frames have been added to Ditto, you can see them in your web app’s design view, and interact directly with all the text layers in your frames.

Clicking on a text will display its details panel on the right hand side, which contains a list of actions you can take, including editing the text, changing its properties, and leaving a comment. By taking an action, Ditto will create a new text item in your project and link the text layer to that text item.

Create a text item from Ditto’s design view:

1. Select an unlinked text layer (dashed border)

2. Take an action on the text and Ditto will automatically create a new text item (solid border)

Link repeated text together

Frequently, you’ll find repeated instances of the same copy repeated throughout in your designs — from CTAs to error messages to buttons. Ditto constantly scans your project for opportunities to link these repeated text up so you can manage them all from one place, instead of chasing each instance down and manually updating them. When text layers containing the same copy is found, Ditto will surface a suggestion to prompt you to link these text layers up as multiple instances of the same text item.

Link repeated instances:

Click on Preview matches in the detail panel to see all repeated text found using the arrow keys
Click Link all to link all text layers to the same text item

💡 If you want to link repeated text across multiple projects, you should publish the text as a component

Provide additional context for teammates

After creating text items in Ditto and linking repeated instances, add some context to your copy to better collaborate with your teammates! Assign copy to a team member so there’s a clear owner of that text, and add properties like status and tags to track copy progress. Text assignments and properties will be applied to all linked text instances immediately.

Add properties to text items: