Skip to main content

Hi everyone,


I am fairly new at using Figma and I am running into an interaction issue on a thumbnail image tile component with an active and hover state.


I replace the image on each instance by pasting a different image under the fill option. It shows the correct image when I manually switch between active and hover states on a frame but as soon as I prototype this it will always show the hover state image of the master component. It doesn`t change anything if I add the “while hovering” interaction on the instance instead of the master component.


Any idea how to solve this would be much appreciated.



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.


Figma – 4 Jun 24

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.


overlay


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.


Figma – 6 Jun 24

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!


Hi Gayani,


thanks for your reply. That’s OK, I could find a workaround with a separate dark overlay to achieve the interaction behavior I was aiming for. I submitted the bug report.


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:



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!


Reply