Hey friends, last week we dropped some Little Big Updates and one that I'm very
excited about is the sticky scrolling.
I have been trying to find ways to hack this a little bit for a
while now, and I'm excited that it's officially part of Figma.
So I wanted to go through how to set up sticky scrolling, cause there was a
couple of things that tripped me up a little bit when I was first trying it out.
So I wanted to make sure that you don't get stuck on those too.
So, first thing I noticed is that you're gonna have to remove some
auto layout to make sure that the layers are ordered correctly.
What I would recommend is design as usual, throw that auto layout in.
That's gonna make it a lot easier for when you're designing.
And then determine if it actually needs to be prototyped.
Then we can remove the auto layout.
I've got this page set up right here.
This is just a menu with some headers that I want sticky and some menu items within.
I'm gonna duplicate this because I've set it up with that auto layout.
I wanna keep that as is, and I'm going to make a new art board for my prototype.
I'm going to take my menu here and I'm gonna take this section right here.
Gonna get rid of that.
And I'm gonna call this body.
Now this section you'll notice is auto layouted, and that's not gonna work if
we want things to be properly sticky.
So we're gonna un auto layout it using Option Shift and A, perfect.
We're gonna throw this body in here and I'm going to uncheck clip content just
so I can see everything that's going on.
Now let's move over to the prototype settings.
We want this main screen right here, we'll call it main screen, so
we know what we're talking about.
We want this main screen to have no scrolling.
It's everything within that we want to be scrolling or sticky.
Then inside of it, we want this menu to be fixed.
We never want that to move.
We always want it to be fixed at the top.
Then going in a layer deeper, we have our body frame here.
This one we want to scroll.
This one, we're gonna have vertical scrolling because we
wanted to scroll up and down.
And then even further deeper in, we're gonna grab these headers,
these, we want to be sticky.
You'll see now that we have this option here, which wasn't there before, sticky.
So stop at the top edge.
And the reason, speaking of the top edge, that we had to put this in another frame
here, is because if we put this all just in this main screen here, it's gonna go
to the top edge, which is this right here.
It's not gonna stop at this menu.
It's gonna go all the way to the top, and that's not where we want it to be.
So that's why we have this other frame within here.
Everything else I think, should be in a good state.
And, I'll tell you right now, it's not gonna work.
And let me show you why though.
Cuz this is where I got tripped up first.
So let's go here.
And it's stuck.
It's kind of, I can only go so far.
Why is that?
That is because the second frame that we have within here is still set
to the full length of the content.
We want to shrink it down so that it is the same size as the screen.
And actually, even before we do that, I'm gonna add in an extra little
rectangle here, just so we make sure that the scroll can keep on going past
this one edge right here, we wanna give it a little more room to go.
So we're gonna change this to white cause that'll match the background.
And then what I'm doing now is I'm shrinking this up to be to
where the edge of the phone is.
So now it's still not gonna work properly, but we're closer.
Now we can scroll.
Okay.
You see it's scrolling.
That's great.
But the issue is that the layers are in the incorrect order,
so we need to change that.
To get that correct.
We wanna make sure that the headers are grouped together.
And I wanna be careful when I actually say grouped, cuz I don't mean I
want them in a group, I just want them physically grouped together.
If we put them in a group, it's also not gonna work and I can show you why.
So actually let's just do that command G to group them together.
It's now not sticky anymore.
It took away that stickiness.
And even if we specify in the group that we want it to be sticky, it's still
not gonna work because now everything is sticky cuz that top part is already
getting to the top of the page.
So we don't want them to be grouped.
So we're gonna make sure.
That we ungroup those and let's just check our settings again.
Perfect.
Those are still at sticky, So now they're together but not grouped.
So they should be working now cuz they're in the correct order.
So let's check one more time and now everything is working as expected.
Yay.
Awesome.
So hopefully that's a little bit of help with sticky scroll.
Test it out.
Let me know if you have any questions with it, and happy scrolling.
Bye.