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, edit, and preview variants in Ditto.

When to use variants

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

• Translations: Store and preview different language versions 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 create and manage variants for any text item from the Variants tab in Ditto’s details panel.

In the Ditto web app, if text items in a block have variants, those variants are displayed as tabs, making it easy to quickly flip through and view each one. Each tab will also show which text items don’t have a given variant, so the values can be added on the spot.

Create a variant

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.

1. Select a text item and open the Variants tab
2. Click Add Variant
3. Create a new variant or search for an existing one