Expand/Horizontal scroll and sort the layers/libraries panel

Same issue as well, with nested components (which is an awesome feature) this has become an increasingly larger issue…

What is going on? One of the app’s most important panels extends in both dimensions, and yet is missing an entire dimension of scrolling. How is this still not addressed after this many years? I hate to make a “I have this problem too” post, but this particular case is just bizarre, considering that this is a paid product with a lot of otherwise superlative attention to detail. It makes me worried that something is deteriorating behind the scenes.

1 Like

BUMP -
@tank666 what you link to is auto closed and /4325 is missing~!

It’s so frustrating not to be able to change this panel width for these three sections. In Adobe products (ahem) you can. In Slack you can.

Design | Prototype | Inspect

I’ve changed my interface scale to accommodate, the default width of this panel being 218px [or 240px at full] is not ideal especially working with token names and typography and at hand off too. It’s bewildering.

Understand that some of those boxes within Design are important to remain nested to each other but can this container panel not be extended?

4 Likes

Figma, pls fix it. It is so user unfriendly.

6 Likes

totally need this asap…plz put it on priority. this is so basic.

Hi Figma, please… :melting_face:

1 Like

We run into that problem, too. Especially when you have a huge component library with multiple nested child-components.

So I investigated into it and wrote a script that kind of solves the problem.

The script enables horizontal scrolling and makes the intents before each layer item way smaller. It does not remove the limits, but it gives you way more space to work.

Comparison

How To with Userscript:

How To in Figma App:

Note that you always have to copy and paste the script for each opened document and when you reopen Figma or reload any document.

  1. Open the dev tools in Figma with cmd+opt+i (on Mac)
  2. Switch to “Console” tab
  3. Copy and paste the following script into the command line input
  4. Hit return
(function () {
    'use strict';
 
    function minimizeSpaceInTree() {
        var elements = document.getElementsByClassName("object_row--indent--aWa0t");
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.width = "4px";
        };

	    var caretElements = document.getElementsByClassName("object_row--expandCaret--LW0Oy");
        for (var i = 0; i < caretElements.length; i++) {
            caretElements[i].style.width = "16px";
        };

        var topLevelElements = document.querySelectorAll('.object_row--topLevel--SXq9o .object_row--indent--aWa0t');
        for (var i = 0; i < topLevelElements.length; i++) {
            topLevelElements[i].style.width = "16px";
        };

        var firstElements = document.querySelectorAll('.object_row--row--RUzis:not(.object_row--topLevel--SXq9o) .object_row--indents--jpaAQ .object_row--indent--aWa0t:first-child, .object_row--row--RUzis:not(.object_row--topLevel--SXq9o) .object_row--indents--jpaAQ .object_row--mask---4-dT:first-child');
        for (var i = 0; i < firstElements.length; i++) {
            firstElements[i].style.width = "16px";
        };

    }
    
    minimizeSpaceInTree()
 
    var targetNode = document.body;
    var config = {
        attributes: true,
        childList: true,
        subtree: true
    };
    function myFunction(mutationsList, observer) {
        // Loop through the list of mutations
        for (let mutation of mutationsList) {
          if (mutation.type === 'childList') {
            minimizeSpaceInTree();
            
          }
        }
      }
 
    const observer = new MutationObserver(myFunction);
 
    observer.observe(targetNode, config);
})();
9 Likes

This would be very useful. Same issue also happens sometimes when right clicking on styles in the styles panel too, like here:

Can you please convert it into a userscript?

I’ve added the link to the userscript to my post. Please note: this is beyond anything I would call polished or finished. But it does the job. If I find some more time, I will investigate a little more.

1 Like

Sadly the layer names remain ellipsed

As you can see by scrolling down they don’t necessarily implement stuff in the top 10.

1 Like

Hey @Stan5,

To be transparent, the top 10 may have priority overall, but features are spread across different teams (i.e Auto Layout, Prototyping, etc.)

This feature request may only have 389 Votes compared to others in the top 10, but we’re aware of how big a pain point this is and it’s definitely on our radar for improvement!

6 Likes

Why haven’t more people loved this post? it’s AMAZING! Exactly what the layer panel needs!

2 Likes

On small screens (and not so small), when the layer tree starts growing I can’t scroll horizontally to be able to read the whole name of a layer or even rename it. This is a nightmare in big projects, please add horizontal scroll.

See screen recording (GIF)

1 Like

This saved my day! Thanks a lot!

1 Like

Very underrated issue / bug in Figma. Super annoying to resize the layers panel all the time. =/

4K Screen and still stuck with 240px Panel :grimacing:

6 Likes

Yes! this is so needed. I can’t believe it’s 2023 and this is still an issue

1 Like