Skip to main content

Automatic Scroll Down The Page To Anchor Point In Figma

Lesson 92 from: Figma UI UX Design Essentials

Daniel Walter Scott

Automatic Scroll Down The Page To Anchor Point In Figma

Lesson 92 from: Figma UI UX Design Essentials

Daniel Walter Scott

new-class art & design

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

92. Automatic Scroll Down The Page To Anchor Point In Figma

<b>In this lesson we will show you how to automatically scroll down the page to the anchor point 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

Automatic Scroll Down The Page To Anchor Point In Figma

Hey Gang, I am going to show you how to click this and scroll down the page. Let's click the bottom one. OK? It's pretty easy to do. Let me show you how to make this work. I just made this thing at the top here. OK? On my product details. And basically I'm gonna break up these things. These are just frames that are made. We go to prototype mode and we say you instead of going to pages, we go down here, go to this thing rectangle. Now it depends on, yeah, it might be a component might even be a text box. You can go to anything. It's pretty cool. It kind of also assumes that because you're scrolling, you know, doing something on the same page, it says let's do scroll two. OK? And we're going to that rectangle. Let's give it a preview. So I'm gonna click the title there. Let's go and present and I'm gonna click it and it works. Who over there? R for refresh. OK? That thing, it's kind of working. It goes to the top. OK? But this thing's stuck, this thing came up so let's fix it works. I'm ...

gonna claim working. OK? First of all, this thing shouldn't be moving. Uh This got came out remember, scrolls and fixed, OK? So it needs to be part of the fixed gang there, not scrolling gang. So that refresh should fix that. OK? Click that and it works. The thing is it goes all the way to the top. So now we need to play around with this and this and it says offsets, you got X and Y. OK. Um One of those things that I find difficult again, so you kind of just what you really need to know is um you can go left and right. OK. So just play with it. I can never remember which one it is whenever I come into it. I know because I've, I've practiced this one already that it's this first one. OK? That it's y up and down. OK? And that it's, you know, it's negative. Let's give it a preview, refresh, learn more materials you can see just keep going down until you're happy with it being a bit lower. OK? So let's get it down. I played around with it and I got to like minus was good. Refresh, click the button, click that button. OK? I'll take it back. Minus 200 wasn't good. Something's changed since then. Let's do minus 100 and 50. You get the idea though, right? And one thing we will do is let's just check this last one. Yeah, that's about right and will animate it. Ok? It's defaulted to instant. Ok. Let's click, animate. Let's pick some nice easing. OK? And let's give it another go refresh, click the button, click that button. Yeah, nice. Ok, so I'm gonna do the same for this one and I'm just gonna go down to this rectangle and you, you, you it's kept everything good. I'm gonna use the same negative 100 and 50. Let's give it a refresh preview. Oh Wrong on that one. There you go. Nice. You just kind of work your way through this one as well. And the problem is I can't see this. So you might have to turn on your, for your kind of like outside frame here. You might have to go to design, turn clip contents off so I can actually see everything. So was the last one comfort back to prototype Y down to here minus 150. I probably, yeah, that's it. I didn't scroll to the um rectangle. I probably scroll to this entire thing rather than the rectangle inside of it. That's why my little calculation was off. Yeah, last one. Hey, scrolling stuff. If you get way, way down the page, you might have to turn down, you know, cos moving this far is not very far, you know, so it can go, where is it? It can take all of 0. you know, 0.3 seconds. This one here, maybe we'll make it a little bit longer. OK. This one can be like, I don't know, using my up arrow shift up, kinda goes up in bigger chunks. So I might go for the X 204 of a second. I can get my measurements confused anyway, 400 milliseconds and this one here is going to be just a bit longer. So maybe shift up arrow. There we go. Is that gonna make any difference? Probably not, but we'll know. There you go. All right. So that's how to scroll down a page. Have something doesn't have to be anything, doesn't have to be a frame. Just a thing to click could be a NAV item, just drag it down and it should default to scrolling and animate it if you choose. All right, that is automatically scroll down the page stuff in fig.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

RELATED ARTICLES

RELATED ARTICLES