Building a content design system

In addition to collaborating on copy for individual projects, you can use Ditto to build a content design system. You'll be able to define reusable text components to scale your content, standardize content patterns, and empower everyone on your team (from designers to writers to PMs!) to work faster.

Create Ditto components to standardize repeated instances of text

Ditto components are pieces of text that get synced across projects. Edits to the text or metadata of a component automatically get applied to all of its instances, even across different projects and different Figma files!

You can create a Ditto component out of any linkable text in your project, or draft a completely new one in your component library in the web app. These will be available for any teammate in your workspace to use, out of the web app or our Figma plugin:

Search and reuse Ditto text components directly from the Figma plugin

You can also "lint" text that's being written to ensure it's matching your team's standards using our Component Suggestions.

Ditto components are super powerful but can take time to get comfortable with, so don't be afraid to just start with one component and build up as you go! Check out our full guide on components to see all the possibilities.

Create and add Variants to map out copy variations

Ditto Variants allow you to write and preview variations for text in your project. We often see team use this feature to manage text that might not necessarily get mocked up in the designs, whether that's translations, audience-specific copy, explorations, or non-happy path error copy.

In addition to defining text variations, you can preview them directly in your Figma mock-ups! This will allow you see exactly what a text variation looks like in the designs, without requiring you to duplicate frames or clutter up the Figma file.

Read our full guide on variants here →

✨ Curious about how other teams are building their content design systems in Ditto? Head over to our blog →

Up Next

Learn more about how to connect Ditto to your Figma mock-ups ->

Didn't find what you were looking for?
Contact Support