Automatic Scroll Down The Page To Anchor Point In Figma
Lesson 92 from: Figma UI UX Design EssentialsDaniel Walter Scott
.jpeg/webp/500)
Automatic Scroll Down The Page To Anchor Point In Figma
Lesson 92 from: Figma UI UX Design EssentialsDaniel Walter Scott
Lesson Info
92. Automatic Scroll Down The Page To Anchor Point In Figma
Lessons
Introduction to Figma Essentials
02:53 2Getting Started with Figma Training
03:06 3What Is Figma For & Does It Do The Coding?
03:46 4What's The Difference Between UI And UX In Figma
05:22 5What We Are Making In This Figma Course
09:18 6Class Project 01 - Create Your Own Brief
04:01 7What is Lo Fi Wireframe vs High Fidelity in Figma?
02:34 8Creating Our Design File & Introducing Frames In Figma
08:29The Basics Of Type & Fonts In Figma
10:51 10Rectangles, Circles, Buttons And Rounded Corners In Figma
06:50 11How To Use Color In Figma
05:45 12Strokes Plus Updating Color Defaults In Figma
09:28 13Object Editing And How To Escape In Figma
01:47 14Scale vs Selection Tool in Figma
02:39 15Frames vs Groups in Figma
09:24 16Class Project 02 - Wireframe
03:00 17Where To Get Free Icons For Figma
09:10 18Matching The Stroke Of Our Icons
05:16 19How To Use Plugins In Figma For Icons
04:31 20Class Project 03 - Icons
03:48 21How to Use Pages in Figma
08:31 22How to Prototype in Figma
10:46 23Prototype Animation and Easing In Figma
10:53 24Testing On Your Phone with Figma Mirror
05:40 25Class Project 04 - Testing On Your Phone
03:51 26What is Smart Animation & Delays in Figma?
08:44 27Class Project 05 - My First Animation
02:01 28Sharing & Commenting on a Figma File with Stakeholders
07:10 29Sharing & Editing With Other Ux Designers In Figma
06:58 30How I Get Inspiration For Ux Projects
06:39 31How To Create A Mood Board In Figma
05:33 32Class Project 06 - Moodboard
01:26 33How to Work with Columns & Grids in Figma
13:54 34Tips, Tricks, Preferences, and Weirdness in Figma
07:21 35Color Inspiration & The Eyedropper In Figma
06:34 36How To Create A Color Palette In Figma
09:02 37How to Make Gradients in Figma
07:09 38How to Create & Use Color Styles in Figma
08:01 39Class Project 07 - Colors & Columns
04:00 40Fonts on Desktop vs in Browser in Figma
01:30 41What Fonts Can I Use? Plus Font Pairing In Figma
06:01 42What Common Font Sizes Should I Choose In Web Design?
11:30 43How to Make Character Styles in Figma
06:36 44Lorem Ipsum & Placeholder Text In Figma
04:28 45Useful Things To Know About Text In Figma
09:35 46How To Fix Missing Fonts In Figma
02:42 47Class Project 08 - Text
05:19 48Drawing Tips And Tricks In Figma
09:38 49Squircle Buttons with ios Rounded Courses In Figma
02:48 50Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma
07:25 51What Is The Difference? Union vs Flatten In Figma
03:36 52Class Project 09 - Making Stuff
03:29 53Smart Selection & Tidy Up in Figma
08:40 54Do I Need To Know Illustrator With Figma?
04:15 55Tips & Tricks For Using Images In Figma
06:11 56Masking & Cropping Images In Figma
09:12 57Free Images & Plugins For Figma
02:31 58Do You Need Photoshop For Ux Design In Figma?
10:40 59Class Project 10 - Images
01:17 60What Is Autolayout & Expanding Buttons In Figma?
10:27 61Class Project 11 - Buttons
01:15 62Auto Layout For Spacing
05:47 63How To Use Constraints In Figma
08:22 64Combining Nested Frames Auto Layout & Constraints in Figma
11:54 65Adding Text Box Autoheight to Autolayout in Figma
08:27 66Class Project 12 - Responsive Design
02:19 67Nice Drop Shadow & Inner Drop Shadow Effects In Figma
05:56 68Blur Layer, Background Blur & Image Blur in Figma
05:57 69How to Make Neumorphic UI buttons in Figma
07:37 70Class Project 13 - Effects
01:53 71How To Save Locally & Save History In Figma
05:42 72What are Components in Figma?
06:19 73Updating, Changing & Resetting Your Components
07:47 74You Can’t Kill Main Components In Figma
07:22 75Where Should You Keep Your Main Components In Figma
05:02 76Intro To The Forward Slash / Naming Convention In Figma
08:55 77Class Project 14 - Components
00:44 78How To Make Component Variants In Figma
06:41 79Another Way To Make Variables In Figma
06:14 80How to Make a Multi Dimensional Variant in Figma
11:13 81Class Project 15 - Variants
01:41 82How To Make A Form Using Variants In Figma
12:52 83Class Project 16 - Form
01:27 84Putting It All Together In A Desktop Example
19:44 85How To Add A Popup Overlay Modal In Figma
03:03 86How To Make & Prototype A Tool Tip In Figma
07:26 87What are Flows in Figma?
05:39 88Slide In Mobile Nav Menu Overlay In Figma
03:55 89Class Project 17 - Prototyping
01:10 90How To Pin Navigation To The Top In Figma
10:17 91How To Make A Horizontal Scrolling Swipe In Figma
06:36 92Automatic Scroll Down The Page To Anchor Point In Figma
04:50 93What are Teams vs Projects vs Files in Figma?
05:18 94How Do You Use Team Libraries In Figma
11:03 95The Difference Between Animation & Micro Interactions
02:55 96Animation With Custom Easing In Figma
25:36 97Class Project 18 - My Second Animation
01:54 98How To Make Animated Transitions In Figma
12:34 99Class Project 19 - Page Transition
01:31 100Micro Interactions Using Interactive Components In Figma
05:54 101Micro Interaction Toggle Switch In Figma
04:23 102Micro Interaction Burger Menu Turned Into A Cross In Figma
04:23 103Class Project 20 - Micro Interaction
01:35 104How To Change The Thumbnail For Figma Files
04:10 105How To Export Images Out Of Figma
07:40 106How To Share Your Document With Clients & Stakeholders
07:09 107Talking To Your Developer Early In The Figma Design Process
03:55 108Sharing Figma With Developers & Engineers Handoff
06:07 109What Are The Next Level Handoffs Aka Design Systems
03:18 110Class Project 21 - Finish your design
04:57 111What Next?
06:08Lesson 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
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!