I’ve created an accordion component, something which (quite commonly) is used in an array (let’s say for example an FAQ section with 4 or 5 questions). Unless I’m missing something here my only solution is to drag in the component 5 times (per q&a) and stack them manually above each other in my design… let’s say 8px apart.
I think it would be cool to add a margin-bottom value to a component so that it automatically inherits this ‘snap-to’ when stacking components under each other? Saves us time having to ‘eyeball it’, or ‘nudge it in place’ 1 pixel at a time zoomed in at 800%
Apologies if this is something already supported, I’m new to Figma (but loving it!)
Can you be more specific on what is your current problem?
Right now, my go to way of doing accordion is simply using auto layout. Make your sample section a component with two variations: open and closed. Copy closed one and duplicate enough times to fill your screen. Shift-A and here you go. Make it a component too. Now you can use this accordion instance in your mockups. Override one section to open and type your text. I typically create more sections then necessary in case I need to add stuff later on. Just hide ones you don’t use.
This very same logic can be applied to individual questions in each section. Just make one question a component. Duplicate it few times. Shift-A to auto layout. Hide then in instances when you don’t need them.
