Skip to main content
Israr_Choudhry
February 26, 2021

First on top layer order in Auto-Layout

  • February 26, 2021
  • 80 replies
  • 22893 views

Currently auto layout arranges layers from bottom up, i.e. the lower most layer in the layers list appears on top of every other layer on the workspace.

This creates two problems

1. Confusion
There’s a clear confusion of the order of layers shown in the layers menu and the representation in the workspace. This requires a bit of getting used to

2. Effects like drop shadow don’t work like they are expected to
Applying a drop shadow to layer 1 does not cast the shadow on layer 2

And applying a drop shadow to layer 2 casts a shadow over the top layer 1

The Order in the layer menu should be reversed.
Does anybody else see merit in this?

Update:
The same logic applies to horizontal auto-layouts.
The right most element is on top whereas the left most element should be on top majorly because we scan left to right hence the element on the lleft most extremity is to be scanned first.

for example:
Say we require a stack of layers to be shown which shuffles on drag

It would make more sense to bring layer1 above layer2 above layer3

80 replies

Roman_Gorshkov
November 18, 2021

i think, it have to exist an ability to set checkbox “absolute position” in autolayout with variants “over”, “behind”. now, i use special 1px-height hack frame and set position of particular details in out of that borders.

Yury_Kochubey_Bitrix24
November 18, 2021

I agree, this is annoying and not logical!

Evgeny_Eryomin
November 19, 2021

Inverted order really confused me when I started to use autolayout in Figma. I don’t see any reason to use reverse in this topic, especially with issues about shadows etc. I thought that there was some explanation for this behavior but haven’t see yet. May be Figma will give us discription of this decision. Vote for direct order!

Jessica_Kress1
November 23, 2021

100% agree. Interactive components for dropdowns would be so powerful if I could simply reverse the layering. Instead I can’t use my dropdowns with autolayout.

Roger_Junior
November 25, 2021

There’s this feature request of changing/forcing the z-index of an element that probably would fix this problem Feature request: Z-index property that is independent from autolayout - #11 by Roger_Junior

I would highly suggest you guys share your experiences and vote there so we can make the Figma team aware of this issue.

Stefan_Abrahamsen
November 25, 2021

Since I haven’t seen this mentioned, I just want to say that it is possible to reverse the layering in an autolayout. What you do is that you flip the autolayout frame, then flip the contents. After that you probably want the layer ordered reversed, and there are plugins that can help you with that.

So it is possible but yea, it’s not obvious.

I wasn’t aware of how autolayout children casts shadow. IMHO, children of an autolayout frame shouldn’t cast shadows on it’s siblings. To me it makes sense that all children have the same z-index. Because if the designer is given a tool to control X, but using it actually controls X+Y, then the tool is broken.

Bjorn_Jarnankar
New Member
December 2, 2021

We all know all the upsides with auto layout when working with a complex design system. A change in height to a master component rendering position changes for all instances used throughout different design documents. In short, auto layouted screens is a must!

However today it’s impossible to work with drop shadows in your design since auto layout prevents you from deciding the z-index of each component/object. In my, ugly but hopefully understandable, example you can see that as soon as I convert my design into auto layout the first item in the frame get’s the lowest z-index. If anything it should be the other way around so objects can cast shadows on things below them. Just a simple reverse order would satisfy my own needs while I assume some would insist on making it possible to change the z-order manually.

Either way this is more a deal breaker working with Figma. It’s far to cumbersome to have separate documentation for developers regarding shadows and skipping auto layouts will instead break your design as soon as master components have a change in height (or you simply edit the contents rendering a different height).

Please please make this a priority fix.

khoianha10
December 5, 2021


I have a trick here. Flip the Auto Layout horizontally/vertically, then flip each individual item back.

COSCO_Editor_2
December 6, 2021

what a brilliant way you found, thanks

Isabel_Edwards
December 7, 2021

Wow this fixed a problem I’ve been stuck on all day, thank you!