Skip to main content
Alex_Prime
New Participant
January 28, 2021

Edit the space between items (paddings) in auto layout independently

  • January 28, 2021
  • 38 replies
  • 40831 views

Really don`t like the approach that I need to create a lot of additional auto-layouts just to have different spacing between components. I guess Adobe XD have a more convenient way to do it.

spacing

38 replies

Braden_Ford
May 7, 2021

Auto layout is a great feature that saves a lot of time and the Space Between Items field allows you to quickly update spacing. However, I often work with stacked layouts in which the spaces between certain items are not all equal. In this case, the only option is to create another nested frame and another auto layout. This can result in many nested auto layout frames which becomes difficult to manage. For example, I often need to create a whole new frame and auto layout to accommodate a header which sites above a set of equality spaced cards in a stacked view.

It would be great if we could edit the space between items in an auto layout independently. Adobe XD handles this by allowing the user to click on the space between elements and drag up or down to adjust the amount of space. Then the user can reset to equal spacing by entering a value in the Space Between Items field.

Ramses_Moreno
May 7, 2021

That’s only of the few things I miss from Adobe XD. Would be great if Figma had this feature.

I would add the possibility to enter negative spaces, so we can simulate negative margins used in CSS.

Grant_Novey
May 14, 2021

This would be a great feature enhancement to auto layout.

Phil_Larsen
Active Member
May 17, 2021

Would also be great if you could use fractional units too, not just pixels.

CSS-Tricks – 12 Jun 17
Pawel_Sysiak
June 29, 2021

I want to use auto layout with vertical direction and have all components with horizontal padding of 40 and a few components with 0 padding. Additionally, I want to be able to scale the parent frame horizontally (different device sizes) – in a way so the components preserve their paddings (0 and 40). I don’t see an easy way to do it. Why constraints are not available to children frames of auto-layout. Am I missing anything?

P.S. The solution to this would be to do everything with 0 padding and add 40 paddings to the majority of component. This creates a lot of complexity when dealing with layers. I would love to find an easier solution.

Pawel_Sysiak
June 29, 2021

@tank666 You merged my issue with this discussion. However, I would love to suggest a different solution.

In the case of the vertical auto-layout I would love to be able to set a fixed width of child element and also be able to add “left and right” constraint. This way the child element would scale horizontally with the parent element.

tank666
June 29, 2021

@Pawel_Sysiak, I opened your topic. Thanks for the clarifications.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
Yannic
New Participant
July 15, 2021

This is so annoying 😦

Maratopia_Designers
December 3, 2021

This is a must! Such a good feature in XD shame it’s not available in Figma.

Does anybody know of a workaround? Is it literally to make multiple frames?

S_Paske
December 17, 2021

Any updates if figma will consider adding this feature? I feel like 75% of stacked elements use different amounts of space between objects.