Skip to main content

Hi everyone,


Is it possible to change to a variant using an overlay?

I want to reproduce what is happening below, using a variant instead of a page.

The problem is that it seems impossible to link anything from the overlay to the variants.


This is the result I want:

When I click on a color it opens an overlay

image


Then I pick a color and it changes the jersey to another variant.

image


This should be the result with a variant. (It is a new page on this example)

image


The problem I encounter is when I open the overlay with Default Variant, in the overlay, I want to select a color that would trigger the change of Variant. But Figma doesn’t allow me to make that link.


Is there any way to make it work?

I would suggest creating a variable to hold the variant ‘state’ and map your component to use this variable to control what variant is displayed. That way, when you click your options in the overlay you only need to update the variable to the selected variant name.


You could also add some IF statements to map the colour selection matrix to specific variants i.e. if colour1=red && colour2=blue then variant name=“RedBlue”.


Hope that helps.

Reply


Terms & ConditionsCookie settings