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.
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.
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.
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.
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.