Figma Support Forum

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

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

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.

Checking it now. Thank you!

Tested and recreated. It works. Thank you!

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’],
}
},
}