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 from your base text
You can create new variants or add existing variants to any piece of text in Ditto. The original text will be labeled as Base to differentiate from your variant text.
Create a variant:
Open the Variants tab and click Add Variant
Create a new variant or search for an existing one
Enter the variant text. If left blank, it defaults to the Base text
Set a variant Status
Click Save
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 a top-level text frame
Note: Make sure you're directly selecting a single frame, not the contents of the frame. If you select contents of a single frame, you will see a button in the top right to Select parent frame – clicking this will update your selection.
Click Apply variant to see a list of your available variants
Select the variant you would like to apply and see the text update automatically in your mockup
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.
Apply the variant to your frame, and see it switch to variant text
Make any changes necessary to the variant copy, so it works in design context
Then, select Reset to revert the frame back to the base text