Skip to main content
Question

Nested component properties not always applied (synchronized)

M

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 replies

Nate_G
  • Nate_G
  • Power Member
  • 177 replies
  • November 2, 2023

@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 Attachments
Nate G
M
1 person likes this
  • M
    Maurice
M
  • Maurice
  • Author
  • 1 reply
  • November 3, 2023

@Nate_G Nice, thank you very much for the precise answer 🙂.
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?

Reply


Terms & ConditionsCookie settings

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