Broken Icon Variants when changing color...?

Ask the community
1

We have been using our Figma Design System for 2 months now, and everything was working great until now.

When the color of an Icon changes in a button, we can no longer swap variants or components. This specifically occurs with all Icons in our files.

The icon appears to not swap, and only swap the color rather than the icon itself. Is this a bug, or have we created something incorrectly with our icons and variants?

1 Like
2

Hi @David_Eisenstadt!

Figma “recognises and remembers” overrides by layer name.

There are 2 requirements you need to establish in all of your icons to make this work as expected.

  1. You need same layer name of the vector part in the icon components — the “path” has to have a same name. This means that if you have multiple paths you will need a boolean action over them so you can have one top layer to control the color.
  2. You need to apply color override in instances to that “top layer with same name in all icons”

Here is the file to show you how this works — feel free to copy it and poke around.

Let me know if this helps!

3 Likes
3

We are experiencing the same problem in our design system. Things were working for 1 year now and from last week on we cannot change icons anymore, it will only reset the colour.
@David_Eisenstadt did you manage to solve the problem??

4

@KlemenSkledar If you need help I can take a look at the current implementation. In case your DS is big and you have multiple nested instances across files — it might be more complicated to identify the issue.

5

Hey Marko! Thanks for your response.

After a full day of trouble shooting, we realized that several things were happening:

  1. The layer name was different than the path, as you mentioned. The layer name of the vector needed to be changed across 20-50 different icons in order for them to work correctly.

  2. Out of these 20-50 icons, several icons had multiple nests of the same instance within the layer group. To fix this, we needed to delete the instances and create a single instance to unify the vector.

These two methods have fixed our issue!

4 Likes
6

Hi Klemen, there were several issues going on:

  1. We needed to rename the layer in the icon component to match the path name of our base icon. This fixed most of our icons.

  2. For the rest of them, there were instance layers created within the base layer that provided too many nests. We needed to remove all these and create a single layer, rather than multiple instances within a layer.

This simply took some exploration into the layer structure to get it figured out. Hope this helped!

7

Marko, can I send you the screen recording of the case as I cannot upload the video to comments, If you have some mail that I can send you the video. Otherwise I am already in contact with figma support.

best,

8

@KlemenSkledar Sure! hello@clean.design

9

Problem solved, @Marko_Kosovic helped us with this issue :crown:, as the problem was in naming sublayers.
PROBLEM
we have icons that are text layers (Font awesome) every text layer is wrapped in frame that is exactly 24x24px. Every text and frame layer for each icon has exactly specific name for the icon that it represents. However problem was that text layer names inside of every frame should be the same for all icons.
SOLUTION
We’ve changed all text layers inside of all frames to the same name.

everything is working fine.

Otherwise, there was also/is bug on figma’s side as naming conventions that we were using before were working fine for over a year now. So figma is also investigating the issue.

Thanks for help!

2 Likes
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.