Wondering: In Figma there is no margins per se, you cannot make an elements with “outside spacing”, how do you see it then?

That’s an excellent question… we add margins to auto-layout.

To add margins in auto-layout, we employ different techniques. One method involves combining two elements using auto-layout and utilizing the space-between property. However, auto-layout blurs the distinction between padding and margins since it ignores the box model, which is a fundamental concept in CSS. If Figma aims to bridge the gap between design and development, it would be wise to incorporate the box model into auto-layout.

That’s interesting one indeed. Collapsing margins are property of the standard box model. As fast as I can see auto layout inherits flex one which does not have any of it. So you can “emulate” element margins either with gap or with internal padding. What’s interesting when you explore auto layout element in dev mode css output to use css gap property indeed.

To a certain degree I am convinced their model works, you can get fairly accurate css output from any good auto layout design.

And it is an open question whether it was I right call. For me it’s fair enough 😉 It works in a predictable manner, rules makes sense, there’s a connection with real code base.

I agree, their model fairly works. This is just a “nice to have”.

It is very disappointing to find out that Figma doesn’t support margin collapse. This is a fundamental property of how typography works on the web and not having this available creates all kinds of problems for us during design and development. I can see that this is something that has been requested repeatedly and I don’t see any answer from Figma about it.

Margin collapse in CSS is a typical behavior which collapses the top and bottom margins of neighboring elements into a single margin. Read more on margin collapse.