How To Make Animated Transitions In Figma
Daniel Walter Scott
Lesson Info
98. How To Make Animated Transitions 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
How To Make Animated Transitions In Figma
Hi, everyone see this big bird's nest that turns into this magic. You ready? The phaeton D slide in a little bit later. OK. So that's what we build we're gonna do instead of just doing animation like we've been doing. It's the same thing, but we're kind of building out a page like a page transition. Ok. No, page peels, unfortunately. But there is, yeah, we can do something almost as good. All right. Let's page peel into it. Ok. Uh So we don't wreck our home page. I'm just gonna move it down here and this is where our uh um giant messy um, page starts, well, continues. OK. So we've got our home page. Let's call this thing something different. So we're going to call this one now animation. So the way this works is basically we need a placeholder page. Yeah, we're gonna have to string a few of them together to get that animation. So, uh the first thing we're gonna do is between the, actually not between those two pages, between that one and this one come with me copy down here, paste. Now...
, I'm gonna have mine a bit further apart at the moment just because I'll show you one of it. So I want this page, I'm gonna switch to prototype now. I've been just clicking the buttons over here. OK? If you start getting a bit like shortcut, like, hey, what is it? OK. Remember the shortcut? Is the command or control forward slash? And you can start typing it in like prototype panel. OK? And you saw it there, see the little shortcut, OK? It was option nine or alt nine on a PC. And if you look at your keyboard, hold down the option key on a Mac alt key on a PC. Tap 890890. They're all next to each other along the top of your keyboard. You see design prototype inspect. Also don't forget that there's this little guy down here, OK? And keyboard shortcuts. And that's actually just really well laid out and grouped and they've highlighted the best ones and this one's under view. Where is it? These three weren't these ones blue? I think it's just to show importance. OK? Of the most useful ones. So do keep cast your eye over the blue ones, probably the ones you're gonna want. So I'm going to go actually, what I might do is just break a few of these just because it's a bit messy. It's going back up to the top thing. It's not what I want right now. OK. So what I want to do is say when I click, learn more. I want you to go here to the kind of product details page on tap. I'm gonna use an animation of like push. That's what I used in this one. It doesn't matter uh easing. Let's just give it a preview and let's rename this flow here. So instead of ecommerce flow, this is gonna be my animation. Hello, Copeland's play it from here. Alright. No more. We OK. So that's what I'm gonna start with and I want this to build like I saw before. So what we're gonna do is we're gonna have to have two pages. Can I separate them out again? And basically there's gonna be nothing on this page that's kind of the main takeaway for this course or this video is that when you're doing kind of transitions you probably want to start in for an empty screen and remember we can't have an empty screen. We need to have things off screen or totally transparent. And what I would like to do is have maybe this first block slide in. So these guys I'm gonna push off, we're gonna have to make this way bigger. Remember if they are selected, you can tidy them up and then you can grab the gap in between if you've got a lot of them. OK? So I've got some space not duplicating, I'm just holding shift so they slide off this way you, I'm not sure where I got that thing from that was my footer. Now, in this case, I could, I want to group these now. Ok, because I haven't grouped them before. They should really be components, but we made these earlier in the class. Now, I'm not going to, I'm going to leave them all as this kind of ugly bits and pieces. Why? Because there are bits and pieces over here. Are they room nine? Actually, they're not, they're all together. Ok. Forget me. OK? So you can go over there, you can go over there just be careful when you are gripping them. They don't need to go over there, do they? Nobody can really see them on the first screen. But hey, let's be official. Same with you guys. I'm gonna get you guys to start you, you, you over here and I'm gonna get you start over here and I'm gonna get you probably just to feed in. So I'm gonna start it by fading it out and hit zero on my keyboard capacity set to 0 100%. Um Maybe there is, let me know in the comments if there is a set to a zero, I know there's a set to 100%. How do we not know this? Maybe there's not one. OK. And you can fade in as well. So zero. Cool. So I'm kind of projecting here. I'm saying that I want these things to slide in from these sides. OK? I want that to fade in and what I'm gonna do is over here. Actually, let's preview that just to make sure we've got everything working. So we're gonna click the button, it's gonna go here and then nothing's gonna happen, right? It's just gonna get stalled. OK? So uh for a reset, let's go learn more. OK? And it just sits there. So what I need to do is add a bit of timing. You are going to prototype mode. Let's use our sweet new shortcut. Let remember option on a Mac O on A PC. OK. And type nine prototype. This one is going to go where you can drag that out or you can say I want to add direction. This is uh not tap. I want to say that on delay. We don't want to go, I want it to go to there we go to what page. What did I name this one? I have to do some bit of naming animation, product details, like animation, product details, the so you, you, you delay go to animation, product details. Thank you very much. OK. It's going instant as well. Let's go to smart animate. OK. So let's give it a preview. Now let's ask for a reset you after time it's gonna fade in. It's not what I want. I want it to slide in. So I want you now, why aren't they in there? You might be screaming at the screen going. He didn't put them all in the original frame OK. It's one of the things when you are dragging it out. I wish there was a um they haven't Photoshop. Um One where you can say you do not leave this frame. There's an option in here says do not, you know, leave the parent frame when I drag you. Even if I say even I've kind of drag you out. Hopefully that will come in the future. It might be there now have a check. So all of this. So I need everything to be an animation product. A so I'm going to grab you guys and move it in. Let's do all of this stuff first. So all of that is gonna go inside of now. If I drag this, can you see it's missing those. If I drag those inside animation a under the scrolls part, did it leave the parents behind? It did. So I need you, you is that it those guys came along, some of them are already still in there. So let's get them all in the same part. Alright. Let's give her a preview now so that those guys should work and reset, play. Cool. So those slide in these things aren't part of it. The only reason I left these separately is that if I drag them in, in the wrong order. So if I go, you, you, you and you and so what is it tab? Let's grab the parent frames. OK. Plus U if I drag them in and I select them weirdly or I drag that one in first, let's say, and add it to animation under the scrolling part then fixed is this nav, we don't want it to be fixed and then drag these in on top. Can you see what's going to happen? You might not, but the tabs. Oh Actually you drag it underneath by accident. Let's have a look, click, pause slides in the layer order was around the wrong way for a sec. Let's refresh that one. It's a little hard to see back back. I'm using my back and actually you can't really tell the transition, but you might find that if you start them behind, they have to kind of some stage flip to be on top. Ok? They're on top over here but just know that you just make sure your layer order is it's not important like it doesn't break the animation, but you might find that for part of the transition, these guys are gonna be underneath it. Does that make sense? Why not? Anyway? Where do we go going? Um back forward arrow? OK. So that's kind of what I want and I want these guys to happen later on. So the trick for that is that we, you know, there's everything has to be timed at the same time to come in. Now this is only two for fig A. It's not something I made super clear in the last videos, you know, everything's kind of tied together when you actually go out to build this Apple website, the developer has, you know, they can control all the timing at any stage. OK. So this is just a limitation for fig A at the moment, there are ways around it. If you get there are some timeline animation plugins. Proto pies is another thing that you can export your fig files to and kind of do more complex animations. But outside of the scope of this course, just know that all of this happening at one time. It's only because that's what fig A does. Alright. Next thing is is I want these not to be in, OK? So what I'm gonna do is be clever and duplicate this first. OK? Because the trouble with doing it afterwards, I'll have to try and you know if I move all these off and then duplicate it, I have to try and move them back in where they were. So what I'm gonna do is say you frame 11 give us some more space. You can be off still inside details be you can be off. Oh look how messy this is getting and these guys are off a frame anyway, that can be seen. So we start, it pushes over to an empty screen. This thing builds and then the difference between this and this are these guys and they start it over here and should slide in. Give it a go no frame 11 is not in the right thing. Animation B scrolls. So with 99, you need to be inside animation B scrolls. Now give it a go uh play. Well, one thing we're missing, come on pop quiz. Why isn't that moving to the next one? We just did it, we did it right. I swear we did. Except we didn't say you what, what happens after this just sits there. OK? We need to say you my friend prototype member option or alt nine. OK? We can say you go there and on tap. Nope, I want you to go after a delay. Go there. How long this smart animated? Please ease out. Let's get it to ease in and let's do it in and out and back just for just for Googles. All right, let's preview it now because I didn't select anywhere. It's gonna just preview the first homepage. So I'm gonna go to headphones, animation. No animation flow. OK? And let's go to learn more. OK? So there you go. Um What we might do for this one is that ease in and back because there's so much more going on. Uh We might have to increase this. OK? So click, drag it. If you're unsure, just type it in, it's gonna take 1.5 seconds ish. Other thing we might do before we go and clean it up is I'm gonna click on prototype, have nothing selected and you can drag these around. I feel like my animation flows needs to be there. I have no idea what flo one is so you can select it and delete it. OK? This feels more consistent. Let's go refresh you. Oh slides in these, they felt better better. OK? So those are page transitions. You just have to have potentially what, what you wanna do, you have an empty page and then kind of build it on every single page. If you want different timing, if you obviously want it all to come together at the same one, you can jump from this one all the way over here. All that is how to do page transition animations in fig. Let's get on to the next video.
Class 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!