Skip to main content
Slava_Bronevitskiy
Active Member
Aug 19, 2021 3:10 PM UTC

Z-index property that is independent from Auto Layout

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
Dec 2, 2022 5:51 PM UTC

+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
Dec 4, 2022 9:47 PM UTC

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

Cuppa_Rainbows
Dec 7, 2022 3:50 PM UTC

Would love this, as well

Josh_Loya
Dec 11, 2022 8:26 PM UTC

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
Jan 2, 2023 10:10 PM UTC

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
Jan 12, 2023 2:55 PM UTC

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
Apr 13, 2023 6:02 PM UTC

Quoting Billie Joe:

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

May 15, 2023 12:34 PM UTC

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
Jul 13, 2023 9:07 PM UTC

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
Sep 7, 2023 11:43 AM UTC

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