Image Swap in component shows wrong image in hover state when prototyping

Hey @SystemD, thank you for reaching out and sharing a screen recording with us!

Can you provide a direct link to the file here, and invite support-share@figma.com with “can edit” permission so I can look at your prototype connections. Note that users with @figma.com emails on your team do not count towards your billing.

If you’re unsure on how to invite someone to a file, please follow these steps:

1. Click the “Share” button at the top-right corner of the Editor
2. In the next window, type support-share@figma.com into the text box
3. Select the “can edit” permission option
4. Click the “Send invite” button

Thanks in advance!

Hi Gayani,
thanks for your reply. Here is the link to the file.

Hey @SystemD, thanks for sharing the file link with me! I am double checking this with the team internally. However it doesn’t shows the correct image when I manually switch between active and hover state on a frame.

I’ll get back to you soon, appreciate your patience!

Hi Gayani,
I did some further testing and I think I found out at least

what is causing the issue.
There is a black overlay on top of the image fill and that seems to cause some problems when prototyped. I think this is a bug.

I made some tests with different variations of default-hover states, the interaction works if the hover state image has a outline, is zoomed within a mask, or if the black overlay is done as a separate square object on top of the image. It just does not work at all as soon as the image has the overlay in the fill property of the image. It does not make any change if the image in default state also has an overlay fill at 1% opacity or an overlay with the same opacity but different color.

For the instance with the image fill images need to be overwritten for each variant separately (unlike the other versions where an image overwrite in default state reflect on variants of the component) and when the hover state image is overwritten manually in the instance it shows the image of the main component regardless.

Hey @SystemD, thank you for your detailed explanation and also for including the file! I was not able to get a response internally, and I am quite unsure here. I’d recommend to file a bug ticket with our support team, so they can investigate further on this. Please contact our team via this form:
https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001744374.

Apologies that I can not help out at this moment. Our support team usually takes up to 24 hours to reply back to emails - tends to be quicker than that in normal circumstances. However, please be aware that we are facing increased contact volume so there might be a delay.

Please let me know if there is anything else I can assist with!

I had the same issue. It is surely a bug that seems to still need a resolution. I leverage the separate overlay that @SystemD mentioned for the time being. Thanks for the discovery!

I am facing a similar issue.

Hi @Benu_Shrivastava, thank you for letting us know about the issue—and I understand how frustrating it can be when things don’t work as expected.

To help us pinpoint the problem, could you try the following:

• Clear your cache and see if that resolves the issue.
  -For the desktop app: Clear Desktop Cache
  • For browsers, here are guides for each:
    • Google Chrome
    • Safari
    • Mozilla Firefox
    • Microsoft Edge
• Check if this happens only in specific files or across multiple files.

If the problem persists, would you be able to share a screen recording?

Since a few users are also experiencing this, I can connect you with our support team if clearing your cache doesn’t fix the issue. Let me know how it goes!

Same issue on me, I’ve clear cache and the problem persists. All the layers name are the same and still facing the same issue.

Experience the same issue. Quite annoying.