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

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.

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

Automatic Scroll Down The Page To Anchor Point In Figma

Automatic Scroll Down The Page To Anchor Point In Figma

Lesson Info

92. Automatic Scroll Down The Page To Anchor Point 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