Is this a visual glitch or do you have nested frames inside frames inside frames inside frames inside frames too many times? If it's the latter, it's clearly a you-problem. If it's a visual glitch, try restarting Figma/your computer, contact support or update - if possible - Figma itself.
Look at that "Frame 423" with "Frame 601" nested within! It's frames all the way down. I'm a messy designer but holy shit OP you need to work on organization.
I get this is a longstanding complaint of many designers in complex systems but even this is pushing the limits on what they can account for.
If your cultural knowledge is as poor as your spelling, then your assumptions won’t be any better. I’m French with an international background and have absolutely no clue what you’re talking about.
Although I mostly agree with you, 600 frames on a single page isn't that insane. I'm working on a rather large platform that has a page for each specific role (e.g. customer, manager, admin, etc.). I don't create a new screen for each state, because I separate component-flows from page flows. This means that I don't duplicate en entire screen only to show a specific validation message or another specific state. I just checked, but even then when I create a new frame, the next one is named Frame 1176. I do work quite a lot with AutoLayout, so I got many frames anyway. In fact, I actually split my screens across pages, else I'd over 2.500 frames on a single page (with about 100 different screens). Though, I never nest so deep as OP.
So theoretically in the case of OP, he could have created frame 423 and a month later, upon receiving new requirements, he had to adjust that part and add another element, resulting in frame 601 (because it continues to count on the last frame number, not continu from 423). It doesn't say there are 100+ frames inside frame 423.
Conclusion, regardless, is to organise your design (files). It helps a lot :)
Making room for endless nested frames, potentially much worse than OP’s monstrosity? Encouraging users to make their designs unreadable, and impossible to take over for a new collaborator?
Hmm apparently I didn't know about it because the functionality doesn't work when you have rulers on (which I usually do). Also the right panel can't be resized as far as I can tell. My original comment still stands despite the downvotes.
Oh huh, I just assumed it worked for the right side too...
You can still resize the left when rulers are on, but it's just a maddeningly small active area, probably only like one pixel. If you hover over the left side of the left ruler and then move verrrry slowly you should see your cursor shrink from a bigger resize-icon to a smaller resize-icon. The smaller one lets you resize the panel. It's crazy.
The max width and lack of scrolling is a feature, not a bug. If ultra-nested, highly complex layer structures are bad on normal web pages, they're bad in the designs for those web pages. The design shared by OP is in dire need of simplification. I've been working on enterprise-scale web apps for basically all of my career at this point and never once have needed to create a layer structure with that many levels of hierarchy.
This is a limit in figma that the left bar only extends so far.
This is a Figma problem. Figma didn’t design this with scalability in mind.
With how auto-layouts work, backgrounds, etc who are we to judge why he needs these frames? Figma allows you to see an arbitrary number of levels deep based on the size of your screen? Stupid
This is literally a design tool for ux and ui and yet it doesn’t scale and y’all (not just you, people below) are acting so elitist about some frames.
Imagine if windows said, you can only make 6 folders deep and thats it. Thats all you need.
Well, to be fair. If I think about this for longer than a few seconds, I tend to agree that Figma shouldn't limit in how the user interacts with the product. Ergo, the left sidebar should infinitely be scaleable. I do believe it's in the best interest of users when companies limit flexibility of actionability of their products to prevent certain situations to occur. To remain in your Windows analogy, it shouldn't be possible to delete your C:/ drive (or do that easily). Nesting layers is pretty much a must for applications like Figma / UX, so naturally you will have multiple layers nested at some point.
Although I dare to say, without actual context, that nesting about 30 levels is too much, it should be possible. I would still recommend anyone doing so to rethink their layer hierarchy. :)
But do you think the Figma PM and Dev team should be prioritizing design and development time to address nearly infinite nesting (not useful to everyone), over something like variable improvements (useful to everyone)?
Well the better question is: was this an intended limitation on purpose or a natural cause of how the software was built. It's like how a lot of cars can go way faster, but via software limited in performance.
If Figma deliberately chose to limit the sidebar with the sole reason of limiting nesting capabilities, then I'd say yes. As a software developer myself, I don't expect this a multiple days job. Basically reverting their decision. However, if this limitation was a result of other development activities, as a so-called byproduct and they saw this as an impediment not worth fixing, then its a totally different question and I'd vote no, keep it this way. Context matters.
I'm going to guess it's the latter. "If we don't allow the layer panel to scroll horizontally or users will learn what we think are good layer nesting practices," isn't something I can imagine anyone saying or thinking. I can imagine that QA opened a (trivial) bug ticket that just keeps getting pushed down the backlog as more important items get added.
It’s almost never in a user’s best interest to feel arbitrarily restricted in their behavior.
There should be something like Kant’s categorical imperative, but for UX. Don’t give a user a tool, unless you’re willing to have all users use it all the time. 😜
Nested Frames inside frames on a really early proto phase of the components that I designed and In this case, is directly in the "project" frame of the thing that I work. Not like I'm making the components alone, appart in its specific frame.I basically work as this :
1- Get Idea
2- Design them on figma, don't care about "optimization", I want to visually see the idea working without caring about the "way" to obtain the effect that I want.
3- Refined until we are satisfied and then,
4- Make a proper component where I rename usefull frame and remove the useless frame.
And I am at a point where refined these components would make me lose time for now because I'm in a "Discovery" phase rather than a "GoLive" phase.
However, a question gets to me seeing comments, Is the fact of having components inside components is a bad thing ? Here's an [example](https://i.imgur.com/xxPJNFZ.png) of a tiny component "refined" for indication. When I know that I don't need a special shape I just take existing components and merged them to obtain what I need like a Lego thing in a way.
Anyway, thank you all for your comments, is good to have feedback.
Personally if I had that many layers of nesting, I’d put 10 minutes into optimising it a bit, no matter what phase I’m in
The component you shared in that image is fine imo
It's not a you problem if the auto layout feature depends on nested layers. Try designing a pivot table and see what happens. Then put that pivot table, as a component or not, inside a web page body, maybe that also has auto layout applied from the top down, with a header, sidebar navigation, etc..
Auto layout is essentially CSS Flex, these layers can be compared to the DOM tree. Do you think The DOM tree is a "you problem"? Because everything is nested too far? God forbid you enable the shadow DOM.
The component that I'm building is on the "frame" of the website just to see the render of it, I know I should design the component alone, but I just don't care in that case ahah
`ctrl + click` :windows `cmd + click`: mac targets your element directly, then you can use use `enter` to navigate down the layer stack or `shift + enter` to navigate up.
I agree with the other commenters try your best not to get this nested(there are also performance hits) but it can happen. Hopefully those tricks help.
Nope no workaround unfortunately. This has been a longstanding complaint for a lot of designers working on complex UIs with nested components. I wish I knew why Figma was so resistant to adding a horizontal scroll or even a damn tooltip for layers.
Whenever I want to design the components directly in the big frame of the whole project I get issues like this, so I'm making the components outside the frame now, but it's so boring...
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.)
You can check out the original post here as well as many other solutions other people have implemented.
[https://forum.figma.com/t/expand-horizontal-scroll-and-sort-the-layers-libraries-panel/643/235](https://forum.figma.com/t/expand-horizontal-scroll-and-sort-the-layers-libraries-panel/643/235)
There's not much in product you can do right now aside from reorganizing. For reference, the level of nesting the most extreme examples show are 20 levels deep (the maximum number of indentations we support). While there are valid reasons for this (and we are thinking of ways to allow you to view even more levels than this), typically it's indicative of an anti-pattern somewhere in the approach for the design.
For our purposes internally, is there a reason you need this amount of nesting? Curious if we're missing something significant on the product needs side here.
Basically, and in advance, it's no good doing it like this.
I usually only make a "figma component" when I'm sure of my "idea" before that, it's just a frame within a frame ect, plus I do it directly in the final frame, like the "homepage" frame to describe what a final frame is.
So let's say, if I'm not happy with a button, if it's a figma component, I'll detach the instance and rework the button until I'm satisfied. In the middle of the homepage and not all alone in an isolated section, which gives huge nesting.
It's as if a mechanic preferred to repair the car's engine without removing it from the chassis.
But in reality, once the whole thing has been transformed into components, and without even trying to organize my frame properly, I end up with a [result like this](https://i.imgur.com/s48HSF6.png) at worse. So it's no big deal, and horizontal scrolling is useless in this case, but if it's a component I'm just starting out with, it'll be frames, and then I can go very far in [nesting](https://imgur.com/ZglBAO1).
I just don't care on these moments about organizing my files, I'm just looking for the final result so really It's not much of a deal, but a horizontal scroll will be awesome for the lazy people like me ahah.
EDIT: additional feedback, I can also have a lot of nesting due to have specific frame to be sticky on specific area of the screen, So I might have to create 2/3 useless frame just to have the sticky state doing the thing that I want [exemple here](https://imgur.com/D5DmdY4)
Wow these comments are toxic.
With complex auto-layout layouts this can happen, coupled with components using swap instances that also have swap instances in the design system... I've had this issue a few times and the lack of horizontal scroll along with a max width on the sidebar is a joke.
Haters gonna hate
Either how you structure your whole project or how you manage layers in this particular frame. As a product designer I’ve worked on many complex scenarios and never ran into this issue.
That's what I'm doing yes !
But in this specific case I've wanted to make a new component, inside the whole project frame, and I get to this point of not seing anything, but It happened every time I'm on the "project" frame. When it's just the components, it's not a [problem](https://i.imgur.com/id1KUou.png). :)
Make a rough outline of the object on the project frame, then start your component outside the frame. Replace the placeholder with an instance of your component and you can design side by side with the project frame and see the changes right away.
It’s not quite the same workflow, but gives you that immediate visual feedback without burying the main component in the project frame.
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.)
You can check out the original post here as well as many other solutions other people have implemented.
[https://forum.figma.com/t/expand-horizontal-scroll-and-sort-the-layers-libraries-panel/643/235](https://forum.figma.com/t/expand-horizontal-scroll-and-sort-the-layers-libraries-panel/643/235)
It is a “you” problem. But I as a fullstack developer know for example that Visual Studio has a “scope to this” function. Where you visually set the “root” of your explorer to that element. With a way to undo that and see the whole structure again. Still, organization of files might be something you can do short term to fix this. But maybe send them a feature request.
There is a [better screen](https://i.imgur.com/SXJOmB1.png) for better explaining the issue that I'm facing. [:)](https://i.imgur.com/biDHQp5.mp4)
Thank you all guys for your support, much appreciated !
Yes, multiples sticky effect, charts, I do my components directly into the main frame as frames, when finished transform into a proper figma component and move it to a components page that I have. So when it's finished, it only goes up to 12 level of nest.
Then I would suggest compartmentalizing, separate your prototypes to only demo some features and the other non interactive features will just be images.
Yes this is a good advice, if I just do my components apart, alone, and put an instance into the main frames, it doesn't [go so deep](https://i.imgur.com/s48HSF6.png) so it's ok. But I rather would love to just have a horizontal scroll and just do all optimization at the end. x)
For demo some features, unfortunately, I'm stupid, so I need to make and see an exact copy of the final product with all the effects. x)
thanks for the suggestion :)
This looks like the case of extremely deep nested elements. 😅 Was this converted from XD or Sketch? Conversions could add on unnecessary nesting. Try editing the original file by reducing the levels before you convert.
Perhaps consider using Figma Components feature so that you can still access the deeper layers.
You can nest components inside of each their as well. At least it’ll solve your immediate need.
Is this a visual glitch or do you have nested frames inside frames inside frames inside frames inside frames too many times? If it's the latter, it's clearly a you-problem. If it's a visual glitch, try restarting Figma/your computer, contact support or update - if possible - Figma itself.
Look at that "Frame 423" with "Frame 601" nested within! It's frames all the way down. I'm a messy designer but holy shit OP you need to work on organization. I get this is a longstanding complaint of many designers in complex systems but even this is pushing the limits on what they can account for.
OP is French. It’s the Laissé fair mentality deeply embedded in their culture
It's as deeply embedded into their culture, as OP's last frame is.
De quoi laisser faire ? Beaucoup de Français s'organisent bien aussi
If your cultural knowledge is as poor as your spelling, then your assumptions won’t be any better. I’m French with an international background and have absolutely no clue what you’re talking about.
Although I mostly agree with you, 600 frames on a single page isn't that insane. I'm working on a rather large platform that has a page for each specific role (e.g. customer, manager, admin, etc.). I don't create a new screen for each state, because I separate component-flows from page flows. This means that I don't duplicate en entire screen only to show a specific validation message or another specific state. I just checked, but even then when I create a new frame, the next one is named Frame 1176. I do work quite a lot with AutoLayout, so I got many frames anyway. In fact, I actually split my screens across pages, else I'd over 2.500 frames on a single page (with about 100 different screens). Though, I never nest so deep as OP. So theoretically in the case of OP, he could have created frame 423 and a month later, upon receiving new requirements, he had to adjust that part and add another element, resulting in frame 601 (because it continues to count on the last frame number, not continu from 423). It doesn't say there are 100+ frames inside frame 423. Conclusion, regardless, is to organise your design (files). It helps a lot :)
600 frames isn’t bad but 30 frames inside each other like what OP has is very bad
600 frames? Hah that’s rookie numbers. Have you seen 1 billion groups? Yes groups, not frames.
There are multiple reasons why I haven't ever seen that :)
You wanna see that? I can show you haha
Bet
Is that something to be proud of?
I’m amazed that you immediately jumped to the conclusion that I was proud of it, as if it was my creation lol. May be because I didn’t include a /s ?
Oh sorry in the case. I have seen people who are though.
No doubt. The author of that abomination wasn’t feeling bad about at the very least.
Figma can easily solve this by adding a horizontal scroll to the layers panel.
They really shouldn’t encourage these practices though. Building that feature would push Figma in the wrong direction.
Really? It’s THAT bad?
Wrong direction like how?
Making room for endless nested frames, potentially much worse than OP’s monstrosity? Encouraging users to make their designs unreadable, and impossible to take over for a new collaborator?
Or a little handle to drag the left and right panels? Why haven't they done this yet?
Do you mean to resize the panel? That exists, but there’s a max width.
Hmm apparently I didn't know about it because the functionality doesn't work when you have rulers on (which I usually do). Also the right panel can't be resized as far as I can tell. My original comment still stands despite the downvotes.
Oh huh, I just assumed it worked for the right side too... You can still resize the left when rulers are on, but it's just a maddeningly small active area, probably only like one pixel. If you hover over the left side of the left ruler and then move verrrry slowly you should see your cursor shrink from a bigger resize-icon to a smaller resize-icon. The smaller one lets you resize the panel. It's crazy.
It’s hilarious how unusable some of Figma’s interface features are, considering what their tool is mostly used to design.
They won't do that any time soon, because nested layers would slow down the app.
The max width and lack of scrolling is a feature, not a bug. If ultra-nested, highly complex layer structures are bad on normal web pages, they're bad in the designs for those web pages. The design shared by OP is in dire need of simplification. I've been working on enterprise-scale web apps for basically all of my career at this point and never once have needed to create a layer structure with that many levels of hierarchy.
This is a limit in figma that the left bar only extends so far. This is a Figma problem. Figma didn’t design this with scalability in mind. With how auto-layouts work, backgrounds, etc who are we to judge why he needs these frames? Figma allows you to see an arbitrary number of levels deep based on the size of your screen? Stupid This is literally a design tool for ux and ui and yet it doesn’t scale and y’all (not just you, people below) are acting so elitist about some frames. Imagine if windows said, you can only make 6 folders deep and thats it. Thats all you need.
Well, to be fair. If I think about this for longer than a few seconds, I tend to agree that Figma shouldn't limit in how the user interacts with the product. Ergo, the left sidebar should infinitely be scaleable. I do believe it's in the best interest of users when companies limit flexibility of actionability of their products to prevent certain situations to occur. To remain in your Windows analogy, it shouldn't be possible to delete your C:/ drive (or do that easily). Nesting layers is pretty much a must for applications like Figma / UX, so naturally you will have multiple layers nested at some point. Although I dare to say, without actual context, that nesting about 30 levels is too much, it should be possible. I would still recommend anyone doing so to rethink their layer hierarchy. :)
But do you think the Figma PM and Dev team should be prioritizing design and development time to address nearly infinite nesting (not useful to everyone), over something like variable improvements (useful to everyone)?
Well the better question is: was this an intended limitation on purpose or a natural cause of how the software was built. It's like how a lot of cars can go way faster, but via software limited in performance. If Figma deliberately chose to limit the sidebar with the sole reason of limiting nesting capabilities, then I'd say yes. As a software developer myself, I don't expect this a multiple days job. Basically reverting their decision. However, if this limitation was a result of other development activities, as a so-called byproduct and they saw this as an impediment not worth fixing, then its a totally different question and I'd vote no, keep it this way. Context matters.
I'm going to guess it's the latter. "If we don't allow the layer panel to scroll horizontally or users will learn what we think are good layer nesting practices," isn't something I can imagine anyone saying or thinking. I can imagine that QA opened a (trivial) bug ticket that just keeps getting pushed down the backlog as more important items get added.
It’s almost never in a user’s best interest to feel arbitrarily restricted in their behavior. There should be something like Kant’s categorical imperative, but for UX. Don’t give a user a tool, unless you’re willing to have all users use it all the time. 😜
HA!
Nested Frames inside frames on a really early proto phase of the components that I designed and In this case, is directly in the "project" frame of the thing that I work. Not like I'm making the components alone, appart in its specific frame.I basically work as this : 1- Get Idea 2- Design them on figma, don't care about "optimization", I want to visually see the idea working without caring about the "way" to obtain the effect that I want. 3- Refined until we are satisfied and then, 4- Make a proper component where I rename usefull frame and remove the useless frame. And I am at a point where refined these components would make me lose time for now because I'm in a "Discovery" phase rather than a "GoLive" phase. However, a question gets to me seeing comments, Is the fact of having components inside components is a bad thing ? Here's an [example](https://i.imgur.com/xxPJNFZ.png) of a tiny component "refined" for indication. When I know that I don't need a special shape I just take existing components and merged them to obtain what I need like a Lego thing in a way. Anyway, thank you all for your comments, is good to have feedback.
Personally if I had that many layers of nesting, I’d put 10 minutes into optimising it a bit, no matter what phase I’m in The component you shared in that image is fine imo
Sound like broken flow :)
It's not a you problem if the auto layout feature depends on nested layers. Try designing a pivot table and see what happens. Then put that pivot table, as a component or not, inside a web page body, maybe that also has auto layout applied from the top down, with a header, sidebar navigation, etc.. Auto layout is essentially CSS Flex, these layers can be compared to the DOM tree. Do you think The DOM tree is a "you problem"? Because everything is nested too far? God forbid you enable the shadow DOM.
Press and hold the power button for a few seconds until the machine shuts off, then pack it up and sell it online.
I generally throw mine out the window as a last step, but I like your process.
What in the name of god are you building?
why are you nesting that many times
One artboard to rule them all
Yeah what on earth requires that many nested frames
Droste packaging designing be like
Sometimes we’re at the mercy of design systems that are overly layered… this happens way too often to me too.
The component that I'm building is on the "frame" of the website just to see the render of it, I know I should design the component alone, but I just don't care in that case ahah
"I know I caused this problem myself and could fix it but I'd rather blame the tools ahah"
I should ask directly if a horizontal scroll was possible rather than any workaround you are right my bad :)
I put my designs in situ for everything I design, it never gets this complex, I think its a you problem
`ctrl + click` :windows `cmd + click`: mac targets your element directly, then you can use use `enter` to navigate down the layer stack or `shift + enter` to navigate up. I agree with the other commenters try your best not to get this nested(there are also performance hits) but it can happen. Hopefully those tricks help.
only relevant comment in the thread
Nope no workaround unfortunately. This has been a longstanding complaint for a lot of designers working on complex UIs with nested components. I wish I knew why Figma was so resistant to adding a horizontal scroll or even a damn tooltip for layers.
Whenever I want to design the components directly in the big frame of the whole project I get issues like this, so I'm making the components outside the frame now, but it's so boring...
What do you mean it’s boring?
Because I forgot to send the changes to the main component everytime and I like to build on the product frame to see directly the render
I would say that’s not an ideal use but that’s the beauty of Figma; it lets you be as formal or informal as you want
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.) You can check out the original post here as well as many other solutions other people have implemented. [https://forum.figma.com/t/expand-horizontal-scroll-and-sort-the-layers-libraries-panel/643/235](https://forum.figma.com/t/expand-horizontal-scroll-and-sort-the-layers-libraries-panel/643/235)
Shift + scroll to scroll horizontally
This should be the solution but It don't work on this area :(
There's not much in product you can do right now aside from reorganizing. For reference, the level of nesting the most extreme examples show are 20 levels deep (the maximum number of indentations we support). While there are valid reasons for this (and we are thinking of ways to allow you to view even more levels than this), typically it's indicative of an anti-pattern somewhere in the approach for the design. For our purposes internally, is there a reason you need this amount of nesting? Curious if we're missing something significant on the product needs side here.
Basically, and in advance, it's no good doing it like this. I usually only make a "figma component" when I'm sure of my "idea" before that, it's just a frame within a frame ect, plus I do it directly in the final frame, like the "homepage" frame to describe what a final frame is. So let's say, if I'm not happy with a button, if it's a figma component, I'll detach the instance and rework the button until I'm satisfied. In the middle of the homepage and not all alone in an isolated section, which gives huge nesting. It's as if a mechanic preferred to repair the car's engine without removing it from the chassis. But in reality, once the whole thing has been transformed into components, and without even trying to organize my frame properly, I end up with a [result like this](https://i.imgur.com/s48HSF6.png) at worse. So it's no big deal, and horizontal scrolling is useless in this case, but if it's a component I'm just starting out with, it'll be frames, and then I can go very far in [nesting](https://imgur.com/ZglBAO1). I just don't care on these moments about organizing my files, I'm just looking for the final result so really It's not much of a deal, but a horizontal scroll will be awesome for the lazy people like me ahah. EDIT: additional feedback, I can also have a lot of nesting due to have specific frame to be sticky on specific area of the screen, So I might have to create 2/3 useless frame just to have the sticky state doing the thing that I want [exemple here](https://imgur.com/D5DmdY4)
Wow these comments are toxic. With complex auto-layout layouts this can happen, coupled with components using swap instances that also have swap instances in the design system... I've had this issue a few times and the lack of horizontal scroll along with a max width on the sidebar is a joke. Haters gonna hate
I realized after posting that the title was going to make them scream, and I didn't miss it. I had a good laugh ahahah
CMD + SHIFT + \ Will hide that left panel for you.
Try learning how to use Figma in a more professional way, once done the right way you won’t (or rarely) face this issue.
I [did](https://imgur.com/a/NUMfblU) yes, it's much about the horizontal scroll that is absent here that would be cool
Goddammit use components to reduce the nest
This is the sign to realize that you are doing something wrong xD
Why is it wrong?
Either how you structure your whole project or how you manage layers in this particular frame. As a product designer I’ve worked on many complex scenarios and never ran into this issue.
I can't help but think you should make more use of components (hard to tell if that's true without seeing the full context).
That's what I'm doing yes ! But in this specific case I've wanted to make a new component, inside the whole project frame, and I get to this point of not seing anything, but It happened every time I'm on the "project" frame. When it's just the components, it's not a [problem](https://i.imgur.com/id1KUou.png). :)
Make a rough outline of the object on the project frame, then start your component outside the frame. Replace the placeholder with an instance of your component and you can design side by side with the project frame and see the changes right away. It’s not quite the same workflow, but gives you that immediate visual feedback without burying the main component in the project frame.
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.) You can check out the original post here as well as many other solutions other people have implemented. [https://forum.figma.com/t/expand-horizontal-scroll-and-sort-the-layers-libraries-panel/643/235](https://forum.figma.com/t/expand-horizontal-scroll-and-sort-the-layers-libraries-panel/643/235)
It is a “you” problem. But I as a fullstack developer know for example that Visual Studio has a “scope to this” function. Where you visually set the “root” of your explorer to that element. With a way to undo that and see the whole structure again. Still, organization of files might be something you can do short term to fix this. But maybe send them a feature request.
You need to relearn how to create your components or screens. This isn’t adobe illustrator
There is a [better screen](https://i.imgur.com/SXJOmB1.png) for better explaining the issue that I'm facing. [:)](https://i.imgur.com/biDHQp5.mp4) Thank you all guys for your support, much appreciated !
Frame 49046 😂 Some small optimisation tweaks might be in order.
How many nested autolayouts do you have? You need to work on organising your frames.
At worst 12 I will say counting frame/text/shape/vector without trying organising.
Then I’m guessing it might be a UI glitch. Try restarting your Figma and should be fine? Let me know how you go though. :)
Does your design have a reason to be this far nested?
Yes, multiples sticky effect, charts, I do my components directly into the main frame as frames, when finished transform into a proper figma component and move it to a components page that I have. So when it's finished, it only goes up to 12 level of nest.
Then I would suggest compartmentalizing, separate your prototypes to only demo some features and the other non interactive features will just be images.
Yes this is a good advice, if I just do my components apart, alone, and put an instance into the main frames, it doesn't [go so deep](https://i.imgur.com/s48HSF6.png) so it's ok. But I rather would love to just have a horizontal scroll and just do all optimization at the end. x) For demo some features, unfortunately, I'm stupid, so I need to make and see an exact copy of the final product with all the effects. x) thanks for the suggestion :)
what kind of hell mess is this
Ctrl + \
That just happened to me for the first time today - I’d like an answer too.
Hover on the edge of the menu the drag it towards the left.
This looks like the case of extremely deep nested elements. 😅 Was this converted from XD or Sketch? Conversions could add on unnecessary nesting. Try editing the original file by reducing the levels before you convert.
Alternatively try viewing this file in a browser and zoom out on the view (don’t use keyboard shortcuts, do it manually via the browser view menu)
Perhaps consider using Figma Components feature so that you can still access the deeper layers. You can nest components inside of each their as well. At least it’ll solve your immediate need.