New Member

Solved

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

Forum|Forum|2 years ago
May 31, 2024
17 replies
3214 views

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.

095dbb396af7c495fbd2c57c70f1adfabc59b42b.zip

This topic has been closed for replies.

Best answer by SystemD

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.

Show previous replies

Albin_Brengesjo

New Participant

Experience the same issue. Quite annoying.

Albin

Dominic

Active Member

Same issue, only thing that worked for me was to create an additional image fill layer inside the component, and remove the image fill from the top component frame. Also make sure layers/naming match.

Cal.Johnson

New Member

Issue still hasn’t been resolved.

Gayani_S

Community Support

Hey everyone, thank you for flagging this — it’s clear from this thread that several of you are running into the same problem.

Since this seems to be affecting multiple users, the best next step is to get your specific files in front of our support team so they can take a closer look.

You can reach out directly using this form: https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233. When you submit the form, please include a link to your file and invite support-share@figma.com as an editor (This won’t impact your billing).

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

ChiaraMS

New Member

Hello everyone,
The problem is in the image property and not only if we add transparent overlays on the image itself.
SO, I realised that the images in components don’t need to be changed or alterated between components variations. This is very frustrating, I know, but you can add layers to create overlays and it will be just fine. The image though must be the “untouched” (no transparency or other physical changes) or in the prototype, it will swap to the original image used for the component.
I hope it makes sense.

It is crazy. I spent so many hours to debug this issue as I wanted to show something to the client.
Best of luck everyone!

Websolutions.ca

New Member

This is also happening to me. And is so random. I created a component with a hover state. I then made multiple children and updated all of the pictures and it was working! The hover was working and I was able to see the selected picture in regular and hover state.

I then had to update the main component to have a different aspect ratio and that’s when all went to hell… Now I’m stuck with the same picture for each child when hovering.

Isaac_Gabriel1

New Member

Hello everyone,
The problem is in the image property and not only if we add transparent overlays on the image itself.
SO, I realised that the images in components don’t need to be changed or alterated between components variations. This is very frustrating, I know, but you can add layers to create overlays and it will be just fine. The image though must be the “untouched” (no transparency or other physical changes) or in the prototype, it will swap to the original image used for the component.
I hope it makes sense.

It is crazy. I spent so many hours to debug this issue as I wanted to show something to the client.
Best of luck everyone!

THANK YOU! OMG

Sign up

Login with SSO

Login to the community

Login with SSO