LAUNCHED: Horizontal scroll the layers panel

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([class|='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][class*=objects_panel--scrollContainer][class*=objects_panel--scrollContainerWithBorder][class*=scroll_container--clipContainer] {
    /* This overrides the inline styles that get added on sidebar resizing. */
    width: 1000px !important;
    position: relative;
}
[class|=object_row--indent-]:not([class|=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("[class|=pages_panel--objectPanelContent-] [style*='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.)