Maybe if we could have a way of changing the z-index would already solve 95% of the problems. Tooltips are almost impossible to implement with auto-layout because they are always getting under other components and there’s no way of fixing it.
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.
I agree, this is annoying and not logical!
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!
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.
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.
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.
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.
I have a trick here. Flip the Auto Layout horizontally/vertically, then flip each individual item back.
Wow this fixed a problem I’ve been stuck on all day, thank you!
Fair enough, does it not make sense to represent the layers in the workspace in the same order? the problem is not the order but the difference of order in which it’s represented in the layers menu and the workspace
Just started working with Figma and I find this quite annoying.
Our application has a side bar with a shadow and a top bar with a title.
The side bar is supposed to cast a shadow on the top bar.
To me, this seems a standard B2B application layout that should be supported - but in Figma I have to choose between either applying the shadow correctly or good automatic resizing.
Ha! I remember having this sort of conversation with developers decade ago while doing macos app. And, oh boy, we debated for weeks.
Coming from Adobe Photoshop experience it seems logical for every designer to see layers in the list arranged by their z-index i.e. topmost on top.
Yet, from from dev standpoint it should be the opposite: fist layer in the list is background, then others in the order they are layered on top of each other.
Each system has its own logic and reasoning. And actually I haven’t thought that “Photoshop” style list is inconvenient in Figma… until I started to use Autolayout a lot. And now I agree, having layers flipped makes a lot more sense. It might be confusing at first, but the list would be logical now.
In Auto Layout, layers are ordered based on their position in the auto layout. This coupling seems unnecessary. In normal frames and groups, layer order (which also determines which layers will overlap others) is independent of the layers’ X/Y coordinates and size, but in Auto Layout, there is no option to change the layer order without also changing the layout.
Usually when I encounter this issue, it’s because I’m trying to pop something from the middle of the list out in front of the others, e.g. a tooltip that’s displayed on hover.
so shadows would cast up the stack? so shadows cast by layers appear on top of layers higher in the stack?
a good analogy for the layer stack is stacking blocks. the first blocks you put down are at the bottom and new blocks go at the top of the stack.
using this framing i have no issues with handling the ordering or layering of the stack.
this would be a welcome improvement to auto-layout. currently it is too rigid and requires either not being used or cheating around, creating a lot of extra work, to have relatively simple effects like described in @Nate_Green’s post.
Thank you. This is a clever work around.
Same for me - i can relate 100%! I just wanted to write about this, and than i found this topic - its really annoying and confusing i must say. Not intuitive at all.
It shouldnt work with any work-arounds or tricks. It should work naturally and intuitive.
Whould be great if figma takes care of it.
Thissss is a must!!! Its just makes more sense please fix this figma!!