Skip to main content

Assigning margin values to components

  • August 20, 2021
  • 3 replies
  • 1160 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 settingsAccessibility statement

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