Skip to main content

Hi, I’m Betz, i have the same issue that occurred to “Victor_Emmanuel_Giron_Solarte”: when i preview my file, every single component works, but just the first i clic on, the others get disabled. All the components works if i start clicking on them.


Example:

I have create an heart icon, when you clic on it, it becomes dark, when you click again, it returns white.

Schermata 2021-07-24 alle 16.11.14


Then I have anoter nested component, it’s the typical colour bar, in dots, that changes when you clic on every colors, selecting it.

Schermata 2021-07-24 alle 16.09.51


As you can see, every dot is a component and all the six are inside a component with also a text that changes the name of the color, depending where you clic.

The interaction in every component is: on tap - open overlay - “name of the new component”. Noting close, everything opens on top of the others. All the Components are inside the same page, outside the Artboard.


In this case, if i clic on the heart it works and i can then click on the color bar and it works.

But after clicking on the color bar, the heart does not work anymore.


Let me know how can i solve this issue please. thanks a lot

Hi @betz, since the overlays open on top of everything, this blocks the underlying elements. Before interacting, you need to close the overlay.


Request beta access to Interactive Components so you can create interactions without opening overlays: ▶️ Sign up for the Interactive Components beta →.

Hi [tank666], thanks for your quick reply.

Do I need to always close an “open overlay” element or a “swap overlay” element, in order to have all the other elements’s interactions working, correct?


But in this case I need to keep the “open overlay” element (the color selected) as it has been clicked, inside the artboard; while keeping the other elements’s interactions.

In addition, the “overlay” appears over the “menu top” fixed bar.


Is there a solution for a color bar like this? or the only solution is to request the beta access?

Schermata 2021-07-28 alle 14.12.29


Thank you very much for your help.

When opening an overlay, you have no way to interact with other elements that are overlapped until you close that overlay. Yes, the overlay overlapping everything, even the fixed elements. Therefore, you need to use not overlays, but duplicates of the same screen with changes and the “Navigate to” action. Thus, you need to create as many screens as different combinations. For example, screens:



  1. When nothing is selected;

  2. Only black is selected;

  3. Selected black color and size “S”;

  4. Black color and size “M”;

  5. Etc. for every color and size.


Your file will turn out to be very huge because of these almost identical screens.


Using interactive components, you will be left almost exactly as in your screenshot №3 from the first post, only without overlays and combined into a variants. This way you can interact with each element and have one screen.


Ok I have uderstood, i will request beta access to Interactive Components so I can create interactions without opening overlays.


thanks a lot for your preciuos, clear and quick help! 😄

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

Terms & ConditionsCookie settings