They have officially added this feature to Figma! Thank you!
- Create “sticky objects” that stay in place at the top of the frame once you scroll past them
They have officially added this feature to Figma! Thank you!
- Create “sticky objects” that stay in place at the top of the frame once you scroll past them
A post was merged into an existing topic: Improve the New Position Sticky Implementation
3 posts were merged into an existing topic: Improve the New Position Sticky Implementation
For any new feedback on this feature please refer to this new topic thread: Improve the New Position Sticky Implementation
Please, please, please…. Add “fixed position when scrolling” capability to items that have autolayout. OR, a native workaround to remedy the issue. The case that I run into on nearly every project is I will have a webpage that is set up to auto-expand with the content throughout the page. For example, accordion panel content and expanding sections that will change the overall document height as items are toggled on/open when in the prototype preview. This is great for more accurate client presentations to show the intended usage of the design. The trouble is when a client wants a sticky nav AKA “fixed position when scrolling” within that prototype, we have to do some pretty odd workarounds to make this viewing experience seem natural. Or we have to simply leave it static and reassure the client that the developed page will have the sticky nav fully functioning. Not ideal to ask the client to have a good imagination about how the end result will function.
Ah. So that’s why I can’t seem to find “fixed position when scrolling” no more in the side bar… it’s gone for auto-layout items. Bummer.
Boosting this! Same use case as Original Poster but for a mobile app: I have a screen that I want to auto-expand to fit its contents as different accordion menus are expanded/collapsed BUT I still want the header and footer navs to be sticky to the top and bottom of the screen, respectively.
An additional ask would be to set a minimum frame height for the parent frame (screen) because when all of the accordion items are collapsed, the page contents don’t fill the length of a mobile screen.
I’m also working on a prototype where we have a full auto-layout page but still want a fixed-position navigation on top. I would like to know how can we do it since the auto-layout here is extremely important to have.
Maybe we could have floating elements that could be placed over the auto-layout without interfering with it - and these elements could have a fixed position or not, for more freedom.
Bump. Same basic use cases as mentioned here. It’d be great if an entire master frame could obey autolayout rules but we could have elements (top or side nav) that fix when scrolling the entire view, and potentially have their own scroll views within them.
My specific case (beyond a sticky top nav), I want a main side nav to stick when scrolling, but it also has an “expanded” drawer state for subcategories that can either overlay the page content on hover, or can be activated to reflow the content view width and remain persistently available. Using interactive components and autolayout I can preview all the interactions on a single frame if I put the drawer in a horizontal autolayout frame with the page content. Clicking the default state of the drawer expands the drawer using smart animate and reflows the content that is to the R of it, but when I scroll the page down the drawer and content view have to scroll together. The desired behavior would be to have the drawer stick and the content scroll, and even to allow independent vertical scroll within the drawer (since it includes items like expandable filter groups that can increase the amount of content in the drawer and that the user may want to scroll through and select independent of their position in the content view).
This is currently available for absolute position objects in Auto Layout. An example file can be found at the link below:
Yep, been looking for that as well. It’s sad that it’s not available.
I think I found a good solution to your problem, but not sure if I understood your use case well.
Basically you can create a frame with auto layout, in it 3 frames:
See my example file:
PLEASE ADD THIS.
This is so essential to prototype demos with sticky side navs and scrolling content. I need a left right expand collapse of a side nav while it also staying in place vertically and being able to scroll the content. You would not believe how may stakeholders have asked “is it going to actually do that?” when it doesn’t stay in place when I do my demos.
A post was merged into an existing topic: Improve the New Position Sticky Implementation
How to stop it from sticking at certain point?
Not sure if I’m seeing anyone have the issue I’m having. I can make a component stick at the top and stick at a certain point on the page but what I need is a component to stick to the bottom of the browser window. I test my designs with users and they have different mobile devices and screen sizes. I need the prototype to recognize the users screen size and stick to the bottom of their window. Does anyone have some hacky way to do this? I miss Axure RP.
Vertical offsets to sticky elements please - this is currently useless to me - when I have an android Status bar already fixed to the top of the screen (sticky element partially scrolls under the fixed element).