Variants for Components

Components allow teams to sync text across projects. Adding variants for components allows edits to be synced across any variants where the component is attached.

This help guide goes over how to create variants for components and how they interact with projects they're attached in.

  • If you're unfamiliar with how Variants in Ditto work, check out this guide.
  • If you're unfamiliar with how Components in Ditto work, check out this guide.

There are 2 ways to add variants to components:

  1. In the component library
  2. Directly in individual projects

👉Quick note: When you add a variant to a component, you'll only be able to view it if the frame that instance is being used on has that variant added. In order to get a variant for a component to appear, you'll need to add that variant to the frame in the specific project you're working from.


Adding Variants to Components via the Component Library

You can add variant text directly to components by heading to the "Variants" tab of a component selected in your Component Library.

By clicking "Add Variant", you can add text for a specific variant of the selected component. In the "Variants" tab, you'll also see all of the variants of the selected component. The variants for the component will sync with anywhere else the component is used.

When attaching a component to a text item on a frame with variants, any existing variants for the component will also apply to the relevant variants for the frame.

Components with variants will display an icon in the top right indicating the number of variants it has.

To edit or delete a variant for a component, hover over the variant in the "Variants" tab and click "Edit". Remember that editing or deleting any variants for a component will also sync with everywhere both the variant and component are attached.

Adding Variants to Components via Projects

You can also add variants to components directly in a project. For a component attached in a frame with variants, providing variant text directly in the edit panel will add that variant to the component. This new variant for the component will sync with anywhere else both the component and variant are used. This also applies for any new variants added to the frame.

Note that you can currently only attach components to text that does not yet have any variant text provided.

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