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.

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.

This would be a great feature enhancement to auto layout.

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

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.

@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.

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

This is so annoying 😦

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?

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

Agreed, I find myself often adding nested auto-layouts to achieve this which feels very much hacked.

Personally I would prefer this idea be disabled by default. I would nest different auto-layouts so I do not confuse myself and my devs.

Agreed on the original post. The way XD implemented variable spacing in “stacks” (layouts in Figma) is awesome and super handy. I end up using it for entire design layouts so I can edit content and other things that may change heights so the design fidelity stays intact and can flow like HTML. Figma has some great features and additional things XD does not have but this is one feature I miss.

Definitely a must-have for auto-layout. I always see this use-case appear in every project I do inside Figma.

As mentioned - i miss this from XD. Please add this to Figma!

Seems like they can easily now add this with the new updates to Auto layout. You can now select the spacing in the physical design and change the value. If they would allow this for different spacing between individual elements this would solve these problems.

Yes please!

I just wanted to add my voice to those who feel they would benefit from this feature. With so many parallels between Figma features and front-end development, the “nested auto-layout” approach seems counterintuitive and adds unnecessary complexity to design files to achieve the effect. I’ve also voted for this at the top. 😇

I don’t like this feature request. It would be an open door to inconsistency. Let me explain why:

From a design perspective, you use different spacings to help users identify groups of elements. This means that your nesting groups are relevant for hierarchy.

If you need less complexity in your layers, it should be because you’re ideating! So it’s up to you to use absolute positioning with no auto layout and using groups. This way you’ll keep organised in your layers for fast editing.

And it’s also not really what you would be supposed to find in code for the same evidence.

Oh yes please! I’m forced to create unnecessary frames inside frames to achieve this. This also makes designs too complex for team collaboration.

Please guys and girls at Figma, make this a priority, we can’t do hi-quality design without this. It would be a godsend.

This is extremely useful for design. You can’t do good design without this. Figma is not just used for prototypes, we use it to make millions of ads and with the auto layout feature we don’t have to arrange individual elements by hand anymore. If you don’t want to use it, fine!

wow, I really envied Figma for all the things that would be a design system great, but we really cant individually edit spacing? Even in code you can place things at the very end with Flex.

Hi, with the new updates in June 2023, is it still possible to do “space between”? i can t find that option anymore. thanks for helping out.

@Shirin_Pfisterer There are 2 ways:

Under auto layout section of design panel

• Hover on gap setting input field >> click on dropdown >> Set it to “Auto”


• Double-click on blue bars (where you can see which alignment option is applied)

AMAZING, thank you!