Overlays not working with main components?

Interactive Components Questions
1

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

1 Like
2

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?

3

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

4

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?

5

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

1 Like
6

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