I literally was searching everywhere for a 'how-to' on this feature a week ago!!! So excited to see this.

most wanted tutorial, thank you ❤

Well-explained tutorial! That’s what I need.

This is a very useful one, thanks a lot Figma ❤️❤️

This is a life saver for beginners. Learned this so fast!

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.

@yashkulkarni3809

5 ай бұрын

This would be so helpful! You can definitely do this in Framer though

Great tutorial, thank you for sharing :)

Awesome this is what i was looking for.

goooo team-figma, bravo!

Thank you! you saved my life! 😘

Thanks figma ❤ we appreciate your efforts

Muchas Gracias!!!!!!

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.

amazing

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.

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?

@Figma

7 ай бұрын

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.

As someone with ADHD, I appreciate someone explaining in a good speed and being straight to the point. Thank you. ❤

You’re best! ❤

Does it work with Auto-Layout now?

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?

Finally

you can make a whole website with figma at this point. who needs a portfolio when you have figma prototype mode

I still can't get to scroll out of view after adding the parent frame

To be honest, scrolling behavior makes no sense without dynamic scrollbar component since it affects the perception of content boundaries. This always bothers me.

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…

@fortytwo244

7 ай бұрын

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

7 ай бұрын

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!

@PeterMussinger-Nagy

6 ай бұрын

@@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.

❤❤❤

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.

костыыыылиииии

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.

@semyaza555

7 ай бұрын

What’s a better prototyping tool?

@heidivan

7 ай бұрын

What do you use?

@Underhills

7 ай бұрын

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