Error for "Nested instance is swapped with parent instance"

Interactive Components Questions
11

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.