Skip to main content

How To Pin Navigation To The Top In Figma

Lesson 90 from: Figma UI UX Design Essentials

Daniel Walter Scott

How To Pin Navigation To The Top In Figma

Lesson 90 from: Figma UI UX Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

90. How To Pin Navigation To The Top In Figma

<b>In this lesson we will learn how to pin elements to the top in Figma.</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

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

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

Lesson Info

How To Pin Navigation To The Top In Figma

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

RELATED ARTICLES

RELATED ARTICLES