Skip to main content
Question

Bug? Changing variants on one of the instances propagates to other instances, linked to the same swap instance property

  • January 13, 2023
  • 7 replies
  • 2213 views

Anton_Kosarchyn2

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 topic has been closed for comments

7 replies

Gleb
  • Power Member
  • 4707 replies
  • January 14, 2023

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.


Anton_Kosarchyn2

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


Gleb
  • Power Member
  • 4707 replies
  • January 28, 2023

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. 😦


martiankid
  • New Participant
  • 7 replies
  • February 1, 2023

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


martiankid
  • New Participant
  • 7 replies
  • February 4, 2023

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.


  • 0 replies
  • July 19, 2023

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


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