Ditto's localization workflow is built around variants and Magic Translate — so you can generate, manage, and preview translations entirely within Ditto, without exporting to a separate tool or maintaining parallel spreadsheets.
Step 1: Create a language variant
Each language lives as a variant on your text items. The original text is labeled Base while each language is a separate variant. All your variants are managed from the workspace's Variant Library.
Create a language variant:
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
Step 2: Translate with Magic Translate
Magic Translate uses AI to generate translations for your text items directly in Ditto based on the variant’s locale code — no exporting or copy-pasting required. Create locale-specific guidelines so Ditto’s AI Magic Translate can ingest those rules as it generates the localized content.
Create a locale-specific style guide:
In a style guide, open the … menu and click Variant configuration
Select the variant you want to attach to this style guide and click Save. The rules in this guide will now only be applied to matching variant copy
💡 Don’t have a style guide? Run Ditto Scan to infer a style guide using production copy from your codebase!
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
Auto-translate all project text
Configure your project to automatically attach variants to all project text items and auto-translate localized variants. Once you save this setting, all existing and new text in your project will be translated automatically.
Auto-translate project text:
Open the ... menu and select variant configuration
Add the variant(s) you want all your project text to have by default. This includes both locale-variants and non-locale variants
[Optional] Select the locale-variants you want Ditto to auto-translate, then click Save
💡 If your base copy is written in a language other than English (US), set the base locale in your project settings so translations use the right source locale
Step 3: Check translation quality
Before shipping localized copy, use AI Translation Scoring to catch issues early. Ditto evaluates each translated text item against the source text and returns a quality score, so you can prioritize review effort instead of manually checking every translation.
Score a translation:
Select a text item that has a variant with translated copy
Click the translation scoring icon next to the variant
Expand More Details to see the full scoring assessment
💡 A low score doesn't automatically mean the translation is wrong — use it as a prompt to review, not a final verdict
Step 4: Preview translations in Figma
Apply a variant to frames directly in Figma to see how translated text fits your mockups — no new design files needed.
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
Step 5: Hand off localized strings to developers
Once your product copy are localized, developers can pull them the same way they pull your base copy using Ditto’s API or CLI. Specify the variant to fetch in the command to pull down the relevant localized copy.
Mark these text items as integrated to denote that these items are in use in development integrations. This indicates to other workspace members that this Dev ID value is used in code, and that changing the Dev ID could represent a breaking change, and edits to the text content may result in updating copy that appears in production.
Mark text items as dev integrated:
Select text item(s) you wish to mark as dev integrated
Click the
<>button. A red icon indicates the text item is dev integrated
