LAUNCHED: Horizontal scroll the layers panel

Wow, you’ve got a lot of layers… 😱

Oh yes 🤦‍♀️ One inside another…

Or at least give me a tooltip when I hover over a truncated layer name.

very underrated, a must have

and the layer buttons (lock, view) get hidden as well

As the title says there are some files with nested layers going so deep, the indent gets too wide:
Here an example from Microsoft’s Teams UI Kit:

While you can expand the width of the layers panel, in this example I have apparently reached the maximum width possible and some layers are still out of reach.

Preferrably Figma would scroll the layers panel automatically to always have layers in view that are cut off. When I deselect the layer in question, it would scroll back to the very left.

I want to be able to drag the right panel to resize it like I can with the left panel so I can view the full names of my color styles.

Does anyone else experience this? Is anyone using a plugin or workaround to help solve this?

This is also a huge issue for me. We use a lot of library components that are nested and have complex and heavy data UI so there can be a lot of nesting. It’s not always great to keep having to move make the layers panel wider.

@figma Please please provide this (horizontal scroll on layers panel, or tooltip on hovering over layer in panel). It is a real blocker to the use of some files for users.

I’ll add my request here too. This has been asked for over and over again.

I’m working on a project where I’m building a hierarchical menu next to a data table and the way I’m constructing it is by nesting lists within lists in the layer panel. I know it would be possible to componentise the list but at the moment I need the flexibility to just keep it simple. The problem I have is that the indentation in the layers panel quickly makes it wider than the content so you can’t actually see what is going on.

Hopefully the screenshot crop below shows what I mean:

Does anyone know if it’s possible to make the layers panel wider? My workaround at the moment is to work on the lower levels in the list and then paste them back in to the full list.

Hi,

We have color and type libraries set up to align with our development environment meaning we can just have “red” or “body” as a description. It needs to be longer.

However, The right bar containing all our properties has become almost unusable in some circumstances due to it’s hugely constrained width. We can often just see a category title, and not the actual label of the color or type.

With the left layers panel being resizable, it would make sense to provide this same flexibility for designers to better utilise our working space.

Thank you,

Craig

With Autolayout, it’s only gotten worse. They don’t need all that horizontal whitespace.

If Figma is going to “grow up” and be a solid enterprise tool, the UI needs some work and this is a big one that shows no one dog foods complex designs on the Figma team or there is a willful ignorance of solid UX for navigating one’s designs.

I used to make the hierarchy so complex, but then I try to make everything in components, components in components,… (actually not all). It relaxes me so much, I don’t have to care about the detail and the layers panel anymore, now I just edit the main components and it works well, hope it helps you

I was wondering if there’s a way to see the layer hierarchy in Layers panel when the layer nesting level is too high (20+). As shown in the attached screenshot, I can’t really see the name and hierarchy of some layers.

What I tried: I can’t increase the panel’s width further (there seems to be a limit). I can’t horizontally scroll the panel with my trackpad.

I was wondering if we can do something to fix this issue, e.g. by enabling horizontal scrolling on this panel.

(My instinct is that horizontal scrolling might be nontrivial to implement. E.g. calculating the maximum cell width among all the cells inside the list is time consuming; the list may be using infinite scrolling, so the maximum cell width is not a constant)

Thanks!

You can see here, the Layer Panel need a lot of space. I think you should make the indent of childrens shorter.

Complex UI, large team. We don’t always get that luxury!

totally agree. shorter indent for child layers and/or pop-up tooltip of layer name on hover would make this Layers panel way more usable for day to day work.

It would be great to have a horizontal scroll or a way to lock or align right the layer selected since it gets lost, on really complex screen or in nested components the group of layers could get too high, and the further layers inside get lost and doesn’t appear completely on the Layer panel, it would be great to have a way to scroll or view the layer and options ( Lock and hide ) of these layers that get outside of the panel view.

thanks!

Because the text is too long after the control bar is expanded, I cannot see the text behind it, so I must widen the control bar. I want to set a horizontal scroll bar, or see the whole name when the point is hovering.

Figma, please do something about it. We need horizontal scrolling in the layers panel.

Hi,

I’d like to add that the problem is even bigger for developers inspecting designs. For us, the variant names are directly pointing to React property keys. Therefor it is crucial that developers can read the full property name. Right now they’re being truncated after 6-7 characters, which is way too short.

Thx!
Jasper

it seems to me that layers panel become even more restricting, earlier I could extend layer panel as much as I want, now it is cropped, I cannot reach some of the layers… That is terrible User Experience. With auto layout, deep nesting is a must: imagine icon inside form field, that is part of the card of the section of the page with side bar. You have the situation like bellow, where you cannot reach a layer… One scroll bar for horizontal scroll is all we need. To me personally this is something that should be top priority to be fixed

Ditto. Up Vote.