Skip to main content
Question

Changing color of main component doesn't change color of subcomponent component instance

AmodeusR

So I’m having this weird behavior in a card where I have it as a component, and inside of it, there’s another component composed of icons component. What happens is, if I change the main color this icon has as other parts of the card, it changes only if it’s the default icon of the card component, but if I change it to the other icons and try to change the color, it doesn’t work, it maintains the old color. Why is this behavior happening and how to fix it?

Also, as a bonus, if anyone could help me at how to make the icons component resize to the icon size accordingly so it doesn’t get distorted, it would be very grateful!

Here’s a link to a figma demo of it if anyone wants to tinker around with it: https://www.figma.com/file/spc0Ths0RNcm7vWY9x8rul/Weird-behavior?type=design&node-id=0%3A1&t=IYysqaaLCUXr8HJc-1

This topic has been closed for comments

4 replies

Ryan_52
Figmate
  • Ryan_52
  • Technical Quality Specialist
  • 382 replies
  • June 2, 2023

Hi @AmodeusR I did notice if you delete and re add the icons instance to the Card component it does allow for the color to update correctly. I would suggest reaching out to the support team directly via this form for help: https://help.figma.com/hc/en-us/requests/new

Be sure to use your Figma account email, include these links to the file, and share it with support-share@figma.com so they can take a closer look.

As for the component resize, see if adding auto layout to the icons in the component set help.

Amanda_Stauffer

Hi, I am having this same problem.
When I change the color of my main component, its instances do not change with it.
They only update when I right-click the instance and say “reset all changes.”
This is frustrating - obviously I am not going to go through and change the color of every component through my document every time I need to change it.
Anyone have a fix?

Gayani_S
Figmate
  • Gayani_S
  • Community Support
  • 1977 replies
  • January 25, 2024

Hey @Amanda_Stauffer , if you’re working with instances in a separate file, use the Go to main component setting to open the library file. From there, you can apply any changes you want to the main component. Could you confirm me if you’ve made the changed to the main component or the instance?

Amanda_Stauffer

Hi, it was all in the same file. It’s working now. I think it’s possible I had dragged it outside a frame. I don’t know why that should make a difference, but now it’s inside a frame again and it’s working. When I drag it back out, it doesn’t. Maybe I can just send feedback that if my main component is a frame that does not need to be in another frame, I would expect not to have to falsely nest it in order to make a change that cascades to its instances.

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