What do you think about having a horizontal scroll on the layers panel? I can’t see the name of the layers and usually widen the panel to be able to see, but since I use a 13", this makes the canvas smaller.
- Home
- Forum categories
- Share Your Thoughts
- Suggest a Feature
- LAUNCHED: Horizontal scroll the layers panel
LAUNCHED: Horizontal scroll the layers panel
- February 5, 2021
- 310 replies
- 20127 views
310 replies
- Power Member
- 4715 replies
- February 5, 2021
Wow, you’ve got a lot of layers… 😱
- Author
- 5 replies
- February 5, 2021
Oh yes 🤦♀️ One inside another…
- 1 reply
- February 8, 2021
Or at least give me a tooltip when I hover over a truncated layer name.
- Giorgio_Caviglia
- derrick_lieu
- Vladimir_Jimenez
- iamxoph
- Adeeb_Dollie
- Nguyen_D
- Wendy8
- Stefan_Abrahamsen
- Asaf_Ben_Oved
- denvac
- Max_Blum2
- Melina3
- Hana_D
- chudoloo
- Jacek4
- Iksent
- pinquitte
- Hamid_B
- Daniil_Voeykov
- dennsi
- Andrew_Lyons
- Malene1
- Andres_Sanz_Gonzalez
- Jon_Armstrong
- Tim_Chege
- Tal_Engel1
- Jules_Brenner
- andreyrgerasimov
- Max_Josino1
- Kate63
- Antoine_Beauvillain1
- Jose_Manuel_Rojas
- 30 replies
- March 29, 2021
very underrated, a must have
- 30 replies
- March 30, 2021
and the layer buttons (lock, view) get hidden as well
- Active Member
- 44 replies
- April 24, 2021
As the title says there are some files with nested layers going so deep, the indent gets too wide:
Here an example from Microsoft’s Teams UI Kit:
While you can expand the width of the layers panel, in this example I have apparently reached the maximum width possible and some layers are still out of reach.
Preferrably Figma would scroll the layers panel automatically to always have layers in view that are cut off. When I deselect the layer in question, it would scroll back to the very left.
- 6 replies
- June 15, 2021
I want to be able to drag the right panel to resize it like I can with the left panel so I can view the full names of my color styles.
Does anyone else experience this? Is anyone using a plugin or workaround to help solve this?
- 2 replies
- June 28, 2021
This is also a huge issue for me. We use a lot of library components that are nested and have complex and heavy data UI so there can be a lot of nesting. It’s not always great to keep having to move make the layers panel wider.
- New Member
- 3 replies
- June 30, 2021
@figma Please please provide this (horizontal scroll on layers panel, or tooltip on hovering over layer in panel). It is a real blocker to the use of some files for users.
- 3 replies
- July 8, 2021
I’ll add my request here too. This has been asked for over and over again.
- 1 reply
- July 20, 2021
I’m working on a project where I’m building a hierarchical menu next to a data table and the way I’m constructing it is by nesting lists within lists in the layer panel. I know it would be possible to componentise the list but at the moment I need the flexibility to just keep it simple. The problem I have is that the indentation in the layers panel quickly makes it wider than the content so you can’t actually see what is going on.
Hopefully the screenshot crop below shows what I mean:
Does anyone know if it’s possible to make the layers panel wider? My workaround at the moment is to work on the lower levels in the list and then paste them back in to the full list.
- 2 replies
- July 29, 2021
Hi,
We have color and type libraries set up to align with our development environment meaning we can just have “red” or “body” as a description. It needs to be longer.
However, The right bar containing all our properties has become almost unusable in some circumstances due to it’s hugely constrained width. We can often just see a category title, and not the actual label of the color or type.
With the left layers panel being resizable, it would make sense to provide this same flexibility for designers to better utilise our working space.
Thank you,
Craig
- 16 replies
- August 13, 2021
With Autolayout, it’s only gotten worse. They don’t need all that horizontal whitespace.
- 16 replies
- August 13, 2021
If Figma is going to “grow up” and be a solid enterprise tool, the UI needs some work and this is a big one that shows no one dog foods complex designs on the Figma team or there is a willful ignorance of solid UX for navigating one’s designs.
- 4 replies
- August 13, 2021
I used to make the hierarchy so complex, but then I try to make everything in components, components in components,… (actually not all). It relaxes me so much, I don’t have to care about the detail and the layers panel anymore, now I just edit the main components and it works well, hope it helps you
- 1 reply
- August 26, 2021
I was wondering if there’s a way to see the layer hierarchy in Layers panel when the layer nesting level is too high (20+). As shown in the attached screenshot, I can’t really see the name and hierarchy of some layers.
What I tried: I can’t increase the panel’s width further (there seems to be a limit). I can’t horizontally scroll the panel with my trackpad.
I was wondering if we can do something to fix this issue, e.g. by enabling horizontal scrolling on this panel.
(My instinct is that horizontal scrolling might be nontrivial to implement. E.g. calculating the maximum cell width among all the cells inside the list is time consuming; the list may be using infinite scrolling, so the maximum cell width is not a constant)
Thanks!
- 1 reply
- August 31, 2021
- 16 replies
- September 29, 2021
Complex UI, large team. We don’t always get that luxury!
- 4 replies
- September 30, 2021
totally agree. shorter indent for child layers and/or pop-up tooltip of layer name on hover would make this Layers panel way more usable for day to day work.
- 1 reply
- October 7, 2021
It would be great to have a horizontal scroll or a way to lock or align right the layer selected since it gets lost, on really complex screen or in nested components the group of layers could get too high, and the further layers inside get lost and doesn’t appear completely on the Layer panel, it would be great to have a way to scroll or view the layer and options ( Lock and hide ) of these layers that get outside of the panel view.
thanks!
- 1 reply
- October 27, 2021
- 1 reply
- December 6, 2021
Figma, please do something about it. We need horizontal scrolling in the layers panel.
- 2 replies
- December 10, 2021
Hi,
I’d like to add that the problem is even bigger for developers inspecting designs. For us, the variant names are directly pointing to React property keys. Therefor it is crucial that developers can read the full property name. Right now they’re being truncated after 6-7 characters, which is way too short.
Thx!
Jasper
- 4 replies
- December 30, 2021
it seems to me that layers panel become even more restricting, earlier I could extend layer panel as much as I want, now it is cropped, I cannot reach some of the layers… That is terrible User Experience. With auto layout, deep nesting is a must: imagine icon inside form field, that is part of the card of the section of the page with side bar. You have the situation like bellow, where you cannot reach a layer… One scroll bar for horizontal scroll is all we need. To me personally this is something that should be top priority to be fixed
Wow, you’ve got a lot of layers… 😱
Oh yes 🤦♀️ One inside another…
Or at least give me a tooltip when I hover over a truncated layer name.
very underrated, a must have
and the layer buttons (lock, view) get hidden as well
As the title says there are some files with nested layers going so deep, the indent gets too wide:
Here an example from Microsoft’s Teams UI Kit:
While you can expand the width of the layers panel, in this example I have apparently reached the maximum width possible and some layers are still out of reach.
Preferrably Figma would scroll the layers panel automatically to always have layers in view that are cut off. When I deselect the layer in question, it would scroll back to the very left.
I want to be able to drag the right panel to resize it like I can with the left panel so I can view the full names of my color styles.
Does anyone else experience this? Is anyone using a plugin or workaround to help solve this?
This is also a huge issue for me. We use a lot of library components that are nested and have complex and heavy data UI so there can be a lot of nesting. It’s not always great to keep having to move make the layers panel wider.
@figma Please please provide this (horizontal scroll on layers panel, or tooltip on hovering over layer in panel). It is a real blocker to the use of some files for users.
I’ll add my request here too. This has been asked for over and over again.
I’m working on a project where I’m building a hierarchical menu next to a data table and the way I’m constructing it is by nesting lists within lists in the layer panel. I know it would be possible to componentise the list but at the moment I need the flexibility to just keep it simple. The problem I have is that the indentation in the layers panel quickly makes it wider than the content so you can’t actually see what is going on.
Hopefully the screenshot crop below shows what I mean:
Does anyone know if it’s possible to make the layers panel wider? My workaround at the moment is to work on the lower levels in the list and then paste them back in to the full list.
Hi,
We have color and type libraries set up to align with our development environment meaning we can just have “red” or “body” as a description. It needs to be longer.
However, The right bar containing all our properties has become almost unusable in some circumstances due to it’s hugely constrained width. We can often just see a category title, and not the actual label of the color or type.
With the left layers panel being resizable, it would make sense to provide this same flexibility for designers to better utilise our working space.
Thank you,
Craig
With Autolayout, it’s only gotten worse. They don’t need all that horizontal whitespace.
If Figma is going to “grow up” and be a solid enterprise tool, the UI needs some work and this is a big one that shows no one dog foods complex designs on the Figma team or there is a willful ignorance of solid UX for navigating one’s designs.
I used to make the hierarchy so complex, but then I try to make everything in components, components in components,… (actually not all). It relaxes me so much, I don’t have to care about the detail and the layers panel anymore, now I just edit the main components and it works well, hope it helps you
I was wondering if there’s a way to see the layer hierarchy in Layers panel when the layer nesting level is too high (20+). As shown in the attached screenshot, I can’t really see the name and hierarchy of some layers.
What I tried: I can’t increase the panel’s width further (there seems to be a limit). I can’t horizontally scroll the panel with my trackpad.
I was wondering if we can do something to fix this issue, e.g. by enabling horizontal scrolling on this panel.
(My instinct is that horizontal scrolling might be nontrivial to implement. E.g. calculating the maximum cell width among all the cells inside the list is time consuming; the list may be using infinite scrolling, so the maximum cell width is not a constant)
Thanks!
You can see here, the Layer Panel need a lot of space. I think you should make the indent of childrens shorter.
Thank you!
Complex UI, large team. We don’t always get that luxury!
totally agree. shorter indent for child layers and/or pop-up tooltip of layer name on hover would make this Layers panel way more usable for day to day work.
It would be great to have a horizontal scroll or a way to lock or align right the layer selected since it gets lost, on really complex screen or in nested components the group of layers could get too high, and the further layers inside get lost and doesn’t appear completely on the Layer panel, it would be great to have a way to scroll or view the layer and options ( Lock and hide ) of these layers that get outside of the panel view.
thanks!
Because the text is too long after the control bar is expanded, I cannot see the text behind it, so I must widen the control bar. I want to set a horizontal scroll bar, or see the whole name when the point is hovering.
Figma, please do something about it. We need horizontal scrolling in the layers panel.
Hi,
I’d like to add that the problem is even bigger for developers inspecting designs. For us, the variant names are directly pointing to React property keys. Therefor it is crucial that developers can read the full property name. Right now they’re being truncated after 6-7 characters, which is way too short.
Thx!
Jasper
it seems to me that layers panel become even more restricting, earlier I could extend layer panel as much as I want, now it is cropped, I cannot reach some of the layers… That is terrible User Experience. With auto layout, deep nesting is a must: imagine icon inside form field, that is part of the card of the section of the page with side bar. You have the situation like bellow, where you cannot reach a layer… One scroll bar for horizontal scroll is all we need. To me personally this is something that should be top priority to be fixed
Ditto. Up Vote.
Reply
Related topics
Need urgent Help! Connection error: -106icon
Ask the CommunityConnection Error 106 while opening fileicon
Ask the CommunityUrgent Help Needed: Figma Sync and Preview Issues on Firefoxicon
Ask the CommunityPlease Help Connection Error -106icon
Ask the CommunityNeed Urgent Help! I am not able to move my deleted file to Drafticon
Ask the Community
Solved topics
Figma Site - The Components/Code block library doesn't show up in Make tab
2 RepliesStuck in SheerID Verification Loop - Figma, Please Take Responsibility
6 Repliesexport library to Figma make: "We ran into an error while extracting your library"
5 RepliesDo I have to verify?
2 RepliesHow can I list my institute for Figma Education in Pakistan?
1 Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
Scanning file for viruses.
Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
OKThis file cannot be downloaded
Sorry, our virus scanner detected that this file isn't safe to download.
OKCookie policy
We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.
Cookie settings
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.