How do I override placeholder images in interactive components/variants?

Interactive Components Questions
1

Hi, I have a component that is basically an image card (a frame with the background fill set to Image, with a default image) with some text on it, now I’ve created a variant (Hover State) that is just meant to have a darker background so the text is more readable.

I have prototyped it to Change To the hover state when you hover over the main component.

For the component instance, I have changed both the default state and the hover state to a new image.

When testing, this doesn’t work as it still shows the placeholder image for the hover state.

How do I fix this?

I have also tried using a rectangle for the image fill instead of a frame, but it still doesn’t work.

I have also tried not adding any image to the main components, still doesn’t work (For this I tried leaving the default Figma black/white checkered boxes as well as just leaving it as a solid fill.)

I’d appreciate any help. Thank you.

Here’s a link to the file: Figma

2

Hi @Osagie_Eigbe, 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.

1 Like
3

Checking it now. Thank you!

4

Tested and recreated. It works. Thank you!

5

The variants section of your tailwind.config.js file is where you control which variants should be enabled for each core plugin:

// tailwind.config.js
module.exports = {
variants: {
extend: {
backgroundColor: [‘active’],
// …
borderColor: [‘focus-visible’, ‘first’],
// …
textColor: [‘visited’],
}
},
}

6

I have the same question, and I see there’s no answer yet. I’m hoping there is some way to apply the image override to all variants.

7

That’s an expected behavior, you are changing the image on the first component and when it gets replaced with the hover one, there’s no image. Try creating a master component. One component that then you duplicate, wrap it as a new component and with that you have 1 of the variants. Do the same for the hover, and with both instances create the variant.
Now when you replace the image is getting replaced on the same component.

8

I thought that would work…

You can see hereI have the default component nested inside the hover component. But when I combine as variants, the default style isn’t honored—it switches to just “media block”.

https://share.getcloudapp.com/kpu4vjby
https://share.getcloudapp.com/d5uNjKP2

What am I missing?

9

Hi @Danee_Avery, check out the file i edited for the topicstarter:

2 Likes
10

So the image is added to the instance, not the variants. Makes perfect sense—thanks!!

11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.