Skip to main content

CleanShot 2024-02-27 at 16.11.24@2x


As shown in the screenshot above, this master component has 4 different states - requests of 4 different dollar amounts can be sent depending on the user’s selection; additionally, for each of these 4 different states, the X button in the top right corner is set to on click > close overlay (see below). Other than that, as you can see, when clicking on the respective options, this component is supposed to switch to a specific state with a certain option highlighted; all state switching interactions are triggered by on click, the same as the close overlay of the X button in the top right corner.

CleanShot 2024-02-27 at 16.15.46@2x


Now, I have published this file and added an instance of this “request fund” component in another file. I set this “request fund” instance to be an overlay that shows up when one element in a frame is clicked on. After the overlay is displayed as I click on the trigger element, I found that for this “request fund” instance, the switching between states with different options highlighted works perfectly fine, however, the on click > close overlay interaction I added to the master component does not work; in fact, this interaction doesn’t even exist in the instance (see below).

CleanShot 2024-02-27 at 16.24.19@2x


CleanShot 2024-02-27 at 16.25.33@2x


On the contrary, other on click interactions that the instance inherited from the master component are totally there, as intended (see below)

CleanShot 2024-02-27 at 16.28.32@2x


What am I doing wrong?

I haven’t been able to get the component to work as I wanted it, but there is an alternative way to achieve the expected prototype behavior.

Using the “request funds” modal in my previous post as an example.



  1. The master component has 4 variants. Remove all interactions from the master component.

  2. Get 1 instance of each variant in the working file (aka not the file where the master component lives).

  3. Build the intended interactions in the working file on the instances. In my case, clicking any 1 of the 3 not-selected dollar amount items should switch selection to the options that were clicked on (i.e. by default, $15 is selected; then when I click on $30, $30 should become selected, and $15 loses the selection.) and we will use on click - swap overlay for that. And of course, all the close buttons in the top right corner should have the on click - close overlay interaction, because regardless of which instance is being displayed, the close button should make it go away.

Reply


Terms & ConditionsCookie settings