I was updating components in the large design file, that has tons of interactive components with overrides, and now, when I hover on my component instance, the picture swaps to the one I have in the original component. It shouldn’t be happening, looks like a bug. It was fine before, but when I updated some visual styles, it start to behave like this.
How can I fix it?
The worse part that I have to present it tomorrow.
Sounds like you need to properly assemble your interactive component.
Check out a working example here:
thanks for your response.
Solution from the link you shared:
“I created a base component that only uses a gradient, and then I created a component set based on this base component in which to insert an image. You can test the functionality of the component in your source file.”
I did not understand this paragraph. What is a component set? Means instances of the original component?
I had an image inserted in my component. And then I replaced it with other images in the instances. Now it started to pull the “original” image on hover. It actually worked until today, only with some updates I made today it started doing that.
So, it means that I need to have a frame with gradient (?) in the original component, and then insert pictures in the instances?
I should have been clearer.
Should be: I created a base card component (.base-Image Card) that contains a gradient fill, text, and a button in order to be able to quickly change the layout of the card in one place. Next, I created a component set (Image Cards), which variants are based on the “.base-Image Card” component. One variant contains overriding the opacity of the gradient, which should change on hover. At the moment, none of the components has an image. I then created an instance of the “Image Cards” component with the “Default” variant and added an image to it as a fill. Thus, the image is under the gradient and is preserved when changing states.
Component set is a container that contains Variants.
Unfortunately, I don’t know what changes/updates you made to the component. If you could share a link to the example file, then anyone could take a look at it and suggest a solution (unless it’s a Figma bug).
If everything worked before and you are sure that this is a bug, send a bug report to support.
As for my example, the image is only added at the “Image Cards” component instance level. And, unfortunately, I don’t know what actions need to be done with your component, because nothing is known about its structure.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.