Skip to main content

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


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