I am desperate for any workarounds…

Scott, not sure this will help but you did say “workarounds”, and here are the two primary workarounds I use.

1. 
   

   Some features/actions are available in the right click “contextual menu”, for example to show/hide, lock/unlock, etc. you can right-click (even if you can’t see the details of a row that is overflowing the layers panel).

   
   


2. 
   

   I frequently drag a copy of an element/object out of the layout so it’s not nested, make changes, copy the entire element/object to my clipboard, and then select the original element/object in my primary layout and “Paste to replace”. https://www.screencast.com/t/8p08eRelzWrC (1 min)

   
   

This would help with flow labels. We name them often by a relevant user story and its impossible to read it. Expanding RHS panel would help.

😳😳😳 I honestly thought something was wrong with my Figma setup, I can’t actually believe this “feature is not supported”?

Honestly, this is absolutely mental - I have to expand the layers pane in some cases all the way to the middle of the screen and then back again just to access something. Is this seriously even still up for voting if it is to be implemented, and especially since over a year back??

I would give anything for this. I often go 10+ levels deep using layers within layers. It’s so annoying to have to expand the panel just to see what I’m selecting. It’s especially bad when you have rules turned on. Half of the time when I’m trying to expand the panel, I end up creating a guide by mistake.

+1000… this is crazy you can’t horizontal scroll the layers panel…

Guys here is a quick hack if you are using the web version. Add this piece of CSS through your dev tools and it should reduce the spacing and you should be able to see much much deeper layers:

[class*="object_row--indent--"] {

  margin: 0!important;

  width: 8px;

}

To do this, open the dev tools, in the top right corner, you will see “+” sign, click it.

A new row will appear and in the right side, you will see “inspector-stylesheet” link, click it! Now paste the provided code and it should work.

Hope this works for you like it worked for me.

Made a userscript

I thought this was merely a personal nuisance, but I’m awfully relieved to hear that it bothers other people as much as it bothers me. +100000 to this! I have to imagine that this is an issue even for Figma’s own design team. One of your moderators called this a “feature” in another thread. It is not. It’s an oversight, plain and simple.

Would love to horizontally scroll within the layers panel. I often have to resize the layers panel to see things that are very deeply nested, but even after you get so many layers deep, the layers panel is expanded to as wide as it can possibly go and I still can’t see my layers to lock or hide. A horizontal scroll within this section would fix this!

Would be great to either have the ability to horizontal scroll the layers panel, or be able to stretch the panel further in order to see the layer names and visibility options.

Please!! 🥰 🙏

Awesome, thank you!

1,000% needed! Especially when working on a small screen the left panel can take up half my screen! Figma team, if you need a perfect use case of this working, check out Visual Studio Code, they do it very well.

+1 - Is this feature request being ignored? What is the purpose of this voting then?

+1 / The panel and also the dialog size is way too small. Changing the size would be a key improvement for building and using design systems.

+1 - please add this feature

Having the same issue: Truncation in the right panels in Figma

apparently tags are much more important than this

I have a solution for some workflows for both desktop and web. Namely, this is a decent solution for workflows that open a Figma file and do not reload the page often (I open the page once and leave it open for days, so it works for me). It’s not ideal for workflows that reload the page often because you have to do about 15 seconds of work to enable scrolling, which would be annoying if you had to do it multiple times a day. Script and step-by-step instructions below.

This script will inject styles into the page that will make the layers panel scrollable, and the indentation of children smaller, too. I vouch for this code’s safety, but be smart and read the code yourself. It’s not complicated. And you’re free to tweak to your preference.

const s = document.createElement('style');

s.innerHTML = `




data-testid="layer-row-with-children"],

,data-testid="layer-row"],

,class|='scroll_container--innerScrollContainer']:not(rclass|='object_row--instance--']) {

    /* Make each row take up as much horizontal space as it can. */

    width: 100% !important;

}

}class|=pages_panel--objectPanelContent-] {

    /* this is what enables scrolling (if needed) in both directions */

    overflow: auto;

}

}class*=js-fullscreen-wheel-event-capture]cclass*=objects_panel--scrollContainer]nclass*=objects_panel--scrollContainerWithBorder]hclass*=scroll_container--clipContainer] {

    /* This overrides the inline styles that get added on sidebar resizing. */

    width: 1000px !important;

    position: relative;

}

}class|=object_row--indent-]:not(tclass|=object_row--indent-]:first-of-type) {

    /* This reduces the indentation of nested layers */

    width: 5px;

}

`;

document.head.appendChild(s);



// Additionally, fix the Layers panel label. Prevent overlaying the main area in certain edge cases

const header = document.querySelector("lclass|=pages_panel--objectPanelContent-] nstyle*='translate3d(0px, 0px, 0px)']");

header.style.position = 'absolute';

header.style.transform = 'translate3d(0px, 0px, 0px);';

You can save this script as a Chrome Snippet for (relatively) easy reuse by first opening the Developer Tools (top-right dropdown => Help => Troubleshooting => Toggle Developer Tools), then navigating to the Source panel’s Snippet tool and creating a new snippet with the contents of the script. Click the button to run the snippet whenever you load/reload your Figma tab, then you’re free to close the dev tools.

It’s not cosmetically ideal, but it is more functional and enables scrolling! Notable limitations:

• The “1000px” width is hardcoded, and there’s no way to avoid it without extensive modifications that I don’t have time for. This probably creates more horizontal scrolling area than you actually need.


• The top-level entry is supposed to be a static section header visible at all times, but this code makes it only visible when scrolled to the very top. Nobody cares about a static header that does nothing, so I didn’t bother to search for a fix.

(Final notes for developers: the Figma code is horrendous. Instead of letting the browser’s own layout engine place elements, they make everything absolutely positioned and use css transforms to translate the rows up and down. I can’t imagine the nightmare it must be to maintain this.)

(If you’re using Figma on the web, you can use TamperMonkey or similar to automatically run this code on every figma.com page. If, like me, you use the desktop app, you unfortunately will not have that luxury).

The specific issue that brought me here is that the values of my variant properties are cut off when displayed in a dropdown.

just get it on openuserjs

It would be nice to have these couple of features added:

1. Horizontal Scroll in layers panel: When there are a lot of nested layers, it becomes tedious and impossible to hide/unhide them.


2. Bulk Hiding/Unhiding layers: Allowing a user to select multiple layers to hide or unhide them all at once.

2. This feature already exists. Select layers and show/hide them using:
   
   A. Ctrl + Shift + H;
   
   B. Right-click and select Show/Hide from the context menu;
   
   C. Main menu › Object › Show/Hide selection;
   
   D. Write “Show/Hide selection” in Quick Actions.