Figma Support Forum

Vector fill color (nested component) doesn't change back to the one specified in the default variant after interaction

Hi guys,

First time poster here. Sorry if this has already been discussed / answered. I think it might be related to this bug.

I’ve got a button component with 5 variants and 3 states each. The button consists of a text field and an icon. The icon is a component with variants as well (so I can easily swap icons from an expandable set).

In the last two variants of the button, both the text color and the icon color need to change between the different states. This seems to work in one direction but not in the other - once updated the icon color doesn’t return to normal. The text box, however, works perfectly fine. Also: I’ve noticed that if I don’t update the icon’s variant it would respond correctly to the interactions.

I suspect I haven’t wired the interactions correctly. Here’s the file.


I noticed the same behaviour with my prototypes.
Everything works until you swap the icon and additionally change the icon color of the hover state.

Happens to me too, not sure if this is a bug or just a limitation of the feature. But it’s very frustrating – keeping the interactive components from being really usable for me.

Hi @Dean_Panayotov! I edited your file and icons now inherit color overrides. I made the icons separate components and added a “.base-icon” component that contains a Union, inside which an instance of the icons. Color override is configured in Union.

Design File:

Hi @tank666 , I had the same issue trying to make a hover effect on a dropdown menu (frame with icon + text + caret-down). Frame stroke, text and caret were changing color correctly, while the icon (which was swapped with a different instance) wouldn’t go back to the original color. Your solution worked for me (:tada:) but would your say this setup is the best practice or is it just a workaround for the time being? Do I have to create these Unions everywhere?

Hi @Barbara_Marcantonio! Maybe the Figma team will solve this issue, and we will all remember with a smile about the different hacks that we used in our work. But at the moment, if you need to show an override of the icon color in your prototype, using Union is what really works.

1 Like

Hi! @tank666
Thanks for your reply here
I don’t have changed anything right now… because it seems to work again; even for the file given at the top of this thread.

When using a “when hovering” state on this component and it’s “hover-state” variant I run into a bug where alternate icons do not revert back to the default color state.

The first image shows my variants for the component. The following images show what it looks like before interacting with it. I show that the hover state does work, but the last image shows the after removing your cursor the icons do not revert back to the default state color like the text does, they stay white.

Screen Shot 2021-06-24 at 5.08.58 PM

Screen Shot 2021-06-24 at 5.09.12 PM

Screen Shot 2021-06-24 at 5.09.27 PM