Skip to main content

I searched for the issue I am having and this closed topic seems to be the same problem > Overlays not working with main components?


Here’s my setup.

1 - I have a ‘Sidenav’ component, inside the Sidenav component are instances of ‘Menu item’ component (these instances are Home, Users, Settings, etc)

2 - I have a smaller Frame (not a component) which is just a Submenu list, framed.

3 - From the Sidenav COMPONENT, I select the ‘Users’ menu item instance, and set the Interaction to On mouse enter, Open Overlay, connect to the Frame holding the submenu.

(interaction is Instant, position is Manual and definitely moved into a visible position right next to the trigger item)

4 - The Sidenav component with all of that setup is then inserted into a Page that is the full design, ie the page/app ui now has an instance of the sidebar.

5 - When I run prototype on the Page, no overlays show when I ‘mouse enter’/hover on the trigger item (Users). !

What am I doing wrong here??

Thanks guys

Can you upload the .fig file or post us a link?


It almost sounds like your overlay is positioned outside of the containing frame.

Okay, I’ve discovered what the issue is, as another user identified here > Overlay in Component on Different Page


The problem as stated in my initial post, is occurring because overlays only seem to work if they are created/setup in the same canvas area with the Page/s using the overlay: so, you cannot create an overlay on another master COMPONENTS Page, and then place an instance (that has the overlay interaction) on a different Page.


Unless this has been corrected and I am missing some trick or some skills in Figma, this goes against good file structure of having components organised in Pages SEPERATE from Pages for screens / designs. Any updates?

Hi @KennLucas from what I’ve discovered the issue is because the Overlay is outside the containing ‘Page’… not about the containing frame. That is, I have all master components (buttons, menus, overlays etc) on Page 1 in the file (Page called Components).

Then Page 2 in the file is called Screens, and these screens (frames) are made with instances of the master components. I have added my findings on this problem below.

Oh. Yeah. That is absolutely how overlays work. On the same page always or Figma does not know to what they are supposed to achor. 👍

Reply


Terms & ConditionsCookie settings