Nested component properties not always applied (synchronized)

Ask the community
1

Hello everyone,

I would like to have a component called “Icon Wrapper” which is able to change the size and color (bright or dark), so I don’t have to create multiple variants for each icon.

The component itself works great until i use the wrapper as a child in other components, in my case the “Screen” Component. At some point it seems to be acting randomly:

Animation

Here is the link to the Figma project.

I hope someone can explain the behavior to me. Is this a bug or a mistake on my side?
Thank you very much!

2

@Maurice I’ve had similar issues swapping and maintaining colors, but one simple fix I found has been to use modes to toggle between light and dark.

So in the example below:

  • I set up 2 color variables with different colors for light and dark modes (icon-color, bg-color).
  • I set the different icons’ fills to the “icon-color”
  • I set the fill of the “Screen” component to “bg-color”
  • Then on an instance of “Screen”, I can toggle the modes between light and dark.

→ Get the file

1 Like
3

@Nate_G Nice, thank you very much for the precise answer :slight_smile:.
I also think that variables and modes are the best way to handle it. But if we have gradients instead of simple colors, variables can’t be applied here (currently).

I want to understand how components and the swapping mechanism work here which leads to such a behavior. Or is this a bug in Figma?