I’m trying to prototype a menu with several accordion style components (see the screenshot below). Each accordion component can be opened and closed independently from the others so creating an artboard for each state is not a feasible option.
I got to a point where everything is a component, including each individual accordion and they all work fine. However, I can’t find a way for a component to push down the others when expanded / pull them up when collapsed.
It’d be very useful to see how you have set up your file in order to give you the best help.
From the top of my head, I’d say that you could have done one single component with all the potential visual states of the accordion group, the problem I see is that since you allow multiple accordions to be open at the same time, the combinations that can exist are a lot, so that means lots of different potential visual states.
If you are in control of the prototype, either by you demoing it or recording a video, I’d say do only those that allow you to get your point across, remember is a prototype and sometimes there’s no need to make everything functional.
If it’s going to be used in user testing and you need to have all the potential states, then my best advice would be make everything be one single component, and create a screen for every possible combination, but depending on how many accordions you have, that can become lots of work.
The easiest way would be to restrict (even if it’s just for the prototype) the amount of accordions open at the same time to just 1, that would give you massively less screen states to make, if you have 5 accordions, that would be only 6 states, all closed and one for every open accordion.
Hope this helps, maybe other members can give you a different point of view, I’d also would love to know if there’s a easier/faster way to achieve this.
Thanks!
This is exactly what I ended up doing (restricting some of the accordions) as there were endless combinations:)
I think that would be a very useful feature: pushing / pulling objects below when the component above changes size. I do realise it is not easy to implement in the current state (with all artboards in a component having the same size). Maybe further down the line Principle will allow variable sizes for components.
