Well that’s a bummer. I’m a heavy autolayout user as well…
We’ve merged your feedback with an existing, similar feedback thread. Our team is already monitoring this thread and hope to use it for future improvements.
This topic was automatically closed after 30 days. New replies are no longer allowed.
I’ll keep this short and simple because no doubt, others will also want this feature upgrade.
- Sticky needs to work with auto-layout
- Sticky items should be sticky to the top and bottom of the parent container
Currently, sticky items are only useful for top menus and headers and nothing else. There are many other uses for sticky items like submenus, background elements etc.
Allowing an element to be sticky to the limits of the parent container means a top and bottom limit can be set enabling a plethora of uses.
Get about it Figma!
Hey @DanJWill ,
Thanks for your feedback. I merged your feature request with a similar one, so it will easier for our team to follow-up. Feel free to add any additional context over there!
I’ll add in another request for the ability to “un-fix” an element after a certain distance scrolled or assign it to a parent element that controls the clipped effect.
My use case is a simple bottom popover in a sidebar on a page that scrolls. Well, I want that popover to always remain visible at the bottom of the sidebar but stop when the user scrolls passed the sidebar and reaches the footer. As it stands now, it continues down the page with me.
Either allowing fixed elements inside of autolayout frames that are not the items with a prototype Overflow Scroll option enabled or being able to set it to sticky from the bottom of specific container would be helpful.
Are there current hacks to add content below the sticky element?
Getting the feeling we aren’t going to see a fix for this anytime soon.
One more way Figma not using real CSS makes our lives harder and makes their adding features slower. In the meantime Webflow, Framer, Plasmic, Webstudio, and others all have had this feature for a while.
Today we launched Sticky scrolling improvements!
Now, sticky scrolling can be set on any node or descendant of an overflowing frame. This means that objects can scroll and then“stick” for a period of time before scrolling again. Learn more about prototype scroll behavior in Figma.
The new implementation is a big improvement and now makes it a useful feature for us!
I do have a couple of suggestions to improve the functionality further:
Allow an ‘offset’ value from either the top or bottom of the viewport (or left / right if using a horizontal overflow) – this would eliminate the need from having to hack extra padding on the desired component
Definining z-index – you can kind of manage the order using auto layout canvas stacking, but there’s edge cases where you might want finer grained control (e.g. if a layer is in the middle of the stack, or if you want a sticky layer in an auto-layout to be in front of some layers but behind others)
This one’s part of a larger request, so possibly beyond the scope of just this feature – but the ability to swap a component variant if sticky is detected would go a long way to adding fidelity to a prototype. This could also apply to fixed layers, although I feel this would require an offset value to be useful
I agree with @Phill_Cresswell, that having a Z-Indez override would be ideal here.
I’m building everything with auto layout, and that means to get it on top, it’s actually a lower layer level, meaning when it sticks at the top the rest of the content scrolls over top.
I also very much agree with the swap on scroll idea too. Often a drop shadow appears only on scroll for a header, and there’s no clean way to implement this in Figma.
Here’s a demo of sticky headers in and out of auto layout.
Strongly agree with @Phill_Cresswell… Figma could enhance these aspects to further improve the utility of the sticky behavior.
Big plus 1 on allowing an offset value!!
Big +1 here as well.
I really, really need an offset option. I can’t get it to work when used alongside a fixed header, the sticky content section always scrolls below the header. Any top padding/margin or spacer gets ignored, so the content sticks to the top of the screen (and is cut off because of the fixed header) – but I actually want it to stick to the position that is
Header height + padding/margin.
Actually, when using the sticky feature, it is so unsatisfying that I just give up and I end up not using it.