Skip to main content
Question

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


Dean_Panayotov

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.

30 replies

Florian_Bielsky

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.


Jakub_Foglar

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.


tank666
  • 4854 replies
  • June 1, 2021

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.

Figma – 1 Jun 21

Barbara_Marcantonio

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?


tank666
  • 4854 replies
  • June 7, 2021

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.


Fred_Tinsel
  • Active Member
  • 109 replies
  • June 11, 2021

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.


Casey3
  • 2 replies
  • June 24, 2021

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


Ar.nerd
  • 4 replies
  • November 26, 2021

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!


tank666
  • 4854 replies
  • November 26, 2021

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.

Figma – 15 Jul 21

Ar.nerd
  • 4 replies
  • November 28, 2021

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.

Figma – 26 Nov 21

tank666
  • 4854 replies
  • November 28, 2021

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:

Figma – 28 Nov 21

Ar.nerd
  • 4 replies
  • November 29, 2021

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


Jeffrey_Baldwin

@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!


tank666
  • 4854 replies
  • December 15, 2021

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


Jeffrey_Baldwin

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!


Osagie_Eigbe

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?


tank666
  • 4854 replies
  • January 22, 2022

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.


Jeffrey_Baldwin

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


Osagie_Eigbe

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


Stoyan
  • 4 replies
  • May 1, 2022

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?


tank666
  • 4854 replies
  • May 1, 2022

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:


Stoyan
  • 4 replies
  • May 3, 2022

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.


tank666
  • 4854 replies
  • May 3, 2022

Could you show a screenshot of the entire screen?


Stoyan
  • 4 replies
  • May 12, 2022

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

Sorry and thanks!


Pankaj_Bhagwat

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 …


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings