Skip to main content
Question

Interactive Component not working in overlay


kdeebee

I created a filter menu where every list item is an instance of the same interactive component to manage a hover state.

When putting an instance of the filter menu straight on a frame, the interactive component works as expected. When hooking it up to the dropdown button and letting it appear as an overlay, the filter menu does appear but the interactive components aren’t working… i.e. no hover states.

Nate_Green

I have (what I think is) the same problem—in particular, when nesting an instance of an interactive component within another component (interactive or not), none of the hover interactions work.

  • Page design (non-interactive component)
    • List
      • List items (interactive components) ❌ No interactions
    • Modal (non-interactive component, shown as an overlay)
      • Buttons (interactive components) ❌ No interactions

They work if, say, neither the modal or the page design frame are done as components. That’s not really a workable solution, though; I don’t want to have to sacrifice maintainability of my designs/artboards for maintainability of my components. 😒


Mattias_Berkesten1

Experiencing the same problem.
If I use an interactive component in a page component, it will not work in the prototype when going to that page component. However it works on an instance of that page component.


Andrew_Chan
Figmate

Hey @Nate_Green - interactive component instances currently won’t work when inside components. They will work inside instances of that component, however. If you need interactions inside of components and not just instances of the component, we’d love to hear more about your use case.

@kdeebee - this sounds like a bug. If possible, could you share a file with me via DM? A video of the bug occurring would also be helpful. Thanks!


Nate_Green

None of the components on my prototype are main components; they’re all instances. However, the problem also seems to have disappeared since I posted this, and I didn’t remember to follow up. So I guess I’ll reach back out if it comes back.

My brain is broken…I fixed the issue by not using components for my main frames.

My use case is this: when I make a page design, I turn it into a component. Then if I need to make a mockup showing an overlay, or showing the page content in a different state, I can use an instance of the page design as a starting point rather than duplicating it. If the overall design of the page changes, it updates all the instances, and I don’t have to go through each subordinate one to make sure they’re consistent.

Thanks @Andrew_Chan !


kdeebee

@Andrew_Chan Thanks for your message. I just dug up the file and when doing the overlay, I was linking to the component instead of an instance of the component so once I updated that, it worked as expected. Tx.


Q_Manning

I’m confused. Why would I have to create an additional variant on a component just so the internal elements are interactive?

Literally, there’s no difference between the two variants here, but once you select the second option, magically the interactions inside work. That is a really odd thing to have to do.

Is this going to be fixed?


Remus_Baltariu

I’m not sure I understand your use case. you don’t need to create a new instance just for the sake of having two. Each variant should have something different from the other. That’s the point of having it.

The issue the others were having, I included, is the fact that you can’t use directly a master to link it somewhere, because the interactive components won’t work.
In your example, if you have states for nav-items, if you put the master in a page, the states for the nav-items won’t work, because they’re inside of a master.

But, as a good practice, as you already know, masters live in one place, and in your design, you’ll use instances (and the states for the nav-items will work).

I hope this helps.
Cheers!


Mikey_Cannon

I think I have the same issue.
I’m using a hover variant for cards.
When the side menu is previewed by itself the hover states are working as interactive components.
When I include the side menu in my main prototype it loads as an overlay.
The components no longer change on hover when loaded in the overlay.

See video for example


Mikey_Cannon

Just started working now, typical 😀


Kenneth_Lindbeck-Dahlstrom

I structure my components and page designs in the same way. I design a large application and in order to separate the outcome from each functional area within the app in each page. To be able to showcase interactions between these different functional areas I create interaction prototypes that reference the page design as component instances in other pages. To be able to manage a cohesive page design on the referenced pages I have to have the pages as components.

It would be great if interactive components could work within parent component instances.


Nate_Green

I think they actually do; my problem was, I was using the main components and the interactions weren’t working in those. If I use instances it works fine.


Carlos_Gasca

i want to chieve the same thing… how do you make it work?


Mikey_Cannon

Sorry for the delay, I didn’t do anything different it just started working again.
In the main screen, clicking a button will introduce the side panel as an overlay.
That frame containing the side panel has those cards setup in prototype so that on hover the component changes the state from default to hover.


Carlos_Gasca

@Mikey_Cannon this is strange. i tryes a simmilar scenario, nesting the interactive compoenent inside an overlay and it didnt work for me. i wonder what is the condition to make it work.


Andrey_rus

Hey everyone! I hope I’m on the right thread. I’m trying to make an interactive component work, but it doesn’t work as it’s supposed to.

The problem is when I choose the change type to any other (f.i. open overlay), it loses the connection to any variant of the component (or the connected object of the variant). I’ve tried both a component with text and a rectangle and a component of two framed variants (for AL purposes). Same problem in both cases.

What am I doing wrong? The Figma desktop app says I’m using the latest version of the app, no updates are available.


tank666

@Andrey_rus, in your video, I didn’t notice the “Change to” action. This means that interactive components are not available to you. Have you applied to participate in beta testing?


Andrey_rus

I thought those are in the box with the yearly subscription already, haha. I found the form for beta testing sign-up. Thanks for giving me a direction!


Cindy2
  • October 18, 2021

Not sure if anyone needs a resolution but I found if my overlay was part of the interactive component, it would not work. Instead, my overlay had to be a separate frame that was not an interactive component. I simply detached my overlays as components then it worked. Not ideal but that was my workaround. Refer to this video: Screen Recording 2021-10-18...


Axel1
  • October 20, 2021

Hi Cindy2,

thanks for this solution which is very helpful. However, I’m not sure if I fully understand. I see that the overlays have a hover state animation. That means that the Overlays are interactive components themselves, isn’t it?


Cindy2
  • October 20, 2021

Hi Axel1, No, technically, they are not considered as an “interactive component” as the overlays are not “Components” and they are just Auto Layout elements floating on the side. They are not a variable. I originally had them as part of the Variable, however this didn’t work so I had to (A) Separate the variables into separate Components, then (B) Ungroup/detach the Variable to create them floating overlays.

So basically, whatever your overlay needs to be, it can’t be part of a variable in the component, nor can it be a Component itself. Hope this makes sense.


Martin_Kulhanek

I had sort of similar problem. My case was that I created component interactions with prototype opened. I needed to close and load the prototype again (not just pressing R in prototype) to get interactive components working.


Miki_UX

@Cindy2 - Good workaround. Another hiccup though is that if the component was used in other pages, the overlay doesn’t work. It works only if they’re in the same page unfortunately. Have you experienced this?


Cindy2
  • April 21, 2022

Hmmm, I can’t recall as this project has now been put to bed, but, if I had to guess, it looks like the overlays cannot be components, and that you have to detach them for it to work. That’s probably not much help though but sometimes I found starting over again seems to work.


Pascal29992

Hello,
Pretty much the same issue as @kdeebee here.

CONFIGURATION

So I make dropdown menus, ie language selector, where every list item is an instance of the same interactive component to manage a hover state.
Whereas using overlay or switching with variants, this works great !

Then I gathered all these menu elements into the dropdown menu.

For the configuration of the animation of the dropmenu, I use overlay from my frame, because I need the overlay feature that is, if I click anywhere else on my frame, it closes the menu.

*** ISSUE ***

But I also want the menu to deal the active element on the top of it.
Then, if I switch the language, I want the chosen language to appear on top.
So I taken into account all the UX configurations here on my menu element.

ImgBB

So far, so good.

But then, I noticed that the overlay wouldn’t take into account the different variants of my menu!

I can switch from “Français” to “English” the first time.
But when clicking to the active element “English”, it does not display the menu, instead it replaces with the word “Français”, because of the overlay.

RECAP

So basically, I’m left with 2 choices:

  1. As shown in first video, use overlay, so that I’m able to close the dropdown menu when clicking outside, which is the UX interaction I want. But then, it doesn’t take properly into account the active element.

  2. Just use the component into the frame without the overlay, and then the active element works well. But if I open the dropdown menu, I absolutely need to close it beore being able to interact with the rest of my frame.
    See second video here: Loom | Free Screen & Video Recording Software

Should I have done this differently to have the best of both worlds?
Thank you very much!


Pascal29992

Menu element component:

ImgBB

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings