You can allow items within a Figma Auto Layout frame to overlap by utilizing negative spacing.
Figma's Auto Layout feature automatically manages the spacing between items. While typically used to create gaps, you can achieve overlap by setting a negative value for the space between elements.
Using Negative Spacing for Overlap
The core method for making items overlap in Auto Layout comes directly from adjusting the spacing setting. As stated in the reference, "Negative spacing can be achieved by setting a negative value in the spacing between items." This simple adjustment fundamentally changes how Auto Layout positions subsequent items.
Here's how it works:
- Select the Auto Layout Frame: Choose the frame that has Auto Layout applied.
- Locate Spacing: In the "Auto layout" section of the Properties panel on the right, find the "Spacing between items" field.
- Enter a Negative Value: Click on the spacing value and type in a negative number, for example,
-8,-16, or-24. The larger the negative number, the more the items will overlap.
According to the reference, "This makes the elements overlap". When Auto Layout calculates the position of the next item, instead of adding positive space, it subtracts space, causing the items to render on top of each other.
Managing Stacking Order
When items overlap, their stacking order determines which one appears on top. By default in Figma, items listed lower in the Layers panel (on the left) appear on top of items listed higher.
The reference also mentions, "the stacking order can be changed in the advanced layout settings."
To access advanced Auto Layout settings and potentially control stacking:
- Select the Auto Layout Frame.
- Click the Advanced Settings Icon: In the Auto Layout section of the Properties panel, click the three dots (...) icon to open the advanced settings.
- Adjust Stacking: Within these settings, you can find options related to canvas stacking. By default, it's set to "First on bottom," meaning the item listed first in the layers panel is at the bottom, and subsequent items stack on top. You can change this to "Last on bottom" if needed, or reorder the layers directly in the Layers panel to adjust the default stacking.
Using negative spacing combined with understanding stacking order gives you precise control over overlapping elements within Auto Layout, perfect for creating complex compositions like stacked cards, layered icons, or overlapping avatars.
| Setting | Action | Result | Where to Find |
|---|---|---|---|
| Spacing between items | Set to a negative value | Creates item overlap | Auto Layout panel |
| Advanced Layout Settings | Canvas Stacking | Controls which item is on top | Auto Layout (...) icon |
