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.
👉Quick note: Variants are only available for linkable groups of text in Ditto, not draft groups of text. For more information on the difference between linkable and draft groups (as well as how to use each), head to our guide to drafting text in Ditto.
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.
In the Figma plugin, you can create or add an existing variant by selecting the frame in the Figma file, then going to the Selected tab:
Once you've added the variant to the frame, you can edit the text for that variant by selecting the individual text boxes in the Figma file, and heading to the Selected tab and then Variants sub-tab.
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.
If you'd like to permanently update a Figma frame to a variant, you can apply it. Here's a full guide on how to do that!
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.
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.
Tip: you can add, preview, and apply Variants to multiple frames at once in the Figma plugin!
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:
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.
