Skip to main content
Question

Why instance swap messes with Variant property?

  • September 29, 2022
  • 4 replies
  • 409 views
Tarek_Elsayed

Ok so I’m new to Figma and I was playing with component properties.

I have a component (Nav) with Variant that has a property (state = active / inactive)
In the active state, both the icon and text get turned into pink.

When I create an instance and change the state between active / inactive it works fine.
But when I change the icon from to another instance swap such as market,
and set the state to (active) it turns into pink normally.
But when I set it back to inactive, only the text goes back to white and the icon stays pink.

What is causing this issue?

2022-09-29_162413

4 replies

Mojo
  • Mojo
  • 67 replies
  • September 29, 2022

@Tarek_Elsayed this is due to how each of those icons are built, for example, maybe your puzzle icon has a shape, a fill and other things inside, and maybe your cart icon is only a solid shape.

Ensure that icons you swap have the same folder structure, try creating a union and changing the color there for icon.

Here is a quick example I just did: Figma Link 🔗

Tarek_Elsayed

Hey @Mojo thank you for the Figma file you provided. It produces the same issue I’m facing.
However the structure in my icons are the same a component that only has one vector
for both the puzzle icon and the cart.

here is an image of the layers :
2022-09-29_201856

Mojo
  • Mojo
  • 67 replies
  • September 29, 2022

@Tarek_Elsayed did you play the proto? for me the union workaround is working, I see the feather going from black to pink when I click, with no issues: Prototype Link 🔗

Tarek_Elsayed

I did play the proto and I saw that it’s working.
How to Union a single shape? I don’t have multiple shapes to union.

Reply


Terms & ConditionsCookie settingsAccessibility statement

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings