Improve the New Position Sticky Implementation

I was so excited about this feature, but especially for stacked content and lists (which is where I imagine most people are using the sticky feature) I don’t know how you could not use auto-layout. I had to look through the forums to realise that the reason it was doing funny things for me was because I was using auto layout :sweat_smile:

In other words, +1 from me!!

2 Likes

Nice feature! However when I make my frame that has a horizontal scrolling in it, stick to the top, somehow the horizontal scrolling doesn’t work anymore.

2 Likes

would love to see this feature evolve
maybe adding “sticky to parent” or “choose element to stick to”

2 Likes

It’s a step in the right direction but still not quite there to make it integral to my workflow, in my opinion.

Two things I feel would give this feature more parity with the CSS ‘position: sticky’ property:

  1. The ability to enable this for any element to stick to its parent regardless of frame overflow (this would make it useful for compositions using auto layout)

  2. The ability to specify an offset amount from the top of the viewport (not dissimilar to the properties found in the ‘Scroll To’ prototype interaction).

2 Likes

Interactions inside a group that is sticky do not get sticky. They scroll with the parent. While the whole group (in my case, a component for a navigation menu) gets sticky, the “interactive areas” scroll with the parent, making my navbar unusable.

The new sticky/fixed features are really useful - however it would be great if you could limit these features to within a certain frame.

Because you can’t control the end point you just have your fixed content overlapping content below it…

Thank you all for the feedback!

We passed this thread onto the team who will be working on a few improvements for the near future.

+1 !!!
I feel exactly the same way.

  1. Relies on all elements being on the same level. Which is contrary to Figma telling us to use auto layouts and frames. WTF
  2. The Sticky elements naturally fall underneath the ones that scroll. Another WTF. Why not z-index the sticky elements to stay on top. This is CSS 101.

I like and appreciate the updates but they are simply useless in 99% of all professional use cases. It’s like the figma is run by people that haven’t worked in corporations or large companies where speed, robust design systems and user empowering prototypes are the way to communicate ideas and iterate from user feedback. (We don’t all have the privilege of having a dedicated front end dev on hand.) Axure kicked so much ass with variables and dynamic panels. If Figma could simply educate their staff on Axure mechanics, they could avoid these launch feature problems they keep having. Axure, Principle, Framer…please learn these first!!! We need some old school veteran designers up in there.

1 Like

I totally agree with all this. I build everything with Auto Layout and immediately ran into issues with ‘sticky’, needing to extract the component from the flow of elements, and then needed to modify it to add some dead space on top for it to hit below the fixed header.

Excited for the feature(s), but not implemented well.

1 Like

Please add the function to make the sticky item stop being sticky on a certain level after scrolling.

2 Likes

Hey @Teodor_Gatu,

We’ve moved your comment to a more relevant feature request topic. Our team is already monitoring this thread for future improvements.

1 Like

I’m a 100% with you on that one. It’s why I’m so frustrated about the fact that the sticky element has to be an immediate child of the scrolling container.

If we could have sticky elements that’s not immediate children of the scrolling container, the elements could stop sticking when the parent container is scrolled past the viewport. (Just like the CSS implementation).

2 Likes

And I think Figma messed it up…

Let’s go through some pains:

  • sticky behaviour doesn’t work with AutoLayout
  • in order to create it you need to:
  1. Create a Frame
  2. Reduce the height
  3. Apply Content clip
  4. change scroll behaviour to “Scroll (vertically)”
  5. place elements on the Frame (no auto layout)
  6. select some and apply Sticky to them

I was waiting for sticky elements for such a long time and it’s a complete fail.
Everything in my projects is Auto Layout, I’ve mastered it, and know how to nest and work with it to get almost 100% results as if it was implemented with HTML/CSS

Let’s imagine that I have something like this: Figma sticky elements doesn't work with Auto Layout - YouTube (video might still processing)

There’s no way to do it. And it my video above you can see how to set up a mobile view which is 100% auto layout and it scrolls nicely with a fixed header and footer.

There’s a room next to “Clip content”, or, what I just saw, you moved “Fix(ed) position” below the Auto Layout to the Prototype tab. Ugly surprise. Sticky is either true/false, and can be top/left/right/bottom.

Sorry Figma people, sticky headers are unfortunately trash :slight_smile: but lots of hugs and kisses for other updates.

Still waiting for navigating between pages in prototyping! :heart:

6 Likes

and if you make an update related to prototyping, answer these questions:

  • will it work with components (and variants)
  • will it work with auto layout
  • will it work with multiple ways of setting up a scrolled view (fixed header/footer as it usually works in mobile apps)
  • how deep I can nest it?
  • how it will affect the Figma interface that people are used to?
4 Likes

Well that’s a bummer. I’m a heavy autolayout user as well…

Thanks for the feedback, @PartyParrotGreg & @SLT-UX!

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.

5 Likes

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.

  1. Sticky needs to work with auto-layout
  2. 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!

1 Like

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!