Member-only story
Figma quick trick: negative spacing in auto layout
Hello, fellow Figma enjoyers.
Today I’m going to tell you about another trick that everyone seems to know, except me. But this time I will show you 2 ways to do the trick, so grab a 2 for 1 deal!
Quick update — in the latest Figma release, they have finally added the support of the negative spacing, along with a ton of other awesome improvements 😻
Have you ever found yourself in a situation where you would need an array of overlapping UI elements? Perhaps, to show the profile pictures in a group chat or something? Setting a negative spacing value for the Auto layout would be really handy in a case like this. Unfortunately, Figma does not support this at the time that I’m writing this article.
But fear not, there are a few workarounds for this sort of stuff.
What’s the Space Between?
The first trick was originally demonstrated by the almighty Rogie King.
To achieve the desired effect, just follow these simple steps:
- in Auto layout settings, click the alignment and padding icon
- select the Space between option
- resize the frame to your liking
- enjoy your overlapping elements!
This does exactly what you need, right? But here is a small trade-off to this method — you can not have “Space Between” and the “Hug Contents” enabled at the same time. This means that there is no way to make the frame automatically expand as you add more items inside. The auto layout will simply squeeze them all to fit inside the frame.
Another disadvantage of this method is that it’s not very obvious how to set a specific value of the negative spacing. You would have to do some insane third-grade level of math. This was enough of an issue for me to look for an alternative.
