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.
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.
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??)
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.
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”).
) 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?
