Figma UI UX Design Advanced: Become a Figma Pro

1. Intro to the Figma Advanced Course: Hello. I'm Dan Scott, and this my friend, is the Figma Advanced course. Now, this course is aimed at people who have either done my Figma Essentials course or your self taught. You're pretty good. But you know that there are so many more, like, tools and tips and tricks and workflows and updates that you just haven't had time to explore yet. If that sounds like you, this course is for you. Who's this guy? I am Dan Scott. I am a UX designer and Figma instructor. I've won multiple teaching awards, and I've helped more than 1 million people now just like you to become better designers. So we're not just going to move boxes around here. We're going to actually build something. You'll get your own unique project and persona, and by the end, you'll have a complete app ready to drop straight into your portfolio. First, we'll use AI in co Figma to move fast. I'm talking real efficiency, the kind that saves you hours, not minutes. We'll go deep on autolayouts and constraints, stuff that separates amateurs from pros. You'll master components and variables so tight they're impossible to break and effortless to update. Add visual punch, effects, typography, and micro interactions that make your design stand out. I'll show you workflow hacks for managing your assets, grids, and styles like an absolute boss, and I'll show you some of the hardware that make you faster and make you look like you know what you're doing when people walk past your desk. Oh, look at that. You'll use variables to build light and dark modes, compact and comfortable layouts. We'll go into advanced animation, masking and video. Kind of stuff most UX designers don't even realize Figma can do. You'll learn to run better user test, prototype faster, and build things that feel real. You'll understand accessibility, collaboration, develop a handoff using Dvmode, refactoring and team libraries like pro. So are you ready to become a Figma pro? If you sign up and get ready to go from Figma to a Figma superhero. Ah. Don't worry. I project superhero all through the course. I've noticed that while I'm recording, I made the shirt right, and I was like, I keeps getting scrumpled up, so I do this the whole the way through the course, okay? To try and unscrumple it and project superheroess. So natural. Get on with the course. 2. Getting Started: Alright. You made it in. Welcome. Congratulations. You made a good choice. The first thing you're going to do is download the exercise files for this course. Okay, there'll be a link on this page to download those. Inside of there'll be a shortcut sheet. I'll go through them in the course, but there'll be a sheet with them on there as well where you can print off and circle the ones you really like and add the ones that I've missed. Stick it next to your computer. Look all awesome. I speak fast. I think I speak fast. So you can slow me down. There's a cog down in the corner here where you can click it and set the speed that I talk at. You can either put me in super slow drunk mode or hibunk mode or leave me like this, up to you. Figma is newish and just changing all the time. They love to move things around. So if you are in the course and you're like, H, this is not named the same, but it looks the same. It's probably the same. Or if it's moved, you might have to have a look around to see where it's slightly gone or renamed. Look at their comments, I might have left a comment. If it's easy, if it's a big change, I'll go and re record the course. But there are changes all the time. Figman like to do that to us. You do this course with the free version? You can for a bit. A lot of the course you can do on the free version. That's no problem. There will be some paid parts that we'll look at. So if you don't have that, you can just follow along, you might end up deciding, I need the paid version. But yes, it's not a waste of time doing this with the free version of Figma. I'm going to do mine on a Mac with the downloaded software. You can do it on PC in the browser. It all looks and works the same. Some of you will be coming on from the Figma Essentials course, and some of you will be jumping straight to this course 'cause you're ready for it. The people coming on from the older course, while the older course, the first course, the Essentials course, you will find that there's a tiny bit of overlap. It's when we get to kind of trickier things where we're going to push it further, things are order out. We'll just cover quickly what an all out does and how it functions, which you've already done, Okay? Just like a little recap before we go off and push it even further. So there's a couple of times we were like, Han we done this? Done a little bit of it, but we're going to take it further in this course, and I want everyone to be kind of like starting at the right start. You know what I mean? In this course, there's a couple of level ones and level twos like Auto allowance. There's a level one, level two. The reason I do it to break them up so that we don't go mad and spending the whole chunk of course looking at this one function, components or a variable or something. Okay? So I've kind of done a level one where we do all the probably gonna use a lot type stuff. We'll take a break, do some other things so that we don't go crazy, but also fine, bump into some reasons why, Oh, this would be good if we could do more with that earlier thing we learned. Surprise, Level two. Where we go through it and just kind of, like, expand on it. So you'll see a few level ones and twos in this course. That's what they're for there. Split them up, so we're not getting bored with the same thing, but also so that we get a chance to work with it and find the reason why we look to go even further with these features. Lastly, you can follow me at Figma, okay? There's a community. Go to figma.com slash AP BYOL, okay? And you don't have to, but follow me there. That's where I'll post the finish files from this course, okay? If you're just starting, there'll be the finished files on the course. You can have a poke around the things that I made. It's not particularly organized, but it's sometimes handy to see files that I've been working on, and you can take a look at them, too. Alright. That is it, my friends. No more talking. Let's get making. We'll see you in the next video, won't we? 3. Your brief for the Figma Advanced course: Hello. Before we get started, I'm going to give you each unique brief to work through for the course. We're all going to build music app. I'm going to give you your own version of it so that you're not copying me and everyone's looks different. So it's good for your portfolio because it's unique. So if you go to random project generator.com, that's something mean to bring your laptop team made, and you find Figma Advanced. Click on it into your village or town name. Myname is Limerick, so I'm going to say generate Project. And I have got the I don't even know what Bluegrass is. But that's going to be my one. Try and keep the one you get. It kind of pushes you out of maybe your comfort zone or it shows that makes it more of an intellectual kind of project where you have to think of the user, okay? Bluegrass is something that I don't know about and I have to have a quick look at the genre, what kind of vibe has it got it feels? I don't know. Actually, I don't know. So yeah, Limerick brew glass, and what it has as well down here is that it's giving you the brand to use. Okay? We're going to create a little micro brand. It's not a branding class. We're just going to use a jackal as the logo, okay? So we're gonna find pictures of jackals. We're gonna find a little icon for the logo, so everyone's unique. This is where you get it from. Don't hit Reply. Well, what's that? Re try. Okay? Definitely don't hit it three times. Just grab it. Take a screenshot of it here because it gives you exactly what we're doing. It doesn't really matter too much now, grab it, take a shortcut, or download it as a PNG. So what I'm gonna do, and we are going to work through the class. Yours is gonna be different but similar. You get it. Alright, next video. 4. First Draft using AI in Figma: Hi everyone. We're gonna start the course looking at a feature called first draft. Okay? It's AI driven. It's a great way to kind of get templates, get kind of started. It's more useful once you've got a few more of the skills from this course to kind of take it further, but I want to show it now because it's awesome and a great way to get started with projects. So you can see down here, I've got the prompt open, and I'm going to say it's a basic app. Make checkout page for a music event app, and boom. There you go. It's made a checkout page. I can play around with the styles and fonts, but it is something generated from scratch from Figmas AI. Let's jump in and look at the pros and cons of it and how to get it working for you. We'll also look at the AI feature for ad interactions. Let's go. All right, so I'm in a new blank design file. I'm in design. That's it tabbed on the bottom here and I'm going to go to actions. Now, this one here is a paid feature, so just watch if you're on the free one. It is where is it? It's called First Draft. You might search for it. I found mine here under Design Tools. It. The cool thing about it, you can give it some guidelines as in, do I want a basic app or a wireframe? Does it need images or not, basic site or a site wireframe. We've looked at that before, high fidelity, low fidelity. I'm going to do an app and I'm going to say I want it to be it's an event listing app. For music, and just click Make it. Stand back, watch the AI bots do the little thing. Oh, that was quick. Thought we might even have to jump cut and fast. Oh, Coldplay. Taylor Swift, I'm out. It's Sharon Billy Eilish. It's not my music. But what you can see here is it's actually built this unique app for you. It is generating these images. These images are like it's AI engine making them. That's why sometimes they can take a little while, and they're kind of sparkly. But oh my goodness, it's made an app. Look at it. Let's go. Let's prototype it. Let's go. Yep. Okay. And let's have a look. I like it. What works? What doesn't just kind of mocked up. Doesn't do a whole lot. There's a lot of interactivity. You can, in the Essentials course go, you Actually, let's look at something else. Let's look at the colors. What's this? That's the first color way. You can see you can go through and say, Oh, I like these ones. It's a great way to get started. And once you'll finish this course, the Advanced one, you'll be able to add all the interactivity and all the right ways to kind of get it out for designs. It's like working with a template, except the template, you need to be very customized. Okay, especially with things like the colors. Things like make changes as well. Look, you can say, actually, rounded corners. I want super rounded corners. No rounded corners. We're going for the boxy look. Okay? The spacing, we want to open that up. It's just very cool. What kind of fonts do you want to use? Okay? You can work through it. You can prompt it, as well, to say, can you a large hero box? I don't know if this is going to work, by the way. Okay? But you can start prompting it to do stuff. It would be probably easier for me to do a lot of small changes myself. Okay, 'cause it's done a version of it. It's not the thing I had in my head, so that's going to be the tricky part. You can prompt away, and sometimes it's easy just to make it. So have a look under assets. Okay? It has got no assets for this particular document. There's no library, there's no styles for it. Maybe that'll change by the time you get to it, but now there's still a lot of work to do, but very cool way to get started once you've got some skills. You can't just be a UX designer and go, Alright. I've learned nothing about Figma. I'm just gonna use the prompt. Maybe that's possible in the future. I don't think so, but I want to show you that there. The other thing I wanted to show you from the essentials course was, let's say we want to make another page. Let's go. Um and let's select it all and delete it. This one here, we're going to go back to our prompt again and we're going to say where we got first draft, and I'm going to say Event listing in detail. See or spell it right down. Here we go. Alright, it's gone and is it. Oh, I just made a new page rather than trying to use the one that I made for it. But you can see here has it used the same fonts? So look Public Sands, and this one is no outfit, so it's gonna get better. You know, I'm looking forward to the time where I just need a really basic page, like a Ts and Cs page or a checkout page that looks like a really trustworthy one, and it can take the stars that you've already got and then apply them. That's probably not too far in the future. The moment, it's kind of more idea generation and you fixing it up and changing it around after now, everything is different. But what it can do is we can do this part here, we go into the actions, and we can say, I'd like to look at add interactions. Okay? Between you and you Add interactions. Okay, and it did it, okay? So it's add the little magical interactions. So let's give it a prototype now. Let's start with this guy and go to plate. And let's have a look. I can't even remember which button it was. Oh, yeah, I worked. Okay? And then go back to the home. Alright. So those two little things can be powerful, okay? And will be better later on. But I just want to show you earlier on in the course, the kind of new things that are happening with Figma, and I can come back and update this video in the future. It's not taking our jobs, but it is short cutting some of the things we used to do in terms of, like, Alright, I wonder what a good form looks like. You can start working with M a first draft or like normal go back to home browser version, remember, go up to the F and go to Home, which is at the top. Okay? And you can go to the templates. There's plenty of templates out there. It's kind of the way I'm using it at the moment. It will get better. But it's new, it's fancy, and it will be more handy when your skills are even handier and you can kind of, like, take what that makes and make it, you know, connect up with styles and autolayouts and variables. Oh, it's gonna be fun. Alright, that is it for the first video. What do you think? Have a play round with it. I will see you in the next video. 5. Liquid Glass Effect in Figma: Hi, everyone. This video, we're going to look at Apple's liquid glass. Okay? It is a very cool effect, and you can see here it's part of the UI, but we can do it inside of figment as well. We're going to make this. It moves around and you can kind of see through it. It's all glassy and good. All right, let's get into it. All right. First up, open up a new design file, either using the New Tab, design file anywhere you want. And from your exercise files, I want you to bring in just an image. It can be anything. It doesn't really matter. I'm using this liquid glass effect and I like to drag them in from my browser like that, just to straighten toFgma. But you could use the Command Shift K, which is a shortcut for bringing in images, or you can go down here to the rectangle and say, are image video. The other thing just to clear up is that there's a couple of different modes down the bottom here. Unless I tell you, it's this middle one. We're going to be working on. Get the image in. I've lost my image. You come in, and let's draw something on the top. Now, the liquid glass effect only works on frames, so you can't use the rectangle tool here to draw it. It needs to be done with a frame. The F k, let's draw R, big old button through the middle here and we're just going to keep it simple for the moment. Let's just go and add the effect. Under Effex I've got it selected. It's a frame. I can hit plus, and I can go to drop shadow, and we can get into this one. Glass. Already, it's awesome. And what we can do is just move it around. Ah, it's so cool. Let's do a couple of little things. Make sure I have rounded corners. To get maximum rounded corners, just put it up something really high, like 1,000, then it will round off the edges. I'll zoom in, let's have a little look at the different effects for glass to open up. If I got it deselected, I click on it and to open up the effects, I click on this little icon here and I will open this backup. The light, where is the light hitting it? It's up to you. How bright is the light? You can type it in or just click and hold any of these icons here. It. I'll leave mine at 80, and then you can just play around with these. You'll get a sense for them. There's no right or wrong. The defaults great, but you can play around with things like the depth, how thick is the glass? Oh, big bubby glass, little thin sheet of glass. If you're designing for the Apple OS, you can check the specs to see what exactly it needs to be. You'll probably be better off going to the home and going to templates. And then doing a search in here and typing in liquid glass. Apple calls it liquid glass and Figma just calls it glass effect. You're probably better off just starting with one of these because somebody else has gone through the Apple design system. Oh, there it is there. It's the kit, start with the kit. But for us, let's go back to this. We can play around refraction and depth because we're not limited by the Apple specs. One of the ones that is a bit weird is dispersion, okay? You can see it a bit more when it's above, say, some text. Can you see the edges here? It's all gray. If I go dispersion write up, add some colors in there. Maybe better with some depth. There you go. You can start to see the blue come through and a bit of yellow over here. Obviously, frost is just how blue is. I do like it. The last one is the light. Can you see a little light bulb? You can drag them around. Depending on where you want the light to hit. Do we already do that? Yeah. I think we did. The only thing that might catch you out is that this needs to be on top of whatever it's trying to disperse. That's why we just started with an image just to make things easy for the moment. Let's do something hard in the next video. Glass effect. Oh, it's nice. Hopefully, my voice has got better. It's morning time and I've got my halfway through first coffee voice. Through the course you'll be able to actually tell what did by how much my voice has actually started to come around. Alright. Next video, Dan. 6. Working with Complex Layouts in Figma: Hi, everyone. This video, we're going to make this glass slighty thing. It's not really what we're doing here. What we're doing here is that this is the advanced course. But sometimes all of the advanced goodness is real tricky to work with. Let's have a look at this. If I want to move this button over here, you can see there's Auto outs inside of Auto outs inside of Auto outs. It's very good and structured, but sometimes you just want to move it and then Why are you in there? Stop being so complicated. That's what we're going to do in this video. I'm going to show you how to turn off or work with some of the complicated layouts. We're doing the advanced course, but sometimes we're not quite advanced yet. We're getting towards advance. Just need to turn some of the stuff off or at least work within it. So let's jump in and show you how to work with complex layouts. Let's go. A, First up, you need to open up a file. There's a couple of ways of getting to it. I've put a copy of it in the exercise files, so you can double click this dot fig file and open it up. Go through the steps of where you want to put it, probably put it in your drafts, click Import. And then wait for a second, and then it'll say, do you want to move it to a published folder? You don't have to or into a project, you can just click Done and it'll be ready to work with. The other way of doing it, there it is there now. I can double click it and start working. The other way to do it is if you go tofgma.com slash at BYOL, you'll find the files in there as well. Whichever way you want to do it, and you'll find Figma Advanced EfetoO. There'll be a bunch of other files as this course grows. You can open them up and say, open up in Figma, please, and they'll open up in the browser. Doesn't really matter how you get to this file, I'm going to open it up in my desktop because I'm old school. It should be in my drafts, where we go. And there it is there. Alright. Give you this one because it is very complicated. It is and it isn't. Okay? This was created earlier on in the course when I was using the first draft feature inside of Figma. Not everyone has access to this because it's part of the paid one. But I've got the end result here for us all to work with. The cool thing about it is that it is all autolayouts and it is very well structured. So I grab this one and say, I want shopping below, food delivery. I can just drag it underneath and look, they switch around 'cause they're in autolayouts. Undo. Let's go into the shopping layer here and say, right this top one, bottom one, next one. I can just click the top one, hit the down arrow. And can you see it moves it around in there. So it's all very nicely structured. Sometimes, though, you go in and you're like, oh, more Auto allots. Mou. More outs. More autolayouts. There are so many Auto outs, and where it becomes tricky is even if you are advanced, and you're like, Okay, I just want to move this button. Like I saw at the beginning here, I'm going to move this up here. It's going to go into there. All right. Now it's part of that auto out. It's not. I just want to kind of Ah, it's everywhere. Okay? That can be tricky both working with that feature, first draft or just other people's files or say you've just joined a big enterprise company, they've got a big design system, and you're just like, oh, man, this is really hard. I just need to do something simple. Stop being so clever. So what you can do, one of the nice things is you can select the parent frame and right click it and say, you where is it? Auto outs. Oh, more auto out options. They keep moving that and renaming it. Have a look. It'll be hidden here somewhere. We could say remove autolot, that'll only do it for that one frame. We want to say, get rid of all autolayouts in there and you'll find that they're all just plain old frames. Now, things are just a little easier. One of the other handy features of working with complex outs, is that there's a lot of layers going on still all the layers are there, which is good. Sometimes this button here. I just want to go in. Do it click. Then again, do it click. Do it click, Double click. I finally find this thing called Large button, it's got some text in it. Great. Want to move it out. We're going to make it glass because I'm going to show you more of a for instance of that effect we did earlier. But I want it to be over the top of everything. If I start dragging it, one of the defaults for Figma and one of the complications of working with complex files is that it will go inside of this container, which is part of the shopping checkout, or you put it in here and it's now part of this layout. It wants to automatically nest into these frames or auto outs automatically, which is cool most of the time. But say sometimes you just want it to go where you want. You do things like this. I'm going to undo to where it was, so you're the same as me. Okay, I found the button. There he is all the way down here. I'm going to drag him out. I'm going to say, you get out and put you maybe in between the bottom bar and the main contents get him up and out. So he is out, okay? So he's on top of everything. But as soon as I start dragging him, he dives back into something. So he's above everything now. I can close all these down just to make everything a little bit cleaner. So I've closed everything down. My bottom bars there. I don't really need that for the moment. And there's my button large primary. And again, remember, if I drag him, he goes inside something. What I can do is if I click him, okay? Before I start dragging I've clicked my mouse down, hold space bar. Then you can just drag him around anywhere you want. He won't miss I can't really point at the layers over there, but he won't move off the layers, and I can put him wherever I want. I can say you go there now. You see, he didn't jump inside any other layers. I find those two things are the most important when it comes to working with other people's complex files or using some of the automatically generated files, templates is just to go to Autolayouts, remove them, and when you start dragging things around, click Hold, hold space B move them around. Then he won't jump layers. Cool. That's it. Now what I want to do is do the thing I showed you at the beginning where we had the glass button and it was moving along. So let's do that together. A couple of things I need to do is my buttons going to stay up here. What I might do is just lock these layers just so I don't have to hold the space bar. I can just drag it around. There's nowhere it can go, a couple of things I need to do is, let's just preview it now. So I'm going to click on the app. I'm going to say, let's open up the preview, so that's shift space, and it should stay open there, okay? You'll see if I scroll up and down, it is working. If yours is not working like that, what you can do is click the outside, go to prototype. Actually, let's click on the background, and I'm going to say, make sure I got nothing selected. T prototype settings, I'm going to use this one here, the iPhone 16, and that's fine. You can use whatever one you want. That's over my preview again and still working. If that's not working, sometimes you got to go in here and say, actually scroll behavior. I want to scroll vertically so that it does actually start scrolling. But up again, we're all good. Thing I want to do is I want to get this to stick to the bottom. How do I do that? Because I have it selected and I grab this button here and I say, actually, I want you to be aligned with the bottom of this. At the moment, it's constrained to the top. Constrained to the top, which is going to work probably. I'm going to say, I'm in prototype. What I can say is, I want you positioned to scroll parent. No, I want you to stay in place. I can prototype it. Now when I scroll, can you see stays in place? Wo let's make them all glassy. Let's click on him. Let's go to design. Let's go down to affix. Now remember this has to be a frame for this to work. I can't be a rectangle. I'm going to get a drop shadow, going to get a glass. Oh, I do like it. I'm going to crank up the depth. The frost is about perfect. Everything looks good by default. Do sliding refraction up and down though. Look at that. That's cool. All right. Now let's go and preview again and scroll them up and down and he does the cool glassy thing, but stays where he should be. Now how do I get him to align to the bottom? Let's close that down. Let's go. I need to find out where the bottom is. If I click off, and I go to prototype, I can see iPhone 16 is, what is it? 393 by 852. I can click on you and say, actually under design, size of this frame should be 393 by 852, 92. It was only a second ago. I can't remember. We're going to guess 852. Come on, Brain. Can you see that? It's clip contents. You can turn that on and off. Unless I know where the bottom is now, so I can say you are going to be down here. I could hold shift so it doesn't jump into all the different frames. But remember, I lock those layers, so it's not a big problem. Now he's constrained to the top so that dotted line. I can say you constrained to the bottom because we have a bottom now that he can constrain to doesn't really matter. Shift, spacebar and look at us doing cool glassy effect things on really complicated designs. Okay? The parent, right click it, go to more layout options, and go to remove all autolayouts. When you're dragging around, hold shift for your dragon. He won't dive into all the different frames and autolayouts and add a sweet glass effect. You can see mine's got a red tinge, which is coming from this, my fill, which has been turned down, you could turn this back to white to get that more traditional glassy effect. Maybe a little bit of blue. All right. I hope that was useful. Touched on some things we learned in the Essentials course, like constraints, played around with prototyping, and making sure we can jam our little prototype into an iPhone, which always looks cool. A I'll see you in the next video. 7. Texture & Noise & Effect Order: Hi, everyone. Let's look at a couple of cool effects. One is this noise that we've applied to the background image gives it an old school look. The other one is this, this texture so we can get this really cool glass effect. Like we're peeking through the toilet window of the camper. Look how cool it looks. Oh, awesome. Let's jump in and learn texture, noise and some of the effects the layer order has on these effects. Let's jump in. To get started, you can just have any image. We're going to use the glass effect as well for this texture and noise effect. But if you do want to follow along exactly, there's an effect dotFIG your exercise files. You can open that up in Figma, or you can find me member at figma.com slash at BYOL, and you can open up this file and open your own version of it in Figma. Okay. So I've got this button, okay? It has got the glass effect applied to it. Okay? It is effect, and I've added glass. The other new effects, if I hit plus, you can have more than one effect applied to an object. Okay? And I can say, I don't want to drop shadow, which is cool, okay? I do like the drop shadow, but I'm going to go to the one that says texture, okay? And you can kind of see let's zoom in a little bit. What's happening to it? Let's crank it right up. Okay? The texture is kind of like frosted glass, okay? And that's what it does. Okay, gets to that kind of, like, dimpled, whatever you call it. Okay, you can play both these settings. A bit of both. The one thing that does look a bit weird is the edges of this there's a mixture of if I open up a texture again, a mixture of clipping to the shape so that it doesn't go outside of it and going back to glass and playing around where the light source comes from and turning that up and down. It depends on every instance. There's not a special number. But it is very cool. One you can do is let's have a look. Effex let's add a third one. Let's look at text sorry, noise. Noise, you can see, add some noise. In this case, it's interesting. I want to show here because noise is interesting. You can play around with just a monoolor duo color. There's two of them, and multicolor is going to work with all sorts of you can see in here, the noise is a bunch of different colors. So it gives a greeny old school effect. The reason I want to show you this is I'm going to crank this up noise size, just so you can see it. You can play around with some effects, you can play around with the order. At the moment it's doing noise then texture, you can say, actually, by dragging this strange little area over here with a little handers, you can see and drag it up and above like layers. It's going to do the texture first and then the noise. You might just find that you can't get the effect you want. You're trying to copy somebody else's. It's because this order is around different ways. Glass, in this case doesn't seem to make any difference which way it is. But some of them do. What noise is probably nicer for is for something like this retro image here. I can see you, my friend have an effect and it's going to be the noise. I'm going to zoom a little bit and you can start to see it gives a ll school retro vibe. Turn off turn on turn off turn on, you get it. One of the things about this setting where we've got the texture on, I'm going to turn the noise off. I'm going to delete it by hitting the minus. I like the texture. I don't so much like the noise on it, but let's say I do do this. If I want to at the moment, it's a frame, let's say I want to put text inside of it. I'm going to grab my T for the type tool, click inside and I'm going to say, book now, book. Okay. So what happens? You're doing it to the parent has got the texture case everything inside of it, unfortunately, gets the effect applied to it as well. If I want to do it like this, I can't do fancy autos. The text needs to be inside of it, all I need to do is do the text over here outside of it. Book now back to the move tool and put it on top, not inside. Okay, one thing I didn't notice is that the image was a frame and now the buttons inside of it and because I applied the image to have an effect on it, it's applying to everything inside of it. Can you see my text has even got the noise effect on it. Again, if I didn't want that, I'd have to grab these two guys and go, you're out of there, and you're on top. And I picked a different font. There you go. That is the texture and noise effect. You just need to know, especially everything inside a figma, is that you can often change the layer order of these things. You can have two fills and then play around with let's go this one. I can crack this right up. If it's on top, it's very different if it's underneath. It's not that different, is it? Let's turn that up. If the whites on top or the whites below, it is very different. All of these have it and it's not that clear that you can move them along. There you go. Undo undo, undo, we made a cool button. But now I might need to group. Right click Group. Yuk. Now, they move around together. Excellent. Alright, that is it. See you in the next video. I'm back because I wanted to show you something. I was just getting ready to do the intro for this course. So for this video, I do that at the end so you can see what we make. I was just making it look better because I was like, something a bit about this. And then I was like, Oh, I made it better. Oh, I should show them. Okay, so I've got this thing selected. Okay, so I've got the button selected. There's a couple of things going on here. So there is this little fill that's left on this. It started life at 100%. It automatically when you apply the glass effect, turns it down to 10%. I could get rid of that, and it kind of gives it this more glassy effect, I like it. The other thing is weird little border around it that appears a little bit too strong. If I go in and click on this, I can see the glass under texture, radius. If I turn that right down or up, can you see what it's doing here? I somehow picked this really weird point where it's the most horrible. You can crank it up and it goes away and when it's really low, it goes away. To find something that works for you, you can play obviously around with size as well. But if you get it smaller and play around with a radius big or small, I don't know. I was like, that's what I was looking for, and my text needs. Drop shadow. That's not so blurry. It doesn't go down so far. Alright. That is it. Now we can finish the video. See you in the next one? Look how cool it is. Ho. 8. Progressive Blur Effect: Hi, everyone. In this video, we're going to look at something called Progressive blur. It is this where color becomes progressively blurrier. You can do with images as well. It's really easy and really quick and we'll do that first off. If you do, though, want to hang around, we'll make this where we kind of go a bit further in this tutorial, just to recap some of the nice things we learned earlier in the essentials course to catch everyone else up. There are some paid features that we go through, some AI. It's worth hanging around if you're a little bit newish to Figma. We just came here for the progressive blur, do that at the beginning, and then skip on to the next. Right. That is it. Let's get in. Let's make blur progressively. All right, you'll notice that my UI is dark. I figured I'd show you just before we get started. I switched mine at nighttime. You have to have a file open, go to the FK, get down to preferences, and under theme, you can go between light and dark. It's nighttime now, and the light one is actually really light in my office, so I just kind of turn it down. Remember, file open, preferences theme dark. With nothing selected, you can change the color of your page. It might be default, be white, but you might be wanting to work on a darker color here. Co. Let's grab the FK. Click once. Let's grab hiPhone 16. I like this, the white contrast against the black. Let's bring in an image. Command Shift K is one that I use a lot, or I drag it in. The problem with dragging it in if it's a really high resolution image, it comes in massive. Command Shift K is a really good shortcut. I'm going to bring in this 03, and we're going to go open. The reason I do it this way is I can click and drag it to be a size that I want roughly about that sort of size. Now let's just make it progressive blur and then we'll make it look like it did in the intro. All you need to do is another effect here. You can go from drop shadow down to tech to layer blur. That's the one we want hiding in here is progressive. And what you can do is even just like that, it's pretty cool. It starts at the top, really crisp, and you can see down the bottom here, it's blurry. You can drag these little points around. So from left to right, you can hold shift and it will snap into straight lines. So you can do cool stuff. It doesn't have to be an image. I can gra F k for the frame tool, holding Shift, it's a square, give it a fill color, any old fill color over here, as long as it's green, greenish. Come on, green, te aqua, that one. We can do the same thing. Oh, let's do a shortcut. Let's have the selected. I've got an effect. I can click here and it goes blue. Can you see this area that we used earlier on to drag it around. You can click on it, copy it, click on this and hit Paste. You can copy and paste styles. And we'll do it. We'll go in and we'll effect this one a bit more and it does a really cool thing. If you grab end and drag it right up, can you see it really blurs out. It's a very cool effect. I don't get to use it very often. It does work in code. You developers is going to freak out a little bit about having to apply it, but it is achievable, reasonably easy with CSS. That's progressive blur. What we're going to do now is style it how we had before. There's a little bit of a recap on some of the things we learnt in the Essentials course, just for those people who need a recap or if you skip the Essentials course because you're already really good. You might want to check out the rest of this video in case there's something you've missed. I want to keep that. Looks cool. It looks even cooler against the duck. Love it. What I want to do is I want to make this square, so I need to make this cropped. What I'm going to do is I'm going to go to fill, which is my image. I go to selected. There's the fill. I'm going to click on image, and I'm going to go up to here, it says fill say, you're not filled, you're cropped, and then I can drag in this edge here. How big do I want it to be? The moment -16 16116 tall, so I'm going to make mine 116 White. It is a square. Now, that's dragging the edge of it. The edge of it is the crop. If you drag anywhere in the middle, you can move it around inside of the crop. So I'm going to drag mine so that this is right in the middle here. I'm going to click out in the background, and now it's a square with this thing. I think I want to play around with the layer, progressive layer blue, and make it big like we did in this one. You can see you can start it anywhere. It could be here. Because this is meant to be a generic genre listing, not an actual artist, I might have to start it quite far in to give the vibe of hip hop, but not actually show the artist. All right, I want to scale it down. Whenever I scale images, this will work, but whenever I do scale things, I use the K tool. K on your keyboard to switch from the move tool to the scale tool just to scale all the effects and everything. It's just a really good habit to be in. That's probably how I want my one. That's zoom out a little bit. I want to add FK for this because I want a little box for the genre. Get it snap to the top. Pick a any color as long as it's green, you can hit the eye on your keyboard for the eyedropper. Just grab that. Oh, it's too blue. I want it to be a little bit more on the green side. Oh, that's it. I'm going to type some type stuff. So Type two, click once. I'll actually speed through this because you don't have to watch me type. One thing I do want to pause and show you, we did very little speeding is I really like fonts, okay, that are like roboto, I like because it has a condensed version. Okay? Condensed is just really handy when you're trying to fit lots of type in. Can you see? It's actually just, you know, in this other font, can you see how much whiter it was? Was in a condensed font, there's lots of condensed fonts. You can in here just actually type in not roboto, type in condensed to see all the different kinds of condensed fonts. And some of them are super condensed. Like, see that one there, you'll be able to fit a lot more. There's condensed and compressed, copressed compressed is smaller than condensed. I'm not sure I can't remember the language, but C. What are we doing? Condensed, okay? And it's just, yeah, you can fit more text into what is a limited space, especially on a phone, because it's that weird aspect ratio. It's narrower than it is tall, right? So let's undo. So I got my thing actually speeding again. We did no speeding again. I like using the same font with different weights. So still roboto condensed. One is light. One is bold, using the hierarchy of size. Less important, more important. Playing with the weight, okay, light and bold. Again, you can skip ahead if you're already really good with this sort of stuff I'm just kind of I don't know, adding some extras. Actually, keep along because there's the AI things really. Around the line height and just drag it to the left. Not the line height. I'm going to play with the line height, select it all and line height, I'm going to type in -50. Way too much. I'm going to type in. So you can just type over the top of it. I can type in minus actually just put in 16. I'm going to hold Shift and use my up arrow just to find something. What are we doing 24? Not holding the Shift arrow now I'm just using up and down arrow just to get the line height where I want it to be. Something like that. All tips we kind of did in the Essentials course, but hey, we'll throw them in here at the beginning. Okay, escape a couple of times to get out of the type tool. I'm going to click this. It's going to be in here about there. Now, what I want to do is I want to make a few of these, so I'm gonna zoom out. I'm going to grab that big enough? Shift zero on your keyboard will be the automatic to getting to 100%. Okay? So hold Shift O is fit all in screen. Number two is to select something and zoom all in on that. So that shift two and shift zero on your keyboard goes to 100%. I like that one. So the font size is probably big enough. If I want to just grab them both and make them bigger, hold the K tool member for scale, go and they both get a little bit bigger in terms of the fonts. To move it around. Alright, let's make a few versions of this. So I'm going to select it all, grab my option key on a Mac. Oh ko PC to duplicate it, drag it straight down. I'm going to have one, two, three, that'll do the Ooh four, five. Okay? For the moment, what I want to do is, can you just click on the boxes themselves? Let's see if we can select on all of these. Okay, now, this is a paid feature. All of this stuff often is C under actions. Okay? Let's go down to. Our first chef, no. Let's go to. Rewrite this. Click on it, and I'm going to say, What do I want you to do? I want you to speed typing. If I is music, let's see if I can do it without having to select a ti. Oh, I can. It's doing it. It took away all of my other things. Damn it. Okay? It didn't do that when I practiced it. So I'm going to have to build mine slightly differently. Mistakes, people. Okay. So actually, it's probably always just going to be easier if I grab you. Put that there, paste the text. They're in two separate text boxes. Zoom out. How is my line spacing a little bit higher? A little bit higher. All right. Now let's do it. Let's grab and go down here. I'm holding the option key key on a PC, and then I'm going to go Command D. Did I say that before or Control D to duplicate the thing we just did? How many I got now six. Now I need to select all just the text. I just want just the hip hop, but I want it to change the word genre. With the selected, I want to select this hold shift, and I click on it grabs the whole thing, no, no, no, no, I just want to grab the text inside of there. Let's click on this first one. Okay, this guy here by Double click him. Then if you hold Shift and your command key or Shift and Control, you can click on you and you and you, and you and you. So go them all selected. Now I can go to rewrite. I can say you rewrite this. I want you to say Speed typing. Dramas music. I'm scan it's going to replace my first one. That says hip hop. It is, isn't it? That's okay. Oh, geek Make changes. To words only. Way too long. It's cool, huh? So good for placeholder text. I like it. Probably gonna have to pick. It's really good as well, 'cause you get a sense for how long some of the things are going to be. So you're like, Oh, that was cool for hip hop, but all of these really need to be a smaller font size, probably 24 to be able to fit everything in. Oh, we did a lot in this course, huh? We came for progressive blur. Now, you're using AI. You're learning all sorts of cool shortcuts. The advanced course. It's awesome. It's full of soul beats base vibes and to groups. Alright, that is it. I will see you in the next video. 9. Class project 01 - Genre Listings: All right. It's first of the class projects time. So the class projects are listed inside of the exercise files is a PDF called Class Projects. I'll look something like this. And this is the first one. I want you to create a mobile phone frame. Basically, I want you to remake what we did in the last tutorial. So this thing. But specifically for your brief. Mine is Limerick hip hop. I want you to focus on that and then find out whatever the sub genres are for it, like this, for instance. Techno, you might have dub techno acid as industrial. These are all types of techno. Rock, there's a lot of subcategories. You don't really know the music genre you're working with. Do some Googling. I bet you will find there are subcategories make them up. That's not really what's important here, I want you to experiment with the progressive blur. I don't mind how you do it. You can do it exactly like I've done it. Just play with it. I don't mind how you do it. If you do have the pro account, I'm going to assume in this course you do have the pro account. If you don't can totally carry on with it. Not going to apologize every time saying if you don't have it, try and find a workaround, because Okay? If you can't do the AI features with rewrite this, that's okay. You've seen how it works. You might use HGBT instead, which is free. That's the main thing which everyone has, but the AI features, and some of them in this course are pro only. But if you do have them, go play with them. Have a play around with rewrite this, which is when we did the text. And I did it with the images as well. You can select on these and either go to the actions and go to make an image, or you can select on an image already, go to the fill and say, make an image, you can use AI to create the image. Something like Unsplash or pixels, you will find lots of free images that you can use for filling out your prototype. I was the class projects, you need to do that. Definitely do Progressive blur, play around with AI features, deliverables. I want you to take a screenshot or export your image and upload it to the class projects. Screenshot on a Mac is Command Shift four and you can drag a box around it. You can do something similar on a Mac with print screen. I think that's how you do it. I know there's another shortcut for PCs. You probably know what it is. If you don't can just export the image. I can select on this. Oh, I would look really good. Oh, I didn't think of this. If you went to present and it was in a phone, learned earlier how to turn that on. This would look cooler, do a screenshot than this. Otherwise, if you're not sure how a screenshot, you can click on the frame, go down to it export. I want to export this whole frame, scroll down again. What kind of size? Just at one size, and I'm going to do a PNG, I'm going to click Export iPhone 16. You go. You can use that file to upload to the class projects for the class project. Yeah. Because everyone is unique and it's an interesting project, I'd love for you to share it on social media. Tag me with both the hashtag Figma Advanced makes it easier for me to group and look at specific courses. But make sure on Instagram, the Facebook group, Twitter, make sure you tag me at these handles here, Whichever use your normal flavor, your Instagram or a LinkedIn or a TikToker, up to you, but I love to see. Have fun. It is mainly just about playing around with progressive blur. You could go a little bit further and make this a lot cooler in terms of a genre page. We're keeping it light for those of you don't have much time, but if you're ready to play, you can make this page a little bit nicer. If you're unsure about how to do these, what do I just copy them? What should I do? You can have a little look online for some inspiration. A good term is something like UI card. We'll just go through the back at home. You can go through the templates, have a little look so I might go listing. But didn't really work. You can kind of see there some different ways of cards is probably better. Cards is the generic term for, like, anything inside of a box, and you can start to see some interesting kind of maybe even feature cards. Let's do that. Feature cards even better, a little bit more specific, okay? And you can see some things like, Oh, I might do that with this, something on the bottom, okay? Up to you. It can be simple, can be complex. Looking forward to seeing what you make. Alright, class project over. I'll see you in the next video. 10. Saving Effect Styles & Clearing Unused Styles: Hi, everyone. We are going to turn the effects that we made in the last video into a style so that we get to reuse them and we get to change them all at once. What are going to go uniform to perspective. Actually, the word is progressive. But we have control over them all and then I'll show you how to remove any style libraries that have been added to your file, they get a little bit confusing, styles that you didn't ask for. Then I'll show you how to remove all the styles that you didn't ask for that all just appear in your libraries, and you're like, Where do these come from? I'll show you how to clear them out, so we've only got the things that we've created as styles. Let's jump in. All right, so in the last video, we made some styles. I made a couple. I made some drop shadow ones as well. Let's take this progressive blur. You can see it here. It's been applied to my fix panels. These four little dots is the way we can create and use styles. Now we're doing it for affix. We can do it for stroke and fill in anything that has little dots on it. I'm going to click on affix, and I'm going to say, I would like to add new Start effect. It's different from hitting the plus over here. We go into the dots. Head plus and we say, we're going to call this one, I'm going to call this one M. I'm going to call this 101 because I'm bound to create another one and another one and I need to differentiate them. Sometimes I'll put the client name in front of it just so I know that's the version of drop shadow I'm using for bringing a laptop or whatever company it is. You can describe it down here as well. Let's click Create Style. The cool thing about it is that we can go through and say, new thing that we draw FK member progressive blur only works on R frame. No, that's something else. That's the glass effect. Okay, so I'm going to go to affix here. Instead of heading plus and going through and setting it all now, I can just go to the little dots under affix and I can say Progressive blur. There you go. Done. Reusable. The other cool thing about setting styles is that let's say that let's apply these styles. Oh, they're already applied. That one's progressive blur. That one's called layer progressive blur. Layer blur, progressive no, that one's got it. Oh, I created the style from this one. These ones don't have applied. So I'm going to apply all of these ones. I'm going to say I would like to remove the effect and I want to apply not the random layer effect. I want to want to add the thing that I've made called Progressive blur. All right, so now they're all connected. What I would like to do is change them all at once. I got nothing selected. Absolutely nothing. You can see over here, as long as I'm in design, you might be stuck on draw or Dev. Okay, make sure you're on this design. Under Design, you will see all your styles listed that you've used. The cool thing about it is I can say, look at this. I've got a little settings here. I can say edit this style. I can go into it and say, I would like it to end actually what's going to be more obvious. Let's get to uniform. I switched to uniform and they've all updated. That's a great way of controlling a really large document. Create a style, and then you get to edit it by having nothing selected and go through your style. Wanted to recap that. We didn't do it in the essentials course for effects, but we did it for lots of other things. So if you're skipping straight to the advanced course, what you'll find is, it's say, what this, it's a color that I like, Okay? Instead of typing it out every time, you can go to Styles, do the exact same thing hit plus, and this is going to be my primary primary color, and I can create a style, and then I can start reusing that. When I draw a new frame, I can just go into here, hit the styles button, and bam, we've got primary color. That's all we do for that. The next thing I want to show you is I want to show you how to remove some of the default libraries that are giving you style suggestions if you want to clean those out. It might be just there by default. It might be there because you've opened up somebody else's document, maybe a larger project, you want to clean up. What I'll do is we'll click on this one. And if I hit the under affix, I'm going to actually, it doesn't matter which style we go for. I'm going to go for the fill. What you'll see is like, can you see there's lots of other ones down here? Like, Where do these come from? Okay, you might not have anything, but you might have this giant list already. Actually, I just want to tidy it up. You can go to all libraries, you can go to the ones that are credit in this file. We'll just tidy them up. You're only showing the ones in this file, not all libraries that you might have as part of your job. We'll do libraries specifically later on, but it's just nice to tidy things up early. Look at this one. Let's break the link to the style. Let's go into here. Okay, same thing here. Okay, my fex styles, there's all sorts of stuff in here. So I can go into my library, and say, actually, I don't want. I'm going to remove the libraries, and from this, this this, go back. I'm going to remove this one and this one. These are team libraries that have been shared with me in this document. We'll cover team libraries later on, but sometimes you just want to tidy them up, go away. And I've only got Progressive blur now. Nice. All right, so that's adding effect styles and just styles in general. The benefits of them means that once they're applied, first of all, you get to apply them really easily, and once they are applied, you get to edit them all at once. We looked at clearing off any styles that are connected to your document that you didn't ask for. All that is it. I will see you in the next video. 11. Workflow Tips & Tricks: Everyone. In this video, we're going to look at all the tips and tricks that I can think of. I'm going to cram them all into a video. If you're already good with tips and tricks, you can skip along. It's a very long video. I feel bad. But there are a lot of tips and tricks and a bonus for anybody that waits to the end, I'll show you this. It's a little keyboard that I've got for Figma and I'll show you what it's useful for Cool. But it's a bonus for sitting through all the tips and tricks. This is either going to be your most valuable video for the course or you might not off because it's so long. Well, let's jump in. Good sales pitch, Dan. Mary hands alert. Video time. Alright to get started, open up any old file. We're going to open something quite complicated to kind of prove all the great shortcuts. In your exercise files, there is a link here called Workflow Demo. You can open up anything. I just really like this file. It is in your exercise files. It is called Workflow 01. Either way, you'll be here inside of Figma. And over here on the pages, let's go down to the design. We'll cut to this one. This is the one I like. Very cool. Problem with starting with somebody else's file or working for a large company is that sometimes it can be quite complicated to change any old thing, especially when there's no styles. What you can do, though, is one of the easy ones is to select a whole chunk of stuff over here, instead of playing with a fill because you've got mixed things selected obviously you've got loads of things selected. What you can see here under selection colors, if you've got a lot selected, there might be a little drop down like this. But you can see here, here are all the colors inside of there. There is my primary color or my accent color. I'm not sure exactly what they've called it. Actually has no name. Got the hexadecimal number. So we can click on this and say, actually, I would like you to be. Or blue. It's just a real quick way of working with lots of files rather than doing the dreaded shift, clue. Click on that one, hold Shift, grip that one. Who's done that? That takes too long. Another really handy one is, let's click on this box here. I'm zoomed out quite far. I love the shortcut Shift two. That will zoom into whatever you have selected. If you have a tiny thing selected, so if I hold command and click on this little dot that jumps inside the group. Let's Control on a PC, command on a Mac. I I shift two, it's not really that useful. Okay, so Shift one is because it zooms it out to show everything. Shift two right into the thing you have selected. Shift zero is 100%. That is a really good one. Shift one, two, and zero. One is everything on the document, two is the thing you have selected, and zero is 100%. Perfect. Let's click on. Let's say we've got this here. Let's click some holding Command on my Mac, control my PC. Just jumps in 'cause there's a group inside of a group inside of a group inside of a group, and you might die for all the double clicking, okay? So you have nothing selected. Just hold down Command or Control. Click on that. Then you can go up to Edit, okay? And there's a Select All with. This is super handy. You can say, actually, I want to fill I want everything that has the same text properties. Okay? And it's gone through the entire page that we're at. I zoom out a little bit. What else is there? It's just those guys. But it just means I don't have to go and shift click them all. I can say, actually we're going to use, I don't know, Acme for this one. Oh, I don't like Acme. I'm wrecking this man's work. I think he's under introduction. There he is there. JH Patel, you made a cool template. Thanks for sharing. Alright, other cool tips. Come down and let's grab one of these buttons. I'm going to double click away. This is a bunch of stuff. It is more than just text, it's got a padding around it so you can go to edit and select. There's a bunch of other different options in here. We won't cover them all, but imagine if it has a drop shadow, you can go through and pick everything that has the same effect. Going to go do same properties. It's picked every component that looks the same. Property is a bit more generic. It's got the same fill color plus the padding, plus the corner radius. I think that's it for the whole document. Try one more. Let's grab the circle here. Let's go to edit, select with, and let's go to fill and you'll find that lots this document has the same fill, similar to what we did before by using the selected color. Vertical. One of the things I get asked is, you see how JS has split everything with these pages here. Let's go back to one of our old files. I'm going to go back to this one we made. I've only got one page. What we can do is page divided. I've got this one. This is my Hi Fi. Let's speed through this. Okay, so I'm going to have a components page. It's going to be the top. I want to separate it from my kind of working docs. So I'm going to add a page, and all you do is page three, to divide these up. You can put the hyphens in like JstedO I like to hold Shift and hit the underscore button, and it kind of looks more like page divider. If you want to get even fancier, you can add emojis to any of these. Say, components, you want to find something actually do it to mobile here. Automatic Control Command Space bar, okay? And this will pop up. It's a little emoji guy, and you can double click on any of these. So I'm going to type in mobile, find something mobile phony. Is that a mobile phone? Yeah. Okay, double click on it and it will go into wherever you have your cursor going. So you double click. Oh, got two of them. Okay, on a PC, it is, have your cursor flashing inside of here, and then hold down the Windows key and hit either, I think it's period or semicolon, one of those two. That looks nothing like a phone. You get the idea. And for components, you got to put puzzle pieces. There you go. All right. Hiding the UI is useful. It's command and backslash, or Control backslash on PC. Just hides it while you're working. Doesn't change anything. You can still work if you know your shortcuts. Any of these shortcuts have changed, while in between recording this video and where you're watching it. Have a look at this question mark down the bottom. Go to keyboard shortcuts and have a look through there. They'll explain all of the different shortcuts. They're blue if you've used them. Okay? They're dark if you haven't used the shortcut, okay? There you go. I'm going to turn my UI off because once you got the UI off, it becomes a little bit tricky to use, but you've got more space, especially on a laptop. But that's where the super most awesome shortcut that ever lived is. It's called the quick actions. Okay? It is basically a shortcut to getting to this button here. Okay? So let's close it down. So the quick actions. Let's go. The one I use it for the most, it's pretty boring. I'm going to command or control click the word I'm Jenny, the top here, and I'm going to use my quick actions, which is Command K or Control K on a PC. I'm going to type up a case, okay? Otherwise, that menu takes forever to find up a case. But you can use it for anything. Anything in any of the menus, include this top menu bar here, I'm going to say Command K, and I'm going to say rotate 90 degrees to the left. Not sure why, but everything is in there. Last one, Command K, and let's translate it too. I don't know. Let's go to Portuguese. There you go. And do and done. Not everyone might have to translate. It might be a pro feature now though, think of it. But as up a case, that's free for everyone. Who remembers how to turn the UI back on? That's right. Command or Control backslash. That's where it's leaning back. Forward slash. All right. The next is a relatively new update. Okay, I'm going to command click this button at the top here. It is a component of a master. I didn't make it, so I have no idea where it is. Or mentioned if there was a great shortcut, ready? Shortcut, toggle back and forth. What is the shortcut? It is on a Mac. You hold down all the buttons. Command, Option control. All three of them in the bottom left and hit K. On a PC, it's slightly different. It's Control Alt Shift K. Have a look at your keyboard? It's hard one to remember, but if you are doing a lot of adjusting components like I do, you will like the shortcut, and you will get used to it. Remember, there'll be a shortcut sheet in your exercise files that I'll put all of these in. I just love being able to toggle back and forth really quick. Anything else? Got any other components, This one here. You're not this one is all the buttons plus K, toggle back and forth. Another new one is you can copy and paste styles now. We've only made a couple of styles here. But if you've made a bunch free document, you can seck on them, copy them, and you can select multiple ones. I don't have multiple ones. Make multiple ones, Dan. Wait there. Drop shadow, so I can select two of these guys. Just click on the top one, hold shift, grab this bottom one, right click it and I can say copy styles, move to another document, have nothing selected, and then just hit your normal paste. Command VN MAC Control V on a PC. Copying and pasting any sort of style. Nice. All right. Let's do some super fancy field work. I'm going to go back to the document I was working at. I have no idea where everything is. Oh, I created a new page. There we go. Let's look at all the fields. So let's start with a title. You ate them? All right, so I've added a bit of text. All of these fields are adjustable by just clicking in them, and just using your up arrow. I like this when I'm picking fonts because I'm not actually sure what size I'm doing here. I'm just holding up arrow or the down arrow. Click in any of them. You could do it with that letter spacing as well? Use your up arrow or your down arrow. You can do it for any single field. This here, this position here, let's say X and Y, up and down, moves it left and right. If you want to go in bigger chunks, you can hold the shift key. It's the large nudge or big nudge, and it will go up in multiples. Can you see here of eight. That works for anything. Rotation. I wanted to go up, it doesn't do an eight, but the holding shift does one. Just holding nothing down using arrow key, moves it in ones. But if you hold shift, it'll move it in a bigger chunk. A lot of us are using the eight point grid. So when we are moving things along like position, it'll go in, let's start down 100 and click in here, hold Shift, you can see it's going up in eight, down eight. Let's move this over so it's a little easier for the editor. Sorry editor, and saying that, I'm going to zoom right back out, and we're going to go to preferences. Go to litleF, go to preferences and down the bottom here is something called the nudge amount. By default, it's one. That's just using rake or eight. That's if you hold shift. You can change it back to ten. That was the default for a while there and a lot of other programs. I like eight because it's really common spacing four. Mobile and web. It's the same when you have nothing selected, not using any of the fields, you can click in here and just use your Ara key to move it around, hold shift to go in bigger chunks. Eight pixel chunks. You can drag on all of these fields as well, especially the ones where they have the icon. Can you see here, you can just drag the icon left and right instead of having to use your keyboard. You can just drag it back and forth. If you're more a dragger person. Some of them don't have icons. That one does. I don't have any layer height, so it doesn't really work. City, just drag that back and forth. The ones that don't can hold down the option KinemaC on a PC and they still will drag, even if they don't have an icon. If you love doing that type of thing and there's no icon like this one does, you can just hold down the option KinemaOky on a PC. One of my favorite things is flipping it upside down. No. Let's go and Ike for the frame tool. Let's say you draw something from side to side. Let's give it a fill. Ok. Oh, you can use them in here as well. Watch this. I can use my I'm on HSB. It's up to you what you want to be on. I prefer HSB. So if I want to change around with the hue saturation brightness, hue I want let's go to the brightness. It's really bright. I's in the top right. You can just use your down arrow. You see it comes down, down, less bright, less bright, less bright. Gain a bigger chunks if you hold shift. Instead of trying to go, Alright let's say that it is about there and you want to bring it down, you can just grab this one and get them straight down rather than doing the old drag, diff, go straight, straight. The reason I want to do this as well, I want to show you the other field trick is, let's say I need to divide that into three parts, which is tricky. My brain doesn't work like that. I'm going to find the dimension so it's a width, perfect. You can do divide by, which is forward slash three. There you go. Now I've got three separate boxes, divided by three. Here you go. You can do all the math. You can say, actually, I want this to be just, let's say you want to put. You want to shrink it down a little bit each side. You want to minus eight from each side. So I'm going to say -16, it's a little bit smaller now. Eight pixels either side. Give yourself a little margin. Can't do rotation things, get confused by 90 degrees and 45 all the time, like I do. You can say, right, I want three, 60/4. All right it's 90, not 45. All right. Let's talk about some of the hard symbols to find. I'll paste them on the screen here. They're called smart symbol Okay? Those are the ones that are there at the moment. I'll add this to the shortcut sheet. But let's say pick a path here. I'm going to rotate this back around where at 12 degree zero. I find typing in here. You have to type them in order, and they have to look exactly like the top bit. So if I go bracket, C, lower KC and another bracket, it'll instantly give me copyright symbol. You can see how this is going to go, R, it'll go through and give me the registered trademark one. Those are handy. Probably the ones I use the most are the kind of arrows. It's hard to find in the font sometimes and you can see it's just dash and greater than, less than, whatever that one is. The down arrow is weird is VB. There you go. It's a down arrow. Up arrow is the key I can never find on my keyboard. Please hold. There it is on my keyboard. End of the six. The editor would have fast forwarded that, but that took a long time. So I'm going to have to hold Shift, and I'm going to go six, six, and then space. You have to put it a little bit afterwards, otherwise it doesn't do it. And the last one is the square. Okay? Just we go. Square brackets, left and right, head space. Oh, looks like there have to be a space in between them. I don't use this one, obviously. There you go. So square bracket, space, closing square bracket. There you go. Just some of the smart symbols, okay, for all the fonts. Next one, short up for a component, select all of this. I'm going to go Command Option K on a Mac. Let's Control K on a PC. We looked at this earlier is if I start dragging this around, it really wants to jump inside of things. You're like, that's cool, but don't go inside that frame. Don't go inside that component. Remember, you click it to start dragging it, then hold Spacebar and move it around. You'll see it will not in the layers panel there, it will not go through and try and jump and be part of other layers. Nice easy one is Command one gets you back to your little home option unless you're on the browser, then I'll just get you back to the first tab in your browser that you have open. If you're inside, it works in a browser except it just jumps to the different tabs. Command one, two, three, whatever tabs are open in your Chrome browser, fiery or whatever you're using inside of Figma the app, it does a similar thing. See these tabs up here, I can go Command one for the home, Command two for that document, Command three. I can go two and three, two, and three. It's holding Command or Control on a PC and just toggle between the different tabs that are open. You do have a tab that's more say you're pulling components from a library or some file that you need to pull from all the time. You don't want it up here where you want to turn it into a tab, you can right click and say pin that tab. You can see up there just becomes this little icon, makes it smaller and it's harder to close. You can close it though. That works on the browser as well. You can pin tabs. That's just a normal chrome type or safari thing. You can unpin them. You can reorder these as well by clicking, holding, and dragging them. Often, I'll open them up in funny orders. You just want the one that you're pulling from to be at the front here. Even if it's not pinned, you can just drag it around. So it's at the beginning. If you are working with the same files over and over and it's a pain to figure out where they live every single time, you're like, in my recents, let's say it's this Limeric techno one, you can add it to the sidebar. It's favorites. Click it there and you'll see there it is there, Limeric techno. Whenever I open up a document, you'll have some that are in there that you use all the time. It doesn't matter where you are in your project as well. If the home screen or if you're on the browser, go to keep forgetting in the browser now, you can go to the one that says back to files. You get back to the home screen instead of clicking on Home Screen. Let's close it down. It doesn't matter where you are. See these three little dots. These are handy, just have all your recently closed files. Instead of having to go back to recent. I'm not sure if that's a saver, but there it is. Another one is if you're working with really big files or really old computer, you can figure out what's actually causing it to run slowly. You have to be inside the doc in question. That may be running a bit slow and you can go to the F, go down to view, and there's one called memory usage that appears over here. You can see it's using 2% of my memory, which is not much, so it's fine. Yours might be maxing out. And if that is the case, you can click on Managed memory and you can figure out what is actually causing you the problem. Page content is doing most of the work and imported components from other places are doing a little bit of that gives you some tips. You can turn this on as well. I say it is page content is doing really badly. It's up to 80% and everything's a bit sluggish. You can see in here, it'll turn it on for every layer. Can you see a which one has little dots here, none of my layers are doing anything. You can see this frame. It's got a 0.2%, and you can kind of work out what might be causing your problems. Often, it can be SVGs, really complex ones that you've imported. You just got them from a free site, and it turns out they're really poorly made. There you go. You can see the suggestion here. You can flatten the SVGs. Or it might mean that you have to pull some of the pages out and make two and make more than one document. My machines running fine, so let's close that. Last thing before I show you the keyboard is you can actually drag this panel out often, especially when you've got kind of complex layers here. You can drag this right out so you can see them a bit easier. Okay. But also under your Assets panel, once that starts getting a bit mad, I'm going to look at the assets for this file. Don't have a lot, but you can start searching for it. You can start searching for. There's an icon in here that I know what it's called because I named it really well. It's called Export and you can search in here. And it's this one here, it's this guy here. Works only if you've been naming all of your assets. You'll notice in this one here components, there's a lot of frame 64, not good. When they do get big, you can go into here and you can adjust the filtering by say, let me just show the lists just to make it a little bit easier to figure out where everything is. That search works under file as well. You click Search and let's say I want the stars that I know are in here. There they all are. They're all through my document. But I can set them all now, or I can click on them and say, go to here. But I can start clicking on all of these stars. Wow, there's a lot of stars used. I can select them all, delete them, remove them. They are all down there. When your layers are getting real long, this is easy. Or if you need to find, let's say, this one here, I can go to search and I can find the text with the Wiz, then I don't even know what that means. Arent. You can search in your Laos panel as well. Got to remember to turn it off by hitting the cross. Otherwise, you'll be those. The pages panel, okay, can be made bigger or smaller, okay. By default, you get this really tiny little slot, which can be a bit tricky. Sometimes you don't want to see them all as well. So you can make it smaller. Alright, let's look at the cool Figma keyboard. Alright. So it's this here. Okay? This is the work louder, okay Figma creator micro. I think that's what they call it. And all it is is just super awesome shortcuts. So you can see here, you can program it to do anything, okay? So we've got scrolling. Zooming, okay? And you've got automatic shortcuts for credit component, scale to, I love. Alright, that's component. You can program them to do everything. I don't use them all, but it's just handy. Okay, especially when you're using figma all the time to plug that in. Also a beautiful bit of desk art. It comes with a bunch of different buttons. Okay, so you can kind of get it to do what you want. Now, actually, not all of you have seen my office, right? This is what it looks like. That's you normally facing me using this camera. Okay? But this is my office. Um, yeah, some three D printers and stuff. Yeah, this is the converted office above was just a little room above my garage that we converted to this. Came out really well. Alright, into the computer. All right. This is one I want to show you that Figma one is not being made anymore. It was kind of like a limited time run with Figma kind of a promo. I missed out on the initial launch. They sold out quite quickly. I got one on Ebay because I'm a nerd and I wanted the official Figma one. But it's actually a keyboard that this Wlouder dot cc company make. Have a check. The Figma created Micro might be available, sold out now. Okay, but they do have just the regular creative micro, which is currently sold out. But we'll be back. It wasn't the other day. So it's the exact same thing. It's just not in the Figma colors. Anyway, do you need it for working in Figma? No, it is desk jewelry that I really wanted. So I paid above what it costs just to have the official Figma one because I have the fear of missing out. All right. That was a long one. We've covered loads and loads of good shortcuts. I hope they were useful. Let's get into some more workflow in the next video. Thanks for sticking around. 12. How to use advanced Copy, Paste, and Selection Tricks in Figma?: Let's jump back to that document that we were working on earlier with our kind of different genres. And what I want you to do is just create a frame with some text in it. Put the name of your kind of app. Okay, mine's Limerick Techno. I've made a light version and a dark version. There's nothing fancy about these frames with text inside of it. Okay, so let's make another iPhone 16. Okay, so I'm going to, let's just duplicate this one. I'm going to click on the frame. It Command D on a Mac, Control D on a PC. Can we get a duplicate? What we might say is, let's do the first bit of selection. Let's click on this and I'm going to say, there is a weird one in here. I surprisingly use a lot. Go to Edit. This is not very complicated, so we get around not using it. But if we go to edit and go to select Inverse, which is Command Shift A on a Mac, Control Shift A on a PC, and it just selects everything but that, and you can delete it. Don't ask me why, but I end up using that a lot. And the other and probably most important feature is, let's say that we do want to make this the dark version, we want to switch it out. We could grab this and copy it and put it on here and paste it and line it up and remove it all. What's really good is if you copy this, select this and there's an option in here going Edit and there's one that says, paste to replace. There is a paste over selection. You can stick it over the top. The other one still underneath. I don't know why you'd need that one. But I use this one, Edit paste to replace, which is Command Shift R on a Mac, control shift, R on a PC. That's really handy, and it gets handy. Let's say I use the star everywhere in my document, I'm holding down the option key while I'm dragging or the old key on a PC to duplicate it. Okay, let's say, though, I want this to replace it, so I can copy it and I'm using my normal copy shortcut, I'm going to grab you and I'm going to hold Shift and grab you, and I'm going to grab you you can do that exact same thing, paste to replace. Anybody know the shortcut? Too many shortcuts, Dan. It's command shift R or Control Shift R on a PC. Or go up to Edit, it's up there as well. I just replaces all of those ones. That can be handy. Paste to replace. Now, this is a little bit scraping the bottom of the barrel. Let's say that I've got this star here and I copy it and let's say that I go over here, it could be text, could be anything. You zoom right out and you're working over here in no man's land. Let me know the comments. Who ends up working way over here for some reason. If I had paste, by default, it puts it back where it was, there's two of them, right over the top of each other and you're like, A I wanted it over here and there's no real way of getting it over here other than pasting it and moving it over. But what you can do is say, all the way up here, one of those people, and you can right click and say, paste it here, please. There's my little star. About 10% of you would be like, Oh, that seems good. For the rest of you, let's move on. Actually, one last one I wanted to show you was we've done this before. I just want to highlight it is say that I do have a lot of new frames. I'm going to hit the frame tool. I'm going to say, let's give myself one of those. Let's go Command DDD, I got loads of them. If I want this on all of them, so I can say, copy, click on you, hold Shift and just grab all the frame names and then just hit the regular old paste. It'll put it back in the position on the frame all at once, like a multiple paste. There's nothing special you have to do. Just copy and paste, but have lots of things selected when you're pasting. Awesome. How did that go? Let me know the comments. Did I make copy and pasting sexy? You probably skipped right at the beginning, anyway. For those that hung around, thank you. Humoring me. Let's go into the next video. 13. Frame Tips and Tricks to work with Figma frames effectively: Right there. In this video, we are going to learn all of the frame, tips, and tricks. Yes, a whole video working with frames. They're pretty useful. Let's jump in. Alright the first one is actually nothing to do with frames. See this little icon here. If your frames are all opened out, and they're all tiled down and they're just really messy. Okay, click that. They all tidy up. And if we want to go to say my frame number eight, you just double click on the icon here and I'll just jump straight to it. Okay? You can work your way around this document as long as you've named your frames. Okay, it's a nice easy one. Even better, though, is watch this. Let's say I am here on this first page. I should name my pages better. Click in in in in in on your keyboard. In we'll just go to the next frame. I'll zoom into it. That's just the handy way of working through document. Shift in, we'll go backwards. N to go forwards. That's in for November, my accent, and then shift in for November to go backwards. There's another one that I use probably more. The inky zooms in. So if I zoom out and I had the inky goes, right. I'm at the next frame, but I'm really zoomed in. Okay? The one that I like better is the home and end key. Not all keyboards have it or sometimes you need to hold down a special key to get it if you're on a laptop, but I'm on my big keyboard. You can probably hear it tapping away. Home is backwards and END is going forwards, forwards and backwards. Exact same thing except that the zooms in and home keeps the same zoom level and just moves along with different frames. That's a good one. You can resize a frame. Let's say that I create a frame up here and it's going to have all my Nav inside of it. I'm going to grab all of you guys. I'm going to put it up into here. I don't need that one. There was a star in there, there you are over there. It up over there. Salute you this frame is too big. What you can do is there's a little option over here. There's a shortcut. It's all of the keys plus R, don't use it enough, but it's a great way of just wrapping the outside frame and smooshing it really close to the things that are inside the frame. All right. The next one we've done before, but in a different context. Let's bring in an image in your exercise files one called Image of four. It's a vector file and we are going to bring it into here. You want to close to the edge. But we want to at the back and we want to just have it off and then it jumps off the frame. You're like, no, I just want while you jumping off the frame. What you can do is while you're dragging it, we did this earlier, remember, start, click and hold it, hold space bar, and it means you can drag it all the way out here. It is still on this iPhone 16 frame. You can drag it in and use it just on the edge here and it stops it jumping into other frames into components. We did it before when we're just dragging things like the star around, but it's handy when you're trying to get things on the edge that you want to be on this frame and not jump off like that. There you go. I'm going to push mine in here. And I'm going to send it to the back. The shortcut for sending it to the back is the square brackets. It's next to the PK. I'll send mine to the back using the first of the square brackets. All right. Other cool frame things is seeing everything in outline mode. It's Command Shift O or Control Shift O on a PC. It will show you everything broken down into vectors. That can be really handy especially with that star, remember, he was just hanging out, watch if I zoom out. You can see, was there a guy there he is there? Just a little bit easier to see than that. Star gone, star there. He was teeny, tiny. If you've come from, say, Illustrator or any other vector drawing programs, you use it quite a lot. Especially when you're drawing and creating things with a pen tool. I find it just handy for the frames, especially when frames are maybe similar colors. You can see the outlines and you can just work in this mode here. You can get things to maybe snap a little bit easier because you can see them better. If you come from Illustrator, Adobe Illustrator, command Y still works. I don't know why. If you're used to that one. The official one figment is Command Shift O or Control Shift O. If some of the shortcuts have changed, they do. They're always trying to make them better. They never stick to them. You can click the question mark and go to keyboard shortcuts and you can work your way through to see whether if Dan said it was, where is it underview show outlines? Yeah, it's still Command Shift O on a Mac. I maybe they're just different than what I'm saying on PC, you'll see them listed here. Blue means you've used them. I haven't used the rulers shortcuts since I reset this document, so it is grad. That, my friends is all of my frames, tips and tricks. If you've got some, I'd love to get them all in. So let me know in the comments if you're like, you didn't mention that one. That's a cool new one. For you, go check out the comments. There might be some cool new ones in there. That's it. I will see you in the next video. 14. Auto Layout Refresher with Problem Solutions: Hi, everyone. We're going to revise audit out why they're good, how they work, and components why they're good and how they work. You might know this already, so you can skip ahead of this video. What we'll do is we'll do a nice little revision, nice and quick. And then I'll spend ages. That's why this video so long running into all the issues people run into, especially when you're a little bit newer in Figma. If you hang around, we'll do the quick demo, and then I'll show you the myriad ways my students get lost and how to get around them. If you know what an lout is and a component is and you've never had really any problems or at least you know how to fix them, skip along to the new stuff. But for now, let's jump in, get everybody up to the same page and start making outs and components and breaking. In. All right. To get started, let's work on this project from earlier, where we had our genres, let's do a couple of things to tidy up. Let's make sure double click the name up the top here and give it a name. Okay? Mine's called Limerick Techno V one. Okay? And up here, we've got iPhone 16. The only problem with that you might have noticed is if you duplicate it, at the top selected, go Shift D. Okay, not shifty, undo. Gone into Inspector mode. Let's come out of inspect mode by going to this. You might do it. I'll leave that in the course, is I want to have this name selected, and let's go Command D for duplicate. You'll notice up here it says, Oh, look, iPhone 17, we've gone to the future. No, it's just trying to be clever. It's going iPhone 16, 17. If I do it again, Command D, goes 18. Let's get rid of that. It's handy, but not for iPhone. Can be handy, but not right now. Let's call this one genres. Now let's duplicate it Member Command or Control D on a PC. Let's double click this one, and let's call this one. Home page. I know the backwards. Et's get rid of all of that. Let's build out Auto out. I'm going to change the background color as well. I was messing around with us earlier on to some off white. All right. Let's do the quick version of an autolou. Let's bring in some icons. We're going to go Command Shift K to bring in lots of stuff. I'm going to say, all of you fellas, you're going to come in, click Open, and I'm going to click Paste A. I'm going to move them all over here just to give myself a bit of room. I'm going to grab my scale tool, which is the K tool and I want them all to be a height of about 32. When I say about exactly 32. To zoom in a little bit. I am going to drag them out so I can see them all. Doesn't really matter what order they're in at the moment, select all of them and say, Shift A, you're in order out. Zoom out and get it going. Let's put it on here. Let's go down the bottom. I'm going to say, actually, I'm going to drag it all the way over here. Don't want it to scale. I'm in the scale tool, that's why. I'm going to go to the V tool to go back to the selection tool, not scaling it. I'm going to drag you all over there, all over there, and I'm going to do some stuff where I sat. I want it in the middle and I can play around with the gap between them. Okay. And that, my friends, is how to do an Autolayout. The cool thing about it is, let's turn it into a component. So it's reusable. You can either click the button up here, or you can use the shortcut, which is Command Option K on a Mac and that's Control Alt K on a PC. It's a component. I'm going to duplicate this whole page, Command or Control D. This page is going to be M. Instead of this frame being iPhone 16, I'm going to do the iPhone P max, the big one. The cool thing about it is because it's an Autolayout, I can see Ju Doc and move it down, I might play around with the spacing or the gap. It's really easy to be responsive. The other cool thing is I can say you my friend, let's say this homepage here. People haven't logged in yet, so they shouldn't be able to see their ticketing option. I can click on it and I can say in my file under my layers. Let's have a look at this guy and I can say you my friend. Which one do I want the ticket one? I can turn the eyeball off. Over here though, I can say you, I want the eyeball on. Oh, look at us. Responsive. I can click in here. Actually, this is my instance. This is the main components. On this main component, I can say, I actually want the search to be over here. You can see you play around the order. Be the components, these things are linked, the magnifying glass ended up over here. The ticket back on. This is the power of Auto Loos. Hopefully, that's a good little refresher on Auto outs. We did lots in the essentials course and you might be intermediate Figma user already and jumping straight to the advanced course. Let's get into all of the problems and how to fix them. I'll do it because that thing that I just did, I subconsciously avoided lots of errors. But I know when I'm teaching people, they all do the errors that could be you. Stick around. Let's get into all of the problems and solutions. Alright, so I've just kind of undone until I come back before I put the icons on. So let's get started and bump into all of the problems. So when I bring in my icons, there's two different ways. I could use the command shift K and bring them all in, and that kind of stacks them all on top, especially if I hit place all. They're all in there, that's what I did in the first part of the sutural and everything worked. But if you're like me and you do a lot of from your exercise files from icons, you just grab all of these and go, yo and add your own sound effects and just drag them on. They come in a different way. You're like, Yeah, that's not a problem, except where they're all selected and you go to the Kt for scale and you can say, actually, I want the height to be 32. You're like, this is perfect, done. Actually, it's not done it. What you've ended up doing is this whole group has become 32. You see? This whole height is 32. This one particular heart icon is only 15. To get around that, it's easy. You just have this one selected and you say, you are height of 32. This brings me to the other problem. Is that let's look at this heart. Own here, it's in a frame, which is cool. Inside of here is a vector. What people can do is they can accidentally click the vector, not the parent frame. Can you see they're different? The frame that it's around, and the thing that is inside of it, if I have the thing inside of it selected and I go, you're a height of 32. Lo does weird stuff. You can you make out what's going on? There's a frame, but the heart inside of it got scaled, but not the frame, so it's like clipping it off. It's undo, undo. That can be problems that people run into the accidentally, you can do it on the board here. You can see I've collected the vector, not the parent frame. All right. Solve some problems. You might have bumped into those already. The next one is sometimes people grab SVGs like this, and I'll just do a little selection around this. We'll notice that I have selected the internal parts of all of this. Watch the vectors, not the parent frame. If I drag this off now, look, dragging the internal vectors, not these. You end up with these frames left by their self. It is the world's not going to explode if you have vectors on their own and try and scale those. That's fine. But it is very common and you have a lot more flexibility if vectors are inside of frames. Just be careful when you are selecting, either do a really big selection, it goes right around the outside and you can see I've got everything selected, or you can shift click the names if you can see the names. I can grab them all selected or in your layers pan on here, I can click the top shift, grab the bottom one. It doesn't really matter. If you're finding problems and you're like, This is weird, it's probably that you have the vector selected and not the frame. You end up with a vector on his own and you have no idea where his frame went or he just didn't come with one. The file that you inherited didn't have it, you can just frame it. You can say's right click it and let's say frame selection. He's got to frame now. Excellent. All right. Let's go back in. All right. And what I want to do is, I think that's the problems for now. There's more to come. What I'm going to do is do a sneaky trick. Instead of doing them all separately, I'm going to say you aligned on top of each other. Remember, don't drag them on top of each other. If I drag him, where is he going to go? He's going to go inside the heart. You can hold space bar. We learned that before it'll just sit on top. But it's easy to grab them all, big selection on top, and you. Now I'm going to say I would like the height of all of these guys to be 32. Nice. Make sure that I'm using the dimensions of the frames, not the scale. I want the scale over here. Hoops, 32. I'll pretend I added that on purpose, but no, I just messed that up. Now the next problem is that when we convert this to Auto out, you're like, Okay, cool, select them all, did the big selection like Dan said, and then you went, Shift A. In the earlier version, they all stacked up nicely. Okay? It's because I was doing things knowing how to avoid problems like this. Okay? The default inside of Figma now is it tries to think for you, and it does a terrible job at the moment. This might work. If it works, you're done. If it doesn't, and you have this problem like this, what's happened is it's turned this thing into Auto out, okay? So look, it's called frame ten. Let's call this one Nav forward slash, what's this one Nav bottom. Okay. And inside of it, let's close all these down, just to make it tidy. You've got one frame, that's little hash, another frame, little hash. Then you've got this guy hash inside a little target. These guys here are ignoring the Auto out. This guy, listening, the heart, Magnifying Glass, listening, and they're flowing on next to each other. This one here, Moody teenager is ignoring you. That's this little icon here. You will see them across lots of documents. Other people will make them. All it means is, it's still inside the Autolayout, but it's not flowing like an auto out. Why? Reasons. We'll do it later on. We'll look at something called absolute positioning. But for the moment, you to say you stop doing that, okay? I want you to grow up, you go and stop being moody. By ignoring Auto out, turn that off. Look, the ticket now flows along. There's just one more person, the icon user. You are no longer ignoring us. All right. They're all flowing along nicely. The other thing that might happen is if you click on the frame, you will find that Autolayout has different it tries to guess. Do you mean horizontal? Most of the time it guesses there. Sometimes it goes, Dada, let's go back to horizontal and zoom out. I think that is the issues we're going to run into. One thing we need to do actually before we move on is let's grab this frame and drag it out. Let's turn the icons that are inside of it into components. Why do we do that? Because the heart we don't want lots of copies of the heart. We want one heart used lots of times that we get to control. So let's select all of these. I would like you to all be components. I don't want to make them one component. Can you see one giant component? I would like them all the drop down here, create multiple components. I've got a heart, magnifying glass, a ticket, and a user. Let's go put them into play and explain just why components are so good. You probably know already. Et's get this going down the bottom here. Let's drag this out here this out here. Let's get the alignment to be in the center and let's drag up the gap. You can put the gap as Auto, but it goes right to the edge. I want to bring this down. I want to bring this down to 50. Actually, make the alignment center. If I Zoom in, you can play around with this on the artboard. Can you see if you've got gap that's not set to Auto. Any other number, you can drag these out while you're down here. We can set this do to Auto and add some padding left and right, just so that it is what should we do? Let's do 32. Let's add it to the bigger document. Let's go for. Let's make duplicate them Command or Control D. You are going to be the frame of the Pmax. So it's nice and big. The cool thing about it now is because it's an autolo we set up that lovely spacing, Shi doc. You can see we've made it bigger for a different device, and it all flows nicely. Okay? The reason we made those icons, our component is so that we can go into this and say, right. This is my main component. I can tell it's got the weird little icon here, not this version of it down here. Where is he double click on him. You see the diamond, that's the regular instance. Let's go over here. If we go and double click, double click, double click, and we start messing around with him, let's give him some mad sideburns. Those aren't mad sideburns, anyway. But because you've messed with the master, Zoom out, or the main component, you can see this adjusts as well. If we didn't convert these to multiple components, that wouldn't have updated and we'd have to update it again. All right, my friends, that was a long video, and hopefully it gets us all up to the same level of understanding for order louts, why we use them, how to make a component, why we use those, and the myriad of issues that you might run into being I don't know, good enough to use Figma, but bumping into lots of issues. Hopefully, that solved a few of them. All right, let's get on to some new stuff in the next video. 15. Suggest Auto Layout, Replace Content, Duplicate & Rename Layers (Ai): One. In this video, we're going to sprinkle on all of the super awesome AI features in cyto Figma, suggested Auto out, replace content, duplicate, rename and AI image generation. So good. We're going to take this, which is just an image and some texts. There's nothing fancy about it. We're going to go copy and then right click more layers, suggest autolou and bam, it's autolou. It does all that great autolout stuff without having to build it yourself. Then we'll make a couple of them, add them both into an auto out and then look, magic. We get to duplicate them. Magic more. We get to click on this and say, let's replace the content in there. Let's just use the default, fill it with some realistic content. Sit back, relax. It redid it all and it knows what it's doing. Plus, we'll do all the images as well. All right. I've actually done the whole tutorial in the intro. There's a little bit more detail to it than that. There's a bit. So let's jump in and start. I'm wrestling the AI robots. All right, so I've created a card here. It is frame inside of that frame is just an image, some texts. They're all just kind of like floating around. Nobody's doing anything. Okay, so I need to turn to Auto Layout because what I want to do is put on another document and kind of resize it and do all sorts of stuff where I go, right, rock and roll needs to be really, really long. It just types over everything. There's nothing responsive about it. All I need to do take the parent frame. If I use my normal shift to turn to Auto Out. That doesn't work. Let's undo. A trick here is with the parent selected, frame 38, right click it, and there's an option and here it says more laid options. This one here suggest Auto loud. It should be super amazing Auto out. Very unassuming. Let's click the button and nothing changes. How cool is that? Nothing changed. Have a look. My frame now, is an autolayout. Inside of it is an image. But then there's another autolayout frame. I framed this for me. So it's in this kind of large frame, and I can decide now that actually, let's toil it up the image goes beneath it. It reflows. It's all nested autolayouts. It's very exciting. We might decide in here, though, that what have we got? There's a frame, 40, I want that to be below the text or I drag the text above there. They all reflow, undo, undo, undo do. Let's say rock 'n roll as well. Let's say I type in that really long hitting and look what it does now. It snaps, it's created this box. It's so good. It's undo. Let's go even further. The moment it's really hard, remember it was called frame 35. It just wipes the frame names, but you can get it back. You can say, all of you guys, I can right click it and use the sweet rename layers AI. This might be off if you're on the free version, but watch this. You can type them. Watch this. Rename layers. It's going to go through. It's going to think about it. Look at it, typing. It's the future. Cover image. Oh, I'd even changed that. Look, cover image, Song info. It's not quite right. It's got the header, the title, the date. Ah, description. Song infos not really a song info. It's more of a genre. Ah, so good. Oh, it gets better. Let's grab it. Let's make a copy of it. Okay? I haven't turned it into an instance. I should, but I've got two frames here now. I'm gonna select them both, put them Auto out. Just the regular one. Shift day. That works. It's not very complicated. But see this appear. Ooh. Okay, so fancy duplicate option. You can see little sparkles next to it. I'm going to first actually just drag it off because it's getting a little bit tight in there, and I'm going to make it bigger. Let's zoom out, actually. You have to drag it far enough. If you drag it does nothing until you get far enough to get enough room for them all to appear in there. Okay? Look what we're doing. Oh, and it gets even better. We're going to use the AI feature called, right click. That's not the feature, but there's one in here called cart remember. Come on, brain. Replace content. It's not in there at all. With it selected, the whole big frame that you've got, get on here and let's go to replace content. And you see this little pre filled in thing? It says, filled with realistic content if you tab. That is a prompt. You could type that in. It doesn't matter. But yeah, give it a crack. Realistic content. It's going to try. Oh, it's doing it. How cool is that? It's not doing the images. You got to do those individually. We'll do those in a sec. But look at that. It's got the dates. It's got the different genres. I do like it. Now we can go in and say, actually, you here, I've done that one. We could go to more AI and say make an image, and this one is Indie pop band. Let's make it cut to when it's made because it takes a little while. I like it. Oh, look how responsive it is. I like the IndiopO little change, make changes. Huh. It's closer to me. I'll take it. All with glasses. Better. Little roundy face for me, but that'll do. It's got no sideburns. What appen there. It's got the hairdo, though. All right, so we can work our way through to do these things. The one caveat, the one problem that I'm bumping into in terms of the duplicate option is let's grab. Oh, I didn't keep a version of it. Copy that one out of the frame, paste it over here. Okay, so he's out. I got to this and we should turn this into actually, I want to turn that. I want to get this frame taller. Actually, I know, I want to get the image. I used a really weird size there, didn't I? That's the padding. Come on, Dan. Let's grab the edge. There we go. Okay. What we should do is turn this into a component. Remember Command Shift K. No, remember, Command option K to turn it into a component or just click the button over there. Okay. So we've got a main component so that we can change it later on and control it all. I make a copy of it, which is my instance, instance of my main frame. I'm going to move them around. That's at the top, that's there. I select them both and I make them shift into R. Actually, the duplicate thing, remember that was down here? It's gone. To go. Okay? So it'll work with a main components like you can't, but I'm going to undo this we should put on A components page, pop and put it in here. And then back at my other page, my Hi Fi mobile. Actually, I did it the wrong way around, and I'm going to cut that, go to my components. So my main components in here. Then I'm going to copy this, go back to my hi fi mobile, paste it in here. So this is a copy of that main component. You can see it's a little diamond. That'll work. Okay? So I'll do it to those. You shift a autolayout, and then that appears there. That might go away. I don't know why it does that, but yeah, very cool. A couple of other things that you might have to do before we turn it into that duplicating thing is actually, let's go back to the main component. What you want to do when you've used suggest Auto out. Just make sure it works. That image worked great. You can see, that's what I wanted to do. The padding on both sides. What was my padding originally? Let's click on this. See, I had 17 on one side and 16 on the other. Just because I drew it out randomly, it's probably best to tidy this up now before I go and turn it into a component to make duplicates of it everywhere. I probably want 16, 16, actually 16 all around. Come on, Dan. Like to tab around these just to get them. The other thing is is that this let's have a look. I'm going to put some returns in. You can see it's not flowing. That's something I probably want. It depends. If you want a fixed height card, leave it. But what I want to do is double click down the bottom of the textbox and it will turn it from KC, where is it? This is a fixed size, and if I double click the bottom, it automatically jumps to this one, or you can click the icon to Auto height. That's another good thing to check. Now I can add more stuff. Get in there. Enter to Enter. There you go. Other thing I'd probably check here now is, is there enough room for all of the dates? Probably. What happens when I get down to one digit, that still works. These are the things I like to check. What if the client says, this needs to be all uppercase, still fits, or we want the full version. That's okay too. Over here, what happens when this gets really long? We already checked that. All right. Oh, the other thing is that is scaling down. It's being centered inside of the header, which is cool, which is this chunk here. What you could say is the date is probably said to centered somewhere. Where is it? Actually, it's not this, it's the parent header. We can say the header, I want them to be spaced out, which is cool, but I want it to be spaced and aligned along the top. We've covered some strange things here. It's all very easy until it's not. I've given something that works really good. But you'll find there's lots of times it just doesn't work. That's what we're doing the rest of this section Auto out. I'll give you a bit more crash course and how to do these nested awesomely aligned constraint and spaced out Auto outs. But yeah. That's pretty cool, huh? All right. That is it. I will see you in the next video. Actually, one last thing. Let's actually just get it on the page. I'm going to move you off. Which one were working on last? I think this one. Yeah, we. Because all of these instances are in this Auto Layout, I can go like, you and watch this. I can grab the parents as long as the parent. Ah, that is the nicest part. I can do the spacing. Okay? Mess around with the spacing, what I want it to be. 32. Wo H to do. Let's do it over here, 32. Another little trick as well, you can actually just double click that gap and type it in. Who, double click the gap for the spacing. Come on, Dan. My mouse is doing some weird stuff. So let's go to you, double click the gap, and you can type it in up here, so I can type in 32. We'll do it over here. It's up to you. But it doesn't matter what size this goes on, it will respond to it. So good. Alright, we've made a mess. Now I will see you in the next video. 16. Class project 02 - Band Listings: Alright, it is class project time. I want you to build a page. And let's go to the class projects. Remember those are in your exercise files. I want you to create What's on page. Okay? What's going on? I don't mind the language. Okay, there needs to be a heading and a repeating band list card. Okay, let's have a look at my one. Okay, so I got a heading here. We've got this card that repeats with all different bands that are coming up on different dates. To experiment with the AI features. If you are trying to do this course in the free version, it's okay. Just design it. It doesn't have to be built with AI. You just have to do a little bit more typing and copying and pasting and finding images from free stock library image sites. I don't mind. I actually if you are in the free version, there's a free trial. It might be great to do this course through the free trial and you can turn it off at the end. But if you do have the features, I want you to go through and play around with these. Suggest Autolayout is the main one. We did that in the last video, where you just design it and say, Hey, give me the Auto Layout, please. And it does nice things. You will bump into problems. Like, I designed one quite simple so that it worked. It worked first time. I know I've done other things where I'm like, Oh, this will work, and it didn't. So keep it simple or do something complicated and see how Suggest Auto Layout deals with it. Later in the course, we'll get our skills up so we can fix it, but play around with something simple, at least want you play around with that rename lays features. If you can't remember where that is because it was a small part of the course is you can go into here and say, actually, I want to grab this whole thing, right click it and there is rename, where are you? Rename Layers. There it is there. I also want you to duplicate with new content. That is the technical term for that little thing that appears at the bottom, when you are dragging it out. It's this thing down the bottom here. I can't see that thing. Replace content. We did that. In this case, what I like to do when I know what I'm going to make is I'll build something. What is that? Get out of my way. Is we remember if you get lost Command one. Oh, I typed in Eclamation mark. Shift one, sorry, and it will zoom out to everything that you've got. What I like to do when I'm putting the placeholder text then I'm going to use that replace content with. I just type in band name. That gives it a hint. I typed in an actual date and I use rewrite this or rewrite this to add in a description about a band called and I gave it a fake name and then I duplicated it so that I was able to then use what is it called rewrite this. Comes up with band names. You can in suggest this, give it a really clear description. You could say, actually, I'm rewriting this and I'm saying, I'm writing this for Techno bands from the 90s and I will give you that specifically. You don't have to just leave it blank. Alright, play around with the make an image. Okay, so I made an image, and you'll notice that all of them have middle age ball dudes. I tried to do the sideburns. It doesn't like adding sideburns. None of these look like me. But anyway, they're all hidden in there. Little ease stregs. I think I like this guy the most. He's got a similar hairy hand going on. What else rewrite this we talked about, which is Figman's version of Chat GPT, play around with that. I want to make your page scrollable. Okay. So make sure that when you're doing the template, it can do this. If you've never done that before, just make sure that when you've got your frame, and you've got this in it, it's longer. Okay, so it fits in there. Okay, also, this is the height of the phone. My height is 852, and we've clipped the contents, so we don't see it. That doesn't really matter. What really matters is that it is set to a frame of something it knows, like an iPhone 16. If it doesn't work, you can go to prototype. It still probably won't work, so you got to go to prototype and you got to say, I would like the overflow, which is the stuff that's hanging out here. Default is no scrolling. I want to vertically scroll, and that should get you this guy. All right. Awesome. I've taken some liberties and move that around to remove the camera. You do the same. I played around with some fonts and some colors. We'll get into that more later on, but I couldn't out myself. All right, jump in. Play around with the AI, be excited by some of the time it can save you and realize some of its foibles where doesn't do what we did in the last course. Simple things, great, really complicated things. We're going to need to fix ourselves. Worry. We'll learn how to do it. All right. Happy class project making. I'll see you after you've done. Oh, actually, any last things in here, deliverables. Take a screenshot like this and upload it to the class projects. Also, share on social media. Let people know you're doing the advanced course with Dan and it's awesome. You guys check it out and this is what I made. Yeah, there you go. I will see you in the next video. 17. Nested & Responsive Auto layouts: One. In this video, we're going to build our very own responsive nested autolayouts. Like we did in the earlier video, we use the robots. We use AI to do it all. We're going to do it all ourselves because we need to understand how these things are created so that we can fix problems, create more complex layouts, and we need to learn how to hug. Yes, there's going to be hugging in this one. It's going to be real awkward. Alright, let's jump in. Hugin. Let's get started by hitting the I key, and we're going to pick an iPhone 16 frame. For some reason, plops it in wherever it likes, go to line it up perfect, and this is going to be my menu or two. It's got a name, very sexy. What we're going to do is just start building it. I am going to start with a frame and I'm going to draw one in here. All right, I'm going to change the color of it just so that we can see it against the background, pick any old color on the screen, a loop. Let's bring in an image. You can bring in anything. I've got one. Remember, Command Shift K is the shortcut to bring in an image. And there's one called Image five. It's very cool. Bring a laptop. There we go. I'm going to just drag it around manually to kind of how I want it to be, and let's have a little look. Okay, the constraints are locked. Can you see that when I'm dragging it, can you see that dotted line that runs through the middle of it? It's just saying the height and the width are locked. You can break it by hitting that button there. Unlock aspect ratio. I want to have it just the weird aspect ratio. Okay. I'm going to drag it out. I should be more thoughtful. It's good enough. Now, what I'm going to do is just build it as we go. Rather than building it all up and then converting it. So what I'm going to say is actually this frame let's give it a name. Et's call this one card. This image is going to be called image. What I want to do is the parent, which is the card. I want to say you're Auto out. I can click on the button. Where is the button? There it is there, or I can use my shortcut Shift A. Now the cool thing about that is, can you see it's wrapping around it? All right. I want to make sure my padding is 16 and the height is 16. Great. Let's do some type. I'm going to type it over here. I'm going to type in, bring your laptop, and it's going to go in here, but the problem is, if I put in the Autou's going to work? It's going to go exactly where I needed to do. Excellent. The problem is, I'll go and add my date. Let me jump to making a date. I got my date. If I try and pop it in there, there's Auto out, this auto out is set to that, which is vertical, or I could do horizontal. Both of them aren't going to work. We need to do that nesting goodness in the middle here. Let me just move these around so bring a laptop on top of the date. There's still not working, but if I grab both of these guys and put them inside their own auto out, that is what's called a nested auto out. I got one that I'm going to put in here inside this parent. It's nested inside. Got these two selected, you can right click it and say, I want to frame this selection. You could draw the frame first and throw these guys in. It's up to you. They're in this frame. I'm going to turn it into an toot Shift A. This one is going to be called heading. Still not working, Dan. Look, it's nested though. Lo hiding is inside card. But this thing here, I can do some cool stuff. Remember, this card was set to flowing down. This Ayo can be set going horizontal. Vertical, horizontal. Cool. It's not quite working, but that is a nested Au. You'll find lots of nests inside nest inside nests. That's how AI did it automatically, which was cool. Let's look at making it a little bit better because the moment it does that. It's not quite right. When I type, type it works, but just goes off and forever. There's a few things we need to look at. Let's look at this parent, the heading. This heading at the moment goes to about there. We wanted to go all the way over here. Do that. The moment the width, you see it says hug there, hug contents, it is hugging big bear hug around the contents as tightly as it can, which is very tight, right around the edges. What I want to say is don't hug. I would like you to fill your container. The container, in this case, is the cart. That's the parent or the container. I want you to fill as much as you can. You see a little arrow that appears here watch. I'm going to go that way. You're like, awesome. That works. So this heading now stretches all the way across. What I need to do now is at the moment they're all squished to the left. I'm going to say, I want you to squished to the left. And it's got a gap of eight. That's a little gap in between it. I'm going to say the gap actually, can you just make it Auto? The parent says, I want to be as big as I can. I'm going to fill out to this container. But we were forcing the gap also to be a certain number. But we say B Auto, it goes, right, B whatever you want and it'll expand out to the container. Get it. Let's close it down our parent, which is an Auto out. We've got this image hanging out inside of it, and then we've got this little block that has its own little world of Auto Lou going on with these two fellas inside. Okay, now I'm going to add my description text. I'm gonna jump to that being done. Okay, that was the weirdest I checked to see if the AI would give me urnipsm. That's the Laurenopsm we got. So now we got Disney. Wow. It's not Disney. I felt Disney when I read it. Okay? If we dump them in here, tong as we get them in the right place, it should fill out and we got this lovely auto Out, much the same way as this was. Let's double check a few things just to make sure everything works. Couple of things is that's not going to the edge. How do we do it? We slicked on him and say, do we want your width? We want you to go. Let's fill your container. Let's go all the way out. It did. It doesn't really work because none of the words are small enough to break. Let's do that again. So I'm going to change the text size. Let's go to Roboto regular. Oh, that'll do it. I do the exact same thing. Why not grab the text. We can say your width, my buddy is fill container. Oh, at least one word popped up. What I mean, though, I fills it up great. Let's keep typing. The other thing I like to check with Autolayouts. We did it early on is, check this works, keep going. It's not working. This text box is what's called a fixed height. W selected, the text. I can see the height is set to this height of 115. You're like I don't want to be 115. I'd like it to be hug contents. That would work. There's a couple of ones we could do. We could do hug contents. This button here does the exact same thing. Auto height. It's just another word for hugging contents. It even changes. Look, if you go to hug contents, can you see it switches to that? The other way, the third way because you need three ways of doing stuff. You can just double click the bottom of a textbox. It'll switch it to hug and Auto height all the same. Give it a test. Testing testing, come on. It does work. Awesome. All right. Anything else we want to check? The other thing we would like to check is this whole thing responsive? Oh, kind of. Yeah, it is. Totally responsive. The thing that I was thinking wasn't going to work and I was going to show you was, it all works. Cool. Sometimes it's just this box here. It is set to fill. We already did that. Sometimes when you drag it out, that's what it was. I had mine very clearly like this, with a specific width. When I'm designing it, often I'll line it up anyway there, even though I haven't said fill, and it will just be a fixed width still. I'll look like it is. I'll look like it's going to the edge. But when I do this, it goes, No. Okay. So this one here, I set to. Fill that container, please. Nice. It is totally tricky. Okay? So if you are finding yourself like, Oh, that was a bit tough. We'll do a few more through the class. But in terms of auto louts, Auto outs on their own, one of them is really simple. When you start sticking ones inside of other ones, you're like, that is weird. Then you throw in this, is it going to be hugging or is it going to be filling the container? I remember when I got stated, I had to click on the ball and go, Is it hook? Is it filled container? Shopping is not right. And you just played around with the buttons until you get a sense for like, Alright. I understand. I understand it fully, but it wasn't instant when I was learning it as well. So if you're finding it a little tricky, it is tricky. But when you do get it and you're doing all of this good stuff, and you can start to do the things we did in the last one where we go, All right, you are going to be a duplicate, grab them both, shift A or out, and then drag out bunches of them, and then go Command K because we're awesome and we go replace content, and we just say, fill with replatic tabs so we can fill with realistic content, then hit Command Enter, even though I always just hit Enter. Anybody else do that? It's just so good. Look, networking events just gone through and changed them. Different dates, different descriptions, different Oh, kind of knows what we are. How does it know what Bring her laptop is? Oh. That is kind of scary. It is. This is the stuff we do at bringing her laptop. Renown designer. Oh, the robots. You're freaking me out, man. Alright, that is it. I am going to contemplate my life with the robots, and I will see you in the next video. Wow. 18. Auto Layout Grids in Figma: Hi, everyone. In this video, we're going to learn about Auto out grids. Look how cool this thing is. It's got grids. We can move stuff around. You go there. They're called Auto out grids. They're easy to use. I love them. It's jumping. Okay, to get started, I've created a new frame, nothing in it. I've made a background color like a midnight blue. It does not matter. Let's grab a frame. We're going to stick it inside, and we are going to find the Auto. It's this new one here. We've looked at basically freeform just means it's a frame with things wiggling around everywhere. Same way I'm drawing stuff inside of this frame. That is free form. There's a rectangle in here. That's just got no fill, but it's just hanging out. Let's delete him and let's change it. We looked at vertical and horizontal for Auto out. What we're going to do is click on this one here. What it's going to do is convert it to autolout. Saves us having to click that, but also turns it into this grid. So better at the moment. I'm sure by the time you're doing it, it'll be nice and not Battery, might not have as many bugs, I might do some new features. All we've got here is, let's bring in some images. It's the best way to explain it. Let's go to Command Shift K or Control Shift K. We're going to bring in oh six to ten of the images. Going to click Place A, and let's drag one in and it's not going to work. Let's go over there. These are all piled up on top of each other. If I grab this and throw it into my grid, which I can't really see, where are you? There it is. If I grab that and drag it in, it'll didn't work. Let's make it appropriately sized just to get started. I'll expand and contract. Let's get it somewhere size like that, and I'm going to say you get in there. Or you can go copy and go in here, select the frame where you want it and go paste and I go in as well. The only trouble with this is that it's working. It's got this little grid. You can see here the image is getting smaller. It's trying to fill, but it just can't do it. What we need to do is either before or after, we need to select on the image and say, do not have your Aspec ratio locked. Let's unlock Aspec ratio. Give it a click. I'm going to do it to all of these all in one bit go. Now it's going to do cooler responsive stuff. W's Mame. You could build this yourself with frames and padding and autolayout, but grids just make it work easily. The cool thing about it, as well, is let's grab this copy it and I'm going to actually, let's drag it in when it's a little bit bigger. Let's see what it does. If I drag this guy just over here, it's not. It's using the top left of this thing, and it's not getting anywhere near close. So it's too big, it doesn't know where to go. This white and beta. If I do this, it's squeezed in. Sometimes, it will go and cross to the noises. This will cross two of my what are they rows? The cool thing about it is, look, it's all resize and responsible. Responsive is the word. Let's pull in. That was my ket. I asked AI to make me a keta. I didn't know what it was. I said, It's a piano with a guitar and it smashed it on the side there. Now what I wanted. So I'm going to copy that, paste it. I've just double clicked it, pasted it in. It is so good. Super easy to do these little grids. Otherwise, you take ages to mark these up. You can get them to span more than one like this one here. They can overlap. Okay. And this thing will still be expanding and contracting. If you do need to play around with the layers, it's just like normal over here in your layers panel, if I want him below all these guys, bam, there we go. I don't want that. I like the grid that they've got going, all the gaps undo. You can adjust all of these. Can you see over here, you can see the gap is ten and ten. If you want it to be, what do we want 16 and 16? You can add padding. Let's at eight and eight. They're quite versatile. I drag that one all the way that way, and they're very responsible. Why is this guy sticking out the bottom there? Well, let's have a look. He's not constrained now, but under the fill image, he's under fill. It. Bill, it's because I dragged him out earlier on. Maybe I was trying to drag him. There you go. Being your little home there, buddy, you can easily move them around. I can double click this guy and just drag him up and he will try and get up there. Nice. You can duplicate them. What's going to happen because of this weird row structure. Let's go Come on Di. We'll put a new one in. It's so smart. You can add them in yourself by clicking on the entire frame and over here, you can click on this and say, I just defaulted to two and two. Let's say I want this to be three and two. I just hover my mouse over, get a sense for what I want, and then click it. In this case, I'm going to have to say you, I want it, but I want this over here and I'm going to maybe make this one go that way. Look at us. Being all creative KitarT you go in there. Okay, that dark background was a dumb idea. Let's go back to an off white. Actually full white. It can be a little weird when you move them around. Watch this. I want to move this guy over here. We want that side. Squished it out and moved everything around. Sometimes you do need to copy and paste them. Sometimes it works nicely, sometimes not depending on how much you've got spanned and what's inside of the grid. Now, you can make these rows, rows and columns up and down. You can make them individual sizes. At the moment, they're all on set to Auto. These little dots when I'm hovering around. Those little dots are on the outside and there is the measurements. What I can do is I can say, actually, I want this one here to be just and you can either click on it and just drag it or type it in. If you know you want it to be 150, type it in. These all change to fit the space provided. It's very cool. You can actually drag them out of their little homes. All you need to do is the parent frame needs to be not set to clip contents. You can do some quirky things with it, but you end up breaking it. Don't break it. Undoing, don't break it. But I know you can add text. Let me know in the comments if you can work it out. I can't make the text, expand and contract when it's edible text. It's not as responsive, but let's do it anyway. Let's go into here, let's drag this in, and go to you. I got some text I was messing around with. Here it is. I'm going to put this in. Actually, that's why I had the dark background back to around time. Is this here? I want an extra row at the top. What I can do is I can say, I want, what I want, another row. It's going to be three by three now. W. I'm going to grab and I'm going to have to drag these ones down to give myself some space for the text. It's so easy, isn't it? Now, this here, I'm going to go to cut. So copy it, click back in here. I'm going to click on this field and go paste, it will be in there. It's the wrong size. But the problem is, yeah that's the big problem is I can't work out how to resize it, so you got to pick an appropriate width so that it can hang out with the dudes, do the stuff. But the text eventually will get to the edge and go, bye bye. That's the only thing. Same with this height here. I don't want it to be auto. I'm going to drag it down so it's kind of y like this. I could get it to break. Watch this. I can't get the size to change. That's really what I want. I'm going to select the text, I'm going to say, I don't want it to be hugging the width. I want it to fill the container, and I want it to drag it all the way over here. So it will break now. Watch this. You can make it work. Let's grab that as well. You get smaller. Oh, very cool. Alright. What? It's got easier using this grid function. One thing I want to show you, though, is just before I go, it's like a special treat if anybody's waited this long. I forgot to use it. This one here was my fit. I was like, Man, that was cool. I got it at a AI, and I was like, How the heck did I get that? 'Cause I got it for that as well. So what I did was, right, is I drew a rectangle. And then I did this. It's not going to be the same because AI has I don't know, the inability to repeat things, but I'm going to make an image and I'm going to This is what I put in guitar close up. You can use color and I use the hexadecimal number of the color. You could use IGB, whatever it is, as the main color. Then I did it and I got this and I was like, genius. I did the headphones. Genius. Then I did the Keta fail. Oh, I used a different color. It wasn't orange, it was pink. In this case, I might go, All make changes and say acoustic guitar. Up to you, but that's how I got this really nice flat graphics I'm using in here. Cheer. If you're of an age and you're like, What the heck is a keitar M's the accent. You ready? There you go. You are welcome. I wanted one so bad. Hands up who forgot they existed. There you go. We learned loads in this video Figma, Auto Lou grids, and ketars. Alright. That's it. See you next video. 19. Class project 03 - Grids: Oh, fun. It's class project time. It is fun. What are you talking about? Great learning and practicing. What I want you to do is I want you to use the Auto lout feature, sorry, the grid Auto Lout feature we learned in the last video. Okay? It's a pretty easy one. I want you to make what we made in the last video. There's some requirements. I would like you to use four or more images. Don't mind where you get them, AI generated stock library, your own images. I'd like them to be related to your particular genre of music. So it might be rock 'n' roll, soul, hip hop, whatever you got. Hey, do that. I want you to experiment using at least one colored box. You can see in here on my one, I changed mine after the video to add these colored boxes. The thing is they need to be able to move around with them. That's going to be a bit of a harder one? I don't know, Advanced course. I'm sitting some tasks where somehow, when you put it in probably, this is just a frame. So it's a frame that was sitting over here that it's now in there. But by default, this guy does not want to expand and contract. I want you to see if you can figure out how to it. Do it. Don't worry. Check in the next video. Well, check below. Don't look yet, but somebody in the comments will let you know how they got it to work. So just a colored box instead of an image. I'll give you a hint, something to do with the width and height. See if you can figure that one out. We've done it before is the key. And Text, but that's optional. I want you to do at least one object spanning a column. That spans one, two, three, that spans two, is just one of them at least. Rules, take a screenshot and upload them to class projects. And these are looking cool. I like this little grid. Upload it social media and just say you're experimenting with the Figma grid autolayout. And what you think of it? Make sure you tag me. Have fun playing around with it. All right. I will see you after you've finished your homework, not homework, class project, fun stuff. Remember? A. Next video. 20. Important things to know about Components in Figma: Components. You know them already. Why are we doing a video? I've got some important stuff that catch people out, catch me out. I want to share that with you. This video is it fun? I get lost a little bit. I wasn't planning to get lost, but we did, but we fixed it. Hopefully, that will be a nice little nugget for you. We swear, I know. We don't mean to, but we do. All right. That's it. Let's get in. Talk about components. All right, so we're going to use I created this nerve and I forgot. Yours might be at the front because you're like, he left his nerve behind there. We did it earlier in the course, so I'm going to click on this, use my move to back button, which is just the first square bracket. And then I've got this. I'm just going to do it over here because it's a little bit clearer. A, I've got this Nav that I made. Let's have a look at how it's made. So it's called Nerve bottom. Inside of it are some. What are these? Do you remember? Yeah, these are main components. These are the bosses. These are the parents. So when I make copies of these, they become instances of that boss. The cool thing about it is when I adjust the main one, do do. I'm not sure what I'm going to do to it, but I'm going to wreck it. Can I do it from this distance? Can you see it there? It's doing it to both of them. Cool. We know what components do. One of the things though is, let's say I want to turn this Nav also into a main component because I'm going to use it on lots of pages. I might as well control it all. Let's see what happens. I'm going to use my shortcut Command Shift K. You are component. That is import image. That's command option K or control K, what happened? It did become main component, that's awesome, but it fired these out. Where did these come from? This is what happens when I see other people's files, especially when they're at the intermediate level, not quite advanced. You're like, they just leave these here and what the heck did these happen? The rule is you can't have main components nested inside of other main components. Because we turn the outside frame to main component, it went and cough these out and left inside of here, you see, these aren't the main components anymore. Look, they're just instances, little diamond version. What we need to do is just be thoughtful of that. And what you'll find is that let's zoom a little bit. You'll see that this guy here, look, they're underneath there. I'm going to. What am I going to do? Yeah, let's fire them out. And what I'm going to do is find them. They're all here. Let's drag them out, and we're going to put them on a components page. So I'm going to cut them and say, you guys now live on my sweet components page, which I don't have much of. You can keep them on the same document, There's no law against it. But when you're working on a bigger file, you really need a components page. Otherwise, you can just have them next to your design, just hanging out over here. All right, that's important thing, number one. The other thing I want to show you is that this now is a main component. So clearly, what have I done? Ooh. I'm like, What's wrong? Frozen? No, I accidentally hit the shortcut for lock layer. I can't even remember what it is. What is the locking layer shortcut? Please hold. Ooh. There it is there. Shift command out. I didn't click that. I clicked something on my keyboard and it locked it. Anyway. So I've unlocked it. What I need to do is I shouldn't really use this here either. I could leave it here. So that's a lot of people just leave this on their first page, and then just make instances of it. Let's be clever, okay? And let's cut this. Let's go to our components panel. Let's put it in here. This is even a bigger mess. What have we done here? You're there. What I've got lots of these guys over top of each other. All right. I really want to just cut these out of the course, but these things will happen to you too. What the heck happened there? I'm going to undo, go back. There must have been so many guys all hanging out there. Let's go back to my hi fi. I want you back. There you are. What is this? There's just one of them. Copy and go to my components. Click Paste. What did I do? Maybe I pasted them inside of these guys. Had them selected and went paste? That's what did. I don't know what happened there. You know what I'm doing. Anyway, that happens. There you go. I had those selected. I just had my regular paste, and somehow, I'm saying it's a bug. It three of them. It pasted one for every icon that I had. Hm. Oh, I put an instance of it inside of every image. That is weird. All right. There you go. I learned something in this class. All right, let's start again. Check it out. Shake it out. You ready? Forget all the getting lost. I'll at Mobile Hi fi. I'm going to say you, my friend. I'm going to cut him, not copy him. That's probably where I went wrong. Not a good component, so I'm going to say you. Nothing selected. Paste him. This is where I'm going to keep this main component. Inside of this main component has a bunch of these instances of these guys at the top here. All right, we're doing good. Let's go back to mobile. Let's go to our Assets panel, and we should have credit in this file under components. We should have where is he. There my bottom now. Okay, so I'm going to stick this in. It should now be an instance. Cool. Anything else? Where we need to learn? There is, but I've been flustered. That's really it. What I want to do is I'm going to put one over here as well, because it's responsive, we get to adjust it. The cool thing about instances of the main component, remember our main components up here hanging out. These are just children of them. They do whatever he says, but there are some small things we can do. I can say, actually, the selected colors in here, I want it to be white. Okay, they're still connected if I go back to my main component and I say, where is he this guy here? I say, everybody has some padding. I'm padding at the bottom. What I want to do is split the padding. When it comes to nav, I like more at the bottom, nice little chin, let's go 24, and this one up here, let's go 16. Also going to want a background color. I'm going to give it a fill slightly off white. Just because I think it looks cool and I'd like to have it and I like to say, you have an effect of drop shadow. I'd like it going not down, zero, nothing going to the right. This is up and down, so I want to be minus four, it goes up. Can you see it there? Maybe the spread or the blur is a little bit more. Maybe just a little bit less opacity. I've done this many times I know what I like without seeing it on the document. Let's go back to our mobile and because we did it on our component, all of these adjusted. That's very cool. But you can see here these remained white, which is also very cool. I can probably use that Nav now, but I'm going to select on that and say you, I want you to be it's darker color than I'm using. Haven't really ideally got that sorted out yet. Main component is great. Don't put main components inside of other main components because they get spat out. You should probably keep them on a separate page, but you don't have to and you can override instances with small things like color. I can't adjust the icon here. I have to go back to the main component, but I can change the color and some of the layout and I can go, A ticketing, I want to go over here. I want to turn the eyeball off on this and it reflows because we're awesome. It's still there. It's not turned off. It's impossible to turn anything or delete anything. If I click on this and delete on my keyboard, it just goes to sleep. Sleepy. The last thing about components is something called constraints. You know about them, but let's look at some quirkiness. This here, I'm going to move these guys up. At the moment by default, I drag this up, they disappear. I want it to stick to the bottom of the Nav. I'm going to say constraints. I want it to be left and right because at the moment it's not, let's have a look. I think it's just doing left, so it's stuck there. I need to say you need to go left and right so that it is squishy. Also, I want it to stick to the bottom. You are going to be constrained to the bottom. You're like, I already know that, Dan. You're like, Okay. But where is it now? Where are lovely constraints? They've gone. I know. The constraints need to have a parent frame. Otherwise, they don't appear. No constraints, watch this exact same thing inside of a parent frame, constraints are back. It doesn't even have to be component. If I draw anything, frame, no constraints because it has no parent frame. He goes inside here. Ooh, he's got constraints. Happy days. Okay, so that's one thing to remember. The other last little thing, I say the last thing. It's probably going to be 20 more is let's go back to my components page. You're like, Oh, I might as well do that for him. So this guy, so I don't have to do it every single time. Casey like, Alright, no constraints. Dan told us it needs a parent frame. So often you'll find all components inside this frame even though they don't need to, so that you can see things like this. Look, he's stuck to the top and left. Okay? This does nothing. Let's say I make it top again, and I change it to so I want to stick to the right, I should do that. I'm going to go to another page. Let's go F Oh, it's not what I meant. I a frame, click this Why am I going to I think we're just swearing at everybody. What's the usual cut? Was in my brain, I got distracted by the FU. Oh, I was just saying. Grabbing. There you go. I've got this new frame with bad language. So I'm going to grab my assets. I'm going to find the one call bottom, and I'm going to stick them in. Stick them anywhere. And look. Oh, he's in. He's top, which is the default, but watch. He didn't go right. So it doesn't really matter what you do. I don't know why. Check it now on your version. They might change that. It'd be great to set it as kind of a default for the main component because I don't know. Be that's the reason for main components, but it doesn't work. Let me know if it does, and the comments, you kind of have to do it afterwards. That's okay. Okay, top, bottom. Because once you've done it once, it's not too bad, okay? 'Cause often you grab them, okay, and you paste them, and he will bring that stuff along. Just not from the main component. Alright, there was a fun one. We swore a little bit, we got lost, and got really lost. Hope you found it useful. Components are easy, but also can have a few quicky bits, and that's the kind of quicky stuff I love sharing. Great. That is it. I'll see you in the next video. I'm gonna put round corners on stuff. That's all I'm gonna do, okay? You can go now. Yep. Eight's a nice size for a phone. Actually, they need to look bigger for a phone. 24 is more representative of a modern phone, even a bit bigger. I like to see it in the design. You don't have to if I undo that and I go back to square. Obviously, when I prototype it, it will go inside and be clipped off inside of a phone anyway. So you don't really need it, but using my arrows, okay? You can see there they've got rounded corners, really big ones on the new iPhone. All right. That was all I wanted. I'm going to go back to where oh, I'm going to go back to my round of corners. I'm going to do that in the break, you go on to the next video. See you there. 21. What is good spacing to use in Figma?: In this video, we're going to talk about what spacing to use. You can use anything you like, but whatever you decide on, you can make this little grid here. It gives you a nice little visual reference to go, Alright, I spacing here. What should it be? Milla Let's use 32. I can make sure that this is 32 away. Currently is 43. It's not good. You can use it as just a visual guide of, what should I use? Being consistent with your spacing. What I'll do is I will show you as well, how to use an app to add all these little measurements in or draw the boxes. And we'll do it once and you can copy and paste this little guy onto every new job so it won't take any time in the future. Alright, let's jump in. Alright, let's start dragging them out. Once you've done it once, you can just copy and paste every future document forever. Okay? So I want this to be a nice bright color so I can see it as a visual reference. And I want my first one, the most fundamental size is eight by eight, okay? And because I've got constraints turned on, okay, it means that I only have to type it in once, and it will update both the height and width. Saves a little bit of time. Okay, so eight's the first one. I'm going to zoom in a little. Okay, and I want to see a visual representation of the next size, which is just another eight, which is 16. Then I want just to keep going up in eights, okay? I get a bit confused with math in my head, so I just that plus eight in the field. Okay? We're at 24. I know that. Okay, 32. These are the really common sizes. You can keep going up. It's up to you. You can also do multiples of six or five. They're just harder to divide by and your developer will hate you because often the developer, she'll be working with a framework that already exists. Instead of her writing in all the naughts and zeros and 16 pixels, she'll go use the premade spacing, and it will probably be eight or a division of it. Depends how much you like your developer. I like to keep the spacing in there as well. Because I like these as what size should my button be icon B, image B. You get a sense for it by looking at these. The spacing, I like to leave. If you zoom in far enough, I can't see my pixels anymore. I used to be able to. I'm not sure if I turn mine off or it's off by default. You'll know because yours will either be on, you'll be able to see the little pixels in here. You can go up to few and you can go to pixel grid. And you can see them. Because I want to count four of them. Look, I got four there. That's the kind of minimum gaps for things. Obviously the minimus gap is zero. Minimis is not a word, Dan, the next size is again going up. So we're going to go one, two, three, four, six is a good one. Sorry, eight is another one. People do use six. I'm just giving you the general rules. People do put whatever they like. So six you'll see commonly. I'm going to stick to this eight grid. How do I know? Instead of counting pixels, you can do a couple of things. If you've got, say, this selected, hold on the option key on a Mac Oh key on a PC and just wander around. You can see it tell you difference between all of these guys. Eight, you did it. Or you can do this. You can say, you start there, and then I want this exposition to go plus 16. I wanted to go 16 because it's across to see these gaps. This one here, do we want a 24 gap? We probably need one in between. What I'm going to do is instead of going plus 16, What did I go plus 16? I did. I wanted a different size in here. What I'm going to do is undo that. Go back, please. Going to do plus eight plus four. That's making mass hard. This works on my brain. So I don't want to go the full 16. I want to go just 12. I'm gonna go plus 12. It's a more reasonable size. It's still divisible, there are eights, kind of, you get me. Okay? And then this one could be the size of 16. So we're going to get plus 16. You can keep going up with the sizes, but I like those. That's a good just reference to have on every doc. Copy or paste it across so that you can start doing, see this gap here? What should it be? Probably that one. No, maybe this one. Maybe the gaps between this would be nice as that. Can you see it's just a visual reference? This might only be working in my head. One thing I want to do, though, is I don't know what that is. I have to click on it. It says 32. It's not hard. I'm going to show you a call Plugin. I'm going to go down to my Actions panel. Let's go to Plugins. There's this one called Design Doc. They're renaming it Spectral currently. I think they renamed it Spectral, and then everybody didn't find it, so then went back to Design Doc. It might be called something different. By the time you get here, there are a lot that do this. This is not just one of them. It's the one I like. This is the best one? I have no idea. I only use this. Actually, there's one called dimension, there's annotations. There's a few other ones. You might just type in measurements and see what you get. If this one's no longer available. It's like the kiss of death if I add them to a class. As soon as I do a plug in, whoever made it dies or stops updating it at least. Let's run this one. I like this measure. It's got lots of other cool things that we do. But let's have a look at t's look at this one. I'm going to go to this. I'm going to say, I would like you to put the height just above it. There you go. It's not temporary. It's there for good. You can see it in my ads panel. There's this container that has my measurements in it. I can turn on and off. It's just really handy. Same with this one, let's go you need. One of top as well. You too, please, top. It's just a nice cleaner way of being able to see what sizes you got. Probably going to need a couple of bigger sizes. You can do the gaps between stuff as well. I can say you and you. Let's do the space between. Oh, when I did it down the bottom, it's so clever. Okay, I like little apps like this. That is super helpful. Now, forgot that one. You can have this copy and paste it into the new document every time you start one and then you've got a nice little visual cue of where everything's going to be. What I like for this app is I like to put it inside of it creates all of this. It's quite messy. Is it messy? I don't know. I'm going to put it inside of a frame, and I'm going to put in this one's going to be called, it didn't all go in. The container really didn't want to go in. I think it's because it's locked. I can drag it in. You go in there, buddy. I'm debss. I'm going to haul this one spacing. Just so I can close it up and it's a little bit nicer, so I can close it up. Oh, this is weird. All of it's there. I can't select on it because it's locked, and I can't oh there it is. Hello. Sorry about that. All right, let's make the background dark of the spacing one because it looks weird and white. Because I designed it. Let's go black. Real high contrast. Now, that's that app. We'll look it later on. I want to show you because I don't know, I can't help myself. I love that measurement app. Oh no, we'll do that later in the course stand. Don't do it now. All right. Those are the basic spacings. You can use anything you like. Whatever you do though, create a little grid. Put the effort in once and you will be able to use it over and over again. All right. Next video. 22. What spacing should I use for web & app design in Figma: Hi, everyone. Let's talk just a tiny bit more about what spacing should be. I've given you some generic stuff in the last one. Where did I get that magic from? How do you get better at it? If you are already, you know, quite proficient at your spacing, you can move on. But if you want a little bit of I don't know, help to make sure things are consistent and easy to work with with your developer when you hand off your app, not causing problems, or at least being mindful of the developer and what they're going to be working with Watch oh, there are lots of places that your app or website are going to end up, and what will end up happening is your engineer, your developer, whoever you're using to make it, it might be you. It's highly likely to be built on top of what's called a framework. Your developer, she's not going to be going through and putting all the naughts and zeros. Okay? They're going to be building on top of things, they'd have built on top of things, they'll build on top of. If you are IOS developer, okay, the developer is going to be using the pre made or at least guidelines from Apple. If it's Android, it's going to be this material. That's what they call their design system, and they give you lots of helpful things about how things should be spaced apart. If you're going to web, it might be bootstrap, it might be tailwind. So, talk to your developer, figure out where it's going, what they're building it on, and then have a little read around. It can be confusing. We need to get started in these sorts of things so that you can actually, I don't know, begin your understanding of maybe a little bit of CSS, a little bit of code, so that you don't throw your developer spacing of seven because seven is tricky because you can't divide it in half. Okay, you can't have half a pixel. You can divide eight in half. You can have four pixels. Let's have a little look at why eight is good, as well. So let's look at material for Android, okay? In the material dot IO. They're on their version three. Future, you might be at version four or five. Check it out. I'm under foundations. I'm looking at layout, understanding loud. And it's just really nice to go through and say space between columns is a default of 24 DP which is essentially pixels. Short for device independent pixels. They use this because lots of different phones have different pixel densities. Just consider it pixels if you understand that. And when you're designing Figma, DP equals Px. They're using spacing of 24. So make sure when you're building out your little spacer block and you're going to Android first, make your gap 24. That's the default. It's happily divisible by eight. Not by chance. But at least it's a really common spacing for the moment. Let's have a look at IOS. Have a read through what they do. I think they're using 20 for their margins on their sides. They have some different defaults to a lot of other ones. And the thing with IOS is there is both phone, there is TV, there is gadgets, okay? There is watches. So have a little look. Whatever you're designing for, there will be documentation online. You're going out to web, so you're building a website or web app, find out, is it Wordpress? Is Wordpress using Bootstrap? Bootstrap is a framework that helps developers work fast. Okay? And what they'll end up doing is let's have a little look. I found this, okay? The gutters is what they call it. Okay, the space between stuff, and the default gutters are 1.5 RM, and you can see there they said 24 pixels, the same as material. So if I use 24 as my spacing, the developer is going to like it because it's kind of consistent with bootstrap and it's consistent with Android depending on where you're going. Now, there are 100 different frameworks. Tailwinds, people are using this a lot, okay, to help with their styling. You can see in here, I found under GAAP Bootstrap calls it gutter, tailwind calls it gap. It's all useful to know as a UI designer. You can see here, what a developer will type in is they won't actually type in the number. They'll just hopefully be close to one of these. So they'll put in spacing when they're coding to say gap is zero, which is zero. GAP is one, which is 0.25 of REM. A REM by default is 16. So 0.25 of 16 is four pixels. So maybe that little spacing we had before, that's the minimum one here, and it's a good rule to not go three. You know, the divisions become tricky, and your developer is going to have to go and override a lot of the framework defaults. You can do it, but your developer will probably just ignore it and use some of the defaults unless you force them. Okay? Let's have a look. So 16, six, eight, ten, Oh, there's a ten. You might decide that in your design that you need a ten. Where was it? We don't have a ten. We've got four, six, eight, 12. There's no real hard and fast rules on what these can be. But if you design four frameworks or understand them a little bit, especially if you know where it's going, if you know the developer uses tailwind, great. Type out all of these. So the big takeaways is multiples of eight are good, but really, you should check out how it's getting made and copy that. It'll make the transition from Figma to the actual design and development a lot smoother. Don't have to, but I've got a web essentials, as well, which covers a lot of the kind of things that we look at here like what is a REM? What is a DP? What is bootstrap? What is flexbox? There's all sorts of good stuff that you can learn that will inform your design when you're in Figma. But kind of outside of the scope of this course, but a little bit of HTML and CSS and framework knowledge makes you a better UX designer, in my opinion. All right. Was that confusing? A little meandering. Anyway, let's get on to some more hard skills Figma. 23. Class Project 04 - Responsive Lower Navigation: It's class project time. We're gonna make the Low navigation. We've already done it if you've been following along. I just want to kind of get everyone up to here. So what I want you to do, create the Low Nav, okay? It's this guy here, okay? And I want it to do some stuff, okay? And we're just going to practice the things we've already learned. So I want to make sure you're using components, both the icons, o and the Nav. What does that mean? Okay? This thing here is an instance of my main component, which is over here. To do that. These are main components of my icons. Make sure you're doing that just to practice. You have to use an autolayout for your navigation so that you can do auto spacing between the items. That just means that when I grab this, this squishes up and the icons have automatic spacing that go in and out. Auto out run the outside and make sure you can set up the Auto between them. The last one on there is constraints. Constraints allows us to do this with a navigation. I want you to stick it to the bottom and left and right so that when we do pick a new page, actually, let's go to this one, not a new page, but let's say we need to do a different frame size because we're doing I don't know. IPhone 13. Look, it shrunk. It's not that much difference. That was exciting, but you can see it attaches to the bottom and to the sides. That's the constraints part. Do all of those. Then I want you to record a video of you doing this thing going like this on one of your pages so that we can see you made it work. If you can't record videos because it's just too hard and you can't make it happen, I will accept screenshots, I'll trust you that it works. Maybe take a screenshot of this. Plus, we can see all of the things going on over here and we're like, I can see the constraints and they seem I love to see videos though if you're not sure how to take a video on your computer. Most Macs and PCs have built in software, Mac call it image capture. You can do with that. I use Camtasia. You can use QuickTime, which is free on both Mac and PC. There are plugins inside of Figma, which are interesting. You can go to the plugins. The the one that I've used before is VmeoVMoVMo record will allow you to log in and you have to get a free account with them, but you will be able to record your screen within the app. There will be other plug ins as well. When you're uploading it, we want the link to the video, not the actual video itself. We can't take the big giant MP fours, upload it to either Vimeo, Bee hunts, or YouTube with free accounts, and just send the Link in. All right. The real goal here is not so much making videos, it's getting this responsive Lower Nav going. I Want you to practice with that and I'll see you in the next video. 24. Class Project 05 - Event Card Constraints: Another class project. Didn't we just do a class project? We did. This one's kind of like a pickup path. Do it yourself. I'm going to get you to build a responsive event card. That does this on your own. I want you to create this thing, all responsive and good. So the dates stuck up in the corner, bit of text and image. Oh. I'm just going to leave you to it. Find these little projects are some of the best for people learning where you've got all the tools. I've taught you everything you need to know, but actually making something of your own, that's not following along can be both tricky and kind of bed all the skills in oh, okay. Because there's a couple of ways of tackling this. Because there is and it can be tricky, depending on your level of Figma skills, there's a video just after this of me building it. So if you do get lost, you can cut to the chase and see me building it. Do it yourself, though, and then see where you got to. It's a challenge. I challenge you. See if you can do it. Your way might be different from mine. You might get lost. That's totally cool. I bet you, though, you're lunar ton. When you're finished, share a video of your responsiveness. Okay? This right hand site here because I want the text to expand and contract, okay, making the box bigger. Doesn't have to be exactly like this, pick your own image. Again, I'm trying to find pictures of me. Middle Age is probably too old for me, but I'm not this guy either. I don't mind about the text and everything. It's more of the structure. An image in there, a date box sticks to the top right. Maybe that's constraints. Event details. Make sure it's component then the deliverables, a video you can't do the videos. A screenshot. This is a cool one where you can share on socials, make sure you use the hashtag Figma Advanced and tag me in it, so I can check it out. That is it. Have fun making your own event card. See in the next video. 25. Class Project 05 - Completed: Hello. This video is my version of how I made this thing work. You can follow along to see how close yours was to mine. It doesn't really matter how you got to the end result. But if you did get stuck, you're still currently stuck, you can watch me. We do get a little lost in this video. There's a few little shortcuts. So even if you did get it and it was pretty easy, skim through this one, maybe turn the speed up and there's nuggets in here. That's what I'm saying. All right, so there's no real rule of where to start, and there is a couple of different ways of doing. I'm going to show the way I did. When I do it with students in class, people find other ways of doing this. So don't worry if yours is a little different. I'm going to start with my top frame here, the image with the date in it, and I'll work on the text later on. So I'm going to give it a fill just so that we can see what we're doing. Pick any color as long as it's a green or aqua. So what I want to do is put another frame inside of this, pick another color. Something clear and I'm going to say you go in there and within this frame, I want to say you just need to be constrained to the top and the right. Now, hopefully, we've got that chunk going. That's the first part, this bottom part, how do we do that? Now, you don't really want to put it in here, want it to be in a separate box because it needs to do something different. I'm going to make a new box. I'm going to say this is a dark color for no reason. I'm going to put some text inside of it, throw the elements in. All right, I'm just throwing in text. There's a couple of things I need to do is I need this to maybe the right size. That's the first good step. I want this text to break inside of here. I want to say you are not this kind of auto width or fixed size, I want this middle one auto height, and then I'm going to break it so you go there. Perfect. But when I resize this, nothing's happening because this guy needs to be autolout. Okay, so I'm going to say Shift A. He's wrapped all the way around the outside. Perfect. Now we've got a little bit of responsive text going on. It's not working. The text than here now is the auto height, but we need the width to change based on his parent or the container. Let's have a look at the width. It's got a fixed width. I don't want to focus width. I want to say, I would like you to fill the container, please. Now, if the container change, he tries to fill it. Go. So what are these two bits, and you could leave them separate, but that would be weird. So we want to do now is put both of these together inside their own frame. Both selected, I'm going to say, frame those guys. Okay. Let's give it a name so we're not getting too lost. Well, actually, let's see how good the auto naming goes. So let's go. Let's go to rename. There it is there, rename layers. Just see what it does. It gets better and better. I bet you container. Footer. Oh, it's done good. Container. Let's call this one image. It's thought that was the image, but it's not. This is the date. It got close. It's a good starter anyway. Oh, I do like it. I got a container inside of it. I got those two boxes that I made. Let's have a look and just keep testing every time. Grab the parent, does it all work? It does not. Why? It's Because it's not Auto out. This container, Audio out, please. Let's give it a go. Let's see what it did. We're building it ourselves. We're not using the make do it all for us AI feature. It's working. Except the bottom doesn't go up and down. What I want to do is probably want to leave this image box here alone. I just want the text box down the bottom. Come down. What I'm going to do is you need to do what? You need to fill the container. So, it's the height this time, the width we did, but we didn't borrow about the height. Now, we don't want you to hug, no hugs here, buddy. We're going for fill container and I want you to fill it, but I want you to stick to the top, please. Look the parent. What are we doing here? It worked. Oh, let's put in some more details and just see if we break it. Okay? But that's kind of the fundamentals. What people tend to do, and I do. There's no real, like, hardce way of doing it is you start with the parent, then you start working with those blocks in between and then put another block in here for the date. You can do it that way. It's a little bit more complicated when you're new. If you tackle it that way and you found it really frustrating, try and do the individual pieces first, then combine them. But it doesn't really matter if you try and build the container frame first and then start building stuff inside. It's a little trickier. Alright, I want this to be an image. So I can't just plop an image in here because that's over the top. So I'm going to go Command Shift K to bring in my image, Control Shift C PC. You know, I know you know. I'm going to bring this in. What I want to do is I want to grab the Actually I could have selected the frame and brought it in as a fill. I've done it a different way. So what I'm going to do is grab this, steal the fill off this, copy, grab the green one, hit paste. I don't need this green one anymore. And hopefully, remember test test test, always testing it working? It is working. Cool. Nice. Next is this text down the bottom here. I'm just going to replace this with Command K. I'm going to say rewrite this and I'm going to type in something with a more sing song rhythm. I know what that is. Let's go four. All right. I'm not sure what this is going to do. Command Enter to make the AI stuff do it. Sometimes now you need to go make shorter. I need to make changes. I think that's long enough. Let's go make shorter because I'm going to use a smaller font. If you don't have the AI, and you wish you had the AI, you can just go out to the free Chachi BTK or just type in anything you like. All right, font size, I'm going to go to 16. You can leave now. I don't know. If I'm going to run into problems, maybe I will. One thing that happened there is you noticed that there was no padding. So I did make this bigger and this didn't expand. It still works. Look, it's all scalable, but yeah, didn't push it out to the bottom. Who knows why? A couple of things. First of all, I want to make this guy auto height. And also his parent the parent frame is working, the padding is really small. I'm going to say, over here in the padding, 24 is great on the sides. I want the top and bottom to be different. I'll give you a little shortcut for anybody who's hung out this long. So on the top, let's say I want it to be 24. But then you can put a little Cameron, Cameron the keyboard. That's the top. If you put a Cameron, you'll be able to do the bottom to 32. That 100% kind of worked. I've got 24 at the top, 32. Okay, but my text in here is not doing what it should, the height of this guy. The height of this fella. You is fill. Filling the pair and container. My pair and containers not big enough for the text. Come on, Dan. So that trick did work. Can you see? I've got 32 at bottom, 24 at the top. You can do the same for left and right. You can just add commas. It just saves you from not really doing much is opening that out. You can just use commas. You're a computer hacker. You're welcome. All right, other things are going to cause me problems is I want this height to kind of just as I type two, go like this. Is it doing it? It's not. And that's only because I keep dragging it around to prove it works. I want this heir to snap to the bottom. So in terms of the height, there's a couple of things to do. You see, it says, fill container, so it should be doing it. But this parent, where I go click off, click c on. This parent is a fixed height. He's a height of 330. He's forcing this to be bigger. So I can say, actually, I just want to hug the contents. Actually, you have a height now of I want you to hug the contents, too. It can be a little weird sitting these things up. So now what I'm looking for is this. When I type stuff, type stuff, and it gets longer, it gets bigger. Awesome. If I go out and grab the parent now and it goes onto a bigger document, I can just drag it out. Look at me. How far away from the edges? What I might do is turn on my guide. Let's go to the parent. Let's go down here, Layout guides. We did it in essential s cours, let's throw it in here again. Add Layout guide. I don't want grids. I want columns. I'm going to click on this and how many columns do I want? I just want one, but I want the margins on the edges to be 16, 24. You can see the edges here. You might just use it for this just so that everything starts lining up. You Snap. Nice. The shortcut for guides is Shift G, turns them on and off. Okay? And we did it. Needs rounded corners. Parent, you're going to say or were you rounded corners. Rounded corners. Eight? No, 16? Something like that. Oh, it didn't work. Why don't you have 16 corner radius? Please hold. I can figure this out. What are your radius? Oh, I think I know what it is. Let's jump back in, so I can prove to you I've done it. Let's go clip contents. Oh, there was a good one. I don't know how it didn't end up with clip contents. There you go. Okay, so let's go to 16. It's way too big. I go 12. Even though I said use multiples of eight, you can do what you want. This is design ten. Alright, so it was a nice little interesting one. Clip contents was off, so everything is kind of hanging outside, whereas now I want to say everything inside that main component. Oh, it's not a main component. You are going to come over here. I'm going to turn you into main component, which I can't remember what the shortcut is right now. Oh, what are you? Oh, that's right. Command option K. That's control, old K on a PC. Sometimes we all forget. So that is my main component, and I'm going to use that. And this guy needs to go cut, you need to go to my component's page. You can hang out over here. Okay, you can go there, you can go there. Oop. We did it. Ah, it's very exciting. You can go away now. All right, I'm very happy with myself. You might have done a completely different way. You might have spent half a day working on yours, but you kinda get it now. I guess I like these little exercises. They're like something. Oh, you didn't do the date. Should we do the date? Actually, there's nothing to the date. You just throw the text in. One, two, three. Alright, so just type some text. I am going to throw it in here, and you didn't go in the right place. Get there. And I'm going to select March and go Command B or Control B to make it bold. Us. Text still works. Hook ok. It does not work. It's not in the right one. So you are hanging outside of all of this. Ah, why couldn't I do that? It's 'cause I'm trying to add text too, what is it? Pause? You think? It's an instance of the main component, not the actual one itself. That's a good tip is that actually you can't add stuff to instances. You have to go over here and say, paste it in there. Now, it should appear on all of them. Correct. The mobile phone and the text is there. The only trouble now is that I did that that's pink, and this one here is green. What I can do for that, I was able to do this on the instance, change the rounded corners and make it green. What you can do is select the whole instance, right click it and say, actually everything that I've changed, can you go to the main component and push these changes onto it, and let's go see onto our component. Did it. Look at us. Why can't we just grab it all and go to this option that we looked at before? Can you remember the AI version where we said go, A let's go to more A options. Let's go to suggest it, and it didn't work. That's why. It can work sometimes, and when it doesn't need to know the skills of trudging through and making it. But I do like the problem solvingness of doing something like this. I feel like I've made something in the world. Even if it is, just little adjustable pixels. All right, that is it. That's how I did it. I'd be interested to know the comments, how you did it. Was anything completely different? Did everybody do it differently from me? That's what I'd like to see. Also, give me a time. How long did it take you? Did it take you 10 minutes? 5 minutes. 5 hours. Let's have a look. It's okay? I'm just interested. I'll see it when I am. I'll be sleeping. 26. How to make a simple Variant in Figma: Hi, everyone. We're going to make a really simple variant. Okay? You might have made one before. I was going to run through it just so that everyone's got a good baseline. Okay? It means, first of all, if you haven't bumped into a variant or it's been a long time since you did the essential scores, this button here, okay, over here, you can say, actually, I want to be watermelon. What's really cool about it is in, say, my Assets panel, okay, see, I've just got one button. But in that button, okay, he's got two variants. Okay? Keep it nice and tidy, and it's going to give us the skills to build multidimensional variants in the next one. Very serious. All right, let's dump in. Let's make a variant. All right. So I'm going to start with a button that I've made. I'll make this button at the end of the video if you're interested, but any old button. There's nothing to it but a frame but some text in it. It's an auto out. None of that is actually important for a variant. All we need to do now is make sure that it is a component. Let's do that. Command, Option K Automac, Command K on a PC, you're getting it. Or you can click the button up here. Bosh. Okay. What we're going to do is we're going to say, actually, I would like another variant of it. See this little option here says I want two of them. I got a variant. They're two similar, so it's technically a variants, but let's change the color of this bottom one. I'm going to click the parent frame. I'm going to say, scroll down, fill color. I'm going to pick that watermelon color we're using. Now variant. We need to go and name it, but that is it. Let's go and have a look. We should be doing this, I'm going to cut it. I'm going to go to my components page. You should be on here, buddy. Let's do everything right. This is called Component set. See the dotted line around the outside. Figman calls a component set. Don't worry about it, but it will pop up. There's one component. Put more than one of them in there, which is his variants in something called a component set. Lots of terms. That's okay. Let's go to our Hi Fi mobile. Let's go to our Assets panel. Shortcut that we'll start using from now on, is if you hold down the option KemacKOPC and one in two, one in two, one in two is easy to get from file to assets. What is it? Option one and two, one and two or Alt the Assets panel, let's have a look at the files in this library. Let's go to the ones on our component panel. Excellent. Here's our button. Drag him out. The gool thing about him is he's got a variant over here. Default? No, not the other one. Oh. Cool. Variants are awesome. What we should do now though, is go back to our option or Alt one, back to our layers. Files. I'm going to go to my components, and I'm going to say. Let's do some naming. Let's select the whole. What is it called? You remember what are the dotted lines mean? Component set. You got it. With the selected up here, I've got a bunch of properties that I can rename. It's just give them default stuff. Click on this little settings as a Edit property. That's what it is. Click on that and let's name it, this one's going to be called. I button. I've got a couple of values. Okay, go back in there. I got a couple of values. Actually, the name of this is not button, it is color. Okay? So we're naming our variant, not the name of the actual button. We already did that. I want to call this variant, different color variants. Oh, keep jumping off that one. Where it says default, I want one to be, let's say, green, and the other one to be Ater melon. The nothing really changes except when I'm back on my mobile Hi Fi, I click on this. It makes a little sense. Look, I got color. Okay. And I've got green or watermelon. This makes it easier for somebody else using it and for you. Come on, let's name stuff. Mr. Untitled 57 or in this case, frame 57. Dan likes to throw shade on people, even though he's got really poorly named stuff when he's working on his own. Don't tell me one. All right, so that's how to build a really simple variants of Figma. Let's go and create the button now if you're interested. If you know how to make a button, which you probably do, move on to the next video, but I'm going to build it together. Let's hang out. All right, we're going to do that all again. We are going to make the button, but I just recorded it with the microphone off. Let's do it again. I love doing it twice. Alright, let's go to the frame tool, draw out any old size. Let's give it a color of the button we want to use. I'm going to use that. We should start doing some color style soon. A couple of greens going on, Dan. I'm going to grab the F tool. No, I'm going to grab the Type tool, which is the Tiki. Click on the inside anywhere and just type in button. I'm using uppercase, and I'm using a roboto condensed bold. A really common button size is 16. It's easily seen. It's just Okay, now I should line it up in the middle. I hit escape to get out of the type tool. I should line it up in the middle, but what I can do is just click the parent frame. So I've got this frame here, which I will call buttons button. Okay. With it selected, the parent with a text inside of it, if I just go Shift A, I will turn into Auto lout and by default, can you see it's going to hug around the text, which is perfect. Hugging is perfect, because it means that we get to type more and you see the button expands, so awesome. The one thing though is it defaulted to some random padding based on the original size. In terms of the padding I want to do starts with the width, 24, I'm going to tab across and hit eight for the top and bottom. He's my little button down here for the corner radius. I can use my up arrow, look go up, If you want to be perfectly round, you just got to be above. Whenever the radiuses start going away, let me zoom it down here. Can you see what I mean? You get what I mean, I I made that 16, you'd be like, it's round. But if I made that 100, it is massively round and has to be the perfect circle. So just put in some giant number and it will be rounded at the ends. I made it just in case you were interested. All right. I'll see you in the next video. 27. How to make a Multi Dimensional Variant in Figma: Hello. Hey, we are going to learn in this video Multi Dimensional Variant. Okay? They are fancy, mostly because they do it in that voice, but they allow us to take variants to the next level, or the voices. It means that this button not just has one variant, like color, we've got multidimensional variants. That is a fancy word. That's why they call it, but it just means I've got two different things. I can go, I want to be green, but I also want it to be outlined. This thing here, okay? It is one lovely little asset. You see him there, the button Zoom. You drag him out, but he's got all sorts of stuff. He's got both different colors and he's got different values. Having more than one property just means it's multidimensional, not as fancy as it sounds. Just go and build one. All right. Go time. All right. So what we're going to do is we're going to start with the simple variant we made in the last video and build on it to make it multidimensional. All we need to do is, guess what? It is multi dimensional now. We've got a third option. So those are actually just three variants. What we want to do is let's change this one a little bit. So what I'm going to do is I'm going to fast mode and I'm just going to make it outline. Okay, I'm going to make another one. To make another one again, you can either hit this little plus button. There is an option up here. No, there's one of them. No, I'm sure there's a button up there as well. So either hit that button or Control D. I don't think you can copy and paste them. No, for some reason, you can't copy and paste them. Here we go. Come on, D. I'm gonna change this color as well. You wait there. All right, so I've got these. I could just leave them as that, and when I'm using them, I can grab them out and go, A, I've got all of these different options. But what I'm going to do is make it multidimensional. What that means is that I'm going to grab my component set and I'm going to say, I've got one property. I want to add another one. I'm going to add another variant. This one is going to be called fill. I was just trying to think there what it could be called and the default value is going to be solid. What we're trying to get to here is when I select on this, I'm going to say you my friend, are both green and solid. You are watermelon and solid. You are going to be green, but also add a new one, you're going to be outline. That one is both that first property we did, and this is the extra dimensional. Multi dimensional. But you got to say there that's multidimensional. We've got color, we're fill, we're hardcore. This one here, what are you? You are color four. No, you're watermelon and you are going to be outline. What that means now is that when I grab this nice simple button, remember on Assets panel, optional Alt, two, one, two, switch the Assets panel. This lovely little button here. For drag him out, he's multi dimensional. He's got color and he's got fill. I'm going to say you watermelon. But I want the outline one. Go. I was scared of doing multidimensional variants for a long time. It sounded scary. Multi dimensional, anything sounds hard. Okay? But it is tricky. I'm trying to be calme, give it to you. It's really easy. But when you do it for the first time, you're like, This doesn't make sense. Okay? What I tend to do is kind of like smash through it until you've got at least four of these. Then forget trying to do fancy stuff and just come up here and just make sure there's two properties first, and then work through every button and go, Alright, I want you to go through this list. And if there's not something you want in here, just click ADN. Okay, same down here, you're like, Okay, I don't need to be green. There's a third color, so I'm going to add a third color. Or it's the right color, but there's nothing down here, so I need to add a property. If there's no, if you do have the right property, and you're like, All I need it to be add new one of these. That is generally the easiest way. I want you to finish there, leave there, feel confident. Now I'm going to give you a more advanced way because we're in the advanced course. There is another way to do it. It might be easier for you. You're like, man, that blew my brain. Or you may be like, I love doing it two ways. Why learn to do it on? I've done here is I've just made a circle with a plus in it. If you do any the plus and minus buttons, often it's better instead of trying to find a symbol is find a font that you'd like the plusin. I often use this one here called days one, but you can see I can go through and find a plus that I like. You might like that plus better than that plus. What you can do then is you can right click it and go to outline. Or is it? Outline stroke. Then it's just like a square. You can't change the font, so you need to probably do this first and go, I need yo? And then outline it. Or who remembers the sweet shortcut familia? If we do a dash and then a greater than, get an arrow. These arrows not very good. Anybody else got a better arrow. We've all got different styles. Let's get that other way. You see? G work through and see who does a better arrow. Just using fonts. Of course, you can go to some sort of icon library somewhere, that'll work. Stuck them in the middle. Alright, that was a little tangent. So the reason I want to show you this is I'm going to put you guys down there because I'll use you later is I've got these two, okay? So we create a variant. But what we can do is instead of doing what we did, where we build a first variant, then we made duplicates and then kind of split them all up. What we can do is we can say, Alright, I want these two. And you just build them all first. So I want these two to be dropper. So I've got all these first. These all need to be their own components. One of the big problems is that I haven't grouped these, okay? So if I do make multiple components here, I'll show you this because you'll do it. You'll go, Alright, I'm going to make what are we going to do? We're going to make multiple components. Okay. Now we've got one, two, three, four, five, six, seven, eight components. Let's undo that. What I'm going to do is either group these first, group, group, group, group. Actually, I'm going to show you one way. Getting too distracted. Now I can create multiple components. The other way is you just make them one at a time. But we've got one, two, three, four. I've got all these. I'm going to select them all, and I'm going to say combiners variants. Why don't we just do it that way, Dan? Oh. That is actually probably just easier, isn't it? Yeah, it still gets messy. So we're at this point. It wasn't hard to design this. It's not hard to get to this point. The next part was what we want is we need a couple of properties. I've got one. Let's double click property one, and we're going to call this one color. Color. I'm going to add another property. It's going to be a variant, and I'm going to call this one. What do you call plus or negative? Sometimes my brain doesn't work. You just hoping value. I can create their property. If you're unsure what it is, the value is something. It's a good generic catch all. Now let's click on this. You are a color of group one. No, let's call it, rename it. Let's call this one. Green, it's greenish, and it is a value of, we're going to call this one defaults going to call this one plus or positive. I don't know whether we should use the plus symbol or write the word positive. I'm not sure what is easier. This one here though is what color of. It's going to be green, green. It's going to have a value of we don't have a minus, we're going to add a new one, and we're going to say, you are minus, my friend. Just work your way through. This one here, color of group two. That's not a really good name. Let's call it Watermelon. And a value of A, we've got a positive. Now, this one here should be easy because we've got watermelon and we've got a value of negative. All right. Same thing. Have a little thing, practice with both of them, and just see which you like the option. Which one do you think is better? Get Assets panel, the cool thing about it again, probably needs a better name. Can I do it over here? No, can't do it over here. You must be able to. Anyway, let's go to Option or Alt one back to our files. Let's go to components. You have a terrible name called Component one. You can either name it over here, okay, or you can name it over here. What is this? This sounds going to be, but can't think of what to name it. Can't call a value. Please hold. I can't think of a word. I'm calling it a Zoom. In Oti. Anyway, so there's a bit of name for it. Let's go back to our high fidelity mobile. Let's go to Option or Alt two to go to our Assets panel. Drag out my button Zoom, okay? And we're going to say multi dimensional. Look at us. Alright. So the big version is, it doesn't matter how you get there, but you just need a component set. Then you work your way through over here, adding different values, adding different variants, different properties, and then within there, giving them better names as you go through. It doesn't matter whether you like here, start with them already made and work them up that way, or start with one and just keep duplicating them and adding the values. Either way, I end up doing it this way, for some reason. I don't know why, but you might like it this way. All right, that is multi dimensional components. Feeling good, feeling advanced. This is advanced stuff. Now the cool thing about this is you'll find other people's libraries that will have these and you'll know what the dotted lines mean. You won't remember what they're called, but you know what they do. You'll be like, Oh, I can grab one of these and go, Alright, it's got multi dimensions. Nice. It's got lots of different variables. Fancy. All right. That is it. Let's go on to the next video. 28. Class Project 06 - Multi Dimensional Variant: It's project number six time. Okay? This one's multi dimensional variants. So basically just what we did in the last video, except I want your two different properties to be size and color, take a screenshot of both the component set. This is a dotted line thing, and I want to see this over here as well, your properties to see them all named nicely. I'll be checking and upload that to the assignments. You do not need to share this on social media because it's a little boring. Very useful, but not very visually stimulating. One thing I want to show you, though, is, well, I want you to make sure it does this. I can say, Alright I want to pick green, but I need this small. Just like we did with the outline, but we're doing size. One thing I did want to mention is before you go is this components here, sometimes you might, let's say that I grab all of you because I want another variants. I want three of them. I don't really want you to do that. But let's say you did because you're crazy. You wanted the sizes, the colors, but also whether it's filled or outlined. I'm going to go Command, get a bunch of them and you go, but it feels better if they're over here. They end up coming out of it. It's real bad. What you can do this line, this is what I want to show you. Is this dotted line here actually it's not automatic. You just drag it around. You can say, right, these guys they feel better over here. You guys can go there. You're not meant to be yeah you can make a third property, which I don't want you to do with outline. I want you to make this one. This little guy here with the two colors and the two sizes. I just wanted to let you know that you can adjust the sizes. Go to click the frame and then jiggle it about. Alright. Before I broke it, B, back, back, back, back, back, you can get on with yours while I'm undoing away. Alright, enjoy making your Multi Dimensional Variant. They can be tricky. They're very satisfying when you make them work, especially when you're able to give them to your teammates. You in the future, have this really easy usable button, and it keeps my assets pan off from going crazy. Okay? Just got one button in there that does all these different things. Alright, do your homework, no homework, and I'll see you in the next video. 29. Variable - Light and Dark Modes: One, we are going to learn what a variable does. You can use them really simply Figma. You can use them really hard core. We're going to start nice and simple. We're going to do a light mode and dark mode. See this text here, drag it over here. It changed color. I know. I'm very excited. I am such the average Coda slash developer. I do a little bit of frond in a copy and paste stuff thinking I'm a computer hacker, but I do love little simple solutions like this. It gets even better to watch this. If I grab these, and I drag it over here, it changed. But if I go with the parent and say, actually, actually, I want you to be in dark mode. The whole thing changes. The background change. Did you see that? And the text changed variables. If you're a developer, you're going to be like, Wow, rolling your eyes. This isn't that amazing. But if you're like me, you can get very excited by variables. Let's all get excited. And let's jump in. Some variables. Brief, so let's do it. What I've got is just text on a page. That's it. There is nothing fancy about these. Let's go and create our first variable. Now, you'll find that I keep saying variant. Variant what we did earlier. That button has two different variants over here. Variables very different. Where do you find your variables? That's it. Have nothing selected. What you'll find is there's a little option. Variables. You can click on it. We've got no variables. Let's click Create. What kind of different options. We're going to cover color for the moment. We'll do more later in the course. Get us in here and get us started. Let's go color. Now, it changes. If you've got the free version, you might actually get this far. It might just ask you to move it into a team. There are some free options. There are times where the paid option kicks in. It has changed over time, so I can't give you solid facts now because it might be different. You're in the future. I'm here. You might have to watch if you've only got the free version, but you'll probably get some far along with it. All right, so what have you got? We've got this. It's just a little table. These are my variables. I've got one along here. It's called color. Let's give it a better name. I'm going to call this one. Text. It's my color variable called Text, and I want to have two options, two modes, they call them. I want a light mode, light mode. In light mode, when everything is bright, the text needs to be quite dark because it just does. I'm going to move this over here so I can see puts a little swatches here to make this easier. In light mode, I want a dark green for the text. Oh, you've made a variable. Doesn't do a whole lot, but let's apply it. Let's click on the heading, it's applied like a style, specifically that color variable. If I go in here and I got a field color of just some random color I picked, I can go to my styles. You could use the styles. We haven't created any yet. Do we make that? Clear we made that at some stage. There's some other premade ones in there. But there's this. I should say variable above it. Doesn't text. You can see it's the color. Let's apply it. It's like a style. That's a lot of work for just that. But don't worry, it gets more exciting. Let's have nothing selected, and let's go to variables. Let's have another mode by clicking plus here, let's call this one dark mode, dark mode. In dark mode, the text actually needs to be quite bright. I'm going to pick just an interface color. I like using EEE. Okay, just tab out all the six eggs. All right. We've made another mode for our variable. Let's click in here. Actually, let's grab this guy, let's copy him. Let's click over here, let's paste them and you're like, we're in dark mode. Over here under fill, you don't do it here. That's where I keep going. You're like, I'm going to click on that. There is no light color. Where is it gone? They're all going to appear under the appearance. This guy has a variable applied of text. What I can do under appearance, see this little swatchi thing here, I can apply a variable mode. Remember we made two modes. I've got a collection called Light mode. Well, it was already on Light Mode. I can go here and say, you're in dark mode. Oh, very exciting. Is it? Oh, it gets better. Watch this. Let's delete that one. Let's apply the same thing over here. Let's go, Phil, you have a style of that text color, which is that green. If I grab both of these, copy them, paste them, got them both selected, I can say you are dark mode, and they all change. Oh, it gets even better. I don't know why I like this. Let's add another variables. Have nothing selected, go to variables. And we've applied text. Let's create another one. No, not another mode. You can drag this bigger. I don't want that third mode that I made, how to get rid of it. Click it, delete it, you delete mode, that'll do. I don't want another mode. What I want is another variable in here. Another color one, and this is going to be a color. Let's call this interface or background, whatever you want to call it. I'm going to call it interface just because it's a bit more generic. An interface color when I'm in light mode should probably be nice and light because it's the background. The text needs to stand out from it. In here, I'm going to use my EEE. On dark mode, though, the interface needs to be really dark so that we can see the light text. I'm going to say, I'm going to use that color. Copy them, move them back here. You can see on light mode, the text is dark. The interface is light, and the opposites are here. If you're a developer, you're like, This is so easy. If you're more on the creative design artist side, you're hacking the matrix. That's what I feel like I'm doing when I'm doing this stuff. Okay. So, what have we done? Let's go to this. Say, I want this whole parent frame to have the fill of let's go. We've got two options now. I want to be interface color. Oh, it changes. It changes to whatever the first one is, the default one. The cool thing about it is I can say, Alright, I need this text here. Come across. I'm going to make duplicate, hold down the option key key, bring them over here and nothing really happened. That was underwhelming. What we're going to do is move this over here and turn off all of the B I said I was very specific. I said, you're definitely going to be dark mode. Just turn it to Auto. Now this fella over here, he's on Auto, which in case the first s which is light mode. So over here, he's perfect. But if I say, Hey, this whole frame though is not under Phil, remember, I keep want to go back there. We go to appearance. So you actually, that frame and anything inside of it is now this is where it gets good dark mode. Oh. Now, we've done it with the background and text. You can have buttons. They have variables, light and dark mode. All you need to do is change the parent frame, everything inside of it. You don't have to go. You are a new style and change it. Everything just comes along for the ride. Are you excited? Let's just create it from the beginning. Let's go. Oh, I like to show you this. I'm going to make a new version, okay? This is always the exciting one. Okay? I'm going to say you are member appearance. Okay? I'm going to go to Light Mode? The cool thing about it is because I haven't applied anything to this one, remember, this one has got the appearance of nothing. He was on Auto. But if I drag him over here, look. Ah. Yeah, that was in intro. All we had to do is create a couple of really basic variables. How are you feeling? You're like, computer hacker. All right. That is a nice easy variable. They can get very complicated. We'll get a little bit more complicated in the course ladder on. We'll do one more now before we leave variable land. The brains melting too much too early in the course. All right. See you in the next video. Actually, before we go, I just want to reiterate these bits of text, although they're not set to, let's say, dark mode, they're letting the parent do that. You still actually have to apply the variable. So if I grab a bit of text now and say, and type it in here, can I six? I typed in frame. Type two, type in here, typing. What you'll find is that this won't change. It's still white. Even though the parents be a different color. You need to at least apply the variable, the we can say, you have a color fill color of the text. We didn't go up to here and say you have an appearance of light mode or dark mode because it doesn't matter where he goes, he'll be that color. What we do is we just leave him, don't touch the appearance. We go back to Auto, which actually when I click back on it, goes away, whereas my parents, there it is there, disappears. I just left it. I played it down here, the text. It's got the text variable applied. But now everything inside of it, because my parents say, do this, or the children come along for the ride. That's it. Let's go onto the next video. 30. Class Project 07 - Color Variables: Better not ask us to make our own variables. I'm going to do it. Basically exactly what we did in the last video. Just copy that. See how you go. The only kind of mix one is I want you to add a logo, which is just text. So it's exactly like body copy and heading. You just need to apply the variant, leave it at Auto, and it should change. So I want text to change and I want interface. So it's going to have two modes, light and dark. Where are they? That's these two modes and two variants. Text and interface. You might call it something like this, Text just because it makes it a little bit easier when you are looking at this, but it is a little easier to see when you are here, you can see, all right, this has got to fill of variable text. Otherwise, you're like, What the hell is this? It's not super clear. A couple little things I didn't do in the last video that I want to share with you, you can break it. You can say, don't do that anymore. Just go back to the color. Also you can see in your layers panel. Can you see over here? We've got light mode and dark mode. This can be really handy, especially if it's not changing. We've worked out that if I grab the heading and I force it to be an appearance of dark mode. Okay? I try and drag it over here, it doesn't change. Even though this parent is saying be in light mode, just doesn't do what we want. We know that it's actually can't be set to something, set it to Auto and it will follow the lead of this parent. Goes back, goes forward. What's really handy is to see it in here. Can you see if I go heading and I force him to be in, say, light mode. Can you see in here? The parent has a variable applied. That's this little pill here. But this heading is doing his own thing. He's like, Well, screw you guys. I'm just being light mode. I don't care what mum and dad are. Alright. Cool. So build Jerome, take a screenshot of I showed you it there, just kind of seeing both of them laid out. Because you can move this. If you click on nothing, grab variables, you can drag this around. Okay? Make it bigger. So just get it however you've made yours, just so that I can see it all in one big screenshot, and upload it to the class project section. Alright. Have fun. Good luck. Hopefully, you're as excited as I am when it works and you can drag it around and it does stuff, but it is tricky. If you're pulling your hair out and you're like, that's what I've done. Clearly, I'm missing a lot of here. But if you are finding it really hard, don't worry. It is really hard. You know if you can't make it work now, that's okay. We're going to cover it again later in the course. We'll go into a few more variables. Actually, we'll do one more now, I think, just to get a home and then we'll do it a bit further in the class. All right, happy color variable making. 31. How to create cart total using number variables in Figma: I Hello, everyone. We are going to do this. Watch, click, click, click. And down down down. Oh, I do love it. It is called a variable, like we've done another video. This one's a number variable. Click our buttons. They go up, we buy tickets. If you're like, Oh, I can do that, just link a bunch of pages together. Look, we've not got bunches of pages. We just got these little guys. Let's jump in. Let's buy some techno tickets using number variables. Alright, to get started and nothing to do with number variables, we are going to be awesome and go Option or Alt to. Switch assets. We're going to grab our button that we made earlier, and I'm going to have one that's set two. Can you see how cool this is now, and I want to use the watermelon color. Like it. I'm going to have this side set two plus. It's great to actually be able to use some of the stuff we've made. I'm going to grab the F k, do a little box like you saw at the beginning. Let's fill it with white. I'm going to put some text inside of it. It's going to be a big old, actually a small old zero. Just sick it in the middle there. Let's make it bigger. 24 for giggles, I'm going to say, let's be centered. You'll see in a while. All right. So what are we going to do? Let's get some variables going. We're going to have nothing selected. We're going to go to variables. We're going to click on here, and we've got these that we made earlier. What we can do is we can go and create a variable and we're going to do number next. But then you start mixing them all up and you're like, again it's a little confusing. What I like is you can click that open if it's not already open and you can say, actually, I want to name this collection. This one here is going to be called color stuff. Okay, I'm going to make another one, create a new collection, and this is going to be collection number stuff. They're still there. I've got cos stuff or color stuff, and I've got number stuff. I'm going to work on number stuff just to keep it separate. They can go together. We're going to create on a number one, what are we going to do? Instead of this called number. Let's call it total, so it's a little clearer. And the value, let's change this value to something else like five, just so we can see what it does. Okay, cool. What we're going to do is just move this up here, move that around there, so you can see both of them. All we need to do is we need to say this textbox, not the outside one, but actually could do the outside one. But this one here, I would like now, it's not a fill and a style because that's how we did the last ones. Numbers are different. I'm going to go in here numbers, and what we do is the way is up the top here. See this little icon here. That's the variable icon. You see it every now and again, used to be everywhere. The latest UI update, they've removed it a little bit, but you will see it where we go. See there? That's it. Hexagon, Pentagon Pentagon, Pentagon. I think it's Pentagon. But you will see it in some fields, some have it, some don't means I can apply a variable to line height. I don't want to. I just want to give you the idea. This one here though, this one is going to apply it to this textbox. Which one? I could. I can only apply total. Played it and it changed to five. This variable is now connected to that textbox. Good thing about it is I can say, actually I want this to be 15, or back to zero. We're going to put it at zero, but we can see that they're connected. The next thing we need to do is we can close this down. There's two parts to this. This is the tricky one. The color when we said, actually we did it to the whole frame. We did it under fill. That was clear, we want the fill to be a certain interface color. That was cool. You saw it at the beginning. It is a button that you click. It's an interaction that happens in prototype. This gets me every time I do it. I the bit. Oh, I remember. Because what I want to do is when this button is clicked, this to change. We're done with the number now. We don't need him at all. He's connected up. What we do need, though, is the button to tell this guy what to do. You do it under prototype. Under prototype, I want to add interaction like we've done before. I want to say, when this thing is tapped, what action do I want to do? What we've done is navigate two. Often we just go to another page. This is the one we want. We want to set a variable. This is where it gets a little weird. A couple of things happen. You've got this interaction. Can you see this little thing appears? So if you're borrowing somebody else's Figma file, one of the community files, and it's doing stuff, you're like, How the heck is it doing stuff. So just a prototype and see if you can work your way around and go, look, there's something going on here. And what I like to do is with this button selected, instead of working up here, I don't like it. It's too detached. I don't know why that exact same drop down if you do it over here feels more attached. It doesn't matter which way you do it. Button selected, click up here or go this option. Can't really see I have to move it up. Set a variable done that. What variable? Not the color stuff. Color stuff. I want the number stuff, that total thing. So what we've done so far is when it's clicked, set a variable of that color. What do I want to do with it? Okay? This is the expression. I want the total to be subtracted by one, and I just typed in one on my keyboard. You can type in, subtract, subtract. Actually, I don't want to subtract it. I want to pause. So it doesn't matter whether you type it in or you want to add, number one. Excellent. It's going to work. Hopefully. Let's prototype this. I'm going to click the frame, go here and let's get it going under the preview mode so we can see everything. Are you ready? Prepare matrix. We're coming for you. B bio. I love it so much. The problem is.dd dt. Don't go down. Cool. I love it. Let's do the exact same thing, but we'll get it to go down. So there's button here. What are we going to do? We need to make sure in prototype mode. What do we need to do? Prototype mode. In direction? What are we going to do? It might be on tap or on click. It doesn't matter, but I'm going to say on tap, what I want? When I said on click on tap, if it knows it's a mobile phone, it's going to tap because you don't click on a phone. You tap Okay if you're doing a desktop one, this all still works. But it'll say on click. Exactly the same thing. Under the actions here, I can say, I would like to set a variable like we did before. I like doing it down here though. What variable? Let's do the number. Scroll down. Oh, man. Can't see variable. I'd like to have done that one. This one here. What target? I'd like you to target the total, which is that number there. What I want you to do with them, I take the total and minus one. You're doing it. Grab the top. Let's go preview, and let's go up one and down one. Uh, down down down down down. Look at us. It's super simple, but I don't know. I like it. One thing I want to show you or remind you of is sometimes you do want to remove the targets as you say, Hue, break it. It's no longer going to be connected. Also, how do I make sure I can't see the variables. Where are they? Remember, they are under the prototype mode. The shortcut for that it is Alt on a PC option on a Mac, and it is eight and nine. Nine is prototype, eight is design. Toggle between those two, get used to that. And right at the other end of the keyboard, same key one and two toggles between assets and file. That's a handy way that I remember them. They're on each side of the UI, like eight and nine is on my keyboard and one and two is over here. Oh, it's got to hold down the optional Alki. All right. We made a variable. And it goes up and down. It's quite simple. I do like it. We will do more advanced thing because one of our problems right now is this guy does this. You probably did it. You're like, Ah. What happens if a checkout goes to negative seven? Do we pay them money? As in, Limerick Techno has to send you negative $7, negative second whatever the prices. It's something called variable conditions. We'll do that later in the course quite a bit later. So you can zoom up to that if you do want to just keep going now, but I think that's it. That is good for us getting started in this advanced course. Spend too much time in variables because there's a lot to it. There's a whole section on that later in the course, but I don't know. I want you to be proud if you've got it to work. We've made two different variables. We did the color one, and we did the number one. There are so many things you can do with it, and the cool thing about it is you can borrow other people's documents that have variables in them, and now you know how to go around and change them. Just make a little adjustments. Look at that. We be coders. I'll see you in the next video. I hope it doesn't make us do a class project. Yes. 32. Class Project 08 - Number Variables: Right, calm down. Calm down. It is class project time. You love it. Okay, I want you to create a cart. Actually, let's call it a shopping cart, even. Okay? And I want you to make the counter work. Exactly like we did in the last tutorial. Just make your own version. Okay, I've listed, make a number variable, make the plus and minus buttons work. So basically this. I want you to go to preview which is what Shift Spacebar, go to the right page. Shift Spacebar. And I want this to work up and down. Okay. What I also like you to do is design your checkout page. I've called it checkout. This is actually shopping cart. They're very different. We're not very different, but they're different parts of the flow shopping cart. Often, the checkout page is once you've confirmed that, you've got to put in your credit card details and things like your delivery address that happens after the car. I want you to design it up. I've done something very small, you can go further. The way I get inspiration is some of the new stuff is this here, Shift two. This is what I asked Figman to make using the AI features. I went to first draft and I said, Make me a checkout page, which is the wrong word. I should have said cart for an event site. I gave me the basics, and I just roughly copied it. I was like, image on that side, title. I use the smaller text for that, and then I use the buttons that are already made, get your inspiration. If you don't have the AI feature, there's plenty of places to get inspiration for free online, probably the best one is something called mob. Okay, mobin.com is what a lot of UX designers will use. It is a paid site. There are free options. You can use it for free, but you only get a certain amount of results. You can see here, I've typed in CRT and it's given me some cart options. Let's look at IOS to web. It is so good the site, but you got to pay for it. If you do use Mobin, you can follow me here. I am at BYOL on Mobin. Not sure why you would, but you're here. Other places, obviously dribble is a really good place. I typed in Shopping Cart. You can see here, these are ultra overdesigned. That is just a really cool design that somebody's use for their portfolio. You can do that totally as well. Sometimes when you are looking for stuff and you're like, make that work? Is that workable? Sometimes you can't, sometimes you can. Because who's selling that Nike helmet head thing? You got some boring thing you got to sell. But some of them are cool. Other places are things like I just Google UI inspiration for Shopping Cart, not checkout page because they're different. Let me show you. Shopping Cart, let's go checkout page. See, this is more like the finishing touch just before you hit the pay now. You've inted all the details. Let's have a look. Convert cart was one that popped up and they had a lot of inspiration in here. Obviously, things like Pintres Bhans Anywhere you go to find a shopping cart and get something going for your. Now, when you've got it working, this goes up, up, up, down down down. I'd love to see a video of it working, going up up up, down down down and publish that video on either your YouTube or Vumeo account and send us the link in the class projects. Otherwise, I will take a screenshot. So what I want you to do I want you to be in prototype mode so you can see these little guys, and I want you to pop open your actually go design, open variables, then go back to prototype and take a screenshot of this, so I can see the numbers, the value, or even better. Look at this. Showing you working. Screenshot of all that would be great. Loaded class files and feel awesome and advanced when you're using variables in your prototypes. Enjoy it. It might be a little frustrating. You might need to rewatch the last videos. If you've got any questions or you get lost, let me know in the comments. If you know what you're doing, check out the comments, see if you can help somebody else. I find it hard to get to all the questions, you could help me out. That is it. That is class project over. See you in the next video. 33. Class project 09 - Event Branding: Alright, it is super awesome class project time. I want you to make yourself a little logo that has a little icon. I want you to put it in find a status bar. Okay? That's this little thing on top here. I want you to pick some colors as well. Okay, that's the basics. The only other thing is the logo needs to have a light and dark mode. Ooh. I got a toggle switch. I'll show you how to do that in this video as well. So I want to go through it in a bit more detail, show you where to get colors, where to get icons. So there's a little bit of just talking. But the class project isn't particularly hard. Okay, Logo, colors, status bar, sand screen charts. Stump in. Where do you get your animal? It is from the Random Project generator. If you haven't gone and done that yet, go to the random project generator.com, and this is the one that I got. Okay, so I was Limerick Techno and my brand was a bird. You can design your own logo if you're ready to design a logo. Go do that. Otherwise, you can just use an icon like I did. Put it next to some text, add a status bar, make them components, and you're done. Oh, and pick colors. Let me go through it a bit more specifically. So where we go grab the brief, done. The logo. You can use free stock icons. Where I went is I went down to here. I looked at my plugins and I typed icon, and these change. The one I suggested in my earlier classes has gone. Icon eight is good, some are free, some are not. ConaPi is a good one as well. That's where I got this one from. I like that you go to bring it in, you can say, actually, 'cause I brought in one of these. And I want to show you some issues that you might get. Let's bring in this one. Okay? I get the height, the color. I can import it as a component. Oh, that kind of saves some time or as a frame and make a component yourself afterwards. Okay? Regardless, bring it in. And what you'll find is, even if it's on the page, sometimes it ends up being separate from it. Let's delete that again. I want to move my page up. So I'm right in the middle of my page right now, if I see the kiwi, I'm a New Zealander. Really wanted to use the Kiwis my bird. It's such an ugly shape. It's a football with the droopy bit. Yeah. What I really wanted to show you was, can you see it's ended up? Why can I see the name? Do you know? Pop quiz? You know. It's 'cause it's not actually in this frame. It just dumps it on top, okay? So it's just hanging out here right at the top of my layers. To get it into this frame, okay? I need to go out and then back in, no out. I'll leave you right there, let go, bring it back in. And now he'll automatically jump into this frame. One thing to notice. Sometimes as well, when you're scaling it, depending on how the icon was designed, you might need to use the scale tool, not the selection tool. Often the selection tool works, but sometimes a scale tool is needed if there are strokes in there because they might do some weird stuff. All right, you can hang out. Maybe we can use. Okay, so create a logo, real basic. Make sure your logo is a component and I want you to make a variant. I want you to make sure there's a light and a dark mode. We've done something very similar earlier on. We did variants. Where did we do it? Multi Dimensional Variant or any variant. We did it for the buttons, but you could totally do it for this because I want you to do is have this and go, Oh, light mode, dark mode, light mode, dark mode. So make sure it's a component. I've left mine on my components page. I got a light mode and a dark mode. I want you to see if you can get that variant going again. Not a variable, variant. The last thing on here is where are we? Second or last thing is pick some colors. I want at least a primary and secondary color. I've also picked a few other ones. I've got an accent color, sometimes called a tertiary color and then I've got a neutral light and a neutral dark. You're like, is that white and black? It's not. I've done it before where this is quite see it's not quite white. You can see the contrast there. I like that contrast between the two. Up to you whether you want to use pure white for all your colors or same with the black here. It's not quite black. How do you pick them? I've made a little color swatch you could use. So if you go to my figma.com at BYOL, you will find all my community files, and one of them is called neutral colors. Can you see here, they're all black and white, except I think this is the only black and white one. You can see I've stated warmer colors, they get a little bit red. There's a little bit different colors and then it gets cooler down the bottom here, you can pick your sets out of this if you want. I ended up picking these two for mine. Okay? They're warm. It's kind of what I'm going for for the rest of my color palette. Sometimes the cooler colors work better. You can make them up yourself. You don't have to grab mine. Actually, pause there. I will make it downloadable from the exercise files, and I'll call it neutral colors. You wait there. Actually, come along. You can save a local copy. Look, file, save local copy. This doesn't happen very much because it's very online kind of bit of software. But I'm going to put this in here for you. I'm going to get rid of the neutral colors, and you'll be able to open that up from your exercise files. I do have a link in the top of the exercise files for my community files, you'll go find it in here and you'll be able to open it up as. You. There you are. Neutral colors. It's me. All right. I said there's not much to do. It's a lot of explaining of what to do. Status Bar is the next one. I want you to go through and find the status bar, which is where I use Status bar, you are that thing at the top there. Okay? Find it for your particular design. Okay? So what I went is went to my home or if you're on the browser member, go to here and go to Files we want to be templates and tools. And up the top here, I want to type in they call it a status Bar. Status bar is the name of that thing along the top that has your battery and other things. So what you might do is status bar and then type in your if you're using iPhone 18, when are you doing this course or whatever it is, or if you want the Android one, just type it in. Currently at 16, and I just opened one. When I'm deciding, I'm looking at one. Often I pick the first one. Well it's got camera controls, with lots of likes and lots of downloads, and this one here was really good. Somebody made there it is there. And it's really good. Copy this, Dan, dummy, does make it easy. I just went copy and I went to my design, and I went paste the cool thing about it is whoever made this did the sweet thing that we just learned and they put variants in it. I was like, I has got a It does. Okay? It's got a light and dark toggle. Oh, look at that. So don't actually do anything on this. Thank you person who made this. Then she Herman definitely did that wrong. But thank you for that. The other thing that I'll do while I'm in here is you'll be like, the toggle switch, how do we do that? Okay, that's very easy. Let's go too. We're going off topic now because actually, let's just finish up. So done that. Deliverables, do a screenshot of your color choices, and the status bar at the top and your logo. That's what I want to see. And let us know if you designed your own logo. If it's fully custom, you've drew your own bird, let us know or whether it is a free icon that you've used. Maybe where you got it. All right, back to the switching thing. Let's go over here. Let's go, so components. Let's go the other way. I've got my logo here. I can right click it and go to main component, same same I'm in here and it's about the naming. If I go into this and if I open it up, I got the mode, and I've got values of light and dark. If you just call this one on and off, e's give it a go Look at this one, you see, it changes the mode from this. All you have to use is the word yes or no for the names. Or I think there's a couple other variations you can use. I think you can use, click on something, Dan, yes, no, no. That might make more sense in this case because we'll say, what's the default one? It is. Say dark mode. No, mode. Light mode. So now light mode? Yes, you're on Light Mode, which means it looks good on light screens. But if I turn light mode off, pop, it's in dark mode. It doesn't matter, but it looks cool. All right. That was longer than I thought. But there's some fun little projects in there, logo, colors at the status bar. Once you've done that, you don't need to upload this one to the social medias, just to the class projects, and yeah see in the next video. 34. How to create ux color variants using a Figma Widget: Hi, everyone. This video, we're going to look at color styles and making them automatically. Here, we need these primary and secondary swatches that we can pull from. Instead of trying to guess them and make them ourselves, we're going to use our plug in where we get to change the color and it goes through and makes all of the color styles for us. Ready to go into our Styles panel. Super easy, super quick, and super awesome. Oh, to find the widget, let's open up our actions. Command K or Control K. We'll just click the button, and we're going to type in color labels generator. It's now called Insert Color generator. Anyway, even if this is not here, you will find either color palette generator. There was another one that's pretty good. It's called foundations Color generator. That one's a little bit more hardcore up to you, but I like this one. To say that if you can't find this or it stops working and not supported anymore, there are others to go find. But the general process is the same. What we're going to do is we need to grab I'm going to grab my primary color. It is this one here, I four, seven, four, six B, and I'm going to type it in here. Make sure you keep the hash in there. I freaks out if there's no hash. Then nothing happens until you tab along, tab out of it or click out of it, and now I've got my color. What it's done is broken up that one color that I had into a bunch of different darker and lighter shades. We can name it. Case is going to be my primary hyphen color. If I tab out of that, it's gone for British spelling, okay? You can see they've named them really well. You might as well have to have an acronym for yours because if you're working on lots of different clients, you might have too many primary colors. Okay? Up to you. I'm gonna leave mine, just not confuse myself in this course, do that. And then they're all named nicely. Look at that. What we can do is say, actually, I want to save these styles. And this is where the cubit happens. You're like, Nothing cool happened. Ooh. But have nothing selected. Watch. If I go into it happen. Why? Let's try again. Click on this. Save styles. There there. I'm not sure what happened there. There there. Anyway, click it twice. I got my primary color. I'm going to get rid of that because that's not my primary color. I've got all of these. Why are they good? Obviously, they're just ready to go. I can go through and say, actually, I I'm making a card down here and I need to pick one of my colors. I can go color styles and go, Alright, I want it to be the 700. Awesome. What I tend to do, though, is often I don't have the full range. I don't use 50. This is up to you. I get rid of all the whole numbers as well. I get rid of 200, 400 whole numbers, even numbers. That's what I want to know. I just want these. It would be really typical to have these. If you're a bigger company, you'll have them all. I only tend to work on smaller projects, and if I need a 600, I can make it. It's not hard. Ba Na just got a tidier group. And the cool thing about it is this little plug in just hangs out. You don't need him anymore. You can delete him, okay? And your primi and colors don't go away. He is a plug in that just kind of hangs around until you don't need him anymore, okay? I'm going to do the rest of these. We'll do one more together, do we? I'll fast do them, and I'll stop if I get to something useful. Paste it in. Alright. I'll see you in a sec. Oh, yeah, paused. I know I I've done. I don't even need to check. So I went to this one, changed the color, you know, give it a primary color, went to this one, changed the color, just hit Save styles, and I didn't change the name I bet you now, if I have a look, primary color? Oh, it didn't override it. Maybe you gotta click it twice. But if I do hit this now, I'm going to replace my primary colors with this new one. So if I go to secondary, I want let's do this properly. Okay, you want that to be that. So it's the right ones, but I need to change this before I go any further. So this is going to be my secondary. Hit Enter. I'm gonna say Save styles hit twice because it didn't seem to work with. Go, they're in. All right. So our last one again, speed mode. Yeah. Okay. You said don't I'll override it. 100% overrode that secondary color. Back to speed mode. Alright, one thing I'll show you is that you see this looks very black on screen, but then once you get to these lighter colors, you can see there's a lot of warmness in the black that I picked. So I'm going to call it neutral and add that. I do have to click it twice. I don't know why. And for this one here, I don't really want versions of this. I'm just going to change the name of this to interface, and I'm just going to have one color for it. So I don't need to use this style thing. It's just going to be that color, so I'm going to say, let's go to this, I'm going to click add a style. I'm going to not be a variable. I'm going to go back to style. Well, that's confusing. Let's jump to the variable stuff we did earlier. I'm going to go style. The name of this one is going to be interface. Great style. Let's see what we got. Don't need you anymore. Think buddy. I'm just going to tidy them up in fast mode because it's just deleting a whole bunch of stuff. Watch this. If you want the 50, you can keep the 50. If you want all of them, keep all of them. There's no real rules. What I like to do is make sure that these are in order. The one colors that are on their own have to be at the top. These groups here, just say if you made them in different orders, you can move primarily to be the top if it wasn't before, awesome. The other thing I like to do is when I am, say, coloring something, let's say, a draw a box or a frame, and I'm going to say, you are going to be this swatch color. Instead of having to go through them all, which is quite long, you can just up here, it says search Type 500. Okay, then it'll give you the 500 of all of these because you know you want the 500 color. Let's say you want the darkest version of the color. Okay, you can go through and just pick this one. When they're dark, actually, they all look quite similar. So yeah, that's a handy one. 500 and I'm going to use you. All right. That is creating color variants inside of Figma using widget. Doesn't have to be that widget. Remember, a lot of other people use what that one called foundations. It's very cool as well. Kind of does it a little differently. I prefer this one. You might find your own one that you really like. All right, my friends. That is it. I'll see you in the next video. 35. Grid v Constraints v Autolayout- Which one to use and when?: Talk about grids, constraints, and or louts, when you'd use them, what they used for, and when you'd use them, how I use them in my design flow, which are more important, which I start with, which I don't do right until the end, and some of them that I don't use much at all, just so that you get a better sense of what all these things do and how they interact. It's a waffly one. Get ready for the waffle. Right, let's jump in. All right, so quick recap Autolayouts. These are just bits of text lying around. Auto outs are great. You slick them all and go Shift A. They are now Auto lout. The way Auto outs work is they work on the internals in here. They make it responsive. But to the things inside of my Auto out. Just means I can grab this, move it over here, I can grab login and throw it in here. I can change to the text, and it reflows. That's an auto out. A constraint is the outside of the box. It's still responsiveness, but in here, if I bring it into this desktop, the moment it's trying to go from the top and it's sticking to the default, which is left. But if I go over here and say, my friend, are sticking to the right. It means that when I go in here and I say, I need you to resize, it'll resize and be all responsive. So it's the outside of the box. Now, the last one is grids or layout guides, or columns. The call layout guide here. I've got three columns made on mine. I'm going to turn it to make these properly later on. But I've got columns. These are just useful for consistency across pages. I want the margins to be the same on both sides instead of trying to guess it or draw the magic box. If you've ever drawn that you move it around to line things up. You want consistency in your margins and your columns. You turn your layout guide on, and that helps us with responsiveness. How does it help responsiveness? It's good for just lining things up. It becomes good for responsiveness. If I actually, let's throw this one here the card. This is an order out I made earlier. I go, All right, snap into the side. We're doing. That's handy enough. But if I make another one, I'm now working on my tablet. And I need it to be smaller, I'll watch what's going to happen. It follows our columns. We don't have to drag it in and then find our columns and made it back up. The reason that is a combination. It's an Atoout the first thing we talked about. It's constraints. The second thing we talked about, watch this if I drag it in you'll see look he's in there. It's constraining, but not to the full size of the page. If you have columns enabled, it will say, I'm just going here. If you don't have any columns, it'll try and use the side of the page. You'll see it's both on the side as well. I've got this Auto out set to both left and right. So that when I go down to tablet, it does this. I can do the same thing when I go down to mobile. Those are the three areas Auto out constraints and guides. I want to show you when I use them because that's important. I'm showing you everything in this course. I want to let you know which gets used more often because there's a third option or fourth option. There is the do nothing option. So much of my work is a mockup that requires no Auto outs, no constraints, and no grids. Then I'll use a grid. Let me just talk about when I use them the most. I end up using probably the guides the most because I want consistency when I'm designing and I want margins and I want it to snap to it. Even if I plan on doing nothing, my first level is do nothing, don't have anything. Draw it all out and often I can get to my developer without anything else. Just frames on the page, nothing is responsive, and we've worked together so long, he doesn't need to see it, move around. We're not doing any testing with users on different phones, actually, just a bunch of squares with images all lined up. But for my own sake, I'll often have guides on just so that the consistency across pages. I don't want it to be a little bit this way on that page and then a little bit further over on this one, I want consistency. The next thing I'd use is the Auto out. Auto outs are handy. They're really easy to make and I can switch things around and I can retype things, especially things like buttons. Do we have a button on here that's Auto Layout? Probably not. Maybe on this. How I test my courses test the video before I do it with you. Do we have a button? There you go. This is Auto out button, you can see how useful that is. I'll probably do the buttons. It becomes really useful when you are doing this thing here. Let's go to this one. Audiots I use quite a bit when I'm going, All right, I've got this cool thing. Okay, but I need a bunch of them. I'm going to go up, duplicate, duplicate, duplicate, Okay? I'm gonna stick them all on auto Out, then I get to go up over there, over there. You can see how quick and easy it is. But at the first stage when I'm designing this thing, it's never an auto outut. I just design it to make it look, and then once I've got to do heaps of them, then I'll turn it into autolou and start messing around with them. Alright, what else? Last one says constraints. Constraints are useful when you need to. Let's say you got something relatively complex or at least you know that the developers could interpret your design a few different ways. You're like, no, no, no, definitely needs to do this. Let's go to our card, shift one, zoom out and everything. Have we got a card? Let's say this one here. I want him to know that that sticks in the top right hand corner and doesn't just stay there. Okay, I needed to know that happens. That's kind of a simple example, but you get what I mean? Like, I don't want it to break onto one line. I want it to stay a square. I want it to be in the top right, so I can build a prototype that is draggable and squishable. It's really hard to explain sometimes, you know, like, Hey, the green box in the top right hand corner, when it goes into tablet mode, I want it to stick to the top, left and right of the image, but ignoring you end up with this, like, I'll just show you, you end up using constraints. Becomes even more important when you are working in a larger team and handing files off that are going to be reused. You don't want to leave them up to them so that it comes back and it's like, we leave it up to the team, and if I go to my main component and this thing here, you know, they've kind of, like, got it here. You know, you can just easily add a constraint so it sticks to where it is so that all the rest of the team can use it the way it's meant to. Right. That's like I don't know. Is it useful? It's a wrap up of where I use all of these things we're talking about, how important they are, and when they appear in my design process. But so much of it is just a frame with some text in it, and it all looks like it's going to be responsive, but I don't do it because I'm working with somebody that I've worked with before. They know how we deal with stuff on our website so they don't need a fancy auto out. All right. That is it. I will see you in the next video. Hopefully that was helpful. 36. How to add rows and column grids to one layout in Figma: Hi, everyone. In this video, we are going to put stripes on a document. Looks like where's Wally. You might call it Where's Waldo, the same guy. What we're really going to be doing is adding more than one layout grid. We're going to add our columns like we've done, but we're going to add rose this time and we're going to explain why we bother with this eight pixel grid. A will be revealed in a boring way. Some of you will love this, some of you wonder why anybody cares. I care. So let's go do it. All right. Let's add our first one. The one I start with most of the time is I'm going to kill my parent frame, and I'm going to go to Lou Guide, and I'm going to add one that is a column, especially when I'm working on mobile, often I'll just work with one because I really want this thing just for the margin. Remember, work in multiples of eight if you can, so I want probably 24. The cool thing about that, is that all done? All good? Is that now I can go through and just make sure I'm lining everything up, making sure everything is snapping, everything is consistent. I want this to be over here. And the other thing we might do while I'm here is to make sure it's consistent. Can you see it is snapping to the right but not, it's got left and right turned on. Excellent. If it doesn't, you can go over here and say be left and right so that it will attach itself to the column. We've already done that. Where this gets extra cool is when we add rows as well. Let's click on the parent frame. Let's go down to my layout guide and we can add more than one. Set plus. Now we've got the first one and this new one called grid eight point. Want that I want rose in here with a count, you can switch that to Auto and it will actually, let's have a look. Let's go to five. You can see by default, rows work like columns. It's not what I want. So I'm going to cut that. Can you see there's one, two, three, four, five. With rows, by default, it's set to stretch. You can see it does that. It's not what I want. I want consistent regular spacing. What I'm going to do is go over here, change my rows to B. Set it to Auto. Then it says stretch, I don't want to stretch, I want to start at the top, and then I want to come down eight is really good. Four is better for this layout, gives you a bit more control. You can see I've got little eight points and a gutter in between them of 20. I just want to be four and four. I get this kind of stripy pole thing, barbershop pole candy. I keep saying Whiz Wally. You might call it whiz Waldo. Same, same. Okay, so I've got this. That's all I need. And what we can do is the cool thing about that now is we can go through and say, actually, mine lined up perfectly already, but your dragging of my top nave here will actually snap to these multiple. I got this in the right spot, snap to the edge. Let's have a look. I'm going to paste in the other lets do this bottom one. Where did he land up? Everything's lining up, but you might find yours is halfway between. Now mine's lining up. Excellent. I'm going to paste that stuff back in. Where'd you go? This is where it gets really interesting. Type is great when using this four pixel high. You can see here it's snapping to the bottom. Great, so I can get the type to line up with this grid. What's really good about it is and grab this and say, actually, I want you. Can you see on the bottom here? It's snapping to that grid, and then you can see on this one, it's not. You're like, H I want this to be consistent. I love my grids. Why aren't they gridding? This one here is not lined up with the red line, neither is this one. What you need to do is make sure whatever font you're using, you need to make sure that the line height is divisible by eight. What I'm going to do is actually make my font size divisible by eight. You don't have to, but I'm not sure why it was at 17. Then here when it comes to height, probably want it to be 24. What will happen is because our grid is divisible by eight, this here should be the same. In the first one up the all should go in line up. You're like, I don't cure. That's all right. You don't have to cure. But the nice thing about it is I can say, I want to minus eight from it, for the line height, and it will all still line up with your grid. You got to decide how important grids are to you. You might not use it for fonts, but it's definitely good when you are using things like images. Can you see this one here? He's not even there. Now it's lined up. Consistent spacing is one of those things where you can tell somebody who's maybe a junior designer and a senior designer when you start caring about not just things lining up, but things lining up consistency across pages. That's too tight. You can do let's go plus four. I can line it up and you can see, Look, ah, it's consistent. It's probably what I want to 20. Remember, Shift G to turn it on, Shift G to turn it off. That is how you add more than one layout guide to document and why. And you'll stumble across people doing this, you'll be like, why is it all stripy? Why would anybody care? It's 'cause we care about consistency and layout, composition. Yes, it's too far away. Oh, but look because I got the grid on, I get to snap it to stuff that feels right. Look, those are four lines apart. So are these. Nice. Alright, that is it. I'll see in the next video. 37. How to Create & Update Layout Guide Styles for Columns & Rows in Figma: One, we're going to look at making a grid style and updating a grid style in this video. Let's get going. Let's get styling. Let's start with a shortcut. G, turns the guides on and off. Let's say that I've spent some time getting this one. I want to put it over here. I'm going to first go to this one and say, get rid of you. I want to grab this one. What you can do is you can click. Remember, this weird little area. Shift, grab the other one underneath it. In this little empty area here, go copy, click the name of this one, and maybe we click the name of this one, hit Paste. It doesn't work. Why doesn't it work? Because this one's got already something applied. Yeah. You can't have more than two of the same thing applied. But I can place it to two of them. I just got to clear them out. Cool. Obviously, that's the long way of doing it. What I want to do is turn it into a style. I'm going to have this selected, I'm going to go down to the one that I've made and go to this little Stars panel and I'm going to say I want to add a style. I'm going to give this a name. I'm going to call this one mobile. I'm going to call this one column, one coal and five pick or rows. Okay, give it a name that you're going to use or recognize, and I'm going to create a style. Again, you can add a description. Now I can go to these. And actually, instead of trying to do the quicky copy and paste, I'm going to say, I'm going to add the style that I made called mobile. There you go. Now updating it. Let's say that your style, say you want to change this one. You could go into here and break it and try and make a new one and then paste it on everything else. What you can do is you can go nothing selected and you will find your styles like everything else in your design panel down the bottom here. You can go to the edit. You can go in here and say, actually, I want this to have a grid as well. You can see it's added a third one. We've got a grid and rows and columns. Or you might decide that you just want to edit the rows. You've decided you're going to use eight pixels. Zero. I'm going to go back, but that's how you do it. Bricking it. That's how you make and edit a style, in particular, a layout guide style. All right, my friend, that is it. You're all styled up. Looking good. I'll see you in the next video. 38. Animation with custom easing in Figma: Hi, everyone. In this video, we are going to do custom easing. We're going to make our own where we get to do nice things. Instead of the defaults, it might look like all the rest of them, but we made that custom. I'll show you. It's this kind of easing where we get to play around with the ease and do whatever we want. Mostly make it worse but sometimes make it better. Let's jump in. First up, I've got an empty frame, not an empty frame. A frame that I've drawn that's meant to be a ticket, looks like a flag. If you want to see how I do these things, you can hang we've done most of it before. What we came here for is custom easing. I need to have two frames. I'm just going to hit Command D, Control D on a PC. Animation one now I've got animation two. What I need to do is these need to be different. I want to start this off on the side here. We first of all, I'm going to group it. Group that. Now, this is an interesting thing, watch. This is called group two now because I just grouped it. Slick it all went Command G or Control D on a PC or you can right click it. This one here, if I group it, same thing. What ended up happening. It's called group three. Animations don't work. When their names are different. This is different from that. I can do one of two things. I could group it before I duplicated this frame, that would work. Or I can just make sure they've both got the same name. If your animation is not working, check that the names are same across both animations. Co. Next thing I want to do is drag, it's going to start off screen and then come on screen. Now, what's going to happen here? It's going to jump outside of my animation. I don't want it to be outside of it. It needs to be still inside of it, but out, who remembers what the shortcut is? That's right. Bit confusing. You start dragging, then hold Spacebar, and it will come out to the outside over here. You can hold Spacebar and shift, and it will go on a straight. Very many shortcuts and now it should work. We just need to add the transition between the two pages. Let's click on this one. Let's switch to prototype. You can either click the button or remember the shortcut. You remember now it is option nine, eight, nine, eight, nine, or Alt, eight, nine, nine gets your prototype, eight gets you back to design. Know you know. All right. We're going to click and drag this. We're going to say on tap. Sure. Navigate to that page. Great. The animation is going to be Smart dissolve and we're going to use let's just start with I like in and out. Looks good. Let's click off. Let's preview it. Another thing we're going to do is if your flow didn't appear here, let's say that flows no longer there. Get rid of it. You can click on this first one because otherwise, if you start prototyping, it's going to go off and prototype the first page in the document, which is not where we're at. Especially when you're getting a bigger document like we've got, you're like, the you. You can say you are going to be start at flowing point. There? Now it's really simple, just click on that button. No shortcuts, no nothing. Cool. I said, What do we got to do? Nothing's happening, Dan. Why? Because we said on tap, we tap and there it is there. We got a basic animation, but we want to make a custom animation. We're going to click on this. This thing can be moved. It's always in the wrong spot for me, but you can drag the top of it around. We're going to switch it from the curve being something pre made to custom bezier. This is your bezier curve, and it will look different from mine depending on what your first one. This is in and out. That's what it looks like. If I go to say ease in, and then back to custom bezier, that's what ESN looks like. We're customizing something we've already picked. It might be straight. If it is straight, it means it looks like this, so it's linear. Then I go back into custom, it's like, it's all gone. Let me quickly explain what we're going on is you can click these points and drag them anywhere. If you've already got something dragged out, you can drag this little handle here and just move that around. You can have two of them. Okay, let's do something crazy and let's do this. You can drag them all sorts of weird places. Let's go like that. Let's see what our animation is going to do. So I'm going at the little play button and click once weird. You can do all sorts of cool stuff. The main ones that you're going to use Yk is this S curve is what looks nice. This is what in and out is, but in and out is really subtle. It's like this and that. I like grabbing it in and out and making it even further myself. So it's like this. It's going super slow at the beginning, super fast in the middle, super slow at the end. The default one in there is just really subtle. I like to max it out. How long is this going to take? We'll make it take half a second. How many hundreds of milliseconds? That's right, 500. 1,000 is a second, 500 is half of that, so half a second. Let's go here. Let's preview, click once. It's nice, isn't it? I got quite fast in the middle there and nice easing. You're like, I missed it, Dan. Member archy we'll reset it, click again. Nice. I do like going over the top of the premade ones if you're like, I can't tell the difference. Don't bother doing custom busier because it is such a small thing. Let's look at a couple of things. I just want to explain it to you. So let's go to Esn and let's go back to custom. What's happening is so hard to get your head around it. But if you draw yourself a little graph, time movement. Is that the X? We're going to see the X along the bottom is time, and this is the movement. So if I do this, which is Es in's happening is over time, let's say halfway through the time here that it's allowed, which is half a second, let's just make it a second. Just make easy mass so that time here 0 seconds, that is zero, and that is 1 second. So what you'll see is halfway through the time, it's done very little movement. You see it? This is the movement all the way from where we started it all the way over here. So if we draw a little line here, we go up here for half my second, it's done very little of the actual movement. So it has to do it all at the end. So this last half of the second, it moves a huge chunk. That's why it's called ease in. It's going to go slow slow slow so f. Let's give it a little preview. It's helpful Alright. Um see, super slow at the beginning, super fast at the end. The opposite to that is E's out. I switched Ease out so that I can then show you custom bezier up. It's just the opposite. If I extend it just to accentuate it a little bit more, after half a second, if you go up here, look and try and find it where it meets, you can see it's almost finished at half a second. The rest of the second is going super slow because it's like, I've got half a second to get this last part of the movement done. Sense. Dan waving his mouse around. If you don't know, jiggle them around, preview them. You'll get a sense time movement. It looks really good. You can actually double click these things and they go away. What looks really good is this S curve. This one here, you might know it from other programs. We use a lot in Photoshop and all sorts of photo editing for the curves. That looks good. Then it's just picking the right time. You can just drag this. Why is it not dragging? Used to be able to. I bet you you'll be able to do it. Some reason mine today is not doing. So I'm going to turn mine down to 750. Let's give it a go, preview, click it. Look at our customss. All right. Let's keep going with our animation. So it. That's the custom easing. You can move on if that is it, but if you want to hang around, we'll do a little bit more animation, and I'll show you how I drew this. I'm going to click on this and go Command D. If you accidentally hit Shift D anytime you're like, What's going on? Have you already been here? You're in developer mode. Okay? This is the big scary mode. We'll cover a bit of it later on, but go back over here to design. Okay? So command or Control D to du I want to do is when it gets to here, I want it to wait for a little bit and then it off into the distance. I'm going to click click on my ticket, start dragging, hold Spacebar and shift, it goes off here. What I might do as well is click on this and turn off the clip contents. It's still go off, but at least I can see it. Same with this one here. It's a bit hard. You're like, Where is it? I know it's over here somewhere where I can say, let's turn the clip contents off. It doesn't change my animation, just makes it a little easier to work with. All right, so now I need to say you are going to have prototyping option nine. I'm going to go, go to here. It's going to try and remember stuff, but I don't want it to go on tap. I want it to hang around for a bit. After a delay of yeah, now it's working. Look. Now I want to type on it. Wait, let me type. All right. It's doing some weird stuff. Yeah, so let's go what? After that much time. It doesn't matter. Go to the page. Instant. No, I wanted to do Smart animate still, and I'm going to get it to leave it as the default. Let's give it a preview first. So let's go up. Click at once. After a delay, it's going to head off. Let's do another custom easing. Okay? So instead of ease out, I'm going to go down to custom. That up. What I want to do is I want it to start slow. That means I'm going to click and drag that out. I'm going to start slow. Over time, it's not going to be doing a whole lot because I'm going to drag it this way. Slow to start with and I'm going to get it too. Actually, what I want to do is go backwards a little bit. It's called anticipation. Leans back before it goes forwards. We all do it when we walk. Nobody just starts walking forwards. We all put our weight on the back of our feet, like hunchback. It's great for type and tickets, and what I might do is just go like this. A little bit of timing. I don't know exactly what this should be. How long should it take? That long. Let's give it a go. Yep, click once. It's gonna wait a bit, and then it's going to go backwards. Alright, so that didn't work. Let's click on it again, and there is a lot of this. I never do animations enough to go, Oh, I know exactly what it needs to be. Okay. Let's click on this one here. That one was just too jittery, so I'm going to try and stretch it out. So it's taking a long time to get going forward, then it's going to take off, and I probably need more overall time. But again, that kind of comes with experience. You'll be terrible for a long time. Do get better, though. Click once, wait, forwards, backwards. Oh, it was almost this. It's kind of good, right? It's just a little bit slow. A little bit faster. Alright, so let's go and have a look. What would I change here? Pro's zooming. It's got the right back. I think maybe just a little bit faster timing. Not too much different because I want it to start zooming. Maybe that in a little bit. All right, so let's go. Last time. This is it, whatever it is, I'm going to leave you then enough. It's not got right. We're going to leave it because you can mess around that for ages. Last thing I'm going to do is I'm going to go to this and turn the clip contents off under design, remember, Option or Alt eight. Back to design. I'm going to say clip contents just because he's in the way over there and I'll move him and stuff. So now I can get this guy in. I just made him off screen. What I want from this one is I want to say Option or Alt nine. I'm going to say you go to here, and I'm just going to do never see a custom bezier work when you do a dissolve because I just wanted to dissolve to it. You can mess around with the custom Besier all you like, or even play around with these. You just don't notice them. Whatever you pick in and out, you just don't notice it. I've said that 1 million times. It's true. You that way, did I put a timer on it? Didn't way to click. The default was on click. I'm going to say you are not on tap. Remember, it's on tap if you're using a mobile device and it knows it, it's on click if it's using something other than a mobile, clearly a mobile phone does the same thing. I'm going to say on after delay of, I'm probably going to go down to zero. You can't have zero actually only point can only have one millisecond. All right. Let's go. Preview look at us. We made some stuff with custom easing. Now, let's build a ticket just real quick. Actually, the one thing to remind you, if something's not working, we talked about it at the beginning of the end, but if I made this number three, and I did the exact same animation, watch like once. I just ignores all my animation because it can't tie them together and doesn't know what to do because this is not the same as this. It goes, Well, you've got nowhere to go and you just magically appear group three. I'm just going to get you to fade in by default. If you've got things fading in instead of moving, it's chicken naming. It's generally always the problem. Only other problem is that this might end up, f drag it now, he's still inside of it. But if I drag that out, we know that even though we think it might be trying to go up there, it's outside of my animation to frame. He's just hanging out up there by himself. You just need to make sure that when you are dragging them out, let's say this, you're holding that space bar key down while you're dragging it so that it doesn't leave the frame, even though it looks like it. Confusing people, Dan. How did I build this? Okay? I want to show you this because now everyone's on the essentials course. So I'm going to start with a rectangle. Okay, I'm gonna draw this out. I am going to switch back to design mode, which is option or Alt eight, okay? I'm going to give it a fill color for my styles. Let's make a different colored one. 500. You can move on. I'm just designing this now. I want the Oki for the circle, hold shift to get a perfect circle. Don't care what color it is. I'm going to do. Let's do two for this one, because we are exciting. 12 grab another one over here. Okay, we're going to use the draw tools. Does anybody remember how to use those circles to slice it out? It is tricky. We got to move to the draw tool. We're on the draw tool, and still there's not the option here. I always want to go until I'm like, What is the What is it called? Shape Builder. That's the tool. So with the selected, like Where's the shape Builder I thought it was here. You got to flatten it first, then the Shape Builder appears. It's MK. M yeah, K. Oh, I know. You're like, still not there down. I've smushed this into a vector. That's what I did when I flattened it. The moment, there are a whole bunch of different layers. I said flatten into one vector. Smush. It's one vector. It's still not there. If you double click it to go inside, triple click it to go inside, you're inside that vector and you get given the tool that we want. The Shape Builder. Often what I do is I flatten it, then just hit the MK. I want to get rid of stuff. To get rid, if I want to add these, I drag across. If I want to remove them, I hold down the option KOACOh KPC and go. I'm just dragging across them. You can click them as well. There's a line in there I want to get rid of. So that's my ticket. The star is easy. The line. Actually, the star just so you know, is under the star. Okay? Drag it out. Holding Shift, holding shift, and I'm going to stylize my one. Okay. And I want the dotted line. I'm going to use the Al key for the line tool. I'm going to draw a line down, hold shift, so it goes strict. I'm going to make sure the weight is up. I'm going to drag it up to something that I like. Now, the dotted line is hiding under width profile? No, these dotted lines, yeah. So this little settings, you can say style. I want to be dashed. What kind of dashing do we want? I like the rounded one, okay? No cap. Okay? It's normally called. Which one's called, they don't call them in this one. Illustrated they call them but caps, which I love the name of. These are just rounded caps. Because I'm 12, we're going to do the dash cap round. Yours might be looking a bit weird. You got to play around with the dashes and the gaps. The dashes for me need to be smaller, not 23, three, and the gap, I want to be ten. You just play around with the sizes. Get it how you want. Alright, those lines. They're pretty cool, huh? Same thing. Line two, draw out a line. Okay, I'm going to pack with, and I'm going to go to this width profile. Drop that down. Not that one. We're going to go to the settings again, and we're going to go to not Width profile, we're going to go to brushes. Going to go to basic, we're going to go to brush. And I'm going to say, I like that brush. Brushes are in here. The ones that I found, I can't remember which one I used. Please hold that one there, I think. Now, what you can do is I hate I don't know, when strokes are all the same. I spend a lot of time. I'm going to duplicate that a few times. I spend a bit of time going, Alright, I want you to you can flip the direction, so that one's different. I can make this one a bit longer, grab the little dot there, drag longer. Okay? This one here is going to be flipped. It's going to be a little bit this way and it's going to be a teeny, one degree off. I don't know. I spend a lot of time doing things that nobody cares about. Alright. I'll get a jump cut there because I spend ages getting the right angle on that. So yes, I got some randomness. There you go. That is my ticket. Like the first one more. But anyway, What did we come here for, Dan? We came here for custom easing. That is easy. I wanted to kind of jump in here and remind people some of the quirks of breaking your animations because everyone's got different levels of skills with their current prototyping animations and show you how to build a card. A really ugly one. I'll see you in the next video. 39. Class project 10 - Check Out Animation: All right. It's class project. Want you make your own checkout animation. You've been asked to create a success animation after somebody buys a ticket. They put in the credit card details, they hit submit, that's from there is what I want you to do. We did something similar in the last video. I just mocked one up. Is this one here? Somebody bought a ticket and it appears, and there you go. I want you to make your own. Really what we're doing here is I want you to practice with cust so make three or more frames for your animation. It can be simple, it can be advanced. You can have tick marks and animation going everywhere up to you. Once you've finished, I want you to share a video of your animation and upload the length of the class projects. Alternatively, if you're the videos are just killing me, you can just do a screenshot in prototype mode so I can see all your wires. But I'd love to see the video. Share on social media if you do the video as well. Tag me. I love seeing what everyone's first success animations look like. They can be very serious. They don't have to be though. Enjoy the class project. Make sure you play around with the custom easing. Often you can make it look worse, but that's okay. We're playing around with that setting. After that, I will see you in the next video. 40. How to copy and paste Interactions in Figma: Hi there. This video, we're going to look at copying and pasting interactions. You spend a lot of time doing them. The shortcut is just pick on the needle copy it and paste it. There are some little things that we've got to fix up, so we'll work through it together. But you came here just for that, it's all you do. Select them, copy and paste them. But let's go into a smidgy bit more detail. Okay, so this will work with any animation or interaction. What I've got is, let me preview it. It's just this moves to the next one. What I've done is I've spent a lot of time working around with things like look my own custom easing already custom ease in and out. I've gone from animation. Instead of instant or dissolve or smart animate, I'm moving it in and move in we scroll to the bottom there. If you hover above it, can you see it just pushes one frame down from the next. You've got it coming from the top so I've done a lot of work. What I want to do is not have to do that for every single one. Okay, what I can do is I've done it there's two ways. I can click on this wire here or noodle, and just go Command or Control C, just a regular old copy, and then I can say, paste it works. I undo, you can do it to all of these. And you. Boom, you've got it all. It's done all of it except one thing wrong. What we did is if I undo it all and this one here has got the interaction of saying it's doing all of this, but it says navigate to animation five. I don't know how to get it to go to next rather than five because if I paste it on this, this guy goes back to himself because he is five. I have to say, actually, not to five. Go to that one. Anything else comes along though, all that customizing, the move, all the timing you've done. Same with this one, paste, you do have to do a little bit of Sometimes these noodles get cross noodles. Never want to cross noodle. Click on the heading at the top here, be on prototype mode. Remember, option eight, Altate. No, it's nine. It was a test. I can say, actually, instead of going to five, let's go two. What is the next one? Seven. There you go. Now it should work. Let's go. Oop. A, the pacing. Tonight is the night. It's a bit slow. Something's weird about it anyway. But that's the tip. You can do it another way. I used to do it this way. I just want to show you, let's say, I want to copy everything from this. I like to show you this two ways just because some things are weird. You don't click on this because it opens it. All you want to do is click on this little weird area here, pop that is selected. I can just go use my regular copy, then I can go and say, paste, but go there. It doesn't really matter. That's a nice easy one. Copying and pasting interactions inside Figma. That's it. Next video. 41. Animation inside Variants in Figma: One. In this video, we're going to look at adding animation. Instead of using the frame by frame method that we have done previously and that a lot of people do, we're going to do it like this. You can actually animate between variants and get the same thing. So that animation replaces all of that. We get to use it just as a little units. See this little guy here, let's preview him. It's all happening inside of that guy. Cool e. Oh, even a button. We'll do a button that even moves in. You can see the same thing. It is just a component sets two variants in there. Top one you can't see at the bottom one you can and be impressed by the very average animation. Both the button, button button. All right, could be better. But it's cool and it is really handy, tidy up our animations. No more thousand frames to animate simple things. All right. Let's jump in. Okay, so I'm in prototype mode, option or Alt nine. You can see I've made this earlier where we've done this kind of step by step frame by frame animation. A lot of people do this, you can do it, but obviously, it's messy, right? So let's give it a quick preview to see what we've made. Does this. We're going to do something slightly different. We're going to get the text just appear. But instead of having to jump across frames, we'll do it all in a variants. Let's start by W should we do it over here. I'm going to go back to design. Option or Alt eight. I'm going to go over here. And we're going to turn it into a component option K or Control Alt K. It's a component. I want variants. So I'm going to do one, two, three, four. That didn't work. You can only click it once. Then I'm going to go. What did I click on smashing way at all the buttons. All right. Let's go back, undo, undo and do. Head variants, don't click anything else. I'm going to duplicate this, clicked it. I've got four words. Tonight is the night. I'm just going to change the text and the colors. You wait there, we'll go to speed mode. That's all I've done. Next thing I want to do is I can actually use prototype like we did here. Remember, we clicked on this, we said prototype mode, optional lt nine and we dragged noodle between the two. You can actually do it between variants inside of this component set. You can say, actually, make sure you in prototype mode, to zoom a little bit. You can actually drag a noodle from here to this guy. I want to do is not on tap, I want to say after a delay of some seconds. I wanted to change to this other variants, which is called Variant two. We'll get it to ease in. I'm not too worried, how long is going to take? I don't know. For some reason, I can't click in mine now. It's a bug. If I rease that figment it comes back to life. But anyway, just so you know, sometimes figma is a bit weird. I really want to type it in. But anyway, we have got that. So I think that's going to work. After a time delay, change to this smart anime. We could actually get this to dissolve if we wanted to. It's not a problem. Alright, let's give this one to go. Track this one down. Didn't remember it all. It remembered some of it, but it wants to do on tap now. I'm going to say after a delay of something down here and we really want to type it in. Everything else is perfect. This gives me a good excuse to use the copy and paste. I'm going to click on the noodle, copy it, go to this one, go paste. It's going to try and go back to itself, but it's going to go there after delay, that should all be good. Partly there. It's just like animating between frames. We're just doing it here within this component set between variants. Lots of words? What I'm going to do is going to create a new frame for this. Actually, I will make it iPhone six. Eteen. You can come over here how messy our uppud is. Let's pick a background color. Option eight, Alt eight, go back to design, and I'm going to pick actually one on these and I want one of the dark colors. 900 of any of these really. Let's grab an instance of this, drag it out. I'm holding on the option CaCl PC or you can copy and paste it out. Now, the cool thing about it, this has the animation built in. This can go on my components page. I don't need that junk. Let's prove it works first. Let's go to you and let's say Shift Space bar for the preview. Tonight is the night. It needs to be faster, but you get the idea. What's really cool about it is that we can actually do more than let's have a look. What we've been limited to, especially in this one here, the timing between pages is all the same. If I want something to appear, let's say, let's do it in this one to give you an instance. I'm just going to use a blank frame with a color in your color. As long as it's some variation of, you got it. I've got this. I need it to be copy, I want it to be on all of these frames. But I want the timing to be different. Let's say I want it to start coming from this side, go to the middle and then head down to the bottom and come back up. I have to do whatever timing I've done for the ticket. I'm going to switch to prototype mode. Whatever I've decided on this will affect every single thing on that page. Let's give it a preview. Click once that moves in. Can you see that they're exactly the same? Why didn't the last one go anywhere? This one here, it's called frame 22. What is this one call? Frame 22? It's because the transition between here is a fade. It all makes sense. But you get the idea, the timing is all the same. That's where this becomes handy. Let's undo that. Let me do more for instance. I've got this setup down the bottom. I've made AI background using 80s computer stuff. Don't worry about the text. Let's look at the button. If I was going to do this, I'm going to preview it, Shift Spacebar. Can you see the button appears and comes up. That's how you build it, right? You have two separate frames and you animate between them. But say you want the text to come down, but at a different timing, you can't because the text has to do exactly the same thing as the button. So the way to get around that is to build exactly like we did before, build everything into its own little animation. I want to do another one just to kind of, I don't know, make it clear. 'cause I'm going to delete that actually, and let's bring in my assets. I've got credit in this file under components. Whereas M didn't give it a name, did I? What is it called? I can't remember. What are we doing? Where is it? Here it is here. Let's copy that. Switch back to design mode. Oh, it's not in the components page. That's why I couldn't find it. There it is. Hanging out there. It's anyway. So I've got this on here, Shift Spacef for a preview. It's doing its own little animation, and the cool thing about it is I can say you get to do your own thing. Let's build its own thing. A couple of things I want to do in this case is I don't want it to be Auto out because I want the text to move in the text is stuck in the middle as an autolout I'm going to we looked at this before we said remove all autolouts. Awesome. I got a button with some texts on it. Nothing's are autow. What I want to do is select both of them. Let's make it a component, command shift, command shift, K, control shift K. No, that opens up command option K or Control Alt K. Now it's component. Excellent. Let's add a variable. In this bottom variable, I'm going to actually grab the components and just make it a bit bigger. I've got some space. I want the text inside of here to move down a bit. Remember not out. I just holding down space bar so that it moves down because what I want, oh, I want the other way around. So I want to start with it off. I'm going to say you come down here. You can just use your rakeys if you like. So first, he's going to start down, then he's going to appear. Let's give this a go, switch to prototype mode, option nine, Alt, nine. You're sick of that. Let's drag that across. We want to say on tap, no, just after some delay of no delay, change to this one. Let's smart animate it. Perfect. We get it to ease in. That should work. Okay. This should go onto our components page. I just going to put it over there, let's grab a version of it. Okay. Now the cool thing about it is they are doing different things. This is doing what? Fade. This one's doing some movement at different times. Here to go, shift, Spacebar They all start at the same time. But you see this is still going. This one here is finished. What I might do as well, is this one here, I might after a bigger delay, I might say delay. Let's do a delay of how long does that take? We might get it close to when that thing is finished. You can do all these custom animations now. You just need to tie the animations into a variant. Do them over here, then stack them onto a page. You can see how much nicer it is. Just one page and your animations are separate. Let's give it a preview. Still too long, but you get the idea. You can start building these things up and let's go one. Let's go for way too long now. And then wait Oh. I hope it proved a point because it's not very exciting. But hopefully you get the idea. It is tricky, I just got used to doing it this way. But you can see that to do this whole thing would have to have this plus that starting afterwards. In this case, all we've got the whole thing, my whole bit of animation is this. You come down. Go, go, go. So that is all they need instead of a bunch of frames. If you're like, too freaky, I'm going to do 1,000 frames, do a 1,000 frames. That's okay. Again, I guess it's the advanced course, we want to get into advanced stuff. You'll find stuff in the community be heck is this made? Now, you can have animations inside of here. You've got to switch to prototype mode. Otherwise you'll never see them. Last thing, go back to design mode. Option eight, old eight. Let's get this to resize around just so it's a little bit tidier. That's it. I will see you the next video. 42. Class Project 11 - Variant Animation: One, it's time for you to give it a try. It's class project number 11. It is Variant animation, I want you to build a button. You can be exactly like I just did. We just did together, or you can build your own. It's this where there's something happening with the button. There it is. My invention loaded. You can get yours to do anything you like. But I want to make sure you are just practicing using the animation within a variant. Remember, component set has variants inside of it. I want you to do the animation between these two. Just remember when you are doing it, switch to prototype mode. I'd love to see animation or a video of yours. If you want to do the type as well, totally do that up to you. Really, what I want from the tutoria is for you to build your own variant animation. So have a look at the requirements. So you've been asked to make an animated button, you just got to use the variants inside of your component sent to do the animation. Share a video, upload it to the class projects, and if you can't do videos, don't worry, do a screenshot of showing your wires. Can't really check it, but I'd love to see it. If you do do the video version, share it on social media, make sure you tag me. I'd love to see what you're doing. And if anybody asks, you're doing that super awesome class with Dan, bring your own laptop. You should check it out. Something like that. All right, enjoy the class project. I'll see you in the next video. 43. Houdini Text: How to make a text mask animation Figma?: Hi, everyone. In this video, we're going to do this. Houdini Text. Look at the comes from nowhere. We're going to do the animation. It's basically going to rely on two main things. We're going to be doing animation inside of a variant, which we just did, and we're going to add a mask to it because we're awesome and it's advanced. If you do find this one tricky, this is in the like, Oh, my God, this is really tricky camp. I totally understand. We're combining a few things. Some of you will get it, some of you will take it. You'll get there. Alright, let's jump in. Okay. Just start off. We've got two bits of text. They're just plain old text. They're in separate boxes because I want to animate them separately. But they can be any kind of text or font. And the next thing I'm going to do is I need to mask them. So we need to grab something to mask them with. I'm going to use a rectangle tool. You could use a frame. You can use all sorts of shapes. I'm going to use the rectangle tool. I cover it up. You need to make sure it covers the text. And we're going to need two of them. So I'm going to duplicate that one and use it to cover it. And this is where command or control Y is handy. Maybe that's outline view. Okay? We can kind of check to see is it completely. Which is awesome. Next, the text needs to be on the top. I'm going to grab on that one and that one. I'm holding Shift to connect them both and I'm going to use my square bracket just to push it to the back. Or you can drag them in the layers panel. You just need to make sure that your text is on top of your rectangle. Okay, so I need these two now. I'm going to drag a box around them both. I need them both selected. Let's turn them into a mask. There was a shortcut command option. No, command control. I never use it. I don't know how that's in my brain. It's easier just to be on design and to go, there's an option up here, use mask or you can right click it. It is on a PC, that is a good question. You'll have to go up to the top there and check it. I'm sorry. Or just go here and right click it and it says, use a mask and you'll see there on a PC, what the shortcut is. I can't remember. All right, so the mask. What's happened now is nothing really, except as mask group. Can you see? There's a mask group. There's text inside of it, and there's the rectangle giving the mask. That's how these are set up. What you can do is you can grab Viva la. You can type in whatever you want, obviously, and you can move the text down. You can see it is mask. Okay. What happens often in class is that some people accidentally grab the whole group, not the text on its own and try to move it down. It doesn't work. Just go to make sure you click on fever, whatever the text is and move that down. The other thing is that it can jump out. It can jump out of the mask if you drag it too far. Who remembers what you hold down? You remember, have the text selected, start dragging and then hold down, say far. Then you can move it down and it will stay inside the mask, but be hidden. Remember, commodo control, why? You can't see it in that view. Good work. It doesn't matter. Let's undo it anyway. We've got our masks going, mask Group one, mask group two. The text is in it. Now what we're going to do is just grab them both and start over here. It's easier. Because I've got three stages. It needs to be completely disappeared. Then Viva needs to appear, and then Techno. There's three levels. You could just do it with one Houdini Text. I don't know why in this course, I decided to do it with two B it's the advanced course. We're doing it in advanced. So let's make it component. Okay, Command Shift K, Control Shift K, that opens up image input. Combine option K. I do it all day long. Yeah, Combine option K on a Mac. Control lk on a PC. We just colick the button up there. It's a component. Let's give it a bitter name. Okay, let's call this one. Title animation. One, and we are going to duplicate it a few times. We need variants. We're going to say one variant, and then we're going to say U, duplicate, which is Command or Control D with three variants. This one here needs to be completely disappeared. This is where we're going to double click to go in or go inside your mask group and click on Viva. So you want to get to this level like we did before and then drag it down, drag it down. You can use your rakes. Hold shift in the rakes. That works too. Or double click to grab the word techno and drag it down holding the Spacebkey. I'll shift as well, so go straight. Okay, so this one, the first variant can't be seen, and then the next one, I want just Viva la to appear. Techno needs to go away. So I'm going to click on, keep double clicking until I find my text, drag that down. I find the rakes much easier. Okay, can't be seen. Now I can see this first line. I can see them both. Let's get them animating together. We're going to go to option nine or just go to your prototype up here. I'm going to drag a box of you go there. What I'd like you to do is on tap. No, I want you to say after a little bit of delay of how long, one millisecond, straightaway, I'd like you to change it to variant to. Cool. Let's use Smart animate if it's not set to that already, what I'm going to use ease out back only because it can't be seen at the beginning. It's going to ease up and do a little can. About then, don't know. Let's give it a test. Do the same thing for this. I'm going to say you have the same animation. It brings some of it across. After delay, Zuk has it done any of the other ones? It's remembered all of this stuff. That's all good. Let's give it a whirl. All right. We're not going to test the actual components yet. We're going to grab an instance of our component. The problem with it is it's blank. Showing me my first instance, which is a bit of a pain. But anyway, we get the idea. I've got it somewhere here. Let's give the frame a selection. Let's go to Schiff Space Bar to do a little preview. Oh, look at us. At a repeat. We're animating geniuses. Awesome. I love it. Okay? So if you do want to do texts like this, the big thing is, remember, is to make sure you're dragging the text out, not the masking group, that causes people problems. The other thing is that if you really watch this, let's deal with this one here. So if I want this animation, let's go this variants, and it's going to after delay, it's going to change. It's using Ease out and back. If I go to my own custom Bezier, you see, that's what Ease out looks like. It's going to go ease up this way and then go over where it should and then come back. If you want to really max that out, it will work. Let's give it a preview. I'll show you what happens. Shift spacebh space bar. You see it went up? Let's repeat it. Let's watch the word techno. It went up and got lost. It's just because our mask isn't big enough. If I go into this and let's go to Command, why? What happens is it goes up and there's my mask. You see it there, where is my mask, the rectangle. It goes there and it goes up and above that. You just going to make sure that is actually a lot bigger than it needs to be. Just got space for the techno to go up into. Confusing little bit. Give it a preview. If you're already blown away by this one, it's okay. This is a tricky one. Masks plus custom easing. We're doing animations inside variants. You're doing hard core stuff. If your mind is a bit frezzled, that's okay. But can you see the techno had room to go up into that mask now? The mask kind of clips off here, and if you want to go further, you have to make the mask higher and higher and. You get the idea. Alright, buddies. We did it. Who did you text? All right, that is it. I will see you in the next video. 44. Spring Animation & Overlays in Figma: Hi, everyone. In this video, we're going to do this. Ready, set Bio. Okay, we're going to learn a couple of things. We're going to do a reminder of what an overlay is from the Essentials course, which is a good reminder. But also, really? Boy. Okay, we're going to make the little navigation bump up be all springy. It's called a spring easing, and let's do it now inside of Figma. Well, I want to make the noise again. One more time. Boo. Alright, let's do it. All right, to start with. You can start with a fresh page and you don't have to use your nap. Anything can be bouncy or sprung. Okay so I'm just going to go back to the beginning here and I'm going to put it on this. I'm going to use my Nav that I made earlier on. So I'm gonna go to my Assets panel, and I'm going to find the components, and there's my Okay, so I'm going to use this. It's going to start off the screen because we're going to be doing an overlay. What I'm going to say is this page here, I'm in prototype. I'm going to say go to this page. I want to make sure after a delay of how long? I don't know, but I want a little bit of a delay. 0.3 of a second, I would like to go to this, but I don't I want it to not navigate to. I want it to be open overlay. It's going to open an overlay. What is it going to open? It's going to open up this my Nav bottom. We centered? No, I want to be bottom center. I would like it to not be instant. I want to move in from the bottom. Okay, and this is where the springs are. So these are we've been using so far. Spring is these ones at the bottom here. You can do a custom one as well. Let's have a look at it. Can you see, it's just a really different looking arc than what we had with some of these custom beziers, okay? Spring goes past where it needs to be and kind of comes backwards until it eventually stops. You can have a look. Bouncy is the most obvious one, okay? You can see it down here. It's very cool. You can play around with the other ones, very similar, more subtle. All right, make it work, Dan. Does it actually work? Let's click on this guy, give it a preview, shift Spacebar and Boon. I love it. Arthur reset or replay. Ah. Hey, your own sound effects, I do like it. Let's quickly look at just the setting. I'm going to look at prototype. Option nine, 09. I'm going to click on this, drag it up. Bouncy is the most obvious one. These are all just less of it. They're not different. They're just this is really extreme. These are just a little bit subtle. What we can do is custom spring and like we did with the other custom easing, what you'll find is you can drag these things around. Times it's easier though, just to play around with the stiffness, dampening and mass. Mass is how heavy this thing feels. It does change the timing. If I say I want the mass to be up, I'm going to click hold and drag it that way. It's not let me drag hold on my option key or if it does. You see, I'm dragging it out. Now it's 6 seconds or 8 seconds, you can see how much heavier this thing feels like. Because it's heavier. With a low, it is too light. Let's put it to one. Okay. And that's kind of a nice. So just play around with it, know that you might end up breaking this. If I turn it up to four, okay? It's kind of heavy. Let's look at dampening. Dampening is if I have no dampening, let's go. It's just go to really be really rebounding. What's this? Jump, jump, junk hun. It might not ever stop look It's playing for, like, a minute, 4 minutes. It's never going to stop bouncing. Okay? So that'll work. Let's go to this, but it's going to be one, interesting, not very useful. Phone animation. You will break it. And when you do, you need to go in here and say, actually, you are going to go down to 1 second again. 1 second. Dampening back to what was it? No one. I can't remember what the default was. Actually, let's just go back to bouncy and then go back to custom spring and we've reset. Stiffness. Let's do one more. I'll look at stiffness and leave dampening alone. So how stiff the spring is. Let's make it more stiff. Let's go up to 3,000, okay? It's heavy, but it's got a really stiff spring. All right, you get the idea. That is an overlay and an overlay that has this spring easing applied to it. Have a play around with the other ones gentle, quick, bouncy, work on your sound effects, Bo I'll see you in the next video. Bye. 45. Class Project 12 - Houdini Text Animation: All right. I want you to make your own Houdini Text animation. Doesn't have to be exactly like mine. I just want type Houdini and using masks, like we've done in the previous tutorials. I want you to use the spring animation. So practice with those and share a video if you can. If not, share a screenshot and upload it to the class projects. I'd love to see it on social media, just a reminder, I can't get to all of everybody's projects. The only way this works is if you do upload yours to the class projects, is to have a look at two others and leave a comment. It doesn't need to be Okay. But just something often what's really works well is a compliment, something they might want to try next, followed by a compliment. Call it the **** sandwich, but there's probably a more call it actually, I can't think of another word. It's a great name for it. Okay? So start off with something you like about it, something that they might try. And what you'll find is you become a bitter designer, being able to express yourself via text, and it comes down to practice. So I want you to go out and if you upload one, comment on two other people's. That way we get a lot of comments going. You get to practice. People get to practice criticizing your work, be respectful. Make the sandwich. All right. Have fun making the Houdini Text. It is tricky. Let me know in the comments if you do run into trouble, if you're running into trouble, hopefully somebody might have solved it in the comments. All right. I'll see you in the next video once you've done the Houdini Text. All right. Bye. 46. Why is interaction on tap on click grayed out or missing in Figma?: A Hi, everyone. In this video, we're going to look at why sometimes the on tap is grade out or on click is grade out, and we'll also reiterate why sometimes it says on tap and sometimes it says on click. I'm just saying on tap on click, the same. Let's look at it in a little bit more detail. Let's start with on tap on click. I'm going to grab one of my buttons from my library, and I'm going to switch to prototype mode, Alt or Option nine, I'm going to say, you go here. I'm going to scroll to the top says on tap. O tap, go to this page. Excellent. I grab my frame tool and go down here and say, I want a nice big frame called MacBook ear Okay. Still with the name iPhone 16. Ignore that. It's just repeating what it was up here, let's give scrab that same button, which button I grabbed and now back to prototype mode. I'm going to say, go there when you clicked. Let's have a look. It has said on tap still. You're like, that's not a phone. It's a website, should be on click. What's happened is if I click on the frame, and I go up to here and I say the prototype settings, it's used the document one, which is iPhone 16. I can say, actually this is now ScquScroll MacBook Air, which is a laptop, which we click on. A click on the button, it's exact same thing, but it's called click. This one over here is now on click as well. We've changed the prototype for this file to be now a laptop. Let's give it a preview and can see, it's previewed and bounced in using a laptop, the MacBook here. They do the exact same thing. It doesn't matter. If you're following somebody's tutor and they're like, now I use the on tap and you're like, I don't have it. I have OnClick. Same same except under prototyped prototype settings, on this prototype settings, it is set to either probably sometimes it can be set to nothing in here or custom. I'm going to go back to iPhone something or other just so I get my on tap again. The other one I wanted to show you on tap, sometimes you don't have it. It's grade out. I'm going to click on this noodle here. Sometimes you get to the top of this and you're like, it won't let you pick it at all, it's grade out. It is when you've got more than one applied. I do this all the time and then freak out, freak out, but search my brain to figure out why say that I've got this. I'm like, I want you to go here. I got the top here. I'm like, I wanted to be on tap it's great out. It's great out because you've already got something applied. I'm going to apply on drag. That's cool. I've got two things applied to it. You can't have two on taps because it doesn't know where to go. If I need this one to be on tap, I need to grab this one and just hit Delete. Now I can go back to this one and at the top here on tap will be back. There you go. That is it. On click is for previewing on a laptop or a desktop, that's under prototype settings or have nothing selected when you're in prototype mode, or an on tap is because you're on some mobile device or iPad. There you go. They're all the same. I'll see you in the next video. 47. Ai Add Interactions Automatically in Figma: One, in this video, we are going to let the robots do all of the interactions and prototyping. We're going to go click one button, and it's going to go from this to bam, this, there's more. There's noodles everywhere, and I didn't do any of it. It went and said, A, the heart button goes to favorites and this By now button should go to the cart, all automatically using the robots. All right let's jump in. Okay, so what I've done is I've created a new page, as we've been working on this. Stay messy. Made a new page, Okay hit plus, made a page called directions. I just copied bits and pieces over and just made this little hodgepodge. Okay, I just grabbed the genres page and put my Nav back in. The Watsa page is exactly what's on, and it's exactly how it was on the other document. I created this new one called Favorites gave it a title and same with the shopping cart, brought it over from the other dock. They all share the same navigation that we built earlier. Thing if you are following along is check in prototype mode to see whether there's any interactions currently on it. Under prototype, you can see I've just removed any that I did have it's all clean because we want the AI to do the job. And let's give it a go. First thing I'm going to do is I'm going to go to my assets and add a couple of buttons. The buttons, it's pretty smart. It's going to get smarter. This button obviously, the word button is not good. I'm going to add the word. What's on? I'm going to use that button again and maybe I'm going to just put another one here. Give me a button. Got to get to design mode. You can do a little bit of editing in prototype. I go there, come out, cut, and you can go on here. Co. This guy is going to be not what's on. Let's go say Bye now. Bye, purchase. Anyway. We'll see it works for some things and not for others. All right. All we do is select everything. Actually, you don't even have to be in prototype mode. You just go in here and say, type in this ad interactions. It's AI, so it'll be a paid feature. Click on it, sit back and see what it does. What's doing stuff. Noodles going everywhere. Let's see what it did. Did we accept it? I keep have a look. So, that's good. Look. What's on. I'm in prototype mode. You can see the What's on went to the What's on page. I didn't do anything. I think what it's doing is it's looking at the text here and looks at either the heading or the frame. I don't know, it's magic. Let's have a look. Did the BioNw button going in here? By went to the cart. That was a cool one because I didn't write shopping cart, but it knew that the shopping cart is connected to the Bynw button. Now one I really like is see this heart here, goes to the favorites page, and it's on all of them. Look, the heart, if I click, let's prototype it actually, you'll see make it smaller that the heart goes to favorites. Ticketing goes to the By now page, heart goes there, it's good. It doesn't know where this goes for good reason. The search. Oh, that works. Okay? That looks like a searchy page. I don't know. Genres, I guess, I'm pretty amazed, that you can kind of get started that way. Yeah, say, add some interactions, AI and somehow connects most of it up. How much time is it saving you? I don't know. Is. Depends on how big your project is. I'm impressed by it, so I thought I'd share. It doesn't work as well when you have a messy old under files, thing like this because you can do it. But, wow, it's probably going to go nuts just because we've left this quite messy. Mainly because it's tutorial. We have a lot of iPhone 16 ones and variable one, two, and three. But anyway, I'm impressed. You'd be impressed. That is it. Thank you, robots. Everyone be kind to the robots just in case. All right. Next video. 48. Create & remove bulk multiple noodles wires at once in Figma: Hello. Do you have noodle problems? You have two knee noodles. A noodles going everywhere, or you need to update one thing and you need them all to be done at once. You need to bulk add this button down to our ejector seat. Let me show you how to bulk add and bulk remove. Let's call them wires noodles sounds funny. Alright, let's go. Alright, so I've just added a button to all the pages real simple. What you can do, the easiest way is to shift, click them all, and then go to prototyping mode, which is option nine, you know that, I know you know that. Grab one of them and watch what happens. They all come along for the ride. That's a good way of just bulk doing them all. You can make all the changes, and that will work all for one. You can also do it when I'm going to get rid of that, remove all of those. If this is, I make it a component, and then I use instances of this on all the pages. You go there, put them at the top. I'm going to copy them, and paste them because they're all instances of this main one, what you can do is you can say, you go to the Eject page and you'll find that all these little buddies all go as well. That. Any trouble happens with this method is if this undo that. Undo it until it's gone. Gone. If this frame here is rightly so on a components page. This thing here, you can't say, right, I want you to go to an interaction on click I want you to go to Navigate two. You can't at the moment, at least, go to another page. You can only go to frames that are on this current page, so it's not going to work. I have to go through and select them all and move them down. Sometimes they are hard to get this one's ended up inside of this frame. So if I want to select them all, sometimes shift clicking them can be tricky. What you can do is with one selected, go down to your quick actions or Command or Control and go select and just work out which one of these might be right. Select with the same properties works great for this one. I'm in prototype. I'm going to say any one of these guys, go down there. Excellent. Going to be a missing now, we're going to do is remove all of the interactions. Say you've got it from someone else or you've created your own mess, it's community file. You have nothing selected and then make sure you're in prototype. Right click and say remove all interactions. You can do it per frame. You can click on the frame, right click it and say remove all. If you can find it, please hold processing. There it is right down the bottom, remove all actions just for that one page. But I'm going to do it for all of the page to tidy it up. Because what I want to show you as well is select all properties work for this one. I went to do the same thing for this and I went, Command or Control K, let's go Select All same properties, perfect. He has it got. I decided that decided all of this was the same properties. There's a lot. So you can go in and just try something else. Command, select, and there is spouse select right. Wh are we going to go? Have a look down here. There's a same matching layers. All right, that worked. We've got all the matching layers selected. Now we can do that. It's a good way of diving into these things that are quite complicated and updating them all at once. Look at us. We're advanced and we made it an ejector seat. I did use the AI and I said, type in a graphic designer. Ah. He's definitely an accountant with a graphic design sign. It's pretty cool, though. Alright, that is it. That is bulk editing and bulk removing of the noodles. Bye. 49. How to make sticky scroll position search bar in Figma: Hi, everyone. In this video, we're going to look at making things sticky. We're going to scroll up and watch the search bar is going to get stuck there. Everything's going to scroll behind him. We'll make the top and bottom UA elements fixed as well, but we really came here for the stickiness, scrolls up for a bit and then gets jammed at the top. All right let's jump in. All right. The first thing you need is I've just created a real basic search page, just designed a circle with the icon in it. So nothing fancy about that. I created a list. In this list, the important thing is that it needs to go off the page, so it won't scroll. There's nothing to scroll two. So first of all, let's give it a preview. Let's click on this, click on the parent frame, shift Spacebar and I'm wiggling my little finger on the old scroll wheel, no scrolling at the moment. We need to turn that on. Got the parent selected on my own prototype, you can see here. What do you do with the overflow? I'd like it to scroll vertically, please. Now I can give it a preview and I can scroll. I scrolls not exactly what we want that guy to be sticky. What we might do is before that is because I want this to stay at the top as well. We've done this before. I want to say not scroll with parent. I don't want you to just stay fixed there, please. I'm going to make sure it's at the top of my layer stack, and I'm going to say preview again, this one, now scroll up you can see that thing stays at the top. But I want the search to get jammed up here at the top, not disappear because I want it to be always there. Oh, what we're going to do is going to click on you and we're going to say, Hey, I would like you to not scroll the parent, I want you to be not fixed like we do the top Nav, we are doing sticky. He stop at top edge, and it's going to work. Let's go you preview, scroll, scroll, scroll. What's happening is it is sticking, but it's hidden behind this, it goes up, and gets jammed at the top. He is there just underneath this. So we need to do is a little bit of padding. With this, this happens to be an auto out, so I'm going to design. Can go to my padding and crank it up. The problem is it did that. I spent some time getting this all looking good. Yours might work, but I've done some stuff with my order layers to make it all nice. What we need to do is this guy here is going to stick him in a frame, make it an auto layout, put a parent wrapper over the top of it and put painting on that we don't mess with all this goodness we've made. Let's right click and go frame selection. I'm going to convert it into an Aoout. And all I did was basically grab my search bar, put it in a frame, give it the great name of 22, and then convert it to Aolout. I do that only because I want to add some padding to it. I'm going to padding at the top. Okay? At that much. I have no idea and move this back up. Hopefully, you kind of see what it's going to do. That top edge. What's going to butt up against the top? We need to be a bit more. Ok. Alright, let's give it a preview. Click on this one. Okay, I'm going to scroll up. Oop. Working. Oh, I know why. We're like, Well, it was meant to stick to the top. Dan said it was sticking to the top of four. Why is it not now? We did it to this. We cracked on the search bar. We went to prototype, and we said, Alright sticky at the top. But then we made this other frame around it, called it frame 22, and this doesn't have it applied. So whatever bottom of this pile, we can't add stickiness to this or that or that. It has to be whatever is at this base level. What I mean? In terms of the hierarchy? I want to say frame 22. Scroll parent? No, I want you to be sticky at the top. Now let's give it a go. It's space bar. Groll up. Come up, scroll up. And it doesn't it doesn't really work, does it? Let's do this, Dan, where I move this down a bit. And now let's get it to work. Let's go sug space bar, click on him. Watch this. It's going to scroll to the top and then get stuck. Co. He goes to the top and then stays persistent. Any problem with it is the layer order. So I'm going to say you are at the top using my last square bracket or the second one. Let's give it another preview on you, go up and it's going to go scroll, scroll, scroll, boop, get stuck and goes behind. Cool. Okay, so you can get it, so it sticks to wherever the padding is. So sometimes you just need to wrap it up in a frame, make it and oil it out, add some padding to everything inside of it, gets a bit of padding on it. One thing we need to do is you also need to be probably just fixed. You see fixed over here in your layers. Can you see fixed is being bumped out to the top. So there's things that scroll and there's things that are fixed. It's an easy way to see what's doing what, and the fixed stuff is on top. Let's give it another go. Last one, scroll scroll scroll you can do it with multiple headings. Let's do this. Is a good kind of reminder. Okay, let's say we've got a hitting here, we want to get to the top and but up against it. What we need to do is make sure it's on its own box. We need to add the padding to it. So I'm going to add an auto layout to this thing. I'm going to say, you have some padding at the top. How much about that? Actually, no, I need it to huge, don't I? Okay, let's grab it because it's going to stop at the top of the page. It's about you see what I'm doing here? I'm kind of grabbing you and going, All right, you're going to stop about there. So I need to be smaller padding, but maybe that. Let's give that a go. We just need to say prototype, scroll the parent. No, One should be sticky at the top edge. You're making it more confusing, Dan. No. We see how we go. Scroll, and the search bar stops, and then, he stops too low. Less padding. Does Dan even know what he's doing? Just give that to go, preview, scroll scroll scroll. That's better. Go. You can get another heading to stick underneath this one and just do it for the search bar. Cause maybe just trying to stack them can get a little confusing. Things that you need to remember is that if you want padding, it has to be an auto out. And often it's easier just to put its own, put a frame around it, and turn that into an auto out. The other thing you need to do is make sure that you have stuff going off the page. I see my students just kind of there's nothing to scroll, too, so it doesn't really matter what you turn on. It won't scroll, so you need junk coming off the bottom. The other thing is, click the parent frame under prototype. The scroll behavior needs to be vertical, and the thing that you want sticking at the top needs to be hanging out in the bottom of the hierarchy here, not kind of three or four deep in this big layer structure. Selected, you go to sticky. That is it. I'm not sure if I made that thing harder to learn or easier to learn, but there you go. That's what happened. All right. I'll see you in the next video. 50. How to make Horizontal Scrolling Swipe in Figma: I Hello, there. This video, we're going to make this. We're going to do some horizontal scrolling. We're going to make some reviews and get them to scroll this way, like a little carousel. Very cool. Called horizontal scrolling. I'll show you how to do it inside of Figma. To get started, I just made a card, generic review card. What I want to do is on, get it going. You can do it with anything, just a plain old frame. I just want to do it really simply. I'm going to do with this because it looks cool. What we're going to do is first of all we need this to be, we need a few of them to come off the page. Now, you can remember start dragging and hold down spacebar, start getting them across or with this one selected here, C D? Across. He's come out. Let's just pretend it's going to come out because you will do that by accident. I'm going to DDD. I got a few of them. What I want to say is before I get started is these are actually not on this frame to actually scroll. I need to make sure you and you. These guys aren't on the frame. This first guy is frame 23. Good work, Dan. Actually, no, it' called B review. So I'm going to drag it down to be with his buddies. You go there. Now they're all on the page. Up to you, click the parent frame and you can go to design and you can decide whether you want to clip contents or not. It doesn't matter. Looks different. Let's give it a go. I always preview as I go. Shift space bar, and you can see no scrolling. All we need to do is say, reviews page. Let's switch to prototype. Option on nine, you'll get sick of that to it's in there, isn't it? Let's go to overflow. Horizontal. It's not what I want. I'm just thinking now. I don't want this whole thing to flow. I just want this, and this is all of these guys. I want these to be in their own frame, all these buying reviews to be in their own frame and we'll get that to scroll, not the parent. That's the big thing here. We don't want the whole screen to flow. I will. It's good to go. Quick horizontal I'm going to say preview' preview, and the whole thing will. The whole thing does. The problem will be because those are fixed if I add a title here. If I add some text down here. Let's have a look. Let's click on, preview on this betterw. There's a V there. It's going horribly wrong. U, V, go away. Click on you, preview. If I scroll, the whole thing scrolls. I don't want this to scroll and I don't want the reviews to scroll. I don't want the whole frame scrolling. That's what I was trying to explain. Come on, Dan. What I want is this. All of these guys need to be in their own frame. It can be an auto lout, can be a frame, doesn't matter. I'm going to go Shift A for Autout. Just get the spacing all good, make sure they're inside reviews frame. Now I do it to this. Instead of call frame 24, let's call this review scroll. That selected, I want to be able to not know scroll, I want to go vertical or horizontal. I can never remember. I think it's horizontal, but I got to think about it. Come on, Brain, let's give that a go. Let's preview him. Now, can you see, what's going on here? It's working. All right, let's figure out what went wrong. That should just work. Should be scrolling horizontally. Just clicking and dragging, not working. All right. Let me show you how I break things down. First of all, I saw something underneath. Yeah, what are you doing there? You're there. Yeah, I get rid of you. Don't need you. Let's give it a preview again. Scrolling along. Okay. So that there is scrolling horizontally. Should be Oh. I know what it is. It's the key thing for this whole course. Again, pretending like I meant to do it is that this frame here needs to be clipped in. We've got this parent frame that we've applied the scroll is all the way out here. What we need to do is have somewhere for it to scroll. We need to drag it up. The frame, this parent frame with all these guys inside, this frame can actually be smaller. It can be smaller. Normally, we just keep them the same size. But we can say, actually, you're a smaller little window into the world, and we can under design, go to clip contents so we can't see it. That explains it bit better. The parent frame is a little bit smaller, so there's stuff to scroll in here. Now let's give it a go. Please work. It's working. We can do this scroll. Obviously, testing on your phone with your finger is better. You go. There's horizontal scrolls. One thing I'm going to need to do is the parent needs to be a bit wider because the drop shadows are clipped off, and I'm just going to say, let's go to alignment, top left, go now should be even better. I can see my drop shadows there, you can see, Yeah, it's perfect. All right. So key takeaways, you need to make sure that everything you want to horizontally scroll goes off the screen and that it's apparent frame or autouthever it is, that auto layout or frame needs to be set to horizontal scroll and the parent frame needs to be the same size as your mobile device. And it doesn't matter, but you can say, under design, clip contents to see them all. That should work. Next thing I want to do is I want to grab you and do AI stuff. Rewrite this. We're done now. I'm just showing you some cool stuff that I like to do with some of the AI things, I'm going to say reviews and just hit what was it Command Enter or Control Enter. Look at it. Just goes through and changes all these, doesn't do the images right now, and you can use AI to do them. Problem with that is they take a while to make. I often use Command or Control K for my shortcuts, I'll use content R. OtentRal is a really cool plug in or widget. You might go there and find it. It's really handy for lots of things. Let's say that I just because what I want is I don't need it to be AI generated. It's going to go to advertise and click Min. Same with can I do multiples? I'm pretty sure I can. I can say you guys are all just that didn't work. I can click on you. I'm holding the command key on Control key on a PC and shift at the same time, and you can click on these and it just goes through and puts generic placeholder images in now. They're not AI generated, they're just predefined ones. You see they've got 1,700 of them. Same thing if we had full names. If you needed a list of full names, you can use AI stuff. If you don't have access to it because you're on the free account. What you can do is hold Commander Shift or Control Shift PC. Grab all of these and you can say, give me some full names. Then you can click it again. Give me some different names. There's a bunch of stuff in here that is like that. You can work your way through, and yeah it's useful. I'm going to undo because I want my back, and that'll do. Does it still work? There's always the fun thing after you've messed around with it. It still works. Look at that. We're geniuses. All right. That is it. I'm going to turn my little clip contents on, so it tidies it up and I'm going to see you in the next video. Actually, one last thing is Command Y, control y is you can go to Outline View if you do need to see stuff. You're like, I need to see all of those things. You're like, What is all that? Actually, what is all that? It's the scroll from this page. Does this page even scroll? I bet it doesn't? It does. We still need to fix the top anyway, getting distracted. We did horizontal scrolling, and we're awesome. I'll see your awesome self in the next video. 51. Class Project 13 - Horizontal Scroll: All right. It is lucky number 13. I want you to make your own horizontal scroll, make a review card, be simple, can be complex, up to you and I just want you to make the review scroll horizontally on your device. Basically just this, What we did in the last video. Make your own version, and I'd love to see a video, otherwise, take a screenshot of it, partly scrolled across. I know you can fake it. That's not what we're here for. We're here for getting better and these practice exercises. I bet you if you're doing them, you feel more bitter. And that's it. Upload it to the assignment section. I've taken off the share on social media. If it's boring, don't share it. If you've put a little bit of work into it, you're like, cool. Share it, please. I love to see it. This bit here is the paully named Take a screenshot of Your preview partly scrolled. That's what I mean, moved over a little bit. Right, but I'd love to see a video. Upload it to the class projects. This one is easy but also very technical. You've got to do all the things right. So you might have to rewatch the video to see where you went wrong. It's probably most of the time I see people having problems is when they forget to make do everything else right, but the frame that this is all in needs to get a bit smaller. All right. Have fun. See if you can make it happen. See you in the next video. I've had coffee. Can you tell? All right, next video. 52. Automatic scroll down the page to anchor point in Figma: Hello. In this video, we are going to make buttons that scroll down on the page that we're working on even really long ways down the page. You can see it here. It's not separate frames. It's just scrolling down within that one frame plus, we'll throw in how to make a hyperlink. Go out to a website. It's easy and at the same time, a little bit quirky. Let me show you all the quirks. To get started, all I've done is created an event page with a bit more detail, the name of the gig. I've got some buttons here. They're just auto layouts with some texts in them. You can actually do this with anything and I've got some stuff we want to scroll so, it's pretty easy. Let's switch to what we're going to do switch to prototype. Option nine, Alt line on a PC. That's the last time I'm going to say that. You probably like stop at 50 something videos. It's enough. What we're going to do is under prototype, we're going to go date. Where are you going to go? You're going to go down here. It's pretty much that simple. It will automatically be smart enough to say on tap, scroll two. If it doesn't, you can force it to go. It's going to scroll to that ayerchord date. You can see it there in my Layers panel. Now, where it says animation, Instant is the standard one that you'll get. Let's give this a preview. Shift Space Bar, that's the last time I'm going to say that one tool date and it jumps down to date. Go. A date. What we'll do now is make it a little nicer. With the noodle selected, let's go down to animate and I'm going to use ease in and out feels good. Then how fast is it going to go? I like to speed it up. It's going to take longer, so I want the higher number. That's going to take a second, 1.1 seconds. Again, somehow I can't click online. So let's go Shift, not going to say it anymore. Let's go to date. Look, it scrolls down all nicely. Let's do the rest of them, and I'll show you where the next problem you bump into. Venue going to get down to venue and always test, keep testing. Never think you're going to do 1,000 things and then hopefully it'll all be fine and you're not sure where you went wrong. Venue works. The only difference is, well, let's do it with price. Price needs to go all the way down. Sometimes it can be a little hard to get down there. So what you can do is just click on this. Let's go in interaction. I want it to be on tap. What action? I would like it to scroll two. Where do you want to scroll two? There's a lot of stuff in here. I want to get down to price. Same same, but I want it to be animated. The difference here is that it's used the default of 300 milliseconds 0.3 seconds. Even if I use this one, what was this one? This one was about 1 second. If I do this one, it takes 1 second. It's got a lot further to go. If I make it about 1 second, nothing is working. I have to hold down my option key now to get it to scroll, Figma. Normally, there's no bugs and figma. It's a pretty solid application. But let's give it a preview. If I hit date, it scrolls down leisurely, but if I do price, it has to cover a lot further, actually, the price is not that low. Okay, let's fake it. Let's make this super duper long. Hook. Faking this. I'm going to shift back to design mode and bring it all the way down. I'm doing this so that I guess a better example. I'm going to preview you and I'm going to say date and it has to get down there in 1 second, so it speeds off. You might, if you have to scroll quite far down a page, adjust the amount it takes. I might double that because it's got to go a lot further. Weird. I can type it over here, but I can't type it over here. Anyway, the one thing though is now that this is really long, let's give it a preview again. If I go to date, it brings date to the top. Yours might be fine because you might not have a long page. But if you go a long page, it has lots to scroll. So this date wants to really be at the top, and for me, it's hidden behind everything. Just a bit of a weird. I want it to land about there so that the dates in it and when the venues clicked comes up to about here so you can see the venue and obviously the price goes all the way down there. So let's do that. Let's grab date, and let's click on the noodle. I'm going to double click on the noodle, and that's what this offset is for. X is left and right, Y is up and down. I got to tell myself that and how much What I want to do is enter in, say, tono pixels. Let's give it a preview. I click on date and it doesn't work, even further the wrong way. It's 200 pixels past where the date is. You got to make sure when you're doing it, use negative numbers if you want padding at the top. The exact same thing. Let's go negative 200. Let's give it a preview, and let's say date. Still doesn't work. Why isn't that working? Let's overlook U, negative. Maybe it's just not enough. X. It's definitely Y, I think so. Come on, date. There you go. It's not enough. Somewhere in the middle of whatever I did there. I did 200, 400. Let's try 300. Date. Oh, almost there, 250. Come on, Dan. There is a lot of this. I don't do it enough to know exactly what it should be and get a sense for it. If you're doing a bit more of it, you might get better at it. Oh, I wanted to be a little bit more. 20? Then you can spend all day trying to get the thing to slide down where you need it too. The one thing I won't tune into its own video, you can work your way through the different offsets to get these to work. One thing I will just thrown at the end here for bonus is let's say we want a map link. I'm going to select that. One of the interactions that we haven't covered in a separate video that'll just sneak in here is we looked at going to Scroll a second ago. There is one that says open Link, and then you can type in URL. Let me just grab something from Google Maps. I just grabbed a link from Google Maps. Obviously, it can be any URL on any website. If you're ever in Ireland, and you make it to Limerick, first of all, message me and also make sure you visit Daln's Pub. It's the coolest. Okay, and we'll go to my ink pace. It's going to open up in another tab. Let's give this a preview. Let's go down to Venue. Let's click on the map. And look, it opens up. Nice. The one thing you have to do on your own is give it the awful color. So map here probably needs to be the blue that was invented many moons ago underline, which is command or control, I'm proud I need to bold it. Why not? Under control B. All right. That is how to slide down the page, okay? It's called an anchor, and there is a little bit of missing when it comes to timing and especially the offset. But you'll get there. Oh, and one last thing is that because we've worked out that 220 or negative 220 works for this, you don't change it for all of these. The timing, yes, but the actual offset remains the same, if you want it to appear at the same place. So let's go price where we have to go down quite far. It's still be minus 220. Whatever you decided, I'm going to make it go quicker, and let's make it go, the typings working again. Okay, so a minute and a half, maybe a minute and a half, a second, 1.3 seconds. Let's give it a preview and watch this. It's still going to use that offset that'll work. The reason it doesn't go all the way to the top is because there's not enough room at the bottom. So let's go like this. Let's grab you. Go off on a tangent. Okay, go back to design. Let's click on the frame. Where is he there? Here's the reviews. Click on the frame, scrab him, and I'm going to make this longer so that this guy got somewhere to scroll up to, you know what I mean? Otherwise, it's nowhere to keep going up. What does he mean? This? Now it should get to that spot where we wanted it because there's a little bit of room down here for it to go. Don't add stuff like that, Dan, click on the buttons and scroll down a little bit of offset and you're away. That's it. That is scrolling anchors inside of figma. 53. How to make Interactive Components in Figma: Welcome. Welcome, welcome. What are we going to be doing? It's super exciting. You ready? Look, you see. It's hovering. Very exciting. Don't worry. It gets even more exciting. Look, I input button. Click on and off. Not even a drop shadow on that one. Anyway, we're going to do these they're called interactive components. We do this one quite smoothly. Dan gets really lost doing this one. But I'm going to include in the course because you might get lost the same way. Really quite simple, even though it looks like a long video, it's just because I get a little lost. All my friend, let's make a super exciting hover and a check mark. All right, so I'm starting with just a plain old button. It's an auto loud. It's got some text in it. That's it. What I want to remind you of is actually, we've done this. I'll show you this. This is exactly the same thing. We used it here to have component set that had one, two, three different things in it, and we animated between them all. We ended up with this. What we did was we said, you animate between these two, prototype. We said, we just use a time delay. That's the only difference, but it feels like something completely foreign. All let's head in in in in in in in in. We learned this earlier on. I forgot to use it through the course. Just toggle through all the new pages that we've got open. There it is. I've got this page here. The reason I'm on a MacBook Pro or a desktop version is that obviously the hover doesn't work on a phone. You can't hover on a phone with your finger. But it's a really good example of this particular technique. So we need to make you a component. Fam, you're a component. It's add a variant of it. Under design, variant Now what I want is something to be different about the second variant. All I want to probably do is go the fill color is going to be one of my dark ones. Let's give it a drop shadow. Cool. Just like the viva techno, all we need to do is under prototype, go, go inside of my component set. This variant goes to this one. But instead of doing after time delay, we're going to say on tap, which is great or on click and we're going to say change to variant two instantly and we're not going to do on tap. We're going to do on while hovering. Let's drag out an instance of this guy. He should be on my components page, but he's not, let's give it a preview. It's still previewing on my phone. You can switch it. I've been using the shortcut to go to preview it opens it up like this. You can go to this one, present. It's still on a phone. Have nothing selected and say, not an iPhone 16. You could say no device. I'll just pick whatever page size you're working on or you could have switched it to the Macbook Pro 16. Hey, let's preview it and watch this. Alright, we've got a hover button. We're hardce. It's a little bit, we call it instantaneous. What we're going to do is say, actually, you, I want to do while hovering, not instant. Let's go to t animate, dissolve. Won't matter in these two, it'll end up looking the same. Preview, hover above it. Oh, it's just a little little slow. The drop shot it comes in real quick, huh? Let's try the other one. So let's say when I say it doesn't matter, let's try the Smart animate. Let's see if that works better. You definitely better. Okay. Ignore what I said before. Smart animates way nicer. It's a bit slow going. Okay? So you can just play around with that. Half a second, check this go out. That's better. Nice H. Let's do another example. I'm just going to quickly create a checkbox. You at there. All right. After all of that, I caused myself some problems and I was like, I'll show you as well. I used plugin to find a tick because somehow ticks are really hard to draw yourself. They always feel wrong. Weirdly, if I'm an Android user, so my ticks that feels like a tick, that doesn't. That is the IOS tick. This is the Android tick. They use something called material, but they name their design system. I always like ticks like there feels too standyypi the tick is not long enough, anyway. That's why I'm using the plug in. I like cons eight because it has a lot of Apple stuff. It has IOS in here. It has Google's material, there's Windows, all the kind of generic stuff. What I did, though, is I did this, I found the tick, and I went, Alright, that's the one I want, and I grabbed it and I dragged it out. I closed it down, then I started working. What I did was I clicked on the tick and I scaled it down and I started working and I moved it over and I showed you this at the beginning of the course. I'm going to pretend I brought it up again now to remind you, but really I just did it. What you'll find is see when this came out of that plug in icon eight, there was a frame with a vector inside. I just scoured the vector and there's this be old done hanging out. Watch this. If I grab the vector inside of here and try and move it over here. Look, it comes out of there. Now they're separated, but I've still got this big frame. Delete that and delete that because that's what I did. Watch this. If I hover over here somewhere, where is mine. There it is there. There's this big frame that I didn't think was there and I was like, What the heck is that? We can see it under Command or Control Y for outlines. There's this thing. The heck are you doing here? We know. I scaled down the checkmark inside of it. Then I put this little frame around the tick mark. What do I need to do is grab all of this. I've called it frame 30. Let's call it checkmark, and I want it outside of done. So you come out, done and get rid of done. Get rid of done. Alright. So that's the long way of saying, What do you do, Dan? Really, what I did was, Do I need that second frame? I don't really do I? You can come out and be in the checkmark and that can go away. Check mark box with a vector inside of it. I should have started that way and just scaled the whole box down. But anyway, we can do the exact same thing. What the heck were we doing? I don't know. I got lost. We're doing this. This is the exact same thing. So what I can do is like before, I can say UR component, says it can't turn it into a component, this is a good one. Why not? I can see in my las panel there. This checkmark is somehow outside of my MacBook Pro frame. I can tell it. I can see the text there. So I need to do is make sure you're in there. Now I can slick both of them, map component, and then go variant. All I'm going to do is say in this variant here, I'm going to turn the eyeball off Okay, and let's go to prototype mode and say when this thing is clicked. When it's on click, we're going to change the variant two, and let's use all that smart animate stuff. We probably don't need the smart animate. Let's just go instant because it's a checkmark. Let's grab an instance of it. You come out here and let's preview it. It's small. Let's go over here and input. I can click on it. Look, doesn't go back. It came on, though, so it's hit refresh. It's gone back to a page many moons ago. It's okay. Let's address the main problem is when the tick comes on, it won't go back. I just need to go in here and say, when you clicked, go back that way. You can do all the same things. Preview this. Now because I had nothing selected. It's going back to all the way somewhere else. I think this one here, flow one. What I need to do is if it keeps happening, go here, go to prototyping. Let's start a new flow. I'm going to call this one desktop and I'm going to preview from here. Now I go to input field that goes on and off. How long is this video? Look, we've got Havas, Dill I mentioned we do Hvas as well, and a checkmark. Alright. But you get it now. We did it early on for an animation, but we've used it now to have interactive components doing cool interactive things. Alright, that's it. We learned some stuff. We got lost. Why got lost. But we all learned something. You'll be lost just the same way at some stage, but you'll remember when Dan got lost. Alright, that's it. Onto the next video. 54. Class Project 14 - Interactive Component: All right. Class Project time. We're going to make some interactive components. I want you to make this. It is sign in page with a little check mark for the remember me and sign in button has a Ha state. Now, I know you can't do Ha on a foam, but you'll just have to indulge me. These are just rectangles with drop shadows, nothing special going on. Have a little look online for sign in UI example. Get a sense of what it should look like ish? Really, though, what we're here for is this. I want the interactive components for both of these working. When you're done, take a screenshot of both of these. Have your component set just next to it so that when you upload it, we can see both thing that you made plus the component sets that have this interactive componentnes going on. On social media, I like to see what you make. If you're digging this course, maybe now might be a time you can tell other people how great the courses and they could come and do it. That's how I keep going doing this thing. If you like the course and you can think of a way of promoting it, please do so. That would make my day. But yeah, enjoy making the class project. Let's get those interactive components going. Super exciting checkmarks. Whoo. 55. How to use Sections in Figma for organizing your content: Hi, everyone. This video is all about sections. Hands up, who's never even used it or even knew that existed. It's been there a while. Let's look at sections, what they're used for. They are very organizationally useful, which is code for boring. Let's check them out because you will bump into. To get started, I found this community file. It was it from Hansa Ohile. Thank you very much. Using it as an example of there's an iPad desktop and phone version of this trading app. This is where sections can be really handy because these are relatively well organized. But what we can do is we can hit the button, you've never hit. It is under our frame to hold it down and it's this one here, shifts. It's called section. It does is put a box around stuff. You're like, I've done boxes. It's very like a frame. It doesn't have some of the frame stuff, but it has some nice organizational parts. As in, it has a new icon. It's like a little folder or a section. Everything inside of it is underneath, which is great. Let's give it a name, Command or Control R, and let's say this one is going to be my phone or just call a mobile. You can do some of the things like I'm going to change the background color of it and it just organizes your materials. You can do it with a frame. Most people just do it with a frame. You can convert frames into sections, frame section. The name changes at the top, instead of just being a plain old frame, it's in a pill or a box. You can double click the edges and it zaps itself around the edge of your designs. Okay, tighty them up. You can link directly to a section. Instead of trying to say, right, I want you to go to this frame. You can see let's go to this section that I'm working on. It might be a version, it might be mobile. When you go to Share, you can say, I'd like to you can see here it says it's share to the section mobile. If you have nothing selected, nothing selected, then go to Share it's different. Just going to share the whole file. You can get people to go exactly where you want them to go. You can get really ninty with your sections, shifts and you can have sections inside of sections to further break things up. Thing you can't do though is they need to be the boss. If I have a frame and then I try to put a section inside of it, see what happens over Myers, frame four, if I put a section in it, you'll notice that my Section five, he's above the frame. He just won't go inside. Sections are the boss and frames can go inside. You can live without sections, but you will bump into it in other people's files, you'll be like, what fanciness are they? You know, you got sections. The other thing is you might bump into somebody else's file and you're like, Oh, that's a frame. You're like, why can't I do stuff to the frame? Why can't I do it? Let's turn into Auto lout Shifte Shift e. So there you go. Those are sections. If you're a super organized UX designer, you will love sections. If you're like me, and you end off trailing off into the distance. I do sections when I hand over files for the developer or other people just to pretend that I'm really organized, but there you go. Sections, Bring for some people. Some people love them. Let me know in the comments, you a lover or Don't See the pointer. All right, my friends, that is it. I'll see you in the next video. 56. How to make an expanding Search Bar in Figma: Hello, you. Are you ready for something fun? Alright, ready? Super fidget toy, super pushy, squidgy search bar that expands out. Oh, I do love this one. Cool thing about it is really it relies on everything we've done before, and it's a nice little wrap up of kind of our prototyping awesomenss. We're going to bump into lots of different things together in this project. Cool result, it's a really cool project kind of get everything we've learned all into one tricky ish project with a satisfying. I can't stop clicking little search bar. So we'll start right from the beginning in this one just to kind of make sure we're all wrapped up and we're awesome at prototypes and stop clicking down. First up, I've made a page. I actually just stole the page familia and deleted the search bar we had, but enough room at the top, so we can put a little search bar working at the top. Let's bring in our icon, Command Shift K, Control Shift K. In your exercise files, there's an icons folder. Let's bring in the icon. I'm going to click once over here. It's very big. I'm going to get the scale tool and I'm going to make sure I've got the parent layer selected. Rosie there. Not the vector inside, remember? I'm going to say you be a height of 24. Back to my move tool, selection tool, select the colors. I am going to actually pick one of my styles, 500. Can you see it see all the cool things that we're starting to stitch together? What I also want is Type tool, I'm going to type in. Search. I'm going to copy that, going to go to edit, and I'm going to go copy properties, going to go to edit. We're going to go to pace properties. Oop. Co. I've got some text and search bar member. You got to try and grab the framer on the outside, not the vector inside. There you go there. All right. I want these things to be in an auto out. Do they have to be? Brain thinking, probably. I'm going to select both of them, Shift A. They're Auto out. Let's add some fill of white. I'm going to add a drop shadow. It's going to be I like to tab through these numbers. It's going to be one, one, and 25 is always a little too high. Maybe 20. Alright, let's add some rounded corners. Remember, just something really high to make them round, and we're going to need a little bit of padding. Let's just throw anything in here for the moment. Let's go eight all round. So it's eight tab eight. It needs more. That's okay. We'll get it mechanics working, and then we can tidy it up. So what I'd like to do is kind of get it to where I want. I'm going to hit Shift G to turn my guides on. Okay? There you go. And then over this side, I want it to be all the way over here. Nice. Shift G again. All right, that should work now. So it needs to be a component, Command Option K, Control Alt K. It's a new day. I think maybe it's a new week actually. I think last week I said I'd stop using the shortcuts, at least some of them. I forgot which ones, so bear with me. We've got it into a component. We need it to be scrolled at the top, two variants. This top variant, I want it to be nice and small shook like that. Wow. Awesome. Let's get it working mechanically. Then we can fix all the bugs. What we want to do is prototype mode, and we want to say this one goes here. What does it do? On click Change to this one. No instant, let's get it to Smart animate. And what I want to do is I would like I like the ease in and out looks cool. Cool. And what we need is, this is a main component, so we should put it onto our main components page, but for now, we're not. Okay? I want an instance of this out. It's kind of a pain dragging out an instance. I hold down the option key. You can hold down the Alt key on a Mac to drag one out. A nice little trick here is, remember, option two gets us to assets, instead of going through and going click, click click, click, click, click, all the clicking. You can be right back here. B in files, let's go Option or Alt two and just type in search, which is not going to work because it's called frame 32. Alright. So I'm going to call this one search. That whole thing would work a lot smoother if it was called search. I'm over here, I'm like, great to have the Assets panel, optional roll two, and then start typing search, and there it is there at the top. I'm going to say, you go over here, let's give it a go. We're ignoring the text hanging out. Let's click on you, let's preview it, and bits are going to work. Sh, it expanded. Can you see it? Went out that way for refresh, it works. A couple of things we need to do. We want it to go from if you have it over here actually, it'll work. So if you did want it from this side, you're done mostly. I want I want to be at pain and I want mine to be over here. What I'm tempted to do is go over here and say, A I don't what to do, design, I'm going to say your constraint to the right. Maybe this one needs to be constrained to the right. Don't know, and you give it a go and it doesn't work because you're like, you're like, it's the actual instance here. Remember, the constraint doesn't get made on the actual component. It has to be the instance. You can see here is going from the left and he's using that as a reference and he's going that way. I'm going to say, you go to the right. Let's give it a G. Duke. Ah. We're doing it. It doesn't go back, but we know how to fix that. Okay, let's go back. So it's going, so I got a prototype mode, and we're going to say. The whole button goes there. When you're finished, though, don't grab the side. Grab the little dots. Sometimes they're hard to find, eh Y go back that way and everything looks good. Smart Yeah. Remember everything I lasted. So hopefully now we should be able to toggle, yep and yep. I love that movement in and back. Maybe a bit fast. Anyway, we're now to change that. We do need to get rid of search. Okay? You can do it one of two ways. So I'm lucky. My search kind of hangs off the side here. So what I can do is over here and say on this, you have got under design, you are clipped. M are you clipping, please hold clip contents. There it is. Okay? And hopefully now let's give it to go. It's gone. It kind of appears a little weird. No, it doesn't. Slips out. Perfect. The other thing that my one just works very often when I do this, though, Things don't line up. This guy is pushed around in a weird circle. He's not quite right. I'm going to assume yours is the same, broken. What you can do if you're magnifying glass is being a bit weird, or you can still see search, even though it's cliped off. I'm going to say actually the parent frame here over here on the component. You can say I want your padding to be a little different. So I'm going to break it into all four, so I can see all four of them and maybe you just need a little bit more on the top, or maybe a little bit more on the right here. You can double click on this. You go to be in design mode, but you can just double click these and say, actually, I'd like this to be nine. Well, you can use up arrow up ph. Enter? What was I doing? I was doing the gap. Yeah, there you go. The gap is the space between you and the search bar. If I make this one, you'll start to see it. That's another tip. I wasn't what I was trying to do. If I go up up up, can you see I can just push it so it's out is out of the circle. With this, that's into nine. Now I can go up up up just get it where you want. You might have to resize your magnifying glass. You can make your whole search bar bigger. There's lots of ways of tackling it. The mechanics are there now. Let's preview it one more time, and there's one other thing that I know I want to do. Can you see over here? I just randomly put it in the top right. But when it drops out, you see it too far this way, not far that way. It's hard to line it up because you see, it's really small. How do you do it? You can do lots of testing. What you can do is a little trick is what happens with a variant is with it selected, the default is this top one. What you can say is like, I don't want it to be the default. I want to be the second one and then you can line it up or Shift G, you can line it up nicely, Shift G again to turn it off and you can say, actually, I just used you for a little second, go back to that. Now, ok Awesome. Well, you'll notice as well, if you squint in there, there is a weird bit of pixelization that happens, I think it's the job shadow. I don't know, it's been there forever and doesn't seem to go away. It's a prototype. You might have only noticed it now that I've noticed it, right? So you're like, Okay. I do love it, though. Look at it. It's cool. Hang on. I think I might have a way of getting rid of it. You wait there. No, can't figure it out. Ignore the pixelization. Unless you know, let me know in the comments if you've got a workaround. Maybe it's just fixed, but it's been like that for about four years now, three years. When you make it, like in the app, okay or on a website, you can totally do this and the pixelization won't come out to you. You might have to suspend your disbelief for a little bit. I can't stop clicking it. We better move on because wear this out. I do love the idea of a search function that uses very little screen real estate. It's very clear what it is. You click it, it expands out to a nice big box. Oh, I do like that. All right. That is it. I will see you in the next video. 57. Class project 15 - Expanding Search Bar: Right, class project time, I want you to make your own expanding search bar with all the trouble that it has. It is a tricky one, ties in lots of different things. Give it a go. What I want you to do is on this one. In the past, I've told you to comment on two other people's work. What I want you to do is go down to the comments and just see if anybody needs help. See if you can help two other people down there, then we'll all be super helpful. If you are getting it wrong, be one of the people who comments down there and says, I'm lost and explain why. Share a link to your project as well, just like when we share projects for people to review, you can share projects that people can have a look, grab the link and you can put that in the comments as well so that people can actually decipher and have a little look at your project. If you got yours to work, make sure you help some of those people out. I can't get to everybody. I literally get hundreds of thousands of comments each year, but I try my best. I'd love your help. So make an expanding search bar. I'd love to see an animation of it. Video uploaded to the class projects. Otherwise, you can take a screenshot of your component set and we'll just say you made it work. If you do get the video one going, I'd love to see it on social media. I don't know what about it. I do love these little bouncy search bars and make sure you let everybody know where you're doing it. Dan's course. All right. Enjoy making the search bar. It will be a little frustrating. Good luck. 58. Be careful what you create in Figma: Hi, everyone. This video is a warning. Be careful what you create. Editor, can you zoom in and out like that? Be careful e. So what is he talking about? I'm talking about prototypes and animation. So animations things that just play through, okay? You don't really do anything with them. And then prototypes, okay, which we're doing the last few video with is like interactiveness. And the warning is just sometimes you can design things that are impossible to build or at least very time consuming, which means very expensive. Sometimes it might be outside of the skills of your engineer or developer or yourself if you're going to be making it. So just be careful to not create something, sell it into the client, and then not be, you know, and then it being either axed and something they loved or it being something that cost. You know, sometimes some of those interactions and, you know, specialty skills might end up doubling the price of the job or doubling the time, okay? So just be mindful of it. A good kind of way. Like, there are times where you need all that stuff. Like, if you're pitching to a client, sometimes you need all of the indirections to make it feel and, you know, really sell the concept. It might be for your portfolio piece, go overboard for that. It might be just to impress the boss, okay? There's times where you need to kind of go the level up. But there are lots of times we're actually I'll start doing something and kind of keep adding stuff, and it's and I've doubled the time that it took me to build for no real net gain when it comes to the user testing because that's what we really want to do. We want to build something quick, get it out to the stakeholders, get in the hands of our users and get feedback. And, you know, Figma is rapid prototyping. I'm not sure why I did that. It's rapid prototyping. There's nothing rapid about some of the things we've built here. Just be careful. Have a look at the term lean UX, okay? It's kind of just, you know, sometimes you can get a bit lost in the details. And sometimes, all it really needs is something super quick, super wireframing and sketchy to get where you need to go and be able to iterate. So that is it. Sometimes you don't need all the level. Sometimes you just need a quick thing, and then sometimes you can build stuff that can be really tricky for the developer or engineer to build. It might not be able to be built. Another thing is that animation, which we covered in an earlier chapter, we'll do a bit more. Animation Figma, isn't It's not built for that, okay? You can do some basic animation. We'll do it 'cause it's fun, and it helps us spoil the tools and get really good. But if I'm going to be doing animation for something, something that's going to play on the homepage or the welcome or the hero image, I want some animation going on, I'll do it in another program. After Effects has got a plugin called Body Moving, which we'll touch on Lottie animations. And you just kind of pick it up and dump it into Figma, okay? It's not really an animation tool. There's plugins that'll help you with animation, timeline animation, okay? Just know that, yeah, you can do it other places and just dump it. It comes to prototyping, that is Figma is speciality. Okay. So it was really good at interactive prototypes, okay, and doing that kind of fast. There are limits to it, as well, though, and if you do want to go extra special, like, I know, photorealistic, I'm not sure when to use these. But something that looks and feels like an actual app, you might have to then go on to the next step with something like ProtoPie is pretty common. We'll touch on that later on. But yeah, there you go. Do not design something that can't be built. That is the warning that I wanted to get out here. Alright, that's it. I'll see you in the next video. 59. Layer Zen in Figma: Hello, my Figma. It is layer Zent. I'm going to bring joy to working with layers. Big confusing documents giving you a headache. Don't worry. Zenhem. Now, mistake. This video is going to bring you joy or it's going to bore you to Tess. It brings me joy, so join me on the journey. Let's jump in. Alright. The first one is the Enter key or the return key if you're on a Mac. I use it all the time, especially for buttons. You can click on the button. Instead of either double clicking, double clicking, double clicking, grabbing the text. You can. Select on the button. Hit Enter, and it just dives inside of the button and now has the text selected. You can hit Enter again, and it even highlights the text. Go. Is that useful? I don't know all the time. Enter Enter, change me. Escape to get out. A couple of times a desec everything. Is that useful? You can just do the command and click and that'll dive inside more complex things. The Enter doesn't work for this because there's lots of stuff. Let's go at my layers. You can see inside of my Nav there's a bunch of stuff going on, so it might be easier just to hold the command or Control key and click on that. Then you can hit Enter and change it. Oh, the Enter key. Why is it so good? Oh, it gets better. Sometimes there's I'm trying to find some complex stuff, things on top of other things. Let's go for this text. This bit of text here is inside of the slighty scrolly horizontal scroll, inside a card, which is inside of an autolayout, which is inside of another blue box. So there's a lot going on. What I really like is holding down the command or control key, MacOPC and just right click. Everyone has right clicks, but look at this. You can pick the hierarchy. Look, Did you mean the review as in the frame or did you mean the review scroll? Maybe you're looking at the buying review. Maybe it's the tag that it's in or the text that's recommended. I do like that because you just need this it's sometimes hard to go, right, not you, not you backup one. You can just hold command or control and write clicks stuff and say, I want their lips and I want the frame that it's in. You want that not quite at the bottom. You're thinking boring, it's going to get more boring, but I love it. There's a little bit of designer OCDME and for some reason, this gives it to me. Look how much there is going on in here. What I really like is the option. Get that tattooed on your forearm or Alt Al don't change Mac or BC. The tattoo won't work. I just love it. Look, I just tidies everything up. Everything has collapsed and Zen is restored. Then you can go into the field that you want and have a look. I'm going to combine this one. You can click these Chevrons and see, let's say this one here. What's on there this? What's in there that? What's in that you can spend ages trying to go through and find all the OCD is over. I need to find everything in here. I need to expand all these Chevrons. What you can do is just hold the command or Control key and click the Chevron and it just exposes itself. All right, maybe not expose itself, but share all of its insides. It's kind of murdery. All right. That's doing that. Hold down command, hold down Control, and just click the Chevron. Actually, you got to select it first, then do it. Well, good point. So you can see here it's unpicked at all, so I can see it all. Again, you can have nothing selected. And remember that tattoo, Option rolled all tidy up. Nice. The other thing is when you're over here, some people don't even use pages. What you can do is you can see the pages here can be tiled up. You just like I never use them. I want more room for my layers. The other one is, let's say, let's expand everything on actually Select All, hold the Kamankey down and click on one of these, and we'll open up every single thing. Sometimes though, they get quite long. None of mine are very. Oh, there's some. Can you see it's getting longer and longer and longer and longer, you can actually just drag this bigger, you've got a bit more room. You might have a really big screen and you're happy to have a nice big window here. Same thing with the pages. If you are using lots of pages, you can just go like this and say, all I need more pages because I've got this big giant screen. You can double click it and it will jump back up to the smallest version. All that is it. That is layers in. Now stay. Let me know in the comments. If there's one in there, you're like, that's it. It's the one. Equally, let me know if I remake this course like, Dan, this course does not need a layers in video. I might cut it out. I probably won't. Makes me happy. That is it. I will see you in the next video. 60. Advanced Search in Figma: We're doing an advanced search, not that advanced, but super helpful, especially if you're not aware of the power of it. Let's jump in and do some searching. Okay, so find a replace. You'll be on file and not many people know there's a little search icon there. I can type in something. Let's say that I need to. I got some text changes that I need to do and I need lots of them. The word, what I got collective. Groove collective is all the way through this document. The one thing also to note, Cs colored it, does that all the time. Freaked me out when I first saw it. I was like, What's happened to this? What styles applied to it? It's not watch in the search off, it goes back to normal. Turn the search back on, obviously a find and replace is really useful. I'm going to type in groove collective and we've figured out that actually it's meant to be called groove code dot. I find this is useful when you're half using sign in or sign up or login. You need to be consistent, so you need to go find all the instances through a big document and say, Yeah, I want you to change all of these and one big go. Nice. Now it's groove co everywhere. Replace only has a few things you can do. Find, though, let's type in a word button. You can find everything that has a button, but you can see there's way too much. You're like, no, I want all the instances. That's the cool thing about Find is you can go in here and say, I want to show you just the instances of these guys. In here are all my buttons. Really handy for a big document. You have to go change something. You just need to figure out where it all is. One thing is make sure you turn off the filtering and turn this off with a little X if you are finished searching for stuff. Easy one. Onto the next video. 61. How to Bulk Rename Layers manually with advanced tricks in Figma: Hi, everyone. I'm going to try and impress you with all my coding. But really, I just clicked on these buttons. It is a great way of renaming lots of objects at once. You don't need to know how to code. You just need to know how to click buttons and magic will happen. Let's jump in. All right, so I'll move to my Interactions page it's a bit smaller. We'll learn this earlier on, but you can rename using AI, say the shopping cart page here. I'm going to say, right click and I want you to use this rename layers and AI feature and just click it and watch the magic. Beautiful. One of the big things I liked where I was using the name. Okay? It says, was it Groove Collective, for the title up here. But once I've done the renaming, it called it artist name, and you're like, Oh, you are good. This will change over time. You can see here, frame 23. That didn't change. So what you can do is you can say, actually, rename this guy, rename Laos and it might just say, Hey, there's nothing that needs renaming like, do it anyway. And sometimes just gets it right. You're like, you go Here jickbton. All right. But now we want to do something a bit more manual because it's good and might get you close to where you need to get, but there's times we just need to do it automatically. I've got some icons. If you are asking about these, they're super cool. They're from icon eight and they are. Three D plus the sina. I've never been able to use them other than in classes, but they look so cool. I'm going to select them all, hover above. Let's do tidy up. For some reason, tidy up doesn't want to do them horizontally. Actual vertically, isn't it? You can hold down the optional roll V key. That's a handy one, option V or H, horizontal, vertical. I don't want them horizontally aligned, undo. It's just a shortcut for these two. So if you hover and you hover, I use those ones quite a bit. Right, so we've got our icons, and you see they came straight from icon eight called Trash Share and at Bookmark, which is good. Makes it hard to find the one. I call them all icon, and I can click on them and just type it in. But in a hit escape, I don't want that. I'm going to say you guys, if I slick on one of them and goommand that's a handy shortcut. Can you see it highlighted in the LAAs panel so I can start typing. You have more than one selected and hit the exact same key, command or control, then it goes to this thing. This is like the bulk renamer. The cool thing about this is you can say, actually, I want to rename two, what? The word icon. You can see what it's doing. It's calling it icon. I want to give it a number, ascending, descending, so I want to go icon one, two, three. Can you see what's done there? This is an expression of some reason, Dlo sign N is number, and N is another number. So there's two of them. You might get rid of one of them. You might want to call it icon one, two, three. Look, computer hacker. I don't really know how these wings work. I use them a bit in design. They have something called grep styles. It's very similar. If you do have something complicated, you could go to a developer and ask. There is some documentation on Figma if you kind of a developer yourself on how to kind of get it working. We'll keep it simple. What I want to do is I want to add the word icon. I want to add a number, just one of them, not two. Not four or five, just one. Then what I'd like to do is put in a space, a hyphen and a space. This is totally not necessarily just the way I like to name things and I want to use the current name. Some reason dollar sign and is the code for using its existing name. Cool. I've renamed them from trash and add bookmark to icon with a numbering system and then just use their current name. Rename, does it. Cool. So if you've got remember the search from the last video that was boring. You can go through and find stuff. Okay, find all your instances of buttons, that, that one, and there's only two on this particular page. But imagine you had a lot more, then hit your command or control. Okay you can say, actually, I would like to use the current name. I don't. I just want to make these guys call primary. That might be enough or you want to primary and you want to use the numbering. Okay? And it's going to rename those. Alright, there's bulk renaming. You can use the AI features, but sometimes you just need to use the kind of manual one and don't be afraid of the code. Okay? Basically, these are three that you'll use and just look at the preview over here. What do you want to do? Cancel. All right. Hope that was helpful. We are layer masters. Actually, I'll do it one more time just to be slow. You can carry on. If you've got the hang of that one. I'm going to undo, undo, undo undo till these guys are back to being regular stuff. Come on, there we go. Just one more one. I know in class, sometimes one more one through is useful. So I've got you guys, more than one selected. Go Command or Control R, to rename them. And I'm going to say, I'd like you to call them icons with a number. Then I'm going to put it in a space in a hyphen for no good reason because I like the look of it, and then I'm going to say use their current names. Click rename, and they're all done. There you go. Smooth. You might have a bunch of cards with features in them. Whatever you need to rename in bulk, select more than one, Command or Control R. All right. That's it. See you in the next video. 62. Finding Components using Ai: You, we are going to do something super duper awesome. I love this video. It is called finding components with AI, which sounds lame ish, but man, it is cool. Loads of good shortcuts the main ven is like, I need a ticket. Give me ones that look like this from the community and just be able to drag them out and use them. Ready to roll. Let's jump in. All right. We've been grabbing our assets from the asset panel. This asset panels a pain in the butt switching between these two. There is a shortcut Shift I on Mac and BC that will jump to looking in your Assets panel in this little window here. You can type in stuff. Let's say I need a ticket. I know that I've got a ticket icon. It's found it. I can much easier. Shift I. What it's doing is jumping to this option here and then going to assets. It's just a different way of getting to the same thing, but shift I will automatically get you there. Shift I. The other cool thing about it is let's say that the ticket is not very tickety. People aren't sure that's a ticket. So, we can type in ticket. What I really like about it, it's looking through the rest of my document. I only found one is you can go to community, and what it's going to do is going to look at everybody's community files and find tickets within them. So this one here by Tamsburg I can drag it out. I can just start using that one. Only thing to be careful of is that this came through as a main component, ready to go. Sometimes they came out as instances. So just double check if it is an instance. You just need to right click it and say detach and then you can make it your own main component. Shift I. Let's say we do ticket again and let's say you like that ticket. You're like, well, like this. Wonder if there's anything actually under community. Say you like this one, or wonder what the rest of it is. You can with it selected, you can say open and community and it will go to the file it stole it from, and steal is not the right word. This is the file. I can go into it, and open up the community file that it borrowed it from. Have a look, let's use our sweet find feature. Tick kit. Nothing on this page. It's all pages. Shift two to zoom in on it because it was hidden in there, but now you can see all the other ones that you might use. But let's not get confused. You can go and look where it got it from, but I really just like it. Say you need, fine, I got to make a Share button. Shift I, type in Share. I'll look to see what you've got currently in your libraries, things that you've made, but also out community. You can have a look. You'll be like, What looks like she? I like that one. Drag it out and start using it. Remember, select it. Just double check. What is this one. You see here, this is an instance, not the actual main component. I could right click it and go to main component and we'll open up the file I got it from, but I just want to detach it. I'm going to make it a main component for me. Oh, it gets better. That's a visual search. Sometimes you're just like, I want you to find this one's a hard one. Let's say the person. You're like, A, this person here. I want to find a replacement. Do what Dan said, Shift D, type in people. No. It's a person. It's looking through my stuff. I've only got one. Let's go to community, person. Kind of what I wanted. Man. You can spend ages like, It's not what I wanted. This is really cool. So I'm gonna close it down. With it selected, I can say this one here. Use the AI to go do a visual search of the thing I have selected. It did it. What is it actually called? Doesn't actually say, but it's pointed to me lots of different options. You can say, actually, I do like that one. No, I like this one. You can drag it out and just start using it. Ready to roll. Okay? So there's a couple of things there. Shiftes the big one, open opens up your assets folder. You can type in stuff. Button, Shifte, type in stuff. Don't enter and have a look through the stuff that you've got in maybe just your library or go to the community. Let's see what other buttons are being made. So many buttons. If you can't think of it or you just need a visual guide to do it, you just click on this and say, same thing, shifty. Do a visual search, please. Have a look through my documents, but also what do you got in the community. Lots of different hearts. All right. That is it. Happy finding components in the sweet new shortcut Shift I. 63. Instance Swap inside a Component: Hello. In this video, we're going to do an instance swap. It means that I can have a button and just pick from different instances that sit inside of it. I can quickly go, I need the plus. Done. This is different from creating a button that has all the different icons all listed out. We can just have one main component and we can tell it, Hey, this little area here, you can use these different icons if you want without having to be so specific. This gets more bitterer Four is not too bad for variance. But when you get something like this, so you need input field, and it needs to have so many different variations, some of them have a label, some of them don't, some of them have texts dropdowns. Some of them have the eyeball thing. There's so many different variations that you end up with a file like this just for one simple form. So we're going to learn how to do an instance swap. So we can have just one field or in this case, button. We'll start with a button because it's simpler and just go, All right, I can pick from any number of these preferred components in there. One button to rule them all. All right? Let's jump in. Right, to get started, I've created a button, just a real simple frame with some text in it, and I made it an Auto out so that it expands. It's bringing some icons, Command Shift K on a Mac, Control Shift K on a PC, and there is a folder with some special icons in them or special. The ones that we want to use called icons two, grab all four of those, open them, and I'm going to click once, twice, three times, four times. I've got all my icons. I need to make sure this button is a component. M, and same with these ones. Select them all, and I'm going to say, I would like you to be or multiple components. All right, so these are my main components. What I want to do is grab an instance, say of the tick. So I'm going to just drag a copy out and I'm going to put it inside my button. Because it's an auto layout, it reflows. Now I'm going to drag out an instance of my button, which I've called frame two, Let's maybe call it something else. Let's call this one. But an orange terrible name for it. Because the first thing we going to do is with the instance, let's go and just change the color just to make clearer what we're doing. So main components up here, instance down here. What I can do with the instance and skip all of the hassle that we're going to learn, not the hassle, but all the fancy stuff is I could go into it, click on the tick and say, actually, I don't want the done. I want to switch the instance with where do I want it? Not this one, the pencil, the pencil there. That works fine. When I'm working on my own, the trouble with that is that it's hard to know which ones are allowed to be in here. The pencil, you're like, Oh, is it this one, is it this other one? There's just so many on my components page. What we can do to be great and make it easier for ourselves, for bigger design systems, and for junior designers, you can say in this main component here, you can say, see this tick here, click on the Tick inside of it. So this instance, you can do something called Instant swap. With a ti selected, it's the instance inside of my button. I can say, see this option here. It says, create Instance swap property. You can say, Hop we're going to call it icon to make it clear what we're swapping. The default value going to be done, that's fine. What I can do, this is the bit here. It says preferred values. I can plus and say, I would like what do I want close to be one of them, I would like done to be one of them, and not that one, which other ones we have? Pencil and plus. The cool thing about that, if I close it and I create the property, it just means when somebody goes, Ar I need a button. I'm going to drag out an instance of it and they can say, A see you over here? Icon, Which icon do you want? These are the only ones to pick from, not the big giant list of components in your whole document or your design system. It's just a lot clearer. Co. I'll show you this so you can be awesome, but also so that when you do find a button and you're like, is this happening? What is this Voodoo? It's because they've done an instant swap. Were you might run into problems? Not really problems, but these icons I chose specifically because you see this, it's the same height and width, 16 by 16, this one, 16 by 16, this one, 16 16. So when they do the swap, it's a nice overlap. If you end up putting lots of different sizes into it, it becomes trickier. That's why when you find icon sets, you will find that they're often. See, this is narrower than the pencil, but they put it inside the parent frame, and it's a specific height and width, so that they're all matchy matchy. Cause you combine it with a variant, 100%, okay? If you don't like this way, the reason it's good is that the main component is just this. Whereas if we had a variance, we'd have to do this, we'd have to have this one, and then we'd switch this one out four. Let's delete it. Let's grab a version of this. That's fine. Then I'd have to have another one and another one, and another one, and that's fine if there's four. But when you start getting to versions of buttons that have countless variations, it gets super duper tricky. Yeah, that's a nice intro to it. Just using buttons. It's called an instance swap and you can have one button, and it can do a lot of different work. Awesome. I'll see you in the next video. 64. How to use Boolean Component Property in Figma: All right, everyone. This video, we're going to look at component properties. This one's called a bullion, and what does it do? It's very cool. We can just turn it on and off that icon we created. It means that we can say, I've got this one master component that can do a few things. I can say, A, I want it to be the done or the close. But actually, you know what? None. That's us making a bullion component property. Sounds weird name, but it can be super. Let's jump in. Right. To make our little on off switch, find the master component and find the thing you want to switch off. I got it selected and I'm going to go to here and appearance and there's this option here. This is applying a variable or a property. We're going to apply a property, and we're going to go to plus and the property is going to be, you can see it's defaulted to this bullion. They're not even refer to it as 1 billion anymore. It's a weird word, it's given me some good name. Do I want to show the done? I want to actually just call it icon because it's going to sow lots of different icons. The default is going to be. Property. Now I grab my instance and I can say, A what? Icon do I want to show? Maybe the done. Actually, I want none. There you go. Come on. Because it's an auto lout, it reflows. Don't ask me what the purple thing is. I was looking for it and I'm like, What the heck is that? I don't know. It seems to it doesn't preview, and if you can tell me what it is, let me know in the comments. I've hunted through the view options. It seems to just go away. Can you see? It's gone away there. I think it might just be a there you go. That is how to turn things on and off. You can see when you combine it with, I want it on, but I want it to be pencil, this one little master component is nice and small, not a pile of variations, having all of the icons, and then with it off again. Very cool. All right. Next video. 65. Making a Simple Field with Component Properties: All right, everyone. In this video, we are going to combine what we've been doing the last couple of videos into just something different. We'll be doing it for the button. We're going to do the exact same thing. We're going to turn things on and off and swap out icons. But we're going to do it for a text field because it's the same stuff, but it feels different when it's used differently. It's a good recap of what we learned. This guy here can have a label on and off, can have the icon on and off and the icon can be switched out. We're doing. Jump in. To get started, I drew something that looked like a field. It's just a frame with a stroke around the outside and round corners. I put some texts on the inside. It's not even doing anything. It's just not auto louts just hanging out and I made a light gray. Also credited a bit of text, it says label. Let's start with this one. Let's go up here for a label for our field, and we are going to grab all of this, turn it into a component. Then we're going to go inside of this and grab a bit of text. Over here where it says appearance, we want to say, I want to add one. Do we want to show the label? Yes, please. Now when we drag it off and we have our instance, we can say, show the label. I don't want to show the label, you can change the text in here. This one's going to be, say, date of birth, Dp. Let's go and add the instance swap as well. I'm going to go and import a couple of icons. Command Shift K, Control Shift K on a PC. There's another folder called icons three. I got these two icons. I'm going to click once, click twice, grab them both. They're the right sizes. You are 18 by 18 and you are 16 by 16. Whoops, you're going to have to change them. Because I really want them to be the same size. I'm going to select both of them and make multiple components. I'm going to grab an instance of it, not the main component member. A main component can't live inside another main component, so we're going to grab you instance, go inside, all UPs over there. Now what we're going to do is we're going to say this thing moves around, right? We use the one down there and then this one looks slightly different. You see the icons are just slightly different. Apply variable property, and this one here is an instance swap. Very similar. Click on that and which ones do I want to allow people to use? The checkmark. That down. I got my preferred values, crept property. Now, hopefully, this thing here, I can say, do you want the label? No. Do I want the danger? This one's checkmark, but sometimes we want to turn it off. Back to our main component, find out component. So our instance inside of here, say, down here, appearance. Do I want you to appear the property show danger? I'm going to call it show icon. Create property. Hopefully now this guy, I can say actually show the label on and off the icon on and off. And pick a different icon. Look what we did. Ignore the purple. Maybe there's a little fast, you can rewatch it again. It's the exact same thing we did in the last video, but we did a button, which is useful, but these fields can get really useful as well. One thing I might do is for my main component is that this seems like the wrong way around. I want to label, then turn the icon on and off, then pick which instance of it. In my case, I want to change it from it's called instance. Let's call this one icon. Just so it's a little clear here. Yep icon, Checkmark. Doing stuff. The only other thing is I just half skipped over it is that that bit of text is centered, have to go back to my main component and say, you need to be left aligned and back over there. This one kept the scented, which is interesting. If you dragged a new component, it would stay left align. But I didn't realize you could Oh, it's not. Why not? You are left align. They should all come for the ride now. Let's drag out another instance. Dan's getting himself lost, turned an easy tutorial into Dan getting lost tutorial. Yeah. I is working, and we're combining stuff and we're being fancy. There could be a lot of instances where you do need to turn things on and off and swap instances just so that your main component is nice and small, easy to share, but can become a lot of different versions. Hope that was clarifying ish. Okay, I will see you in the next video. 66. Class Project 16 - It’s Your Birthday: Hello. It is class project time. I want you to put what we've learned into practice. Okay, we're going to create this field here and it's got lots of stuff that we want to use. You're going to need to create a label that needs to be turned on and off. Same with the icon, and the icon when it's on, I get to pick different icons and helper text down the bottom as well and the sample text that goes in the middle. Don't forget on your main component that you might want to rearrange these things. I've just noticed that things called instance, probably want to call this one. So name them right and get the order right because I probably want the sample text right at the top. It seems like one of the more important ones. A, in your class project file, so create an input field using component properties. The big thing is that when you are making component properties, sometimes it's at the top and sometimes it's down here in appearance. If it's not at the top, it's down in appearance. That's the one thing that I don't know. If I haven't done them for a while, I forget which one I'm clicking. Co. So you need a field, which is just the white box. Sample text needs to be turned on off label on off, helper text on off, and the icon on off, but has that instant swap. You can use my icons, you can find your own. The deliverables, I want you to take a screenshot of your main component, including the properties. I'll show you in here. Where's my main component. Have it set up when I click on this, I can take a screenshot of all of that all at once. I can see my main component, but we can actually see all the different properties and see whether you name them right or not. Actually, I don't really care what you name them to see if you can get it working. It is tricky to make, but can be super useful and even more useful when you do get handed over somebody else's thing and say, here you go and you're like, Wow, it's doing all sorts of awesome stuff. You know how it's made. Your own. All right. Enjoy the class project. I'll see you in the next video. 67. How to curve text with type on a path in Figma: I Hi, everyone. In this video, I'm going to show you how to put text on a path inside of Figma. Let's jump in. All right, so you got to start with the shape. I'm going to use the circle. So using the O shortcut on my keyboard, holding Shift to get a perfect circle, then switch to the type tool and just click on the edge. You'll see the icon change from the crossars to this and just click where you want it to start. Even if you don't get it in the right spot, select it all. I'm going to hold down my option key PC and just drag it bigger. What you can do is go back to the selection tool and you'll notice that I have it selected. Can you see this little dot? That's where it gets started. Mine's left align. I'm going to get mine in the center there and switch my just regular old text alignment to center. Now it's at the top. You notice that the shape when invisible. If you do still need a circle, you have to draw a second ellipse to use as the middle part. Because we're using that original circle as the text on the path. Now, you could go to draw and grab any of these tools in here. I'm going to use the pencil tool and I'm going to draw a shape and it's the same thing in here. Grab the type tool and you can just click on it and we can type. The other things you can do is, let's get rid of that. With the selected, you can play around with the basics. Often you need to play around with letter spacing to maybe get it right because it's fanned out, depends on how acute your circle is. The other thing is down here you've got some new options, C along here. You can text over path, you can say text through the middle underneath, depending on what you need. The thing that I get asked a lot is how do you do it on both sides? You don't really. You just have two separate circles. I'm going to do limerick. Two separate text boxes, and what I'm going to do is, oh, there's a flip option. I forgot to mention that. I'm going to rotate this around and I want it below the line, and you can see I can make this thing feel like it's around an ellipse I'm going to put my burden. Then I'm going to spend ages getting it all looking nice, playing around with the line spacing. But that's the basics. You can do it around a circle, a squiggle, a square, a star, anything you like. That is text on a path inside of Figma. 68. Class Project 17 - Curved Text: It's class project time. I want you to use the curve text feature and remake your logo. It can be really simple. You can spend a little bit more time. It's not really the point. It's just playing around with the curve text. A new logo, make sure you use one or more curve text elements and upload a screenshot. Love to see it on social media as well. If you are looking for inspiration, something like dribble. I just typed in badge logo, sometimes they're called emblem logos. But you can see here just curve. This one's full round circle up to you. Make sure you tag me in social media. I'd like to see what you make. I'm not sure why curve text is awesome, but it is Have fun and I'll see you in the next video. 69. How to Make Text Boxes Line up with the Edge using Vertical Trim: Hi, everyone. We're gonna look at vertical trim. If you're like me, and you're like, I set my padding to eight pixels, and you're like, It's nowhere near eight pixels. What's this big gap in here? I'm gonna show you how to turn it off. Actually, it's really easy to go to here and click that button. But there's a little bit more to it, so let's jump in. But look how good are the lines now. Right, I'm going to start with the type tool type, and I'm going to use typing the word button. I'm going to escape to come out of the type tool and you'll see that I'm just using Inter, which is the default for figma, and I'm going to turn it into an Autolayout and I'm going to give it a color color. And what we're going to do? Well, if I click on the parent frame here, you'll notice that it has horizontal and vertical padding of eight by default. What you'll notice is, you see if I hover above vertical padding, can you see the eight up here is let me move it over so we can zoom in. Can you see? It's nowhere near the actual text. The sides are closer, but the top and the bottom nowhere near eight pixels. I can count them. They're so close. That is eight, nine, ten, 11 pixels. What's happening is the typographer decided that the apt, which is the capital letter is set this far down and this far off the baseline. Every font is different. If I switch it to go for this ultra one. It's not the same as Inter. Actually, it's pretty close. Let me think of another one. I think Leto is different. Okay, can see Lato has about 3.5 pixels before it gets close to the top there. What we can do, I'm going to go back to Inter is with the text selected, you can go to typography, go to the settings here, and you can turn on this thing here. It's called vertical trim or whatever they call this one cap height to baseline. It just snugs the box around what the actual type is. It's never going to be perfect. You can see, look, what's that there? Why is there a space there? It'll be because some of the other capital letters will be higher or lower than that one. They're all the same. I guess what I wanted to say is that you'll never get it perfect perfect. But using vertical trim will get you really close. Now it looks more like if I click on the text inside, I got the textbox hold your option key, old key on a PC and just hover around. Can you see it's closer to the eights. That's called vertical trim. If you spend ages trying to line things up and you're like, why is it not lining up? Perfect. Experiment with vertical trim. But know that some fonts are different and you're going to have some quirkiness with some of the fonts at least. All right, vertical trim. I'll see you in the next video. 70. Truncation for Text in Figma …: Hi everyone. This video, we're going to look at truncations, the dot dot dot that appears when you have the S moor. It's really good when you're doing cards. I wasn't going to include this in advanced course, but I end up doing it lots when I'm copying and pasting lots of texts to fill up the fields. You've designed for the small four or five lines, and then you got to go through all the other listings and kind of fake the dot dot dot. We can turn it on in the main component and get it to do automatically. Actually, it's just this topography, Truncation on with a couple of lines. That's the easy version. Let me explain a little bit more and wait till the end, there was a problem that I ran into that you might do as well if you've been following along with the course. Let's go truncate stuff. To make this work, there's nothing autolayout or anything about it, I'm going to turn it into a component. I want another version of it, and the next group is the prodigy, and we're going to be filling out all these different listings, and I've got it from either a database or on copy and pasting or from a document. I'm like, Oh, oh We could go to the textbox. What I've done in the past is with the textbox selected. I just go through and I delete all of this and delete a bit more and then add my own Truncation dot dot and fake it. But there's an easy way. With all of that still there, what we can do is go back to the main component. Grab the box and under the text properties. You've got this option that says truncate Text. You can see there, the bottom of the textbox, it will truncate and everything and all the instances will too. Text is still there and it's still editable, but you'll notice that when I come out, though, it all goes and adds the Truncation. Nice and easy. The moment my text box is set to a fixed size. If you go for auto height, which means it will expand and contract, you can go back into that same topography settings and you can get Mx lines. That's only with so I'm going to set it to three. They all go to three. Only thing to check though is to make sure that you are set to Auto height and only then will the max lines appear. One of the things that I found in the last videos when we were messing around with type on a path, I did this while the default was set for this line middle. I'm going to turn the Truncation off. So we've done Truncation, turn it off now because I want to show you the problem I had. When I added lots of text, it started expanding from the middle out both ways. Did you have that problem as well? It's because we were messing with type on a path. We got it to run in the center. I just needed to make sure I go to my original box here and I set it to the top, which is the default and get it back into position and then started working. I'll turn my Truncation back on. Oop. Set it to one lines. Go up two, three, or four. Awesome. That is Truncation. We'll just type it in dot dot dot, and do lots of deleting. Alright, that's it. I'll see you in the next video. 71. Masking Images using AI Remove Background : Hi, everyone. We're going to use the AI masking tool inside of Figma. I'll show you the things that are good about it, some of the quirky things that are wrong about it. But overall, it does a pretty amazing job. And if you wait to the end, I go all 1980s on it, and I'll show you a cool Figma color tool. Alright, let's jump in. All right. First sta, I've got something to share. This is the third time I've recorded this tutorial. I've been recording the wrong screen twice in a row. So I'm going to teach you about mask, and I'm going to do it in a kind of mad grumpy way. As much as made grumpy Oh, okay. What we need to do is bring in some images. So I want you to bring in from your exercise files oh 912 and 13. Bring it in I've just created a new page called Images, just to have something separate. We're going to start with this one over here. This is an AI generated image, but it has a background. We could work with AI to see if they could give us one without background when we originally made it, but that was a long time ago. So what we're going to do is select it. We're going to go down here to our actions, and we're going to type in remove background. It's an AI feature. It is part of the paid options in Figma. I'm going to click on it, and then actually just be amazed at how good it is ready? Oh, it is good. This stuff has been hokey for a long time, but it's getting really good. There are some bits. Like if I drag it over here, it is perfect. Okay? Look at it all around. It is great. It's kind of here. It's done a great job, but there are some weird things because I love me a drop shadow. So if I add a drop shadow, can you see it just freaks out. This chick yours, you'll be in the future. They might have fixed this, but it's not knowing what to do around these edges here. It's got a really hard clipping mask that it's using for the drop shadow, but there is a lovely mask in actuality. I'm not sure where the problem is, but just know there are some issues. A Exports Lovely as a PNG. Not sure what's up with the drop shadow. And so it works really good when there's a high contrast between the background and the foreground. Let's do it again, remove background. Actual people and complicated things take quite a long time. This one was really quick. I'm going to jump cut to when this one's done. All right. So that takes maybe four or five times longer than this, but still a pretty amazing result. Look at it. Even through here, I do like it. I'm going to stick it above this, but Great. Has the same issues when you start adding a drop shadow. But when there is less contrast between the background and the foreground, KC, there's a lot of similar colors in the here in the background. It's really hard to work this out. Let's give it a go and remove background. I try to pick something hard. I'll jump cut to when it's done. Actually, while it's going. Oh, that was a good transition. Can you see? I didn't know what to do. It's done a pretty amazing job. If you've ever done Photoshop masking a year or two ago, this is still pretty good, and we could fix it, but it's done a pretty great job of figuring out where her he ends and the background starts. Probably not passable against a white background. But look down here. It's grab the finger it's figured out where the hole between her arm is. If you've done it before, if you're an old school master, you will know that half the bol could easily be missing and definitely the finger would be gone and half of the background would be included. Oh, man, it's doing really good. This would work if I had a black background so the Iki or a dark color. I wanted to crop here into this and it was a dark color. Move it back. Molding command in my first square bracket or control, KC, I've masked out the background. I've just worked around the issue of that part of the mask. It does work great. But if you do need her against a white background, you would need to go out something like Photoshop. Photoshop has all the manual tools, whereas Figma does not. It's a one shot at the moment. The other thing to note is if I select on her, actually, I'm going to get rid of that. This is because I've done this video a couple of times. To go, Dan. So what happens is when you do a mask, you end up with these two layers. So the background one, can you see it's still there? So if you do need to get back to it, what it's done is it's generated a completely new image, fill on top of it. So you have got both of them still. Okay? And that's gonna be handy when we do kind of a spillover mask in the next one. But no, there's just two fills. You don't need this one, okay? It's not required, but there you go. It is pretty amazing. Actually, let's add some 80 spectacularness. You can go now you're dismissed. But if you do hang around, there's a cool little tool I want to show. For color picking. So I'm going to use the triangle holding shift to make it proportionally width and height. And going for that, I'm going to pick a color. So I'm going to grab the eyedropper and parts of me just want to make it darker. Ok and maybe stick it behind it. I'm going to hold my command key down, or control key on a PC and use my square bracket. That's cool. I want to undo. I want to find the contrast color to this. I'm going to select the color here in my color fill. About to a cool website called figma.com slash Color Hyphen Wheel. What you can do is you can just paste in that color, head enter. And it defaults to complimentary. You can see you've got a great color that complements it. These are the ones are Bt analogous, they're meant to be. I don't know. I never use these ones. They're scientifically useful as in the triangle, but I don't know, complimentary is the only one I use, happy little copy by just clicking on it. I love that. I'm going to paste this and I've got a nice contrast in color. I probably want it to be just a smidge bit darker and move it to the back. Here we go. 1980s. All right, we'll do another one with this. So the O key for the Ellipse tool and I'm going to hold down two keys, the option and a shift on a mac and that's Alton shift on a PC and you can get both a round circle and you can start from the center. That's cool. All right. I'm going to pick a color. I'm going to move it backwards for my palette, and I'm just going to guess the complimentary color. I'm going to use actually my eyedropper tool to grab one of those purples, and then I'm just going to go ik over here and try and get the other side. That's pretty cool. Maybe, maybe down a bit darker. All right. We're doing it. All right. That is it. That is remove background, and I believe we've recorded the right screen this time, happy days. I'll see you in the next video. 72. How to make a spillover mask outside of the frame in Figma: Hello. I'm going to show you how to do the spillover mask. It is pretty easy. It's a little bit bamboozling, but I like the effect where the product spills over. You can see like that. Same with this image down the bottom here, we go through and crop it using our masking, but get it to spill over the product, and I'll show you how to dark in the background. Effect. Let's jump in. I'll show you how to do it. To get started, bring in image 14 and 15. Let's do this one first. We're going to use what we used before, remove background. Gates done a pretty good job. Remember, we've got the background still there, so this is the trick. We're going to have two versions of this. This one's called image 14. Let's just call this one top. Let's copy and paste, not the fill, but the actual layer here. Sometimes if you have the layer selected, it'll just copy the fill. I just want to copy the layer here, copy paste. I've got two of them, have top and the one on the bottoms going to be called bottom. This is where it gets a little confusing. Let's turn the eyeball off on the top one. Boop. Nothing really changed, so we're looking at the bottom one. This bottom one, I want to turn the mask off and the full version on. Confused. It's a little confusing. It's like the inception. Let's grab the Oh, the ellipse tool. I'll shift and option or shift and lt, and I'm going to get it so that I get a bit of the background and the lid sticks out the top. Now I want to mask with background. Who knows what is wrong by masking these two together? That's right. This needs to be at the back. I'm going to bring this actually to the front using my square brackets. Now I need to slick this plus the ellipse, and I'm going to make a mask, hit this button here. And we're done. Sh. We just need to turn on. That's our top. Let's just move it so it looks there. Actually, no this is the bottom and we're going to turn our top on to fill that part. Ah, inceptiony. I know. Basically, you need two layers, one that is masked completely, which is that one, and then one that is masked just into a circle, that one. But when you lay them on top of each other, it's a spillover mask. You're going to do the same for this one. Let's see how well this mask, actually, I didn't check. I was just hoping move background, please don't keep the tree. Please don't keep the tree. It did a horrible job. All right, I'll leave that in here. It was a good idea. Thumbs down. You did not did a good job on that one. I just want this purse. Oh. Let's still work around. Let's see what Dan would do. Let's undo that. Oh, yeah, I know what we do. Will it work? I do not know. So I'm going to have image 15. I'm going to copy and paste the layer. I got two of them. Let's turn the bottom one off. Let's grab the top one. Let's call them give them some names, top. This one here is going to be bottom. I'm only doing because you are watching, trying to make this clearer. Great name. All right, so what I'm going to do, I'm going to double click it. I want to crop this thing, and I want to see if I can get it too. Crop this first. All right. Let's give this a go. Yep yep yep. Close it down now will you move background? All right. I'm a genius. Now we can turn the bottom one on and turn the top one off, and what I want to do is just mask this. You can do that way I just showed you by going in here and switching it to crop. There is a shortcut. You can hold down the command key, and it will or control keyOPC and we'll just jump straight to cropping. That's what I want. I want you, I want you, maybe even a little bit lower. Something like that. We're going to do it. There we go. That's what I was looking for. What is it? It is a hero box. Let me add some text to it. Now I'm just missing around so you can leave if you like. I'm going to grab my rectangle tool and I should use a frame. I'm going to drag this out. I try and get it to snap to the edges of this. It will. Good. Show you what I want to do to get the text to pop out of this like at the beginning of this video. I'll back and record the intro afterwards. Will this work? I don't know. What I'm going to do is I'm going to fill it with a gradient. This side is going to be black. This side is going to be black, but have a better transparency, actually full transparency, then I'm just going to move this over here, something like that and pull the transparency down this one. Is that long enough? Feels like it's long enough. Now I can add text to it. Type to pick a new phone, I'm going to use my ultra, going to break it into two things, and that's it. I'm going to pick some colors, play with the line spacing. All right, it's got colors. I did feel it was going to be better. Anyway, that's what we got. It seemed cooler in my head. But it was handy to work out a little trick to get around our masking issue where it wasn't masking everything. So a win after all, and that always looks cool. Images poking outside of circles. That is it. I will see you in the next video. 73. How to Mask Images with text in Figma: Hi, everyone, I'm going to show you how to mask an image inside of text. It's super easy. The text is still editable. There's a couple of ways of doing it. Let me show you how. Let's get Rowdy. Is that how you spell Rowdy? That'll do. We're going to start with the sweet shortcut because if you're going to mask text, the text needs to be thick enough to see the image. You could do it in text, but it's not as good. We've done early in the course, you can hit Command or Control B, which just makes it bold. But did you know you can hold down Command option that's Control Alt on a PC and just use your greater than and less than. Oh, I know. It plays around with a weight. Can you see over here, I'm going to use the shortcut, watch. It goes from light to regular to medium semi boold. I'm going to go all the way up to black. You need to have a font. I'm using Inter that has all these different options, but that's a cool shortcut. All right. So what we need to do is the best way, in my opinion, is we don't even need that there. We need to have it selected and we can go to edit and go to copy properties. With this one, we can go to paste properties, which is in the same bit or you hold down Command Option V on a Mac, Control Ol V on a PC. Now, it's in there, so it's masked. I clicked a terrible image for it because it's kind of centered in the middle of it. What we can do is I'm going to give you another. Actually, just give you the long way, then I'll give you the shortcut. So the image is in there. It's a fill as part of this text. What I can do is click on the image, and instead of trying to fill the text, we can hop, not tile, crop the text. Okay? So we can grab this background image and find something that's a bit more like what we want in terms of the cropping. You can rotate it in here as well. I need to make it bigger now. You get the idea. So it's just a what was the sweet shortcut to jumping to converting it to a fill. Let's go back to where it was broken. Let's go there. It's not a crop image, but if I hold down my option KenemacO on a PC and if I double click it, somehow magically, that's a shortcut to switch it to a crop instead of a fill. Is that useful? Probably not. It's the advanced course though. There's weird stuff in my brain that I want to share. There we go. Okay, that's one way of doing a mask instead of text. The benefit is that we can get rowdy and you can see it reflows. The text is fully editable. The other cool thing is, can you see in the Layers panel? It's just this text that happens to have a fill. The other way of doing it is with a mask. I'm going to grab that.Ge rid of the fill at gray back to where we were when we got started. Grab my tool to scale it down, get it where I throw it in the middle. You can use just a mask. There's nothing really wrong with it, except that the text needs to be behind. There we go. Now I can select both of them and use my mask tool. I think it's Command Option. No, that minimizes it. Oh. Alright, we're back. I can't remember. So with these two selected, there is an option up here that says uses mask. There it is. It is Command Control M. Otherwise, it minimizes on a Mac. Imagine that's still Control Alt on a PC. Give it a go. Not sure if PC has the minimize. The difference here is, can you see this ugly old masking group? It's a little clearer, okay? So, you know, I can see my text. I can see my image. It's in this thing called mask group. There's nothing really wrong with that. Okay? The text it's still editable. Is it still editable? Yeah, it is. It's weird, though, doesn't show it as a bit of type, and if I double click it, I go into the mask. But if I grab my type tool and go in here and I go and select it, it does work. Really get the idea. Up to you how you want to do it. Both work, and I show you both because you will get somebody's file and somebody will have it done like this and somebody will have it done like this and you'll be like, What the heck? But now you know. Plus, we learn some other sweet shortcuts. Option or double click goes straight into making it a crop. And for some reason, I really like the shortcut for the weights, command option or Control Alt and use the greater than and less than keys to kind of work through the different weights of the font. Oh, we're getting advanced. All right. That is it. I will see you in the next video. 74. How to use colour layer blending modes in Figma: I Hi, everyone. We're going to look at color blending modes. It means we can do some interesting things with this JPEG that doesn't have any transparency. We can say, all right, Bam, you are see through now and we can do some creative things with colors and images. We can do it with type as well where it affects the background, it's called layer blending modes. Let's jump in and check it out. To get started with, bring in from your exercise files, logo, one, two, and three. This one here is just a JPEG. But I need to make it transparent and that's where blending modes can be handy. Where it's selected, use this little tear drop over here and you can work your way through normal is what it is by default. But you can see oh, look, multiply and darken. Let's go multiply. Great with a black and white logo. You can see it is now see through. Very cool. Now, it will depend on the image. So this white on black version. Have a look at the same thing again, multiply, doesn't work so well. It works. Watch. There's a hole in it. You might want that. I don't you can work your way through some of the other ones, and let's have a look which might work on this one. Down one works. Perfect. Lightning screen. What you'll find is see the lines there. This group do a similar thing, not exactly, but similar. Same with these ones. These all do a similar thing, but not exactly. These ones similar, but not exactly. That's how they group them. Back to Lighten. Now, when there's mixed color, it can be a little trickier. So I can go into this and darken. It's kind of working, but you can see the difference between normal and multiply. It's darkened up the color a little bit, which me as a designer is a pain in the butt, and when it covers things, you can see does some special things. Well, that wouldn't work for a colored logo, might be enough for you to get by, but what it is useful for is doing some color mixes. Great, when you've only got a logo that doesn't have transparency on the back. You could use your removed background or just play around with the blending modes. You got to create another frame and bring in an image you at. I brought an image called layer blend. You can bring that one as well. What I'm going to do is I want to set it to the background. We can just leave it sitting there. It doesn't actually matter whether it's a fill on the background frame or just an image sitting right at the bottom of my layer panel. Et's leave it like this. What we can do is go to image and we can go into here and play around with the blending modes inside of here. But actually, first, what we'll do is we'll play around with the exposure. Actually, let's play around with saturation, yank it out, and then play around with contrast and exposure to get what we want. What we want is, I don't know. I'm just messing around with it. Monochromatic so that we can draw stuff over the top. I'm going to grab a big old circle the ok, whole shift, big old circle. I'm going to pick a color, maybe one of my colors here. The cool thing about this is, I don't know where I'm putting it is you can play with the blending modes of this as well. The color here under appearance here like we did before with those logo images, get the same little teardrop, and we can go and play around with. Look how cool that is. Plus darker. Oh, I like it. Spend ages cycling through these and finding the one. I like that one. Overlay. You can have more than one and you can see they double up. I'm actually going to pick another one of my colors, 500. Let's try this one. There's an interesting overlay here. There's some cool things you can do with blending modes. You can do it with type as well. I've made another frame and just brought in some text and we can do the exact same thing, and use my Ka tool actually to make it nice and big, rotate it around. It's going to be a big bit of abstract text. Okay, and back to my move tool and appearance. Same thing. Just work your way through, find something that you like, or Olagds my favorite. That's pretty cool. Ooh, difference. Okay? So blending modes can be applied to everything, and you just get different effect. Sometimes it's useful for logos, sometimes it's just kind of like a creative effect. This can be recreated in CSS, or you can just export this as an image to be used in your app or website. Right, that is blending modes. I'll see you in the next video. 75. Class Project 18 - Social Media Ad: Hello. It's time to do a class project. We're going to tie in a lot of the things that we've done earlier on. Okay? So here it is, Class Project 18, you're asked to make a social media ad that promotes your app. I just want you to include these techniques. So text mask, spillover mask, and layer blending mode. Spillover mask is something that I made up. It's just where things kind of hang out like this one here, the phone hangs out. Outside of a mask. We did it earlier on, but just so you know, I don't think anybody else calls it a spillover mask. But there's my text mask stuff inside of it, and I've been playing around with the background here with blending modes. Doesn't have to be creative genius like mine. I don't know. It is quick. It's more about getting those three things in there and practicing with them. What I did was create a new page called social media add and I used the square Instagram size, which is 1080 by 1080. I don't mind actually what kind of social media ad or size. It's mainly around the masking techniques. Have fun. Make something. Well if you like me, forcing techniques into an ad ends up with average results. Practicing. But if you do make it, I'd love to see it, share it on social media, as well as uploading your assignment. You can either take a screenshot or you can click on this and remember use the Export up to you, upload it to the class projects and share it online. Tag me if you can. That's not the right example. There you go. Fixed. All right. Have fun. I'll see you in the next video. 76. How to add Video in Figma: All right, it is time to learn how to use video inside of Figma prototypes. We're going to sneak this happy little Pug inside of text. You can use it just in a regular old video frame as well. You can click it to get it to stop and start. Yeah, let's look at videos and happy Little Pugs. All right, one quick thing before we get started is that if you're on the free version of FIGMA, I don't think they let you do video. So it's kind of a watch and learn about how to use videos. But if you've got the free trial or you're on the paid account, we can make video stuff. Jumping. I'm going to start with just an empty frame with some basic Nav on there. Now videos are imported just using the normal import image. Command Shift K, Control Shift K on a PC. In the exercise files, there's a videos folder, and I should bring in this because it's more, I don't know, lame techne, but I found this guy. I'm going to bring the pug. I'm going to click open. Like before with images, you can click once and it will come in at full size. Otherwise, you can click and drag. It can take a little while to be ready to import. For some reason, shaking your mouse about seems to speed it up. When you're ready, just click and drag it out. Perfect. You've got a video. That's it. We'll do a little bit more, but let's preview this guy. Taking a little while to load, but there it is. There is a happy looking pug. Now, let's have a look at a little bit more detail. With it selected, what you'll find is that you can have a few more settings for it under the prototype. You can see here with the image selected, under prototype, I've got things like autoplay. By default, it's going to autoplay. You can get it to loop if you want to. It is by default looping, you can turn the sound out if it has some. You don't want it. Mine doesn't have any. Now, the cool thing about videos is that they're just like a fill. Fill of this rectangle is video like we do with images. Do I have an image one or is an image one? Please hold. This one here is just a frame with an image fill. Let's go back to this guy. Here we're getting messy. Here we are. The cool thing about that is that I can grab it, copy it and do things like this. You wait there. All right. ROP to pug. Pug life, we're going to go and give it a fill. Actually, we can just paste it. We copied it from this, paste it on that and it should work. Let's give it a go. It worked. I'm not sure why the font's not loading. It's working. Ignore the font. Let's try it again. Oh, I wonder why. You at the I'm going to close figure and open it back up? All right, I did. Just turn it off and turn it back on again. Pug in the text. I love it. The dog looks like he's permanently pushed up against glass. There are some limitations. I'll play most video files, MOVs, MB fours, that type of thing. You can't put gigantic files in there. I think it used to be 100 megs. I'm not sure what it is now. Don't try and put two gigabyte video files in there. Let's add a little bit of interactions to it. At the moment, it autoplays. Let's turn that off. What we can do is we can add an interaction that says, I want to play and pause video. It's got this little interaction that doesn't go anywhere. But hopefully, if we do this, bottom to autoplay, this one, though, we only play when we click it. We're doing it. All that's it for adding video. Pretty simple. Let's add a little bit more interaction in the next video. 77. How to make a play pause button for video in Figma: Hello. In this video, we're going to create a play and a pause button for video inside of Figma. Let's jump in. All right. To get started, I've brought in two icons from my icons free folder. It's called Video icon play and pause. I've also brought through a video from the videos file. This one happens to be Video 02. What we're going to do is these have come through really, really big. I'm going to make sure I click the parent frame, hit K, and just make sure they are. I'm going to make them a height of 32, probably. I'm going to use these two. I'm going to make them components. I'm going to say you are multiple components. I should move them to my components page and then I'm going to drag out instances of these just to do everything right. I'm going to mix these around. You go over that side and we just pause, you're going to go that side. A little big. It's okay. What we're going to do is we're going to say button in a prototype mode. We're going to say you have an interaction, and when you are clicked, I want you to play something. What? What video? I want you to play the only one on this frame. And do I want it to toggle? No, I just wanted to play. Let's give it a go. Let's preview this frame. Video takes a little while to load, and then it does work. The button is working, but it's on autoplay. Who remembers where I can turn off Autoplay? It's right there, Dan. You're right. Under prototype with the video selected, turn Autoplay off. Now let's get this one to play. Let's go to some random page. Let's click on this and preview, and now so it's not autoplaying, but I hit the play button and it plays and I need to hit pause. I'm going to do the exact same thing like I did before. You on click, I want it to play pause of video, and what do I want? I want to go to that video, and what do I want to do? Pause only. All right let's give that a go. Play. Pause, we're geniuses. Look at us. Now, we won't cover them all. The other things you can do with video just because I don't know. Video in mockups, maybe going a little bit far, can be handy for some of them, especially if you're doing a specific app around video, then you might have to put a bit more effort into getting video to work in mockups. I want to show you in here, you can do on click Play pause. There's things like mute. You can jump to a certain time, you can jump ahead a few seconds. There's a few other things you can do in here. They're pretty self explanatory. They work the exact same way as play and pause. I'll let you have a play with those if you need to. All right. That is play pause of video inside of Figma. 78. How to get a video play when you hover in Figma: I Hello, there. We're going to get a video to play when you hover over it. Look at that. Ignore that we're on a mobile phone, which cannot hover on. I just happened to be working on mobile at the moment, but this would be for a desktop site where the mouse hovers over and it starts previewing the video. Very cool. Let's jump in. All right. I've just brought in video. Let's preview it. It just auto plays like normal. And what you might assume what I assumed when I first did it was that if I switch to prototype mode, option nine, Alt nine, just a little reminder to go to prototype is that you probably go, right, just add an interaction and on Ha I can get the video to play. It switches. It says, No, you got to be click. You're like, that doesn't work. I'm going to get rid of that interaction. Make sure you get rid of it. I also acknowledge that I'm using a mobile phone, which you can't hover on. That's right. Pretend we're on a device like a laptop, we've got a mouse and you can hover. What we need to do is we need to say you over here, we're going to do a variant. We've done these before, but just not with a video. Back to design view, we're going to say you're a component. We're going to have two variations of you. One of them is going to be under prototype, video selected. Oh, that's a good point. If I have this and you're like, Where did Autoplay? What's happened is, can you see over here, these variants are wrapping up the video. If I have the video selected, I can play with the autoplay. It's also name the better. This is the bottom one. This is variant property name of Actually, name them over here. With the parent selected, go to design. Let's name this all nicely. This one is called video hover, and we've got this first one, which is called default. I'm going to rename this one. This one is the pause. Why not? This one is called play. Remember, to get the autoplay, we've got to be under prototype. This first one, we're going to either double click or go inside the variant and grab it and say, the first one autoplay. This one here, go inside, grab the video, you do autoplay. Now we need to add an interaction, grab the first one, not the video, but the parent variant. All I know this is weird. What we're going to say is say, you go there when it's clicked. No, when it is hovering and what I'm going to do is going to change this thing here to video hover, that's going to work. Do we need to get it to change back? Don't know. Let's grab an instance of this, drag it out. That is a variant like we've done before. Just a bit weird that we're playing around with a video. Let's give this one a play, not working, not working. Hover. Hey, go off, and it stops. Whoo. Oh, we're on a mobile phone, which you can't hover on. But we did it. All right. That is how to get a video to play when you hover above it. All right. I'll see you in the next video. 79. Class Project 19 - Video Card: Right, it is class project time. Don't worry if you've got the free account. I've got a side quest for you to do. But if you have got the paid Figma of option or using the trail, I want you to build something like this, a card that has the pause. Let's have a look at the details. A video card that has the play pause button and a video title. Do a little research into the UI for video players. I've given you some examples of places to go here. You can just have a Google search of video player UI. I've got a really basic one. You might find something a little bit more interesting to copy. Then share a video of you using your video, upload the link to the class projects or I'll let you do a screenshot of your video card. Can't really test if it works. And the same thing for free people. You don't have the paid account. I want you to get creative with the image you upload. I was looking at some of the other ones. You guys are awesome. Come up with your own version of something quick and easy that is I don't have the paid Figma account. I love all of these. All right. Whether you're paid or using the free account, get creative, build a video or I'm not sure why there's a cat involved, but upload something to the class projects. Hopefully, you have the paid version and you can get it to work. Otherwise, crying cats. I'll see in a bit. 80. Advanced color tricks in figma: Hello, my friends. We're going to get Nerdy with color. I'll show you some of the color tricks and some of the weirdness that happens inside of Figma. Let's jump in. First one is I've got a plain frame here. Eyedropper tool is the eye key for eyeball, but really it's the eye. You know what I mean? I can grab colors from the image. See here, I'm going to grab it and it gives me the ix number for it. Trouble is if I use Eyedropper tool and steal it from, say, this here, which has my style color applied, you see it brings in the x number, not the style. If I click on this, that is a primary color style. This has stolen just the hex number, they're not connected. If I update my style, this won't come along for the ride, which can be tricky. Back to the Itol you can do is can you see there if I hold Shift and click it, you see it will say not the hex number, but the primary color. Now these are connected. Same over here. I want this color, but I want the actual style, hold shift, and it will grab the style of the color, not the hex. That can catch you up. The next one is that if you click on, say, an image and you want to lower the opacity of it, you can use the numbers along the top of your keyboard. You probably know that one already. Hit four, it'll change it to. Can you see the opacity to 40%, Type eight, for 80, if you're quick, you can do 66. It's going to be nice and quick. If you want to go back to 100%, you hit the zero and if you want to go completely see through, zero, zero. You just got to type them fast together. Ten, 20, 30, zero for full and double click zero to go to completely transparent. I'm going to go zero once to bring it back. It works for anything you've got selected. Colors images, even works on the video. One, if you play around with your film and pick any old color, if you've got a scroll wheel, have a look at your mouse, you might have a scroll wheel, you might not. I do. I use my scroll wheel over this color area here. Can you see it just misses with a hue. I can slide on with my scroll wheel. If you hold down the option key or old key on a PC, it'll play around with the transparency up and down, see? Useful? Maybe not. I use the hue one, not so much the opacity one. The next one is down here. By default, it's on Hicks, which is easy to copy and paste between programs. GB, you might have a corporate manual, you want to type that in there. CSS is an interesting one. If you are using CSS, or you do need to give a color to your developer, this RGBA, which is red, green, and blue, and this is the transparency Alpha. I put in 0.5, it's going to be 50% transparent. I don't use HSL, hue saturation lightness. I use HSB a lot, Hue saturation and brightness. Similar. The reason I like this is that I hate having to drag this down and I wiggle it down because you're like, I want a dark color. What you can do hue saturation and brightness, you can go, Alright brightness. I can hold my shift key and just go up. Can you see it just jumps up and down. I find that really good for picking a really dark color of that specific color without going hope it goes straight. I just click in there and use my shift and go up and down, let go of shift, then it will do in smaller increments. I don't use these, you can. Saturation goes left and right. And hue is just the hue slider. I don't use that very much, but I do love grabbing this one and going a little bit down. I want a slightly darker color of that one. I switch to HSB. They're all the same color when you're finished, just different ways of representing. That's it for the color nerdiness. There's one last thing. It's kind of I don't know. It's part of Internet law, where you can actually just type in red. Okay? I can go in here and say, I want pink. Why is this cool? It's not really cool. It's interesting, especially when you start getting to things like, Alright, I want gray. What about if I spell it the other way? There's two spellings of gray for some reason. They are exactly the same. Somebody went round and named every single color. Well, not every single color, but there are lots of named colors. They get really weird. Like this. If I go dark gray, you can't have spaces in between them, dark gray, somehow lighter than gray. Then the great names, okay? Peach Peach is a good name. But watch this. PH puff is a great name. So if you've got a color and it's close to a name, I don't know. It's great to be able to type it in, but it also makes a really good branding part of the operation where you're not using FDA B nine. You're using Peach Puff, way cooler. You know, you can have a little look online. Here they are here. Okay? This is the w3.org. You can see, have a look through all the named colors. There's some weird ones. Find a weird one for your brand. Lemon chifron. Oh. Don't like the color, but I like the name. Alright, that is it for advanced color stuff. 81. How to change replace colors in Figma: I Hey, there. In this video, I'm going to show you how to update all your colors at once. Some of my things are using the color style, the right one and this one here is using the ix number. I'll show you how to select them all and update them, so they're all using the style, not using bits of both. Let's jump in. All right. When I started designing, I just started using this color before I turn it into a style. It's really common. You might have accidentally used the eyedropper tool installed the Hix number instead of the official color style that I meant to be using. The way to go and change them all to make sure you're consistent, you're using the style everywhere that color, not the Ix one is just do a selected. Just have nothing selected and do a select A, which is command or control everything is selected and come down the bottom here where it says selection colors, there's too many to show, it says, Would you like me to show you them? Yes, please. What we can do is you can see, it's giving you the main ones up here or your styles. But you can see down here it says, show me all of the other colors. The one I'm looking for is, what is it? F four, 746b. I'm going to sect, go back down here. What I'm going to do is I'm going to say, show me them all and I'm going to find that one, not you. There it is there. I'm going to say, don't be a hick number. I want you to be that style. It's going to go through every use case of that. You notice it disappeared from here? It's because now all of those colors are all connected to the same color style. There it is. I bet you've got it for the green as well, somewhere. There you go here. It's not connected to the style, Wendy C two, selectol, come down here, just tidy everything up so they're all using the right color. Is that it there? Few I think I've used a few versions of that green. I'm just going to go and switch this one to this and just make sure everything is consistent. Because often at the beginning, you're just messing around with colors, and then you tidy things up. That guy wears me out. All right. That is how to update all your colors at once. Obviously, if you've got them already part of a style, you can work your way through and say, actually, I'm going to adjust all of these and adjust the style to this new color. Don't know what this new color is, but you can work your way through and adjust your secondary style and just kind of work your way through the different colors. It's an easy way to update it. I go back before I broke it. All right, that is it. Selecting and updating lots of colors at once, getting them consistent. All right, next video. 82. How to create Color Themes for light and dark in Figma: Hey, there in this video. I want to show you this tool here that I use. Just a quick one. I find it super useful. You've picked your primary, secondary and accent colors and they're great for large blocky things. They look cool. But then you come down to things like this. What are we going to do in terms of different text boxes? What does it look like with a light scheme, which often we design for first and then you like you need a dark scheme of it. Let me show you how to input all your data to get an idea of what's going to work and what are good contrast. Alright, I've added a link for this in your exercise files or your class projects files. All material theme builder. It moves around, so you might have to Google it if it has moved and the link's broken. What it's really cool for, though, is it's great for just color picking at the beginning of a project. You can go through and just say, Oh, give me some ideas of how the UI might work. There is a standard contrast, medium, and a high contrast. What's really cool about it is that I've picked my fonts, so I've picked ultra and Roboto, as the ones that I've used. But what you can do is see over here, you can add your primary secondary and tertiary color. I'm going to go into Figma and say, All right, primary color, where are you? There? I'm going to grab this. I'm going to grab this one down here. I'm going to grab the hick number, and I'm going to click in here, paste it in and click Apply and you can see it saying, All right, that's your primary color. Actually, let's add them all first. We'll speed mode. All right, so I've added those colors, and it's really interesting to see what this tool does with my colors. Can you see if I scroll down the bottom? That's my primary color, and this is where it says I should be in terms of a good contrast between light text and this colored background. It's darkened it right up. You don't have to, but it is a really good sense because sometimes you end up like this. Over using your really strong brand colors to do very utilitarian things. Let's say we need accounts page, you need to change out your email preferences, probably using your full big bold primary and secondary colors to do that. It's probably it devalues it in terms of attention. What you can do is come into something like this and say, I'm using this might be a better way of displaying data or down here, just like little panels. Email preferences might work better in this case here. It's just subtle, it's not big and bold. You might decide, actually, I want it to be a light contrast version of all of these. It's not so dark. When we are dealing with some of the utilitarian parts of an app, you might decide which heavy medium, especially if you're given brand colors. You're working for a company that already has a brand logo. You don't want to just throw it everywhere like we've done. You can come in here at it and this tool here, don't worry about if it's IOS or you're doing web stuff or for Android. It's just a good way to look at your colors in another way that is a really good consistent contrasts they're easily legible, for some reason, way too rounded corners. Anyway, I like this. I love throwing my colors into it, especially if we've already got brand colors to get a sense of what we might do, and I do like pumping it up to the height contrast. Dinnerwy. You can then go through and say, All right, I want to copy that color here and you can paste that into Figma. You can pick your fonts as well. I'm using ultra and Roboto just to get a sense of what it might look like. But again, more suggestions, I find it useful. I thought I'd share it with you. All right. That is it. That is the material theme builder. I like it. You might, too. 83. How do you use Team Libraries in Figma: Hi, everyone in this video, we're going to look at libraries. Libraries is a way when we've created a bunch of components now and a bunch of colors and font styles and effect styles. We want to use them in other projects and we don't have to keep copying and pasting them over, or if we want to share them with somebody else on our team, so they can use the exact same thing. We're all consistent. We can create a library, publish it, go to new documents that have nothing applied to it. A fresh document and create a frame and I can say, actually, I would like to load the Limerick library, add it to the file, I get access to all the components. In this brand new document, plus I get access to all of the colors from that library. I have to copy and paste or start again. The best bit is I get to share it with other team members as well as myself. All right, let's jump in. First, a lot of these features are for the paid account. They keep changing it on me, see how far you can get on the free versions. Well, in the past, you've been allowed to use the colors and font styles, but not the components. I know this talks of making this completely paid only, but see how far you go. The document that I've been working on that I've created a bunch of components for a bunch of color styles and textiles, fix, variance, variables. There's lots you can keep in a library. Create the library, being the document you want to create it from, which is this one. You go up to your Assets panel and there's this little book icon. On that. We're going to say, I would like to publish this as a library for other people to use. I'm going to click publish. It's going to say, Hey, you can't do it because it's in your drafts. Would you like to move it? I'm going to say o okie. Do you have a project you want it to go into? I don't I'm going to do is quit out of that. I'm going to go back to my home and I'm going to go to my projects. I'm going to make a new one. Create a project. I know in the free account you can only have three, is it? I think so. I'm going to create one called Limeric techno. Am I going to share it with people? Not right now, I'm going to create. I've got a project for this to go into. Now we can move it into there. Go back here, create a library, publish this. It says it needs to go somewhere into a project. I've got one for it to go into. Go. That's the first part. Now you can go through and decide what you want to include in it. It's done all my colors. Do you want all your components? Just that one. I want to go and say just do all of them. Turn that on, turn that off, and include everything. You might have to tidy up your file first. Especially if you're sharing with other teammates or your future self. Naming things like component four is probably not that helpful. Tidy all that up first. Let's hit Publish. It's going to chug away depending on how many components you have. See down the bottom here, hugs away. Dog, I'll speed through that. What's cool about it now is that if I create a new document, instead of trying to copy and paste stuff from this document, create all my main components, what I can do is just create a brand new file, new design file, I'm going to start building App. I'm going to go to iPhone 16 and now I want to drag in stuff from my assets library. There's nothing in here at the moment, what you can say is can go to the little library book. You can search it. You can say, actually I want the Limeric There it is there. Limerick techno, I'm going to add to this file, close it down. Now, look, in my library's panel, I can go to my components and I can start building this thing here, grabbing instances tons, icons, anything that's been created in here? Oh. Weird. Yes, he was a main component. The other cool thing is that if I want to color this frame here, I can go into my fill and go to my styles and you can say, all libraries, no, I want to look at the Limerick library. You can see here all the colors from that original document so that we can keep things consistent. What's really cool about it is that this original file, libraries feel like there should be something separate. Where do I find my libraries? Libraries aren't a thing on their own. It's just the connection between this original document. If you're creating a team library, your file might have to be tidied up and not have all this junk everywhere and just keep the components, the styles, make this one a little tidier because there is no library file. If I go into this and say, go back to the main component. It's not going to go to a separate library document, it's just going to open up that original file, even if I have it closed. I say, Hey, where is this main component because I need to change it now. It's going to open up that original file wherever it was and show you that main component. This is from my Limerick Techno V one document. Let's say that I need to change this because I want to go through. Actually, let's do it slightly different. So here, I've gone and change the button to say bye now. We've done a few things. We've changed the text and we've decided that this one actually has a different color. We're going to apply the style of 500. If I go back to my main component now and I say, Hey, main component, you are now going to have different rounded corners or is it 100, I'm going to go down to eight. What's going to happen is because this is the main component and that controls my library. There's this little icon here, it says, Hey, there's unpublished changes. Nothing's changed here yet. But here, I can say, actually, I'd like to publish these changes. There's one change to it. I'm going to hit publish. Do you want to publish all of them or just one of them? I've only got one of them. There's a bunch of unchanged ones, so that's cool. Hit publish. What's really nice about it is that this might be connected to 20 other files, and they don't update automatically, which is really good. I can go into here and say, actually, click on my button. You can see up the top here, it's got an option that says, Hey, there's an update available. You're like, who did that? You click on it and you can say, do I just want to update it or can I go to review the update? It's quite clever. Look, shows you the side by side what's going to happen. You'll notice that it keeps my text and the color that I changed, but changes the rounded corners. You can either look at side by side or overlay. Sometimes it's hard to tell what change has been made. You're like, what's happened. You overlay you're like, they've messed with the rounded corners. Let's click Update Instance. Let's close it down and it's updated. It's a great way to control lots of documents. You've got one main component and style document that's linked to lots of other files. The cool thing about it is those libraries can be shared to other people in your team. How do they get access to it? If you go to your project, there's my all projects. Let's go to Limerick Techno. What we can do is we can share either everybody in your team. That's my Binger laptop. Or just type in people Victoria Borode UX designer, I can click on her and just send it invite to her so she'll have access to this library. You can decide whether she's able to view it and not change it or whether she can edit it as well. She does all the UX here now bringing her laptop, so she can be able to edit it. Often she'll share files with me and I ask for view only, so don't mess with things. Cool. The big thing is that there is no library to go and find. It's just a file that can get published. It has to be in a project, and when you create new document, you can load that library to make sure that you're using all consistent buttons, consistent colors, and styles. Search right at the top, there it is there, and I'm going to add it to the file. It is there. They don't appear over here in the styles. But when you do drag them out and you go to styles, they are in the one that you've connected up. They are all there. You'll notice that we've got fill styles, the colors, but we've also got some of the effects that were in the last document as well. We did dropshadow effect. We made a style from it. Cool. Libraries are great. They've got to be in a team project. You'll need to double check on the free account, actually what's included now. I know in the past, up until recently, you were only allowed colors and font styles and not components, but I know they're talking about changing that. That is the awesome benefit of using team libraries inside of Figma. I'll see in the next video. 84. How to hide color font styles & components from team library in Figma : Hi, everyone. This video, I'm going to show you how to create this hidden folder for components we'll hide colors as well from the main library. It might be components that you're working on or just components that you know the team doesn't need. You can turn them off, hide them from the shared library. You can do it with colors as well, and I'll show you this name and convention of underscore at the beginning. Alright, let's jump in. Right to get started. Let's be two separate people. Dan and Doug. Doug is working as a colleague of mine. Creates a design file and he goes, I need to connect the library that we're using, and he goes Limerick and finds it. Limerick tech no V one, adds it, and then he can start working on a new project, but using all the components that were used. Drags out some of my buttons and starts working away, has access to the colors. There are some things though I don't want Doug to have either they need to be part of my file, but I don't want them published yet because they are upcoming files. Maybe I'm using them, but nobody else should be. What we need to do is we need to go back to being Dan. We need to go back to the original library creating file, and we need to it's quite easy. Under the Assets panel, find the thing under components that you don't want part of the library, and you can just say hide when publishing. If you go back to being Doug, it might take a second, but eventually, come on, it'll disappear. It's not disappearing. I know why. So if I turn it off, I've hidden it, I need to then republish my library. You can see that little dot there means there are unpublished changes. I now need to publish it. There's only one change and we've removed the object button. Publish now, go back to being Doug Doug should lose access to it. Yes. Okay. The thing to note, though, that any uses or instances of that main project that are already out on projects aren't going to be like sucked back into the library. Okay, so that's good. We don't want that. Okay? But now they can't be used for new projects, the old files, the old components. Let's say I want to turn it back on. Okay, I'm back to being Daniel. I'm the boss. I need to turn it back on for access. What you'll find is that it's kind of gone from my Assets panel. If you go back one, okay? Is there a little arrows go back one from components, there's another folder called hidden. And here is my button. Okay, and I can we click it and say, Show publishing. I just got to make sure now I go up to here and say, publish my library, and Doug will have access again. Thing I want to show you is that some people don't use the right click hide when publishing. They just rename it. I'm going to go back to my files. I'm going to find this asset here and I'm going to double click it and people will put an underscore in front of it and that will do the same thing. If it does the same thing, you see, it just says, there's one change. What changes it's been removed. The name and convention of underscore right before the name of the component is another way of doing it and you will see that and you'll be like, What the heck is that? It's just another way of doing the same. People like it is that you for colors here. I'm in my library creating file and you can see I've got all these colors. Let's say 900, I don't want access. We don't want people to use it. I need it in my working doc here, but I can say, same thing. I can just put in an underscore. There's no way of right clicking and saying hide color style. So what they do is they just let you put in an underscore in front of it as well. Same thing. If I publish it now, it's publishing and removing that color file. And by color file, I mean color style. If you do find other people's documents, they have underscores everywhere, it's because they're removing them from a shared library. I'm going to turn mine back on and I will see you in the next video. 85. How to move relink refactoring components to another design file in Figma: We're going to look at something called refactoring or easier to think of it as relinking. We've got our file that we created our components from, but it's messy. We've got all of this on here, we've got social media ads, images, things that we don't want on our main components or our styles. We want our styles just to be nice and just all on just its own one documents. That's what we're going to do. We're going to move our components and we're going to move all of our color styles to the separate document, and the cool thing about it is Figma will relink them if they're used in any other file. The end result is I'll have this nice clean design file that just has my components in it, just has my styles in it, no working, no mobile layouts, no nothing else, and that is much easier to share with the team. It's called refactoring. Think of it relinking to another document. Let's jump in. To get started, I'm in my file that I created my library. This is my big messy file. I go to here, it's got all of my mobile designs. It's got my components, which is handy, but now I need to pull them out and put them into its own file so that people aren't accessing this messy old file and you have to keep it around forever. So let's make a tidy one. To get started, I have created just a brand new document. I've connected the Limerick library and I've used a component and a color in the background, so they are pulling from this library. I want to change that. To change it, what you do is let's create a new file, and I'm going to create a new design file. I'm going to call this one. Limerick techno, I'm just going to call it main. And all we do is cut and paste things over from it. I say that's only thing. There's a couple of other things, but that's the main chunk of it. If I go to here and I say, this item here, I want to find it in my components. I'm going to go to cut, which is Command or Control X, just your regular old cut. You cut it and you paste it over here, okay? Give you a warning saying, Hey, you've moved stuff from a library. You need to publish it. I can do that, but that's the main thing. You cut and paste things over to this new document. To make it all work and so that things aren't broken because this file that I made here has got this button in here. What does this do? Is it linking to the old file or the new file? To make it all work, what you need to do is publish this. I'm going to go to my assets, I'm going to say publish this thing, I'm going to have publish. It's going to say a couple of things. We know that you can't have it in drafts, so I can move it to my project. I'll move it to my Limerick techno folder. Move it in there just as a separate design file. And I'm going to make sure all of these things are changed. It's going to give you a warning. It's going to say, Hey, things have been cut from here to this document, but other documents like my new design and 1,000 other projects, use this. They're going to get a warning. That's okay. It's big and red and scary, but it's not that scary. It's published. What you'll notice is that my new file here is going to say, I've got some updates. What are those updates? Let's click on its have a look. All it's going to say is, I just clicked update. All it did was update the link where it was going from. It's now not going from Limeric Techno V one that had all my junk in it, it's coming from this file. Let's just double check. Okay, let's click on this. This here, come back here. You now can see I've got two libraries connected to it. I've got this one here, that's got one component, which is this, and all these other things. Now I should go through, remove all of the components that I want to be in my master main component set, just keep moving them over. The cool thing about it is refactoring them for you. You just cut and paste them into your new document, make sure it's published, and any file that was using the eject button, we just have an update and nothing really changes except where it's linked to. A much tidier file. We can work hard on this one, keeping it nice and clean rather than our original one. Does that make sense? Now, the main problem people run into is publishing. People forget to publish and they'll be like, it's not working, it's not coming across. So just make sure everything is published and updated. What I mean by that is go into here and just make sure this is got no outstanding publishers. It's got no changes. That's fine. My main has got no changes, needs to be published. Okay? And make sure all the other files that you open, go to the library and just check if there are any updates. We do the same thing with colors, it's still one more time to make it clear. Colors are a little bit different Colors, I forgot nothing selected reside over here at my Properties panel. Let's say that I want to grab all my primary colors. I'm going to go to cut, same as before. It goes from this document. I go to this one, I paste it. It says, you got to publish it, I can publish it. It doesn't matter where you go from. I click publish down here or if you do it from the little book here, hit publish, and if I go back to the file that these might have been used in, you might have to go here and then go to updates and you can see one is updated. Let's click Update and that's it. Done. Is refactoring now and I'm just going to do the slow process of going through everything. So what I'm going to do is actually grab all of my colors now. I'm clicking the first one, hold shift, cut it, to my new one. Let's do it again, let's paste, let's publish, publish all of those things. If you hear any crackling in the background, I got two new kits and they are attacking stuff in the office. It's hard to get them to stop making noise. Would you to quit it? All right so it's updated, let's have a look at everything. You just need to make sure the Styles library is updated. There's nothing here that needs updating only because I only use one of the colors from my styles library. One component from my component library. There's nothing really to update here. You just work your way through and say, this thing here needs to move over. We'll do it one more. You come over here and I'm going to hit publish or do it up here. I'm going to publish it. Publish, please. My new design file here. If I go into my library and go to updates, there's going to be no updates because I haven't used that primary button in this document. I guess I'll access it. There it is primary button. It's a little bit slow and tedious, but it is way better than working from this monstrosity that we've created so far. So much files, so many different pages. You can be really tidy when you refactor it. Just remember refactoring is just relinking. The one thing that will catch you out and catch students out all the time is that things aren't published. Just go through and publish everything, and check for updates on everything, and you will probably find that is your problem. Sometimes I have found that I need to close fig and open a backup. That happens less and less as it matures as a product, but sometimes that is helpful as well. All I'm going to go back to I don't know, trying to do something with the kittens. They need something else to do rather than attacking things near my microphone. All right, that's refactoring. I'll see you in the next video. 86. What are some advanced drawing tips and tricks in figma: Everyone. In this video, we are going to make a mess of a document. But along the way, we're going to learn all of my advanced drawing tips and tricks. All right, let's go. All right, let's start with the Lasso tool. You need to be in the draw function or mode of Figma, and I've got the star that I've drawn. We got to go inside it to start editing the shape, double click it. And I could use the selection tool and I could drag around it and get the points they need, but the Lasso tool is amazing for really intricate vector files. You can just drag around and say, I want you but not any of the other ones, and you can select all of those. Now I can click drag and move them if I want to delete them. If I had delete my keyboard, just delete the whole thing. So I'm going to go back to my selection. I'm going to grab these ones. If I want to delete just these top ones here, hold Shift and hit your delete key or your backspace key. Both work. But if you just do it without the Shift key, it deletes the whole. Call tip if I use my move tool and I click on just one of these, I can use my tab on my keyboard. Look at that, goes through and grabs the next anchor point. That could be really handy. Specially when they're really close together, you can click on one and then tab to the next one. Shift the leap, get rid of it. Poor old star. Next, I want to show you the joint tool, and I've just actually pause the video because I messed it up. I want to show you how I mess it up because I do it all the time, you do the same. If I grab the pen tool now and I click and drag and do all of this, what will happen is I've actually drawn this with a pen tool, but I've drawn it inside the star shape. It is part of the star, which is a pain in the butt because they're not two separate shapes. Watch fi go back to my moveTol click the background. That is one unit. And a little work, but it's not what I wanted. Whenever you're working on, say the star, I'm undoing, make sure you double click the background to come back out so you draw a separate shape that catches me out all the time. Pentl draw a shape and get close to finishing it, believe it gap. You might get somebody else's icon or graphic from another library or icon library. The gap might have come from your drawing. What you can do is just go Command J, and it will join up the two anchor points where there's a gap, super handy because otherwise, I can't add a fill. Command or Control J, join it up. Now I get to add a fill. One thing you can't do, and I don't know, it's cool as well. I grab my move tool, and I select them all and you go Command J, look at this. How. I think we've created a cult, but let's undo that and you can either have these two selected and go Command or Control J or have nothing selected. Be inside your shape. If I double click to come out, it won't work, but if I go inside of it and go Command J, it goes, Oh, you probably mean these two. And add a fill. Next thing is the anchor point for rotation. If I click come out of my random square on the broken star I rotator, it will rotate around the center, and that might be what you want. But there's often times where you don't want that happen and you just hover over here like you're going to rotate it. Waita wait, wait, wait. You see the anchor point in the middle just appeared? Hello. This little target here means you can drag it around and say, I want it to be there. Now when you rotate it, the center of rotation has changed. You just got to wait for a little while. Next thing is pack horizontally or vertically. We've bumped into this problem before. Let's bring in some icons from earlier. Okay, I'm just on a brand new project. I've gone to import. I'm going to go to the exercise files. I'm going to go icons two. We ran it to these ones. I'm gonna bring more in. I place, and it just dumps them all over the top of each other and you spend ages going. You can see how grabbed the frame separate from the vector inside, painting the butt. What you can do is select them all and use our actions, K Command K or click on the button down the bottom here. What we're looking for is pack. We can pack horizontally or vertically and it just stacks them all out. Finally. And if we zoom in enough, you'll start to see the regular stuff that we've looked at before. It's Smart selection. We can go and drag them around. It's non oil out, and we can play around with the padding just to recover. Before, though. Another couple of simple ones is if I grab the pencil frame up here, up here, there's an option to flip vertically or horizontally, just so you know. Let's look at a shortcut for aligning thing. Let's say that I've got a frame, I got my icons inside of it. These guys here, I want to align maybe to the right. It's not really what I want. I want to align it to the edge of the parent frame. I could group them and align them, watch this. If I hold down my shift key and hover above these, can you see with the shift on tapping it on my keyboard. If I hold it down, can you see they change a bit? What it's going to do is that it's going to align to the right of the frame. Use this one the most. Just get them vertically and horizontally centered to the frame. Hold shift. Otherwise, they go in the middle, but they all stack up. You could group them, turn them into auto out holding shift is just a nice little trick. Another one is if you draw something, just comes with a gray box with no stroke. It has a fill, no stroke. You can switch those really easy. Held down the shift key and X. I just toggles. The color from the stroke moves to the fill. Fill moves to the stroke. They just toggle between them. That can be handy. You've got something that has a stroke and a fill. I'm going to make this nice and thick, so it makes it easier to see. I've got a stroke and a fill. You can toggle them. Remember Shift X, toggles them. That's cool. So you want to remove the stroke. It's all to do with your Ford slash button. Lo down your keyboard, find the forward slash. If you hold Shift and hit the forward slash, it gets rid of the stroke. I'm going to undo. If you add option and use forward slash, it gets rid of the fill. There you go. Nudy shortcuts. You probably know this one already. Command or control Y. We'll toggle between outline view. It's just easier to see some of the vectors when you're in this view, and it doesn't change them for good, but it does help you see some parts and align things a little easier. It's command or control Y for outline. Those are my advanced drawing tricks. I'll see you in the next video. 87. How to use the Variable Width Tool & Simply Stroke in Figma : All right, everyone. In this video, we're going to look at the simplified tool and the width tool. The simplified tool is going to turn out credy drawings into nice smooth things that we can then go and add these variable widths to. Great, nice flourishes or simple lines that have a little bit more dynamism to them. It's not a word, then we jump in and show you how to make them. I'm going to make sure I'm not inside over any other shapes that we're drawing. I'm going to go to draw mode. I'm going to go to the pencil tool and I'm going to pick a nice color. I'm going to draw out a shape. By default, it's not particularly smooth. What I can do switch the move tool, which is the Viki. Click on it once and you'll see this option here, it says, simplify vector. It works for any vector shape, but it's great for this curve. You can just see there's too many anchor points, trying to fight it out. What you can do is just drag it this way, you can see it starts removing them and making it smoother and smoother until you get to enough resolution or enough anchor points. I'm going to make my really small and smooth and click now to use the Width tool, what I need to do is slightly different, I need to go inside of the shape that I've drawn. With it selected, I'm going to double click it to go inside and you notice this option here, it's called the variable Width tool. You can grab it anywhere, click hold and drag and you get this sweet shape. Go on. There are some default profiles in here. You might want to play around with these. They need to be bigger. I'm going to undo and go back to the one I was making. Okay, so I've made my width. You can drag the center along to decide where that goes. And you can drag the edges again to adjust it. You can add more than one, make sure you're still on your width tool. You can have lots of different widths. I use a lot in Illustrator this tool. For things like this where there's these nice little bubbles and flourishes, you can do the same inside of Figma. They're basically the same tool. Let's do this one, so I'm going to go to my Width tool. What you need for this to work, actually, let's delete it and start with something nicer. I'm going to give my pen tool. I'm going to hold and drag, click hold and drag. I still got my width applied to it. Click hold and drag, and maybe another one in here to get a nice curve going. I'm going to get rid of the width profile and go back to normal. I'm going to go to my width tool. To make that little bobbly thing that I just showed you, you need to have two. You need this one. Okay one can be smaller and then one on the end here right at the end to make it bigger. Now, what you might find is depending on when you last used it, you might end up with a flat end or this rounded. Change that, I can grab my selection tool and just click on the line and you'll see over here there's different encaps. By default, it's set two, no cap, and then there's this one here that is a round cap and it gives you that nice little bobble. I can go my width tool and just find something that's a little bit more appropriate. You can play around with the stroke of the entire thing. Even though it says two, it's going to just increase it proportionately to the widths that you've done. It doesn't have to be that exotic. It might just be something simple like an underline where you're doing something just nice and simple. I'm going to turn my line weight down to not zero, but one, so it's nice and thin. Grab my width tool. Maybe you got to double click it to go inside to grab the width tool. I did the exact same thing I showed you not to do before. I'll leave it in the course because keep doing it every single time I draw new shapes. If I'm inside of here and I start drawing, it combins them. I'm going to grab you. I'm going to cut you look like on the background. Have nothing selected, paste it, he's all on his own, then go inside of him. Then I can go to my Width tool and just do something nicer like this. Something nice and simple and maybe I'll go to this end cap that is a nice pointy one. You'll see here that I still have a point on the end. You can change your line weight down to something like 0.1, it'll be really thin at the ends. I will have to adjust my width tool here to get back to being pointy at the ends and having my little flush in the middle there. That is a variable width. I can flip it around, that is the variable width tool. You can delete them. Can go, delete them, and it's back to just a normal straight line. That's it, my friends. It's the variable width tool. 88. How to overlap & stack things in a Figma Autolayout: All right, everyone, we're going to get things to overlap. You could just drag them over top of each other. But we're going to show you how to do with Auto out so that you can mess around with the spacing, get it perfect. You can mess around with your objects and drag them around. And because it's an Autoout, we've got some special features where we get to say first on top, last on top, first on top, last. Yo, let's jump in. A to start with. I've got a review frame. I'm back on my original document. I'm in my Hi Fi mobile and I've created a reviews page and I just put a rectangle in there for my review. I'm going to use the Oki to draw my little circles, and I'm going to hold Shift to get it to be perfectly round. I'm going to duplicate it a few times, Command D D D D. What I could do now is I could just select them all. I'm holding Shift to grab them all and you can hold the spacing. Can't see the spacing and a Zoom in. Well, it's not showing me the spacing. Am I missing one? Hm. When do I? I can change them around, but I can't change the spacing. Or there it is there. There's my spacing. It just magically appeared. You can't just get them to overlap like that, right? But what we're going to do is turn them into an Audi lout because it gives us a few extra features. We love Audiouts. Actually, before we do that, let's add some avatars. I like to use plugin called Content Reel. You can use any of them. There's lots of them. I like content reel because it has a bunch of different things I might use. Under Image, I'm going to pick, let's say, avatars, male. You click apply. Back. I quite like this one here because it's more realistic peoples. It's kind of unlogged in user, going to move him down here. All right let's turn it into Atoout the perks here is the same as before I get to play around with the overlapping. You can do it here or over here in the gap. You just put it in a negative amount. The nice thing about using Atoout we have these controls in here. Can you see this little auto layout settings? There's an option to say last on top or first on top and you can see it changes the layer order. Last, first. All right. Basically, you just need a negative Gap amount and you can get them to overlap. Easy, easy. That is it. I'll see you in the next video. 89. How to ignore Autolayout to absolute space in Figma: Okay. First up to ignore autolout, you need to have an Auto out. At the moment, this is just a frame with some heads in it. I've got some texts that I've created for my review. I'm going to grab the parent frame and turn you into an autolout and get it how I want to play around with the padding, 24 and 24, drag it out. It's doing Auto out stuff, which is good. I want that head in the top corner. I'm going to just grab this fill from this and just paste it, and this is not part of the order out. I'm just showing how I'm building it. Watch this. If I add this to the order out, it's like, I want to be part of the flow and I'm going to bump my buddies down. That's the default Atoout setup. I could just have it out here and hold space bar so that it doesn't jump into this and that works, but it's not part of this. I can't turn that into a component because these are two separate things. What I can do is say, you my friend are in there, but you are set to this one here. Can you stand a position says Ignore auto Out. It needs to be inside of an all out, then this guy can ignore. Rude. I can go to there and he can ignore the out. The problem is that he's clipped off, so I can grab the parent frame and say, let's not clip it whereas clipping, clip contents. There we go. Now, you will find when you are dragging it, it will eventually jump out of that parent frame and not be part of it at all. You see there's ellipse now, it's just hanging out by himself. We'll use that technique we've used before. It's inside of here, which is good. Start dragging hold Space bar and you can get it so it doesn't leave the auto lout. Now that it's going to ignore, but it's all part of the same unified Auto out. I'm going to play around spacing. I select this guy and I'm going to hold spacebar so he doesn't leave.'s going to do something like that. Grab this parent frame. I'm going to grab the layout on this side. Probably make this guy a little bit smaller. I just move out a little bit holding spacebar and that's going to be my Autout. Can turn into component now, he hangs out, but is ignoring the auto out. That's easy. I will see you in the next video. 90. How to ignore autolayout but is still responsive in Figma: Hi, everyone. This video, we're going to get something, this lozenge up at the top here. Going to get it to be responsive as well as ignoring the auto lout. Means I can drag the auto out and it comes along for the right. Otherwise, it just sits there. It's ignoring it, but it doesn't come along and it's not responsive. Here to do that. All right. To get started, I made a little lozenge. It's Auto out. I want it to be in my Auto out. And we're going to do the same thing we did before is we're going to move it over here, we're going to switch it to absolute positioning. It's called Ignore Auto Lut now. The term is called absolute positioning. That's what it used to be called. If you're a web designer developer, you'll know what that means. Same same. Ignore Auto out. So we're ignoring it. If we put it over here, remember, we don't want to drag it out of the frame, want to keep it in the frame, we're going to hold space bar while we're dragging, it can be up here. I'm going to have mine hanging off a little bit, and it works. It sits there, at least. It doesn't adjust, it's not responsive. It responsive. All I need to do is select it. Can you see here the dotted lines? It's trying to keep itself to the top and to the left. All I need to do is say, All right, you be the top and the right. Now when I adjust my little Auto loud here, look, comes along for the right. Easy peasy. Look at us combining different features. There you go. That is how to make sure that it is absolutely positioned or ignoring or allowed, but also responsive. That is it. 91. How to create a minimum width height button in Figma: Hi, everyone. I'm going to show you how to make a minimum and maximum size button. This one could be called cart, but you can see the button doesn't get any smaller, but it can get bigger to a certain point and won't get any wider than what I've set it to. That's the minimum and maximum size. Reply to Auto outs. Let me show you how to do it. I've just started with a bit of text. The Min Max will only work when you're on Auto out. So I'm going to go Shift A or autolou. Hey, I'm going to color it, you eat there. Okay, so it's a colored button, and I can type forever, right? So what I need to do is put my text back in. I need to set it to a minimum and maximum. Now, you need to do it to the outside frame, not the text on the inside. The parent frame has to be an auto Out. Won't work with a rectangle won't work with just a plain old frame. So with that selected, I'm going to go to the width, and I can just say, I'd like to stat with at a maximum I want to put in, I don't know, 140. You can see there that's as far as it'll go. Let's try. All right, so you can see, it just breaks. I can't get any bigger than that. But the minimum, at the moment, it will just keep going down and wrapping around the outside. I need to make it a minimum size. Again, click the parent and I'm going to say say again with the width, but I want at a minimum width. And I want the minimum width to be, let's say 40. You can see the minimum width in there. Now when I make the smaller, make the smaller, you can see it only gets to a certain size. What you might do is, let's say I want to call this one B. You want it to probably be centered in that box so that when it gets smaller, smaller, smaller, it sticks in the middle. Up to you. I'm going to undo? Let's say that you've got existing buttons. You just want this button to be the smaller size. You can click on the parent. You can go into here and when you sit the minimum width, minimum width, down here where it says minimum width, you can change it to set to current width, and it will be that size. I can't get any smaller than the one you've got right in front of you. Just remember it needs to be an autolayout, can't just be a plain old frame because you won't find it over here under Width. If you're wondering how I made that drop shadow, it is just under affix and you go through. You probably saw it in the speed mode, but I just cranked up the opacity to 100 and then remove the blur to zero, and you end up with this box. I went two tab, two, and then just colored it. There you go. It's minimum and maximum. Great for buttons, but you can use it for any autolayout. 92. How to Wrap Auto Layout objects in Figma: Hi, everyone. We're going to look at something called wrapping inside of an auto out. It's really easy to do and really handy. If you've got lots of elements that just need to fill the space provided. You can make the parent auto out up and down and everything inside of it will wrap. Using buttons here, but it could be images, it could be anything you like. Let's get into doing some wrapping. To get started, what I've done is I've created just an auto layout that has some text in it, just like the buttons we've made many times and I've made a bunch. And so I'm going to select them all and put them into or shift, and it will try and guess at what you want. Often it will guess either horizontal or vertical. This one here went for trying to put them into a grid. We looked at grids earlier. We can grab these frames and go, you go there, we did with images. But what we want to do is not be in a grid. So I want to click the parent frame, and I want to switch to horizontal. In this case, it defaulted to wrapping. Sometimes it doesn't and just does that. When I demoed this second ago, it so this is the wrap option, click on that. It has to be an auto out, it has to be horizontal vertical, and then you can click wrapping. What it does mean is now that if there's space for this to fit, it will, and if it needs to get bigger, it will as well. I'm going to switch mine to an auto height. You can just double click the bottom. Actually, I can't get mine to double click to do the bottom. I'm just going to say hug the contents, and it just means that if this needs to be resized, they'll all reflow and be ready. That is wrapping. You might have images in here. You might have these little pills like these. I called them a lozenge before. It's a terrible word for them. Let's call them pills. Yeah, that is wrapping inside of autolout inside of Figma. 93. How to organize Components into groups in Figma: Hi, everyone. In this video, I'm going to show you how to organize your components in your Assets panel. Okay. The moment they're all just kind of like smeared in here, and it's right where you've only got a few, but when you've got many, it's great to put them into these little subfolders here, so I can say, Alright, all my buttons are hiding in this one. Right. Let me show you two ways of doing it. They're both equally right, you'll find both being used in the community, so it's best to know both.'s jumping. Okay, so I got two files open the original file we made with all our mobile designs and the document that we're using for our main library, for all our components to be used on other projects. This is the one I'm going to work on. Now at the moment, there's not a lot going on in this document. There's just a couple of buttons in here. Let's start with the easiest way. Let's go to sections down here. So we looked at sections earlier on, but we're going to show another hidden power of them. Okay, so I'm going to the section tool. I'm going to draw a section around that didn't work. I'm going to draw a section around these buttons. I'm going to call this section. Don't use the section tool to double click it. Go back to the move tool, the Viki. Calls one buttons. The nice thing about this is that everything inside of here now is in this subgroup called buttons. Have a look over here. Not so much in the file in my layers, but go to assets and you can see credit in this file here, there are these two buttons. They're not in a group yet. You got to turn it on afterwards. By default, it's off. You can go to library settings here and say, can you show the subfolders as well? It's handy when you have a really small document to turn the subfolders off because there's no real point. We're up two buttons. But when you start building out more complex, and it's pretty quickly builds into a coplex design, you can show the folders and you can see, there's my buttons. I can click inside. Look, I got these two. Shift S is my section tool. I can drag it out. I want back to my move tool, I want to call this one my icons, and I'm going to go to this, go to my components page and pull a few icons from this. Let's grab these guys. You are going to be cut and you're going to go here, I'm going to make sure I update the library, library, publish, publish, you can see here now, I have a buttons option my assets, but I also have an icons option. I can obviously switch it back off again to not show the subfolders and just see them in a nice big long list. Same with the files that are using it. There's Limerick techno file here. If I have a new frame in here, let's go frame, straw it out. I need to add some of my assets. By default, it's listing just everything. But again, once you start getting more complicated designs, you can show the subfolders so that it makes it easier to go, I need an icon, I can go to the Cons folder and drag it out. The nice thing about this way is that back here, if I've got an icon that I don't want in here and I want the buttons, watch this just drag it over. Now if I go to turn that back on, it is on Okay, that heart there is now in the buttons folder. So it's an easy way to move things around. Let me show you the other way just because a lot of people still do it. I'm going to grab this. This is my main component for my fields. I'm going to cut that. I'm going to put that into my main library. Instead of putting it inside of a section, you can just name it. So let's give this one better name to start with. This is going to be my DOB Field. What you need to do is at the beginning of the name, you can type in field and just put in a Ford slash. It can have spaces, it doesn't need spaces. I like spaces. Click on that. Well, I've added a couple of things in there. You go away. What you'll find is that if I go to my Assets panel, can you see, I've got this field folder here. You end up in the same place. The only difference really is that this is the way we had to do it. Now you can do it with sections. It doesn't matter which way, but you will bump into both. That's why I wanted to show you in this is there's no right way I find the sections easier because obviously I just needed to drag them in. But if I've got lots of them, I've got to rename them. I can bulk rename so let's just do an example here. With FK, let's create a bunch of Yep. Give him Color. Any color. Let's turn them into multiple main components. That's a key thing. You can't do this with instances. You have to go and find the main component, and I can do my bulk renaming now. I could go and individually add them, but I can use my command or control R. I can say, I would like to rename two. I'm going to have a folder called squares and I'm going to put in a Ford slash and then I'm going to use the current name. I'm renaming all of these frames, squares that just like we did for the date of birth. But hopefully, in my Assets panel now, I have a squeze folder. Like showing you two ways of doing something, but you will bump into both, and it's handy to know what the heck is going on. Do you need to put them in groups? No, but you get to a point where actually, you've got a lot of these different components, and you do need to group them up because it's getting tricky to figure out where everything is. Alright, so that is how to organize your components into groups in your assets panel. The two things that might catch you out is that if I grab this and go, you are main component. No, you can see here it is just an instance. Okay? So if I grab that one and go over here, and I into a group by going, let's rename the Command. Let's call him Ty because I'm running out of names, Thingi because it's an instance, you can see it there compared to the main component. Go to my assets folder. I do not have a This folder. The other thing that cats you out is that you got to turn it on in here. Otherwise, you won't see them. I'll just be all spread out. One other thing I wanted to jump in and show you if you put sections inside of sections, you've got this section up here called components. Components. What you'll find is you've got the components one, but then you won't have this extra subgroup of icons. They just don't work like that when you're naming them, so that might be another thing you run into. Whever the parent is is going to be the name of the group, so you can't have sections and sides sections for this group naming here. All right, that's it. I'm going to undo that and I'll see you in the next video. 94. Class Project 20 - Review Card: I know you've been asking for it. It's class project time. It's been a while. I want you to create a review card, similar to what we've been building. I want you to include these features here, the Width tool overlapping stars, ignore autolout object, xmax button, and the components organized into folders. Let me show you what I mean, something like this. So include the Width tool somewhere. I've just got it as part of the autolout as a dividing line you might have as a background graphic. I don't mind how you do it. Get creative. Might be something cool around this or up to you. I want you to have a star rating and I want them to be overlapped just because turn mine into a component and then add a bunch of instances to an autolayout just so that I could also go into here and turn them off if I need to for different rankings and different readings. But I just wanted to see overlapping them. I want to see at least one ignore Auto out. I've got one up at the top here and one over here. I don't mind which one you do. You might experiment the one that is responsive, but I don't mind. As long as there's one that ignores the autolayout, but it is still part of that frame, make sure you have a Min Max button. I've got this one here, it's got, one's got a Min animax and I've just got to make sure mine goes from that side. And then my text is write a line so that when I start typing in it, it moves over from that side. Cool. Also make sure your assets are in folders. I don't mind if it's in the current folder or in your main folder, depending on how much you are ready to tidy up your project. I want to see this going on. It might just be buttons and icons. I'm okay with that as well. When you're finished, normal, share a screenshot of your review card. Try and get a shot where you've got both the groups and the review card in there. Do something nicer than mine. Upload it to class projects and share it online. See if we can put some of the stuff we've learned into action. I'll see you after you've finished your class project. 95. How to add add conditions to variables in Figma: Hi, everyone. It's conditional variable time. We made variables earlier on, remember we made the button, when we hit plus, it went up and when we hit minus, it went down. We'll do that again to recap, but we'll also make sure that it doesn't go below zero. It goes up up up, but then can't go down down down down down down down. That is the condition. If it's less than zero, don't keep going. We'll also add another condition where it says, If you get up to ten, don't go any higher. Look at that. They're call conditional variables. Let's jump in and make. Right. To get stated, I've just created a brand new design file. It's called Untitled, and I've dragged in my buttons, and there's a bit of text here in the middle for the numbers. There's just a fresh document. Let's go and recap how we made the variables earlier because I need to recap because it was so long ago, probably you too. Let's create the variables first. Let's have nothing selected. Go over here. Variables. Let's click on this little option. Let's create one, and we're going to create a number variable. We're going to call this one total, and we'll set the value to five just so that we know we've applied it right. So let's apply that variable to the number and here. Click on the number box and in design up the top here, you'll see this apply variable button. Let's click on that. What variable do we want to apply? Let's go to total. They're now connected. So five is not what I want. I'm going to turn it back to zero, but we know it works. Let's close that down now. Now we need these buttons to change this variable. Let's do the plus. Let's click on this one, and let's go up here, where is it? It's a prototype. Option eight and nine toggles between design and prototype. That's the one jump that's a little weird. So make sure you in prototype. I'm going to add interaction to this button. On tap, what I wanted to do. I don't want to go to a page. I'd like to set of variable. Which variable? Total. I've only got one. Is write an expression. When that button is clicked, I'd like to take total and I would like to add one to it. I just type one on my keyboard and that should work. I'm just clicking off in the background, Shift space bar, and that should work. Let's do the same for minus. Let's say under prototype. Let's add interaction. On tap, I would like this thing to set a variable. What variable? I've already got one? I'd like it to expression. This is the one thing you got to double do. Looking for subtract. You got to say, actually, I want the total to be subtracted, and I want it to be subjected by one. In the background, let's see if it works. Shift space bar, up, up, up, down, down, down. But it goes down down down down, da. This is where conditions are useful. What I'm going to say is this one here. You can do it up here or down here. I'm going to say, I don't want to set a variable. I'm going to change it to a condition. Now, a condition is like a flowchart. You can see a little icon there. A flowchart, yes, no, and you go different directions. It's the same here for this condition. What it's going to say is, if this is true, do this. If it's not true, do that. If what is true, let's click in if I'm going to write our condition. I'm going to say if the total is less than zero, oh, if it's greater than zero. If it's greater than zero, I would like it to minus one off because we replaced that original variable, completely gone. So we're going to say if it's greater than zero, I would like it to set variable. I'd like to take the total, which is our target, and I'd like to take the total and I'd like to minus one. So the same thing we did before, but now it's in this statement where it says, If it's greater than zero, do this thing. If it's not, do nothing. If it's not greater than zero, don't keep minusing it off. Let's give it a go. Does it work? Shift space. Okay, up up up, down down down down down, da, da, da. Stops working. Look at us. We're computer hacker programmers. If you're a developer watching this, a lot of developers do get their figma skills up and know how designers work, you'll be laughing at my terminology and my excitement for making something so simple work. Because I'm not very good developer or a coder, I am very excited. You might be like me. Let's do one more, and we just talk it through because I want to say, it doesn't go below zero, but it can't go above ten. Let's say people can't buy more than ten tickets. So we're going to say is we're going to go into here. Okay? We've got this thing set up. We're going to get rid of it. We're going to say, actually, I don't want to set a variable, I'm going to set a condition. I'd like the condition to be set two total. If the total is what? If the total is less than ten, I want it to work. What I want to work. So if the total is less than ten, I want you to do this. I want you set the variable on the total, which is the target, and I want the total to have one added to it. I want to go addition of one. This is all the stuff we did when we first started the video. But now it's in this condition. It's only going to do it if the number is less than ten. If it's greater than ten, I want you to do nothing, please. I don't want you to work. Let's give that a go. Come on, and it works and it sticks at ten. If you're not a hardcore coder, there is a little bit of playing around and trying to figure out less than, less than equal to, greater than. But I hope it gave you a good insight into conditions, a way of extending variables, especially the minuses. It's a great way to extend variables and there is 1 million other things you can do with variables, basically all coding. But hopefully they give you a good insight into what people are doing, other people might have done for you or creating your own variables with conditions. Now, I'm quite visual. I can't see this stuff and go, I know that's going on. I have to go, I got a variable. If total, and then I point to it, there's a variable that I plowed to the zero here. If the total is less than and I have to do my hands with the alligator, less than ten, do this thing. What is this thing? I want to find the total, then take that total and add plus one to it. Anyway, I hope that was helpful. I should have stopped there, right? Some people are going to find this easy. So people are going to find this hard. I'm in the middle. I feel like a genius when I make it work, but I don't always get it working first time. You'll be somewhere along that spectrum. All right, that's conditional variables inside of Figma. 96. Turning our boolean variable to false in Figma: Everyone. In this video, we're going to look at another variable. We're going to look at something called a bullion variable. It is a fancy name for on or off, true or false. What we're going to do is we're going to click Plus on this and watch the card icon that is currently set to false as an empty. If I click Plus. Look, it shows that you've got something in your cart. Fancy pants. Let's jump in and show you how to make a bullion variable inside of Bullion is a hard word to say, and a very weird word. Let's jump in. All right. To get started, I found an icon of a shopping cart and I put it in a circle. That's it. I use the iconify one and I just grabbed any old shopping cart thing and just made this the vector with the ellipse. I got rid of the frame that it was in. We now do that now. We need to have a component. So I'm going to select both of them, turn them into component, command option K, control OK. Let's give it a name. Let's call this my cart and we need two variants. So a Boolean will toggle between just two. It has to be on or off. True or false. This one here, I'm going to color you eight. All right. Well, it took me longer than I expected, but we've got two variants, not variables. We did this earlier. We got a component, there's just two variants of it. I've got one that looks like it's empty, and one that looks like it's full. Let's name them. Let's click on this first one here. We have to name them correctly. You can't call this one empty. You got to call this one false. As in the Can I spell false? There you go. The cart is false. It is not empty. This one here we're going to call true. Oh, spelling is important. Boolean is true or false. Let's drag out an instance of it, and that's the thing that we're going to toggle. Now what we need to do is create a variable. Remember, nothing selected in design view, go to variables. We've already got one. I'm going to create another one. It's going to be a number one. Actually, it's not going to be a number one. I'm going to create another one called Boolean. You can keep calling it Bullion. You should do something like cart indicator indicator. You'll see what is it camel case a lot. The first one is lowercase and the ones in between upper. Cart indicator thing. That's camel case. I never use camel case because I You could just do cart. I do things like Is the cart full. If you're going to be better, people use underscores. I'm not doing any of that. Because you're not the boss of me and you don't need Figma. If you're coding this properly, you'd have to use underscores, hyphens or camel case. Anyway, so we've created this variable. It's not applied to anything, so let's go apply it to something. So you are going to be this variable. Where do you do it? Over here? It's a bit of hidden because it's there. The cart instance. There is my little toggle, which is cool. We've done those before. Member, true or false, gives you this little toggle, and here you can apply that variable. I want to say the cart is full as applied to this. To control it. What do we use to toggle it? We're going to use this button. We're going to say we're going to open up our variables, which we remember is in prototype mode. I've already got one. I click on this and move up a little bit. I'm going to add a second one. It's another condition. Because what I'm going to say is if the total is greater than zero, I want it to do something. What do I want to do? I want to do this action. This action here is going to be setting this variable, which variable, the cart full variable, which is this thing here, I want it to set it to true. Thank you very much. Just give it a go. See if it works. Shift plus. If this is greater than zero, it should trigger this to being true. And it's true. Oh, I'm so happy with myself, okay? And what I'm going to do, though, is leave it there when it gets down to zero, it's not working. I'm gonna get you to do that. What I'll do is I'll set you as a little mini project. It's not going to be a full class project like we've done. I just want you to go, see if you can get it to turn false when it gets below zero, actually, to zero or below. Go yourself, see if you can do it. Let me know in the comments, if you did it. Even if you didn't do it, let me know if too hard, I'm just interested. I will show you in the next video how I did it so that you can compare notes. If you did do it, jump around. You're a computer hacker. If you're a developer already, you can roll your eyes at how easy this is. But if you're like me, and you get really excited by coding things, jump around. Let me know in the comments, how you're finding variables. Give it a go and I'll see you the next video. 97. Boolean Variable - Completed: Alright. In the last video, we got to show the cart becoming full, but we couldn't make it turn off. But in this video, I'm going to show you how I got it to turn off. Just in case you couldn't just in case you want to compare notes. If you did make it work. Alright, let's go. Alright, I hope it went well in the last video. We are going to do it together in case you didn't get it, or you just want to compare notes. Okay, so we're gonna do it to this minus. We want to turn that off. We want to go back to empty. So we're going to say is, let's add another condition by doing it here. Okay, we're going to say, I want a condition that says, Is our condition gonna be? If the total is equal to zero, I want you to do something. Zero, I want you to do this action. What action? I'm going to say the variable? What kind of variable I want to see? Is the cart full? It's not full. It's false. Let's give it a go. Did that work? Hook up, up, up, down down down. Yes, we did it. I have confidence that you did it as well. Feel good? I feel good. Anyway, that was doable and you've got to look at the things that you're making now. You look at this and go, Well, look at I did. I made that. It's not much, but these little bits of interactions, can really make your prototype work when you're trying to sell ideas to clients and show the developer how you imagine this kind of prototype working before they go and build it. Alright, a I feel good. I hope you're proud of yourself for doing some variables with conditions and bullions. Look at us. I'll see you in the next video. 98. Making a Overlay Popup in the Variable action panel in Figma: Hi there. We're going to look at opening a model when we hit the plus, says, Look, we've added to the cart and after some time, it disappears. It's not quite a variable, even though we're in the variables section, but I wanted to show you how I got confused and I know, it makes sense in this part of the video. Let's jump in and make a not variable in the variables class. First thing, we're going to be in prototype mode to make all this work. We've got some variables applied to these buttons. Bunch of stuff going on. What you can do is When I was first looking at this, when they introduced, I was like, A we can add a variable that does overlays. Not really. We're not doing anything variable. We're doing is we're working with the on tap. These variables, the thing we're adding is not. We've done pop ups in the essentials course. What we're going to do is we're going to say, I would like when this is tapped, forget all this stuff. I just wanted to do something separately. I want to do an action. I want to not set a variable. I just want to open an overlay. Over here, we're not doing variables, although it feels like we're doing it because we're in that same window to move this up. I'm going to say when this is tapped, I'd like to open an overlay, which overlay, I've only got one. I've made it the success button. This is over here, I made. I gave it a name, and what do I want to do to it? I want it to appear position. I'm going to get it not sent it. I want to manually put it somewhere. I'm going to say it's always in the way over there. I want it to appear down the bottom here, buy my footer. It's going to appear close when clicking outside. What animation, I'm going to get it dissolve in after whatever the defold. Here, it's appeared between my two separate variables. Don't worry about that. You can drag them. You can't drag them. You used to be able to drag them, and you used to be able to close them as well, so you could just see them a little easier, it's okay. Two variables apply to this button, but separately, we just got this open overlays give it a go. When this button is clicked, let's give it a go. I should both do the number, it should change the cart and should have this little success metric down here, added to cart. When I click on the background, it dissolves away. Little bit fancier and let's get that button to dissolve away. So we don't have to click on the background, dissolves after a time. What we can do here is we can click on our button and we can add an interaction. So prototype. Let's add an interaction and say, after a delay of how long? I don't know, 1.5 seconds. I would like it to close the overlay. Let's give that a go. A spacebar, add, and then just wait, wait, wait, wait, wait for a minute and a half. It goes away on its own. Obviously, have a practice on your own of doing the removed from cart option. So you need another button and see if you can get that logic working over here. I won't do it myself in the next video. I feel like you've got this. Give it a go. Let me know in the comments. Did you got this? If you have problems, leave them in the comments and me or one of the experts will come in and help you. I guess I want to add this into this variable section, even though we're not making a variable is because when I first saw this feature, I was like, Are we making a variable? We're not. We're just adding another action to our tap. That is not a variable, but it's all mixed in together. I worked that out, it all made a little bit more sense. Alright, I hope it made sense to you. I'll see you in the next video. 99. How to change spacing with number Variables in Figma: I Alright, everyone, we're going to look at another variable. Basically, we're going to use variables for spacing. Watch this. I'm going to say, you are not comfy, you're going to be compact and it tightens up all the spacing around here, comfy and compact. You can see we can use variables for spacing as well. We did this earlier when we did dark Mode. You can make these really compelling, different designs that have lots of different changes that are made just with a flick of a switch. In this video, I'm going to get lost a little bit. I'm going to include it in the course because you will also get lost. What I want to focus on in this video is just playing with a spacing. That is not that hard. Somehow I make it hard in this video by getting broken, lost fix it together and we'll all be the wiser. Let's jump in. All right, to get started. I just wanted to show you what we did earlier on in the course when we did light mode and dark Mode Remember, we made this and we could go from where is it color stuff from light mode to dark mode. It's very similar to that. You don't have to have light mode and dark mode applied, but I'm going to go back to that particular file that I made back to our main document and do my spacing in this. To start off with, I've just got a bunch of text boxes and a bit of an image hanging around. What I want to do is make it into an autolayout. I want to turn these into an Autolayout, Shift A, and then I combine this these two, the Auto out and this image into an Auto out shift day. There's a nest of Auto out in here because I want to play around with the space between these two and the space between these two here. It's the spacings that I want to apply variables to. Let's have nothing selected. Let's go into variables. We've already got one. You might not, but I've got this one called color stuff. Let's make a new one. I'm going to say let's make a credit collection. I'm going to call this one, not collection. I'm going to call this one spacing. Okay. And in here, I'm going to create my first variable. It's going to be a number variable, and we've got a couple of things. Over here, when we do with spacing, often we don't use numbers, we use words like Tissuet words. We use small, medium, that type of thing. I'm going to start with medium. You could write the full word medium. That doesn't matter. It's just very common in web to use MD for my medium size, I want to be about 16. It's not too big, it's not too small. It's medium. What I want to do is I want two modes. This first mode here is going to be called compact. Little side note here. If you hear lots of rustling and things banging away, I've got two new kittens and they are attacking everything in the office and they've got to be in here because I'm minding them. Ignore the rustling. Turns out I'm a cat guy. We've got compact and it'd be common to have another mode called comfortable. We'll just call it comfy. Ba it's shorter. You might call this one mobile and desktop. Desktop, you've got more space, so you can make medium actually just a bit bigger when you're on desktop. You can rename that. It's really common to have compact and comfortable as well as for spacing. You might have bumped into that on your travels. Medium on a small device, or a compact device is going to be 16, but we've got more space, medium is actually going to be a bit bigger. Let's give that a go and apply it. We'll credit our variables. Let's go and apply it. We're going to do it to the spacing in here. This spacing here between this heading here and the text, I want to be medium. You can't use this at the moment to apply the variable. You got to do the exact same icon over here. Gap is the same as gap over there. But in this one for get the drop down, we can say, I'd like to apply a variable, which one, I'd like to apply my spacing of medium to that. I want them maybe the spacing between this as well to be medium. I want you not to be 18 18, I want you to be a variable of medium. Both 16 pixels apart. The cool thing about that is I haven't typed in 16 now. I've typed in medium. What that means is I can say to this parent here, it defaults to whatever the first one of your variables is. It's defaulting to 16 because it's the first in the list. What I can say, though, is this thing here, we had light and dark mode, you might not have that. We can add another one to say, I want spacing to be compact, which is going to change nothing because it's the default because it's the first one, it's on Auto. I'm going to say it to comfy. Look at that. It all changes. Everything changes. Also, we can go light mode into compact mode. Come on. Oh, I do love combining these things. So let's go through a bit more. I'm going to go back to dark mode. I'm going to go back to compact. That's good. Let's fill out some of the other variables. This is more of the same. I just want to show you. You should go through and create all your different color variables, sorry, all your number variables. You should make a small Okay, you should go through and make it extra small. There is obviously large, extra large. Those are normal sizes you use. You can obviously create any you want. So on a small device, I would like this to be six. Sorry, not a small device. On a compact device, I'd like the small spacing to be eight and the comfy to be 16, expands the small out a little bit. Extra small, it's down to four. And whenever I use extra small spacing, okay? When it's comfy, it goes out to eight. You should fill in the other ones. I'm not going to. The cool thing about that is I've only applied medium everywhere, and that gap there is too big. Okay? So what I want to say is when I'm dealing with this, yeah, medium is a good sizing for this. The sizing between these two, can I click on it? I can't. I'm going to click on the parent box. Double click it. There we go. I want it to be not 16. Can you see what happens, it's in the kind of weird box. That means a variables kind of telling it what to do. It's not 16, it is actually medium, which is 16. Oh, man, I'm confusing everyone. Go and change that. Let's say, I want to apply the variable to not medium, I want that to be extra small. In a compact mode, we decided that extra small is four, but on a comfy mode, it's eight. Starting with four, how I like it. But if I say, actually, you're all comfy now, that small is just a little bit bigger. Do you get the idea? It means that if I delete these and I go to this one and I apply my variable of All right, I'm back. You saw me getting lost there. Because I was like, All right. Because I was just going to show you like we deleted the text, we're going to go, Alright, we're going to go up here, and we're going to apply. Spacing. It's not in here. I was like, I deleted things, I changed things. I even restarted Fgment and I was like, Maybe, that's it. Turns out that won't apply if there's nothing in there with the spacing applied to it. So I've got extra small medium applied. So in here, because that's not on this document, I can't go into apply my variable sets. Because it's on good color stuff. But if I grab you, duplicate them across. I say, this parent now has spacing in it because it didn't have spacing in it before. I don't like that. But now you know, we both know. I'm going to add spacing, and I'm going to say this is set to comfy. Of course, we can say I want to actually I turned off my light mode and dark mode as well, thinking that was the problem. I can switch it from dark mode and I want it to be compact. Look at us, using variables for spacing. Was that a good video? Do I need to re record this one? I don't know. I like that we got lost and we figured it out together. I think that's important. I want to show you one last thing is we've got this autolayout here. Let's change the background color because I want to show you how paddings applied in terms of a variable. It's a little bit different. Let's give it a fill color just so that we can see what's going on. Not that color. Any color green. That's going to be good. So this is my Auto out. I want to add some padding around it. I'm going to say, can you see here, I can type in 16. Oops. There's no drop down like this one here to say apply variable. You do it slightly differently, and that's what I wanted to show you. Can you see there? It's just that same little variable icon that we've seen around the place. A, and we can do the same thing. Apply medium, which is 16. A, this one here, medium, which is 16, and it's going to work. Let's say this has the spacing of compact. That's the default. Let's go to comfy, and the padding gets bigger. There's a couple of things wrong with this. Nothing to do with the variables. We'll fix that now. But I guess I just wanted to recap that we can use spacing. We created variables for spacing. We named them and we had two different modes that we can switch between. What we did before is we did it with color with two different modes, light mode and dark mode. We went and then applied it. For color, it was with the fill color. Get rid of that. We can say fill the color with Oh, no, and here I want to fill it with that interface variable that we made. Whereas when we're doing spacing, we find the spacing that we want to mess around with. We'll find at least the box, the parent that we want to mess around with, you either do it in the drop down for some of them and some of them have this little variable icon on it. All right, that is it. I want to leave you there because spacing, you can decide what spacing it is and what different sizes they are comfy and compact. You also notice this didn't work. Let's go and fix that now. Something completely separate. Let's take a pause, deep breath in. Something wrong with this. I know what it is. My Auto lout is set to the top and to nothing else. I think so or the left. What we're going to do is we're going to say the constraints are going let's put it back to actually to the compact mode. Let's sit it. Let's set this in the middle so that when it goes comfy, pushes in on itself and doesn't just jump over to the right. Top and left is not what we want. We want to go here and say left and right and top and bottom. We've done this before. The constraints. Let's give it a go. It's probably still not going to work. Let's go to comfy mode. The box didn't get bigger, the spacing changed, but this will go a bit jammed up in the sides. What's wrong with those? Go back to compact. It is this text box here. Well, actually, the Auto out that's on this right hand side here is set to a width of a fixed width. So it's fixed width of 230. So when we add more padding, it doesn't know where to go. We say, fill the container that you're in. Awesome. That'll work. Let's go here. C you can see it worked the width. Fill the container it's in just push down a little bit. Undo, redo, but it didn't do the bottom. Basically, it's the same thing, it's going to here. Let's find the height of this is set to hug. That's good. It's this textbox inside of it. Sometimes it's the full parent. Sometimes it's the order lout that's inside the oro out, and sometimes it's this textbox. This textbox has a width of fill, that's fine. A height of hug. All right, so it's not him. Let's grab the Aout that he's in, and he has a height of hug contents. Let's get him to fill the container, and let's give that a go. You set to comfy. That still didn't work. What am I doing wrong? You pause it and see what I'm doing wrong. Oh, it's something. Oh, it's the parent of everything. It's this guy, look, his heights at fixed height. Ah, the joys of figma, but we know to fix it. We can't work our way through. Is it that? Is it this? Okay? Well, I'm hoping it's this. Let's go to hug contents. And now let's give it a go. Yup. We're doing it. Comfy and compact. And it all resizes nicely. Look at us. We did it. I'm going to pretend like I was not lost, but I was totally lost. When we start combining lots of different things together, variables and order layouts, and then variable spacings, it can get a little overwhelming, don't worry. Those are the cats. They're quite distracting. Work your way through. Is it this? Is it that? Maybe it's not that. Do a lot of testing and you will figure it out and you will get better at figma. Just like me and not getting lost. All that is it. We did spacing for variables. I'll see you in the next video. 100. Making Your Designs Accessible - A Guide to Accessibility plugin in Figma: Hi, everyone. This video is going to be all about accessibility. Basically, making sure that our designs can be used for people that have poor vision, maybe color blind. Here, we're going to focus on a couple of key areas. We're going to look at font, the size of it, the weight of it, and the color of it. How much contrast is it between the font and the background? We'll look at touch points as well. How easy are buttons to click? How far apart are they? All comes down to something called accessibility. Quite often, they're easy things to implement, and once you've done a few of them, you can just do them naturally as you're going through and building designs. We're going to look at them now, both the Figma built in ones and some plug ins. Let's one's a little bit meandering because I don't feel highly qualified to be teaching this part, but I do it, we need to do it. I'm going to give you my knowledge that I have so far and open the idea for you to go off and look further. Let's jump in. All right. There's some parts that are built into Figma and some parts we'll use a plug in for. Let's look at the bits built into Figman, look at color contrasts to start with. Let's pick an easy one, and let's pick one of our titles. Let's pick this one here. So here, can it be read against the background? Yes, I'm going to say, we can check, though, with its selected over here, we can go to our color, our full color for the text, and we're going to switch to custom. We're not going to break the library, we're just going to check. Does it pass the contrast ratios, that's these options in here. You can turn on and off by clicking this button. Basically, we're looking for a ratio. Basically, it's going to look at the difference between the foreground and the background. In this case, it's the color of the font with the background, I've got an off gray going on. This one here passes. How does it pass? Let me go back into the custom, make sure that's turned on. I can see it there. It's got a tick next to the AA. AA is the default base level. You can increase this up to, say, the AA, the highest chicks. Looking at really high contrast. It passes that one as well, which is great. I designed for this one here. It's looking for a base level of three to one. So you can see here it is six to one, really high. If I picked a different font like this, it is one to one or 1.3 to one. Or you might get somewhere it's like I'm close, you're still failing it. The cool thing about it, though, is say you do have a font here and it's the wrong color. You can click on this. Can you see it will jump out to here and see this band. Anything below here is good. You can pick any of your colors that you want to as long as it's below that curve there. It really depends on its background. Let's grab that same title, move it over here. It's in the badland. It can't be dark because the backgrounds dark. Again, the contrast ratio here is 1.5 to one, it needs to be three to one or above. Again, I can click on this. It brings it up. I can be anywhere in this zone to pass the test. I love how figment have implemented this. It's super easy. You put that back. Let's have a look at a few other options around things that I'm worried about. I'm worried that this is not going to work. I've clicked on my button. I'm going to go down here. I'm going to look at the stroke. So have a look at the stroke and you can see here, it's just off. So it's not going to work. I'm going to click on this, drop it down and find that actually it's fine. What I also might do is actually instead of adjusting the font or the color, I might go in here and actually pick, I've got some library colors. Member, we made 500. Well 500 work. Let's have a check. Custom. If it doesn't appear, sometimes you need to click on the right thing. I'm going to click on my stroke here, then go to custom. I went on to the selected colors there. I went to the actual stroke this time and it passes. Awesome. I'm just going to use the 500 instead of whatever random color I was using there. Same with this, it's not going to pass. Instead of just using this little option in here, I'm going to say, actually go to my libraries and I'm going to use the 500 and we should be under Phil should be, make sure that's on. We're not passing A. Why is it not passing, even though the stroke was? That's how we look. Let's go to custom. What it's going to do is I'm going to hit this little options here. It is showing me that this is just normal text. At this size and at this weight, it's not passing. Normal text is different from large texts. We did this one earlier on, we picked the same color, but because it's large text, it's fine. When it gets down to normal text, or small text, which is 16, it knows. It goes, the contrast ratio actually has to be higher. Se look. It says it needs to be, what does it need to be? Solo, it needs to be 4.5 to one. Sometimes you can get around it by using a heavier weighted font. We can't do that because we're already at the bold. To hit my AA mark, I'm going to switch it to the 700 of my green. There we go. Hopefully now as normal text, there you go. It is perfect. Let's have a look at a few other options. Have a look at some bad ones. I've got this as a project I did earlier on, and what you'll find is, let's say that this text here, what is this? This is 18, and this is 14. There are some basic rules when it comes to text and Where do the rules come from? It's this ugly site. It's from the w3.org site, and it's called the WCAG CAG. At the moment 2.2 is the current one. They are drafting the third one. Have a look when you get to it. What I do when I need to find this page because it's very hard to find is just to type in WIAG and put in quick reference and it'll come to whatever the latest one is. Then you can go into a little bit more detail. What I end up doing when I come to these sites is I'm like, so overwhelming. If I go to contrast and just search down the page, you can see here you can go to show full description. You can say a large text needs to be 3.1, and logo types. Look at this. Don't need any colocandra requirements. Logos get an exemption, incidental text. This would be things like so I'll show you some incidental text. Do we have any incidental text? Uh, that text there, incidental text. It is just a graphic. It's not used for reading. It's just a visual kind of, it's a graphic. It's incidental. Any other incidental text? Pug life would be incidental text. The other ones that GD would be incidental. Let's have a look at this. This could be interesting. So it's against quite a mixed background. So does it freak out or does it work? It's really big. I think it works. Let's have a look, fill custom. Because it's got an image background, it won't work. So what you might do is sample one of the main colors, and so what I do is you, eye drop a tool, grab you, and test it this way. Then we should be able to get a better read on whether it is passes, totally fine. I have to use my I don't know, brain for that one and I think it's going to pass. Perfect. So have a look at this button down here. Rick, and he's going to not pass. Let's have a look. This against the background is not going to work. Hates it, 2.8. The problem here is that can you see here, it wants it down here. I wanted to be dark. I'm like, no, I wanted to be light. If you do want that to happen, you have to then go and play around with a background separately and say, actually, I'm going to use my color of 700 for that. Now I'm going to check the text and see if it works. I think we passed now. Oh, see that little gap there. That's the tiny little area you get to play around with, and it works. So when you're dealing with contrast, it is different when you're dealing with a graphic versus text. The contrast ratio needs to be higher. Let's have a look at a plug in because the stuff built into Figma is good. But let's have a look at this one. So there are a couple of great plugins. If you go to your actions, go to plugins, and type in accessibility, there are so many. The ones that I use the most are these two stark and contrast. Let's use this one because it's quite visually appealing. Simple is what I meant to say. On this page, I'm going to say scan it and it's going to scan that selection. It's going to say lots of it have failed. Can you see this row here is AA and this one is AA. It depends on whether you are designing for AA or AA. This will come down to AAs very rarely do I work for a company who come to me and say, they'll say in hand wavy terms that we want it to be accessible, but they won't have any rules. More government based agencies that I've worked for, they'll say you need to hit the AA standard, totally cool and nobody ever checks it. It's a funny area accessibility. You should be doing it as part of your user experience design. You should be aware of it. Sometimes you'll have to hit it. Where it becomes a bit more tricky or you have to do it is when you're doing websites, especially mobile website. Google search rankings will rank sites not only on, like, is this a relevant site, but is it accessible, okay? And it can go through and check. Okay, I'll be checking for an AA rating, and obviously, a AA will be better than an AA rating, but AA is pretty restrictive in terms of what colors you can use. You got to look at your audience, who it's for. Here for my Gig guide, A is going to work. Look at this text here. So this text here, did it fail, sample text? Where is it? Actually, you can just select something and say, scan selection. No shoes found. Great. Let's go AA. Scan selection. No shoes found. It is fine. What you'll find is one of the rules that I use and it's listed on the W three site is that normal text is considered these two. If it's bold, normal text that passes all accessibility is 14 but bold. Normal, though, if you're going to use not bold text, like regular or light has to be 18. These two are equal in terms of their sizes. These two are equal in terms of their accessibility. This one here is smaller, but is bold. This one here is bigger and not bold and it has a really high contrast. It's black on this gray. This is a bit of a meandering video. What I want you to do is not take any of the stuff that I've given you as gospel. I want you to go off and explore it yourself. You will bump into things and you'll be Dan said, I'm not an accessibility expert, but when it comes to user experience design, you need to have some basic skills. The basics are color contrast and font sizes. Have a look at this one here. Let's scan that selection. This failed. Why is it failing? We're on AA. Let's look at A, scan it. It's still failed. The funny thing is, if I go through and say, actually, you're 16 point, you're the wrong color. Let's go through and pick the 700 version of this. Scan it, it's going to pass. There are some simple things you can do to go through and make small tweaks and get things to pass. Let's have a look at another app that I like. It is stuck. You can login without signing up for this one here. Let's have a look at contrast. Let's look at this one. This one failed the AA, but passes the AA, which is perfect. You can see here this though is large text. We're not going to base it's failing the A, but this is large text, anything above 18, and you can see here it's pass the A test. Really comes down to how big the text is, what the weight of the text is, and how the color contrast works with a background. The thing you need to be mindful of when you're dealing with accessibility is touch points. That is this button here. Let's preview it. And this thing here to be click a bull needs to be on Android, it needs to be 48 pixels and on Apple, like an iPhone needs to be 44. If I click off in here, I've got this button. You can see the touch area is quite small. I don't want to increase the heart size. What you can do is you can see in here it is what 32 pixels. That's what I told you to make them earlier. What we're going to do is let's go find that original one. I'm going to go back to my main component. You can see here it's 32 by 31. What you'll also notice is that I've got this vector, which is the heart, which is inside this parent. What I can do is I can just make the parent frame a bit bigger, leaving the heart inside of it, the smaller size, the size I want it to be. With this parent selected, I can say, actually, I would like you, the dimensions to be 48 by 48. It's bigger. I'm going to say A out so that I can stick it right in the middle of the parent. I turned it into a Lou it's just wrapped around it again. I'm going to say, make sure I got the outside frame selected, I'm going to get a 48 by 48. You can see in here. Now I've got this touch point that's a lot bigger, but the heart is still the right size. When you are making your icons earlier on, make sure that if it's VOS, it's at least 44 by 44 pixels and on Android, it is 48 by 48. The other thing to note that the touch points need to be at least 16 points apart on both Mac and Apple and Android. While people won't notice, especially when you're dealing with, say, a mobile website, Google, who own Android, they rank sites based not only on what the content is, but how accessible they are as well. If you've got really small icons that are really close together and hard to click, they are less likely to show a search result with your website in it because less accessible. To keep that in mind as well. Fonts, contrast, touch points. That's just one of the main ones when you're dealing with the Figma side of design. There are lots of other considerations for accessibility outside of the scope of here, things like l ticks for images, color blindness, there is navigating with a keyboard for people who are visually impaired, screen readers, that type of thing. There's more than what we've covered here, but those are the main parts of it. Make sure your colors have good contrast, make sure your font sizes are large enough and the right color and make sure your touch points are big enough and far enough. All right, that's my little rent on accessibility. There's more to it. Don't hold me to anything. One of the cool new features insider Figma is that it has some of the accessibility built into it. If you turn it on, just remember to hit custom, even if you are using a library item, just to check it. All right. That is it. I will see you in the next video. 101. How to use DEV Mode in Figma: Hi, everyone. We're going to look at something called DEV Mode inside of Figma. It's a way that your developer can interact with your files, start pulling dimensions, files, start pulling out colors and icons all on their own so that you don't have to send them every individual element. They can explore the doc, get what they need, and start building your after you've designed it. All right, let's jump in. All right. To start working in DevMo you as the designer can work in DEV Mode the developer can get their own paid accounts is a pro version only, but the developer can get a cheaper version to work with your files. So here is my full seat, but a DV is slightly cheaper and they can't do all the full design stuff, but can do quite a bit of it. If you're a bit of both, a bit of a designer and bit of a developer, you might be able to just live on the DV seat. This changes on what you have access to, but often developers can do a lot of design work. Or let's say bring your laptop developer, Malcolm, he just has a DV does it mean? So it means a designer. Let's say that I'm working on the sign up file, page, and I'm ready for the developer. You might have seen it already. There's this option here. You, Dan, the designer. I can say, This is ready for the developer. It's going to say a couple of things. It says, Hey, you haven't renamed a bunch of files. I could go and do that. I'm not going to for the moment. Let's say that I'm going to share it. I'm going to click on this again and say, let's copy this link and email it to them, slack it to them. Whoever it is, send in the link. What ends up happening is they come into it under this mode. It looked mostly the same, which can be a little confusing. They come into DEV Mode. The cool thing about it, though, is that the DEV Mode gives them the information they need. Also, if they're zoomed out, they can see the things they should be working on. Over here in the Layers panel, it's only giving them they're ready for development. They can seal this and click on it and work on it and see it. But they can easily see, look, this is the thing that I meant to be working on. You could copy and paste it into another document, that's totally fine as well because this could be a little overwhelming for somebody. I might do that. But you the cool things that they get is, let's say that they have worked on it for a while. They've seen the original file, you've made some changes, and they get into this. Some of the perks for Dvmode is they can go into this and say, wasn't this different before or they've told me. I'm the developer now. Dan sent me this email saying, I've made all the changes and you're like, I don't even remember this document. They can go compare to various versions. I need to make change first. So let's say Dan the designer goes, All right, I've changed some stuff, done my accessibility, and now it needs to be this I'm going to pick this dark color, and this is going to be a different font. Let's change the font. I've done my changes. Now Malcolm, as our developer comes in here and goes, Alright. I haven't seen this in a while. What the heck has changed? They can say compare with previous versions. Can you see? That's the old version. This is the new version. They can start to see what the changes are. They might decide side by side, overlay can be handy. You can see I was messing around with a layout as well, so they can see the change easily.'s close it down. That's one of the perks. The other perk is when they're in developer mode is when they click on things, they get the stuff they want. We know in design view that some of the things that I've made are audi louts inside of frames inside of main components, they don't care. Let's say developer wants to go through now and just work out the sizes and the spacing that you've used, they can just click on it and say, there's the font. There's the font. It's Roboto condensed and I might just grab the CSS from this, or they might be using IOS and they can use SifuI, maybe it's Android. They can get the code that they want. They can also decide that if they are using CSS, maybe they're not using pixels, they're using rims. Just a different measure Okay, totally fine. 1:00 A.M. Instead of 16 pixels. Same same, but it gives them a bit of control on how they grab stuff out of here. You can see there's the colors. They can go into some of these, so I can go into anything, I've marked it for Dev, but they can go anywhere they like. They can go in here and just grab the text out of that. Often, that's something I used to do. I used to have to go through and email the text separately because it was in a design document that the developer refused to get into. They can now go into it, grab the stuff they want. What I really like is say this thing here. I made this. It was an Auto Layout member. We made it together. It's an Auto Layout. It's got all sorts of stuff going on that makes it responsive. Okay what happens for them though, was all that work that we did, they can see. As a developer, I'm a really bad developer. I can copy and paste stuff. I know what I'm doing with some front end code. We call them Autolayout inside of Figma because it makes sense. But for a developer, it's called Flexbox and it's giving me the things that I need to make this thing responsive, so I don't have to try and recreate everything. You can see over here all the padding, all the borders, all the different styles. The other cool thing is all the colors, look, some of the assets that are in here, can you see I've got three stars? They can go through and say, actually, I want you to download all these icons, and I'm going to stick them there. Because I see them here now, they're on my computer. The developer has these SVGs, these scalable vector graphics, ready to go to work within their designs. Makes things really easy. The variables that we made earlier on, can you see I got nothing selected. They can open up the variables table and see what we've done to make our light mode and dark mode work. The other nice things is, let's say that we've got this document here. They can go up here and say open and VS code. That'd be more than likely the terminal, the cody thing they use to write the code, something like VS code. The thing they can do is that you might have spent a long time having different variants, not variables. Maybe we did it for our logo. We had light mode and a dark mode. Okay, I know in design view, I've got this little toggle switch that I made. What they can do as a developer, they can go into anything and they can see that let's click on the logo here. Can see the squa access to the layers. I can click on the logo. I can explore the behavior that I've made. In this case, just a simple on off, for light mode and dark Mode. A a look at another project I worked on this one here. I have in Design view created this early bird on and off and I made it horizontal, was very complicated. It took me ages, but I want the developer to be able to experiment with this rather than just seeing a static website, rather than just seeing a static UI. They can in Div mode, if I share it with them, they can go through and explore the behavior and go, I see what they've done here. They can go and recreate it rather than you trying to document three different versions for everything, they can go through and experiment with them. Good. Developer has access to lots of different plug ins as well, separate from the design ones, on this tab here. So you might spend a bit of time getting your developer up to speed. A lot of developers will do this particular course just so that they are better working with designers, even though they might not be confident doing the design themselves. Welcome to the course. But you might send them just a quick well run them through how they can work with you on the developer side rather than just sending them JPEGs and hoping they can recreate things, takes a little bit of work on their side to get up to speed, but they will find it useful enough to bother doing it because it can save us so much time rather than trying to send out images, they can grab an load it. Even if it's just for that, they'll get used to it and start exploring. They'll find out that they're using stretch to fill the box. Things like that will become useful for them and they will explore Figma a little bit more and making both of your jobs and this handoff really easy. Rather than creating a separate developer handoff document, you can just hand off the files. That is DevMde. It is paid only. It is super useful. It is this little option here. You can market for Dev. You don't have to. They can explore the files. It is still really common to create maybe a new page that says ready for Dev and just put the bits that you want on there. Obviously, that can be a little overwhelming. That is it DevMde in Figma. I'll see you in the next video. 102. How to document a component in a design system in Figma: Hi, everyone. In this video, we're going to look at a design spec, which is different from a design system. I'll explain what both of them are. We'll create our own design spec, where we start adding measurements and start breaking down the anatomy of some of the elements we made. Here, we're going to use some sweet plugins to help us get to this position fast. It's more of a visual way of expressing what you have made and how it should be used rather than just switching to Dvmode and letting other people, colleagues, developers figure it out for themselves. Let's jump in. Okay, to get started, I have created a new page and I just call it design specs. There's two levels for handing off your documents. You've got design specs and you've got a design system. A design spec is what you saw at the beginning. A design system is outside of the scope of this course and for very large companies where there are hundreds of designers and developers and they all need to work from a central source and new people need to get up to speed and teach them selves. That's when you go off and create a system. Let's say, Shopify have this. They've called this. It's called Polaris. They work in this. It's got its own website and you can get to terms with how they are thinking about all the different icons, how they use them, dos and don'ts. What you'll find is some of the naming is quite consistent. You see? Component. I know what components are. What kind of component do I need? I want to look at a group, and you can figure out how they're doing with it. There's no set rules on how it should be. Often they're geared towards developers. There's a lot of code, depending on how their website is built, but there will be dos and don'ts, best practices. Let's have a look at a couple of ones. Microsoft use fluent, for their design systems, you can go through. Often you end up having to use the search option. Let's say I want to see how they deal with cards, and there's their card. Yeah, it gives you a lot of documentation on it. Asian. They have their own design system with its own name, call it Lasian. Let's look at Adobe's one. They call the spectrum. So if I needed a card from them, let's have a look. What do we got? Card. They all work slightly different. There you go. You can download Adobe XD file, which is a redundant bit of software at the moment. Sometimes they'll have Figma files as well that you can download. Base is what Uber uses. Okay, so I can go into their components and figure out how they're using the. What are we doing Messaging. I'll give you an example of it, the specs in terms, not all of them give you the actual digits. We'll do this in this video, but some of them will just give you the code for it and you can dig through that to figure out what it is. Some of them are more clearly labeled. Okay, and Google uses material and Apple for IOS. If you're doing apps, they use this human interface, is the name of their one. You can go through and figure out, right, how are they doing layout, and how are they approaching it? A lot of documentation. There's a super heavy going. Not heavy going, but there is you can't mess this up if you read it all. So we're going to do the kind of light version, which is called a design spec. Let's say that I need to hand this card off to my developer or I just need it documented so that everyone knows what I've done, what we're doing. I've created a new page called Design specs. I just copied and paste this element, ok this card from our main design. First thing you probably need to do is make sure you label it. So I'm going to go to this and just give AI a go at naming it because there's a lot of just frames. No. None of these need naming. I'm going to have to go through now and say that this is my say card for gigs, and work my way through naming things. Once you've done that, there are a couple of great plugins. Let's start with my favorite. They changed the name of this. Every time I remake an update for this course, they re going to go to Design and widgets. This used to be called eight shapes. Now it's called specs. Design Doc. They renamed it spectral, and then they renamed it back to design doc. Have a look. It doesn't even matter if you're using this particular one. Have a look for, let's say, design specs and just go through and I gauge them based on what I've used before, obviously, but also how many of them have been downloaded, how many users? There's only a few users and a few likes, it's maybe not used very often. You want to find one that is being used by a lot of people. Look, 38,000 people. Let's use Design Doc, my favorite. We use measure early on. And this is just handy. If you've got it selected, you can click on measure and it just goes through and gives you all of the measurements. There's a couple of things like 15 shouldn't be there. When I'm making these things, often, I'll have to go through and adjust them to make sure they're all perfect as well. I'm going to have to undo that, go through this, find out what space that is, and change it from 15 because it should be 16. I'm not sure how it got to 15. Cool thing about design Doc is there's option called spec as well. This one here, let's have a look. You can see I've got the free account for it at the moment. I'm going to go design spec. What it's going to do, it's going to make a big mess. You got to make sure there's enough room for this thing to grow and you can start to see, it's the same thing, but with a lot more detail. This can be a really good way to a look professional, but also be very clear. You can see it breaks in all the different options. So cover image is its own little bar here, you can see it's showing not only the spacing, but is it filled with and a fixed height? That can be really handy for the developer to know if you're document. Often though, you can just give them the Figma file and for them to use develop mode like we did before. This type of documentation is really great when you're working say as a freelancer and you've been asked commissioned to make something and you want something actually to hand back rather than just like here's a file, a lot of detail in here. You can rename all of this. What you'll find is, you see it's created this huge basically is created Figma document. For you with all of these, you can go through, start renaming them, changing colors. Here as well, I think there is options for figuring out and changing things like what the padding is, what the colors are. What you want included? Do we need the colors? Do we need the effects applied? Or do we want to keep it more simple? Really handy. In this case, we've got spacing and anatomy, which is giving me things like fonts rather than just the space. All annotated beautifully. I love it. The other one called specs works very similarly, so I'm going to grab you, duplicate it, go to that exact same plugins and widgets. I'm going to find specs. This works very similarly. Give it a second. I'll create a branch of frames with all the documentation in here. Have a look to see which one gets you closer to where you need to be. These change over time, and you will find that some of them have some free settings, some not, and what you'll end up doing is spending a bit of time tiding everything. Sometimes they don't have the right names and you've used the wrong sizing and things. There's two levels. There is a design spec, which is basically just a page inside Figma. Here you go. Here is the thing that I've made and it's documented. Then you can move to a design system. I've never worked at a company where I've actually had to produce a design system, to be honest. I work with SMBs so everything is small businesses and nothing has needed a design system. I understand how they work and I've worked from them, you pulling detail from them. What I end up doing is using design system get an idea of how I should be documenting. Okay? What in here would be useful for my team? Probably a download Figma file. Do I need to be copying out the CSS, and JavaScript? How does this work and react? You will need to decide on what you need to hand over. But just using some of those plugins can get you a lot of the way there, at least give you a sense of what you should be handing over if you haven't done it before. Remember this isn't share something so that it looks fancy, it's meant to be useful. If you've got things in here that you know, just throw people off. Direction vertical, does that need to be in there? I can go through and I can start editing this list and say, actually, I don't need that. Let's just keep it to the things that I want to be important. Otherwise, junk in here for junks sake is not going to help anybody. Look fancy, though. All right to cover again, sometimes you just hand over a document, you say, right, where is it? This one here? Let's go to my files. You just say, Zoom in, mark for Dev, and that might be all you need, and share the link that is linked to that file there. You can say, I want to copy the DEV Mode link, and that's what I'm going to send to my developer. It might be that you do design spec, which is more like this. Okay, just kind of listed out. The things, the padding, the margins. You might add some annotations in here about don't use these images. This is for this just to be very clear about what you expect to go in there and what you don't then the next level up from that is a design system. Okay? And then you might find a template inside of the community to start with. I had to look at a few that are part of Figma, and there were a bunch of templates in here for design systems. They're all different. You got to decide what flavor works for you. There's no specific hard coded rules on how these design systems should work. They should be useful. That's what they should be. Right. That is a design spec and a design system inside a Figma and some sweet plugins. Alright. That is it. I will see you in the next video. 103. Class project 21 - Design Spec: Hi, everyone. It is class project time. I want you to make your own design spec for one of the elements from your design, find anything, something with a bit of interest. Okay? Put it on its own page. I want to make sure all the layers are named nicely. I want you to go and add the anatomy and the measurements. Okay? So you can use the plugin. But I want you to go through and just double check everything. I want you to kind of experience the it spacing is not right. That doesn't make sense. Maybe I should change that. Don't just hit Export the plug in and just send it, go through it, make sure everything's named right, make sure everything is in there that it's important, and figure out how they work. One thing you might have to do is you might have to go through depending on the plug in, some of them can be locked, which can be a bit tricky. I didn't mention that in the last video, but you can see here this container here for all of my measurements came through in a locked layers. I'd have to select all of these and figure just do it to the parents a command shift? Is to unlock it. I need all of you to be unlocked if I need to make some changes. Go through unlock the layers, make amends as you need them, make sure everything's labeled nicely, and go through the spacing and anatomy, making sure do I need the description to have texts written in there? Probably not. So just tie it up before you take a screenshot and then upload it to the assignment section. Also share it on social media as well. It always looks fancy when you've done a design spec. For you, maybe, does for me, I'm like, I am a UX designer look at me with my design specs. So do that and I will see you the next video. 104. How to view version history duplicate and restore in Figma: One. In this video, we're going to look at version history. Basically Figma is saving everything you've done automatically. You can do it manually as well. Let's dive in and look at version history inside of Figma. To find your version history, it's happening automatically, which is nice. If you go to the name over here, there's a drop down. You can show the version history. You can also go to the F and go to File and go to show Version History. And there's lots of ways of getting to it. What ends up happening is this opens up on the right hand side here. Shows you all the versions of the document. If you're on a free plan, they go away after 30 days. If you're on a paid plan, make sure it's in not drafts, but it's in an actual project, it will record it forever. I'll do it automatically, which is cool. You can go back and say, r grab one of the older ones. See, the ones that have dates are automatic saves. It does it every half an hour. Basically, it does it every time you pause it knows you've done a batch of work and you've not worked on it for a little while. It saves it for you. You can roll it back to this one. You see a right click it and say restore to this version. Cool thing is you can copy the link to this. Let's say that we have done some amends, clients come back. We've done the changes and nobody's sure about what changes were done or they're like, Was this how it was before? You can actually go to this and say, copy this link and they will get a link to that version, like an earlier version of this document. It saves it forever. It's amazing. What I use it for a lot is, let's say that I am doing changes or that I do a lot for this course. When I'm about to start a video, what I do is I save a version of it, so I can go to Version history. I can save it. I'll do the start video. Uh, one oh one, so that if I mess up my recording while I'm recording, I don't have to hit undo, undo, undo, undo. I can just restore this version. I'm not sure what I'm typing there. Type it in there. I can save it, and now it is in my version history. If I go through now I mess all this all up. Oh, the big thing. I'm going to pretend I did that on purpose with version history is that I'm like, I'm going to delete this. I can't delete anything or do anything. Can you see the toolbars re limited? It's because I haven't closed my version history. I really wants you to close this down by ting this little cross, then everything comes back to life, and I Alright, I got rid of you by accident and you and that got moved over, and now I can go to my version history. I can say you show version history, and I can roll it back to here. I can say restore this version. You just got to remember to close this down once it's done. All right. If you restore it closes it down automatically. But I get stuck in version history not being able to do anything all the time. I use it quite a bit when a client comes back with a mens. I'll do a save version history before I do the changes just in case I need a roll back. Like doing a save as when you're using other files and documents and software. Another useful thing is that if you're on a special plan, I'm on the professional plan. You might be using the free account. You have to be in either organization or enterprise plan. You're paying more for it and you get extra features like this, you get the change log, so that as the administrator, you can go through and see who worked on the file, what they changed, when, and keep track of everything. It's a little big brotherish, but you can keep an eye on files to say, who wrecked this or who did this? When was this done? You can go through that log for your different files, see who's done things, but you have to be on those special organization or enterprise plans. That is it. That is saving your history and reloading from your history. Just remember to hit the little cross when you're done. Otherwise it gets stuck in limbo. That is it. I will see you in the next video. 105. How to use the Slice Tool in Figma: All right, everyone, and we're going to look at the slice tool. You can draw things around and export specific boundaries rather than specific frames. It's a slice tool. Show it here because it occupies a really important shortcut. I'm not sure why, but it does. Let's figure out what it does and who it's going to be useful for. All right. Let's start. It's got a super easy shortcut, the S key. I think that's wasted on the slice tool. You draw boxes around stuff that you want to export. It's good for, let's say, this long page here. If I want to export the entire frame, I can I can come down here and say I want to export this whole thing. But I'll get the entire part. What I want to do is grab the slice k, and just drag it over. The cool thing about it is you can decide how big it is, and then you can go over here and say, I want to export a PNG for this one, and I'll export just that one. Let's put it there. Let's have a quick look at it. You can see there it's the slice and it exports the background as well in relation to other things. That's why it's quite useful. You might want to grab this. I'm on my slice tool again. I'm going to grab the edge of it. You got to be on the move tool. They're Viki, grab the edge of it. They're hard to grab. If you drag a box around them, they're a little bit hard to grab. See, I can't click on it, but if I drag a box around it, I can grab it and I can export this whole chunk. Both tops of these, including the background. Thing to note is that they've got a special icon here in the Layers panel, and if you name them, this is going to be my sign inflow. Now I can select it in my Laos panel and I can export just this chunk here and it will use the right name, put it in the right place. It's just an alternative for using your screenshot on a Mac. It's Command Chef four. I think it's print screen on a PC. Yeah, that's enough for the slice tool. It's useful. You'll see it around, use a really good shortcut, wasted, in my opinion, there's probably a couple of you out there, maybe two of you on YouTube, three of you that'll find this super useful. It's the slice tool. I'm going to delete it. That is it the slice tool. Done. To the next video. 106. Class Project 22 - Finish Your Design: Right, it is the last class project. We're going to get you to finish your design. Depending on how much you've done throughout the course, this will be reasonably easy or might take you a while. Let's have a look. I'll show you what we're going to be making first. If you go into your exercise files, right down the bottom here is something called Z final class project, Z just so it's at the bottom and you'll see a PNG in here, and this is the Y frame that I want you to make in high fidelity oh, you need a welcome screen, homepage, you need search results, event details, cart plus a confirmation. We've built these throughout the course. Let me show you. It's going to tidy everything up basically. Have a look the welcome animation, we did various different ones. We did the Houdini Text and different animations where the text all appears. So depending on your design, you might want to go back and start a new page and just copy the bits out you need rather than some of the mess that we've created along this course. Animation first, next bit is the homepage. We did that where on here. It's going to load after the animation to your homepage and it's going to load to this What's on page or trending gigs that are coming up. Basically just this card. The homepage though has two options. I'll start on the training page, but I also want people to be able to get to the genres or a different category way of searching your site. Let me show you in the iframe. It's going to start off. Your homepage is going to be on the trending and have your events card. But I want there to be a sub navigation up the top here so that people can go over here and go onto this category, I've given a generic name. Yours might be genres. When you click on this, you get all these different genres based on your different kinds of techno if yours is techno. Yours might be by location. This category here might be a location button dropping down to the different locations and people can click in the different areas, maybe in your neighborhood or in your city. I've given you a couple of options, so it might be new. This weekend might be another option. It might be a subcategory of the actual genres. It might be location, two ways of going at that homepage. For me, I've already made this version here, so I'd probably just use genres. But I'm going to have to make a little navigation to get between this and that along be buttons, it can be anything you like. The next thing is search results. You've got a search bar down the bottom here. I want that to be clickable and to go to your search results page. We've done that somewhere. We made this version. I want there to be a vent details page. Is this one here that just explodes. If you click on one of the homepage, you click on this one here, Groove C, it'll go into more detail and show you the dates and venues and how to it. So there's a details page. Once that's done, they click Add to Cart, I want you to create your CRT page. You can use the page that we made earlier on with variables. There it is there. Mine's very simple. This will come down to how much time you have. Fill it out, especially if you're going to use it for your portfolio. Have a little bit more details here. Have a look at other existing carts and what might go on there, what might be useful. I want a confirmation page as well. When you click the By now button, you've got a confirmation of you purchasing the tickets. You could, depending on the time you have, put one in between here that is entering your credit card details, you might build a form. But these are the requirements, anything else in the class project. It could be easy. You should have all these things. Let's tidy it up. The homepage needs to have it's going to defaults to the trending events, and there's a lower navigation and a sub navigation at the top we've talked about, which is where is it? These two at the top here, this little sub navigation. Got a search results page, there's an events page, there's a ticket flow. We just just cart and confirmation. You might put the credit card in there as well. Optional ones, if you are doing this for your portfolio, definitely go and fill out a few other pages to make this a bit more complete. Things like the wish lists artist profile, I'll leave that up to you. These are optional. But you can see here lower navigation. We've got one that has a lower navigation. There it is here, we could jump to our cart. We can go to our profile search results. That's where you connect that one to, and you might have a wishlist page as well. You've done it, I'd like to make a video of you interacting with it. Remember uploading it to either Vimeo or YouTube and sharing that link in the class projects. If you can't do the video things, you've just been struggling to do it. This might be the time to get it done because then you can have an interactive one that we can all see. Otherwise, just a screenshot of all of your final pages and upload that to the class projects. Please share this on social media as well. You don't have to, but this might be the time where you're Okay, I made something. Share on social media, tag me in them, and when you are uploading it to the class projects, have a look at two other projects and offer some feedback. If you do it for two people, we'll get everyone covered. I can't get to them all, go and look at everyone else's projects and leave one or two comments, what you liked, what you think could be changed, what you might work on. This is the optional super duper Karma points. Get this ready for your portfolio. The next steps from here would be including the brief, the persona that you're working for towards, the Y frames that you've done, your finished designs, and just to make sure that if you are using your portfolio that you describe it as a case study. It's very common to call it that. We're not pretending it's an actual product that we've done for a client. That's the one thing. Sometimes people are reluctant to like, this is fake. This is how UX designers get projects and get started by using case studies. We need to be clear with future employers that this was a case study. Describe it as. Right, that is it. Class projects are over. Get your final designs together, tidy them up, get them on a new page, get all the interactions working. I'd love to see how they come together. I do like checking out people's projects, especially at the end of this advanced course because we're starting to get some skills now, and I enjoy seeing them. All right, so do it, share it, and I will see you in the next video. This is a long one. Take your time, get that one done. Then I'll see you in the next video. 107. What Next After Figma Advanced: Alright, it's the end of the course. But I need to say goodbye but it. You got to move. Move. Move. Why won't you move? Alright, that's better. Um, congratulations. You made it to the end of the course. We're at the end of Figma Advanced. What, a big course. Loads of videos, and I just want to congratulate you and me, we made it to the end. I recorded it all, and you watched it all. Other people are watching Netflix. You are bettering yourself. Yeah. It's also sad. We have to finish here. But if you do want to carry on with other courses, you could the next steps from now is you could do like Webflow would be a good next course for this, okay, where Webflow is taking your Figma designs and making it. Figma sites is kind of a new bitter software that Figma are doing. Let me know there'll be a link here, okay? If you can pre register for it. And if I get enough interest, I'll do a Figma sites video as well. Other courses, we have Photoshop and after effects and In Design and Illustrator, and what else we have Cava and DaVinci and Procreate. There's lots of other courses at Bring Our Laptop. So wherever you found this course, go maybe check out some of those other courses, and you can meet me or one of the bring your laptop team. You can also follow me on Figma, okay? Go to this link here, figma.com slash APBYOL, okay? And you can follow me there. Also, what might be really interesting to you now is FGMA It's called CFI it happens once a year. It's the big kind of, like, show they do. Okay? It's in person, and they do it online. So try and get there in person. It is super cool. But you can do it online as well. And it's just there's a live stream, and they release all the new products. So it's a great way once a year, put on your calendar, just to keep yourself up to date. I'll keep updating the course, okay? And we can. It's distracting, right? And he's not wearing his glasses. I can't get them now cause there's the cat there. But yeah, config is a great one to do. I'd also like to thank the editors. This is, like, there's a lot of work for me, but equal amount of giant work for Taylor and Jason, the editors of this course. So thank you very much. Also for Sepan Inappropriate. Please hold. Cats are simultaneously cute, but also kind of gross. You're gross. The other thing I'd love to ask is, if you we're back to it. The other thing I'd love to ask is, we're friends now, is if you know of anybody or figure out a way of sharing, like, Hey, I did this course. You should check it out at Bring your own laptop. That would be great as well. The kind of referrals are the best way that people find my content and kind of allow us to keep making stuff here at bring your laptop. So if you can figure out a way, a link, a social post, that would be great as well. Now, because you're part of Bring your own laptop, you get some special extra stuff. So there's obviously certificates. So if you haven't done them, you should do them. There's a pass, a merit, and a distinction. We've kind of covered those in the course, but those are things you can get a to your CV, and it's mainly what's good for practicing because you have to do the class project. So make sure you check those out. You are working in a large organization or at a school, we do do group bookings at bring your laptop. You get a discount if you do, yeah, book more than five. Okay, so check that out for group bookings at Bing our laptop as well, if you want to kind of get your team up to speed or your students. Yeah, check out group bookings at Bing our laptop. The other thing to check out is our design challenges, okay? So bring our laptop, you check out there's, you know, a regular challenge that goes along. Sometimes the graphic design, sometimes the UX, video to check those out and get them involved. You're kind of, like, looking for a way to practice. Make sure you get into that. Again, congratulations on make it to the end. High five. Here you go. Yeah. It's a lot of work. I hope you learned a lot, and I enjoyed hanging out. It's fun, huh? I like doing these things. Um, that's the end. How do we end it? Can't be any more awkward than cat looking itself, I guess. We'll end it there. Cute cats, say goodbye. No nothing to see here. Alright, hopefully see you another course, though. Bye. Fat to Black. Fate Black.