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.
https://www.loom.com/share/ca0cdc3ea0344035a776bd84fefd9a28?sid=67b6f19c-df5a-4b10-b1d2-1ea4094cf9f8
👉Quick note: Variants are only available for linkable groups of text in Ditto, not draft groups of text.
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.
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.
