The text users see in a product is a critical part of their experience — it can be responsible for everything from guiding users through complex experiences to increasing conversions or explaining liability. And on most teams, lots of people on a team play a role in getting that text in front of user — from designers, writers, and engineers, to legal and marketing.

However, for many teams, that process of getting text written, reviewed, and in front of users can be tedious and inefficient. It involves every role copy and pasting text between a patchwork of documents, spreadsheets, designs, and code. This ultimately results in inconsistencies and damage to the user experience.

Ditto functions as a single source of truth for product copy so that everyone touching text is on the same page, and your team can ship clearer and more consistent copy, faster.

How does it work?

There are 3 parts to setting up your single source of copy truth in Ditto:

  1. Componentize your text
  2. Connect to design
  3. Distribute your text

6503f42d6b5dac33a4fe6f14_Ditto-end-to-end.png

Componentizing your text

In Ditto, text is treated as reusable, instead of one-off, isolated elements. Instead of writing the same text from scratch every time there’s a new project, your team can build a library of text that’s reusable across projects, whether it’s error messages or CTAs. These reusable pieces of text are called Ditto components.

Each text component links up all the instances where that text exists in your product. This means you can edit text in one place, and Ditto will take care of making sure that all other instances are updated too.

Your team’s reusable component library will help speed up workflows and enforce consistency at scale. Even better? It’s also fully connected to the rest of your product development process. Your library syncs to both design and development, so you can guarantee everyone on your team is working from the same, up-to-date, and deduplicated source of truth.

Connecting to design

Text is as much a part of user experience as the layout and the visuals, and Ditto makes it easy to ensure they stay tightly coupled through the product development process.

Ditto accomplishes this with a Figma plugin and 2-way Figma integration. You’ll be able to do things like: