Unexpected Behavior with Nested Component Interactions in Prototype Mode

Ask the community
1

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!

1 Like
2

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.

2 Likes
4

Hi Alexander!
After further investigation, this looks like a long-standing bug and our engineers are aware of ‌this. I’ll go ahead and add your encounter with this issue to our ongoing bug report. While I can’t guarantee an ETA on a fix, I can bubble this up with our engineering team for some more visibility at the very least.

Thanks again for your thoughts and patience in the interim!

If you do want to stay up to date with the latest update in Figma, please keep an eye on our Release Notes: figma.com/fr/release-notes/?context=confirmLocalePref

5

Hi @Rich_Smith ,
I saw in our back end that our support team helped you to solve your issue. Glad it’s been solved!
For visibility to the community (if this can help), it appears that once “Reset component state” is applied to the interaction both to and from the modal, the issue is resolved and the prototype behaves as expected for your issue.

6

I think I am having a similar issue to Alexander. Should I ask support for help?

7

I get the same issue. I don’t know how to call it. but please Dev use Dependency Injection technique to manage with nested component in Figma.