It’s not just to be able to see the layer name, it’s also to show/hide/lock the layer that isn’t possible currently.

Its so annoying when i am not able to see the complete layer name and it would be great if there is a horizontal scroll in the layer panel

Hi there, dear Figma Community!

Sometimes I work long hours with Figma without a large monitor. I also try my best to organize the layers as I believe the development team will create. Additionally, I use sections to organize the files while building the handoff. In the end, I find myself with a “depth” of layers that is too large, requiring me to expand and close the left sidebar several times a day.

A suggestion that would make my day would be to allow Shift+Scroll to navigate horizontally.

Is there any solution known beforehand by someone? Thank you in advance! 😊

Hi there,

Thank you for sharing your idea! We greatly value your feedback, and we would like to gauge the reaction of other members in the community. We may consider it for future enhancements!

Thanks,

Toku

I recommend going onto the Figma website version and hitting ctrl+shift+c while hovering on the top bar (so Figma won’t act like it was a shortcut). This opens up the dev tools that you can use to select the sidebar items, go into their class styles, and do whatever.

@Michael_Kalus your solution has literally saved me for well over a year. I come here pretty much every couple of weeks or so, copy and paste your script (you legend!). However recently this isn’t working anymore. Any idea why? Perhaps a Figma update? If you could help that would be very appreciated. I am totally stuck with my work because I can’t see the layers I need to select…

To select deeply nested layers, it is necessary to expand the panel far to the right. Please add the ability to horizontally scroll. It looks like users have been asking for this very basic functionality for four years.

Right, in dev mode it works. But when designing it would be so useful to be able to read the variant names at least.

Weird that someone requested this back in Feb 2021, And Figma is still not looking into it!

@Michael_Kalus this is no longer working unfortunately… I literally depended on this (thank you so much for sharing it!), any idea why / how to fix it?

After reaching out to Figma support recently it appears that this is a bug which is under active investigation. This is what their support team replied:

"After some digging, it appears there’s a related bug that our Engineering team is actively investigating. I went ahead and added your encounter with this issue to our ongoing bug report. While I can’t guarantee an ETA on a fix, I can bubble this up with our engineering team for some more visibility at the very least.

We’re generally not able to hold conversations open through long bug investigations as these can take some time, so you may see this conversation is closed. This conversation status isn’t an indication of the ongoing bug investigation. If you see this happen and have any follow-up questions or want to check on progress, just reply here and the conversation will re-open so we can take a look."

I would suggest to as many of us as possible to directly raise this issue with support, so that they can “bubble it up” to engineering in order to speeding up the investigation process.

This is really crazy, why there is max width for side panel. It should be completely on user how huge area wants to have. i cant see layer names even if i have huuuge monitor. Software for UX and cant handle this annoying UX problem

I use the home page left sidebar to organize files and access them quickly (and it’s very helpful for that). However, I think it would be even better with a few feature additions:

• I treat my sidebar lists as personal folders that improve my efficiency, whereas my team as a whole has its own system of organization for files in projects to ensure that all stakeholders can navigate easily to the right files. I would love to be able to click into a sidebar list and view its contents in full page mode in the same way that you can click into projects and view their contents. Pinning could function in the same way it does in projects, but pinned items could also be displayed as pins at the top of a list in the sidebar. This would allow me to treat a sidebar list as a project without impacting the organization system that others on my team see and use.


• It would also be very helpful to have the ability to sort (in both the sidebar view and the full view detailed above) sidebar contents by recency so the ones I’m currently opening the most frequently and recently could be bumped up to the top of the list organically without requiring manual reorganization. Obviously, the current behavior should also be retained as a custom order option.

This is actually becoming a huge issue for me (and other team members) too. I’ve expanded the left side layers panel as much as Figma will allow, but nested layers still don’t have enough space to show up.

I find it really discouraging that this feature was requested in 2021 and in 2024 nothing has been done about it. At least the left panel is expandable but the right panel is not and it truncates values and makes using Figma harder. Please make the right panel’s width expandable, too!

Your community support agents have said over 3 years ago that it’s “on the radar”. There are many topics about it created in this forum throughout the years with unanimous agreement that this problem obviously shouldn’t exist. This is clearly a major usability issue affecting thousands of users, which can’t be complicated to fix. Some users are copying some small CSS snippets into the console as a workaround but most are unable to find that workaround. Most companies would have addressed it quickly. Why do you guys continue to ignore this? That years later you’re still “gauging reactions and may consider it in the future” is baffling and insane. @Figma_Moderation

I feel like this is a really, really, stupid oversite. Why is this still a thing? Figma used to be so good at incorporating thoughtful usability into their product. Why are we (the community) having to tell Figma through “votes” that this needs to be fixed? Quit f-ing around and fix this instead of stroking some manager’s ego by shoving variables out the door!! Overflow-x: scroll this thing already!

Oh well…

it’s 2024 and Figma releases custom cursors instead of meaningful fixes and features. #priorities

It got on my nerves so much that I started a new attempt to find a solution. As I couldn’t find where the application sets the max-width limit of 500px, I thought well let’s introduce just a button that solves that problem.

Increase Layers Panel Width Tool

The new script adds a button to the left toolbar that sets the whole left sidebar to a width of 1500px. That should give anyone enooooough space (fingers crossed) to work with deeply nested components.

The button can be toggled on and off. The maximized sidebar cannot be adjusted to any width, so we have the following options: default (resize to any width between 225px and 500px) or custom (make it finally wider!!! at 1500px).

Demo

How to install/use

Userscript

• If you use Figma in the browser, install the Tampermonkey browser addon.


• Then install my user script: Figma: Increase Layers Panel Width Tool

Figma App

1. Open the dev tools in Figma with cmd+opt+i (on macOS)


2. Switch to “Console” tab.


3. If you are doing this for the first time, the console may not allow pasting due to security reasons. You get a warning message in the console. Just type “allow pasting” and hit return.


4. Paste the following code and hit return.

Pro-tip: You don’t want to copy and paste the script for every file over and over again? Within the console you can navigate through your history with the up and down arrow keys. Hit up and return and you are done.

Updated: 18.04.2024

(function () {

    'use strict';

 

    // set left toolbar

    const toolbar = document.querySelector('nclass*="toolbar_view--buttonGroup--"]wclass*="toolbar_view--leftButtonGroup--"]');



    if (toolbar) {

        // create new button, set inner HTML and append

        const newButton = document.createElement('div');

        newButton.innerHTML = '<span role="button" aria-label="Increase Left Panel Size" class="svg-container toolbar_view--iconButton--1MUm6 toolbar_styles--enabledButton--fEwmC" data-tooltip-type="lookup" data-tooltip="set-tool-increasewidth" tabindex="0" aria-pressed="false" data-fullscreen-intercept="true"><svg class="svg" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="#fff" fill-opacity="1" fill-rule="evenodd" stroke="none" d="M18.6.2H1.1c-.3,0-.5.2-.5.5v18.6c0,.3.2.5.5.5h17.5c.3,0,.5-.2.5-.5V.7c0-.3-.2-.5-.5-.5ZM1.6,1.2h11.1v17.6H1.6V1.2ZM18.1,18.7h-4.4V1.2h4.4v17.6Z"></path></svg></span>';

        toolbar.appendChild(newButton);



        // set new resizeButton

        const resizeButton = newButton.querySelector('.toolbar_view--iconButton--1MUm6');

        let isButtonClicked = false;



        // Add click event listener to the span button

        resizeButton.addEventListener('click', function() {

            // Toggle background color, run width adjustments and start mutations observer

            if (!isButtonClicked) {

                resizeButton.style.backgroundColor = 'var(--color-bg-toolbar-selected, var(--bg-toolbar-active))';

                setWidths();

                observeMutations();

            } else {

                // reset background color, reset width adjustment and destroy mutations observer

                resizeButton.style.backgroundColor = '';

                revertWidths();

                disconnectObserver();

            }



            isButtonClicked = !isButtonClicked;

        });

    } else {

        console.error('Target div not found');

    }



    let observer;



    // width adjustments

    function setWidths() {

        document.getElementById('left-panel-container').style.maxWidth = '1500px';



        const elements = document.querySelectorAll('qclass*=left_panel_container--panel--]');

            elements.forEach((el) => {

            el.style.width = '1500px';

        });



        const leftPanelContent = document.querySelectorAll('qclass^="left_panel--content"]');

        leftPanelContent.forEach(content => {

            content.style.width = '1500px';

        });



        const objectRows = document.querySelectorAll('qclass^="object_row--row--"]');

        objectRows.forEach(row => {

            row.style.width = '1500px';

        });



        const objectRowsInstanceChilds = document.querySelectorAll('qclass^="object_row--instanceChild"]');

        objectRowsInstanceChilds.forEach(row => {

            row.style.width = '1500px';

        });

        



        const topLevelRows = document.querySelectorAll('qclass^="object_row--topLevel--"]');

        topLevelRows.forEach(row => {

            row.style.width = '1500px';

        });



        const scrollContainers = document.querySelectorAll('qclass^="objects_panel--scrollContainer"], cclass^="pages_panel--scrollContainer"]');

        scrollContainers.forEach(container => {

            container.style.width = '1500px';

        });

    }



    function observeMutations() {

        // Observe changes in the DOM subtree of the left sidebar and run width adjustments

        observer = new MutationObserver(mutations => {

            mutations.forEach(mutation => {

                if (mutation.type === 'childList') {

                    setWidths();

                }

            });

        });



        const config = { attributes: true, childList: true, subtree: true};



        const motionContainers = document.querySelectorAll('#react-page');

        motionContainers.forEach(container => {

            observer.observe(container, config);

        });

    }



    // function to revert width adjustment

    function revertWidths() {

        document.getElementById('left-panel-container').style.maxWidth = '500px';



        const elements = document.querySelectorAll('qclass*=left_panel_container--panel--]');

        elements.forEach((el) => {

            el.style.width = '500px';

        });



        const leftPanelContent = document.querySelectorAll('qclass^="left_panel--content"]');

        leftPanelContent.forEach(content => {

            content.style.width = '500px';

        });





        const objectRowsInstanceChilds = document.querySelectorAll('qclass^="object_row--instanceChild"]');

        objectRowsInstanceChilds.forEach(row => {

            row.style.width = '500px';

        });



        const objectRows = document.querySelectorAll('qclass^="object_row--row--"]');

        objectRows.forEach(row => {

            row.style.width = '500px';

        });



        const topLevelRows = document.querySelectorAll('qclass^="object_row--topLevel--"]');

        topLevelRows.forEach(row => {

            row.style.width = '500px';

        });



        const scrollContainers = document.querySelectorAll('qclass^="objects_panel--scrollContainer"], cclass^="pages_panel--scrollContainer"]');

        scrollContainers.forEach(container => {

            container.style.width = '500px';

        });

    }



    function disconnectObserver() {

        if (observer) {

            observer.disconnect();

        }

    }

})();

Hacking a productivity application to be productive… Great success!

If you find any bugs, let me know!

can you make it resizable and add a horizontal scroll?

Please fix this, even on large screens with the limit to the width of the layers panel it makes it challenging to work on components from libraries etc.

Yea please add this feature. It seems minor but it would help a lot.

Some people might think well you don’t need that deep layers structure, but sometimes we just do. When you have different library components you just need have to have it deep…

oh might as well add some transition, so that sidebar won’t just pop in

Hey, thanks for the script 🔥

I could not get it to work for me, but with a small adjustment to setWidths and revertWidths , I was able to get it to work for me.

// width adjustments

function setWidths() {

       document.getElementById('left-panel-container').style.maxWidth = '1500px';

       var elements = document.querySelectorAll('[class*=left_panel_container--panel--]');

       elements.forEach((el) => {

           el.style.width = '1500px';

       });



       const leftPanelContent = document.querySelectorAll('[class^="left_panel--content"]');

       leftPanelContent.forEach(content => {

           content.style.width = '1500px';

       });



       const objectRows = document.querySelectorAll('[class^="object_row--row--"]');

       objectRows.forEach(row => {

           row.style.width = '1500px';

       });



       const topLevelRows = document.querySelectorAll('[class^="object_row--topLevel--"]');

       topLevelRows.forEach(row => {

           row.style.width = '1500px';

       });



       const scrollContainers = document.querySelectorAll('[class^="objects_panel--scrollContainer"], [class^="pages_panel--scrollContainer"]');

       scrollContainers.forEach(container => {

           container.style.width = '1500px';

       });

   }



// function to revert width adjustment

   function revertWidths() {

       document.getElementById('left-panel-container').style.maxWidth = '500px';

       var elements = document.querySelectorAll('[class*=left_panel_container--panel--]');

       elements.forEach((el) => {

           el.style.width = '500px';

       });



       const leftPanelContent = document.querySelectorAll('[class^="left_panel--content"]');

       leftPanelContent.forEach(content => {

           content.style.width = '500px';

       });



       const objectRows = document.querySelectorAll('[class^="object_row--row--"]');

       objectRows.forEach(row => {

           row.style.width = '500px';

       });



       const topLevelRows = document.querySelectorAll('[class^="object_row--topLevel--"]');

       topLevelRows.forEach(row => {

           row.style.width = '500px';

       });



       const scrollContainers = document.querySelectorAll('[class^="objects_panel--scrollContainer"], [class^="pages_panel--scrollContainer"]');

       scrollContainers.forEach(container => {

           container.style.width = '500px';

       });

   }

Thank you for sharing your fix, I think Figma has changed something again.

I’ve updated my script above and also fixed where the mutation observer should look at (there was a bug, where extending the width and then clicking on an object within the canvas would not resize a collapsed row)

Edit: user script also updated and is now working 🙂

This is easily possible, but it comes with some usability tradeoffs, that take too much time to fix, e.g. if you resize the inner container with all the layer rows and make it scrollable, the lock and visibility buttons that are shown at the end of each row on hover will also appear at the very end within the container. So mouse users will always need to scroll over 1000px to the right and then to the left (depending on level of depth) just to click those buttons. That is why I decided to just resize it to 1500px with the script, that should work for the most cases and is maintainable more easily.