Interactive components not working in the main components

Hello!

I have a hover state on a component that works fine on a prototype, however when that component is put inside another component (in my case a navigation bar), then that navigation bar is used within a prototype, the hover state component no longer works.

I’m certain I’ve seen interactive components within other components work just fine, so do I need to provide more context to my specific use, or is this a common problem so far?

Only other thing to mention is that my hover state interactive component is within an auto layout. I’m unsure if that’s causing the issue.

Just an update: I removed the hover state interactive component from the auto layout and it’s still not working, so likely not related.

UPDATE:

I realised I was using a master component within the prototype by accident. Removing this and replacing with an instance solved the issue.

Thanks for sharing your experience! I look forward to when it is out of beta!

I’ve place an interactive component within another component. However, the interactive components does not seem to work.

EX. I have radio button with a click action to switch between “unchecked” and “checked” state. It worked as expected by itself. However, when I placed it a “non-interactive” component, the radio button stopped working.

same here. I use an interactive component for my navigation bar. when using it in my screens the interactive component part works only if my screens are not components themself.
this is a little bit annoying, because i use a lot of the screens as components for the prototype.

Will you fix this? So that interactive components work within other parent-components as well?

Hi, I am having sort of the same issue. I created a interactive dropdown and when used inside a master component, only a part of the interactions are working.

The interactive element inserted into the master component does not work, everything is fine in the copy and reacts even faster than inserted simply into the frame.

figma.com/file/vTxtf7lUU7fzcFvnDntDAA/Untitled?node-id=0%3A1

I am also encountering a similar issue.

I have a component containing two variants of a set of fields. Each variant shows fields based on the selection in a simple radio button.

I’ve set up the interactive components so that they change between the variants based on which radio button is selected.

If I grab this variant as an instance and use it directly (no other frame around the instance) the interactions work fine.

The second i embed this instance into another component, or even if I just convert the instance into its own master component, the interactions stop working completely. This applies to both local components and also ones i am pulling in from our main design system library (e.g. button hover states)

It seems to have started happening since the update was made to make interactive components work with Auto Layout. It was working fine 3 days ago, now it’s very much broken

I’ve attached a video (sorry no sound) to demonstrate what’s happening here:

cc @Gleb @Andrew_Chan

Does that also not work if you embed the new component instance into a frame? “Bare” components and instances are not really supposed to be a part of the prototype, only instances nested in frames are.

Hey @Gleb

Thanks for getting back to me so quickly!

So i took my “Record Card” component that the fields are embedded nested in, broke the component away from the library and removed A/L so that it’s just a standard frame. The interactions started working again (though obviously clipping as the outermost frame isn’t scaling vertically to accomodate the larger set of fields for “New customer” radio button selections)

I’ve also checked through all my other libraries and files and this behaviour is being repeated everywhere. It is 100% only an issue after the recent update with A/L working with interactive component, it’s been working mostly without issue since the interactive components beta started, and only stopped working a few days ago when the new changes have been made.

What else can I provide you to help demonstrate the issue? This is actually quite a critical problem for us, basically all out prototypes for dev and for user testing and now completely broken

(I’ve raised a formal support ticket as well BTW)

I think you misunderstood what I was saying. You don’t need to detach anything or remove AL. I meant that you need to:

1. Not use the main component as a part of the prototype. In your first example you added the flow starting point to the main component — this is not supposed to be done (I think this can even be considered a bug, it’s not supposed to work).

2. Only use instances wrapped in the top-level frames. Create a frame, then add a component instance inside. Again, not the main component, but its instance — main components are not supposed to be used in the prototype.

Example prototype with nested components where everything seems to be working fine: https://figma.fun/aAivsk

Same thing here. I also use master components in the production files just to avoid editing similar frames.

I really would like that interactive components started working with master components so we don’t have to duplicate every frame just to have an instance of them working properly. Interactive components was supposed to reduce the number of frames you work with, not increase.

Same thing here. interactive components are not working in Master components. Please fix this.

I don’t see the issue in using Master components within a prototype. You mentioned it should be considered a bug, can you please elaborate?

That’s just my understanding. Main components have a special behavior in the prototype: the actions you add to the main component would propagate to instances. So my mental model is that it’s a template, and using the template with instances doesn’t make much sense. Also in the video above the user manually added the flow starting point to the main component because it wasn’t added automatically — it’s like Figma tries to resist users setting main components as a part of the prototype. And I think this makes sense.

Another thing specifically about interactive main components in prototypes — it breaks the component logic. Let’s say you use a main component of a button and then below it an instance of the same button. When you hover the main component button — it changes color. Does that mean that every instance of that main component would change as well? If so — I think it would be great but that’s a bit too much to expect from the simple Figma prototyping tools. If it doesn’t, that breaks the logic of how main components work as now instances don’t reflect changes from the main component (even though it’s in the prototype and not the editor).

Thanks, @Gleb I would like an official Figma personal here, if I need to stop putting main components into prototype frames. I didn’t see an official post on that in the tutorials.

You can reach out to support if you need the answer from Figma. They don’t often check this forum.

I was running into an issue where my interactive components weren’t working in my prototype and I needed to restart the prototype and everything started working as expected.

I think it’s because I created the interactive components after the prototype was launched.

A little more context… I open one window with my prototype running and then build in another window which shortens my testing and quality assurance cycles. When I’d create a new interactive component in my design view, I’d see the prototype refresh and think the changes were applied in the already running prototype. I don’t think that interactive component updates get applied to prototypes when they are already running as part of the live updating that happens when changes are made. I believe that the interactive components are instantiated when the prototype launches which requires closing and launching the prototype each time you create a new interactive component.

After restarting my prototype instance, the live update seems to be working as expected when I make new interactive components. 🤷

Thanks! this was my issue 🙃

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