Building a system around your product copy means that Ditto needs to scale across all kinds of workflows — one of the biggest being translation and localization. Ditto variants lets you write and manage multiple variations of your base text all in one place without the need to duplicate designs or track translations in a separate spreadsheet.

Localize using Ditto variants

Variants are commonly used for localization — this might be a Dutch or Japanese translation of your base text — but variants can be used for anything from role-based text to A/B tests to copy explorations.

The variants you create live inside your workspace’s Variant library, where you can easily search, manage, and edit all of your variant text across your projects.

Create a new variant with locale code

You can add and manage variants from your Variant Library, or directly from any text item’s Variants tab in Ditto’s details panel. Add a locale to a variant so Ditto’s AI Magic Translate has knows the correct context to generate the localized copy for you.

Click + New variant in the top right of the Variant Library
Enter the variant name and choose the appropriate locale (eg. German), then click Create Variant

Add a variant to a style guide

If you have localization content guidelines, you can attach a variant to a style guide so Ditto’s AI Magic Translate can ingest those rules as it generates the localized content.

Attach a variant to a style guide:

In the relevant style guide, open the … menu and click Variant configuration
Select the variant you want to attach to this style guide and click Save

Generate localized copy with AI Magic Translate

Magic translate will ingest your base text to generate a localized copy according to the target locale assigned to the variant. If you have a matching locale-specific style guide applied to this project, its rules will be used during the generation to produce copy to enforce those content guidelines.

Generate localized copy with Magic translate:

Select a text item, go to its variant tab, and click Add variant
Choose the variant and make sure it has a locale assigned to it, then click Save
The Translate button will appear under your text — click it to generate the localized copy

Reuse variants with Ditto components

Ditto components are reusable text items that keeps your repeated text in sync across Ditto projects. Any edits to a component's text or variant update instantly across all instances.

Variants and components work together to help you save time with translations. When you add a variant to a component, it applies to all of the component’s instances. This means rather than translating screen-by-screen or re-translating existing phrases, you can use variants to translate components once, and then save those translations in Ditto for reuse in the future.

💡 Editing a component’s variant text will also apply that edit to all component instances

Use variants in design mockups

When you’re ready to see how your translated text look in your design, you can apply that language variant directly to a frame in your Figma file without needing to create new mockups. This gives localization teams easy access to see how other languages fit into designs, without creating additional work for designers.

Apply a variant:

Select the frame(s) in Figma
Click the Apply variant icon to see a list of your available variants
Select the variant you would like to apply

Use case #1: Side-by-side reviews with all translations

Want to review multiple languages in every design mockup, side-by-side? Remove the need for duplicated design work, and duplicate the base designs to apply language variants with one click.

Create designs with base text and link to Ditto
Duplicate the base design frame
Apply a language variant to each duplicated frame
Review each translation side-by-side, and make edits while they stay linked up and respond to updates across each frame

Use case #2: One-off reviews

Try out the variant text in mockups. This way, you can see how variants look in your design without having to mock up each individual screen in each variant.