Parent component not updating instance

Hi new to Figma :grin:
So I made a drop down menu and it more or less works fine. I followed a tutorial but am still trying to understand the multi dimensionality of components nested and how they affect each other.

I’ve attached the working below. I started off with what I made on the left which turned into variants on the right. The ‘parents’ seem to be disconnected now so if I change the colour to orange it doesn’t update on the rest?

Also inside the component set I created variants from the drop down menu in open state. This also however doesn’t update when say I change the colour?


This is how the tutorial set up the component.The instance has a square bracket around it

Screenshot 2023-12-06 at 6.35.30 AM
Screenshot 2023-12-06 at 6.37.58 AM
and this is what the mine looks like for the component and the instance I set up in the component set.

Screenshot 2023-12-06 at 6.40.36 AM

Inside the component set
Screenshot 2023-12-06 at 6.41.09 AM

Am wondering if because I’ve grouped both the drop down and month component together it doesn’t work anymore?

Hey Eva,
Happy to help :blush:

  1. “I started off with what I made on the left which turned into variants on the right. The ‘parents’ seem to be disconnected now so if I change the colour to orange it doesn’t update on the rest?” : You have overriden your instance (by switching with an orange rectangle) but not the main component, so it would not update it. If you want to update automatically in “orange” you have to update directly into your main component with variants (the component on the right).
    You can find more information in this guide: How to apply override to instances

  2. “Also inside the component set I created variants from the drop down menu in open state. This also however doesn’t update when say I change the colour?”
    Not sure which part of your variant you want to change the color. If you want to change the color of the months when you hover them, you have to change the colour in the main component.
    Here a quick video recording:

  3. "This is how the tutorial set up the component.The instance has a square bracket around it

Screenshot 2023-12-06 at 6.35.30 AM
Screenshot 2023-12-06 at 6.37.58 AM"

This square is the absolute position feature, this feature excludes an object from an auto layout flow while keeping it in the auto layout frame. The object and its surrounding siblings ignore each other, even as they resize and move.
You can find more information on it in this guide: Explore auto-layout properties

Hope this helps!