Hi, everyone in this video, we're gonna pin stuff to the top. OK. So that the content kind of slides behind it. We'll make it a little bit transparent. We'll do a footer as well. My footer is not very spectacular. It is a box. Ok. The do you want the short version or the long drawn out version? Let's start with the short version. OK. So the short version is select something, say fixed position to the top, same with the bottom one. You are a fixed position, take that on and stick it to the bottom. The only other thing you need to do is make sure that your frame has got prototype is set to vertical scrolling. OK? And stuff that actually expands out. See this. Let's turn mine off. OK. So I'm gonna go to design clip contents. I got a bunch of stuff to scroll to. If you don't have that, it's not gonna scroll. Ok. This page can never scroll. Doesn't matter how many prototype scrolling horizontal works. It's not going to work to get stuff to scroll. Just have it like off the bottom, right. Le...

t's have a look, scrolling, scrolling homepage, homepage. No scroll. Alright. So why is this video so long? It's because you're gonna run into, it's kind of a a work I wanna show you how I work but also the problems you're gonna run into, we're gonna look at problems with like adding this, we don't originally have this black background so we're gonna try and uh force it into an existing component. OK? We're going to run into some problems with scaling and just in general like things that might catch you out while you're working if that doesn't sound interesting. Move on to the next video. Let's go. OK. So P to the top is easy. P to the bottom just as easy. Um But let's go through why is this video so long? It's because I'm going to try and do it to my one. I want to add that kind of like black background to it and I'm going to show you some things that you're eventually going to run into too when you're making it from scratch and you know, where you're going. It's easy when you're kind of plodding along and kind of changing it as you go. Things can get confusing if you are new, you are finding this, you know, new and exciting bit difficult. Just start again, just bin your um you know, bin these and just start again and make a new one as you need it. But let's say we don't want to do that because we've used it a bunch, uh You know, a bunch of times. So. Well, first thing you need to do is notice how the images have gone. This happens on my version every so often mainly when I'm dealing with um version history. Um So I close it down and open it up again, it goes away. I'll leave this in the course because you might run into the same thing. You'd be like, where did all my images go? They're there just for some reason they disappear. This could be just online anyway, we're back. So I want that black background in there. So first of all, we can't add the black background to this instance. That kind of left me there for a second. OK? So we want to find the main component. So right click, let's go main component, go to him. OK? He's just up here. He should be on the components page. OK? Bed down. Um So what we're gonna do is just, we'll put the instance over there and we'll use the main NAV, I'm gonna put it here so we can get it all lined up. So basically what's happened is we've got this thing called top NAV. It's a component and inside of it is my, you know, the kind of different icons. Now there's no frame, OK? There's no frame wrapped around it. So how do I color it? Actually, the component is a frame, the frame and a component has all the same attributes as a frame. OK? So if I click on it, I can actually add a background color to it. I'm gonna use black and I'm gonna tr transparency down. You're like, great. Except that it's uh zoom in or zoom out. OK. So let's go in a bit closer and watch this fight grab this guy and go. Yup. I'm like, huh, this isn't working, that's staying. Why is that not stretching? And these are, look, see these guys. OK. Um The, let's have a little look, we're back to um our constraints. OK? So let's undo it. So it's uh straight again. If I click on this guy inside of this component, it says Scott here is sticking to left and top headphones, top left the whole group though, for some reason, let's have a look. My whole frame says scale which it's not. So that's OK. I'm turning that off. These guys though. If I click on him, he's set to scale. So if I turn his buddy to what? Right, I'm really just turning it off. I don't care what it is at the moment. OK? Cos I wanna stretch. I'm gonna just make sure they're all the same, make sure your phone's off. OK? So let's select this one no longer want a scale I'm gonna use. I can't remember what I did. I did. Right and right and top and same with these guys. These guys are gonna be right and top and it just means when I scale the frame or the component. Ok, they're not gonna distort part of it is it's going wrong. What's that thing? What was the door, the door of my house? I forgot they even had our door disappeared ages ago. Let's have a look what's going on with that. Ok. So he's the, the door is pinned some other way. So let's get it back in the middle. Uh Hello do um it disappeared a long time ago. Uh So the rectangle here is set to scale. So I'm going to get him to stick to the right. That's the first time that's happened and the top. So hopefully now and they go, here we go. Ok? So I'm just distorting this. It would be easier just to recreate it, right? But hey ah what is stretching it up and down? So these individual parts in here this rectangle is top and right. This part is set to scale. Oh, there's all sorts of stuff going on, you know when I said there's um you can flatten it. Ok. I'd be likely to flatten it. Now, what are you going? I'm just checking all these checking for scale all these parts so you might just go, you my friend are going to be fly so that's just easier to work with. Ok. So we've done that now. Alright, so these tricky things pop up. So I've kind of got it like this. Now I'm just gonna rearrange it inside of this. It would have been easy just to recreate it. But we wouldn't have learned so much. Everything things is a bit big. You have to test it on my phone. I haven't tested on my phone in a long time in this course. And I'm, I've got the horrible feeling. These are really big. Ok? You're gonna get a 0% which is shift, uh, zero. Yeah, they still feel probably very big. All right. So now that I've fixed it and it's got it, I'm gonna say you are fixed position to the top and left just a quick little interruption here. I forgot. Uh I've just noticed when I'm editing that I forgot to mention over here in the layers panel. Can you see um there, there's this new title, it says fixed. Everything in there will be fixed like the thing we just made fixed. OK? And everything else is under the scrolls heading. So you'll just see that you probably it's pretty self explanatory bits in. There were fixed bits down here are scrolls. All right. Carry on. And I don't want to be using this. Actually, I'm gonna move him to it could be all properly official, move him to the components page. I'll get that person down here and these guys need a bit more lining up this one here. I need to be slightly different. I could be starting creating a variant, but I'm lazy. OK? So I'm just gonna double click on the outside here and go hide. Can't delete it because it's part of the original component and there's a little gap there. I think this one here for some reason is what is it? 375, this one is probably 376 for some reason why is it? It's probably when I was messing around with creating variables here, sometimes they go to the side here and I drag it back in and obviously didn't drag it back the right way. All right. Um Where did it go on my components phase? Just double check. Where did you end up there? It is. Hello? What are we over there? You can go there now. All right. Let's test that. It sticks on that page. Now, let's have a little look. The other thing that might not happen to yours. Um OK. We kind of covered it quickly at the beginning. Uh is, let's say this page here, there's actually stuff to scroll down. If there's nothing to scroll to, it can't go down. So this one's gonna be OK. Ish, but it's not gonna work. I be you. So if I click on this, I go to prototype, actually, I don't have to go to a prototype. I just go to this one hit um preview or present they call it and look nothing happens. It doesn't stick to the top. So the way to make that happen is click on the actual frame. Ok. Go to prototype and you're gonna say what do you do with the overflow? Ok. No scrolling. No way. I want some vertical scrolling. I very often hit horizontal screening which is left and right, ok. By accident, vertical is what you want up and down. Alright. There we go. Now we've got scrolling. Is it fixed to the top? It is not you. My friend are designed uh fixed to the top. OK? Is that one fixed to the top? Let's do it. There we go. It's just that one more time. Very fresh. It's going to a little more page ha ha jackpot. All right. So that is pinning stuff to the top. Pinning stuff to the bottom is not hard. OK? Uh Same thing I'm gonna draw something and just say you my friend are stuck to the bottom, fixed position when scrolling and you're gonna be not top but bottom. Ok. So let's give that a go you scrolling, scrolling, scrolling, scrolling things that you might stick to the bottom. And I did a little Google search for you. These kinds of things appear in some apps, ok? Down the bottom. We also saw those snack bars earlier, those little temporary things that kind of pop up. So these are the potential things that might appear down the bottom. What you might consider doing don't do the way we line. I don't know why I don't like it. Uh Yeah. So pinning stuff to the top, pinning stuff to the bottom. That is it. We've got our NAV working and I'll see you in the next video.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf

Exercise_Files_-_Figma_Essentials.zip

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

UX Design

Ratings and Reviews

Mahyar Hassid

Great class, Daniel drops so much knowledge in every video and in all the in between unexpected moments that helps speed up your process!

2,000+ classes ranging from fundamentals to advanced techniques.

How To Pin Navigation To The Top In Figma

How To Pin Navigation To The Top In Figma

Lesson Info

90. How To Pin Navigation To The Top In Figma

Lessons

Introduction to Figma Essentials

Getting Started with Figma Training

What Is Figma For & Does It Do The Coding?

What's The Difference Between UI And UX In Figma

What We Are Making In This Figma Course

Class Project 01 - Create Your Own Brief

What is Lo Fi Wireframe vs High Fidelity in Figma?

Creating Our Design File & Introducing Frames In Figma

The Basics Of Type & Fonts In Figma

Rectangles, Circles, Buttons And Rounded Corners In Figma

How To Use Color In Figma

Strokes Plus Updating Color Defaults In Figma

Object Editing And How To Escape In Figma

Scale vs Selection Tool in Figma

Frames vs Groups in Figma

Class Project 02 - Wireframe

Where To Get Free Icons For Figma

Matching The Stroke Of Our Icons

How To Use Plugins In Figma For Icons

Class Project 03 - Icons

How to Use Pages in Figma

How to Prototype in Figma

Prototype Animation and Easing In Figma

Testing On Your Phone with Figma Mirror

Class Project 04 - Testing On Your Phone

What is Smart Animation & Delays in Figma?

Class Project 05 - My First Animation

Sharing & Commenting on a Figma File with Stakeholders

Sharing & Editing With Other Ux Designers In Figma

How I Get Inspiration For Ux Projects

How To Create A Mood Board In Figma

Class Project 06 - Moodboard

How to Work with Columns & Grids in Figma

Tips, Tricks, Preferences, and Weirdness in Figma

Color Inspiration & The Eyedropper In Figma

How To Create A Color Palette In Figma

How to Make Gradients in Figma

How to Create & Use Color Styles in Figma

Class Project 07 - Colors & Columns

Fonts on Desktop vs in Browser in Figma

What Fonts Can I Use? Plus Font Pairing In Figma

What Common Font Sizes Should I Choose In Web Design?

How to Make Character Styles in Figma

Lorem Ipsum & Placeholder Text In Figma

Useful Things To Know About Text In Figma

How To Fix Missing Fonts In Figma

Class Project 08 - Text

Drawing Tips And Tricks In Figma

Squircle Buttons with ios Rounded Courses In Figma

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

What Is The Difference? Union vs Flatten In Figma

Class Project 09 - Making Stuff

Smart Selection & Tidy Up in Figma

Do I Need To Know Illustrator With Figma?

Tips & Tricks For Using Images In Figma

Masking & Cropping Images In Figma

Free Images & Plugins For Figma

Do You Need Photoshop For Ux Design In Figma?

Class Project 10 - Images

What Is Autolayout & Expanding Buttons In Figma?

Class Project 11 - Buttons

Auto Layout For Spacing

How To Use Constraints In Figma

Combining Nested Frames Auto Layout & Constraints in Figma

Adding Text Box Autoheight to Autolayout in Figma

Class Project 12 - Responsive Design

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

Blur Layer, Background Blur & Image Blur in Figma

How to Make Neumorphic UI buttons in Figma

Class Project 13 - Effects

How To Save Locally & Save History In Figma

What are Components in Figma?

Updating, Changing & Resetting Your Components

You Can’t Kill Main Components In Figma