Hello community,
We are facing issues with component instance overrides while switching among the variants.
Example:
We have a button component with left and right icon.
Icons are hidden by default and has the relevant property to switch those on/off.
When swapping the icon, the icon-color is not preserved. We have a blue bg icon and icon color is defined as white within the button component. But when we swap the icon the color changes to icons’ default color to black
When changing the size or state of the button, the button name (button label) is not preserved. It goes back to it’s default state which is really frustrating.
Hey Amit, don’t worry, many people struggle with this and there is a solution!
I recommend you double check that all your icons have the same layer structure as well as similar layer names for any nested layers. For example your main component named “Arrow” might have 1 nested layer named “Vector.” In order for overrides to be preserved when swapping Arrow for another icon, that icon must also have 1 nested layer named “Vector.” Here’s a reply in a similar thread:
After ensuring your icons names and layers are cleaned up, try resetting the nested icon instances within your button’s main component and apply the color you want. Then test out if that color persists when swapping icons on instances of your button.
@AlicePackard Thank you for your response. Actually, the icon color issue is not resolved on my end even if I keep the layer name and hierarchy the same. Definitely feels like a BUG !
ah, well apologies the issue is still not resolved but you can rule out it being caused by component architecture! I would suggest submitting a bug report if you haven’t already. there is a question mark icon in the lower right of figma’s interface that you can use submit the bug report form
