Typically, teams track text variations in spreadsheets or by duplicating Figma mockups. This leads to version control issues and scattered feedback. Variants let you create and preview different variations of your text — all in one place — without the need to duplicate designs or manage multiple Figma screens. The following will walk through how to create, apply, and manage variants in Ditto.

When to use variants

Variants help teams manage different versions of copy efficiently. Common use cases include:

Localization: Store and preview different language translations of your text without creating separate mockups
User Personalization: Show different messages based on user type or actions (eg. "Welcome!" vs. "Welcome back!")
A/B Testing & Experimentation: Compare different copy ideas in context without duplicating screens.

Variant basics

You can add and manage variants from your Variant Library, or directly from any text item’s Variants tab in Ditto’s details panel.

Create a variant

Click + New variant in the top right of the Variant Library
Enter the variant name and choose the appropriate locale (eg. German). The locale is important because this provides the context to which the AI Magic Translate generates the localized copy for you.
Click Create Variant

Add a variant to a text item

You can add variants to any text item in Ditto, either from the web app or the Figma plugin. The original text will be labeled as Base.

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

Manage variants in your project in bulk

In your Ditto project, choose a variant in the filter bar to display, edit, and bulk add variants. Selecting a variant will change to show that variant’s data for the entire project. This selection will persist throughout design and text view. If a text item doesn’t have the active variant, it will be marked as such and show the base text instead.

Add a variant to your entire project

If not all text items in your project have the active variant, a banner at the top of your project will provide you the option to all that variant to every text item in the view. The value of the variant will be empty by default.

Alternatively, add the variant text inline directly and click save. Ditto will automatically add the variant for you for that text item. This is useful if you’re localizing or creating variants manually.

Apply variants

Once you've created variants, you can review text variations in existing designs without needing to create new frames for each one. Simply apply a variant to your Figma frames to load that variant’s copy into the designs.

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

💡 Want to apply another variant? Open the menu again and select another variant or click Remove variant from frame to revert back to base text.

Manage your variants

Ditto’s Variant Library helps you organize and track variants across projects.

Variant library

In the web app, you can access your Variant Library from the left side bar. This will bring you to the main Variant page with an overview of all your top level Variant folders.

Select a Variant to see all the projects and components it’s used in under the Instances tab. Clicking on a project will take you to that project in Ditto, while clicking on a component will take you to the component library.