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

Antonio_Sarcevic
August 23, 2021

The current order is super confusing. The first item in a list of item should be at the top not the bottom. Thats how it works by default in HTML with CSS Flex too. Maybe allow an option for this if there is legitimate reason for the reversed order but IMO it should work how Flex works by default.

Phil_Larsen
Active Member
September 1, 2021

I’ve found myself wanting the layer order to be reversed on Auto Layout. With the ability to change the order in a flexbox we should probably be able to do the same thing in Auto Layout.

I was creating a prototype with a menu included inside a component but because the order is reversed, it shows up behind all the following content. I had to change all the autolayouts to normal frames and reorder all the layers in order for it to work properly.

What occurred:

The result I wanted:

Deus_Ex_Pixel
September 1, 2021

I had a very similar issue as @Phil_Larsen but there are probably cases in which having the top to bottom order might be useful so it’d be great if there was just an auto layout setting that inverts the order so you can pick whatever suits the application best

Jeremy_Parmenter
September 14, 2021

I agree, it’s super confusing!

I get why it’s the case but it’s the reason I never use the layers panel apart from re-naming things, I’ve recently started using the CTRL + R shortcut so I use it directly even less now.

I think an option to “reverse” the order in auto-layout settings (similar to flexbox) could be backwards-compatible.

lucpotagemyscript
November 5, 2021

It would be nice to be able to toggle the arrows so that it changes the direction of the stack. Several times, some components appear below others because they are not correctly ordered in the sidebar. I had to remove auto layout and switch order in the sidebar…

twitter.com

Another approach would be to offer a z-index property.

Omar_Chelbat
November 12, 2021

I’m having the exact same issue.

Drop-down menu’s & other popup/hover elements are hidden behind the item below them … it’s nuts that Figma, a UX tool, has such terrible UX.

The reasons listed in the above twitter link are all technical reasons … not UX reasons. Adobe XD gives users free range of how they want to organize items while using auto-layout - we have different preferences but more importantly we have different use cases.

Arjen_Sol
November 15, 2021

Workaround:

  1. Select your auto-layout frame or component.
  2. Click and drag (resize function) the bottom part of your selection over the top part as if you are manually flipping it horizontally. The layer hierarchy is now the same as the auto-layout shown on the canvas.
  3. Re-arrange the layers hierarchy to your liking.
Roman_Gorshkov
November 18, 2021

it’s real problem and not convenient for extended component behaviour, like fields with editing popups.

Konstantin_Miasnikov
November 18, 2021

I can relate! 100%

Roger_Junior
November 18, 2021

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.