I have a component with three variants, each made up of a single frame, and prototyped the three together. In the instance, each has an image fill added as an override.
Fills two and three are lost when previewing/interacting with this.
I also tried an additional frame in each variant, and again added the image fills to the instance with the same outcome.
Frames are named the same for Smart Animate. Instant produces the same results.
As simple as this is, am I missing something?
Irax, I believe that for the override to work, you need to have a fill image in your component to start with, otherwise Figma will think you want to replace an image fill with a color fill when the interaction happens. Try adding the same placeholder image to the fill on every variant of your component.
I actually did try that and it’s still the same.
Also tried a nested image component, and placing an image in each variant; both didn’t work. I’ve also tried different combinations of naming conventions. I don’t get why this is impossible.
The source images are actually different because using the same in all three makes any override become shared across all three as well.
This seems to be a matter of how the contents of a variant needs to be present and hidden in all other variants, so the overrides don’t get erased when the variant changes. I recently had to do this with a more content-heavy nested component and it worked (but I don’t like having all the redundant elements just sitting there hidden).
The top one “Image Child” utilizes this which worked here, but the original one “Image Fill” has no children:
My real component has content in each container/variant, but it’s moot because if the fill of each variant isn’t being preserved, there is nothing to duplicate and hide.
So you are not setting the fill of a frame as the image, you are placing the image itself inside the component?
I’ve done both which I have above.
This is a different scenario than say a button, in which the text label override is consistent across variants. It really requires a lot more complexity by needing to nest images and duplicated images despite there being a parent frame there that can have an image fill.
And regarding the frame fills, as we both addressed above, no combination of color, unique image, or identical image as the frame placeholder will allow the fill overrides to be preserved.
It’s interesting that this isn’t a thing because it limits creating generic grayscale components with dynamic use case content. An example I am working on is a tabbed media gallery, where if I toggle between the photo and video tabs, the fills of the placeholders are not preserved, which is useful when demonstrating hi-fidelity designs and workflows that ideally would have content relating to its use case.
I have come across this limitation repeatedly and have always assumed it’s me doing it the wrong way, but as you say whether as an image or a fill for a shape the rollover state of a component always shows the one in the master component rather than the one it’s been changed to in the instance. This is quite frustrating - do you know if there’s a feature request open for it, I’ve not been able to find one. As you say, it doesn’t make sense why the image should be treated differently to the text in the component which persists across states.
the rollover state of a component always shows the one in the master component rather than the one it’s been changed to in the instance.
Exactly this! It’s been driving me insane, especially as I’m new to Figma and trying to learn.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
