Overlays not working with main components?

Hi there,

Just wondering, if overlays are not supported for main components.

Here’s an example:

I have a frame with some content that triggers a manually positioned overlay. Everything works fine. As soon as I convert that frame into a component, the overlay is not triggered anymore.

Is that the expected behavior or a bug? I could create a variant to simulate the overlay, but that clutters my component variant set.

I could also add the overlay interaction to the instances (which works), but then I need to add the interaction over and over again to all instances.

Is there another workaround or am I missing something?

The goal is to trigger an overlay in the main component. That behavior shall be inherited in all instances.

Thanks and best,
Nils

I can’t replicate this issue. Can you explain the steps you’ve taken to reproduce this, or share a design that demonstrates your issue?

Hi Avokadomos, Thanks for your reply!

I think I found an explanation: When having a component with interactions (e.g. open an overlay) and creating variants, those variants do not inherit the interactions of the initial component, right? So I have to define interactions from scratch for each individual variant.

If so, it shouldn’t be a big issue for me. I just didn’t know that this is the default behavior.

Best,
Nils

But wait… There’s more. Here are my steps:

  1. Create frame „base“ (fill #ccc)

  2. Create 2nd frame „overlay“ (smaller, fill #222)

  3. Add interaction from base to overlay: on click > open overlay > navigate to overlay

  4. Convert „base“ into a component

  5. Hit „play“ on “base” component => interaction works, overlay shows up on click

  6. Use an instance of that component in another new and larger frame „layout“

  7. Hit play => interaction doesn’t work on instance of „base“

I guess this is the normal behavior and component instances just cannot inherit that overlay interaction, right?

Instances should inherit interactions. Here’s a demo of an interaction being applied to the main component, and then inherited by the instance.

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