Skip to main content

Assigning margin values to components

  • August 20, 2021
  • 3 replies
  • 1159 views
George_Yiakoumi

Hi!

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!)

Thanks
George

This topic has been closed for replies.

3 replies

Constantine_Zuev

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.

George_Yiakoumi

Hi Constantine,

Yeah perhaps I haven’t explained it properly but the Shift-A solved my problem!

Thanks
George

A
  • Anonymous
  • 0 replies
  • September 19, 2021

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

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings