Bug or issue with variations when using icons

Ask the community
1

Hi everyone,

I think I’ve found a bug with the new variations feature. When selecting a frame and switching between variable modes, the icon colour for a component does not update correctly.

Context:
I’ve recently implemented variations within my design system to enable me to toggle between two different styles instantly (similar to light vs dark mode). I am designing a white label product so this feature is saving me a lot of time re-styling the typography, colours, etc every time I do a new design.

I have been able to do this with icons, so that they switch to a different icon set when I apply the variable mode change (I loosely followed this guide here: How I link my Icons with Figma Variables | by Praveen Nalakurthi | Medium).

Everything is working as intended, HOWEVER, when I go to change variable modes the only thing that does not update is the icon colour. The icon itself changes correctly but the colour defaults to the icon colour in my design system, despite me having applied a variable colour style which should override this.

Does anyone know an obvious way to fix this issue?

[NOTE: Weirdly, this only occurs when I drag the component onto a frame and apply the variable mode change. When I do it to the component itself it updates without any issues!]

image
image2645×1008 77.5 KB

2

Here is a screenshot of what it should look like. You can see that when applying the variable mode to the main component itself, it updates correctly. The issue only occurs when the variable mode is applied to a copy of the component (e.g. when it is on a frame).

image
image1145×566 23.9 KB

4

Hi there,

Thanks for reaching out. To confirm if it’s a bug, would you be able to share the file link with access to support-share@figma.com? It won’t affect your billing. I hope I can investigate it further.

Thanks!
Toku

5

Hi,

It seems to have resolved itself after a weekend of me powering down my laptop and quitting Figma.

6

Hi, I still have exactly the same problem. Still occurs after the restart of my laptop. In my component, the theme switch is controlled by a string variable. I have in total 4 variable modes (themes). Weird thing is that it works for 2 variable modes (themes) perfectly like expected and for the other 2 variable modes the icon color variable does not change after applying the corresponding variable mode (theme).