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

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.

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 (🎉) 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.

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.

Hi @Casey3, I think i have the same issue as you.

I can see what @tank666 did with the Union selection and that definitely did help part of my bug, but even now with Unions created on all icons, i am still getting a bug of the icon colour not changing back to it’s default colour once the mouse has rolled out (as the text does).

See my video below which illustrates the issue.

And here is a link to the Figma file that generated that video if you or someone can help to work out where I may be going wrong… (or is it just a Figma bug??)

https://www.figma.com/file/dMtv82WspO1q6JZQ2DZKD6/Icon-Interactive-Colour-Bug?node-id=0%3A1

Thanks in advance for any help!

Your icon consists of several layers of vector paths. Try to flatten (Cmd/Ctrl + E) these layers into one.

Also check out my file where I demonstrated the difference between icons with multiple vector paths and flattened into one vector path.

Hi @tank666, thanks for your prompt feedback.

I tried what you suggested but it is still playing up. I also looked at your file set up and mine seems to be the same in terms of Flattened and Unioned icons. Can you see anything else that might be amiss? I did find a few issues with the last file, so have attached a new one.

Pay attention to the order of the layers. For the color override to work correctly, you need to adhere to the following structure: Union > Icon Instance > Vector.

• Union — to color override;
• Icon Instance — to swap icons.

I edited your file and now it works as expected. You may notice that I used a structure like this: .base-icon > Union > Icon Instance > Vector.
This is done to keep the icon at its original size. If you don’t use .base-icon, the icon will be resized due to Union.

Design file:

@tank666 Ah I see now what you mean. Yes the layer structure is the key! Thank you - it’s working perfectly now.

@tank666 Can you explain the “Union” layer? How is the colour override applied to this? It’s hard to tell since the file is view only.

Thanks!

Hi @Jeffrey_Baldwin! Union is a boolean operation. You can duplicate this file in your drafts to explore from the inside.

Ah, what was tripping me up was the fact you applied a union to a single object, which doesn’t seem to be possible… So I just duplicated the icon to union two of them before deleting one. Thanks for your help!

Please can you share this process, because I’m getting stuck creating the union as it’s on a single element. The last comment by Jeffrey_Baldwin worked, but is there another way to do it?

Alternatively, you can use plugins (if they exist). But I think that duplication, boolean operation, removal of an extra layer is a fairly fast operation.

@Osagie_Eigbe in the end I solved the issue for myself without using the union implementation. Instead I ensured that all of my icons were flattened into a single layer, and every icon shape layer had the same name (in this case “icon path”).

Okay. Thanks for this. I already started the Union implementation, but I will also try this to see if it works for me.

Hey @tank666, thanks for sharing the file. It really helped me realize how color overrides can consistently work. However, there seems to be an issue with stroke properly swapping.

I tried applying it to our design system but I’ve stumbled upon an issue with the stroke not scaling back properly when you change the icon and swap back from Button Large to Medium, and then Small.

What’s peculiar is that stroke swaps properly from Small to Large, and from Large to Medium, but doesn’t go back to 1pt when swapping to Small.

Here’s how it breaks:

Any idea how to handle this?

I fixed this by overriding the stroke weight in the button variants. That is, I selected the icon vector in the Button Components Set, changed the stroke weight from 1px to 2px and back. I did this for all button variants, but maybe it only needed to be done for the Small Button.

Feel free to duplicate my file again to make sure it works as expected:

Thanks @tank666 but I’m unable to edit it even if I save it to my drafts (or launch a prototype to test for that matter).

Is it locked in some way? The old file was editable.

Could you show a screenshot of the entire screen?

I think I duplicated it with one account and tried accessing it with another 😅

Sorry and thanks!

Hello Team,
I followed all the received solutions in this thread but so far no luck… Pls find below screen capture.

I have a .base button
I created variants with the help of .base button, those are enabled, hover, active and disabled.
Right n Left icon color working fine with Enabled but
Once I changed the state to disabled or active, icon color reverts to it’s original

Looking for support to maintain the same color irrespective of state change.

Thanks …