Component with different height variants not working in prototype

Okay, seems like you can’t have any interactions in nested components. When I remove all the other interactions of children, like changing color on hover, it works.

Why this limitation?

UPDATE: Okay, even removing child interactions doesn’t always work. Got the first one to work. Then tried to do another and same things. Doesn’t work at all. If it only works under very specific circumstances and you don’t tell us what those are, then it might as well be broken…

Could you share a link to an example file?

Sure, here is a copy with just the relevant parts. https://www.figma.com/file/mSh7fBYKiQ9EirIVlbeNVE/Interactive-Component-Height-Bug?node-id=0%3A1

I tried actually to do it again and at the moment I can’t get either the normal accordion or the nested one to work in prototype view.

Ok, seems like as soon as any child component has some interaction tied to it, it doesn’t work at all. If you remove all child component interactions, like say, a hover, then it works.

If we could get nestable interactive components, that would be great. Otherwise they are not much use beyond some very simple stuff like checkboxes. But not for prototyping complex UIs. Also for nested interactions you would need to be able to adjust the hotspots for the interactions, which does not seem possible.

Okay, I give up. Seems like interactive components that change size are just broken (again) at the moment.

The design behaves like it should in the design view, but as soon as it is a prototype (and translated to HTML I guess), it just plain does not work as expected.

If I use the accordion that can open up and I have many instances of the same thing under each other and go to prototype, then sometimes just one of them does one of the things (open or close), but not both. How can the behavior be different, when they are all the same instances?

Thanks for the link to the example.

So, this happens because on hover, the “_Accordion item” component changes, which also has an “On click” trigger applied to it. That is, there are already two “On click” triggers (one on the top level of the component, one on a nested instance) on the same object. I fixed your “Accordion Advanced” component like this: cut the interaction from the top level of the component and pasted it into a nested instance. Check out the file in your link above.

Also make sure the “Transform Accordion” component is set up correctly so that it can grow vertically.

Okay, thank you. I think I finally “got” it. All interactions that have the same lets say “hotspot area” need to be on the same layer and can’t be on nested elements. If you want to toggle back and forth they also need to be on the same element for both states. Otherwise it seems to get confused.

Also all heights of all containers needs to be set to “hug”.

Thanks for your help!

So what I noticed after now working with this for 2 days:

1. Everything works, but is very specific
2. The resizing constantly resetting itself to “fixed” from “Hug” and “Fill container” is what makes it so time consuming. I wish there was a way to prevent it to going back to fixed. Like, let me choose to have it fixed! Once I set it to hug or fill, why do I want it to automatically go back to fixed?

I will make a separate feature request for that.

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