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?
@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
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 :
@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
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.