Skip to main content
Solved

Can I use multiple base components + nested variants and preserve overrides?

  • May 10, 2021
  • 1 reply
  • 1044 views
maxwellb

Hello! I’m trying to build out our component library around one component made with 6 base components + a few nested variants. My team has been struggling with it for a week to preserve overrides once a change is made to the nested variant with no luck 🙃

My goal is to have one main component that allows us to switch between devices (mobile + tablet) and size (small + medium + large), while preserving overrides. Right now, we’ve set up a version that allows us to successfully change between the the two properties (device + size) and successfully preserves overrides. However, once we make a change to the nested variants (like swapping a nested variant), the main component forgets about our text overrides to our nested variants when we switch the device property.

Hoping someone has successfully built a component this way and can shed some light. Thanks in advance! 🙂

Some screenshots

nestedVariants

baseComponents

mainComponent

Summary

This text will be hidden

Best answer by Gleb

It’s hard to explain and understand but that happens because you are using different nested components (variants) in variants for different sizes:

image

Figma knows that you are using Quantity Selection Tablet in List Item Tablet, and Quantity Selection Mobile in List Item Mobile. That would mean that if you override one of them, when switching the top-level component, Figma will not keep the override since they are originally different in both components.

Simple example. If you have two components: red and blue, you create an instance of the red one and then color it green. When swapping to the blue component, Figma will not keep the green override, since the color was originally different in both components. But if you also had a yellow rectangle in both of these components and you painted it black, Figma will keep it as it is the same in both main components.

View original
This topic has been closed for comments

1 reply

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • Answer
  • May 15, 2021

It’s hard to explain and understand but that happens because you are using different nested components (variants) in variants for different sizes:

image

Figma knows that you are using Quantity Selection Tablet in List Item Tablet, and Quantity Selection Mobile in List Item Mobile. That would mean that if you override one of them, when switching the top-level component, Figma will not keep the override since they are originally different in both components.

Simple example. If you have two components: red and blue, you create an instance of the red one and then color it green. When swapping to the blue component, Figma will not keep the green override, since the color was originally different in both components. But if you also had a yellow rectangle in both of these components and you painted it black, Figma will keep it as it is the same in both main components.

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