By default, Ditto variants can be previewed temporarily in your Figma designs via our Figma plugin. If you’d like a variant to be permanently shown on a Figma frame, you can “apply” a variant to a frame.
This guide covers how to apply variants. Note: the following assumes you’re familiar with the basics of Ditto Variants!
👉Quick note: Applying variants to designs is a feature only available for Ditto projects linked to Figma, not draft projects. For more information on the difference between Figma-linked projects and draft projects (as well as how to use each), head to our guide to drafting text in Ditto and our guide to Figma-linked projects.
You can apply variants using our Figma plugin:
When a variant is applied, all the text on the Figma frame will get updated to be the variant text. The variant name will be added to the name of the Figma frame to indicate the applied variant.
Once a variant is applied, you can edit that variant text using Ditto's Figma plugin, or by directly editing text boxes in the Figma file. Ditto will make sure that the edits get applied to the correct Variant and not the Base.
When selecting text on a frame with an applied variant, the three sub-tabs (Edit, Activity, Variants) will look slightly different from when you’re selecting Base text. The Activity tab will show changes for that specific variant text, and the Variants tab will have an indicator of which variant is currently applied.
In the web app project, we’ll indicate if a frame has applied variants in a few ways:
(1) We’ll move the star to the tab of the variant that’s currently applied, and
(2) We’ll add a note to the image previews.
Note: Your existing Base variant will still get shown in the “Base” tab in the web-app. The applied variant does not become the Base.
To remove an applied variant, select the frame in your Figma file and click the “Un-apply” button in the top right of the “Applied Variant” section.
This will revert the text in the frame back to the Base variant.
