Skip to main content
Slava_Bronevitskiy
Active Member
August 19, 2021

Z-index property that is independent from Auto Layout

  • August 19, 2021
  • 54 replies
  • 11265 views

Currently there is a huge limitation in prototyping possibilities because any dropdown menus appear underneath the following element in the autolayout flow.

I can’t remove autolayout because it would break designs across all useage of design system components and we can’t properly demo prototypes. Anchored by the lack of a customizable z-index property.

image

54 replies

ckeramidas
New Participant
December 2, 2022

+1 to this. would love to have an option of layer ordering and auto layout behavior being agnostic from one another (but maybe still self contained within its own component? a literal z-index as it behaves in css might be really really messy). advanced layout > canvas stacking can be handy in specific cases, but for example, if i have a dropdown subcomponent component that can either open upwards, or downwards, or both downwards and upwards at the same time, i cannot apply auto layout to a parent component without either the label above the dropdown or the text below the dropdown appearing in front of the actual dropdown subcomponent, but using absolute positioning for the subcomponent is also problematic, as the parent component will no longer react to different sizing options of my subcomponent.

Kapranov_Anton
December 4, 2022

Снимок экрана 2022-12-05 в 00.46.17
Yep, Z index is vital in case of using auto layout drop-downs

Cuppa_Rainbows
December 7, 2022

Would love this, as well

Josh_Loya
December 11, 2022

I came here looking for ways to make tooltips work inside of an auto-layout frame.

My use case is a tooltip on an element inside of a table. I’ve created the table from nesting auto-layout frames to simulate rows which contain cells. We can now use auto-layout to give the tooltip absolute positioning so it points at the cell; the problem is that the adjacent cells and rows cover up the tooltip.

Joey_Figaro
New Member
January 2, 2023

Having this exact issue right now and its been a struggle. I’m trying to reduce the number of frames I need to chain together a prototype where I have a table that has a button + popover in each row. The first row’s button popover looks great…every row thereafter is broken:

I’ve tried everything I can think of to have z-ordering work as expected and have applied hacks at every place available–the popover component, the button + popover component, within the table…no dice.

I had expected absolute positioning’s z-ordering to work more like in CSS and was surprised when there didn’t seem to be a way to specify the index for an absolute positioned element/component.

Wouter_schreuders
January 12, 2023

This problem needs to be solved by Figma, if they don’t want to go the Z-index route then an possible solution could just be to toggle a “Always on top” setting within the prototyping feature.

Mateus_De_Freitas_Aviani_Belli
April 13, 2023

Quoting Billie Joe:

Are we we are, Are we we are the waiting…

May 15, 2023

without adjustable Z-index, drop downs as table row actions in auto-layout is pretty much not attainable or at least very inconvenient. Absolute positioning might help but will introduce all sort of other nightmares.

Travis12
New Participant
July 13, 2023

At the very least, the ability to reverse the z-index ordering would be helpful. That would probably be a workable solution for most situations, even if it required some hackish nonsense using multiple auto-layout layers.

Edit: I just discovered that the “canvas stacking” feature exists, which does allow you to reverse the order, so at least that option exists.

Alina_Khazanova
September 7, 2023

I have a lot of trouble showing floating elements like tooltips / dropdowns because of this. Dropdown menus are possible to “hack” with tricks like “last on top” in auto layout.
But tooltips that must appear above everything, especially in situations when they’re inside a container that must be clipped, for example, is a nightmare.

We need a Z index option, or at least an option to “display above everything”

Example of tooltip issues attached