Hi everyone, in this video we're going to create this... there's a bunch of titles here that when you scroll up, watch what happens... When, covers... and then Where it covers, and you can kind of keep stacking them up... useful function on a mobile device... similar to this example here with the As, Bs, and Cs...

can you see there, stick to the top... the actual technique itself, you just turn multiple stickies on... like the last video... why is this video so long? Because there's a good few things to consider... and to recap that we've learned already...

to make this thing do exactly what we want... because multiple stickies are, just click on them, and make them multiple sticky... so lots to learn, it's a fun exercise to pull in lots of different kind of parts... what we know about Figma, get them all clear in our head... and make something kind of cool, I think it's cool... all right, let's get going.

To get started I made a new page called Event Details... I've put in some text that's more than normally fits into my phone... and the first thing I want to mention is... it can be confusing with the vertical scrolling... so at the moment if I click on my 'Frame', and I go to 'Prototype'... at the moment says, No Scrolling, but watch this...

all the scrolling, why is it scrolling even though I said 'None'? It's because my frame over here... is really long, and basically it's just starting to display it over here... and it kind of can't fit it so it just lets you scroll automatically... it doesn't really break what we're going to do, but it is kind of confusing... so what we need to do is just make sure our frame is the size of our...

I'm using iPhone 14, and you'll notice now, you can't see my finger... but I can't scroll, why don't you scroll... and what I find is useful is that, you need to make sure that... first of all, this stuff hanging off the edge, is super important... and sometimes it's nice to go, actually, under the Design mode... can we clip the contents?

Turn it off, so we can't see it, makes it a little bit clearer... but remember this for later, this Parent box here... has to have text that's overflowing... you don't have to clip it, but it's handy... then you get the options of going Overflow, Vertical... now we get our scroll going, excellent.

Next thing you might run into when you are laying this out... is what I was going to do is, I want to lay this out here... so I grouped this into a frame, can you see, it's called Frame 8... so I went along here, convert this to a frame... 'Command Option G', or 'Ctrl Alt G' on a PC... so just wrap that into a frame because I wanted to use it for spacing...

the trouble with this is that it's not going to work... like we did in the last video, what ends up happening is... you have the Parent set to vertical, done... then you have the bit that you want to stick... so I'm going to double click to go inside my frame... to say, make sticky, he can't be sticky...

why aren't you sticky? It's because his parent, which is Frame 8... is not set to Overflow, Vertical... so we can do that, but because there's nothing actually overflowing... it still doesn't work. So basically what that means is we need to break these apart...

they all need to be children of this outer frame here... confusing? Kind of, yeah, well, let's break them apart... 'Command Back space' breaks things apart... I think there's two ways of doing that actually... I like to use two shortcuts to do the same thing...

this one here, we can hold 'Command Shift G', 'Ctrl Shift G'... to break it apart as well, more of an Adobe Illustrator shortcut, but both work. So the goal here is to have just, see all these? They're all stacked nicely under my Parent frame, now it'll work... so you, now, I can see, they're sticky... you can be sticky as well...

so we're doing multiple ones, and you're going to go, "Hey"... oh, look at that, we all just get smushed up together... so that's basically it, if you want to learn how to stack them all together... all on top of each other, that's what you do. Let's do a couple of things that we're all going to want to do... is we're going to need padding from the top, so it sticks there...

I'll show you a better way... and how do we get them so that they don't just smoosh over each other? So the first one, let's look at the padding at the top... well, in the last video  what we did is... I turned it into an auto layout, and then tried to add padding at the top... and that kind of worked...

let's do it quickly, I'll show you where you might bump into a problem... is I've got the selected, I'm going to go 'Auto Layout'... so that I can add a bunch of that Shift A... and a bunch of padding at the top, move it up... and first of all, it's not going to work... why not?

Because actually, the thing that is sticky... is inside this Frame 8, I can make Frame 8... 'Prototype', scroll, uh, position, 'Sticky', and now it'll work... but then I have to do it to all of these ones, and then there's a big weird gap. So what we're going to do is we're going to, undo... and what I want to do is put these in its own frame...

just around here, and it's scroll within there, what does he mean? First of all let's turn off this vertical scrolling... for no good reason, just because I want to make it clear... now I want to select everything in here... it might be easier to do in my Layers panel, I want to go... click this first one, hold 'Shift', grip everything...

I want to put this in a frame, 'Command Option G, 'Ctrl Option G' on PC... so this is now going to be, what we're doing with this, this outside frame... so we're going to say, you are going to be 'Vertical' scrolling... that was one of the rules... there's this little thing that appears... says, "Hey, you've got nothing overflowing"...

you're like, "Yes, I do," look, it's all over there. What happens in Figma though is that this is separate from this... this is clipping it on, so let's turn that off... this here is actually just a big frame... there's nothing overflowing here, so what we need to do is... we need to say, actually, you...

are now overflowing... because the frame is smaller than the content inside of it... does that make sense? It could be confusing, we'll do loads of these through the course. So my frame now is too small for the content... I'm going to say, clip the content...

because it just feels more like, doesn't have to be on, just feels better... and gives me space to put the navigation at the bottom  and I'm going to make sure the Prototype is set to 'Vertical' scrolling... so we're back to where we were... but oh, look, instant... look at that, you can see them getting stuck at the top there... so I've just kind of created padding for them all, they're still stacking up...

but I don't have to kind of push them all off the top now, much easier, happy days. How do we get them to stack now? Basically, what we're going to do is have a think, what would you do, pause... what'd you do? Yep, background color, exactly right, it is cheap... but it's the way to do it...

so what we're going to do is, I'm going to grab my title here... I'm going to put it inside of a frame, which is going to break it... 'Command Option G', 'Ctrl Alt G' on a PC... so it's not going to work now, Event is going to disappear... checked. so you, Frame 9, now going to be called "Heading 1"...

I'm going to have an overflow, nope, a scroll... sorry, position of 'Sticky'... so we're back to where we were, but now because it's in a frame called Heading 1... I can go to Design mode and say, you have a fill color of... I was going to pick a crazy color to make it clear what we're doing... can you see now, it still doesn't work...

the text wants to go behind it... because what I want to do is go like this... pick the color of my interface color, so that it... you know, if it goes behind it you wouldn't see it, let's go back to this... it's all to do with layers. So over here, there's the top of my thing, this one's right at the bottom...

what if he was all the way at the top? Layer order is really important when you are... trying to slide things underneath it, especially when you're stacking... hey, look at that. So let's make the frame a bit bigger... so that the text disappears a little earlier when it slides behind it...

and let's make the Fill color my, local colors, and my interface color... nice... now it's kind of working, oh, you can see it at the top, poking out... can you see there? So now there's just a lot of tidying up, I'm going to tidy it up... so why is it peeking at the top there?

This just needs to be like one pixel bigger, not so much... I can still see it there, I'll zoom in... this needs to be one pixel bigger... oh, I can still see it, you wait there... I tried to fix it, I couldn't fix it... the features only--  so I'm blaming Figma while it's still peeking out...

something to do with the rendering here... but it's a good learning exercise... there's things that just maybe sometimes are bugs, and sometimes are quirky... and sometimes are really tricky to work out... hopefully, it'll fix itself future in the course... and I can come back and update that bit, but...

hey, happens to the best of us. The next thing is, is I've got this... and let's get the next one, it's sneaking behind it... watch this, so this one needs a background, I'll quickly do this... I just kind of did the exact same thing as this top one, now let's have a look... so Event Overview, and then, When should nicely...

ah, still goes behind, so what can we do? We just got to make sure the Layer order, so this one's going to be my "Heading 2"... and it needs to be... above Heading 1, so the Layer order is important... so here we go, Heading 1, and then Heading 2 comes over... and should be above it, so it should slide over the top, aha, here we go...

ignoring the tiny little dots at the top. So that's kind of it, you can keep going along... and just making all these different ones frames... and making sure they're sticky, make sure there's a background color... we want to do a little bit better and make them into a component... and let's do it because it's the way that we should do it...

and it's going to throw up a couple of issues, and we can fix them... so you don't have to stumble onto those by yourself. So we've created a frame, I've undone, so I've got rid of that one... so this one here is kind of what I want but I wanted to make it a component... so I'm going to drag it out here first, then make it a component... I'm just going to call this one "Heading Scroll"...

oh, come on, typing... now I'm going to select it... and this one in here is not a component or an instance... so I'm just going to select it, and use my 'Paste' to replace... so 'Command Shift R', 'Ctrl Shift R' on a PC... you can see now, it's an instance of this...

same with this one here, it's not even a frame... but that sweet Paste to replace... I can do this one, this one was called "WHEN"... same thing with this one... are they set to sticky? It remembers that this one, original and sticky...

we should probably make sure that... we should double check that they're sticky... but it remembers it from when we initially did it... 'Paste' to replace, where... "WHERE"... so what problems are you going to run into?

One is, I need to be able to see... all the content, so I can see this one here... so I can go 'Paste', replace, this one was... "Terms and Conditions"... and it's going to work, but it's going to have a slight problem, watch this... great, they're all instances, and watch this, it starts scrolling...

they don't stack anymore, and I can see it scrolling up the top there... what's going on? I totally wrecked it, kind of. The first one is, we turn clipping off, and it doesn't stop the thing working... but it just looks weird when the clipping is on... especially, when you're clipping inside of a Parent frame...

so it's all there, and you're like, "I broke everything else"... actually, they're stacking, but stacking underneath each other... so I can't see anything underneath Event Overflow... to fix it, let's do some Layer ordering... so what do we got? We've got Event Overview, which is at the top...

which is not what I want, I want it to be at the bottom... who's my next one? Then I want When, perfect... and then above that I want Where, and then above that I want... Terms and Conditions, it's kind of down the page there... there he is, this is going to kind of work, watch...

you, When, goes over the top, Where, it goes over the top, and Terms... but then the text goes over the top of everything else... it's still more layer problems... basically if the headings, every single one of them, holding 'Shift'... I don't know, should this work? If all of them above all of the text...

no matter, I'm really messed with the order here... let's see if that works... yeah, When, Where, Terms and Conditions... hey, it is working, finally... and we're going to ignore the dots at the top... there we go, lots of cool scrolling stacking...

but there are a few issues, and that's why this video is, I guess, long-ish... yeah, it's long, it's because there's some quirkiness to get this thing set up... another one to go have a look at is... there's one called Sticky Scrolling Playground... so if you go to your 'Home', and find... at the top here, go to 'Community'...

you can type in sticky scrolling programs if you want to have a look... because it's interesting to see their one, I took a copy of it, and... they've done like a Contacts List, we went with titles... but it's good to see some other, let's prototype their one... can you see here, they went with this A, B, C... yeah, that's a really good one, "We should have done that, Dan"...

it's the same problem... it's the same function, and oh, that is so good to see... can you see it there, editor, zoom in, look, the mysterious dots... it might not be there by the time you're doing this... yours might not have that bug, and it might just be... a "me" problem as well right now...

I'm tempted to close down Figma, open back up and see if it's still a problem.. man, that's good to see, kind of. Before we go, a quick recap... you need to make sure that the Parent frame... whether it's the actual phone itself... or whether you've got like an internal one here, like we did...

make sure it's set to Vertical scrolling... it won't work if there is not enough content to scroll... so there needs to be lots and lots of content above... and outside of the frame that you made... you can't just have it all on display, you've got to go, you, can't be seen... you've got to go, you frame, are smaller than the content inside of it...

that will get us the vertical scrolling, then, the children... they can't be inside groups, inside groups, inside groups... the initial child of that frame that's scrolling... needs to be set to 'Prototype', 'Position', 'Sticky'... then there's just the matter of adding background colors... and making sure the Layer order is correct...

so that things stack on top of each other the way that you want... all right, that is it, I will see you in the next video.