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.
what a brilliant way you found, thanks
Wow this fixed a problem I’ve been stuck on all day, thank you!
Haha, gaming the system. Nevertheless, a cool workaround. 🙂
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.
Very grateful. Solves a serious problem with prototyping
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.
You saved my day, thanks!
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. 👍t4: 🙏🏾 👏t4:
Very useful tip ! Thanks a lot !
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!!
FIGMAAAAA DIX THIS NOW HAHAHA please
@Figma_Support @Figma_Admin1 @Figma I know you’re better than this… figma look at the mirror and say “I’m going to fix this now” yes that’s it! come on you CAN DO IT.
