Many teams use copy docs to organize and manage the text across their product — they act as the source of truth for all the copy in a project. But keeping copy docs in sync with mockups can be time-consuming, and stakeholders (like legal, marketing, or customer success) can have a difficult time reviewing text out of context.
With Ditto, you can create a living, dynamic copy doc! You can attach context and information to every piece of copy, and easily sync them back to Figma so your mockups can always be your copy source-of-truth.
Below, we'll walk through some tips for transferring your copy doc over to Ditto. We'll use this article on copy docs by Andrea Drugay, a UX writing manager at Dropbox, as our reference.
Traditional copy docs are used to manage copy for a project. They usually include several images of mockups/screenshots and corresponding copy tables. Here's the example from Andrea's article:
Most, if not all, of the elements of a copy doc can be found in Ditto! When you import a Figma file into Ditto, we'll automatically create a new project with all of the text in that file.
Set Up
To closely mirror the structure of a copy doc table, you can bring out pieces of text into Blocks, as shown in this video:
With blocks, you can create copy doc tables with the actual text that's in your design files (without any copy/pasting back and forth!).
To focus on only the text in blocks, you can collapse the remaining text from view.
You can easily attach information to a piece of text by selecting it, which opens up the Edit panel.
Here, you can:
Set the status
Write final copy in the text field
Add context in the notes section
Organize your text by adding tags
View the text in-situ
With Ditto, you can stop manually tracking and updating versions — we automatically record all edits to text and status!
Click the Activity tab for any piece of selected text to view:
Each item displays the name of the person who has made the change, what they changed, and when they changed it.
You can also view Project History by deselecting all text in the project.
When you want to update your Figma file with the latest copy changes, simply open up Ditto's Figma plugin and click the Resync button. Read the full guide on resyncing here →
Last but not least, Ditto is compatible with spellchecking browser extensions such as Grammarly , so you can make sure your copy is typo-free! 🙌
Open the Edit panel to see it in action.
