I’ve created a toggle switch component, which is using a nested component inside to change the size of the switch. When I do changes to the nested components properties, some styles which were applied to the parent components variant, are no longer work.
I have no idea what I’m doing wrong. Can anybody help me out? Looks like a bug to me 😕
Best answer by zachtalogy
Although exposed properties for nested instances is in beta, the instance swap property is not.
Looking at this again, I think I was mistaken in my assumption of your component setup. It looks like for the “off” state, you are overriding some properties from your base toggle button component to make it appear in that state. For whatever reason, Figma really does not like it when both a) styles of a nested component are overridden and b) that component gets swapped. This is a very common use case the Figma team seems to be neglecting.
Instead of using a boolean property (“Show check”) for your base component, I recommend creating a variant and defining the on and off styles that way. It’ll double your base component size from 2 to 4 variants, but then you’ll avoid the need to override styles in your main toggle switch component. This should work a bit smoother.
And if you’re getting good results from this, but the focus and hover states are causing problems, I’d also add those style as variants to your base switch.
This seems to be common in Figma, that nested components or component overrides don’t always behave as expected.
I’m guessing the problem here is not with the switch component that has two sizes, but with the labeled switch component. Things should work just fine when using the large switch, because the states for the large variant are defined clearly in your component. Then Figma has trouble when using the smaller variant, and isn’t clever enough to infer the properties or overrides should be applied in the same way as the large one.
Unfortunately your workaround might just have to be adding a size variant to your labeled switch component, defining each state again.
Hmm, but what is the benefit of the new pseudo slots feature when using nested components?
Hi @zachtalogy, i forgot about that this feature is still in beta: Figma beta features – Figma Help Center. I think i have to report it there.
Although exposed properties for nested instances is in beta, the instance swap property is not.
Looking at this again, I think I was mistaken in my assumption of your component setup. It looks like for the “off” state, you are overriding some properties from your base toggle button component to make it appear in that state. For whatever reason, Figma really does not like it when both a) styles of a nested component are overridden and b) that component gets swapped. This is a very common use case the Figma team seems to be neglecting.
Instead of using a boolean property (“Show check”) for your base component, I recommend creating a variant and defining the on and off styles that way. It’ll double your base component size from 2 to 4 variants, but then you’ll avoid the need to override styles in your main toggle switch component. This should work a bit smoother.
And if you’re getting good results from this, but the focus and hover states are causing problems, I’d also add those style as variants to your base switch.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
