So I am building a UI using the Carbon Design System by IBM with the Figma library they provide.
I am doing a mobile layout and there is an accordion with an open and closed state as variants. Obviously the open one has some items inside it and is therefore higher than the closed one.
If I am in the design view and change the state, the accordion opens and autolayout pushes everything below it down.
Once I change into prototype view it is not working at all. It neither pushes down items and even if I put the accordion last, it does not open.
Also if I put the accordion last, then clicking it will show the UI in the prototype view every time you click.
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…
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?
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”.
So what I noticed after now working with this for 2 days:
Everything works, but is very specific
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?
