The icons inside my button instances aren't inheriting the colour token set in my main component

[Evaluz]

Hello community!

I have a question regarding colour tokens and components (it has been driving me nuts for days now!) every help is welcome.

So, I have an icon/button component that has the following variations:

• Icon left or right
• Primary, secondary or tertiary
• Disable, Enable, Hover, Click

I’ve structured them like this:

So far, so good. I never had an issue with them until I started applying colour tokens to the icons.

What happens is that whenever I swap the “+” for another icon, the color token value assigned on the main component does not apply to the instance.

Here is an image for you to see what I mean:

The button on the left is an instance with the proper values, but whenever I swap the icon, it changes colour to the value assigned in the icon page.

As you can see, this also happens for the “disable” status.

Now, my icons seem to be generally OK?

I am keeping the “icon/” structure and name every vector as “Vector”.

What I thought could be happening was that I added color tokens to the icons in the icon file

BUT I tested with a random HEX color in the icon from the icon library and I still have the same issue in the components.

So, I wanted to know if any of you saw another issue that I haven’t?

Thanks in advance!!

[KennLucas]

This is an ongoing issue in Figma and many people have different opinions and fixes.

You might want to do some searching and research on similar issues to see varying thoughts and form your own way of trying to fix it.

There are folks that insist it is as simple as making sure every icon and nested object is named exactly the same. I have had terrible luck trying this and I just get angry.

An icon doesn't change color when making an instance swap with the new component properties

I have been working with the new component properties to create buttons but I quickly found an issue. If the button has an icon and I want to swap an instance, the icon doesn’t change color. I went over it a couple of times and tried different steps each time but no change. Is this a bug or am I missing something? Thank you!

Personally, I put every icon in a UNION. This is a little difficult to get used to because a union will hug everything and make you mad because you want it to be a set size. To fix that, put your icon in a union (you kinda have to do two icons to apply a union, then delete one)…put the union in a FRAME. Apply constraints or auto layout to the frame and set size on that. It is easy…but tedious.

APPLY YOUR COLOR SETTINGS TO THE UNION, not to the nested icon.

The Figma help has decent info in explaining unions. But it takes some effort to wrap your head around it for some of us.

" * Union selection: Union combines the selected shapes into a boolean group. If the objects overlap, the new shape’s outer path consists of the composite of its sublayers’ paths minus any segments that overlap. The stroke would then be applied to that outer path ignoring any path segments which overlap each other."

https://help.figma.com/hc/en-us/articles/360039957534-Boolean-operations#:~:text=Union%3A%20Union%20combines%20the%20selected,segments%20which%20overlap%20each%20other.

Google around for Figma Union Hack to find a lot of info.

How to preserve icon color override and size?

I have been trying to find a way to preserve the icon color override within my button component. As you can see here, I used the trick from Rogie (Perserve Icon Color Override) to apply union to the icon, and everything seems work. [Screen Shot 2021-03-04 at 8.24.52 AM] However, now when I swap an icon, the union makes it hard to control the icon size (even though all icons have a frame 24x24, the content inside are vary). It then affects the auto layout and size of the component. Therefore, I…

https://www.figma.com/community/file/1308188795212541398

[KennLucas]

If you want to post your file, I can make you an example and send it back.

[Evaluz]

Oh boy! That’s a long thread.
Thank you for sharing those references with me. I’ve read their fixes and I tried those that I haven’t tried yet.

Here are my findings:

• Keeping the same name (vector, icon) on the layer for color override isn’t working (current state)
• I tried changing all the icons to another color and then assigning the “original colour” back, but it didn’t work either
• I did a “union” test with a single icon, but I think that I didn’t quite get what the users were suggesting? I am not sure that I’m following the suggested structure (?)
  
  
  
  
  

I’d be very grateful if you could look at my file and see if you can spot the hack. I moved my components to this new file so feel free to move and modify what has to be done.
Button File.fig (185.0 KB)

Thank you for your help.

[KennLucas]

It is literally shorter than your initial ask thread.

[Evaluz]

Oh, I was referring to the threads that you shared (the answers make them a long read).
I just realised that my writing might have sounded like a complaint but it wasn’t .
I am grateful for the help on pointing me to the possible solutions to my bug.
Thank you.

[Evaluz]

Update:
The error was on the naming of each flattened vector.
At first sight is hard to see, but some icons had a space after the name: 'Vector ’ instead of ‘Vector’.

If you’re facing a similar issue, you’ll have to check each icon, one by one to make sure you don’t have any spaces on your names!

[ferdinand3]

Maybe you could just change your tokenization. It would be Best practice to use one local variable called Button/Font/Hover/”Color” and Connect both colors to this. You could then reffer another token „Font/Color/”Color”.
Thats a different approach of connecting colors to different tokens.