Skip to main content
Amy_Zhen
April 22, 2021
Question

Error for "Nested instance is swapped with parent instance"

  • April 22, 2021
  • 12 replies
  • 23361 views

Hello,
I’m trying to create an interactive component for checkboxes. In my design system file, I have wired up the checkbox variant already. Then I opened up a new file and dropped in this component. When I play my prototype, however, I get the following error message: “Couldn’t play interaction: nested instance is swapped with parent instance.”

What does this mean? I’m not sure the component has a parent instance.

This topic has been closed for replies.

12 replies

Helder_Leal
April 23, 2021

@Amy_Zhen I was having the same issue. In my case, there was a duplicated instance inside the “Hover” variant.
Screenshot 2021-04-23 at 11.47.50|542x256
I deleted that variant and created a new one, and it works fine now! I hope it helps 🙂

Amy_Zhen
Amy_ZhenAuthor
April 23, 2021

I figured out my issue too. One of the checkbox variants had an additional nested grouping than the others. I had to delete the variant and create a new one for checkboxes. Now I have to go through the full design library and swap out the old with the new!

Tricia1
November 2, 2021

This helped me solve my issue! Thanks, @Amy_Zhen and @Helder_Leal

bertnert
November 17, 2021

Thanks! This solution worked for me too. 👆

My issue started when i added Interactive Component X into the layout. Spent the last hour eyeballing all layers of variants for Interactive Component X, and I didn’t find any nested differences in there, but found one in Interactive Component Y. Fixed that, and every interactive component now works in the layout. Hope this helps too. 🙂

Sara_Finkle1
November 30, 2021

Hey I have a checkbox option within my dropdown menu. The checkbox has been recreated as an interactive component within the dropdown option which I would also like to make an interactive component. Can we not have this nested at all? Do I need to create a separate checkbox so that there are no other components inside of the dropdown? Sorry ya’ll I’m confused lol
Screen Shot 2021-11-30 at 2.14.30 PM

Makroon
December 16, 2021

I had the same problem.The problem was caused by the instance of my main component within my variations. I solved the problem by detaching the instance within the variation, updated my library, and voilá! My prototype worked like charm!

Marat_Bakirov
December 20, 2021

thx man! this solved my problem ❤️

Test_acc
August 22, 2022

Solved thank you!

Ivan_Spasojevic
November 4, 2022

Thanks, this helped me!

Joeri_Juramento
December 16, 2022

I just wanted to share what I found as I stumbled upon the same error.

Detaching is one strategy, but sometimes you want to maintain the component-instance relation.

When building variants with inner prototype transitions between variants, it saves time to re-use a ‘main-variant’ inside other variants (nested) as instance on which you apply whatever differences you need.

So in other words. When you have a component with variants. In some of these variants, you could use an instance of itself inside these variant.

This saves time. If you update the main variant, all major changes will be echoed by all variants.

However, this is not compatible with all prototype transitions, so I refer you to this advise:
Parent nested inside child variant, prototyping does not work - Interactive Components / Bugs - Figma Community Forum
In case you already have a component with variants, I am augmenting the advice:

  1. In your component, Identify the main variant that does not contain a child of itself.
  2. Drag that variant out of the variant’s border. Figma will create a new separate component with the properties in its name. I did not rename. You could add a text-label “Primary Component X”.
  3. Inside a variant, check on the instance object and click the “Go to Component”. It should take you to its linked Primary Component X. This relation should remain intact.
  4. Now create an instance of your Primary next to it.
  5. Create a variant inside the original variant’s border.
  6. Replace that new variant’s content with a copy of that new instance and configure correct variant properties.
  7. Fix your prototyping interactions inside the variant’s border with these variants containing instances of the Primary.
  • Any general updates are applied via the Primary and automatically echoed in all the instances that are nested inside these variants.
  • Any updates per case/state, need to be applied the relevant variant.
  • Only detach if you have no other recourse.

The underlying issue might be changed by Figma by allowing (for example) to mark a “Primary” variant as such, inside Component’s variant’s border. This means this tip might expire over time, so please be aware of the date. If you already have a better method, please share.