Skip to main content
Question

Assumption: The combination of nested colors and components is misinterpreted


Sebastian24

Hi Figma Team and Community, 

My Goal:

I want to create a master layout file that can later be modified exclusively via variables for each customer. This works mostly well...

My Problem:
I’ve encountered a behavior that I can’t seem to resolve:

  1. I created a component called "Icon." This component allows me to select the icon and adjust the stroke weight (three options). To control the icon color for each customer, I exposed the icon color as a variable. This works perfectly fine.
  2. Next, I embedded this "Icon" component into a new "Link" component, together with some text. Within this new component, I overwrote the original icon color using a new Link-Color-Variable because the icon needs to have a different color in the context of the link compared to when it’s used standalone. This also works without any issues.
  3. To make the "Link" component even more flexible, I want to not only control the color but also the icon itself for each customer. I know that I could expose the icon selection through nested components, but I don’t want to take that approach here. Instead, the icon should be fixed within the "Link" component but vary depending on the customer:
    • Customer A should always see Icon A when using the "Link" component.
    • Customer B should always see Icon B when using the same "Link" component.
      To achieve this, I exposed the icon from the "Icon" component as a variable in its instance.
       

       

The Problem:
When I switch between customers using the variable switch on the artboard, the icon color in the "Link" component doesn’t update correctly. Instead of applying the Link-Color-Variable defined in the "Link" component, Figma reverts to the original color of the "Icon" component in some cases.

It seems like there’s an issue with the order in which variables are updated during the switch. You can clearly see that the original icon color is applied, even though the overridden color values from the "Link" component should take effect.

Attached File:
To illustrate the issue, I’ve linked the relevant Figma file. You can download and test the behavior yourself by switching variables and observing the results.

 

https://www.figma.com/design/Xl7zAWLiCtPtwl6pvYISWS/Nested-Component-Bug?node-id=50-3427&t=pK7NboWOG2ETOkCY-1

 

Question:
Do you have any ideas on how to solve this issue? Or could this potentially be a bug that needs to be fixed?

Thank you in advance for your help!
Sebastian

Sebastian24

Does anyone else have the same problem or can help me here?


y_toku
Figmate
  • Community Support
  • February 6, 2025

Hi ​@Sebastian24 , 

 

Thank you for getting in touch and providing the information. Upon reviewing your file, I noticed that the color variable is currently set to black. Would you consider changing this color to orange instead? This change should apply when in the Customer-02 mode. 

 

Please feel free to let me know if I have misunderstood anything!

 

Thanks,
Toku


Reply


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