Skip to main content

First on top layer order in Auto-Layout

  • February 26, 2021
  • 76 replies
  • 21207 views

Show first post

76 replies

Stefan_Abrahamsen

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

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

what a brilliant way you found, thanks


Isabel_Edwards

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


Zlatko
  • Active Member
  • December 8, 2021

Haha, gaming the system. Nevertheless, a cool workaround. 🙂


Evgeny_Eryomin

Amazing, thanks


Alexander_Syniuk

You are the Genius!


Israr_Choudhry

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


Niklas
  • December 25, 2021

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.


Constantine_Zuev

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.


Roy_Russo
  • February 1, 2022

Very grateful. Solves a serious problem with prototyping


Nate_Green
  • February 9, 2022

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.


SmartDocs
  • February 10, 2022

Excellent solution


Marion_Desvilettes

You saved my day, thanks!


John_Wolfe
  • February 23, 2022

This is nuts.


  • February 24, 2022

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.


  • February 24, 2022

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.


Nathan_Hall
  • New Member
  • March 9, 2022

Thank you. This is a clever work around. 👍t4: 🙏🏾 👏t4:


Sebastien_Cazalet

Very useful tip ! Thanks a lot !


Yariv
  • New Member
  • April 3, 2022

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.


Clarck
  • April 15, 2022

Thissss is a must!!! Its just makes more sense please fix this figma!!


Clarck
  • April 15, 2022

FIGMAAAAA DIX THIS NOW HAHAHA please


Clarck
  • April 15, 2022

@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.


Evgeny_Eryomin

Thanx Figma!