Skip to main content
Solved

Override not preserved for component instances

  • October 4, 2022
  • 5 replies
  • 2390 views
AmitMojumder_Optimizely

Hello community,
We are facing issues with component instance overrides while switching among the variants.

Example:

  1. We have a button component with left and right icon.
  2. Icons are hidden by default and has the relevant property to switch those on/off.
  3. When swapping the icon, the icon-color is not preserved. We have a blue bg icon and icon color is defined as white within the button component. But when we swap the icon the color changes to icons’ default color to black
  4. When changing the size or state of the button, the button name (button label) is not preserved. It goes back to it’s default state which is really frustrating.

Anybody else facing this issue? Is this a bug?

Please help 🙏 🙏 🙏

Best answer by AlicePackard

Hey Amit, don’t worry, many people struggle with this and there is a solution!

I recommend you double check that all your icons have the same layer structure as well as similar layer names for any nested layers. For example your main component named “Arrow” might have 1 nested layer named “Vector.” In order for overrides to be preserved when swapping Arrow for another icon, that icon must also have 1 nested layer named “Vector.” Here’s a reply in a similar thread:

After ensuring your icons names and layers are cleaned up, try resetting the nested icon instances within your button’s main component and apply the color you want. Then test out if that color persists when swapping icons on instances of your button.

View original
This topic has been closed for comments

5 replies

AlicePackard

Hey Amit, don’t worry, many people struggle with this and there is a solution!

I recommend you double check that all your icons have the same layer structure as well as similar layer names for any nested layers. For example your main component named “Arrow” might have 1 nested layer named “Vector.” In order for overrides to be preserved when swapping Arrow for another icon, that icon must also have 1 nested layer named “Vector.” Here’s a reply in a similar thread:

After ensuring your icons names and layers are cleaned up, try resetting the nested icon instances within your button’s main component and apply the color you want. Then test out if that color persists when swapping icons on instances of your button.

Chrtz
1 person likes this
  • Chrtz
    Chrtz
AmitMojumder_Optimizely

@AlicePackard Thank you for your response. Actually, the icon color issue is not resolved on my end even if I keep the layer name and hierarchy the same. Definitely feels like a BUG !

Petr_Kucherov
Georgi_Tsvetkov
Niphat
4 people like this
  • Petr_Kucherov
    Petr_Kucherov
  • Georgi_Tsvetkov
    Georgi_Tsvetkov
  • Niphat
    Niphat
  • Ozgur_OZ
    Ozgur_OZ
AlicePackard

ah, well apologies the issue is still not resolved 🙏 but you can rule out it being caused by component architecture! I would suggest submitting a bug report if you haven’t already. there is a question mark icon in the lower right of figma’s interface that you can use submit the bug report form

AmitMojumder_Optimizely
1 person likes this
  • AmitMojumder_Optimizely
    AmitMojumder_Optimizely
AmitMojumder_Optimizely

Thanks @AlicePackard
I had to rebuild the component to overcome these 2 issues. Resolved now and thank you for all the support. Appreciate it.

Camilo4
  • Camilo4
  • 1 reply
  • May 16, 2023

How did you do it? Could you show me, I have the same poor :c

Georgi_Tsvetkov
1 person likes this
  • Georgi_Tsvetkov
    Georgi_Tsvetkov
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