Variants in Ditto allow teams to write and preview text variations for frames in their projects.

This help guide will teach you how to create, edit, and preview variants. It'll also cover a few of the key use cases variants were designed to serve: internationalization, user segments, and text explorations.

Creating Variants

To create a variant in the web-app, hover over a frame in your project and click the "Add Variant" button.

Once you create a variant, the original text of the frame will appear as the "Base". On a variant, you can edit any of the text items to differ from the base; any text unedited in the variant will keep the text from the Base.

Previewing in the Design

You can preview variants directly in the design using our Figma plugin. It'll temporarily display the variant in the mockup, so that you can 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.

To preview variants, select a top-level frame in Figma and navigate to the "Selected" tab of the plugin. If the frame you've selected has variants, a Variants dropdown will appear with the variants on that frame. You can select any variant to preview it. It'll revert back to the Base text once you click away.

Viewing Variants in a Project

You can also view all the variations of a single text item by opening the new Variants tab in either the web-app or plugin. This tab will appear if the selected text has variants. Text in a variant will keep all of the organization set in the Base, including blocks and hidden text.

To view a single variant in all frames it exists for in a single project, click the Variants icon in the top bar. It'll open a modal where you can see all variants currently in use in the project. When you select a variant, it'll display in frames where it exists and display the Base for all other frames.

Use cases

We wanted Variants in Ditto to be flexible enough for all of the different ways we've heard teams want to write and maintain variant text. Just a few of the use cases we're excited for it to help with include:

  • User segments — oftentimes, text in-product can differ for different user segments. Whether it's the difference between a "Welcome!" and a "Welcome back!" or state changes based on actions taken in the UI, we often heard of teams trying to manage the writing and delivery of this copy in spreadsheets or directly in the codebase.
  • Translations (i18n/l10n) — for teams looking for a lightweight solution to managing translations that integrates with both design and development, they can now use Variants to create different language variants of designs. With Variants, you can preview translations directly in the design without having to create mockups for each language!
  • Explorations — when we hopped on calls with potential users, we often saw writers doing their best to co-opt design tools for writing, repeatedly copying and pasting mockups just to test out different copy explorations. Using Variants for copy explorations, teams can test out and compare different variants directly in the design without recreating the mockup itself.

Other Tips

Any variants created will also get included in JSON exports or our developer integrations — meaning you can directly go ahead and use them for developer handoff!

To delete a variant on a frame, click the 3 dots next to its tab.

Didn't find what you were looking for?
Contact Support