Skip to main content
Question

Instanced components, how does inheritance work? Can't figure out a supposed bug

M

Hi! I am having issues understanding why my components are behaving the way they do, see this video for the illustration of the problem: https://i.gyazo.com/8b24eaf38e2bc9dc1dddfa08be71b2d7.mp4

I have a master with different tab states, default, hover and active. I then instance those tabs in “Main tabs - Master” with all the tabs named appropriately. Then I again instance that tab menu with variations of the active tab for easy switching between them in designs.

The issue, as you can see, is that when I change a tab’s variant to active in the final component, it stops receiving text updates from “Main tabs - Master”, why? It’s only text that is being affected in such a way, changing the color of the tab anywhere propagates as it should. All text layers are named same

File in question: https://www.figma.com/file/OaeZ3RocfgUjWA4ikKsWJG/Instance-issue?node-id=0%3A1&t=wvaVxU53Xh6hYJdq-1

This topic has been closed for replies.

6 replies

M
  • Monolithic
  • Author
  • 3 replies
  • April 5, 2023

Bump, anyone knows?

M
  • Monolithic
  • Author
  • 3 replies
  • April 16, 2023

Bump, anyone knows?

Pavel_Kiselev

The way I see it is that once you change the tab state it becomes an override on that particular instance thus it does not receive further updates. And it happens as soon as you wrap your master with variants. The deeper you go the more rigid it gets as Figma treats overrides on these instances sitting in other component with higher priority.

Pavel_Kiselev

I don’t have a chance to check now, so I assume that any master instance would not have that problem as long as it’s not a part of another component

M
  • Monolithic
  • Author
  • 3 replies
  • April 16, 2023

Yeah I was thinking something similar, but what puzzles me is why text specifically behaves that way. I can change the colors and other properties on the masters and they will propagate, but text specifically won’t.

Pavel_Kiselev

My take is that variant isn’t the same as the entire component set, so when you change one state to another, you simply swap the instances. Every state in “Menu tab - Master” is a component.

Remember the old days when designers have to use something like “Menu tab - Master / Rest” and “Menu tab - Master / Active” to achieve the same with individual components? It feels like component sets with variants are just an abstraction over core mechanics.

I think, after you change state, you swap one component for another. And once swapped it becomes an override. After that Figma won’t propagate master component changes to the instance with a different state.

For me it seems like it is the case, I can easily reproduce it with any state in your “Menu tab - Master”. The same effect can be achieved if you swap any tab with a different component. Changes in master won’t propagate to variants set.

I took your file to play around, this is what I get - https://www.figma.com/file/15hBkrp8q6d8iiwoXIH93l/Instance-issue---pk?node-id=0%3A1&t=rbcSOp2xEcy1mCAk-1

PS I feel like every feature we got is an extension of the core ability to swap one asset for another with an ability to preserve certain overrides. So we got component sets to better group variations of the same component. Then we got the instance swap property. And then properties bubbling as a cherry on top. Pretty cleaver have to say 😉

Terms & ConditionsCookie settingsAccessibility statement

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