Skip to main content

image


Hey


I’m trying to create a Stack component to render a bunch of controls on the UI, eg Button group or Chip group. I’ve decided to change the content type using the Swap instance property on each Cell of the Stack (I expect each Cell to be of the same component type after swapping).


It works as expected, only up to the point I try to change variants on one of the components so it propagates the same variant change to other swapped components, which is not what I expect and makes this approach useless.


Here is also a screen recording for greater clarity.


I hope this is something that’s easy to fix because this approach would preserve a lot of variants and components (eg Button group etc). Thank you!

This is the expected behavior. The instances are “linked” with this feature, so you can’t change them separately. You can use my plugin “Selection Variants” to quickly swap nested instances in selection.

Yes, but I’m not talking about changing instances separately, but rather about changing variants of each instance independently.


Btw: your plugin is great, I use it frequently and it’s so helpful! Just trying to utilize native Figma features at max, plus the plugin doesn’t support instance swap property yet, afaik


That’s the same thing if I understand what you mean correctly. Technically each variant in the set is a separate component so by changing one variant property you are changing the instance to be a completely different component. And to change these independently, they need to be not linked with the nested props feature.


Yes the plugin doesn’t support instance swap because this isn’t possible to implement to the fullest with the current API limitations unfortunately. 😦

Hey, Gleb. Thank you for the reply.

Even though I understand that Figma variants are separate components under the hood, I perceive variants as component properties rather than separate components (and that’s how Figma markets them). This provides a false expectation that I can change variants of a component without affecting other linked instances (as I would change properties of react components, for example). That’s why I think this is unexpected behavior and should be addressed by the Figma team

What I also found is that boolean properties don’t behave like variants and could be toggled on/off independently for each of the linked components, which adds even more confusion to the aforementioned behavior

I had the same issue. We need to be aware that Figma considers a specific instance to be the same if it has the same name and comes from the same component, regardless of the variant. Essentially, this is like having a global variable. You can identify this by changing the name of the instance in one variant to make sure it does not match the name in another variant. However, the problem with this approach is that you will only see the value of the first variant. When you switch to another variant, the instance will have the default value instead of the value that you included using the properties panel.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings