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.
There are 3 parts to setting up your single source of copy truth in Ditto:
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.
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:
The ultimate destination for your copy is in front of your users. To get there, it’ll need to get handed off to developers and potentially other tools and processes (ex: directly to development, localization, A/B testing).
Ditto makes it easy to make sure the right copy gets to those places, at the right time. Using Ditto’s API, CLI, and SDKs, developers or other tools can pull the latest copy directly from your Ditto source of truth, in whatever format is needed.
The rest of this quick-start guide will walk you through settings up your single source of copy truth in Ditto. You should have your text connected from design to development in 15 minutes or less! Start by syncing your Figma files →
Don't want to get started with your own data just yet? Check out the sample project that's preloaded into your workspace. You'll be able to test out all the parts described above -- componentizing, connecting to design, and connecting to development.
