LAUNCHED: Horizontal scroll the layers panel

Weird how Dev Mode supports this behavior, yet in Design Mode, you can’t resize the right panel.

This is becoming a serious issue. At least let us scroll horizontally within the maxed-out Layers panel. That should be an easy fix.

As our projects become more complex, the number of layers within components, etc., grows exponentially and layers will expand outside of the view area.
The quick fix has been to temporarily lift out the section, edit it, and then put it back in.

I worked around this issue by doing some simple css.
I used the following css to mofidy the folllowing elements.

.scroll_container--full--CiWTy {
  overflow-x: auto;
}
.ellipsis--ellipsis--Tjyfa {
  min-width: 240px;
}

I also automated this with some JS. You can do the same by pasting the following in your web browser console whenever you open Figma.

// Get the elements by their class names
const scrollContainer = document.querySelector('.scroll_container--full--CiWTy');
const ellipsisText = document.querySelectorAll('.ellipsis--ellipsis--Tjyfa');

// Add CSS styles to the scroll container
scrollContainer.style.overflowX = 'auto';

// Loop through each element with the 'ellipsis--ellipsis--Tjyfa' class and add CSS styles
ellipsisText.forEach(element => {
  element.style.minWidth = '240px';
});

(note: you must open the child layers in Figma until it starts adding the … at the end of the text before you paste the following code into your web browser console. Or else the element is just not seen by your browser and wont be able to apply the css.)

please improve the userscript

Hello there, fellow designers!

I’d like to talk about a key feature that I, along with numerous other UX/UI specialists, find to be of significant importance. The issue at hand is the pressing need for a more dynamic Layers Panel, specifically adding a horizontal scroll option coupled with the ability to expand or collapse the panel as needed.

As we meticulously build intricate and exceptional components, a horizontal scroll inside the Layers Panel isn’t just a convenience, but an indispensable tool for our workflow. Similarly, having the ability to resize the panel - expanding to the maximum width when necessary - can make all the difference in our design process.

While tooltips are handy, they don’t fully address this issue. It’s high time we had an integrated solution that enhances the functionality of the Layer Panel, better catering to the varied needs of our work.
By focusing on these modifications, we can streamline our workspace and improve overall productivity.

Looking forward to hearing your thoughts on this matter!
PS: I’m also attaching a screenshot related to my issue.

Hello @Marcelo_Macadar, I appreciate you sharing your thoughts with us!
It seems that other members of the community have also made similar requests. I merged your topic with theirs here to keep all the related feedback in one place.
Please vote up from top of this post!

it seems like the votes don’t matter much

C’mon folks, it’s been 3.5 years

Hey All, we hear you!

While I wish we had an exact timeline to share, rest-assured that we already have something in the works. Keep an eye out on our future release notes - stay tuned!

Having multiple auto-layouts nested in the layers panel on smaller screens constantly moves the layers to the right side. Creating a need to expand the layers panel to see those layers.

please fix /file → /design

Last month, our company started using Figma, and I soon encountered this interesting issue… 😓

I tried to override the CSS to allow horizontal scrolling in the layers panel.
The solution isn’t perfect, but the result is acceptable.

If you are using the Arc browser, you can add the following CSS directly using Boost,

[class^="pages_panel--objectPanelContent"] [class^="scroll_container--scrollContainer"] {
    overflow-x: scroll !important;
}
[class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [data-testid="layer-row"], 
[class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [data-testid="layer-row-with-children"] {
    min-width: fit-content;
}
[class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--rowText"] {
    width: auto !important;
    min-width: fit-content;
}
[class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--rowName"] {
    min-width: fit-content;
}
[class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--row"] input[type="text"] {
    width: auto !important;
    min-width: fit-content;
}
[class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--rowActions"] {
    position: sticky;
    right: 0;
    padding-left: 0.25rem;
    background-color: var(--color-bg, #fff);
}
[class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--row"][class*="selected"] [class^="object_row--rowActions"] {
    background-color: var(--color-bg-selected, #daebf7);
}
[class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--row"][class*="parentSelected"] [class^="object_row--rowActions"] {
    background-color: var(--color-bg-selected-secondary, #edf5fa);
}

Or use the extension version

Hope it helps.

CRX_REQUIRED_PROOF_MISSING,
please make it a userscript

unbelievable, it’s still not fixed :]

Please Figma !!!

This is long overdue.

I can’t reach the layers. The limitation of the maximum width of the menu and the lack of scrolling do not allow this.

Please correct this mistake. Currently, you can only interact with these layers with shortcuts…

How is this being left unattended? You have a design tool, that makes it so that people cannot navigate all the way into their layer hierarchy

It’s not being left unattended. As I mentioned last month, we already have something in the works - stay tuned!

Was super excited (and hopeful) that this would be addressed in the redesigned UI announced during Config today. Unfortunately, nope, at least not from what I see. I’m really struggling to understand why this blatant fail in the product UI/UX has still not been dealt with after 3.5 years. But hey, AI can rename your layers that you won’t be able to see or access.

Hey @sooz888, have you been able to play around with UI3 yet?

Check this out… 👀

do you even realize the blatantly obvious difference between resizing and overflow with horizontal scrolling?

Hey @aolko,

Of course we do! But with UI3 still in beta, this is just the 1st iteration.

This topic’s feedback is a combination of the desire to expand as well as horizontal scroll. Join the waitlist to test out UI3, then let us know how your layers look and feel on it. There’s still time to improve - we’re listening!

Thanks @dvaliao appreciate the quick response. No, I don’t have UI3 yet. I got prompted to try it, but the link just takes me to a Figma file with info only.

I agree with @aolko that resizing and scrolling is completely different. The resizing works if you’re viewing in a large browser.

But if you’re working on a laptop, I reckon that I’ll have to (potentially) resize to almost half, if not more, of my canvas width. So yeah, the horizontal scrolling is still a necessity (in addition to the resize).

We hear you, @sooz888.

With UI3 still in beta, we can advocate for horizontal scroll. The team can still make improvements - stay tuned!

To join the waitlist to access UI3:

1. Log in to Figma .
2. On the Everything we launched at Config 2024 modal, click Click to learn more under Meet Figma AI, plus a new UI.
3. Click Join Waitlist.

If you already dismissed the modal:

1. Log in to Figma .
2. At the bottom of the screen, click and select Join UI3 + AI waitlist.

or

Use the keyboard shortcut to access the quick action bar, and then search for Join UI3 + AI waitlist:

• Mac: ⌘ Command / or ⌘ Command P
• Windows: Control + / or Control + P