Apply a style across variants

In a design editor, the term "variants" typically refers to different versions or iterations of a design element or component. Variants allow designers to create multiple versions of a particular design element while keeping them organized within the same design file.

Applying a Style Across Variants

To apply a style across variants, these are steps that you may follow;

  1. Select all the variants you want to use in the style. The variants are present in the content panel. 
    I1-Jan-29-2024-07-03-04-7674-AM
    (You can use multiple select variants by clicking on the square box beside selected)
  2. Now, click on Bulk Edit at the top-right corner of the content panel. (This is how the bulk edit interface looks)
    I2-Jan-29-2024-07-03-06-8991-AM
    I3-Jan-29-2024-07-03-06-0751-AM
  3. Select the elements you want to apply styles across variants. (Let's change the CTA-Button across variants)
  4. Click the View Styles icon in the styling panel (bottom left).
    I4-Jan-29-2024-07-03-06-5677-AM
  5. All the style options available for the CTA button are now shown in the styling panel.I5-Jan-29-2024-07-03-07-1165-AM
  6. Change the Purple Button-CTA to a Radial Gradient -CTA across variants. To do that, click on the CTA from the styles panel.
    I6-Jan-29-2024-07-03-06-9831-AM
  7. Now, all the CTA-button across variants would have the Blue-CTA.
  8. Now, you can save the changes across variants by clicking the Save option at the top right corner
    I7-2
    Note: You can cancel all the changes to do that. Click on Discard.
  9. Confirm your action in the small window that pops up, and continue with saving the changes.
    Bulk edit save window to save all style changes-jpg


Note: 

  1. You can also style across sizes of all the variants at once! Click on Style All at the top of the creative screen.
  2. Selecting the  "Change position across size" changes the position of the element (moves the element across the canvas) for all sizes of the chosen variant. 

I8-2