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 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.
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
Apply variants
Once you've created variants, you can review text variations in existing designs without needing to create new frames for each one. You can apply a variant to a frame in your design file to change the text in that frame to the text from a Ditto variant.
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
Open the Apply variant menu again to apply a different variant to your frame or click Reset to revert back to the 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.
Variant folders
On Ditto’s Startup and Enterprise plans, you can group Variants into folders by language, product area, user segment, or any other grouping that makes sense for your team.
Create a variant folder:
In the Variant Library, click +New Folder
Name the folder and click Create
Move a variant into a folder:
Select the Variant
Click Move to folder to select the target folder
💡 Hold ctrl/cmd and select multiple Variants to move them into a folder at the same time