Unexpected Behavior with Nested Component Interactions in Prototype Mode

I’ve recently encountered an unusual behavior in Figma while working with nested components that have interactive prototyping involved. To better demonstrate the issue, I’ve created a short video.

Here’s a brief rundown:

  1. I created a Component with a gray rectangle.
  2. I then made a Variant of this component, altering its height and changing its color to red.
  3. Using the Prototype feature, I linked the two variants to switch upon interaction.
  4. I turned an instance of this combined component into a new component.
  5. Instances of this new component exhibit inconsistent behavior in Preview mode. Specifically, the color changes on interaction, but not the height, unless the parent component is also interacted with.

My understanding is that instances should behave independently during preview unless their parent component is modified in design mode. I’m wondering if anyone else has experienced this or if there’s something I might be overlooking?

Any insights or suggestions would be greatly appreciated!

Thank you in advance for your help!

I’m also experiencing odd/inconsistent nested component variant changes in prototypes, and I submitted a bug report. I use state changes for navigation components often, so it’s causing a lot of issues for my team and I.

1 Like