A Ditto project is the space where your team works on copy for a specific feature, product area, or Figma file. This guide walks through creating a project, bringing in text, and setting it up so your team can collaborate from day one.

💡 Don’t have a Figma file yet? Duplicate Ditto’s Sample Figma and get started!

Step 1: Pick your platform

Ditto works from both the Figma plugin and web app— choose based on your role:

Figma plugin: best for designers drafting and editing copy directly in mockups
Web app: best for writers, editors, and anyone without a Figma seat; also where you manage components, variants, variables, and developer integrations

💡 You can switch between the two anytime, Ditto keeps copy in sync between them automatically

Step 2: Create your project

Easily keep your content and design in sync by importing your Figma file into Ditto as a new project.

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! 🎉

Step 3: Bring text into your project from your designs

Every piece of copy in Ditto is a text item. There are two ways to create them, depending on where you work.

Create text items directly from your Figma mockups

Click any text layer in your mockup and take an action (edit the text, change a property, leave a comment). Ditto creates a text item and links it to that layer automatically.

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

Have a designer add frames to your project first. Then click any unlinked text layer (dashed border) in design view and take an action — Ditto creates and links the text item.

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)

Step 4: Link repeated instances together

Ditto scans your project for repeated text, such as the same CTA or error message appearing across multiple frames, and suggests linking them so you manage them from one place. When you edit one, all others update automatically.

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

Step 5: Add 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: