More of this please Figma! I'd love to be able to set xy markers as triggers to change a component, so that an element isn't just sticky, it can also switch to another component display once a scroll position is hit. Also, I'm not sure if it's possible to reveal and show components based on scroll direction, but that would be very helpful - as bottom and top nav or action bars often have specific hide and show logic based on scroll direction.
Why add a frame and resize it with contraints added to the objetcs/components inside? Would't be an autolayout with a specified / consistent size of top padding be more efficient? Why skip your cool autolayout function? Following your way if the inner objects/components change in content lenght, you would have to readjust the containing frame each time. With autolayout, the change would be implemented automatically.
Thanks, Figma, for the great content. One quick question: Is double nesting, as in 'callout-1 < sticky-offset < sticky-constraint,' necessary for it to work? Or is it enough to just nest once as 'callout-1 < sticky-offset' with extended bottom padding?
In that case, the callout will stay on the page and will not scroll out of view because the "sticky-offset" frame direct parent is the "blog" frame. With sticky scroll, objects always stay within their direct parent’s bounds. We need to add the "sticky-constraint" frame so that we can control when the objects will scroll out of view.
I would like to have a sticky button at the bottom which stays sticky until I scroll to a certain position and stops being sticky if I scroll further and becomes sticky again if I scroll up again.
I need to know how to do this! I need to have it so it stays sticky at the bottom after a certain point. Seems logical to be be able to have a "sticky stop at BOTTOM" edge action as well right? does anyone know how to do this???
Is there a way to know if a frame is 'stuck' so we can mimic the ios behaviour where a large title animates into the header on scroll. It would require the text position and size to change which would be a variable. But we would need to know if sticky = true to change between the two states.
I would love to have a scrollbar that scrolls (in reverse direction) as I scroll...Like in websites when I scroll down, the content moves from down to up while the scrollbar moves from up to down. As I see this is impossible to do at the moment with figma!
Figma just keeps implementing behaviors that are the exact opposite to how browsers behave… 🤦♂️ Why? Who designs features that evil way? Having the parent frame fixed size is the worst solution to the problem. It's beyond obvious that Figma's code is terribly written and completely inflexible, hence all those half-baked features like variables, counterintuitive behavior of features like stacking or completely broken interaction between absolutely positioned, fixed elements and items stacked using first/last on top. Figma is becoming the next Axure RP…
that's why every time we want to prototype a design we have to break a lot of the layers, components and autoframes just to make it work somewhat properly
@@PaulPalade still, when you are user testing the designs, and easier way of prototyping would be much appreciated. Of course, the are dedicated softwares for this purpose such as Principle, but for making your prototype work like it would work in a real environtment, you can do it with multiple workarounds within in Figma. I've been a great lover of Figma for several years now, but I can constantly feel these limitations during my work.
To be honest, scrolling behavior makes no sense without dynamic scrollbar component since it affects the perception of content boundaries. This always bothers me.
I'm stuck with Figma cause that's what the project I'm in use😩 I'm hoping the Adobe takeover will introduce some XD editor magic into Figma. Perhaps some floating palettes and better overall typography support. Figma is also veeery slow so perhaps Adobe can speed things up and get the application Integrated with CC. Coming from XD to Figma is a huge reduction in user friendliness.@@heidivan
More of this please Figma!
I'd love to be able to set xy markers as triggers to change a component, so that an element isn't just sticky, it can also switch to another component display once a scroll position is hit.
Also, I'm not sure if it's possible to reveal and show components based on scroll direction, but that would be very helpful - as bottom and top nav or action bars often have specific hide and show logic based on scroll direction.
This would be so helpful! You can definitely do this in Framer though
I literally was searching everywhere for a 'how-to' on this feature a week ago!!! So excited to see this.
This is a life saver for beginners. Learned this so fast!
Why add a frame and resize it with contraints added to the objetcs/components inside? Would't be an autolayout with a specified / consistent size of top padding be more efficient? Why skip your cool autolayout function?
Following your way if the inner objects/components change in content lenght, you would have to readjust the containing frame each time.
With autolayout, the change would be implemented automatically.
most wanted tutorial, thank you ❤
Thanks, Figma, for the great content. One quick question: Is double nesting, as in 'callout-1 < sticky-offset < sticky-constraint,' necessary for it to work? Or is it enough to just nest once as 'callout-1 < sticky-offset' with extended bottom padding?
In that case, the callout will stay on the page and will not scroll out of view because the "sticky-offset" frame direct parent is the "blog" frame.
With sticky scroll, objects always stay within their direct parent’s bounds. We need to add the "sticky-constraint" frame so that we can control when the objects will scroll out of view.
This is a very useful one, thanks a lot Figma ❤️❤️
please make more tutorial like this
I would like to have a sticky button at the bottom which stays sticky until I scroll to a certain position and stops being sticky if I scroll further and becomes sticky again if I scroll up again.
I need to know how to do this! I need to have it so it stays sticky at the bottom after a certain point. Seems logical to be be able to have a "sticky stop at BOTTOM" edge action as well right? does anyone know how to do this???
Perfect explanation! Thx
goooo team-figma, bravo!
Great tutorial, thank you for sharing :)
Is there a way to know if a frame is 'stuck' so we can mimic the ios behaviour where a large title animates into the header on scroll. It would require the text position and size to change which would be a variable. But we would need to know if sticky = true to change between the two states.
Awesome this is what i was looking for.
As someone with ADHD, I appreciate someone explaining in a good speed and being straight to the point. Thank you. ❤
Thank you! you saved my life! 😘
I would love to have a scrollbar that scrolls (in reverse direction) as I scroll...Like in websites when I scroll down, the content moves from down to up while the scrollbar moves from up to down. As I see this is impossible to do at the moment with figma!
To do this I can't use autolayout on the "body" frame?
Figma just keeps implementing behaviors that are the exact opposite to how browsers behave… 🤦♂️ Why? Who designs features that evil way? Having the parent frame fixed size is the worst solution to the problem.
It's beyond obvious that Figma's code is terribly written and completely inflexible, hence all those half-baked features like variables, counterintuitive behavior of features like stacking or completely broken interaction between absolutely positioned, fixed elements and items stacked using first/last on top.
Figma is becoming the next Axure RP…
that's why every time we want to prototype a design we have to break a lot of the layers, components and autoframes just to make it work somewhat properly
It's because Figma was meant to be an UI tool, not a web builder. For best parity with browsers I'd suggest either Webflow or coding!
@@PaulPalade still, when you are user testing the designs, and easier way of prototyping would be much appreciated. Of course, the are dedicated softwares for this purpose such as Principle, but for making your prototype work like it would work in a real environtment, you can do it with multiple workarounds within in Figma.
I've been a great lover of Figma for several years now, but I can constantly feel these limitations during my work.
To be honest, scrolling behavior makes no sense without dynamic scrollbar component since it affects the perception of content boundaries. This always bothers me.
Does it work with Auto-Layout now?
Thanks figma ❤ we appreciate your efforts
I still can't get to scroll out of view after adding the parent frame
you can make a whole website with figma at this point. who needs a portfolio when you have figma prototype mode
how to make sticky bottom?
Muchas Gracias!!!!!!
amazing
Why not just adding a pixel value just next to the sticky property ?? Figma is a pain honestly... We always need to find tricks to do what we want.
You’re best! ❤
Finally
Figma is not the best of prototyping tools, amof it's pretty lousy. It's great for team collaboration and administrating a DS, but the editor sucks.
What’s a better prototyping tool?
What do you use?
I'm stuck with Figma cause that's what the project I'm in use😩 I'm hoping the Adobe takeover will introduce some XD editor magic into Figma. Perhaps some floating palettes and better overall typography support. Figma is also veeery slow so perhaps Adobe can speed things up and get the application Integrated with CC. Coming from XD to Figma is a huge reduction in user friendliness.@@heidivan
❤❤❤
костыыыылиииии