Figma Support Forum

Are we limited to only "Change to" interactions?

In cases where variants size does not match, we will probably have some issues with overlay.

While trying to make a simple dropdown component, it does not seen that “Change to” interactions will be enough.
image

image
Even with the common workarounds, detaching the container component and removing auto-layout, there are still situations where multiple components would clash to come in front.

With that in mind comes the question, why it is not possible to use overlay interactions on interactive components?

But why use interactive components for this at all? Don’t use variants, use a simple overlay Icon → Frame.

This dropdown in the specific is used in over 100 screen, without interactive components this interactions would need to be created and maintained in each screen. Isn’t this the kind of situation that interactive components is trying to solve?

Oh yes, that would be nice indeed!

1 Like

I realized something: it’s already possible to achieve this without Interactive Components. Just create a connection from the main component of this icon to the overlay, this connection will be propagate to all instances on the same page.

Thank you for the thought, it definitely helps when it’s not a nested instance with overrides in the container component and if the component is used in only a few pages.

Fortunately in my case, the workaround that reverses the z-index order of the auto-layout using a double 180 trick, worked just fine. This let me preserve the instances in all pages the component is being used and keep the auto-layout.

image
Coincidentally the spacing between icons is the same as the padding in the dropdown. So the previous icons, the arrow right in the image, does not overlap the border of the dropdown. But it is probably a fragile solution, if the auto-layout is recalculated after the swap it will probably break the layout.

Sorry for keeping my hopes too high, and thank you again for your consideration :sweat_smile:

1 Like