Figma UI UX Design Advanced: Become a Figma Pro

1. Intro to the Figma Advanced Course: Hi there. Hey, my name is Dan Scott and this is the Figma Advanced Course. So who am I? I'm Dan. I am a UX designer and Figma instructor. I've won multiple teaching awards and I've helped more than 1 million people become better designers now through my courses. Now this course is aimed at people who already know the fundamentals of Figma. You've either done my Essentials Figma course or is Self-taught. But you know that there are tools and tips and workflows and updates that you just haven't had time to go and explore. So that sounds familiar. Let's courses for you. During the course, you'll be given your own unique brief and persona and build an app that is ready to drop into your portfolio. You'll start by diving deep into multilevel nested autolayouts. You'll make Robust components that are easy to update but hard to break. Learn workflow tricks for managing design assets, styles, components, grid and column layouts. Finally, learn how to use Variables and put them to work. Creating even more complete prototypes can use variables to make easy light and Dark Modes and Compact and Comfortable spacing versions of all your components. And with all our new variable knowledge will be able to understand and create our own Design Tokens. Learn Advanced animation techniques in Figma. You'll Build responsive elements ready for any device size, all the wild learning the best shortcuts and plugins to make you a more efficient UX designer, you'll learn how powerful filmic can be to manipulate and mask images and videos. You'll know all the advanced typography features and how to use AI in your process to make you better UX designer. You'll learn all the Advanced prototyping techniques to level up your user tests. Of course it'd be a pug dog in there somewhere. There is your Learn the right accessibility tools and techniques. You Become a variant boss. Learn how to cut down those unwieldy hundred variant components down to one by Mastering Properties, phone all the best ways to work with other designers, developers, and all of the stakeholders. Now there are so much more than that in this course there is more than 160 videos. So check out the table of contents, see what we cover. Checkout that student reviews and testimonials. And you will see that this course will take you from Figma good to Figma great. In this course, we'll use real-world practical projects. You can download the exercise files and the shortcut sheets so that you can work alongside me in the mini class projects, not homework. So if you want to take your Figma skills to the next level, sign up and go from good to a Figma Superhero. I feel like a superhero all the way through the course. You'll see me puffing my chest out because otherwise, I watched some of the retakes. You see my **** getting folded into my belly, my hungry belly. Never, never, never, never. Rooney design. So there's a lot of chest puffing. Anyway 2. Getting Started in Figma Advanced Course: Alright, to get started, first thing is to download the exercise files. So there'll be a link on the page. Download the files that we use for this course in that folder though, there'll also be the shortcut sheet. It's a PDF. You can print it off and they'll be lots of shortcuts in this course. I'll go through them loads, but it'd be handy having that next to you so you can stick with the ones that you really like and really want to remember. Yeah, so download the files and then what's next? That's what's next. How fast is Dan talk? Most people think I talked too fast and I probably do. Some people. People have said I talk too slow, they want to speed me up. Guess what you can. There's a cog down on the bottom corner there. You can sit me to whatever speed you like. Gay, slow down fast and whatever you like. Can you do it with the free version? You totally can. Pretty much all of this course you can do the free version of Figma. We will look at some of the paid features because it's an advanced course. You want to know what you might be missing out if you're on the free account. But most of its do with larger teams and it's not so much features missing. It's more to do with collaboration, but I'll take you through those ones so that you get a sense for them. But yeah, you can go through most of this course with the free version and the tiny bits that are paid, it's worth knowing even if you do have the free version about what can be done. If you do end up in a position where you're looking at the paid version. I'm not sure what this is. What else? Okay, Lastly is level one and level two. If you look in the contents, you will see that some of the bigger topics that chunkier parts of Figma with his a lot to go through. I've broken up into two parts. Level one. Level two. Why? Mainly because I was going mad trying to put it together because there's a lot to those things like autolayouts, one of them, for instance, there's a lot to it and it's really important to learn in this course, but doing it all at once, even preparing it, I was just like, Man, I need to go do something else. And that's what I've done. I've got the really good chunky best bits and Level one. Then the more obscure obscures the wrong way to break it so that the more detailed we got, we're going to carry it on later in the course. We're going to take two goes at a couple of those big topics, Level one, Level two, Does that make sense? Because I was going mad and I know that you'll get bored as well. Because this is really long. We want to mix it up a little bit too, but autolayout learn loads of good advanced stuff. Take a break, do some other stuff. Come back to auto Layout and really like get super-advanced. Alright, that is it, getting Started. Let's get started. Do something 3. Auto Layout & Responsive Design 101: It's use in responsive design: Hello everyone. Welcome to the course proper. This video here is kind of like a catch up video. It is some fundamentals that you probably already know, okay? Just to make sure everyone's on the same level, okay? I need to make sure that everyone knows what a basic creation of an auto layout, what it's good for, components, that sort of stuff. And we'll make these two pages here. They're not super special, so if you are reasonably advanced, you can skip this one if you're in the middle or not super confident. You just want to make sure you're all good. Want to refresher? This is the video for you. I'll make sure. Also, I'll throw in some good shortcuts throughout this video as well to make sure it's valuable one. But if you're like, man, this is kind of stuff we already know, that's okay. Skip along. We get more and more advanced on the course. I just need to make sure everyone's okay. You okay? The short version is auto. Layouts are great because you can do stuff like this. You can move it around. It's adjustable. It's flexible. Okay. I can decide that it's going to be on this different size frame here, the larger iphone. And I can turn things on and off. So that's why auto layouts are good, components are really good. Because I might decide later on that this guy here, I'm going to zoom in, okay, he's a component, we make him in this video. But I might decide actually in the inside here he is. I don't know, got this going on, I don't know what this is. But because he's a component K's got a heard, looks like my hair ball at the top, K, can you see this one adjusts as well. So let's revise what an auto layout does, why, and how to make components. Plus I'll throw in some interesting things about icons, icon sizes, how to scale them. Right. And we'll get the beginning of our project started. Would you get on with it, Dan? Okay. All right, let's get started. I'm gonna use the new design file. There's lots of different ways of starting a design file. You choose the one you like the most. I'm going to rename this one instead of Untitled. I'm just going to double click the title. I'm going to call this one Event App V 1.0 Hit Enter and now first shortcut is going to be the key for frame. Okay, there it is, there's the icon, and I'm going to put in a phone. Now my advice is to pick whatever phone you are using to do the testing on. Okay, If you've got a really old iphone, use that if you got the newest one, that you can test on your phone using the Figma app, you can download that from the Android or the App Store. Again, it's great to be able to mock up on that because it matches well. It's always going to be the future when you're watching this might be iphone 27. Use that. Okay, I'm going to use the iphone 14 and what I'd like to do is use another size frame as well. So I'm going to get the FK again. I'm going to use the larger size plus the phone 914 plus why? Because I guess this course here is showing you how to build components, auto layouts, constraints variables, all those sorts of things. Is so that we can build units that we can use in our designs that are quite flexible and resilient to different sizes, okay? And changes and being used by other people. And you know, that's the goal here in this kind of advanced course, is doing things that aren't just slap dash is the wrong word for it, but like just kind of like getting stuff done and then moving on. We want to make stuff that is really responsive. Use on different devices can be used by different team members, but without breaking it and by you using it in the future, saving yourself time. Okay, first thing we need to do is line them up. Okay? So they need to line up at the tops. I'm not sure why shift one shows you everything on your document. Just a couple little shortcuts to kind of flex our muscles. We probably know them already. Okay, next one is we're going to bring in some icons. So we're going to use another shortcut that we know very well. Probably maybe command shift K on a PC, it's control shift K brings in icons or brings in images, at least in your exercise files there is a folded court icons. Let's bring all these guys in. Let's click open now when you're putting in multiple images, okay, you can click once and you get like the size to which the SpG's been assigned. Okay. Sometimes they're huge and you can't even see them. They're so big. You've ever done that? Okay. It's like there's gigantic SG Illustrator file you brought in. Okay. You can click and drag. Okay, But you end up with these squiddy sizes, you can shift to get them in. Right? But it's not what we want. What I want to do is I'm going to undo to get rid of them all. Hit that same shortcut command shift K, control shift K on a PC. Bring them all in and it's just easier to go place all and they get kind of stuck in the middle of your document. First up, let's see that They're all inside frames. There you go. Okay. And I would like to say you, I'm going to move them all over here to the edges just to get them off the iphone frame for the moment. Because I want to do a couple of things. First thing I want to do is make them into components, because everything normally ends up being a component. I get that asked that question like, what should be a component? Most things doesn't hurt to make it a component. And we'll help you later on, especially if it's going to be used more than once, like these icons. And by more than once, not like necessarily on the same page or even in the same document. Maybe it's going to be used in another, you know, a completely new Figma file. Okay? And you know, it's going to be used for future projects. It should be a component because they all lead back to that original one, and when you make an update, they come along for the right. Everything be a component. All right. The next thing I want to do is I want to make them, I got them all selected here. I want to actually just say make multiple components, not just one giant one, okay? I want to make multiple components all separate, okay? They all are there, nice. Let's get them to an appropriate size. Now, scaling them is easy, right? If you got them all selected, hold shift and you grab the corner and they scale down, that works most of the time. But in my opinion, it's better to use the scale tool to do all your scaling. So it's the K key on your keyboard. Okay, Or you can just pick it here. Okay, use that one because it will scale things like the stroke and effects at the same time. If you've ever downloaded somebody else's icons and they're not scaling quite right and the strokes are staying the same and the drop shelters are doing weird stuff, just use the scale tool. The other nice thing about the scale tool is over here. You can pick scales. You can say, I want it to be, you know, you're working on a design that's four times the size or it's half the size. What I tend to use it for though is I can type it in. Over here I can see. All right, I want you to have a good icon size. What is a good icon size? You can pick any icon size you like, but 32 or 48 is generally a really good icon size. Everyone, I wanted to throw in a little further explanation. I've got a couple of people lost. I wanted to just show you how you get out of it if you do get stuck yourself. And it's good to know for everyone is I've got these, they're all stacked. And if I select them all and I go to command K. Nope, just hit the K K den and go to let's make them all the same height and width that work perfectly. If I undo, if I just give them a lazy selection and do the same thing, let's go to K, make them 32. What's ended up happening is I've actually, can you see all the names are all out here, but the icons are down here. So the frame that's a, on the outside didn't get scaled, but the bits inside did you end up with like this weird thing where the parent wrapper, okay? The frame, the vector inside of it are different sizes and it makes everything really tricky, okay? And sometimes you can select just bits of one and not the other. So if you end up with this name hanging out in the middle of no win'sland, if you end up with a name just kind of hanging out in the, you're like, what is that? Danger means that you've got an icon kind of detached from its parent frame. It's still in there, like you can grab the name and move it around. The thing with the names as well is just to reiterate, if you're actually on a frame, okay, you're inside a parent frame, the name goes away. It only gives the name to the outermost wrapper. Nothing's really changed about it, but you can't see the name here. Still got the same problem. The giant frame with the thing on the inside. Okay. So that's something to be mindful of. Okay. Just make sure when you are scaling, you grab everything and just keep an eye in here in the layers panel so that the parents are all selected before you, little one. That was an issue is if I had a scale tool, they're all on top of each other and if I make them all 32, 32, they're all 32 width. But if I bring them in a different way in this course, I do a lot of just dragging files in. You see it brought it in differently than when we did it earlier, where we use the file, import file, import stacks them on top of each other, Dragging them in, you end up with this like little grid. If you do now go to K and go to width of 32. Let's go to shift two, zoom in on them. What ends up happening is it's made this whole group 32 pixels across, not the individual icons. This icon now is only 15.4 pixels, so it's easy to fix. You can work your way around individually and make them all 32, or you can kind of just get them in the position like the other import options. Just stack them on top of each other using horizontal and vertical align. And then do the exact same thing. Go to K and make the width or height and 32. There you go. Just a little bit of extra knowledge for you, for anybody that might have got lost, and for those of you got it right, it's just good to you will bump into this problem eventually. All right, carry on. It depends on what you're using it for, where they need to go. They can get bigger, they can get smaller. It's really common though you use multiples of eight. We'll cover that later on in the course why that's so useful. Okay, so I'm making them all a height of 32 and you might have done this already. Might have clicked off and gone, oh, I can't handle, they need to be laid out, Dan. Okay, I'm gonna undo that. It doesn't matter, you don't have to do it. But I just leave them there because I'm gonna slick them all and I'm gonna hit shift A K for my auto layout. And that's the shortcut auto layout as shift A. It's the same on Mac and PC. Figma seems to be moving a lot to that shift key to be a shortcut. Because it's the same for Mac, and PC, and Linux or whatever you're using Figma on. And then we go, we'll get an auto layout or do we We do we have a broken auto out? Okay, they went and changed the little thing in Figma and it's caused a few problems in the course. I'm back to update it. And it's really interesting because you probably haven't bumped into it yet. You might have. But what ends up happening is in the video, what I did was I selected all these and we said, let's make auto out great. And they all stack next to each other because they're all on top of each other now. Okay, that they've decided that instead of the default kind of making them all spill out into individual objects, they've just gone and stacked them all on top of each other and made this thing called an auto out. Still. Except that inside of this frame. The difference now is can you see these three guys? Can you see the difference in the icons? Basically it's something called absolute positioning. If you know some basic web design, you'll know what's happening here. But basically it's forcing it to all line up on top of each other by using something called absolute positioning. We'll cover that more later in the course, but for now we just need to turn it off. Okay, if I go you, you've got absolute positioning because I can see the icon has the thing A on the outside. You can select it and go all over here and turn it off. So there's option here. Do not want absolute positioning. I'm going to slick these last two all the way back over here, okay? And they're all now not absolute positioning. They have something called relative positioning, which was the default, but now isn't just means they stack like we want them to do our menu. And in our case, I'm going to kick the outside frame and I'm going to say instead it down, we're going to go right, actually horizontal. And all will be well for the rest of the video. The weird thing is, is that these are the different components. And if they're not stacked on top of each other, okay, I can do it and hit the auto layout and it works perfectly. It's horizontal, it's doing everything that I needed to do except that guy, see this guy, he's not included. Why was he not included? Okay, oh well, there we go. We know that if this guy's not included in, it's just like doing something weird. Watch this. Vertical, Horizontal. Why didn't that guy include? It's another bug that I've just found in this video. It's a good use case though of why it's important to keep an eye if things aren't working. Have a look in the layers, See if it's absolutely positioned. Turn it off, and now it'll be part of the gang. Here we go. Apparent frame up down. Excellent. We'll do wrapping, which is a new one later in the course as well. There you go. If things aren't working, check that they're not absolutely positioned. Another little tip before I go, that I saw caused just a couple of people and it's handy to know. Undoing. Undoing. Undoing, Undoing, Undoing. When we're working on icons, generally, I'm working on a frame. Okay, not in this No Man's land. When you're in the No Man's land, you get to see the little name of whatever they're called. You can see that kind of frame name, Ka, or in our case component name. If you end up dragging the inside of it, say if I go inside of this by accident and I can drag it separately from it, okay, that's bad, obviously. Okay, so what you want to do is when they're outside of here, it's really easy to grab and drag the names rather than trying to grab the objects. Mostly it works okay, but sometimes you can grab the inside part separately from the frame. So it's easy just to grab the name of it when you're outside and it's kind of like no man's land. Okay. It's a bit easier to work when you're actually inside of a frame, the name goes away and it's a little bit more deliberate with its selection. There you go, a little update bonus for you. Carry on with the video. So we're going to do that cool responsive thing at the bottom, you saw. So they've gotten components inside of them. Got a auto layout. You've done auto outs before probably. Okay, The basics are, see the little icon there, that's the frame for my auto layout. I'm over here thinking where's all my options. It's 'cause I'm still on scale. Hit V key k and everything will pop back up K, scale gives me some very specific stuff and then I'm going to have V to go back to my move tool actually it just typed in there. Going to hit cross, go away. All right, so order layouts normally default to the right one. We can go left and right. We can play with the spacing. Okay, we've all done this before. Click and drag the little icon to play with the spacing. Let's move it over here so you can see it. Okay? You can do it on the document. Okay? So you can click on it. And I'm going to zoom a little bit. And you can see you can drag it on this. Excellent. Easy. We can rearrange these by clicking just one of them. Okay? Or diving inside of it. You can watch this click at once. Double click it to go inside. And you can drag these around, because I want this to be the first, I want the heart to be next, and instead you can drag them. You can use your keys, so you've got one selected. Just use your left and right or you're up and down depending on which way you've got this going. Okay? And I want the ticket, so double clicked it, left arrow. I want that one there. What I want to do for this one is actually I want to turn the ticketing, the ticket option off. Okay? For the not logged in person because they don't have tickets yet and it's taking up valuable space. Now, low v. Speaking of low v, let's call it nav, hyphen lower. We'll do proper naming later on in the course. Okay? But it's going to be my low nev. I put nerve first so that they're ordered nicely so you can have never lower nav side. Okay. And what I want to do is double click this guy, ****, that's him. And I want to turn the eyeball off on. I came delete him. Okay. I can delete him and watch this actually double click. Delete him and he's gone completely. I don't want that, actually. I want to bring him back later on when the person's logged in, I want it to magically appear. That's the nice thing about auto out, right, is the spacing is cool, but it's this kind of reflowing, okay, this responsiveness that makes it super useful. So I want just those three for the moment. Next thing I want to do is hold space bar. Let's get this down here and just dump it in the bottom corner. Okay? And drag this over here and you can mess around in here. Auto outs. Okay, I'm going to use the center one. You can play around with your spacing. Okay, so we've got our auto layout. I'm going to duplicate it onto the larger phone size, Holding down my option key on a Mac, key on a PC and just click and drag it over, you can get a duplicate, grab the square in the corner. If you don't grab the square, sometimes you can grab the padding, and that can be a bit frustrating. Okay. So grab the square and I can resize it, look for the other larger size and everything sits in there nicely. It's not particularly resilient yet. Okay. But good enough to get started. The trouble with our auto layout at the moment is that if I then say, okay, great. Dan said I could turn on the ticket for this one. Okay, this is the one with a logged in user. Whoops. Wrong one. So, iphone plus, and here I want this one. Turn it on, that's good. Okay. And I can double click it and I can adjust it and that might be enough. Okay. But we're here for the advanced stuff. We needed to automatically reflow, wanted to be responsive resilient. Let's do that in the next video. 4. Designing in Figma with Auto Spacing in Auto Layouts: Hi everyone. We're going to look at doing the auto spacing between these different icons. Because at the moment we've got something that is quite manual. And the problem with it is if we turn on other icons, things don't reflow. Well, don't reflow very well, everything kind of spills over. Whereas this one here, now that we've got the auto setting going, okay, when we turn on our little ticket, you see everything reflows nicely. We've still got all our paddings on the left and right. Everything is nice and responsive. We'll also do a little bit at the end after we learn auto, just to add some kind of like rounded corners and interface kind of color in the background. A little drop shadow here on our auto layout For no good reason other than to actually make something during this course rather than just don't learning individual tools, let's make something together. Okay, Just send this to auto instead of a fixed space between like 98 that I've got. Okay. All you do is with it selected over here under auto layout, go to the three little dots. Hey everyone, a little update. And they've gone and moved it from the three dotted lines to underneath this dropdown now. And they've changed the name. So it used to be called Space Between, so you'll see stuff online that says space between And go to the three little dots. But now it's the same thing, but they've called it something new and they've moved it somewhere else. So it's now underneath this horizontal gap. Okay? If you hover above, it turns into a little dropdown. And this dropdown has auto. Okay? So instead of space between it is auto and it's put in instead of my 98, it's automatically filled the space. So the frame is a specific size, the icons are a specific size, Everything else is automatic. They're just going to fill it. And what we need to do now is actually add the padding to the outside, and that's a new update as well. So this might change because they've updated it and it's really painful to actually grab the padding actually in the frame. You used to be able to just easily hover above the side and just drag it in. That might change back. Keep an eye on it. You can get it. Watch this, looking for that, see that little number that appears there. If I click and hold, drag that, that gives me right hand padding. Okay. And I can try and find it over here. And that's actually this right, this is left hand padding. If you do grab it and you hold down option on a Mac, on a PC, you can do both at the same time. Can you see it Drags both sides, which is kind of handy. Same with the bottom. If you want some bottom padding, it's just really hard to get what was the number. Can you see it flashes paint the button, so don't drag it on the document, Just go over here and type it in to say I want the left and right and the vertical spacing if you want to. Once it's in there, it's actually easy to drag, zoom in a little bit. And what you'll notice is if you hover above it, can you see get this like a little blue line. That blue hash line is the padding. So we're not messing with the frame. The frame is the specific size. We're just messing with the padding which is great for this like auto option. Let's jump back in the video and show you why it's awesome on responsive designs. Remember two changes, space between is now called auto, and padding is really painful to grab. Just type it in over here. There you go. But the cooling about it, once I've set my margin, These is just auto, you can see they just resize to fit. And that means now if I add it over here, drag it across, holding down older option, watch this. If I drag the corner now, can you see? It leaves the same margin because I've decided that I say margin quite a bit when I mean padding. Padding, figmadin. Okay, so I've still got the exact same padding on the outside, which I want for consistency across different apps. A bit more space though, and look auto goes and fills that space. Why is that good? Right now you'd be like, yeah, I can do that. It's when you have to turn on and off different parts. Okay. And get things to reflow the moment down here. Watch this. This is the old one with the fixed spacing. Okay. If I turn on my eyeball, Watch this. Turn it on. It gets wrecked because of my fixed spacing. Okay. It tries to force all of that to happen and there's just not enough room. Whereas if it's auto, okay, I can say where it is. I can say you turn the eyeball on my ticket sold. Okay. Look at that. Everything reflows auto is awesome. I want a specific padding from the edge for consistency, but these are allowed to juggle about. Now what I tend to do is not use the long way. Okay. The spacing mone packed space between. That's fine. Okay, you can do it a quicker way and just replace the number in here. Okay, the horizontal space between items. Okay, the space between our icons, just double click it and just type an auto. It's generally quicker and easier. You can kind of see the icon change look before, after, before, before. You can actually type it in down here as well, which is this. If I go undo, you can click it once and you see says 113 type an order. Okay, we use our shortcut member Alt or option to drag both sides at once, or you can type it in over here. You can say actually left and right is going to be 48 or maybe 56 depending on how much padding you want. All right, Next thing I want to do is I want to style the frame. This is totally nothing to do with the auto auto out. We just need to do this before we go away because I find that working in a rectangle is fine. But if you look at your phone, you'll notice that you don't have a rectangle. It's rectangle ish with rounded corners. So I'm going to do that to our frame. Before we move on, you can skip ahead if you don't want to make rounded corners. I'm going to click on the name iphone 14 to click on that frame. And I'm going to say you have a border radius of 30, okay? And it goes around all of it, it's more realistic for a phone. Especially when you're trying to do margins and padding. You can see kinda was too close to the bottom, but with a round of corners, exceptionally too close to the bottom. So I'm going to click on my order layout and I want some padding from the bottom. Okay, 24, It's about right. If you are thinking what is about right, Who makes these rules? You can make your own rules depending on how much you're using the operating system, okay? Like Android or iphone. How much you want to mimic it, or how much you want to do your own thing. If you are looking and you're like new to UX, new to UI design, and you're finding it a little bit tricky. Like why did he pick what I tend to do when I'm working on a component that I don't know much about, like this bottom nav. I'll go check out the IOS documentation or the Google Android documentation. Okay, let's look at one of them. You can look at either of them. Both of them. Okay, let's have a look at this one here. I'm using the Android one. I do a lot more design on Android because that's the phone I have, that's what I want to test on, and they have really good documentation. Okay. Google Android call their design system called Material. Okay, It's at M three. At the moment, it might be M 20 by the time you get to it. The nice thing about it though, is you can go to things like this, okay? Go to components, have a look through, see if you can find the name of the thing you're trying to design. And if you're a new UI design, you might not even know. You might have to go spend some time in here and go, what the hell is a navigation drawer? What's a navigation rail? Some of them are easy, like I want a navigation bar. The cool thing about it is that it will have a lot of documentation about how to use it. Where to use it, the best thing is, can you see that there's actually a Figma design kit for this? You can open it and start copying and pasting bits out too good. Okay, have a read through. It's good to get your language correct. So you know, you're using, you know, a burger menu and not a nav sandwich because nobody calls it that except Dan. Okay? And you can go through and find out all sorts of stuff about spacing, okay? How far from things should be, okay? There's lots of good stuff in here. How many you should fit in here? How many should not fit in there? How big they should be so that they're clickable. Loads of good stuff, along with examples. Now we're doing it for Android here. You can look at the IOS apples version. You can look at maybe a framework that you're using. K, say it's a web design that you're doing. Have a look what they've done. Bootstrap, Tailwind, Wordpress. They'll all have specific documentation about how things should K quotes be implemented. And you can use that for a starting point for your design. Next thing I want to do is I've got my rounded corners. I want to make this a little bit taller. I would like to have a little bit of padding at the top. Okay, Often it's more padding at the bottom than the top. Kind of think framed photograph or framed painting on a wall that kind of like chin at the bottom. There is more than the top, gives it kind of a nice footing. Foundation in our case keeps it away from the edge of the frame. The other thing I want to do is I want, you saw at the beginning here, maybe you did. I want the background color to be a slightly different interface color than the front here. Make this stand off a little bit. We're just doing some basic stuff, you can skip ahead now. No more cool auto layout stuff, more just designy stuff. I'm going to make the iphone a particular color, okay? Fff is the white, F seven is what I like with these colors here. If you just open one, I know that the color I want is 777. Okay? On repeat. If you just type in one of them and enter it, will fill them all out for you and give you the color you want. That's the color I want. Okay? Kind of a darker gray, kind of like that. Windows operating system background color. It's so that when I go to this auto layout down here and I say, I want you to have a background full of white, See there's a bit of contrast between the two. Not huge, it just allows us to see the boundaries between these two. What I'm going to do is actually add a little bit of a drop shadow. I'm going to say effects. I'm going to say drop shadow, going to click on the little sun to change it. I want it to be up a little bit. I want it to be zero down. And I want it to be blurry. And I want it to be, let's have a look shift one to see everything. It's probably a bit strong. I'm going to say you're down to 15. I want just that little subtle hint that, look, I'm separate from this. A little update to the video is that if you did find that when you're adding drop shadows, so I've selected them all down here, added effects. And the drop shadows can you see here are applying to the icons and not the background, the thing that you might have missed. Okay. Or the thing you need to double check is I'm going to undo it to get rid of it, is that you need the outside parent frame. In my case frame, one needs to have fill of white and then add the effect. The effect will apply around the outside of the frame rather than the stuff inside of it. I've applied the effect, I can't see it, so I'm going to hit the little sun. I'm going to say, I want you to be like minus six just so you can see. Okay, so if the frame doesn't have a fill, it'll apply the drop shadow to the icons themselves. Handy to know. Carry on. All right, so now I want to copy this frame details to this one. Okay, I'm going to select the frame title. Let's go Command option C. So it's kind of like copy. Okay, but with that extra key on a PC it's similar, it's control Olt to copy it. And then over here it's those same two keys. And V again, it brings through my background color, brings through all the radiuses. Now there are shortcuts. We're like, man, I'm not going to remember all these. Then what I find is the super shortcut that everyone might know, that you might not. I've got it selected here. I can't remember what paste properties is. So with it selected, just hold down the command or control key on a PC and hit the forward slash. Have a look at your keyboard. Okay, it's the forward slash, the one that leans forward and just type in, I don't know, properties. You can see there, copy and paste properties, you'll learn the shortcuts. But also it's almost just as quick just to click on these, especially if it's not a shortcut, you use all the time. That's command on a Mac, control on a PC, and forward slash, you can get any shortcut you like paste properties, I did not need it on that. All right, so we have run into a little problem. Okay, this has updated with a drop shadow and it's got a white background. This one didn't. Why not? Ooh, 'cause it's not a component, Components inside components. Let's do that in the next video. 5. When and when not to use Components in Figma: Hello everyone. Let's talk about when you should make components, when you shouldn't, and some of their cookie things to do with components when you're making them. Let's start by making this into a component because these are two separate autolayouts and you can see them over here. The little icon is not our lovely waffle shape or these diamonds. Okay, so we're going to convert it and the first thing is going to happen. It's gonna be kinda weird. Watch this. I've got it selected. I'm going to use my shortcut, which is Command Option key on a Mac, Control Alt key on a PC. And click that. And it's going to convert it into our component. Great. What happened over here? Okay. It's spat out all of these internal components. These are were inside my autolayout and went, Hey, you can't be inside here. So they spit them out and left instances of those components inside it's ever look. So let's undo it and have a little break down just so you get an idea what's happening. So inside of here are these, These are my main components. These rule all the other components on all the other options. And it is best practice not to just leave them on page one. A lot of people do and they can work. The trouble is, is that we can't have these main components that control all of these inside another main component. So when you make it, use your shortcut, remember Command Option key on a Mac, Control Option, concert Control, Alt key on a PC, it goes, you've got to be in here and spits them out over here and we've got these components going on over here. Okay? And then not even inside of this frame, okay, they just kinda hanging out underneath it. So what we can do is that's fine, Like totally fine. It's collapses up. I'm going to grab them all. It's an eyeball on on this one because we turned it off before grabbed them all and with them selected, I'm going to just move them over here. Let's zoom in on them a little bit. If you've got them selected member, you can hit Shift to and it will jump to what you've got selected. And we're going to use this tidy up just because tidy up is awesome. Did you notice before we're not up here, I couldn't do tidy up because Icahn doesn't fit. You go to zoom in. Here it is. You just gotta be in a zoom level where this thing fits and just do them nicely like that. Great. So that might happen to you and you might not even noticing, you'll end up with weird stuff, kinda hiding under other layers and it's a bit of a problem. But hey, we've worked it out. And the other thing is that we're not going to leave this here either. Because on the first frame, you can, okay, I don't imagine I'm gonna put this into another component, but it might do. So it's just good practice to drag it off over here, holding down my Option key on a Mac, alt key on a PC, click hold and drag and just move it over here. And what I've got is actually less just drag the whole, don't drag that. Strike the actual icon itself. And so I'm going to keep my main component over here, and let's keep an instance. All my first artboard. Here we go. He's now a component. This one here needs to get switched out. They all need to be the instances. And because we've got the setup, sweet, Oh, we should be able to just go, you look like it, That's all good. You can see here this one is set up to Auto. So as this one all controlled nicely by our main component over here, we got it. Now the question of when to make components is there's no specific rule when you're at your initial design stage and you just kinda like missing things around. You don't need Components. It's not until you get that second frame. And especially for things like buttons and icons, they should always be components because you're going to reuse them. But like me, you'll end up doing stuff where you kind of like make, make a little card here and you end up duplicating instead of making components. And then there is nothing controlling them all. So you've got to go through and redo everything or at least adjusts every single one so you end up bumping into when you need Components. Last thing about components is that when you're storing your main components off to the side, often can be on another page. When you've got a slightly large document, I keep it on the same page when the designs quite small, there's a lot of missing around. I want to go back to the main components a lot, so I just pop them over the side here. But when you got them over the side, it's really important to put them inside of a placeholder frame. So the FK for frame tool, and I'm just gonna put them on this. I'm probably going to make it a different color just so I can see the contrast of the white, why they inside there mainly. So let's bring this out here. So it's not inside of a parent frame is just hanging out by themselves. They'll MainComponent. There's nothing over here that you can set the constraints, the constraints. Let's go home this one, because it's inside of my phone frame. It says I can set the constraints to the top or the left, my case probably the bottom left. Okay, because I want it to stick down to the bottom of this frame. Means when I adjust this one, just the parent frame. Can you see it sticks to the bottom. Perfect. But I want to do that for the main one, so it sits the default. So every time I drag one out and I have to change it. But over here, look, I can't do that. But when it's insight will do that. Drag the name when it's inside this can you see the Constraints appear because it's inside of a parent frame in just a placeholder using it for anything else other than to say that is it. So that when I drag new ones out, it's got the default of bottom and left. Main components can't be insight, other main components. And it's handy to have them all inside of placeholder frame, even if it's on another page, just so that you can set things like your Constraints. Oh, one last tip about it as well is that you can't delete things in components. So if I go into here and before moving on, we deleted something, it went away from an hamper. If I hit my Delete button, then I think about component is can you see the eyeball just turned off? Let's move this over so you can see. So I went Delete on my keyboard. Goodbye, it just turn the eyeball on and off. Okay, so that's the cool thing about components is that you can't delete stuff. If you want to delete it, you've gotta go back to the main component and then delete it from here. Making all elements that we're building a little bit more resilient and making sure when other people are using them, we're giving them to other members of staff that are not risking it and completely removing bits there, just turn the eyeball on and off. There we go. Dev became a little longer than I thought that we're just going to turn that into a component. There we go. Hope you learned something. Next video 6. What is good spacing to use in Figma: Hello. Let's make this. It is just a helper spacer guide and it is an answer to a question. I get a lot like, how far apart should things be? What spacing should they be? What size should they be? What's really common? It's these. And what does this do? It's nothing. It's just a visual cue. So when we're designing something, we're like, how big should it be? You can look at this and go, it should be about 24, actually, 32. How far apart should it be? Ah, let's use six. Let's use 16 plus. It'll give me a reason to show you a really cool plug in. Okay, that'll help do all this kind of documentation for us. It's good for this little spaces here. But also when you get on further and start making things like design specs for you developer and maybe a design system. Alright, boxes and plug ins, spaces between boxes. Let's do it. Alright, so let's make a grid. I'm going to do it over here. A little spacing grid. I'm gonna for the rectangle tool, hold down my shift key on my keyboard to get the height and width the same. And I want my first one is going to be eight. That's a good like base level. If they are linked, they should both become eight. Okay. The width and the height. And I hit Enter on my keyboard. Excellent. I'm going to pick our really high contrast color. What I'd like to do is just have multiples of eight as we go up. Okay, zooming a little bit, what we can do is hold down the option key Ok on a PC to duplicate. And I'm just going to drag it out a size. And I'm going to use my math over here because I'm not good at math, and just say, plus eight. Here we go, 16. Okay? I can do that math, but let's do another one. Let's go plus eight. And I'm just going to keep going up to a size that becomes too big. Let's do that. I want to do this in speed mode, all right. That's probably enough. In terms of spacing. Okay. And things away from the edges of other stuff. I feel like that is big enough when we get it to 48, it's pretty massive. You can keep going up to you. I like to see the spacing between things as well. This is good for like units of things. How big should your icon be? How big should that image box be? How far away from the edges it should be? Another way is the spacing in between can be quite visually helpful when you're making it. And there's some common sizes for that too. I've got my first box. How far away is the smallest distance? The smallest is zero. So we don't need zero. We can all imagine zero. Let's look at the first one. Is four, okay? So four pixels across. How do I know it's four? Okay, it's a zoom in. Can you see the grid there? I can see it's four. You can also double check with this selected hold on the option KamPC, And you can just like hover over stuff and you can see, look, I am four pixels away. Four, six is the next one. That's the next really common size, not divisible by eight. I know this, but it's a really common spacing between stuff. There you go, six. The next one, when we get more pixels away, eight away from something, is it's easier probably just to drag it next to it, completely next to it, to say X and Y please move plus four pixels along the X. Let's how you can get your spacing done. There's some small ones, 468, and then basically we go in either whole or half divisions of eight. I'm going to go 12 for the next one, 12. The next one is going to be 16, which is two eight. My last one, I don't have a last one, I probably need a 20 in between them. So I'm going to go, this one is going to be plus eight, plus eight, and I'm going to make it 20 is another spacing that I use. Now again, these aren't the rules rules, but often these are really good sizes for things and these are really good spaces in between things. Now that's handy, but it's hard to know. Well, you can actually click on and say, oh yeah, that's 48 and then go off and do stuff and look at spacing and go, okay, how far away should that be from the top? About that. Hold down your option Koga, that's 12. And then go back over there. Be nice. If they're all labeled, you can write them out. That is boring and tedious. Let's look at our first plug in for the course. So plug ins can be found in this icon here under resources. Okay, we're going to go to Plug Ins and the one that we're going to look at is Design Doc for this case. Now there are lots of competitors to this particular app. Find the one you like, and Design Doc might not be working in a little while. Basically, when I make these courses, it's about the time that whoever decided to make this plug in decides to not update it anymore. So again, this is more of a, for instance, than an actual go and use this particular one. So I'm going to find it by searching for design doc. One word, I'm going to run it. This thing opens up. It's pretty sweet. Watch this. If I click on this one, let's move it over here and say I give me the height above it. Look, boom. This one here. I want the height above it. Boom. You can't see it, can you? Here you go. And it just makes it nice and big and easy, so I can not have to go and measure this. There we go. We can use this on future projects once we've made it. What I also want to do is click on this and this. I'm holding shift to select two things and actually I want show me the outer spacing. Very well designed app plug in. Okay, I'm going to do that for all of them. Be back in a second. All right, so that is a sweet app. Quick little shortcut command option control, Alt P is to open up the last plug. And if you're using it over and over and some of them close down after you've used them, that's a good shortcut. I'll make sure that's in the shortcut sheet. Okay, with this app here, it's great. It's made this, can you see It's kind of made an overlaying thing. I want them all mixed together. I probably want them all in their own frame. At the moment they're in a group, they set a little dotted line there so I'm going to slick off, grab my frame tool, draw a box around it all and say you have a fill of this dark color and I'm going to have to play with a layer, order it, grab a few of my rectangles and some of the container, not all of it. It's a container, you go above all of that. I've got all my rectangles here. We'll do Layer Madness. Layer on later on in the course. Okay, For the moment though, we'll go caveman style. Just drag them into the right place, they didn't quite work. There we go. All right, this is going to be my measurements. Awesome. So handy, plug in both for what we're doing just here and later on when you start doing specifications for the developer, either a handover document or maybe a design system. So this will be what we'll use as a visual guide as we're going through this course. Yeah, to help with our spacing and knowing how big things should be. All right, onto the next video. 7. 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 and the last one we did, I get that magic from. How do you get better at it? If you are already quite proficient, you spacing, you can move on. But if you want a little bit of and help to make sure things are consistent and easy to work with your developer when you hand off your app, not causing problems, or at least being mindful of the developer and what they're gonna be working with. Watch this video. So there are lots of places that your app or website I going to end up. And what will end up happening is your engineer, your developer, whoever you 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 gonna be going through and putting all the knots and zeros. They're gonna be building on top of things that are built on top of things that are built on top of things. So if you are iOS developer, the developer is going to be using the pre-made, or at least guidelines from Apple. If it's Android, it's gonna be this material as what they call it a design system. And they give you lots of helpful things about how things should be spaced apart. If you're going to whip, it might be bootstrap, it might be tailwind. So talk to you to develop our figure out where it's going, what the building it on, and then have a little read around. It can be confusing, but we need to get cited in these sorts of things so that you can actually 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. You kinda have a half a pixel. You can divide out enough. 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. In there, Material IO, they're on their version three in the future, you might be at version four or five, chicken out. Okay, I'm under foundations. I'm looking at Layout, understanding that. 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 like pixel densities. Just consider it pixels if you understand that when you're designing in Figma, DP equals Px. So they using spacing of 24 to make sure when you're building out your little spacer block and you're going to Android first, make you get 24. That's the default. It's happily divisible by eight, not by chance, or at least it's really common spacing for the moment. Let's have a look. And iOS have a read through what they do. I think they 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, there is Watches. So have a little look. What are you designing for? There will be documentation online. If you'd going out to whip, say building a website or web app, find out is that WordPress is WordPress using Bootstrap. Bootstrap is a framework that helps developers work fast, okay, and what they'll end up doing is to have a little look. I found this, the gutters is what they call it, the space between stuff. And the default gutters are 1.5 rim. And you can see there that 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 kinda consistent with Bootstrap and it's consistent with Android depending on where you're going. Now there are 100 different frameworks, tailwinds people using this a lot to help with their styling. You can see in here I found under GAAP K bootstrap cause a gutter, tau1 causes gap. It's all useful to know as a UI designer, you can see here what a developer will type in is they weren't actually type in the number. They'll 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 marine, a ringed by default is 16.25 of 16 is full pixels. Remember that a little spacing we had before, that's the minimum one here. It's a good rule to not go. Three divisions become tricky and you develop. It's going to have to go and override a lot of the framework defaults. You can do it, but you develop a probably just ignore it and use some of the defaults unless you force them. Okay, Let's have a look. So 166810. Oh, these a ten. You might decide that in your design that you need a tin or was it? We don't have a tin. We've got 46812. There's no real hard and fast rules on what these can be, but a few design for 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. The big takeaways is multiples of eight. Good. But really you should check out how it's getting made and copied that don't make the transition from Figma to the actual design and development a lot smoother and you don't have to, but I've got a wave Essentials as well, which covers a lot of the things that we look at here, like what does the rim with the DP? What is Bootstrap? What does Flexbox? There's all sorts of good stuff that you can learn that will inform your design when you're in Figma, but kinda 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. Alright, Was that confusing? A little meandering. Anyway, let's get on to some more hard skills in Figma 8. Auto Layout vs Constraints in Figma: Hello, let's talk constraints. We covered it a little bit in the essentials course. Let's look at making sure that when we go and re size for different phones it doesn't break. What we want to do is be able to have something that is resilient, robust and responsive. Okay. All the Rs so that when we do change, it comes along for the ride. You and my friend need to be Android mini. Oh, look how quick and easy that is so that you don't break it, your teammates don't break it. And it looks the same across all your devices. Okay, so it's easy. What we need to do is we need to select on our lower nav. We should probably do it to our main component, so that if we duplicate it later on, we're all kind of doing it to this one. If you can't see constraints, there they are, okay. Remember they need to be inside a parent frame. Mine's just like a placeholder. Just so that I can change it, okay? It doesn't do anything. But I'm going to say, actually, don't be left and bottom, Let's be stuck to the bottom, which is good. But I wanted to go not left but left and right. I want it to stretch out. I don't want it to scale in this case because I don't want to scale the contents. I just wanted to stretch to the edges. Now, we can do one or two things because this is actually not one of my instances. So I'm going to delete him and I'm going to drag this one out, holding my option key. And now he should be defaulting to left, right, bottom. And you're like, that didn't seem very useful, okay, because we just dragged it out. It's when you move on from here. So when you go, okay, I need two of these now, or I need another size. So I'm going to make my Android size. I'm going to duplicate this whole thing out. Okay? This is going to be called Android. Okay? And I'm going to say, actually it needs to be the size of, so I've got the name selected. It's got a frame. Let's go to iphone. It's going to be Android small. Okay? One of the smallest devices that we're going to design for in this course. Do you see what happened? Oh, look at that. If you don't have it on, I should have done that. Should have before and after. I think we were stuck to top. Yeah, Top and left. If we don't do that and we say, hey, go resize to it. Enjoy it small, not very useful. It's kind of disappeared off the frame, so get it back, and I'm going to switch it back to that smaller size. Here we go. Quite the responsive little component now. Now remember a couple of notes. If yours is not kind of resizing how you want, it's probably that your auto is not set up as the spacing, okay? So you can slick it and make sure it's auto, otherwise it might not be doing exactly what you want. And remember, constraints can only be found if it's inside a parent frame, okay? And by parent I mean that there's this outside one and that this child, okay, is inside the parent without it. Okay. There goes away. Now, another little problem that a few people are having I want to add here in case yours is not working. It's a strange thing I haven't been able to figure out a solution for. Is it a bug? Is it a feature? I'm not sure, but this is my master component over here. I've called it frame one and just rebuilt this quickly. I make out an instance. Can I drag it over here and I get it all lined up nicely? Okay, now the original master component, actually main component, okay, with it selected, it's got constraints of the default to left to top. And you're like, okay, that's an instance of it and that's set to left and top, that makes sense. But if I say you main component and I say you are left and right and set to the bottom like I did earlier, the instance should update and it doesn't can't work out why I've been like looking at this for half an hour trying different things. If you know, let me know in the comments, what I'm doing wrong, can't work it out the way around this and the way I did it in the video, that's why it doesn't look like a problem is what I did is I deleted this and once I've changed it to left and right and bottom, then I dragged out an instance. Okay. And then resized it and it came along for the ride. But again, the instant doesn't update if I change it, if I say you now need to be main component are going to be instead of bottom top, you think this one come along for the ride but it's still at the bottom, feels like a bug. This may update by the time you get to this video, but yeah, caught a few people out and it was interesting for me to learn as well. Bit of a pain, having to drag out a new instance of it. But hey, ho, there we go. Alright, carry on with a video. Now we're applying constraints to a component. You can apply them to anything, regular old rectangle constraints as long as it's inside of a parent. It could be auto layout, it can be text, it can be anything. But you already knew that. The other thing interesting about constraints is that they call them constraints here, K n Figma. But if you've heard the word flex box before, basically those are the attributes we're adding to this. They're doing the same thing. If you've never heard of flex box, it's one of those things to go have a look at. It's how it's implemented on the web side. So either your custom doing it, hacking your own CSS, or if you're using Webflow, they call it Flex Layouts. It's the same thing. Components, Flex box, Flex layouts. It's all to do with how children interact with their parent, okay? And you can do a couple of different options in easy. One last thing is that when you're resizing it, we just typed it in and kind of redid it all. If you just drag it, it works too, okay. Just means you've got a lot of goodness and flexibility because that's what we're trying to do. Make things that can't be broken, they can be used in lots of different situations. Go constraints, all right, onto the next video. 9. Autolayout shortcuts: Tips and tricks to work with Auto Layout faster: Hello. I'm gonna put all the autolayout shortcuts and when video kinda smeared them across all the videos so far for them all on one place so you can come back to them later on. Bookmark this video, if you want to make it autolayout, easy, slick them all, shift a. It's an auto layout. Need to break up an auto layout. It's kinda the same. It shifts a plus Option on a Mac, alt on a PC, hit all those, and it goes backwards. It's just a frame, not an auto layout. To add things to an auto frame, you can click once double-click, click the item that's in the order frame, copy and paste it. People like to hit the Command D or Control D for duplication, doesn't matter. You can add by dragging, where did that stack come from? Made it watch this. I click hold drag, and it just appears in my lovely autolayout. That doesn't work. If you're trying to drag into the instance, undo. This, does not want to go in here, needs to go into the main one, even if you want it in here. But off over here, remember you can't really delete it, just turns the eyeball off. The main one rules everything, even if you put more than you need so that you can go are I need you on? I need you off. But it's to the star. Back on this one, you might have to squeeze a bit too much into your component to make it work for you. The thing that won't go inside our auto layout is this. It's a main component. It's the main component for my ticket icon. I can't put them in. Look, just won't go. If it's an instance of it like this, it'll go in there, fine. Okay. Why is that not because it's an auto layout, is because this is actually a main component itself. You can't put main components inside of other components, didn't like it. You can put main components inside of this, which is just an auto Layout, not a component. You'll go in the happy, that makes sense. Main components inside each other. Then you go, It's a little bit of shorthand for the padding. So I've got my component Instance selected. I've got a whole bunch of padding going on. I'm gonna hit zero, tab zero, tab zero, tab zero tab. To get rid of it all, click off, click back on. And I've just got these two options here which are normally faced with, you can say actually I want it to be 48. And then we'll do both sides. I can tab across and then I can say top and bottom separated by comma. So I can say actually I want it to be 64 at the top and then a comma and be aided the bottom and hit Enter on my keyboard. It assumes top and bottom. There we go. Your fancy coda that using commas, you can copy and paste parts of an auto layout and all of it. So with this selected, I want to put it on this other instance. I can use the shortcut that we've used before when we copy the frame. Remember it's Command Option C to copy control Alt C to copy on a PC, okay, those same two keys, but V, look at that. He's down there somewhere. There it is. And it pasted my padding. And in this case I've got an absolute fixed height on this. So it's kinda not working. So I'm going to say You, my friend, on a fixed height, you can hug the contents please, and they look the same. And last one we've already done. You can click on those and use your arrows left and right to move it around. Alright, Those are out autolayout shortcuts. So far, there'll be in your shortcut sheet that you can download and we'll keep practicing them throughout the course. Thanks video 10. Class Project 01 - Responsive Lower Navigation: Hello, hey, welcome to the first-class project. And I simple one. I want you to get up to where we are in the project already. K, I want three frames and I want you to be able to do this. There wasn't a working group, Dan. Okay. I was bottom and left and right. So I wanted to respond or the icons to move, I wanted to stick to the bottom even though I've shown you what to do. So I want three different versions. Make sure they worked in. If you haven't done a class with me before, we do class projects just to keep you up to speed. And so you're not just watching, you're actually doing courses up to you. You don't have to do them. I'm not the most of you, but the doing part is what really makes it stick. So if you are keen, the class projects is listed in the exercise files. Okay. Class project, don't one, I want you to create three different phone sizes. The lower Nav, I want it to be responsive to all those sizes. So we're gonna be looking at these main topics, autolayout, the Auto Spacing between the items and those constraints. There's the last thing that I missed up, make sure you're nav is a component. In this case, the deliverables. What I'd love you to do is to be able to take a screencast. Why don't want you to do is make a video of you doing this frame going like this and it all respondents TO not responding, Dan, I no excuses. I want it to do this. Okay. So video, the screencasts doing that, that is it. Now recording your screen can be tricky for some people. Other people will be okay with it if you've not done it before, Max have a built-in thing called screen capture. Pc's have something similar. I'm pretty sure if you want to, there's a way kind of built-in to Figma. Go to appear, go to your plugins. And final one, cool Vimeo record. You do have to login to a Vimeo account and state went up if you don't have one, It's free. It's really good at means that after a little bit of confirming email address and all that stuff, would you like Vimeo to record your screen? Yes, please. Okay. You can run it and you can actually just record your screen of Tim my camera off, my mic off because I wanted to do a screen recording. And once you're done, you can upload it to Vimeo and then you get a link and grab that link. And that's what you can submit for your class project. Now, if all of that is way too hard, I will allow a screenshot. Make sure you've got something selected so we can kinda see what you're doing that the Auto is there and Constraints arrived, that'll pass, but hopefully be able to do the screen recording. Alright, and that is it. Get up to where we are already. You might be already done it like yeah, just do the screen recording. If you've just been watching, Come on, now's the time. Go back, do these things if you can do it you like Oh yeah, I understand that. Prove it. Let's do it. But that's up to you. For now though. Let's get onto the next video. Actually you go and do that, and then I'll see you in the next video. Alright? 11. How to handle files in Figma and become a File Handling Master: Good morning everyone. It's a new day. And today we're gonna start with some advanced workflow tricks. In particular, this video is all about file handling. Seems boring, but it's one of those shortcuts that will, over the course of your work day, save your loads of time. And I'm going to use them throughout the course. I'll introduce them all here, so they're in a nice little groups that we know what we're doing. And I'll try and do them all the way through the course so that you like me become a file handling Figma shortcut master. All right, let's get started. Al right, the first one is easy, just make sure and figure me, you've got a couple of tabs open, even if they're just untitled documents. That's fine. And hit command automatic control in a PC and just hit 1234, so one gets you back to home base, okay? And 234 just means you can toggle between two different apps, copying and pasting. If you're like me, you end up with like all the tabs full. It works mostly in a browser as well. So the same shortcut, I'm in, Chrome command or control on a PC 123, except one doesn't go back to home base, it'll go to whatever tab that is. And like Chrome, you can have multiple tabs. If I go up to five there, that is just a regular old website. So it's not specifically for Figma, just all the tabs. That's control, that's command on a Mac. Control on a PC one. Easy next file mastery is you can actually pin these ones here. So this is the main one that I'm working with, event at one. So instead of being all through everything you can right click it and say actually just pin this tab, please. Becomes a nice small version. You can have all the other junk over here knowing that that's your good one. You can also reshuffle these. So say Untitled, the one you're actually working on. So you want to move it over here. Just click same in a browser, Right click it, Pin it. Drag it around, easy. Side note, I do it all the time. In Chrome, I have some documents that I always reference all the time, my like junk drawer to do lists, all the different E mails that I have to check, and my calendar is just always open. Then gives me space to do my other stuff like Figma and searching the Internet. Al, right now, the next one, Al. Right? Next one is these little dots up here have all your recent files that can be handy rather than going back to this and then being in the community and needing to go to the right place. Just go there all your recent files. If you're like me, this can also get unusable because you've got loads of untitled stand to make it work. Hover above anything you use all the time and see this little star here. You can add two favorites. Can you see them appearing over here? So the things you're working on all the time and the things you want to leave behind and be junk, okay? Or get swallowed up by the flow. But these ones here are going to be in my favorite file, okay? And remember on the desktop version, you got a little home one, which is what? How do you get to it quickly? It's right. Command one or control one. On the browser version, I can still go to command one, but it just goes to the first tab and all of my files are kind of hidden in the F there. See same. All the favorites are ready to next. One is if you are working on really big files or you're working with a really old, crappy laptop. There's this one here view, there's one called resource use. Hey gang, they've gone and changed the name. Used to be called resource usage, now it's called memory usage. You would have worked it out. I know. And a little bit more change is when you click on it. It used to just to have like a small little window here about how much stress your computer was on. Now has a giant panel about how much stress your computers on. We'll cover that in the video. Another thing is you can click on this button now, and it gives you a lot more detail than it used to. But the preceding tips all still work perfectly. You just have a bit more detail to work out what is causing your computer a lot of problems. If it's the layers, which layers you can turn a little checkbox on. And you can see here, none of them giving me any problems because I have zero memory usage, because I'm not doing anything and it's a very small file. Carry on with the video name change. Remember resources now, memory, okay? And it'll tell you how many layers you have. It'll tell you how much, kind of like gigabytes it's using. Basically, you got 2 gigabytes to use in this file, okay, Figma, And if you get close to the end of that, you can kind of see if things start running sluggish. Check it out to see if you're at nearly maximum. The other thing that can happen as well is that things can be stressful on the application. And it'll show you in this last bar here, if I paste a big document, I'll paste a big file. Can see it kind of went up there, I'll get rid of it. You see it's doing stuff sometimes that can get maxed out as well depending on what you're doing. Often it can be a plug in that is just poorly or just really system demanding. You might find that, why is it all broken? Have that open and you can see, all right, it's trying to do something, Is it super helpful? Kind is kind of enough. If it does start maxing out though, what you can do is like big images like this are just too big for Figma. And if you have a hundreds of them, okay, you can run out of resources. So you need to make them smaller, not just scale them down, they need to be smaller. Come in. And if that's not appropriate, just have multiple documents for one file. If your app or website is getting massive in the design, you might have to actually have two separate files and kind of divide them up so it's not trying to process everything. The other thing that might happen is you might be using somebody else's library. Okay, So let's go to our assets. Let's look at our libraries. If we, I'll turn on one of our libraries and it will potentially, our, one's only really small. Okay? So it's not doing much. But you can have somebody else's library on that has thousands. It might be a community, one that somebody has made this gigantic thing that seem really good. But that's what's slowing your machine down. It might be that you have to pick out the stuff you need or make your own kind of like version of the library just to tidy it up. It can be also just if somebody has made components and variables and they haven't made them very smartly, they're just like copies and copies and copies and copies and copies. And you're trying to use those either through a library or just copy and pasting them in. I'm going to share in this course how to tidy those up and make them nice, but you might be working with somebody else's file. Just keep an eye on this, you can get rid of it. Click at once. Double click it, actually, again, this one is in desktop and browser, and the same two gigabyte limit is kind of in both of them. It's kind of a browser thing. And essentially that's what this desktop version of figment is. It's just that browser loading without all the Chrome bits. Another one, small one. Look at this, you can resize this. Did you know that? I didn't know that for a long time. It's really handy, especially when you get into really long naming. You can just go that's better, and alternatively, you can make it smaller. Why is that handy? I thought it was handy when I discovered it. All right. Next tip. Actually the last tip. Quick actions. We've done this before. It is command forward slash okay. Or control ford slash the leaning forward slash. Okay? And you can type in anything like there's so many shortcuts in this course and learn and figmin you're like, alright, what was that thing, the resource use thing he was talking about. Look at that RS and I can go, alright, let's turn that on. Okay, so they have actually made another shortcut for it for like international keyboards, it's shift P. It is not shift P, it's command P. Okay, and it'll come up again and you can type in resource, and there's that one again. Okay, and it works for any shortcut. So what I might do is switch to command just for myself. I get better at using command P because command forward slash I always does anybody end up doing that? Command backslash or control backslash is turn the UI on and off, which is a good tip. Here you go. But I do that all the time and then hit this one 'cause that's the one I actually want. Let's use command or control P, two shortcuts to do the same thing. You will notice that happening more and more in Figma. 'cause they went with just like you know, USA Quirt keyboard at the beginning. And now they're trying to make shortcuts that are a little bit more universal to different languages. Keyboards. So you'll find that. Why is there two? 'cause there's two. Alright, that's my file handling wizardry. Onto the next video. 12. How to use advanced Copy, Paste, and Selection Tricks in Figma?: Yes, you read the intro, right? Advanced copying and pasting in selecting stuff. I'm going to try and make it exciting, but it's advanced and it's good. You're going to need to know it. So there we go. Let's get going. I can feel you there. You're like I'm gonna skip this video a bit to get good quick. Alright, it's gonna get you there some useful stuff. So we know that if we grab something from this framing, copy it and we want it on this one, we can hit Paste and it puts it exactly where it founded in this one, which is not actually aligned to the bottom. Yeah. Okay. That's right. Wow. What shortcut is Dan got? What we can do is copy it like before and then click on the thing we want to stick it over. Okay, click on it and you can hit Command Shift V or Control Shift V. And look at that. It puts it over the top, not where it isn't the frame, but we slept like if I click on this and had that same shortcut command Shift V, Control Shift V. It's just sticks it over the top of the thing you have selected, which is almost good. Look. It's still there though. Didn't replace it, just kinda puts it on top. So I'm going to undo that. I still can't work out why that's good. But the ego you can replace over the top of a selection. What's better though, is if I copy it and I do a slightly different shortcut, which is Command Shift V R or Control Shift. Boom, it actually puts it and replaces the thing you have selected. You've got this and you need to replace these gyms gate. I'm going to copy it and then I'm going to select it and go Command Shift V. I'm gonna go Command Shift R. There you go. It replaced it. The thing I had selected, not because normally you go copy. You click on the frame and it goes exactly where you want it. That's kinda good and mostly helpful. You can do it in a lot of goals as well, which says I'm going to undo, bring back our lovely Comic Sans. I'm going to copy this. I'm going to you and you will it do to it we'll do to Command Shift, Control Shift or wherever it is on the frame. It hasn't just staggered over the top. It's replaced it. That'll be in your shortcut sheet for sure. And most of you will know the shortcut. I just draw a rectangle, the top, for example, gay and I'm gonna select all of these frames holding Shift and hit Paste, just regular old pace. Can you see it puts it on every single art-board. This one now, sorry, frame. This doesn't fit across, but that's okay. Great way of getting Nav across lots of different frames at once. That's multi paste. You didn't do anything. You just select multiple frames and hit Paste and it sticks it where it got it on all of them. Now the interesting one is if I copy this and what tends to happen is like most programs, if I go to this one and hit paste it puts it exactly where it got it. Or if you have nothing selected, it just pastes it where it got it from unit with his duplicate over the top. Is this handy? You can actually right-click it and we have you right-clicked your cursor is this special option. This is paste here. So say you wanted, because otherwise if I'm up here and I hit Paste, can you see I want it over here, not down there, go away and it's overlapped. Going to say right-click paste here. It goes to wherever your cursor is. I'm trying to six though. It's got a good though, right. It was with the thirty-seconds anyway. Okay. It's time to scrape the bottom of the barrel. Next one is select inverse. So let's say that I want to leave the nav on this page of gear over everything else. So select all command a, selects everything. The cool thing about command a is that if you're inside of a frame, it selects everything inside of that frame. If you have nothing selected and go Command a or Control a and selects everything in your document, you can hit delete. But if you're inside of here, select all, usually everything inside that frame or do whatever you need to copy it, paste it, do the paste here, maybe. But now there is a select inverse, okay, So I'm here, I want to select everything, but this, I do this all the time. I'm going to clear out everything in here will change the color of everything in the frame, but not this disliked the thing you don't want. Hit Command Shift a or Control Shift a on a PC and it selects everything in reverse except this look, he's left behind. Except weirdly in Figma at the moment, that shortcuts selects everything in every frame which makes it unusable. Because often where I need it is when I'm in here and I'm like in this group here and I'm inside of it and I want to leave this one alone because I've changed the color of it. I just want to stick to everything else because there's lots of different things in here, Command Shift day, but it grabs everything on every frame there is. I'm hoping that gets fixed in Figma chicken. It might be fixed. Now, there is a plug-in for that, which there is one called Select Inverse for real. Let's do it at some inside this group here. I've got this selected and it will select all. Let's run that plugin. Herman's with a shortcut to run previous plugin is, That's right. Nobody remembers Command Option P on a Mac or Control Alt P. It's handy when you are a bit of a plugin lover. And this one, It's pretty cool because if I go my Command Option P, K, It just runs the last plugin that I used, the ego to find it first, run it, and then you can use that shortcut. Hold that plugin does, is exactly that. So let's go to again, go into my groups like this one. And because I've run the plug-in already, Command Option P, Control Option P, hit Delete. Look, it's selected everything but that's not just everything in the document. Hopefully that becomes just the regular default feature in Figma. Alright, so Select Inverse things using a plugin is the bottom of the barrel for my advanced selecting and copy and pasting. It's finished with a good one that you might know already. Shift one to go see everything. I want to actually grab all the nerves on the hundred app boards, hundred frames that I have now can ever remember the shortcut for this one. So we're going to use the shortcut to rule or shortcuts. Remember, it is command or control forward slash, but we're going to start using the Command or Control P because that seems just easier, okay, and I type in same. Then you go have something selected like I nav. We're going to say select all the same properties. Here you go. It's a great way of selecting everything and deleting it, moving it, finding it all, changing the color. Obviously ALS is a Components so we could do it up the top there, but there you go. Select Same properties. Same one here. Just to practice that shortcut again, Command or Control P. And because it's already at the top there, I don't just have to enter on my keyboard, select it Command or Control P. And you can see there, I've got those last few ones that have used who they're typing required. Alright, How did it go? Was that super-advanced copy and pasting and Selection? Hopefully one of them were good and we'll try and use them all again in the course somewhere onto the next video. 13. How to do crazy things with your Figma fields?: Alright, welcome to all the funding crazy things you can do with fields in Figma. It is pretty cool. So pretty much any field you want, I've just got a frame here. Any of these fields can be operated by the keyboard. So let's say I want to add rounded corners and you're not sure just clicking it once and use your up arrow. Okay, can you see just adding it? Let's move it over so the editor doesn't have to zoom as much as we go. You can make it go faster for holding Shift and using up and down, it'll go multiples of eight. So we're at 20 Now go up one, it goes eight. Why eight? You know why eight now everyone loves eight. It's a good nudge amount. Without it goes in one's holding shift, goes in at any old field, rotation, tap it around until you like it works with say, color as well. Okay, this fill here, I've got my cursor selected now I use my up arrow. Can you see it's only moving very slightly up the brightness scale. That's what it's doing. If Alt Shift, it goes in bigger chunks. Actually, it's going in that not brightness. It's going in the hue. Can you see moving along? That's not that useful than the opacity is better. And say the stroke here, you're not sure what the size I've clicked in one, up and down. Jumping in eights is probably not that useful in this case. But anything you want to click, you can use up and down hold Shift to make it go faster. I like the font sizes, okay, so selecting here, clicking this one and just use your up and down until you find the size that you want. Want to go up and eighths because you want to stick to an eight point grid, all handy, handy. Now, a lot of the things you can do as well as you can scrub them, okay. Anything that has a little icon next to it. So you all of these, this one here at my kerning or let us spacing here we go. Just drag it. I don't have any line-height, but you get the idea. Same with these ones here, instead of trying to ticket and you can actually just drag them, saying with the rotation, any of the fields that have an icon, click it, hold it, drag it, and it will kinda scrub through it. Let's add a stroke and see little stroke icon. There we go, scrubbing. Now when we are moving things around using lifting my arrow, not using any of this. I'm just clicking on it using my arrow up, down, left, right. Okay. This is called nudging, okay? And you can nudge it in big chunks by holding shift. You probably know that already. What big chunks is it using? It's probably using eight. If you're not using the eight point grid because using something else, you can actually go and change it and your preferences. I'm going to get a little, if I'm going to go to Preferences There it is there. And down here there's an analogy Mt, click on that. And the big nudge, which is holding shift is eight, you might decide actually your small nudges eight and your big nudge is 16. You probably weren't. But you might go back to this. This was the default in Figma for a long time and you might not use the eight point grid, right point spacing. So go back to ten. I'll leave mine at night so I can do managing. Now, eight is good as well, maybe four because the half of eight, and sometimes you do need that up to you, but now you know it's there. Then lastly, I think we've covered this already. You can do maths in these things. So if you needed to be divided by its backslash, forward slash 2/2, you can add plus, let's say U1 plus eight pixels. Clearly you knew minus eight pixels. You can use Times, which is the little hash, no, no 50. Here we go. Any of these fields, 100%. You want it to be half divided by two. Alright, that is all the cool, crazy things you can do with fields in Figma does adding the words Cool and Crazy make it all seems more exciting. You probably like me, are excited for these tips and tricks and Figma. Alright, let's get onto some more of them. 14. Frame Tricks: Tips and Tricks to work with Figma frames effectively: Alright, let's learn all the tips and tricks about working with frames, shortcuts, and the like. Okay, first of all, let's click on this one and use a shortcut that's use shift to, to kinda zoom in on it. Want to move to the next frame, just tap in on your keyboard, look at that. Just kinda like cycles through all of the available frames. Nice. Shift in, kind of goes backwards, forwards, just tapping in backwards, shift in. Super useful. Some people prefer the Home and End button on your keyboard. Look down your keyboard. Do you have Home and End? Some keyboards don't, or you have to hold down some special function keys. Why is it better or worse? It does the exact same job exit one zooms and other one doesn't. So let's use end to move to the next frame. Can you see it didn't zoom it into the middle of the screen. Same with the next one, end, next one. It's not Zooming in, whereas the key like fills the next frame as faster, as big as it can be, whereas end keeps the same zoom level. Okay? Decide which one you liked the best. Either in or end. Home is going backwards and it just doesn't Zoom. Which one do I use? I mainly use in, because when I'm using my MacBook Pro, it's really hard to get to the home in India keys. But when it's plugged in here, when I'm doing my tutorials with a fancy keyboard, click and clack, clack id2. I have got my home in inky so I can do it here. Now the sweet trick is I want to go to this one. He Android just double-click the icon and it just moves to it, zooms across an ICC. No, you are kind of gets it in the middle of the screen when I go back to measurements. Nice, another little trick for frames is at the moment, I dragged out the size of this frame and just dumped everything into it, what you can do is say you measurements actually just squished down to wrap just around the things that are inside of this can be handy when you're working on or like a drawing inside of a frame or you've deleted some pits out and just wanted to kinda like wrap around it nicely. You can squish it down that way. There's a shortcut, you hold down. You can see it there. Hold an older shortcuts and then hit. Wouldn't ever remember that one. Just click the button. Alright, the next one is handy for using frames. I'm going to bring in an image just because it'll hopefully express this shortcut bidder. I'm command shift K, Control Shift key. On a PC, your exercise files has a folder called images in it, grab image one. And I'm just going to hold Shift and drag out a size. And let's say we're gonna do some horizontal scrolling, which we will do in this course. So we need things to like go off the side of the page. What ends up happening if we end up duplicating these? Can you see it actually escaped? I wanted to be off the page but hidden inside of here. And that can be tricky. Things just start jumping outside of frames. How do I fix that? Hold the Spacebar key down while you're dragging. So I'm going to copy and paste this. I've got two of them, which says if I started dragging across, it wants to jump out. You can kinda see it over the, in the layers. Can see it. It will move across. And you can see it over here on my artboard. But if you hold spacebar while you're dragging across, look, you can go all over here and it's still out. There we go. Same for things like if I want an image to look like it's kinda like frosted down the bottom and it's kinda like almost off the screen holding Shift. And you kinda like I just wanted to just hold spacebar. Look, it can be anywhere you like. It can be all the way over here. It's still in that frame or spacebar. The last one, It's here on my list. I'm going to show you because this is the advanced course. I don't know why it's here though. I'm going to use my shortcut Command P, okay, for my quick actions. And I'm going to type in the thing that I because I never know what it is. They go show frame outlines. The you go can you see the teeny tiny frame? And then look. There we go. Show the frame Outlines Command P Again, I can just click Enter. There you go. It turns the frame outlines on. It's there. Somebody somewhere will need it. I have never needed it. Let me know in the comments. If you are that person. It's a frame outlines not that helpful. Just general outlines is pretty good shortcut. It's not part of the frames, but hey, we're here. Command one, don't hit Command one, shift one to see everything. Then you can hold Shift and hit 0 for outlines. So hold Shift hit 0. It's the same on Mac and PC. You can toggle to see the outlines of stuff that is actually quite handy if you're an Illustrator user, which allele you are Command Y, which is the one that's works in Illustrator in here as well. So you can be a shift 0 person or Command Y person, doesn't matter. That is showing the outlines of victims stuff. Alright, that's all I got for the movement for sweet frame, a tricks and tips to get on with the course. If you've got a trick or tip for frames, aluminum, the comments I'm always looking for more to add to my repertoire and add to future courses. And if you're watching, have a look at the comments, see if there's other good ones in there. But for now, let's get onto the next video. 15. Advanced Zooming Techniques for precision work in Figma: Alright, let's learn how to zoom in and out. What the hold on. It's Advanced. I'm doing air quotes, advanced, Zooming Tips and Tricks, stuff you might not know. Buckle up for excitement. Now, we all know if you hold down command and hit Plus or Control plus on a PC, zoom in same key but minus to zoom out. That's the same in all the Adobe products. What I didn't realize until recently, as you can just hit plus and minus on your keyboard and it zooms in and out. You go. I'm like institutionalized with Adobe shortcuts, but just plus or minus works. A more exciting tip is it's, I got this selected down here and I zoom in using that same sweet shortcut plus zooms into the middle of my screen onto the thing I had selected. You can change that as your preference, okay, under your little Figma options, Let's go down to Preferences. And this is off by default. I like it on works like Adobe Illustrator. We're, you've got something selected and you hit plus. It zooms into the thing you've got selected. You might hate that. So you can turn it off, shift one to see everything, then go on working on this thing here. And then plus, plus, plus, plus, plus then zooms in on it, you get, is that advanced Zooming? Maybe not. Now the last little tip and trick is for people using mice, they have a scroll wheel. I do this all the time. When I've got a mouse with a scroll wheel, which is most of the time when I'm plugged into a big screen is the scroll wheel goes up and down here by default, if you hold Shift, it goes left and right. Have you hold command down on a Mac, Control on a PC, it goes in and out. But all scroll wheel. If you don't have a scroll wheel, that won't work. There you go. Scroll up and down, Shift Left and Right, Command or Control to zoom in or out. Nice. Alright, that's it for advanced air quotes, Zooming Techniques. Alright, let's get onto the next video. 16. Light or Dark vs System Theme: Which one to use in Figma?: Hi there. You might be wondering why is his background UY or dark and moody and cool like when yours is like this, you've got light mode enabled. That's the default normally, let me show you how to toggle between the two and some of the things that happens to the defaults when you change it. Alright, so how did I get my dark and moody background? We're gonna go and change it to the light theme command P, Control P. And let's just say like you go use light mode. Hey, everything's light. The background doesn't change. Once you've changed it. If I make a new document, it uses all the light stuff. Can you see Live UI, but also a light background color. The background color doesn't update. It's kinda like sit once and it's done. So if I go and change this command P and go dark mood, you can see the background colors, state, and the light mode. You can change you yourself, right, with nothing selected, just go and pick a dark color. But once you've changed it, every new document will remember and be dark mode and have a dark background. And why is there a light mode and dark mode other than the cool factor, Doc Mode is cool by the way, it's full when you in a poorly lit room or it's nighttime and you're working in the dark, the UI and light mode. Light is actually quite bright, especially if the background comes along for the ride. It's actually quite a bright light in the room. Not that it hurts your eyes because your eyes adjusts, but it's maybe a distraction from the work. For me, I don't worry about in Figma, I picked dark mode because it looks cool. But when I'm using something like Premiere Pro will Photoshop and Lightroom when I'm doing like lots of color grading and correction and stuff, then I don't want to be distracted by the UI. You can get it to follow whatever your computer's doing. So like my Mac here has an option where you can set it to Auto. So at nighttime it goes dark and daytime it starts light. I just false mine the UI of my MSc to be light. But you can get it to follow that. You can feign, find it somewhere there it is. So hit the F, go to Preferences, go to theme, and you can click System Theme and it will update depending on what your computer says. I don't know if that works on a PC. Hang on a PC right here in front me. Wait, dip. I knew it. I knew if I started that peasy it would say something like updates underway. Please wait. Alright, let's please wait. Alright, the way it is over. And yes, you too can do System Theme on a PC. Was that worth it then? No, was not. Anyway, I don't have hateful PC. I have a little late for BC. But if a Mona's, they are just as good for half-price enough. Let's go on to the next video. 17. Class Project 02 - Event Card Constraints: Hello. Hey, it is time for another class project. I'm gonna get you to make an Event Card that has a date box that sticks to the corner. Let me show you. So we're going to want you to make this make a rectangle and put a frame and put a little date box in the corner that sticks in the corner. Okay. It's even get that working. It's skills that we've learned already through the course. But I just wanted to do things I want you to practice because sometimes you like just do it once and kinda drops at a your head. But also, we're going to use it to move on in this course to build up grids. So we're not just looking at features, we're actually making something, make something like this. The rounded corners are optional. So you know, where we're hitting eventually is we're going to make something that's just a little bit more responsive like this in upcoming videos. So we need the core of it made and a bit of practicing. If you're not able to do it, don't worry. In the next video, I'll do a completed video. We're actually do it just in case you do get lost. What you wanted to just compare your method from my method, the only other thing to remember for this class project is make sure it's a component that we've got instances of it over here that we're using and when keeping our main component off airframe. Anything else? Deliverables, same as the last one. Make a video if you can, if not, screenshot. And I just want you to drag the edge showing that it's responsive and upload the link to your video. Often you can upload the video itself. So have it on something like Vimeo or YouTube. Those are the best places. And then just link it and then post the link in the assignments slash project section. Alright, have FUN making it. If you get stuck. I'll see you in the next video. 18. Class Project 02 - Event Card Constraints - Completed: Alright, this is the completed version of the class project. So in case you've got stuck and you weren't sure how to do it. You can watch this. I'll show you how to do the things stuck in the top-right corner real quick. That's pretty easy. And then I'll go on and actually just do the rest of it. Like how I would do it to a professional level, like make sure it's component. I'm going to turn this thing into an auto layout because I'm going to retain I did it on purpose really. I did it and I discovered how awesome it was later on. But we'll do that, make sure it really flows, sticks to the corner. I'll show you how to push it out so that it's 16 by 16. There's a few little tips and tricks in here, but you don't have to watch the video because you can see it's a little bit long. But for those who we want a ride along, it might be interesting, at least to compare to how you did it, to how, why did it. It's always good to see some times. Alright, let's jump in. All right, guys, thought on this one here and click on the frame name. I'm going to shift one, shift two to zoom in. If you're like me at the beginning, you weren't sure as a command one and come on to shift one. You like I was getting wrong. The way I remember it is like shift one to three is I'm shifting my view, whereas command I'm commanding you to change tabs on to. Does it help? Anyway? Let's do it Just real quick, the basics so that we, you've got it and then I'll go through and design my whole that'll cod things or at the beginning. And you can watch a few want if you need the experience. So you want to see how I did it? Well, maybe it got stuck somewhere. So let's do the basics. Let's go if key, because it's better than a rectangle. More options for a frame, I'm going to draw out a size. I'm gonna give it a color so you can see what I'm doing. Pick any color, green, greenish, aqua. Do you get inside of it is going to be another frame. So I'm gonna hit the F key again and with it selected and kinda drawing over the top of it, it ends up going inside you can see frame one, which is not a good name for it. It's cool. This one card hyphen Event. Then this one's going to be my state. Okay, I'm gonna give this one a fill of white, just so you can see it in all I wanna do is say date. My little frame guy is constrained to the left note to the right. To the top. Yes. So when I select this now, it jiggles around, comes for the ride. Awesome. Alright, dismissed. Unless you want to see it all, There's some tips and tricks. But as you can see from the time, I'll kinda work my way through, I'd hang around if I was you, but you don't have to. Alright, let's get into bit more detail. This needs to be component because I'm going to use it loads of times. So remember that sweet shortcut. You remember Command Option K, that's right on a Mac Control Option key on a PC, he is now our main component. And main components should hanging out over there. And we should have Instances here. Let's just have a couple of because it's interesting. But we need to do most about editing in the main component because we wanted to flow through a couple of things, is we want to have, I'm going to click hold and drag the little icon there to the right hold Shift and it jumps up and eights. How much do we want? 16, 24, 24, let's use 24. Make sure it's a squiggle. I hit the little options here, hit the little dots because squiggles look better than just rounded corners. Ios do this thing with a smooth the corner called corners moving. I'm going to zoom in. We're going to use my scroll wheel. It's going to hold Command down or control on a PC and zoom in and out. The wrong way fist and you go, can you see the edges then changing? You like it? Do you even care? And you go like, yeah, it's kinda do the same for this. So let's go you eight is gonna be good with the corner smoothing. Alright, ticks that are inside it. So I'm gonna grab my Type tool and if you kinda click inside stuff, often, it'll go inside. Can you see it when inside that DataFrame kinda works. So I'm going to say 17 size-wise, it's use that little shortcut when you click on it and use up or down. Okay, what do you want mine about 10:10 is pretty small for an app, but this is like more of a suggestion and not a full like the accessibility and kinda date will be in the actual listing. This is a little Card trying to cram in too much information. I have two bits of text. This one's going to say mama, capital Mask, select it all, hit Command B to make it go bold. Control B on a PC just instantly goes bold, which is cool. I'm going to hit Escape to get out of it. Hold Shift, click both of them. I'm going to hold down the Option key on my Mac, alt key on a PC, I'm going to hit H to line them up horizontally to that same key as V will align them vertically. We'll just take those game. I don't remember what those shortcuts are because they don't make sense, but this one makes sense. Look Option or Alt on a PZ H for horizontal alignment. Okay, So I'm gonna do these. And what I'd like to do is mine ended up inside my frame, which is good. You can drag it out if you need to gang and drag it over this way. I would like mine inside. So drag ULs inside this DataFrame. Because what I want to do is I want this frame at the moment I've got a fixed or is it you are a fixed width and height 32. 32, great size, but I want it to expand if there are longer. And some of the digits I'm going to fit perfectly in here. So I wanted to in this into an auto layout, maybe shift day so that it's perfectly in the middle. Can you see that it's defaulted to hug contents if it hasn't fixed width, okay. You can say actually just make it hug everything on the inside So that when later on and somebody goes, I know what's a short one. It's probably just as long. I wanted to I wanted to expand and contract. And it allows me a bit of control here, disliked it, say actually I can play with this spacing if I want to. The padding on for a bit more responsive. So let's go shift one. It's what appearing there nicely. I want lines spaced out a bit better from the edge. Plus, plus, plus. I delete on the way. I want mine to kinda go in this top corner here. But I want it to be, I wanted to be minus how much? Let's use our little grid system. How I'm kinda seeing both of them unlike spacing wise, what do we think? 12 16s to 16? 16 feels like a good gap from the edges. So I'm gonna say you are going to be -16 to go across and then plus 16 down. And I know it's perfect, look at as being perfect and hopefully it's still responsive. That is picking the right side, the Constraints to set up perfectly. Maybe the Constraints on done with a parent, it's done with a child on the inside that's inside of a frame? Yes. But work on this guy. Look, you have Constraints, a top and right. Make sense. And now the nice thing, shift one is I can have these like on a smaller device, full width, but on these larger ones, my plan is to have like two of them stacked up on a really big wide phone and have grids like this. D. This is going to work for our desktop view as well. But one of the problems here now is kinda consistency with spacing we can go through and kind of go you like it's kind of a painting like you I want it to be what? Plus eight, plus 16, okay? And you can do that for everything. But a grid system is going to help us make this a whole lot faster and allow us to be a bit more consistent across lots of things rather than just dragging it and try not to forget to use 16 instead of 17. Sorry, that is the segway to the next video, why we're in this section called grids. Alright, Now, you might have done it differently. That's okay. It doesn't matter as long as it's kinda sticking in that corner, okay. And you might design it but different in terms of looks. You might not to use it then autolayout, was it necessary? Probably not. I felt like we needed it me anyway. Why could it be good? Actually, this could be good. Later on, we might use it on a desktop version and we might use it this way. Look at this. I can't change the autolayout direction in an instance of it. Okay, I've gotta do it up here. You in the main and it's a, you can go this way. Look at that or that is I should have lived with that. That is a very good use case for autolayout. You go, Let's pretend I did that on purpose. Alright, that is the end of the video along one, I hope you picked up some tips or confirmed some of your knowledge or you figured out how to do it a better way. Let me know in the comments. If you did it a different way. If you're watching this video, have a look at the comments. You might be a genius way that Dan didn't think of. Alright, that is it. I'll stop talking about myself and the third person. It's get on to the next video. 19. Grid v Constraints v Autolayout in Figma: Which one to use and when?: Hello, hey, before we get deeper into grids, Let's talk about the difference between grids and Constraints and autolayouts because they can be confusing about when to use each of them, which is good for what? It's confusing because they all share a similar sort of purpose. It's about responsiveness. And if I'm honest, I've recorded this video about ten times already trying to make it concise and not me waffling on for 15 min. It's meant to be a recap Dan, come on, recap. Let's start with autolayouts. Autolayout we already know we can grab four different things and we can say shift a for an auto layout. And it gives us some kind responsiveness. And it's more to do with the content internally in our autolayout, as opposed to Constraints and grids that respond to the frame size. Okay, so if I've got a different desktop size or a different phone model, the responsiveness that happens there are grids and Constraints, autolayouts, and more to do with what responds inside of my little group here. So I can go in and say actually this is, instead of sittings its account, you see it really flows. It's responsive, not to the outside frame, just to it's inside bits. I can grab you and go, you go. And responsiveness. Excellent. Okay, the Constraints though, which we've done, if I select on this and say actually I want you to be Constraints of the lift and note, sorry, the right in the top. It means that when I go and resize this desktop, okay, maybe for a tablet view, you see comes along for the ride. So it's responsive, but it's more to do with the frame size. So you often use these two together. I can resize it and I can go in here and say, actually you don't logout, I want sign-out and the autolayout adjusts. So grids, Why do we have them? They are visually useful. They just help you get consistent margins, consistent spacing between pages on multiple pages. They have some other useful things. Have I got this? You'll see it snaps to it, which is great. I can have consistent spacing between them all on different pages. Already said that where it becomes super useful is it actually ties in with Constraints. Over here we said you constrained to the right and the top. But we can do with a grid is we can say you, I want to be constrained to the left and the right, but it's not doing the entire frame, it's actually just doing the grid itself. Why is that cool? Is that when you have a different size, we have a different size page. Okay. Let's say it's a smaller page. Look what happens. Look at that. So grids tied with Constraints means for a more consistent reef flowing and Responsive Design. Does that how put those three different things in their own little box? And can you see how they compliment each other? Hopefully. When do you use each of them? So autolayouts, I got kinda like three levels or four levels. And for your initial scrappy design, we've got no idea what you're doing. Yeah. You just kinda getting things on the page, get everything laid out. You don't need any of these. You don't need autolayout or Constraints are grids unless you want to. But often at that stage there's so much flux and flow, you're just dragging things around and trying to get things in order. Concept stage, none of these or that useful. When do they become useful? At different times they grid I find is useful. Basically once you've got that concept stage done, use grids because it allows you to be consistent across your different designs and is one of those things to get that it's easy to get right? You know what kind of grid size you're gonna use, how many columns? Let's do that on all pages. Awesome. Auto layout is another one that you can use early in your design. Because you want to, you, you still adjusting things. You're moving things and moving them around. So you still had a reasonable concept stage, but it's a lot easier having an auto layout to reflow these things than it is to be manually like turning them off and deleting them, getting the the spacing perfect between them all. So often I'll use autolayouts early in my design process, after the concept, maybe after a client approval, or maybe I'm just happy with my say wire-frame will high-fidelity and I want to go a bit further. So grids early autolayouts early where I start worrying about Constraints, is later on when I need to build out different sizes, often I'll just work on one phone size, whatever the most typical generic sizes to start with, same with the desktop. But when I get closer to the end of my project where I actually have to figure out what am I going to do for tablet? What am I gonna do for a big screen, for a little screen, for a Pro Max phone or a tiny little Android one, that's when Constraints Become a lot more useful. So that's for me, am I different sizes? But also if you're going out to other people. So as soon as you have to give them to someone else, you should probably be decide how these things Constraints, so that just the way that you imagined. Wow, that was a big waffly mess, but that was the big waffly mess I could come up with a hope it does help a little bit. It's my parting words are that autolayouts, Constraints, and grids don't have to be used at all, especially at the beginning where they become useful is when you've got more than one page, multiple pages, and you want consistency because you've got a reasonably established design and they're absolutely essential when you're working with other team members are preparing things for yourself to be used later on in future projects. Or I should probably started with that. Alright, that is the end of the video. Let's go on to doing some stuff. Dan, stop talking 20. How to copy & paste grids and export grid styles in Figma: Hi there. In this video we'll make a column grid, just one big one with margins on the side. We'll make a second grid does in this case in eight point grid, so we can get some good layout within our cards, not just the parent frame. I'll show how to copy and paste grids from one frame to another. I'll show you how to create a style, that style in a couple of shortcuts. Let's get into it. Alright, let's make a grid that's click on the first phone, phone frame. And I'm gonna say Layout Grid plus. And I'm going to use the columns. So head on the little icon there, switcher two columns. Okay, I'm going to have a one-column layout for my small phone. And I'm going to have a margin of a really small, tight layout uses 16 pixels, like it's pretty close to the edges. And if you've got loads to squeeze on, you might have to do that. Okay. But I'm going to use 24, gives it a bit more breathing room around the edges. And I have the luxury because I don't have so much to cram in. Now you can copy and paste these two different phones. If you've got lots of different ones, you can just copy and paste this across. My case, I'm going to click on the frame. And what you wanna do is find your Layout grid and then you want to click in this random area here. I don't know, not there. They're just kinda allows you to select stuff. You can do that with lots of things. You can select in these white areas here. And you can copy and paste them once you've selected them. Okay, So I'm gonna go, you go copy and I can click on as many friends is I like and just hit Paste. So there's just Command C, Command V or Control C, Control V, just your regular copy and paste. That's a good way of getting across lots of documents. But problem with that is it's probably easy. Just use a style. Then let's undo that and I click back on my first one and I'm going to hit the little four dots there, say make a solid from this grid. I'm going to add one. Okay? And I'm going to call this 11 column. And I might put the margin in here as well so I know what it is at a glance because I might have to have in different pages, might have to have different margins. Alright, let's create a style. If you need to update a style, you can either click off in the background so you see all of your styles, or click on the phone, you'll see your style there. You can break the style so it's not connected or you can adjust it. We can adjust it by just clicking on it. There it is there. And you can edit it by clicking on this little guy. See it styles. And it halfway gets the like, great, I can change the name, but I want to change say the margin 24-3 to. You actually can click on this here, this little icon there. You can get into the depths of it all change your margin and you'll get a, alright, so that's creating and editing our grid, the shortcut for tuning it on and off the Shift G. Have I done that already? I'm not sure. Shift G. Okay. Because it's great when you're laying it out. But when you want to design stuff, that big red thing is not that useful. The other thing to make sure you're doing when you've added your grids is to set the constraints. Depends if you want your, I'm going to want minus snip this side and snap over here. Same for these to, actually, I'll delete that one because they're just instances of itself. And I'm going to make sure that both of these selected are not just left, but a left and right, so that when they adjust, they come along for the ride. Otherwise they don't. Let's make one more style we're going to use. Instead of the columns, we're going to make a grid. We're gonna do it on this card here because we had, we were trying to push things over 16 pixels and down 16 pixels. And let's say that I want kinda bottom of my card down here. How do I make sure it's defaulting to multiples of eight? And we can do that with a grid. So I click on the actual, we could do it to the instance, but if we do it to the main component and it goes through all of them. And I can say actually I want to Layout grid on you. I'm gonna leave it as the grid. It's defaulted to eight points. We can change it by clicking on the icon here. And it just means now when I'm laying things out with my frame, I know that it will snap. Can you see it snaps to the different eight points? Okay, Consistency, Dan, I love it. What I might do is add the edge of this, like this still some responsiveness. Not everything is going to be a point because all phones and desktop so different. But let's get my main component laid out nicely. Okay, I've just zoomed in a little bit so I can actually see on the eight points, it doesn't snap when you're doing the outside of the frame, it snaps with things on the inside like that frame that I did that you can't see, let's give it a color. But the edges here, Let's just tidy it up by saying the bottom is, where is it a points? The bottom part of this is gonna be eight points as well. All. Okay, and let's turn into a style. So I'm selecting the outside and I'm going to say, let's make you a style of grid. And this is our eight point grid. It's great. I style. Alright, so we got a couple of different styles. One thing you might notice that I just noticed as well is that is not adjusting. Why is that adjusting Constraints, Dan? Okay. So I'm going to stick it to the edge there, but I wanted to actually expand and contract depending on the parent frame. So I'm gonna say, we know Constraints lift the right. There's going to help us and it's gonna be stuck to the bottom. Nice. Remember the shortcut Shift G on and off. Alright, next thing I wanna do is when we're resizing these for the different ones you can see it's not how do I get it to snap to a point? I can see the grid inside of it, but the outside frame doesn't. I can zoom in and go right. Let's just get this to snap to that eight point grid. Perfect. Ish. Let's add our third set of grids, which has rows. We've done columns, we've done grid. Let's look at adding rows 21. How to add rows and column grids to one layout in Figma: Hi everyone. In this video we'll go from having one column down the middle as a grid super-helpful to having rows as well. It looks like we as Waldo, Where's Wally? Depending on where you're from. But these little stripy guys are super helpful for getting consistent layout using our lovely eight point grid. Alright, fessed up, I think I was missing round with my layout there didn't quite get it to the edge of the column. I'm going to make sure that this one is stuck on this side. What I also wanna do is grids, OK, good. I don't use them very often. I show you because lots of people do. So what I'm gonna do for this Event Card here is I'm actually going to turn my, I'm going to take off my grid. I've got it as a style, but I can use later on and apply. It's going to turn it off for the moment. I'm gonna show you why I like rows bitter. They're not really better than just visually less confusing for me at least. And use my F key for a frame, draw out. It's gonna be my top navigation and I'm just going to drag it to the top and the sides. While I'm here, my mind say is make it top, I'm sorry, make it left and right so that it resizes with the frame. I'm going to give it a fill color. I'm gonna give it any old color for the moment. And now that it's left and right Constraints, that's going to resize perfect, but how high did I make it? I just made it random height that looked okay. Okay. And it was 55. But I want to be consistent. I want to use eight point grid. There's enough flexibility in the and to get the size, I want to be able to be consistent across devices in different projects. So let's turn on our rose song. I click on the outside frame. At the moment there's a style applied to it. Okay, so I kinda had another one. So I'm going to say actually let's break this because I want to keep the column, but I want to add another one, not a grid, but I want to add rows. Rosa strange. Not strange, but at the moment the stretching, so I got five of them shift to five of them. Okay. It's close this down. Shift to to see the thing I've got selected and this five of them and it stretches to fit. And that works for columns, but not so much for rows, because rows, I can scroll up and down the screen as long as I like It's not a fixed size. So we're gonna do is I'm going to click on it and I'm going to edit these rows. And I'm going to say you were not stretchy, you're going to just stick to the top. And I want you to be a height of eight with a gutter of eight as well. It's kinda wiki. They're up there, you just need lots more of them. How many more? Just put an up giant number. Hundred, as long as it covers your whole frame. You can put it in 200, doesn't really matter, just kinda goes off into infinity. You can see how that is. For me. I've got my Constraints for my column, left and right. Now I've got my rows and now it allows me kinda like the grid, but less missy. Okay. So I can just go you and snaps to it so I can say 48 is perfect. It's close enough to that random 50-something I picked. And now with these items, I can start laying these out and snapping into the top. Same with the bottom of it. Okay. If I decide that the bottom of this needs to be how high it's going to snap to my point grid. What's the spacing and won't between them? Let's say it is 16 points. I need Event Card has a white thing inside of it. Let's change that from white gay frame to I'm just going to use a darker color so that down here it's more, more visually viewable. It's not a weird Dan, but it means that can you see I can I'm holding Shift to make sure it goes up and down. I'd actually need to just drag it around. And I, you know, it's 16 between the two. Want to match the outside. I can drag it one more to get my 24. There we go. Bros are better than grids. In my opinion. This one's not lining up. So it's going to delete this guy and go, you go 24. Nice. Remember to check, select on the actual thing. Hold down the Option key, anaemic, OK canopies, and then hover above the Component above it and look at that. It's 24. Perfect. Alright, shift one to see everything. Let's click on this shift to. And it looks like, Where's Waldo always Wally, where I'm from? Stripe your red and white. But that's one handy when you are laying things out, when you're trying to design there in the way, What's the shortcut to make sure it goes away? It's right Shift G. So that's using rows and columns. You can see my top one is not enough. I'm going to you, that's rows and columns in Figma, Ingrid's if you want to use them. All right, Onto the next video. 22. How to update Grid Styles in Figma: Everyone, let's talk about editing an existing grid style. The moment we have a style, okay, I've got this frame selected. I've got this style here called one column, but I want all the rows part of it as well. So instead of breaking the link and making it a new one, but I should have done in the last video is with its selected here, I can actually go, I don't want to break the link, actually want to go and edit it. So I'm going to click on this little icon here. And I'm gonna say this one here. I'd like to adjust. So instead of one column, I'd like it to be one column with row of eight points. Okay? I don't want to add to adhere, instead of breaking it and adding another grid layout I'm gonna go into here, into my style and edit in this, not that one. I want to go to rows and I would like the to be top. How many should be in here? How many, you know, it loads. Okay. And I want it to set it to the top and not be stretchy. I want the height to be ace and I want the gutter to be eight. If you miss around with the offset is just the offset of the top. You might want, say 20 pixels all the way round is up margin and it messes with your eight point grid. You can actually just offset at the 20, make your margins 20, and then still run an eight point grid within there. That's totally fine. I'm happy that I'm using at all the way around. So we go, I've updated that one. Why don't wanna do this one now is I actually can get rid of these and say, let's apply that style of one column and all the rows. Nice. Alright, there was a short one updating styles in Figma 23. Grids inside of frames that aren't the main frame: Hi everyone. Let's add columns to this frame here, not the overall frame because we've got this weird use case where we just need four columns just for this little box here, we'll add one little column layout grid. Then we'll take it a bit further. And we'll work on this one shift to where we've got a fixed width navigation. Maybe it's the admin part of our website. This has to be this size, but the rest of it needs to be stretchy and Responsive, easy to do, and allows grids be a bit more unique for our specific requirements. Alright, let's go so we can add columns or any sort of layout grid inside of frames. So I'm gonna grab my frame tool. I'm going to draw it like a features set of boxes here, but I wanted to have four columns. So instead of trying to do it to the overall frame, which is my phone, I'm just gonna do it to this frame. I'm going to say add Layout grid. And I want it to be columns. And I want it to be, say, four, which is way different from my one. But it's only unique for this like little features cards. And I'm gonna do in here little boxes that you can click to go to the different subcategories of gigs. And the gut is I'm going to match other stuff, 24, maybe 16. And it means now when I draw my F2 and I draw boxes inside of it, okay, I can get it to snap to the rows, but also I can get it to snap to this new columns that inside of it. And I can say, can you be left and right? Let's give it a fill color. Where are you? You're invisible. Fill color of not white. It means that these will adjust. So you can have columns, not just in the parent frame but inside child frames, like special occasions like this. Let's do that. Other one, you sorted the beginning with the fixed left nav. So let's jump out a mobile land now and it's hit the F key. And let's go to desktop. And I'm gonna pick generic desktop size and I'm gonna put it down here. Okay, what we wanna do is we don't want the generic 12 column grid. 12 columns is a really good grid for desktops. And I'm gonna do the same thing. God is gonna be 24. I'm going to have a margin of the, to, maybe a bit more. 40. Problem is, is I need this fixed left nav. So what I wanna do is shift to, to zoom in. Let's use the F key to design my navigation. Okay, so I'm going to a fixed size. How wide is it going to be? It could be using the eight point grid. You can type anything you like because it's a fixed width. It's not going to change depending on the different computers that are gonna be viewing it. This stuff needs to change. This doesn't needs to be a fixed size to fit everything we need in here. So what do you do with this? So what I'm gonna do is give this a fill color, pick anything, so long as this greenish. And what I'm gonna do is copy and paste that style, or we could delete it, but I'm going to select it here. We were on the little edge, but there Copy. I'll delete it off this. And what I'm gonna do is I'm going to grab the frame and I'm going to drag out a box that goes in here. You see what we're gonna do. It's going to apply it to here. So you need to get out of the mode of applying grids just to the background, but you can edit to individual frames. So let's hit Paste. And why don't wanna make sure is that it is doing constraining left and right. This one is not going to constrain and wonder this to be a fixed, so it's going to stick lift. And what I might do is do top and bottom. So it stretches same with this one, top and bottom. Now we've got a fixed Left Nav, N stretchy columns on this side. Alright, that is Layout Grids with in child frames, not just the overall parent. Alright, we've got our grid fixed done now, let's get onto something else. 24. Class project 03 - Event Branding: Hello, It's class project time. I want you to create a little brand. We're not gonna spend, It's not a Branding class, but let's have something unique for all of us that when we're moving along, we're building something that we can use in our portfolio and then it will when we share it. But not all doing limerick techno. How do we get a bit of variety? And we use in your class projects, there'll be a link to this random project generator.com. I made this with the team at Bring Your Laptop so that you can get a generated brief. Okay, so go to it, go to the Figma Advanced and enhance type in your village, your town, your city. It doesn't matter. Okay, and then you should be presented with limerick and then a music genre and just use the one that it gives you. It'll help push your ability to work on projects that may be jazz isn't my favorite of mine, jazz, but having some restrictions here, I guess we'll help me define what the app looks like instead of just doing the same old things in my portfolio. So use this as your name and this is the logo. So what we'll use a logo mark and you don't have to spend too much time on it or you can. So you can just use an icon for my bird, a free icon. I'll show you the next video and an interesting widget. To get free icons, you get bonus points if you spend some time and making your logo, but actually designing it yourself, that would be super awesome if you can give yourself some time to design, in this case, official logo for limerick jazz. So we've got our brief, we've got our name, okay, and I want you to make a logo, either a free stock icon or design your own. And then I want you to pick some colors. They were kinda like three basic colors. You're going to need primary, secondary, and a neutral color. You might have an extra third kind of accent color here, so forth. It's up to you. I ended up with this. My primary. My secondary is gonna be my neutral color. I've got this one. It's not my accent color, this is my interface color. Don't have to have this one. I just like having it like the background here is that Interface color we saw earlier. It so that I can put white stuff over the top and it stands off a bit more. That's optional for you. There are plenty of places to go find color swatches, okay, a few colors that work together. I've put a link to Adobe Color, which I use a lot. If you want to get more in-depth on color, I've left two links here for the older material system, design system and the newer M3 version. They might be an M4 out. Now, go check those out. If you do want to dive into a bit more, It's a lot more detail and I'm gonna do in this video, but the minimum is just pick three colors. How did I get my three colors? I just went to moodboard, chipped one. Okay. And had loads of stuff and I was like, I was looking around and I just started picking that with the eyedropper tool like this after the Rectangle tool hold Shift, so it's a square. Then I had the I key on my keyboard and wind. I like that. No. Can you remember I got them from I doubt I got them. I don't think I've got them all from the same place. And then I think I changed them, but I mood board is a good way to maybe go from this. I, sometimes they're just pull them straight out of an image because there's just a really cool image with some cool colors and you're like, Oh, there you go. That's how I got my ones. Alright, so you need your logo, you need to colors and deliverables is three screenshots of your brief. You can either screenshot it or there's a download as PNG. And then I want to see your color choices and the logo on your Nav, okay, So if you arrange them nicely here, you can take a screenshot of all of this, okay? And that would be perfect if your name gets long. So you end up with like classical music and it's really long. You can use an acronym. So it was limerick classical music. I'm happy for that as well. Choose a font up to you. We'll talk about fonts later on, or at least we'll get into typography a lot more advanced later in the course. We'll get into color, more advanced as well. But for the moment, pick some colors, make a little logo or just use a free stock icon like I did, upload it and I'll see you in the next video. 25. Logos using Iconscout: How to use Iconscout to create logos in Figma?: Hey everyone. In this video I'm going to show you how to make a placeholder logo. And we're going to use, or I've used our icon from this plugin here. Could, Iconscout can't be a registered trademark because it's a free icon from the Internet, so anybody can use it, but it will do great for our portfolio piece here. Also, getting some of these icons can be a little tricky. So I will show you are some, you might have run into some troubles. And the last video, I want to show you how to take something like this seemingly simple bird that actually has quite a bit of grouping and masking going on. I'm gonna show you how to dislike, smoosh it down into a really simple victim. There might be a little easier to use. Plus will give the bird of Mohawk will also make our top nav or component, as well as putting a logo in there as well, which will also be a component. Alright, let's get going. Alright, so the icon that I use, or at least the plug-in that I used is called Iconscout. We can hold shift it to open up this resources panel here. And it will just default to whatever the last one you had selected. So that shift I both Mac and PC, and you can see the Iconscout. Now, Iconscout might not be the most popular when you were looking. Okay, I use, I conduct sometimes as well. There are lots of different icon plugins the way that I pick his generally I just looked to see used by how many people? When something's being used by only a few people, I feel like it's not as good as the one being used by loads. So it's not a great measure. But anyway, I'm going to use Iconscout and then we go, okay, now with Iconscout and most of them, there is an option for free and premium. So I'm gonna go to free and I typed in bird. And I scrolled forever and eventually found my guy somewhere, down somewhere. I can't remember. But I found it. There he is. Hello. The cool thing about these is like let's just pick another random one. Let's pick this guy. He looks cool. Let's have a look at them. There's the creator or radius. Thank you very much. And often it's part of a pack. If you're looking for other animals or other icons in similar sort of styles, you can often go to the pack and have a look and say, Oh yeah, the little crown in this particular app means that paid. So they're giving away some free stuff. But if you want the whole fairy tale pack, you get to go Pro and decide if that's worth it for you. Way easier than drawing all of these. One thing I'm gonna do is let's go into it. And this one, he has an SVG and a PNG. I'm going to insert the SVG, okay, and let's pick another one's good bird again. Free, it's not, well, I'll just use this guy, he's free. So let's do this one again. I'm gonna show you the difference between these two. I looked at these earlier and they're kinda different when you haven't done a lot of drawing in Figma, that can be a little tricky. This one, he is easy. I look. So I've got these two bird embed frames inside of this one is just too, there's a vector drawing and then there's a duct for that PSI that's pretty easy to understand and start manipulating and decide actually, I don't want the eye. Click on it. I can turn the eyeball off. You go goodbye I for one and double-click on it and grab the hidden. Say he needs a duck Mohawk. Perfect. In this case you can see it's getting clipped out of the top. So I'm going to click on my frame. And I'm going to say, don't clip the contents. And what I might do with the frame is can you see here, this option here is, is resize to fit, resize my frame so it can fit all the bits inside. This one's pretty easy. This one's trickier. To have a little look inside. Let's zoom in shift to. And inside of this frame, Coppard is path group, okay? Inside of this group is another group. And inside of this group is a bunch of different vectors that are easy enough to understand. There was a mosque going on here, okay? They can get really complicated depending on who drew them. So what we can do just to, like, I find it's easy just to go select on it, the parent frame, right-click it and say, let's flatten this command E. Anybody do that from hands up from Photoshop. Just a smoosh, all the layers together. It's still vector, which is cool. It's just the Tidying Victor. There's not so many groups upon groups and pronged groups. It's up to you. It'll depend on your Figma experience. My one's got a black border now I'm going to do is double-click it to go inside my vector. I'm going to click on the outside part. I can shift, click all the corners, or I can just hit Delete and delete again. I did not go to kick more. Good by parent frame. And now I'm going to click Done. I've just got this more simple thing that I understand a bit more up to you. Command Option P will open up the last plugin that you've used on a PC. It's Control Alt P will open it up. The last thing I want you to do is shift one. Let's look at what we're doing here, which if T2 is hold Command or Control scroll wheel. And let's have a look at this. I'm going to turn it into a component. My component is over here, whereas you there it is them. Okay, It's my main component. I'm gonna get it to fit the frame. And instead of just calling it logo, let's call it logo mark. And my one is cold, limerick techno. Alright, so how do you component outside of your first frame? Put it over here in a beginnings of a top nav, make sure our grids on. So Shift G, K, and just make sure that this frame here for my background is snapping to my 16-point grid. Find something that works for you, find a logo size that works for you. And position wise or that looks good. Shift G, turn them off. This whole thing should be a component. So Command Option K, Control Option K, It's called frame tool, It's called this one, nav hyphen top. Okay, and we should keep the original over here and put an instance back over this way. We got last thing I'm going to do before I go is my Zooming is backwards, so I use my scroll wheel, like I mentioned earlier, I'll Command down or control on a PC, you can use a scroll wheel to go in and out. Mind's operating backwards. Everyone likes the scroll wheel to do something different. I'm used to mind going the other way. So I'm gonna go Figma or preferences. We can go here and go to Preferences and placehold invert Zoom direction. That's what I want because I prefer to do it this way. It's just, it means when I all I've done is toggled the way the zoom goes. You understand, right? So now when I scroll my wheel zooms in instead of a Zooming out, which didn't feel right anyway. Alright, that's how I got my logo. Anything you really need to do is just make sure that your logo and your Nav are two separate components. Alright, next video 26. What are widget compared to plugins in Figma?: Hi everyone. In this video we'll look at the difference between plugins, kinda traditional Figma plugins, and these new, fancy, newish, fancy widgets. Why do we have two of them? I'll show you the difference, and I will show you a couple of my favorites. We'll look at this one. Automatic color styling, nice. Alright, the general broad differences is that plugins do more. Widgets are quite simple creatures. Plugins tend to do loads and loads of things potentially. The other thing is that you can only have one plugin, open, edit moment and widgets. You can have lots open at one time because they're lightweight. Plugins generally appear in like this little icon one. Iconscout appears in its own little window and produces stuff for your canvas. Then when you finished with it, you close it, whereas widgets live on your Canvas, okay, and you can have led to them open. So let's open up this one here. All this one does, well. Sometimes they end up in strange places. So minds ended up tied into this and it is stuck in there. This brings up a good point. Widgets in you. And they add developed by lots of different people, all with different abilities. And some of them are updated all the time to keep up and some of them aren't. So I'm going to share a couple of here, but sometimes they just don't work. This one does normally, but very often I end up giving smooshed in here and I can't actually find them. Option, click the little thing there he is hidden in there. So if I hold Option on a Mac, alt on a PC, and click the little chevron, it's spills then everything I can say actually just come out of the air and come over here for me. Sometimes with plugins and widgets, you have to close down Figma and open it back up before they work properly and all the time. But I've run into that problem a lot. This one here just allows you to pick a date. The date you've done something works for FIG Jim as well as Figma. And it is cool. It's on an angle. You can pick different angles. You can pick a different dates. Okay. It might be all date to be completed. The date was finished, the day you're going to deliver it, bought. The cool thing about it is it gets a sweet little icon there. Okay, It's my little widget, but I can have more than one shift. I open up the resources and there it is, there. We're going to use this one in the next video, color levels generator. It's awesome, Okay, and it lives on the canvas. And while plugins generally produce something that's kind of did on the canvas is just produced and it's finished. These are dynamic. I can change the date and that adjusts. And this one here, I can change the colors and it adjusts. It's dynamic. It's doing something lightweight, but it's doing something. I can save these styles to my style library. It's all very cool. So that's why we have plug-ins and widgets. I wish they'd just smush them together because I feel like the terms do the same thing. But now we all know you can have multiple widgets on the canvas at once, plugins, just one open at a time. But generally they can do more and more processing power, widgets, lightweight, simple things. And lastly, before we go shortcut, Who remembers to open the last plugin that you used? If you haven't already, we'll find a plugin that you know and love and you use all the time. This will become a handy shortcut. I promise. That's right, is Command Option P on a Mac, Control Alt P on our PC, you go, There's no such one for the plugin. Oh, one last thing about plugins. You can actually copy and paste them. You got two of them. I've got two of the same plugin now, I need to have these joining two of them. Not really, probably need loads are these ones though. Alright, there you go. Plugins versus widgets in Figma 27. How to create ux color variants using a Figma Widget ?: Hi everyone. Let's create some color variants from our primary, secondary and neutral colors. Just so we've got some variants of these colors for different situations throughout our app design, we're going to use this widget here called color levels generator. It's handy, it creates styles. I'll show you how to tidy up your styles sometimes is this thing produces a little too many. And we'll talk briefly about what these numbers or mean. Alright, let's make some color variants. Shift I, I'm going to be using a widget called color levels generator. This is one that I like, but you gotta remember in the future it might not be supported anymore. It might not be working anymore. Figma, mighty change. They might be a better one out there. So this is just a for instance, okay, so I'm using color levels generator. And I'm gonna put it over here. Out of the way. The way this one works is I'm gonna grab my primary color. I'm going to paste that in here. I'm going to see that it made all my color variants. Look at that. Five-hundred is the main color, that's the one I've typed in. And then there's less, and then there's more rather than you, like we did in the Essentials course, we just kinda like lower the brightness and raised it up. This one, I'm going to add a color name. This is going to be my primary color. The cool thing about it is that it's used a really good naming convention. This would be really typical in web design for both font colors and font weights. They use these kind of styles. Five-hundred is the middle, and you have like 1,000 would be a really light font and 900 would be your black font. Well, we can do is you can also hit Save styles. That's the cool thing about widgets. These things are actually doing stuff. And you can see over here, or my styles, maybe if you've got this selected, they might not be there. So click off in the background. Escape when you keyboard, look primary color and I've got all my colors there. Now, this is probably way too much detail than I need. What I tend to do is do this. Can you see I cut out all the middle ones, so let's go back. So I don't want 50, it's to light. 100 is a lot as I want. I don't want to hundred, I don't want 400. I don't want 600. I don't want 800. You can like there's no rule for it, but I find that is a good enough spread for me. I'm gonna do the three other colors. You can just duplicate these like you duplicate anything. I hold down my Option key on a Mac, alt key on a PC to drag it out. And I'm going to add my other colors. I'll get the editor to speed this up. While speeding it up. I added my styles and vaginally and I call them primary, the kind of overrode my color styles. So I forgot to change the name. I'm gonna go undo, undo, undo, and just make sure you change the name because it overrode my original primary numbers in my style. So undo. Alright, this is my secondary color. Save styles. Escape is my primary that I save them, they ago. Now we're going to speed up and do the last one. Good speeding Dan. Okay. Like the other ones, I'm gonna get rid of Ew, Ew, Ew, Ew, Ew, Ew. I've just got odd numbering in here, same with this one, my secondary speed, the speed. Now, these might color styles when you're using them, Let's say I've got my lesson. He describe it. If tool for the frame tool, drag it out and when you're over here, okay, my fill colors, I'm going to hit my fills styles. And it can get a bit long depending on how many you've gotten here. Sometimes it's nice to just type in 500. 500 is that middle style, that's the full full color. You can see here there's my primary color. Remember five-hundred is the one that I picked and everything lower is a little bit brighter. Everything above it is a bit darker. So with you, I can just type in 500 here and it will just give me my, just cut it down to a more manageable level. Last things I wanna do is I want to add my interface color, and I'm not gonna do it through this. I don't want all the different variations on his want to edit as a style. And this one's going to be called Interface. You might not have this. What you'll notice is if I click off in the background, I've got you. But all these guys in a group. Now, I'm happy with that. And just to reminder, you can reorder these depending how, you know which one you've put in, okay, so you can say, alright, Secondary first, we're just in case you've got it wrong. Primary, secondary, and I'm gonna have neutral at the bottom. I can't make the interface go down the bottom there because it's a separate color groups at the bottom, single colors at the top. Anything else? One thing is, this particular one doesn't work very well. If you don't have the hash in front of it, it kinda just if I type in say, if, if, if if if kinda just doesn't know what to do, default to what it was before. So make sure what the hash goes in and do need these. You don't even delete them. So it's clean on the frame. Go away, go away, go away. Alright, so we've got some of our colors, but we've also got color variants now as well. Give me handy to build out our app. Alright, Onto the next video. 28. Intro to Nested & Responsive Auto layouts Section: Hi everyone. Hey, I'm out of the computer. Hey, I wanted to jump out because I wanted to introduce this next section. The pros and cons of it, we're gonna get into nesting and Responsive Auto layouts. You know, what are auto layout is now we're going to start placing them inside each other and then inside each other. And then more than, more than more of them. Constraints. And it's gonna be reasonably Advanced. Something quite complicated component, which is awesome, great to learn. And it's gonna be responsible for different devices. And it's gonna make it very hard for somebody to mess it up in your team or your future self. This bit of upfront work to do it. Let me show you what we're gonna do before I give you the cons. So let me just show you what I'm making. Alright, so this is what we're making. It's an Event Card. And the cool thing about it is we're going to make it in a way that is responsive means it can adjust that exact same component over here isn't a different format, same component, but you can see the layers different. This one has the text above the early bird price than this one. You can see we've even changed the early bid price to be on the left and the right. And it's super responsive, which is really cool. So we're going to make something that's kind of advanced in the goal that it is quite resilient for other people to use it. We can use it Good and all different sizes. And in the terms of this course is gonna be really handy to get in there and learn how to put an S and sidedness inside of nests. And some of the complications that come along with it. We can do cool things with a say actually, I want you to be the largest size. I'm going to go you, and I'm going to say actually be that larger size with a different layout. But when we did this layout, I would like this to be on top or maybe we just get rid of it all together. Okay, so a really cool single component with lots of flexibility. So there's like three reasons I wanted to make this like little interlude video. One is to show you what we're making because it's quite a few videos before we get to something really cool. There's a lot of boring, but it's yeah, I'm gonna make some stuff. Let's one is I wanted to show you what will making. The next thing was, is I wanted to let you know that the next few videos is actually just mechanical a colon production videos. We're actually just making some stuff to use in the future videos. We're going to be drawing boxes and making real simple autolayouts to get all the components we need. So if you're following along, watch them, you build yours. If you are just kinda skipping to there, give me the advanced stuff, you can skip ahead a few videos. Go to the video called nest multiple autolayouts, 60 name, okay, and that'll get you straight to the actual making stuff and you can skip the making assets bit, but skip it at your peril unless your advance you can skip it. The other thing I wanted to do was talk about the thing we're building is gonna be probably way over complicated. We're going to spend some time in the weeds getting this thing working perfectly and being adjustable. And it's great for this course because it's going to allow us to push our limits of what we know and what we can actually make. But in the real-world, often and UX, like good UX, lean UX is about going fast. That's why Figma is awesome. It's about Prototyping quickly and getting it out and getting it tested and enter development. Not making overly complicated. And components and variables. There are times for that, but I guess I just wanted to throw that in here. Quiz. Some people are gonna be like, I'm never gonna be able to make everything like that. And you might not have to. But there will be times where things need to be at least close to this because they're gonna be re-used or going into a design system or working with a huge team with lots of people. But that's not everybody in all of us. That's the reason that's intro video is here. Let's actually just make the thing. And why did I say make the thing? We're going to make the things for the thing over the next couple of videos. And then we'll dive into super nerdy auto Layout. Goodness 29. Production video - Tidying up my frame & component mess: Hi everyone. In this video we're going to tidy up this big old mess that was started. This video is totally skippable if you want, because I'm just going to tidy up the components, will cover a few shortcuts, but only ones you already know. I'm just going to set up a bit away from my main components. The moment that is doubled everywhere, alright, this is what I mean. I'm going to put all my main components inside this container, okay, of a phone so that it's easier to design. I'm going to move these over just so that stuff's not everywhere. And so I can use my sweet shortcut that we learned earlier in, in, in, in, rather than using earlier on, we went in and just flew around all the frames I had lying everywhere. That's what we're gonna do. Oh yeah, we're gonna make the icons purple. Alright, let's do it. Alright, I'm going to start by just making a big old frame over here. And we're going to call this one main components. I'm going to give it a background color. This is a good contrast to the phone. I some big the easy ones. So measurements can go in here. It's going to make sure it's inside my main components frame. Okay, you can go down here for the moment. Colors can go in here as well. These components can go across. Or are they going to go squeezing there. And if I shift to and zoom in, I can just tidy these up a little bit. Maybe this is a straight components, but they are main components, which is good. If one, what else can go over that can go in the bin. That was just an example. You're like, Hey, I wouldn't make that you can keep you-all's other things we need. What I'd like to do is this, this, and this are not very useful and then just lying on their own, especially when you're trying to design your Event Card. You've got to say, or I'm going to design it over here. But I need to keep an eye on over here. That's not good. So what I'm gonna do is I'm going to create a place where all my main components can live separate from my production phones over here. I'm just going to have a separate one over here that's just going to contain them. My main components are going design over here and they just get reflected over here. I'm just duplicating this one. Okay. I'm going to have to make this whole a lot bigger. Add your own sound effects. I'm going to use this now. Is my placeholder. The moment you can see it's called iPhone 14. I'm gonna call this one app components. Inside of here, I've got instances and I don't want Instances, I don't want you, I want my main component hiding in here so that when I do do designs, it reflects on all these other pages. So what I can do is I can say, I want to cut you my main component and who removes that sweet shortcut where we want to switch this out, I want to paste to replace even remember what it is. It is Command Shift R on a Mac, control Shift on a PC. You got it. Okay, so I just switched out that instance for my main component. I'm going to turn all my grids. Who remembers the shortcut for grid shift G, If you hit Shift H, I do that all the time. Look, Shift H, flip horizontally, tap it all the time by accident, Shift G. Okay, so now I can align this up and say actually I want you there. Can you see why I do this? It so that when I do adjust this now and I say actually I want this to be Dover here. It's actually reflecting in my different production frames. This is just like the control over them all. And because I've been doing because it's actually laid out on a phone, I can actually get the spacing and everything correct. Same with this down here, this is an instance because I duplicate it off here. I want my main or the hiding. There is these on this one. So I'm going to cut him as well and use that same sweet shortcut command Shift or Control Shift down on a PC shift to and now he is that main components. So when I am doing design changes, again, I start messing with stuff. It's actually doing all these different app boards. That one there is not even changing. Oh, he's got some overrides on him for the biggest one. There we go. What else we got? This needs to have a home. He's a MainComponent. And when I cut him, I'm going to click on this instance here, command Shift, Control Shift on a PC getting sick or they're not new shift to, then you go, he is a logo and you sort of struck down the middle. What does that is the grids shortcut for grids, Shift G, naught Shift H. Alright, it's have a little look in key. There is my last Android phone. I've got this giant frame up here. I don't need select it and delete it in key. What are we got? I got main components and then just my three production phones here. Awesome. I'm going to do is you MainComponent hold down the Option key on a Mac, alt key on a PC to get both sides. Because I want a bit of a what these to be down here. They're just a bit more useful to be able to see them while I'm working in this whole thing is to close. Please let me go. And now it's weird, it's not lined up. There we go. The last thing I want to do before we move on is I want to, I could do it to the Instances, but I actually want to do it to these components down here. My main components can I want to make then my selection color, I want to use my document colors, local colors. I want to use that one. So they change all through the document. Now that we've got some colors to work with. Alright, that's it for this video. A little bit of tidying up. Do I do this as I go? No, I end up getting to a point where I'm like This is Macy need to fix it up and then I tidy it up. Or when I have to share my file with somebody else, then I tidy it up and go through and sudden naming stuff. Until then I can get a little bit messy anyway. Alright, that is it. I will see it in the next video. 30. Bring in images using the unsplash plugin in Figma: Everyone, we're going to bring in images using my favorite image plug in called unsplash. I get asked a lot what the best plugins are. This is one of my favors, it's pretty easy to use. We kind of set this up here so it's kind of spread into the background. There's a little bit of more information about images, not just kind of like how to put them on a page, but if you're comfortable with images and unsplash you've heard of before, go ahead and skip this video. I want to keep it here because we're building something. We're all at different levels. And also if you're reasonably, you know, you kind of know what you're doing, maybe just jump to the end of this video. The editor will put the time code up here, okay, where I break it. And for some reason when I change this, these all don't change, okay? And I'll fix that problem that I have. That might be interesting for you if you had it before, and if you haven't, you'll probably have it in the future. So let's go and add some images to our design. Alright, let's start by using a plug in. Okay, I'm going to use the plug in. It's really common for free stock imagery to use unsplash up to you. There's lots of them around. This one's really good, okay? And what I'm looking for is find an image that fits with your kind of brief that you've got your country in, Western type that in, okay? You might get creative depending on the genre that you've got. Tick. No, you got plenty, okay. When you are bringing in images from like any sort of plug in, really unsplash included. It's probably, there's two ways, right? You can just kind of click once and you get this like big giant version. Sometimes they can be really big. So it's easier to put a frame down first and then click on them if you want to know what. Okay, So you can have an image by itself. You can have an image inside of a frame, which gives you extra bonus points. Okay? It gives you things like auto layouts which is just a plain old image, doesn't. There you go. The other thing you can do is you can have a frame within my component. So I'm going to try and drag it inside of this. Goodbye. So over, look, okay. And there's two ways we can make this happen. I can try and get it inside of here when it's too big, it doesn't really know where to go. I find it's easier to make things smaller and then they jump inside my card event component easier. Okay. Before it just kind of sat on top of it. So I can do it two ways. I can have the image on the top half and have my kind of thing below. Or I can maybe have it running completely there, move it to the back, and maybe have this thing kind of transparent. I think that's what I want to do. It doesn't really matter, except the way I'm going to lay it out. If I'm going to have it up the top here as like a separate unit, okay, Still needs to be at the back. I'm using my shortcut square brackets, so have a look on your keyboard. There's on my keyboard, the next to the key, open closed square brackets. That just sends it forward and backwards within the component. Okay? My event card or my card event component. And sometimes that's useful if you want it just as the full background. There's no real problem with that leaving it there. But actually it might be nicer instead of having this event card that has its own background of green. And then inside of there I have another frame kind of messy. Okay. I'll call it image to make it less messy, I don't really need that. Right. What I can do is say, actually I know that my parent frame, okay, The component has a background of fill. Let's change that for an image. There's a few different ways. The way I like to do it is I'm going to click on my image and say, this frame has a Phil. I'm going to click on this part. Maybe this little outside bit. Okay, lets me select the whole thing. I just got a copy. I'm going to get rid of that frame now. Goodbye. Click on the main component. Okay, my card event. And you can have two fills that just paste straight over the top. Everyone, a few people have run into a small problem, only a few people, I can't recreate it, but in the comments, there's been a solution for this problem that I can't solve. So I'll add it to this in case you run into it. Basically, it's copying and pasting. If it's not going from one to the other. Okay, there's a workground. What we're meant to do is select on this frame that has this fill. I think one of the problems might be it's a PC Mac thing. The other one is that I think it might be not selecting this, right, Because you can kind of select on this thing. You really need to click in this small area here to make it go blue. Then go copy, click on the bit you want it to go inside of, and hit Paste. Okay. If that doesn't work, okay, it's the workaround that Haley has worked out. Thank you. Hayley is clicking on this. Instead of just doing copy, which is command C on a control in a PC, you can go to edit and go to the one that says copy properties. We'll use copy properties and paste properties. They've said that fix their problems. Going to click on this and go Edit Paste Properties. Okay, that works for me. And it seems to fix the problem as well. If you have that problem, you can do that. All right, carry on with the video. Do I need this one? I'll probably leave it the re just in case I delete the image. Okay. As a backup, I just got to make sure it is above. Here we go. It doesn't really matter except that's tidier, especially if you hand it off somebody else. And there's like a bunch of frames that you don't really need. And this one here is going to be the bottom part of this. I'm going to call, instead of frame two, this is going to be called card lower. And it's going to be a fill from my local colors, which is going to be my purple, my 500. I wish it was a list for you here, because then or maybe just it popped up to tell you what the name was when you hovered over it. I'm guessing it's in the middle. Looks like 500. And I'm going to lower the capacity down to something like that, 80, 70. What you'll need to do is you need to test with a couple of images before you commit. Okay, this is really dark. So let me open up my last plug in that I used. Who remembers what the shortcut is? Do you remember? Do you even care? I do command option control option P on a PC. That doesn't work if you've closed Figma down though, because it doesn't remember. Somehow, it doesn't remember what the last one is. If you like, shut it down and come back the next day, it doesn't remember, it's all right. We'll forgive you. I need to go and check. Just make sure that I find an image that is actually I'm going to select it here. I can see I've got the right one. And I click on this one, and the purple is just fine. I'll be able to read on top of that as well. I'm going to go get everyone that is meant to be it. But these aren't updating. They should do changed the main component. Change this. I delete it and add it again. They're not deleting strangeness. You wait there. I'm going to close Figma down and open it back up. Super weird. Oh well I'm going to select this one and I'm going to go, so I'm going to go command Ford to go to my Quick actions and I'm going to go to select same properties. Okay. So it selects everything on my document that does the same thing. You go away Phils. Now if I take away Phil Phil, and it's not white on what's happening, film, I really doesn't want to add. These must be overriding from early on. I must have done so much to them or been playing around that these haven't fill override. So it's not listening to this. So what I'm going to have to do is you, my friend, I should do my select the same again, but I'm going to say right click. And I'm going to go to resettle Changes which works are all dead. Now fun times then I'll leave this in the course because things like this happen. Okay, now I must have played with the film. Yours might be working. It might not let me know in the comments. But now when I change my image, I should be able to go Zuck and they all delete. There we go, man, I hate that image now, I picked it earlier in the course. I'm not a fan, I'm going to go switch it back to a cool techno one. All right, so that is going to be it. I, we'll see in the next video. 31. Production video - Making the parts for our nested autolayout: Alright, there's nothing to see here. Go to the next video. If you want to hang around, we're going to make some autolayout boxes that we're going to need when we get into some nested autolayouts. But these are just plain old autolayout so that when I type things in and put it in different prices, they all adjust. If you know how to do that, you can skip ahead. Nothing extra here. If you want to hang around and keep me company though, hang around. Let's make some textboxes. Alright, first boring thing is, I want to change the font size here, tested this on my phone, had a look at it, and the date was way too small, so I bumped it up to 14. The next bit is, I want the early bird Text, a net lozenge thing with a wrap around the outside. So I know I want the wrapper around the outside, so I know it needs to be an auto layout. So instead of depending on you might have methods, you might be typed to the Type tool and type in early bird. And then you go take it needs to be an auto layout which you can't do with text. So it needs to be in a frame. So I'm gonna get right-click frame selection. Now I can do autolayout, OK, and now I can add my padding and stuff and background fill. Okay, to add, let me show you this is where you might be doing right? Cranking out the padding. There we go. That's a method, but we can cut to the chase and go T for Type Tool and let's type in early bird again. Okay, and just go, hit Escape to close the text box. Because if you hit V to get back to the Move tool and just get a V escape and then just tenant string to a component because component covers it in a frame and a frank can be tended to an auto layout. So Command Option K or control option, sorry, Control Alt key on a PC. And let's just go autolayouts. It's a bit quicker and it's already a component. Nice, Okay, and I'm going to do some speed design your weight there. Alright? You design yours how you like. It. Just makes it was an order frame and it said to hug, hug so that when the text changes, becomes along for the ride. Alright, early done. Next is the price. And because it's got most of the work done, I'm gonna duplicate it. I don't want an instance of this and trying to variants and stuff because it's so different. So I'm just going to grab it there and break it apart. It's actually called detach Instance, but it's beef or break it apart. So it goes a B. So that's Command Option B or Control Alt B from B, break it apart, and now it's just an auto layout quarterly, weird. Not a great name. So we're going to call this one. Actually, we're just gonna put enterprise. I live in the eurozone. So we're going to have 24, 95. You put in your price. I don't want to be called early bird. Now, we'll get into the habit now of using the shortcut of Command R or control alpha renaming. Just instead of having to double-click up there. Let's do that from now on, Dan Wilson price. And I'm going to move it on top of this, but I don't want it to be inside the component just yet. Okay, so who remembers how I hold things over without joining them in? David mentioned this yet, I gave hold space-bar. You can see it's actually not going inside of the card, just sitting on top of it. Whereas if I don't tries to dump, see over here, tries to go inside of it. So I'm going to stay Spacebar. It's just sitting on top of the layers. So I can now go, actually, what color should it be? I'm going to use my local colors and purchase can use white. The text color is going to be not white, but I'm going to start using for a lot of the text local colors. I'm going to use my neutral color. Okay, the five-hundred of it, kind of black but kinda not a little bit pizzazz. Alright, so there's, you can go down the two. I'm going to super speedy actually just jump cut to a couple of textboxes. Alright, we're going to jump this far and it can design consideration. White looks good on this dark background, but as soon as they get a light background, it's not going to work so well. And so I either need a really strong drop shadow or a back box for it. And that's what I'm gonna do, but a little back box around it, basically in order loud. Let me jump cut to there. Alright, let's jump to here. One thing to notice, remember, is that I don't, I've done a background color. I want it to be faded out, but it's all just one order frame. So what I need to be mindful of is not lowering the layer opacity, but the Fill Opacity to 50% because remember, the layer goes down the whole thing. Anyway. Let's jump a bit further. Alright, there we go. I'll just put a text box in here that is this one here is a fixed height and width, whereas this one here is, whereas it stretchy. The words not stretching. You guys like the ticks inside of it. There it is, clumping width order with, that's it, so that it can be typed on forever. It's also good idea to find a title that has really long. I've had it from just an event site near me, or should it be a good event? I'm sure. But I picked a really long one because I want to design for a really long title. I don't want to be surprised by that later on. What should be Component? That probably doesn't just block of text that doesn't. I plan on using this probably multiple times throughout the app and this as well. So that's already component. This one's gonna be one. So Command Option K, Control Option, Control Alt key on a PC, it is Component. Excellent. Alright, Those are the bits we need so you can go off and make them as we are going through the course, I need to build them. They don't want to skip it. Did, but there are some people who liked to follow the full process, especially when we're doing more and more autolayouts, you go, you got to watch it. All right, We're ready. It is auto Layout madness. From now on, I promise I'll see you in the next video. 32. Nesting Multiple Auto Layouts inside each other in Figma: Alright, we're going to start rebelling our way down the womb, whole rabbit hole, rub a whole rabbit hole of nested autolayouts along the way. And especially in this one is we're gonna do a simple nesting. So we're going to put the out autolayout that is early bird inside of the price that it looks like this. And then we're going to have an option going to turn it into a variable so that we can go into some of these other ones and say actually the early words not on this one, so we can toggle it off so that it really flows into the right part. It's quite responsive. It's easy enough to get started. In the coming videos, we will get more and more down our womb slash rabbit hole. But for now, let's do this one. Alright, so I want this Component to go inside of this, well, this autolayout, to go inside of this autolayout, how do I get that happening? To drag it in, you go why is it dragging in? Go inside of there. I'll do it over here. I'll go early. Bird is gonna go inside of price there it is there. Why does it do it? You know, because the main components can go inside other main components, so make it better and hanging out there can be a instance of it and that'll go inside. It's hard winner the same size. Early bird Instance, which is the little diamond there. Go inside price, you go. It's working. It's not the layout that I want. So I'm going to click the outer parent, their main component. I'm going to go down and go in the middle. And let's play around with the spacing ends that you wait there be this loan for Y4? Four-by-four. Okay. I wanted to just see what it looks like. I'm happy with it. It's going to fit down here. I probably like it done, but I'm going to have to miss with the rounded corners to make them work in there. We go, happy with it and that my friend is Auto Layouts inside of other autolayouts throwing in components to be confusing, but they do get confusing, wasn't doing hydride. Next thing I wanna do is turn it into a variable. Why? Because I did this kind of autolayout stuff because I wanted to be able to turn off early bird because I don't always need this gonna be a time when this thing is not nearly bit sale. So what I'd like to do is my main components selected. I'd like to add a property and I want the property to be a variant. Okay? And I know I use variant and Variables kind of interchangeably. It's variant that we want. The rest of the course when I say variables, I mean variant because they kind of different things. Alright, so this variable is going to be any, but really, what do I want? I want to Variants and I want the bottom one to have no double-clicked it. Nobody would. Excellent. So I've got two of them now, I'm clicked, click on My parents component set. There's a little dotted line around the outside, you might remember from the Essentials course. So it's a component with two different variants. And the moment they're called default and early bird. So I'm going to say and click on the X, you're going to click on this one. Okay? And I'm going to say early bird, the first value is going to be on and off. If you use words on and off, it'll transform it magically into a toggle switch. What I mean by that is let's drag out an instance of this components it. So I'm gonna go to my assets, have a look at the local and components we haven't been in here, you'd heavy. I've got this one here. There it is my price one. I'm gonna drag them out. And now because I use the word on and off, it becomes a variant with this toggle switch. Nice. I also want this component to be inside of here. I want it to be inside this main component for my Event Card. I want this text to be smaller so it fits in. There. We go. It's gotta kinda break the K. We got a few things to do this and we're going to take it on the other pages. And what you'll notice is, is that it's not very responsive. Why isn't it in the top right of this one? Oh, you got it. Components Constraints with it selected. I'm going to say you to be constrained to the right and the top, probably the bottom, nope, top, top is gonna look better. It just means now and it's over here. When I resize this one, It's a lot more responsive. Text is broken. So okay, we'll fix in another video. But there we go with kind of getting a little bit into it. We had to autolayouts, we stack them inside of each other. Then we wanted to variable. So we made it a components set, which happens automatically when you go like this and just add a property to it. It becomes a component set. Okay, so we say you want to Property of variant component since yay, we want at least two of them and then do something different. And it might be that it's dark or light or different color or a different size. But we just turned something on and off, which is the Iturbide thing. And it will wrap back up nicely because it was an auto layout inside of another autolayout. Oh yeah, let's do it. So over here we can say, alright, this one is an early bird. This one isn't. So I'm gonna go into my component. I'm going to find this here called price, and I can tune this went off. There we go, and even reps up to the top right. The last thing that I wanna do is I want to play around with my spacing, but you don't have to hang around for that. I'm just going to adjust this so that's a bit higher and I will see you in the next video. Well, I miss around with how big this all should be by 33. Autolayout Nesting with variants and responsive text in Figma: Everyone at the moment, this is what are little responsive Card does. Kinda works. This ticks look. Settext doesn't work. In this video. We're going to make it do this swatch kind of re shuffles. And also we're going to add a variant. Say that we turn the price off. Look, the texts re flows. Yes, I've messed up the spelling of Egyptian. That is also part of this video. One thing I do want to throw into here is that you might be finding it confusing. Some of you Buber like a breeze is easy. For those of you are finding it tricky and tough and going, do they have to be this complex? They don't. But it's good to understand this stuff so that you can build complex things if you need to end by stretching out into this more complicated stuff, it makes the stuff that seemed hard, easy. Pike comparison beats it into our head. And you might be like me and like the challenge of building these things that are quite responsive and resilient and we can see them out and people can't break, broken. Drag it down, the dragging down, but a future video. But for now, it's good that takes to reflow. Alright, so we need that text reflow and that is in there. Plus we want to make that a variables so we can turn on and off. There's two things we need to do. We need to make it an auto layout the whole bottom chunk, and we need to make this textbox fill the container. So at the moment if I click on enough, okay, inside of my main component, which is my card, I've got this just framed in the bottom here, which started as a purple box and that I stuffed the price in there and I threw in some text. So the first thing I need to do is the entire Rapa, this frame here and he's been autolayout. We know the shortcut for that shift day, doing it all day, worry about the layout in a second. Where do you want to jump in and do padding and margin? But let me show you. The other thing we need to do is this textbox here at the moment is got a fixed width. So that's why when I resize this thing, it doesn't really work. If we say fill the container, nothing really changes except that when I respond, it's going to fill the space, provided the moment it goes to the edge of this. Watch what happens when we're resize it? I'm going to add that adjusts. You go. They've got this order lab inside of this one allowed, which is now inside of this autolayout, Figma inception. And before we go and fix the padding, Let's do the last thing and turn it into a variable just to get into the swing of things, does this need to be variable? We're gonna do it anyway. So for this to have variables variance gone down, it needs to be a component set, which is the same thing as a main component. And we can a main component not live inside apparent main component. You're like, I'm out doing the video off. We started easy, we getting hotter. This is good. We'll keep practicing. You are going to go over here. You are gonna be not a component at the moment. So I'm going to say you ever hear you My main Component, Command Option K, Control Alt K, you're a component. I want to add a property to it. Well Property, a variant, not a variable. That's have to variants. And let's put it somewhere. Let's grab the edge of it and put it somewhere. It's not kind of overlap and everything in a second variant here we need to turn this off and because it's in an auto layout, just do it then. Look at that. It's an auto layout, which means it disappears, everything we flows. And because this thing says, fill container, naught hog not fixed, it goes alright, I'm gonna fill the container. Whereas on this one it's filling all the way to the edge here because there's something in the way. But when there's nothing in the way, it says I'm still filling it. May look how far I go. Put some over there. How do we get it? Let's go to Assets panel. Let's grab an instance of it and put it over here. It's not in the right place. So if I look at our layers, I need to be inside this NACADA event. Now, I'm going to play around with the padding to try and make it look nice. And what I mean by that is in the autolayout here of the lower nav, I'm just going to try and push everything round. But I'm not gonna do it in the instance. I'm gonna do in the instance. And then I'm gonna show you how is everybody you like in and get this looking good, that's great. Then look at the padding of the right-hand side. You want it to be 16. Perfect. Okay, I get this thing. Look in sweet. And then I realize I'm working on the instance. What do I do? Why do I do? You can select on the incidence and say right-click and say actually, I want to push, where are we go? Push changes to main component. Then it will adjust over here. Where is it that one there? Because you forget and it's kinda weighed just adjusting this and then keeping an eye on this one, on adjusting this one. Sometimes it's easy to just adjust the Instance and then push it to the main. Mainly because I forget. And while we hit, let's tidy the actually it's over here. Let's tidy the property names. So this is going to be price. And I would like, I'm gonna hit this little option here to say on and off. You can say true or false, that works as well. Can think of any other ones. Go stop. That doesn't work. If you know any of any other ones that turn on this coup toggle switch, let me know in the comments. Here we go. You'll notice that the bottom is changing in this one. How do I fix that? I am going to turn it off, fix it and my instance, bump it up one more pixel. Then I'm going to say you make Component. Let's Push it before I forget. Now when I toggle on and off a there we go. Other problem is I adjusted all my padding when I had this on to get it how I wanted that, I pushed it back to the main component, the component set here. But these are actually separate. Now you can see the spacing is different on this one. So I need the spacing on this. Actually the spacing of this 1651010 to be the same as this. I can copy it Command Option C to copy it's Control Alt Z and this one, so same two keys plus V. There we go. Now hopefully, this one over here is what am I doing? Oh, we got a little lost. Here we go. You my friend needs to be over there. You saw me do it. I don't know how I did that, but now I can surely go in here and toggle that on, that off. The same. Alright, so it was good. We bought a couple of points of missing with one of the variants and assuming you're doing it for both, then realizing your mistake and be able to copy and paste that properties to both of these. Alright, exit into bonus. All right, Let's do one last thing. Actually, I just thought we've got a couple of variants going. I can say actually, this one here. My card lower. My price actually has its own toggle switch. Wally, I was steering and they're going, I thought I just made this work. Doesn't work. It actually does. It's just that they're, It's actually see, you can see it's spreading out. But the way the Egyptian, if it was smaller, it would be better. Here we go. Let's turn this toggle on. Toggle off. Now works. It was working to get the idea is just the line was too long to break down to the next one. Alright, and I'm back. I finished this video and did the outro. And then I was like, yeah, look a coulomb. This works the Variable turning on and off. So if I double-click on the bottom line, I continue this on an offeree flows, why doesn't it reflow nice and Responsive though? Okay. It's because if I click on my lower card, okay, the Constraints and hold Shift, so that we've got left and right going where you can pick it from here. Now what a work. Why did they go away? Because it was working at the beginning. Remember earlier when I made this, because remember I said I needed to make it a component. So let's drag it out of here. And I made a component and then I put it back in. When it comes out of here, it did it again. Look, I dragged it out and it goes it didn't drag it out and didn't lose it. But when I did all this stuff, do it, somehow lost that and just become left-aligned. They go. That is the mystery, solved. The problem that I created and we fixed. I like to pretend like sometimes I put these in as learning experiences. But man, when you're building these things, when they started doing complicated things like we're doing now, you end up having to test slots and then go. What happened? Like in the next few videos we're going to go What's happening here? Ignore that for the moment. We will fix all that all the while becoming auto layout, component, variable, sorry, variant and constraint masters. There we go. I'll see you the next video. 34. Auto Layout on different device sizes- How to make advanced Auto Layouts: Hello. Hey, we're going to make this version. Okay, we've been ignoring the small column of the larger iphone. We've been kind of designing over here and wrecking this and just ignoring it Like, but Dan, look, it doesn't fit. Why is it not fitting? That's what we'll address in this video. We'll make something that is nice and stretchy. It has both the price underneath which is awesome, and the price is side by side to kind of better use the space. And it's responsive. Can you see four lines? Three lines? Two lines. It is going to get a little bit wormhole rabbit. Holy. Okay, we're making this thing probably way too overcomplicated, but it's fun for the course, but it's a little head scratchy as well. So if you're finding this quite like, oh my man, am I expected to do this only for really big budget, big team jobs? And even then, these might be too complicated. It might be better just to have a couple of examples and let the developer to it, but that's no fun. Let's get complicated en figma so that you can do the easy stuff easier. That makes sense. Anyway, let's go make this look at it, look how fun it is. First things first, I'm just going to move it over here. My small version. Why? Because I'm going to be adjusting this. K, my main component and all of these component sets K these variants. So I want them close rather than having to scrub back and forth. All right, so what's wrong with this one? First of all, what I'd like to do is just reset the instance. Okay, You can write, click it, there's a shortcut. I can remember what it is. Resettle changes, Look, there's not even a short cut. That's why I don't remember it. Okay with it selected it that this goes back to a real good copy. No overrides that's good. Because then I can go like this and know that I haven't really, there's not too many changes on this thing. So the big problem is that I want, first of all, the price, to go underneath because it doesn't really fit in this small two column layout. So let's do that. We don't have a two column. Now what would be nice is you can click on the instance of my card lumber and go, all right, auto layout, go go, go down, you go right, go down. That'd be easy, but you can't do it on the instance. I swear you could used to do this. Okay. Back in the days of Figma, but I don't know, but I can't actually prove that, so maybe it never happened. So what we need to do is do it back here on my main component, which is a variant, sorry, variable. I don't want to change the main one because that's good there. This one here without the price is fine, so I'm going to need another one. I'm going to do this first one because it has the price in there. And I'm going to say you can have this vertical layout. It almost works. I'm going to give it some space. I'm going to click the, It jumped out, it jumped out everyone. New update to Figma. There's this new option here that says wrap. If you'd be able to ask, it's like can we do that instead of this third variant to stack it on top of each other? The answer is no, it's not going to work for us. It's better used for things like just a stack of icons, a stack of repeatable. The exact same things what we're doing is we want to stack them, but we also want to change the text to be centered. We want it to be resizable. So wrapping is not going to work. In this case, there's too many things that we want to change afterwards that that doesn't solve. We will cover rapping later on in the course. It's really useful, just doesn't work for this video. And the other thing is what I'm doing is update. Is this video is real hard. I kind of said at the beginning, but if you do get lost in this video, I think everybody might, okay, Even myself watching this video might get lost. Okay, for the first time, it is a tricky thing to do. Nested nested nested instances. It gets, yeah, it gets pretty inceptiony and if you get to the end you're like, oh, I got bits of it, but it's pretty tricky. That's okay, it was a tricky video. I tried to get in some advanced stuff early. Basically, a lot of the stuff that I get asked for when people wanted the advanced course, we want auto louds and we want nested auto louds and we want to become masters of auto louds. I feel like maybe if you've come just off the essentials course, this might be tricky. But yeah, do it. If you don't get it, don't worry. Most people find this one really tricky. It does get easier in the course and these things will kind of double down on as we go. There you go. Wrapping doesn't fix it, and yes, this is a super hard video. I hope you enjoy it regardless. All right, carry on. Okay, I'm going to go there. I don't want to jump out. How do I not get it to jump out? Oh, remember the shortcut? Hold space bar. Okay, start dragging first, then hold space bar, don't jump out. The other thing is I can click this and just resize it, or I can use my sweet shortcut. We learned earlier, kind of frame selection this one here. But the shortcut is all the keys plus R. So we'll call the outside selected. Come on an option shift or control Olt shift and hit R. Too many shortcuts Dan, do you can ignore the ones you don't want. And this one here is great. It's on top and bottom. And I can go up here and say you are going to be not on or off. The toggle switch is broken, okay? I'm going to be priced three, okay? That's that one. Now when we have more than two, okay, we had on and off, and that worked great. We made a toggle switch, you kind of a three setting toggle switch, so it just breaks. So we're going to select on this and actually go to our options here for our properties and say price is still good off makes sense. You can have large and we can have small. That makes more sense. So I can go up here now and say, I want the small one. Maybe horizontal layouts better. Yeah, that's better anyway. So we need to do a couple of things when I change this and it kind of looks like it's working, but it's not. Give it a jiggle. Okay. You can see it's kind of working, that stretch. It's not stretching the height, which is probably the main thing. The other thing I'm going to do is just turn this part off. I'm going to turn the eyeball off because that's something we'll fix in a future video. It'll be very similar to what we're doing here. So bits of it working, bits for not The first thing is how do I get that thing to stick to the bottom. And this is where even me kind of what I'm doing. And I know that I don't know exactly off the top of my head which it is, but I'll show you my methodology of going through and just figuring it out doesn't take too long. Sometimes you stumble on it the first time. So what could be doing? It's probably the height of this thing, okay? Or the constraint. Let's have a look at constraint. So we can say, is it on this thing? No, not the constraints on this. You've got them, but this is a piece that is inside of this. This is my main component for my event. So I can click on this one and say, you are down the bottom to the top, kind of it. Here you go. I didn't really have a plan for which one it was going to be guessing as I go along. And we got some of it right. Okay. The problem with it now, it's sticking to the bottom, which is great. It's just not growing. Why is it not growing? So let's do the same thing. Let's look at this and say why aren't you growing over here? It's hugging contents, which is the thing I want, and it's not doing it. Maybe it's the constraints it's working in this one, maybe it's this. Let's click on that. That's half of what I wanted. I did want it to go center. Okay, so that's it. And this text here, while I'm here, I want that to be centered. There you go. But it's still not growing. Why is it not growing? You outside are not growing. Okay. So it's not, this is a part of this, yeah, this one, maybe it's not. It, this one is fixed height, so this one can hug contents close. Maybe down the bottom here, maybe it's the constraints down the bottom. And this is the fun game of what's controlling what. When you've got nested inside of, nested inside of nested auto layouts, it can be quite tricky because sometimes it's not the auto layout at all. In this case, I bet it's the text box. I'm going to use this one. Okay? And I'm going to say to you, you're not a fixed height. I want you to fill container hug contents. Well, it's kind of working but it's not this one. I think it's this guy, you, my friend are fixed height, that's hug contents, it's fill container. Nope. All right. I'm going to pause and put my thinking hat on, try and work out what it is. I should prep more. Al right. I haven't done it, but I've thought about it. I'm thinking I can actually do it as instance and say hug contents, fill container. Nope, Hug contents no, fill container. Oh, I thought that was it. All right. Back to thinking, oh, maybe it's the card, not the actual box. So we go, it's fixed, height hard, da we did it. Teamwork. Does Dan even know what he's doing? Not when we get these deep in these auto layouts and his variants on top of auto layouts, it can get tricky. So if you are struggling, you're like, man, that took me ages to work out, don't worry. Unless you're doing something simple, it can take a little while to work it out. That's my excuse anyway. Okay, what are we going to do here? I want to move the spacing here. I want to open it up, but I can do it on this instance, then I have to do it on all of them. So I'm going to go back one and say, you actually have a bit of padding in there. Oh, there's another word. So what I'm also going to have to do is play with the spacing size, sorry. So 18 is not going to work, right? So I'm gonna use my down arrow, probably go to 16 and I'm going to have to, when the developer builds this, have a character count so that they don't have a zillion and kind of blow out the size of this. All right, so that's the size. I'm going to have to go and say you need some smaller padding. Here you are. Let's give it a test just to make sure we haven't broken it, so it's working right. Let's check his other bodies, like the instance with a large lower card in there. Okay, and it works. Would I just leave it now? Do we need it to break to three? Let's do it because we've already learned what it is. We've learned that it is the text itself on the instance that needs to be set to hug and the parent needs to be sent to hug already. There we go. All right, nice. Let's do one last thing, because that's not a really good use of space. Let's get this side by side, okay? And remember, I can't go in, in my instance, like at the beginning, I can't say you, right? So I can go back to this one. I want a duplicate of this. I'm going to say D, and what I meant by that is command D or control D. And this one here can go this way. Click the outside, all the keys plus R, it's command option shift or control lt shift and hit R. Okay, And what I want to do is it's broken my toggle again. Let's have a look. Let's click the set. Let's click on the settings here. Early bird on off, and then horizontal. Okay. Or yeah, I think that's better. Now, I can go to this one and say you are horizontal. More room. Have we created a monster? We have totally created a monster here. Would I make something like this? Yes. It's fun getting Figma to bend to my will. Bart, did I spend half a day getting it going? Probably. Is it worth it? It will depend on the job. Bigger design systems where there's lots of people using it on a page element that gets used a lot. Sure. Even if you don't want to get too far down this rabbit hole of bearing all these things inside of it. Do it for this course so that you can get really used to like what to look for. And, you know, when you've got problems with maybe a less complicated asset in Figma al, right? That is it. I will see you in the next video. 35. Responsive text that adjusts for 2 lines in Figma: One. In this video, we're going to get this venue name to like stick to the top of the name in the early bed pricing module. Okay. So that kind of adjusts is a little bit more fluid now in the original course. Okay. I recorded it and I just couldn't work out how to do it. Just got so lost. And instead I had a placeholder video that said, anybody in the course helped me out. And you guys answered. There was lots of great comments below. Okay, about how ways you could solve this problem. And I think I've synthesized it down to the bare necessities. It was a real mind bender to me. You should have seen the original video. It's kind of desperate, lost my way. Luckily I got you guys help, and the actual solution is reasonably easy. All right, let's jump in. All right, first up, I've got my main component. I'm going to drag out an instance of it. Okay? Because what I want to do is go back to my main component and I want to say actually the thinkor frame four, which is my kind of like venue name, I'm going to rename it, first of all, call it venue. Okay. And what you'll notice is that it kind of works. But then as soon as it breaks onto a few different lines, it just disappears. It's kind of the wrong order originally in this video, I just couldn't work it out. My main one was like, oh, just grab this and say constraints. Let's line it to the bottom and it still doesn't work. So I got kind of lost and asked for your help and you did, you delivered. Okay. So the way to fix this is okay. I go back to my main component. I've got two things at the bottom here, venue, and the pricing thing at the bottom. Okay? This thing's called price, but it's got all sorts of things going on in it. Those are the two bits at the bottom. What I can do is slick both of them. I'm doing it here in the layers, okay. And I'm going to write Click actually now I'm just going to click over here and say wrap these in a frame, but not just in the old frame. And auto out, Okay, and you're like, oh, awesome breaks. It gets worse than what it was. So what we need to do is that wrap a frame, let's give it a name instead of frame six, let's call it wrapper. That wrapper needs to do a couple of things. It needs to have constraints. Let's stick it to the bottom, which is awesome. Let's get it to go all the way left and right. It doesn't work still. It's working way is if I double click in the wrapper, okay, Which is this thing here that has a couple of my bits in it, my venue and my pricing block. Okay. It is going left and right. Can you see it? Wraps right to the edges. This bottom block though, is only getting stuck here. Why? Let's have a look. Let's click on it. I'm in my main component, actually I'm not. I'm in my instance's Get my main component clear, will click, Get down to this pricing module down the bottom. And I'm going to say, actually I don't want you to be a fixed width. I want you to fill the container that you're in which is the wrapper. And the wrapper container is saying, being all the way left, all the way right, and be stuck to the bottom. Now we all right, that's the fix. What might end up happening is one of the thing that I found when I was toying with this to want to try to make it work is that this text in here at the moment, you might have to go and change this to go to fill container. It can default a fixed, You end up something that works but doesn't quite. Okay, actually stretch it out. If I go to this text, this text needs to go from fixed to fill. There are some quirky things with Figma. Yeah, there you go. Worked. Thanks to your guys help. Thank you very much. If yours is a little bit different and it's still not working, I will do a couple of things, check out the comments, because there was a few other different solutions. I felt like that was the easiest one, most synthesized version. The other thing I'm going to do is I'm going to go through my main components. So let's close it down all the different parts. And you can see on the screen what I've got settings over here for this is my Vent card, okay? It is non oil out. Just a basic main component frame. Then I've got this wrapper. Okay, that wrapper, I'm just going to let you be able to pause it and go, oh, okay, it's fixed and hugged and set it to the left and left, and right and bottom. Just work through your different parts. Okay. See you. Inside a venue is just the text box and allow you to venue has these settings applied to it. Okay. The pricing module has fill hug and you can see the auto layout settings for it. Just go through and just check and compare to yours if it's not working. So look at the layer structure over here. What I've done in the design options, venue wrapper, just compare yours. The other things, let's click on the actual text itself so you can see if there's anything different with yours. Ghetto funk. And the pricing module. There you go. And we should be able to change it from off to horizontal. And you can see it bumps up and it still fits because that thing comes along for the ride as well. Good. All right, that's it. Good luck with the video, and I'll see in the next one. 36. Abstract Gradient Background in Figma the easy way: Hi everyone. We're going to make this little gradient blurry background animation thing. We're gonna be kind of borrowing it from this site here, stripe.com, okay, everyone loves us. Animated gradient. Can you see it moving the background? We are going to do it the quick and easy and dirty way to start with. We're just going to animate an image mainly to flex our animation skills. Get our remind ourselves of all those things we did in the Essentials course, makes sure we're all at the same place. And we'll get more and more advanced with gradient meshes and good stuff, good shortcuts and here as well. But yeah, let's go make this in Figma. Alright, let's start by making our welcome screen. We're gonna do it down here. If key, I'm going to use the phone, iPhone 14. It's gonna go into a random spot, start them down here and give them a name. It's gonna be my welcome screen. This is gonna be welcome screen one. We're gonna do frame-by-frame in this animation and then I'll show you how to do it fancier in an upcoming one. Alright, I want all the details from this. I'm gonna go, I'm going to slick this frame because I want the rounded corners in the background color. So we're gonna go Command Option C for copy, that's Control Alt C on a PC. And the same keys plus V will give me my background color and can be my rounded corners. Let's use a plugin. And now there's a couple of plugins to get the abstract picture we're going to use. So we're going to animate that picture, right? Instead of doing them all separate, which we'll do in a little bit, start the easy way, get more complicated. Now I'm just going to use unsplash and just get commercial use images for this one, get an abstract background. If you type in gradient in the search, you will find there's a lot of Gradient makers up to you how costume you wanna go. Okay, not really required because we can draw our own gradients. But let's just start with an image. Okay, it's unsplash and I'm going to use abstract. And I'm just gonna use this first one. Now I don't want to put it in the background of this because I want to animate it. So I don't want it to be a background of this screen. Just going to grab my F2 for frame, draw bigger than my phone because I want to move it around in there with it selected. Click on that. And let's see. There we go. Actually, I probably want to be able to see all the different colors so I can move it around. And I need to close down my plugin and I need to make sure it's inside the frame. So you It's kinda done the wrong way because I do the frame around the phone. It's kind of mixed it up. So I'm going to drag it above. Not welcome screen. Get out of there, please. There it is. Can you see the little line that appears so it won't do it again now. So inside, outside, there we go. And you can go inside out there. It's a bit of one. Can you see the little line there? It, it'll zoom in, look outside, inside. Frames gonna be called gradient. Let's add some text. Now I've added some texts. The one thing that happened is it automatically put it inside of the frame that I called gradient just because I drew inside of it. So I'm going to drag it out so that it is not inside the gradient. It is just alongside at N needed to be above, and we go, alright, so I'm gonna have two of these Command D or Control D on a PC. It's renamed it nicely one to screen two. Now it's needed to change them. I'm going to click on the gradient itself and you can do anything, just a subtle small rotation looking at the wrong one. This one. Okay, and I want, what am I gonna do? I'm gonna move it. And I'm going to rotate it a little bit and probably scale it a little bit as well. Here we go. Now the trick here is to connect these two up with Shift to add. I want to switch over to prototype. So we're going to learn the shortcut. Have we done it yet? I'm not sure. Shift E. Okay. Shifting toggles between design and prototypes for honorably, once you get to this latest stage in a design, you end up toggling between the two loads. There are different shortcuts for use those if you know it. Ambit shift either just a good toggle. So be on prototype. Click on this frame here. And I want to say, you go to this one. You might have the same problem is me. I've never noticed this before this course. But with this big background image in here, I can't grab that little dot and keeps jumping to the minus, minus. You can see it's jumping to the outside frame. What I am going to do right now is I'm going to select on that gradient one and I'm just kinda lock it, which is Command Option L, Control Alt L. It is not. It's Command Shift L. So Command Shift L, Control Shift L on a PC as a shortcut you use loads. Let me, I'll let into the shortcut sheet. Just means now it's not going to try and click on it. So now you see these my little dot that I wanted you go there. What I want you to do, not on tap. After a delay. Hang around a bit. How long? I actually wanted to just get it to zip over. I don't want it to wait on the screen very long, just wanted to get straight over here. But how does it get there? Not instantly. I wanted to get there via Smart Animate. It's my Animate. It's going to just look at the things that have changed in animate between them, okay, and, uh, now case the tics hasn't changed, but the background image has. How long do I want it to go? Let's just leave it as default and have a little look. Another shortcut we're going to learn through this course is Control Alt into the Enter key on your keyboard is to preview another really handy one. Too much shortcuts I, I'll, I'll try and introduce them. Bidder. Can you see this one here? To have a look, I'm going to go back one. Just took a while to load. That's why I didn't see it. Okay. And it's just not very nice. If you jumped to some other page where you need to make sure is when you hit preview, just have that first screen selected. Thin hit preview. And what I need to do is I need this animation here to go from not delay, well, go from smart animate. I'm going to ease in and out because it looks nice. And how long there was 1,000 milliseconds and a second. So I wanted to go like 5 s even longer, this right, 50 s. You can hit the Play button. If you're not sure where the presenters, you can see the shortcuts. Okay, but we're going to use Command Option P, Control Alt P. That opens the last plugin. So the same two keys but you into a not P. Dan, come on. Alright, It's preview. It takes a while to load that giant image. So my case, I can't just like let it go because it's like half stuck between this. I'm gonna hit Back button. Looks like it's animating and moving and doing stuff like that. And we didn't actually do much to frames somebody else's image. Really easy to implement as well. On the development side, it's just an image moving, labours scale and rotation, which is easy to do. Alright, that is it. I'm going to add a bit more pizzazz. By clicking this one, I'm gonna hit Command D to get another version of it. And with this one here, I want to loop back to the beginning. First of all, I'm gonna have to start locking some of these extended to animate this gradient before unlock it. I'm going to try and guess something cool, but oh, good point. How do I get it from stopped jumping around? What's going on? Remember the shortcut to kinda stick things inside the frame. That's right. Once you start dragging hold Spacebar. And then it will stay in that frame. Or what a great use of that shortcut, Dan. I pretend like that was part of my notes there. Yeah, that's good enough that I rotate it. I can't remember a scalar as well. Alright, and I need to make sure that you go to prototype mode. I can't quite see that dot again. Why? Or that thing in the background. This doesn't normally happen. Let me know in the comments if you like, it's happening to me too, or it's just you'd in case I'm selecting my gradient and this one here, maybe it's the shortcut. That's right. Command Shift L for locking. You'll never remember the mole. That's okay. I'm gonna do my best to beat them into, let's lock them all. The locking icon, you can just click that obviously as well. And now I want to say you can't really see the dot. I can see that. Here we go. Just a little bit hot to see. There we go. It should remember the last thing you did. I do 10,000 s or did I do 10 s now I did 50%. What didn't? You cannot do that. Hi, What's this guy? We all learned something today. Just so you go as high as you want, 10 s. Alright, let me go and let's do that. And I want it to loop back to the beginning. So I want you just go back to when it's finished using the same things. Alright, let's hope this looks good. Click on the first screen, command Option, return, control alt into, on a PC. Sometimes gotta give this thing a bit of a jiggle. We go back to my first screen. What's kinda doing stuff, it's changing color, it's moving around slowly, gradually. There's just an image moving around which is quite cool and it's not quite working. Let's debug it why you're getting there and stopping. So it goes you do you did this one? Go back to that screen Smart Animate you on tap haha, after delay to do the same one in this one. Was any of this working Dan you on tap? If it was working, good work, Dan. Alright. The other thing that might be different from yours, you might have seen all of your screens when you went into here. And it might have launched on some random screen instead of that first one here. And when you hit Back button and grabs them all, okay, so just remember that you can actually stick this first screen and start a flow. You can say it sometimes does it automatically, okay, sometimes it doesn't. So you can say Start flow. So when you select in this one, It's not going to jump around these other frames. So it's going to start at that one, which makes it easy when you want to restart, which is the archaea. Can you see down here hockey, let's go. Eighths. It's okay, it needs to rotate and scale more. I bet you use it looks better. So find a different image. I'm going to try it back and fix mine. You wait, they're actually one thing before I do that, I wanted just point out that there is the option to use this back option, unite all, just do that. It's not gonna work what we want to do at the moment, we'll do it later on. It's amazing for advanced prototypes, but for the moment, all it does is goes back to the frame that it came from. So it's not gonna go back to the loop. It's going to go back just to this one. So it's going to go along here and then back to that. And it's not that useful when we learn sections and a little bit, which is some advanced prototyping that's super awesome. Don't use it for the moment though. Just go back to this one here. Alright, carry on with the video. Alright, so let me back and kinda played with it and I betcha, you're gonna do a bit of jaw line, just looks like it's moving. So have a play around with it. You'll get it to feel like it's scaling and stuff That's kind of bitter getting there. But anyway, all I did was yeah, go back and scale and change the rotation a little bit. There's a lot of trial and error. I'm gonna do one last thing together with us. Let's blur it. So what we're gonna do is grab all of the welcome screens. You. And I'm gonna go Shift E to go back to Design. And let's add an effect to them all, not drop shadow, layer blur. Grabbed this option and crank it up to, I'm just going to drag it. Here we go. Let's see if it makes it any better. Command, Option, Enter, Control, Alt, Enter to preview. Let me go. Offeree studying. I'm not sure why that is happening. Oh, so much better. Air we go. I don't know. Can't wait to see what you're gonna do would do a class project next, and I'll get you to make one or at least present your one so I can see somebody's better one than mine. Alright, I'll see you in the next video. 37. How to copy and paste Interactions in Figma: Hi everyone. Let's learn how to copy and paste Interactions that you've built for one frame across another frame, multiple frames. The frames first up, let's switch to prototype mode, shift E. And I've gotten indirection already on this first frame that I want to copy and paste, I select it. And then the weird thing is, is that over here in prototype mode, There's my interactions. There's the one that I want. You click on it, not there, there and that tiny little gap, okay, kinda selects the whole layer. I feel like there'll be a bit of solution to this real soon in Figma because there's a lot of people like, as we, let's just use our shortcut for copy in select one or all the frames that you want it to go to and just hit Paste. Here we go. So the interactions across them all, for me, they're all pointing back to this second frames. I'm going to have to update them. But there you go. That's how to copy and paste Interactions Across lots of frames all at once. It's that secrets, secret, little clickable area. Then my case, I'm going to have to work through and say, This doesn't go back to itself, but goes to the screen. This one goes to the screen. This one goes to this screen, but all the animation is coming along for the ride. So you like That doesn't seem that quick. It is when all of this comes along for the ride, do you go a little shortcut? 38. How to animate gradient mesh using Variants in Figma: Hi everyone. We're going to make this kind of animated gradient goodness in the background here will also tie in together our technique where we're going to be using Variables and animating those rather than just doing a whole bunch of frames on our artboard. Because you end up with things like this width is just like a zillion, zillion connected frames and they're fine, but they can get real messy. So we're going to tuck them in IC. So on our Canvas we've just got one frame inside of that as a component, hiding all our animation using Variables. Alright, let's go and make it. Alright, for those of you want to just jump to using Variants instead of frames. I've kinda skipped ahead a little bit and I'll show you a quickly. And then if you want to, after I've shown you, I will go through and build this thing from scratch and add some tips and tricks as I go along. But for those who just wanted to know, basically what we wanna do is I've created a frame separate from my main phone just because I need a bit of working space. So I want to keep it separate instead of duplicating the frames and connecting them using the prototype mode, what I'm gonna do is select my frame. I'm gonna give it a bit, a name. I'm going to turn it into a Component Command Option K, Control Alt key on PC. And I'm going to create a variant of it. And they have two of them. Okay, and that's what I wanna do. I'm going to move between these two, connect them up with Prototyping, the same as I do with frames, but they're gonna be component with variants. It means we can stash away and hide them. So let's quickly do it. I'm just gonna go into this one here and change it a bit. Not gonna do much. I'll do more in a second when I go through it fully. You lose speed mode. Alright, something different about the two. I'm going to go Shift E to switch to prototype mode. I'm going to select this and say You, my friend are going to connect to here using the Animate after delay, delay. I'm just going to use one millisecond, okay? And I'm gonna say, I wanted to change it to smart animate. I'm going to ease in and out. And it's gonna take 5 s, which is 5,000 milliseconds. When it's finished. It's gonna go back to that top one. You back up. There we go. It needs to be switched back to after delay of one millisecond, but all the rest should be okay. Now that we've made it, I can go to my assets panel, option two. Okay, I'm gonna say you go inside here, get it lined up so that animation is baked into this component that I can now go and preview and look at that movie gradient. Goodness, Alright, so if you just wanted to do that, she just wanted to figure out this different way of animating rather than having that big massive document of connected frames. That's how you do it. Hey, team, before we carry on just a little update, Figma has launched a new preview option. Throughout this course. There was only one. So we'll just use the present and present, open it up in a new tab to preview our sweet new animation. What we can do now though, is you can actually do this other option in here, which says preview that are present. Preview will open it up in a little kind of like tab within the application so you can view it. The cool thing about it is that you can have it there. And I grabbed my frame tool and let's add something to it. You can see Live updates. So depending on the screen size, you could have this kind of tucked in the corner. Always previewing, showing your animations and all your changes. So that's cool, it's new. The only trouble with it is previewing desktop. Kinda make it happen. But it really wants to the moment this might change ticket. I really wants to preview phone apps or mobile websites. Okay, my desktop version gets a bit squished in there that might work for you. You can open it up in another tab and that's kinda what I'm still doing. I might get used to this new way. But for the moment and the rest of the course at least, I'm going to have it in a separate tab. And often I like it because this goes into another document or another screen, at least I've got another screen that I've connected to my computer. And I have it over here, always previewing this one here. This guy, he doesn't leave the screen, or at least he doesn't at the moment, I can't drag it to this other screen. It's kinda stuck within this window. Okay, So up to you, which one you want to use, okay, there is a shortcut for both of those. One Shift Space. K is the new one or Option Command Shift space that's the same on Mac or PC, or present the original way which is Option Command Enter on a Mac and that is what does it Alt Control Enter on a PC. There you go. Alright, continue on with the course. Update over. I'm going to backtrack now and show you how to do this kind of coup gradient stuff. And there's some tips and tricks and some things that might catch you out. It's going to be there now. Alright, so I've just made an app boards. I've called it, welcome old one. What I like to do is with the F2 I'm going to make a frame over here. Okay, so just type the F key. I like to do it separately from this main one does so that it's a separate unit is bigger than what I need a little bit more room to design in because it gets cropped down later on. Getting gonna name it. We might run into trouble with drawing the blobs is grab the P key for the Pencil Tool, sorry, pen tool, and watch this phi draw festival vice start over here. What ends up happening is I get a shape that is given to fill. It's not actually in my animation. Can you see hits above it? And I need to drag it in there. That's one thing that might happen. The other one is going to undo. I'll start drawing and hit the least amount of points you have. The nicer this thing looks so four is good, three is fine. Tyndall anchor points is bad. And to get a smooth corner, I'm just clicking and dragging. Clicking and dragging gives me a smooth points. But the first and last can anchor point that joins them all up, ends up being a point. For some reason. You can hold down your Command key on a Mac, control key on a PC and click hold and drag to smooth that out. I'm gonna give it a fill and stroke and no stroke. And this is where it ends up. You can make it look quite victory or quite gradient mesh like, okay, by changing this from solid to radio and then playing around with colors. So it kinda looks, doesn't look great now. But once you overlap a couple of these, it starts looking really cool. So I'm gonna go from my primary color to just faded version. I'm using radio for this case. You can drag this around. Okay. The next thing that might catch you out as you're going to start drawing unique shape now. If I start drawing it now, okay, because it looks like it's finished that other shape, right? But now what ended up having my second shape is actually smushed into my first vector, which can just makes it hard to animate. So what you need to remember or forgetting in undo like I did, is when you get to your finish point, click Done or hit Enter or hit Escape kinda commits that Victor. And then back to the PIE tool for pen tool and start drawing your next shape. Okay, Then can you see over here it becomes a second Victor. And again, I'm going to hold down my command slash Control key and fill it with a. Doesn't have to be Rachel. It can be linear. Click on this first color here and I'm gonna say you are that purpley color in color, even though the opacity is down, it still has a color. So I can see that dark color. But I want the opacity down. When not. And I'm going to draw a 3D shape. You weight them. And then you go, I didn't hit. Okay. So it ended up being smashed into that vector. Like I said, don't do good work, Dan. And done, and then do it again. You weight them. Okay. So what shapes do draw anything works. Sometimes they come out great and sometimes they come out horrible, but just play around with drawing shapes. I've got a background fill on mine as well, slightly darker color to fill it up. You can see we're starting to get those shapes going. It's hard to know where to begin. Let's just start doing it and see how bad it is. The other thing I'd like to do is add a bit of blur. So I'm gonna go fix, drop shadow to layer blur. Click on the sun. And I'm going to say click hold and drag on the Zhou up to something. Close that down. I'm going to copy it. Try and click that measure, Gary, and then hit Copy. And then select these other two shapes and hit paste. Alright, let's see what we can do. Make sure he's back in there. Maybe when you're dragging Undo hold down, Shift while you drag spacebar, sorry. It means it won't jump outside of the frame. I don't know, just that Making then we've got our first one, got some blues. Let's do what we did before. Okay, so we went, you are going to be a Component Command Option K, Control Alt key on a PC. Let's head to Variants. The variant ends up down the bottom, which is annoying. Just kinda guesses where it should go. What I'm going to do is I want it to go up here, but I don't want it to jump out of my components set. I want to say hold spacebar. So I start dragging hold space bar and then go over here. Excellent. You can see it. Grabbed the components set, hold down. Every shortcut is Command Option Shift, and that's Mac, it's Control Alt Shift R. Basically I'm just clicking that button there. And trying to impress you with my knowledge of shortcuts, will you need to know that one off by heart? No. But the ego, it resize the components set to just wrap this up in it. Alright, so what I wanna do is just this one. I'm just going to play with size and scale and just kinda like move it around. And because there's a bit of transparent anise and a bit of blurring and stuff. I'm going to see how good this is. So think scale and rotation And I'm hoping we might get something, we might get some magic. Doesn't look like magic, Dan. Alright, let's out our animation. So I'm going to switch to shifty who look at that. There's want me to be there. I copied and pasted this just to save time to put all the rounded corners on. And I thought I deleted everything, but it didn't delete the prototype that was in there. Go away. I want you to go to you. And I want you to go to after delay of zero milliseconds, which we'll jump back up to one millisecond. Okay, I want to get to do smart animate. I want it to ease in and out. You can play around with it using that want you want. And how long I want it to take. 5 s. I want to be like slow and moody. 5 s is 5,000 milliseconds. Okay? And when that one is done, when I go back here and urban does half of what you did, okay, remember is the smart animation ease in and out 5 s, but it doesn't remember this for some reason. After a delay of one milliseconds, the rest is okay. Now we get to use it. We can say switched the assets panel. It's practice out. Who remembers what switching to the Asset panel is? Shocker. Have I even mentioned? It's option two. Option one, option to on a Mac toggles between layers. Can you see layers and assets? It's Alt 1.2 on a PC, especially those to you in there. And you can see that's why there's animation is bigger than I need it because I get dumped with to do all sorts of frame sizes and it will fit. Now I can click on this and I'm probably going to start a flow here just so that it doesn't jump up to this one here. They've already got, I'm going to click on this. I'm gonna hit Play. The other thing is when you've got to flow, you can see I've got that Play button here, which is Andy. Now, wait for the magic. Or was it good? It's no stripe words. Then you get the idea. And I betcha. If you're doing it, yours will look way different. I practiced this before. I've done this 01:00 A.M. I looked really good. Looks really average. There you go. Sometimes it's just the shape you pick and the different gradients that you decide on the animation. Maybe it needs to go slower. Maybe I need a bit more transparency going on. The one thing actually that you'll notice is that there's a little jump in mine. Mine has a little jump. Let's see if we can find it after the 5 s. Wait for it. Now. Know about now, wait for it. Can you see that? Jump all we sought their editor. Can you jump that one again? Repeat it. And I work backwards when I was testing as I was like, I've never seen that happen before. I don't know if it's a me problem or it's a current version of Figma problem, or it's always been there. Swear it hasn't always been there. But basically if you remove the blues of these Animations, it goes away. So somebody did with the blur. I don't know what it is, but it's not on your version and it's gone away by the time this course is video. But do you go? Let's tidy this up because we talked about it being cleaner and at the moment, shift one, it is not cleaning out. We're just going to join animation over here. But what we can do is we can delete it, completely delete our MainComponent set. Because we've got it in here. We can say, I'm gonna go back to Shift E vector design view. I'm gonna go inside of here and I'm going to say main component, restore the main component and it comes back, shift one. There you go. Or you can keep it tidy by just doing that. Or you can cut it and put it on its own page. So we're gonna go New page. I'm going to call this one animation. Paste it on here. And I'm gonna put all my animations on this page. And you go back to page one using our sweet shortcut of page up, page down. I know some keyboards don't have up and down a, a patient, others. So if you've got a MacBook Pro that I sometimes work from, when I haven't got a keyboard plugged into, I have to hold down some function key to get that to work. Have a look at your laptop, see if there is a page up, page down, whether that's actually useful. If you have to hold down a bunch of keys, but if you do it as great way of going between your pages. So back to page one and this one here, I'm going to Command Option Enter or Control Alt Enter on a PC. And look at my sweet animation. And I'm not sure where we're looking at again, but look how tiny it is. Yeah, that's all by himself. And over here, there's my lovely animation. Alright, that is it. I think what we should do now is go and name all my vectors anymore, my variance, I promise scouts, honor, that's what I'm just about to do or it's late enough the day and I'm losing my voice. Can you hear that from talking into the microphone or day? And yeah, we'll leave it. There. You go. Name you'll variance. I'll go do mine later on. Alright, that is it. I will see you in the next video. 39. How to give feedback on a UX project - The Critique Sandwich: Hi everyone. Hey, wanted to get out of the computer and talk to you in-person about giving feedback on UX design projects. So why are we talking about feedback on projects is because in the next video, I'm not sure why it's behind me, but the next video in this series here is a class project where we're actually going to submit it and there's, you'll be looking for feedback. And the problem with the where I met professionally now is that like I think we cross over half 1 million students not was actually quite awhile ago now. So even if I wanted to do this full-time, it only give feedback and never make courses again. I still couldn't keep up with the with everybody's projects. And you want feedback. I want you to give feedback. So the deal is, is that you're going, when you submit one project, you have to give feedback to other projects of people doing a similar sort of thing or anything. Okay, so let's get rid the deal. Why do we do it? There's two reasons. You want feedback. You want critical feedback. You want to see if you're doing it right. It's nice to get that interaction, okay, it's important for you to grow as a designer. And probably more importantly is you giving feedback to other people will help you more than you know. And being able to articulate, articulate yourself in terms of what's, what you do like, what you don't like to other people really helps you understand what you like, what you don't like. And it allows you to really get good at selling in your ideas when you are presenting UX design projects. So it's win-win, you submit one, which we the next project and you comment on another two, we pay it forward, okay, because it's good for all we're doing here. Bring your laptop. It's good for you to go to the people that you're commenting on. It's all sorts of whence. The problem is, is not everyone knows how to give feedback. Some of you will be graded it. So go do that. I'll give you my tips to do it. Yeah, let's do that at first up, let's talk about the things you don't do that don't do these well-done thumbs up emoji. That's not useful for anybody. So we're going to add a little bit more value doesn't have to be paragraphs. But I'll give you a good structure in a second on how to do something meaningful to the person you're doing it. And so that you can actually develop your articulation of reviewing. Not a word, but let me go. First thing is, is that if you see something you like, I don't even know what to say because I'm not even sure what I'm critiquing. If that is the case, you're not sure, instead of skipping it, ask a question, that's a great way for to get the dialogue started, which is awesome. But also it helps the person that is posting the project to be a bit more to know that people are checking it so that they're gonna be a bit more articulate about how they are delivering it, okay, explaining it, maybe bit of screenshots, maybe an a and B. So ask a question if you're unsure and ask a specific question, hey, what's going on over here? What does this for? Not just question-mark, what is this? Be a little bit more specific to get a dialogue started. So if you're unsure, ask a question about the project, okay, So let's say that we do know what they're trying to do. We've got an opinion on it. We're not sure what it say. Bringing The Critique Sandwich. What is the Critique Sandwich? So it is, it's a methodology that I find. It works for me. So you take it, use the bits that you like, throw away the bits you don't. If you're very experienced, you probably have a way of doing this, go do that for, but there's gonna be lots of people who had actually just doing the Essentials course, moving into the Figma Advanced, even though they're quite new to the industry, because they want to get this skills up. So that's probably you. To give a good critique. I find is the sandwiches kinda made up of four parts, okay, it's two bits of bread and to meaty bits in the middle, or Vg bits, okay, because I'm vegetarian, but they're bred bits are the positivity. In the middle bit is the real meat of it. It's not so much negativity, it's more the constructive part. So I find Leading With the things that you do like about it, helps it and lets the person received the bits that you feel like it could be done better or your questions about leading with the things that you'd like. And ending. The ending was easy. Well done, keep going. So that's the sandwich, the bits in the middle. Then we take a pause, gather my thoughts right there. Let's talk about the meaty part of the sandwich, the good bits. And there are two parts to it. There is The Critique and our solution. Let's talk about there's a Critique first and most important part probably of this whole thing. It is what I find giving. I found criticism really hard to give under Dan got to please everybody guy. So I found it really hard to give criticism until I worked out that if I change the positioning of instead of it being me versus you, okay. I don't think the buttons I think the buttons are too big. Why don't let the colors of those buttons. That's my opinion versus your opinion? Not the way I work. I find it tricky. And the other person receiving it is it's a it's a slight on them and their decision-making. If we move it across 1.2 at the persona and the project, okay, I find works better for everybody. Okay, So let's say that we're talking about the buttons, the size of the buttons. So if I say something more like the considering the persona, a tech savvy persona would find these buttons too big. I don't know. Does it feel better than? I don't think I think the buttons are too big and the persona will find these buttons too big. Or traditionally, this type of persona or this type of task has this size buttons. I feel like shifting it just a little bit over. I can get really, and then I can go and find research and have stuff to back it out rather than me versus you. So that's it. Look at the task. It might be the task, might be the persona, whatever they're trying to do. Let me think of another good task example. How about this bad way? There were too many steps in this cancellation process, me versus you. Whereas if I use the persona and the task, I say that I think the audience will find this many steps in the cancellation process confusing, okay. Does it feel, It feels nice and data me, maybe not to you, but using the person and then finding the task problematic then leads us into what we can do next. Whereas if I say, I don't like you, the way you Design is a tricky way. Anyway. Mixed it. All right, So after The Critique is the, you need to offer a solution and don't be too prescriptive. Don't be like making a logo bigger, or make the buttons smaller, or make the buttons 20 pixels or 25 pixels or 40 pixels. There'll be very specific. Be more direction pointing like hey, have you, can you express moral buttons? And hey, have you had a look at this design system? They use these sizes, they're rendered a similar audience. Go check that out. So allowing people a bit of creative freedom, okay? And yeah, don't be too prescriptive, but offer something some direction. Okay. Have you tried is another good one? Can we explore is language that allows us both mean you, The Critique, and I don't know what you designer anyway, to go off together to explore stuff rather than Masked butting heads. They go Critique solution, the middle of the Sandwich. Alright, that is it. That is The Critique Sandwich. Now, one last thing is I wanted to give you permission to be able to critique anybody's work. You might be like Own, don't want to, they look better than me. Okay. In this space and is Bring Your Laptop world. It's okay because the person receiving the Critique, even if they're really good and you've only been doing it for three days. They know. And you know, and I know that we're practicing our critiques. And your first one is, I'm going to be very good. You're allowed to be not very good at that. And then as you get through the course, more and more, you'll get better at it. You'll become better UX designer, better able to communicate your ideas. So go off and do that. Alright, that is it. Let's get onto the class project and we're Dan clean the office up. He's letting things go like I go to the beginning and I have to tidy up anymore. Let that blurry thing at the background there, you see it is our 3D printing box. I'm doing some 3D printing with some stinky plastics and it needs a, what he call it housing container anyway. So it's all in bits. Everything's flying around, but creativity is everywhere. It's also missing. Until next video 40. Class project 04 - Background Animation: Alright, class project time. For this video here we'll cover the class projects if you're not doing them, skip to the end of this video, I've got like I had a bunch of updates come through Figma while I was recording this video. So I kinda show you at the end how I keep up-to-date way to go, just jump to the end. But if you are doing the class projects, watch along. It'll be there at the end waiting for you. Basically, I want you to make animated background Graphic, okay, using the techniques from the last few videos. So let's have a look at the must-haves. So Gradient Background, use your own brand colors. Experiment with the blur and the different gradients, but it's up to you whether you use them. Just have a play with them. You might end up with something more of victory flat colors. That's totally up to you. Want to make sure though that you're using the and when you do you animation, it's in that components set rather than just frames that are connected. By that. I mean, remember, we kinda had to separate gradient mesh on its own page. We had this gradient component, K and I had variants inside of this, okay, and we animated between these rather than doing them. On this page here. We've dumped out component inside of here. That's what I'd like to see. Nice tidy page. At a welcome texts and two buttons. The buttons need to be ordered layouts so they can be all squishy and adjust for the Text edit inside of them. And what do you mean to deliver? I want to see a video of it. I know hopefully we can all do videos. Remember Mac does it, add PC has a bit of software to record your screen if you've tried and really just can't make that work. A couple of screenshots of the different Animations kinda showing it and maybe showing this kind of all connected using this view. Okay, be able to prove that you did it. We'd like to see it. I'm going to see everybody's animation, okay, So upload it to the assignments last project page on this website. And then different from the other ones, I'd like to share what you've made on social media, this stuff up until now as mainly just to get us everybody up to speed and keeping us along with the course, practice some of the techniques. But this one, he's quite visual, so I'd love to see it on social media. Here's my various social media platforms. So choose your poison and I'd love you to share it with me, tag me in it, and use the hashtag Figma Advanced, because it's a way that I can search and just see what people are doing for this particular course. But I'm looking for, yeah, when I'm just looking for stuff that is for different courses, I'm starting to use these hashtags, so use that as well. And I love you to share how it's going. Problems you ran into things you overcome, things you still can't do. Because remember, and people are gonna be commenting on your work. So make sure you add a little explanation. Things you were trying to achieve May problems you have because there's gonna be pupal around to help you out. So remember, every post you put up comment on to other people's work. And this one is going to be, Let's have a look. There's gonna be things like the animation. Yeah, they might be some things you want to comment on that. But in terms of that, might be the type, the kinds of buttons that spacing. So if you can use your new found Sandwich, your Critique Sandwich, breaking news. Hey, I wanted to add this to the end just because I was working on the next video and I'm just making it started open up Figma as you have 42 new updates, I was like, it is good, like we love the product getting updated, which makes Figma awesome. But it also is of course create. It makes it tricky because they're always updating it. Some of them more legacy products in the Design industry don't get big updates. So anyway, that's my problem. Which is interesting for you, is that after this course and you want to keep up-to-date with what's new in Figma, okay boards, you just want to be awesome at Figma. There's kinda two places that I go to when I'm looking for new updates for Figma. It's this one here. Figma.com slash release hyphen notes and this one here, what's new? What's new is the spicy page of like look, it's got good demos but it doesn't cover everything, just the hard-hitting big stuff. In the release notes. It's a little bit more basic and a nice little list and often goes through things like who I did not know that. I don't know if winds up. I'm like, Oh, that's sad. Nugget. They don't think it's important, but I do. Okay, and I put it into something like that, Advanced Course or Essentials course. So these are the two places that I go to for updates. And then often what you can do is like, I'll keep updating the course. But also if there's something brand, brand new and find the term, copy and paste it and try and find some more information. Often, Figma will have the information themselves. So what's new? And release notes? These URLs may change, okay? The terms are generally the same. There'll be a release notes somewhere and what's new somewhere, then you go. That's how I step to date and how you can do, alright, enjoy the class project. Make a cool background, and I'll see you in the next video. 41. Houdini Text: How to make a text mask animation Figma?: Hey everyone. We're going to make this, how cool is that? Okay. We're going to do houdini text. It's going to appear out of nowhere. We're going to, we know masking already what we're really doing is a, it's a cool effect but also it allows us to do timing. That is two different animations. See the background gradient moving this animation happening at different timing on our page. Here it is again, just nice and clean. There's my animation, my background, I don't have a zillion. So look, different frames all connected up because I'm using variance and because I'm using separate variance, it means they don't all have to happen at the same time, whereas before, remember this. Okay, it's fun. But the animation is all timed at the same pace because they're all heading to the next frame. Whereas now, because they're separate variance, they can have their own pacing and own timing and own easing. I think I've explained it over explained it. I have. Let's just do it. All right. Let's jump in. Okay. First thing is we need two separate text boxes. So I've gone for a Viv lid Techno, come up with your own catchy welcome screen. It might be this is Country Welcome to Classic Rock. Just make sure it's two separate text boxes because we want to animate them separately. Okay? Do whatever you want with fonts, okay? And font weights. We just need two separate boxes. Next thing is we need rectangles that we're going to use as masks. So this is one of the few times I'm going to use the rectangle tool, which is the Arche instead of the frame tool because it doesn't have to have all the special powers, it just needs to be a box over the top. Cool shortcut here is Shift. Okay? Shift O is kind of handy on your keyboard and to show outline mode. Okay. So you can actually see 'cause we covered it up. It's hard to see. Did we get it right? Yeah, it's covered it up. And what I might do is with my V tool for the move, I might get it so it lines up relatively close to the bottom to make sure it covers it all. I'm going to be the rectangle tool again and draw another one and just get it to snap to the bottom. There we go, shift to come back. The other thing that needs to happen is that the text needs to be on top of the rectangle. For the master work, I'm going to move it to the back and I'm going to use my shortcut. Ok. Down next to your key is the open and closed square brackets. If I hit the open, it goes all the way to the back of the parent frame, which is called Welcome Alt one. And unfortunately, it's gone behind my gradient mesh. Can you see it's disappeared behind the cool background to make that tool a little bit easier, have a look over here. Watch this. If I use open, close open clothes, can you see rectangle 18 goes all the way to the top, all the way to the bottom. Which is often what I want to do, but if you want to come up in little steps, okay, hold the command key down on a control key down on a PC. And watch this. It'll jump up amongst his friends. Okay, Can you see that? You can get it just behind the text. Same with you hold command or control on a PC and use those square brackets to get it to go where you need it to go. All right, let's make the masks now. So what I tend to do is I can lock the background. Okay. I'm going to double click to grab the gradient mesh, which I ended up diving too far into. And I can lock it using my sweet shortcut that nobody remembers. Come on shift out. That means I can drag across and only get just these two bits. Okay? What I tend to do though is I leave the thing unlocked. Okay? And what I do is I get all of you. So I've grabbed both the rectangle and the text and the background and I just hold shift and click. I do that all the way through the course, so I won't explain that anymore, but that's what I do. You guys shift. Click the background to deselect it, and I've got everything underneath. Let's make a mask. Boom. Okay, do the same thing for this one. Boom. There is a short cut or command option M. Alright, I'm back. You didn't know I went, but I stopped the recording. 'cause if you hit command option M, it will minimize everything. Bl okay. Don't hit that key. That one is actually command control M. It's a shortcut. I never use hover above it. It might be something you use enough to remember. I don't. And one thing with me is, can you see it's trimmed off the bottom of my text. So I'm going to grab my rectangle and just make it a bit deeper. It doesn't really matter how big it is, as long as it's covering the bottom there. As long as it's showing all my text. Because it's going to jump up from the bottom. There we go, Shift two. All right, so I've got my masks hasn't really done a whole lot, right? They've applied plus, plus, plus. But the text inside this mask group can now up disappear. That's what we want. I need three variants. I'm going to animate between them. Okay, this is where we at the same point for the background gradient member. We made it a component set with a variance and then animated between those with it all selected. I'm going to go command option control option K on a PC to make it a component. Let's command control on a PC to give it a name. Welcome page animation. What we're going to do is have one variant and another variant. I could do it on this page here what I might do is just grab the whole component set go to cut go page up and paste it on this page. Give it its own spot shift to. What I want to do is the first one, this first variant called default. Let's rename this one. Let's call this one frame one, shift tab goes up one, so we can rename this one as well. Command, It's going to be frame to shift tab. That is a random shortcut that I used a lot for renaming. Okay, command control R on a PC. Let's call this frame three just so it makes it clearer. Weedly, I need them to be in order because it makes more sense. All right, it's frame one. I'm not going to see anything. So what I'm going to do is I'm going to double click until I get the text. And I'm going to hold shift and drag it down. Or use my arrow keys on my keyboard just to tap it down so I can't see it. Okay, The techno in this one here is going to be the same. I'm going to drag it down hold. If it jumps out of its little box, how do we stop it getting out of its little box? Okay, we are going to say drag down. Behold space bar. Don't jump out space part to the rescue. All right everyone. Hey, I wanted to jump in here. A few people bumped into a problem in the course, so I'm going to update it. The main problem was, well, what people having is they were like dragging this down and it wasn't disappearing. Okay, what you've got to be really clear of and what I wasn't clear of in the video is see the mask group. This is the mask group. There's a rectangle, there's a bit of text if you grab the whole group. Okay, which sometimes it looks like you've got the text and if I drag it down, it's not working. It's because I've actually got the text plus the group, plus the rectangle. So you've got to dive in. And what I did in the videos, I just quickly said double click to go inside the text and then drag it down. Okay. An easier way to do that sometimes is when you click on it. Okay. You can see all these things. Just find the actual word in the layers panel. You might have to twilt things down. You might have to go okay and find it and say, okay, there's the techno thing and even then you might not drag it. You could just use your down arrow on your keyboard, okay? By techno, okay, you can hold shift and hit down and it will disappear down. You only need it to be just off the screen. Okay. That seems to be the biggest culprit of having problems is that dragging it down is not working. Okay. It's just because you're not selecting on specifically the text. All right. Carry on. Okay. Nothing. Which one do I want to appear first but not you. You're going to go down. Don't do that. Make sure you've got the text selected inside the frame hold space bar so it doesn't jump out. Nothing that appears then disappears. Do you get the idea? Now we need to link them up. Shift we say you go this we say on delay of. Let's just leave it as is. Got a frame two to smart animate. Let's ease in and out and back. Let's do that same thing for this one. You go there, but for some reason it doesn't remember. It needs to go to after delay. Again, everything else is good. All right, let's use page down. Okay. We've got nothing here. Now let's go to my assets option two. And I want to drag this out. One of my problems is the first frame is invisible, which makes it not a very good component over here. I can't figure out a way at the moment to update the thumbnail here. You can do the thumbnail for the whole project, but not for individual components. Let me know if you've got to work around or if that's an update that's happened. Let me know in the comments. Okay, so we've got our invisible box. Let's test it. Does it work? I don't know. Okay, click on it. Command option Enter. Control option Enter. He's a little bit fast. Hit our key on your keyboard to reset it. Okay, I need some better timing, but let's save that for the next video. I'll show you some of the new easing options in Figma. There's some cool ones, but there you go. Let's say you mask text and how we go from the dreaded frame by frame. Everything has to be the same to now. We've got something that the background animation is going very slowly and our text animation is happen super fast. They don't all have to do the same thing because we are professional Figma users. All right, I'll see in the next video. 42. How to use the Spring Animations in Figma: Hi everyone. In this video we're going to look at these new presets or newish presets though the Spring presets will have a look at all four of these would have custom in the next one. I'm, what I'm gonna do is I'm gonna make you build something to demo it all, which takes the rest of this video. But if you just want to see what they do, they do this. That's have a look at the thing we built. Let's go back to the beginning. We're keeping an eye down the bottom here. Look, the general spring. It's gentle, funnily enough quick. It's quick. Bouncy is very well-named bouncy and slow is slow. If that's all you wanted to know, that's what they do, you can move on. But if you want to build this overlay to practice overlays and to practice a few of our shortcuts. Follow me. Let's build this contraption. To get started. I've skipped a couple of steps. I've made a new page. Okay, accord, it's spring Animation tests, not Missy up our lovely page it will working on just keep everything separate. I've edited an iPhone 14 frame, make any size you like, and that is it going to switch to my assets. So option to, toggle across to this option 12 layers assets. Okay, I'm gonna find that nav we made earlier. You can do with anything, okay? The one thing though is we're going to set absolute pops up down the bottom like you saw, and that's called an overlay. We've done overlay in Essentials, bear, we get to do it again here. The one thing for overlay to work is that this conscious be a lonely old Instance. So I'm going to switch back to layers. Who remembers option one, we just let that one. Okay, so there's my component. Overlay won't work unless there's a frame. So I'm going to right-click it and say frame selection. Give my frame and name. Nav pop up. Now let's get the ball rolling. So where does it need to be? It can be anywhere you like. I'm going to put mine at the top. It just can't be on the page has to come in from somewhere else. So this here, I would like to add an animation. So shifting, dragging it anywhere, you kinda wanna do that. You can do that, I guess, and change it afterwards. Sometimes though, you just want to have this frame selected and go. Actually, let's add an interaction manually to say when it's clicked. After a delay of hello 1 s, I would like it to open an overlay of Nav pop. That's where it won't if it's not frame, it won't appear there to there it is. My Nav Popup. It's gonna be down the bottom, is going to be no instant, no smile Animate. It's gonna be moving. It's going to move in from the bottom. And these are the kind of old, more traditional things. Now, these ones here, the Spring, they call them Spring, but that sounds like a gentle when he started the beginning. Chinchillas. Chinchillas. There's a little bit of springiness in there, but a gentle spring. It's alright, It's given to test you, my friend, let's go Command Option Enter, Control Alt into on a PC, I'm going to stop saying that. You punch me in the face. No more previewed, had a preview. There. It is popped up down the bottom and hit Refresh, and it's going to go back to that first frame we've got. So let's fix that. Let's say that you have a flows starting here. Okay, so we're going to start the flow. And it means it won't try and jump back to the frame because we're in a flow stuck in here. Now if we hit our, look how gentle the navigation is. 0 is lovely. Can it comes up and then comes back down a bit, a little bit of spring. So we're going to jump back to the other tab. Remember, depending if you are when the browser or if you're in the desktop version like me, hold Command on a Mac, Control on PC, and 123 depending on how many tabs you've got open. I'm gonna go come on to for mine. If you are finding that shortcut, hard to remember, this is weird. I like to command Figma change pages. I don't know if it's already did anyway. I like to control pages. Can you jump across to that one? And then option is this one here, within here it's optional or alternative on a PC or whatever there's going to work for you. 12 is layers in assets, that's Option or Alt, and Command or Control is 2.3. Jump between the two. Now, that wasn't helpful, Dan, alright, what we're doing, we're going to duplicate this load so we can check them all and practice making some different animations and learning shortcuts. And use my type tool. And I'm going to type in gentle. Spell it right? And I'm going to switch back to design mode. Schiff shifty doesn't work when you're in the type to hit Escape, then shifty am going to make sure it's centered and, and big in the middle. Because I'm gonna duplicate it and that's want to see all the different ones when I'm guessing. So I'm going to copy and paste it. Command D will duplicate it. And how many you want? I can't remember. For 54. Yeah, four. Shift one. See them all. This one's going to be quick. This one is going to be bouncy. And this one, It's gonna be slow. Cool, because we copied and pasted it from that first one. If I go to Shift E, Now, you'll see that these all have the same connections made. All we need to do is go you after a delay, not gentle, but quick. You after a delay. Gentle penalty. You after delay. Slow. What do custom Spring in the next video? Because what we wanna do now is let's start our flow. Gentle. Risk reset it can tool. Let's make sure they're connected. Otherwise nothing happens. Okay, so let's go back to this one and say, this one. Goes to their onClick, go to, they're going to switch it to instant so that I can do the same for all of these. You clicked, go there. You, when you are click to go there. Alright, now let's test our flow. For reset pops up nicely looking down the bottom here and use my arrow key. Quick. It's quick. Bouncy. Bouncy, slow. Slow. Alright. You showed us at the beginning and then you made us make this odds good to learn how overlays work. And we've got to flick some of their shortcuts. Many things. A nice cool. So those are the presets. Let's make some custom stuff and learn how that works in the next video, willing make us take ages to build something, to test it all out. He will. It's phon you're enjoying it. Yeah. How about regardless orange, the next video? 43. Spring Animation: How to make custom Spring Animation in Figma: Hi everyone. In this video we're going to look at this custom Spring settings. We're going to look at the difference between stiffness, dampening masks. There's a relationship between them all plus the time. What the heck is this will cover it all in the video. But if you want the short version, the short version is this spring is how springy something is basically how back and forward it's going to go before it stops. By back-and-forth. I mean, this like the jiggling back-and-forth at a stiffer spring and the thing gets more bouncy. Dampening, on the other hand, is basically how much blue or resistance there is to that spring, give it none, and just goes on forever. Give it loads. Basically goes nowhere mass. How heavy something is that? It's very heavy. It feels every, at least. Give it even more maths. This thing is super heavy and it's fighting against the Spring. It's gonna take forever to stop. There we go. No mess things a lot as a feather on a super springy spring with no dampening. Alright, that's the short version. Hang around and we'll dive in and we'll set up this little button thing because this is kinda handy to know how to make. Alright, let's do it. Okay, to get started, I am going to just use the page that we're using for our test Spring Animations. I've made a frame. I've drawn something that looks like a button. It is just a frame. Not gonna make components for the moment because I don't want to miss up my assets panel because this is just a demo. So what I wanna do is set up the first one. Let's get something from my assets panel option to halt to on a PC. I'm going to use the heart icon. We can use that same Overlay trick to pull it in. Okay, so it needs to be a frame Command Option G or Control Alt G on a PC Command R to rename it, Let's call this one hot spot. What I'm gonna do now Shift E or the shortcuts Dan, you're overwhelming people. You're allowed to just click on prototype. So why don't wanna do is I want this to go to that, I'd like it to go on click as good. You might note that you might be on tap. On tap. Mind should be on tap as well. And basically it tries to guess whether you're on a mobile device or desktop, and it changes the language, which confuses everyone. Anyway, onclick are on tap, it doesn't matter. And then I would like it to go to open it overlay, maybe your frame has to be off the page. I'm gonna go to heart. I'll just get it to go into the center. I'm going to get it to close when I click anywhere around the button just to stop the animation so I can restart it. Let's get it to move in from the right is good for me. Let's actually have the gentle preset as a good comparison. Now what I wanna do is I want another one of these. I'm holding my Option key down on a Mac, alt key on a PC, and shift to drag it down to give me another one. And what I want for this one is I want it to be gentle. Let's go to custom Spring and let the first one B. Let's play around with stiffness, basically is how many bounces it's going to do. So look at the line here for gender just kind of goes. And this line here is where it's going from right to left. And it's only gonna go a little bit past where it needs to go and come back a little bit, but one tiny bit because it's gentle. But if I grabbed the stiffness and say Europe 500, let's say it's gonna go bringing it all the way past it. You can kinda see it up here. Look, see they're bouncing positive. So what we'll do is actually let's do the first demo with a stiffness of what was the default 100, right? Yeah, Let's do 500. Let's duplicate this one this way and do the exact same thing. And change this one to K from stiffness 100. Let's go to 2000 crazy amount. Now, let's demo it. I'm not telling you the visual gut for preview anymore. Okay. We're going to make sure to go to the right one. It's use this one. Okay? And what I want is the first one, I'm gonna go to be fit to screen on this first one. That's the kind of gentle preset, but R1, when we crank up the stiffness to what was it 500. Look, how many times it bounces back and forth. How can I strongly spring is? Let's go up to, I can't remember how much it was. But can you see lower the higher it gets, the more bounces it has to do. Now the interesting thing with stiffness is that time plays a big factor. So I'm gonna go command to control to on a PC to change the tabs. And I'm gonna say, I'm going to make a third one. I'm going to be annoyed that I didn't make them big enough to have a third one. This one here, I'm gonna duplicate and I'm not going to change anything except for, see down here, we're going to look at what happens when we do change the time. It's going to miss with all of this, let's just do it first. So it's 10151. You remember that? If I change it to 2 s or 2000 milliseconds, you're like, why does this will change and this way just keep confusing. I've undone that. So basically we're saying is I'm gonna go 12345, maybe a little sixth one at 1006 springs back and forth. So it has to fit there in 0.8 s. Cool. But if I change the time, it wants to do those same six kinda back and forths. But it has the daughter of a lot more time So the stiffness of the Spring has the lower. So it kinda does the same six of them. They're all in their stool. 123456. Okay. But it has to take longer. So it says the Spring at that stiff, if it has to take that long to do six of them. Am I helping? Alright, let's preview it. Let's go. We're comparing this one, which is like six back foot springs happening quite quickly. This one's still six back-and-forth springs, but it has to take a long, long time because we told it to the Spring doesn't look very stiff. Does it go clear as mud then let's do some other ones and see what we can get a better, duplicate the gentle again. And I'm going to change the color for the jump, cut me go. And instead it's gonna be a good color, but a color change. We'll look at dampening. So what is dampening, if you know, shock absorbers kinda slows down the Spring way I describe it in the way it occupying my head is kinda like adding a bunch of glue or molasses to the animation to kinda slow it down and stop being so free moving. Alright, so let's do it. Let's 50. Click on this one. You, everything is back to being gentle. Okay, Let's switch it a custom Spring. So there's the defaults dampening at one. This is damped. Damping being at. Look at this one. Let's go dampening at 50. You can see it really changes the graph there, but let's have a look at the animation. So you go away and click on this one. Can you see no dampening, no glue, no molasses, no shock absorber ring of the springs. Springs is left to go crazy. So it changes the stiffness. Don't think stiffness thinks how many times it bounces back and forth because it's left to a lot of no dampening. It just goes forever. And this one here, the stiffness again, it just gets no bounds. So let's have a quick look at those two. So this one here, because we changed the dampening, stored the same stiffness, but ended up cranking up the time a loads of time to get lots of back-and-forth and look at this one. You can see same stiffness, but it changed the time on us. It's kinda backwards in terms of looking at the numbers, but it makes sense when you're actually doing it. If you wanted to have more dampening, okay, it's going to slow it down so it doesn't need much time to go back-and-forth. Spring, how many times I want us go back-and-forth dampening, gluey molasses, honey stuff to dampen down the Spring. Let me duplicate and change the color of this one. Let's look a mass. Alright, I've gone for the 90s hyperscaler sweaters. Did anybody get that? If you're born in the '80s, you might know anyway. So why don't wanna do is look at this one is gentle. So let's change it from gentle and go to custom Spring mass, how heavy something is. So these are the defaults. This crank up the mass to tin, same stiffness, same dampening, but the time got really long. Let's do one more and do the mass. How heavy something is, up to 500. Look at that. It's going to take, come on math Stan, 80 s a minute and 20 s. Good work, Dan. Let's preview them. And that guy, you come back in, look, he's super-duper heavy. Well, this one extremely heavy. Ready, extremely heavy. But he has to do all his back and forths. Because we said the stiffness there. How many times back-and-forth that has to do. So. It's going to be there for awhile. You wanna watch a movie, you don't know. Okay, Let's do one more. And let's do that exact same thing. So let's has a mess low, have the dampening low and the time, or the stiffness up to 200. Ok. And let's make it a long time. I'm not sure how long this can go. Is that maxed out? What's at 2 s? Go minute 20, sediment at 21 goes up to 10,000. So 10 s. So let's have a go and go. Oh, there's a beard or on your keyboard, just to reset it. Here we go. He go, I can't really what we did. We didn't the dampening down and we do in the mess down and we turn the Spring rate up. Okay. And you can still see it still jiggling in there. It takes forever. Chips got no way. You can feel it right. Now you can use these dragging slider things here. So let's look at this. We've been using just the spot here. Okay, these things and typing them in. Contract these, you can drag this one, but you can actually drag this. So let's go back to gentle. Then go back to custom Spring, scroll down. And what you can do as soon as bowl here. I don't really understand it. You can drag it around and it does stiffness and damping. You might be an animator and be like this, this linear graph thing that we use all the time. I find it quite tricky to use, but you can drag it. Okay. So dampening is up and down and stiffness is left and right. You can drag this in part as well. Okay? No fixed both of them because this kinda stays under this curve here. Okay? By dragging the Zane one, I mean you're dragging the time. So it's kinda changing these to fit the parameters within. There you go. I don't find that you're really useful. This one's gonna be good though. You ready? Preview time, go light, come back. All that is good. Maybe just drag it around. There'll be some number, Dan. Alright, I hope that was helpful. Learning the Spring settings in them, ease in and out. It's great, nice and subtle. But you can really communicate animation through some of these Spring settings and you can be super custom with them now. Thanks, Figma is good. A little goodness. Alright, I'll see you in the next video. Oh, one last thing before we go. They when the update that I had just a minute ago. Okay. Or earlier today when reset my why was he zooming in and out? Remember I hold command to use my scroll wheel on a Mac. It's Control on a PC to zoom in and out. These are all the time, but it was working backwards. I'm like man is my brains switched actually that update when and when to preferences in, inverted it. So that tick was, I normally have it on to invert it, but by default it's off. So when the preference is updated, they switched it on me and go. That happens a little FYI for you at the end. Alright, now into the next video 44. Why is interaction on tap on click grayed out of missing in Figma?: Hi everyone, You're stuck. I know you are because you'll hear this video is to show you why this thing is grayed out. Why is on click or on tap grayed out? Why does that change? Sometimes there's onclick, sometimes it's on tap. The first one, why is grayed out is because you can't have one thing with it's a framework component. You can have it doing two things. If I click on mine, actually it's get rid of that. If I want to add on tap to go to this and it says it can't. It's because there's already something going on. It's already got an onclick. Can't do too, because in a way to go, let's delete the one I've got. You can either delete this noodle here or this wire, or with the things selected. You can go over here and a prototype and you can say Interactions click, that's just minus it. So it's nice and clean. Now we can make one. And now it'll go to onclick. Now the question is why is it sometimes on click and sometimes on tap it because Figma, Figma is trying to be fancy. They do the exact same thing. But when you are designing on a frame that is clearly a mobile frame, it says on tap because we do taps, not clicks. We tapped with our finger on a computer, we do an onclick with a mouse. It doesn't change what we're doing. So if you're following somebody Cithaeron, it's like use on tap and you can't see it, just use onclick Wheatley, This frame that I've got used to be well, it was for an iPhone 14, but somewhere along the line, it lost that. So it's switched to OnClick. I can change it. I can say actually show prototype settings. And I'm going to say, what device you're using, iPhone 14 plus whatever you're using. Now when I go back there, it should say on tap, Same, same. When you go the dreaded, grayed out on tap, on click fixed. Hopefully, if that doesn't fix it. Let me know in the comments if you do fix it or if there's another problem. I bumped into this all the time and that's how I fix it. Alright, and so the next video 45. Class project 05 - Houdini Text Animation Prototyping - Level 1: Hi everyone, class project time. I want you to do this animation and share it. Okay, So that kind of houdini effect, you Houdini effect I made up. So nobody else calls it the houdini of vectors in case yeah. Swag around the office saying just did the houdini Text Effect. They're not gonna know what you talking about. I kinda made that up. Create the Text Animation on our welcome screen. Okay, use the techniques we've used. We've learned in the last few videos. I want you to experiment with the custom Spring Animation and find something that works for you. Record a video and share the link for the video in the assignment section. Love to see it on social media as well. This is optional, but if you do use the hashtag Figma Advanced, so I can find it. And if you can, and you want to a link back to the course that you're doing just so that other people in social media, you're like, Wow, I wanna do that too. I want to come join Dan's course. That's a great cross-sell for me to get more students involved, I'd appreciate it. You don't have to. When you are sharing, choose your poison, upload them to all. Make sure you tag me when you do upload it. And don't forget, remember the stern talking to I gave you in the early video where comment on to other people's work. When you upload your one, paying it forward makes the world go round. Alright, so enjoy experimenting with your spring. You're probably going to have to re-watch the video because you like it's broken by kinda do the mask. Why is it not animating our, I've gotta do the variance. It's all part of the fund of learning something new is the actual doing of it to find all those holes and bugs if you do have any trouble or maybe I haven't explained something right in the video. Let us know in the comments and how you fixed it. Alright, Go forth, make an animation. I'll see you in the next video. 46. Create & remove bulk multiple noodles wires at once in Figma: Hi everyone, wiring up. All of these prototypes can take ages. So this video is some tips and tricks of doing bulk addition of these noodles or wires or terminals, whatever you want to call them W lines. And also, I'll show you how to Bulk remove them all just to tidy up a document, super handy. Alright, so I just duplicated one of our frames and rename them home Search account wish-list. And the first tip is instead of going through each one and saying when navigation is clicked, go back to here, okay, and go, each individual one gets tiring. What you can do is undoing that is just select them all, okay. And grab any one of them and go you, and you see they all go at the same time. You can get a little fancier. I'm going to leave that. Also. If you can't see the y's, just make sure you're in prototype mode. And the other one is, let's say we wanted to do it down in here, but we can't really easily click all these because they're inside of our instance, okay, but I want to relink all of these magnifying glasses. So what we can do is we can select it. I'm going to use my quick actions shortcut. Who remembers what that is? Command forward slash or Control forge less on a PC. And I just type in select because I can never remember what the shortcut is. There's actually no shortcut. Is there. I want the one that says select all with same instance. You might be able to go through with the same effect or the same fill the same properties. My case, because it's an instance. I want the same instances. Can you see it grabs all of them. Shift one, scrapped even the ones down here. And now I'm in Prototyping. I didn't say they all go back to homepage. Look at that. Actually, I want it to go to the I can undo. And I'm going to say actually go to the search page. So that's how to do some bulk connections. When other little thing, while I'm here, this one, shift two is can you see you can actually drag matter any side now, you still need drag them out of the right, but you can, doesn't really help much, but you might have noticed that already. Anyway. You can drag out at any side. Let's talk about Bulk removing. This one's not too bad, Okay, shift one is there's a few wires going everywhere. In the Essentials class. We did this and it's not even that missing either. I bet you you've probably worked on documents that has loads more to get rid of them all. You might download somebody else's file or just like want to start again, happens to me when I've got things from the community. I want to use them, but just wanted to get rid of all the wires. All you need to do is have nothing selected, just right-click in the background. And there's this cool thing. It says removal Interactions. So I've done next. You can do it just for individual frames as well. I say you just want this frame to be disconnected. All the things go from this. Select it, right-click anywhere and just say remove and directions and I'll do it just for that one. Okay. Well, the rest of the cilia. Thank you. And that's it. Let me know in the comments what you call them. I think Figma overfished them is noodles. Well, they used to, I call them wires because it kinda started UX in Adobe XD and they call it wires. I've heard people call them terminals, journey bits. I made that up. Anyway, let's go with noodles because that's the coolest option. I'm going to change no longer. Why is these guys are noodles? Alright, let's get into small prototyping in the next video. 47. How to bulk update nav links in your Figma prototype: The last video I showed you how to Bulk select stuff and then go all go to the homepage. And that is cool. But there's a better way because that only works when you can actually select everything and there's not 100 of them. What we're gonna do is we're actually going to do it from the main component. And although I go into it a bit more detail in this video, the basic one is if you do it to the main component, all the instances, look at that. They all get that same link, will do it to this bottom nerve as well. Okay, where we update one of them and they all update, it looks messy, but it took us like 2 s to do noodles everywhere. Somebody dropped a plate of them onto our designs. But anyway, let me show you in a little bit more detail. Okay, to start, I'm gonna be a shift one to see everything. And I'm going to go Shift D to move to prototype mode. And I'm going to right-click anywhere and go remove all interactions. You might have to be a bit more specific if you've rigged something up, you don't want to touch, but I'm removing all mine. So the trick is, is at the moment, okay, for me at least, can you see over here, this is actually a frame. It should be a component, and that's the magic trick, right? We're going to work with that centralized main component. And if we link those, they all update. So I'm gonna go to this one here. This is gonna be my main components called frame three. We're gonna make it a component. I'm gonna go in here and I'm going to say this is Nav upper. And I'm going to copy it and I need to replace all of these guys because these are just lazy old frames, they're not connected to it. So what I'm gonna do is slick them all. And I remember my shortcut command Shift or you go that worked that work. The way I check is I go and check to undo because they, they'll call frame three. Try to remember the shortcut and they've all changed to Nav, upper. Happy days. Do I have another one? Oops, great shortcut. Command Shift R, or Control Shift on a BZ, sorry, PC guys and girls. Alright, now what we do instead of dragging them all over like that cool trick I showed you in the last one. While we do is when they're navigation is clicked, we're gonna go to this homepage. And the cool thing about it is can you see this one did it, this one did it. This one did it. Announces a really simple navigation. Let's do it to the ones down the bottom here. For me, mine's already instances of this MainComponent. Where's the main component? I know where it is, but if you don't know, right-click, go to main component. There I am. Hello. And what we can do is we can go inside of this one instead of doing that whole select all like we did in the last video, that's like, that's a crucial cut and useful. But when we're dealing with navigation, we can be a bit more intentional with components. So I want Search to go to shift one to fire out, can't see anything. I want it to go to. We don't want to go to I want it to go to you. Go to their home. My account page. To go to my account page, I want my wishlist page. Haven't decided what I'm calling them, to go to them. Obviously, we can play around with all the different transitions bought for the moment you get the idea. Look, he's doing it, but let's look at this one. They're all doing it there. We're going the right place. During the Essentials course, we're dragging things around and you're like, he's gotta be a bit of way. Welcome to the bid away. Just do it to the main component and they all update. So that's the bulk way of updating all your noodles. I'm not sure if I'm going to get used to that word noodles, but anyway, that's how to do it. Let's get onto the next video. 48. How to set the right phone and find old prototype phones in Figma: Hi everyone, has this happened and you're like, why does it fit in my prototype? It's too small or too big. There's video, I'll show you how to change it both in the prototype mode where we changed the phone that you're frame citizen, and also show you how to go the other way and try and get your frame to match the giant phone. Alright, let's dig in the first one. While I'm prototype mode, you can just change the device to match what you've got. You can select on your frame here, go to design mode and just work out your width and height. So I'm using the 39844. So prototype mode, I can just double-check under my prototype savings, just have nothing selected. And I can go into here and pick my device. I can go to none. Okay. And then just gets rid of everything or I can go through and figure out which one I was using. I was using this one and change my phone. Let's check it out. There you go, it fits. We'll deal with a cutout soon in this course. Let's how to get it to match up always going to be new sizes. And that's why we're building these responsive design so that if we do want to use that Max, undoing it to go back, I can say you shift D to back to design are now not just a general frame on an iPhone 14. I'm going to use the 14 Pro account. Remember which one is using the ego. Can you see it adjust, undo, redo, if yours is not adjusting, like this one down the bottom you before your adjusted, he should be set to not left and bottom. Undo, undo. Say you need to be not lifting bottom, you need to be left and right. That'll fix that one. So you frame Pro Max will look at responsive. It was, these aren't adjusting. It'll be down to left and right. And to make sure that we're using autolayouts and all the other goods stuff that makes this thing nice and squeegee. You're always gonna be chasing the new phones size, which is always FUN. Now one thing there I want to double back and re-record because I was jumping between Design, looking at this frame and giving it frame size. Okay, that's what we did to make it this max size, which is great. It is separate from the way you prototype it. In prototype and I have prototype sittings, okay, I could have something separate. These can act independently. You can't make it change per frame, okay, So you have different sizes. It's not going to jump all the way through. What you might do is actually just go to Custom Size. Then it's going to get rid of the Kromer on the outside or does he mean by Chrome? That's the stuff around the outside. Can you see it just disappeared. Okay, the editor turn it back to back off, on, off. But you get the idea right. You can still make it look like a phone. And it means when I cycled through to the different sizes, It's going to just stretch. Game fit in this window. It's not going to put the current on the outside, which is quite cool. The chrome is the phone bit around the outside. The other thing they did was I'm prototype mode. If I go into here and say at the top here that kinda newest ones, I'm sure you'll be up to like iPhone 30 when you're looking at this. Okay. They have put in some of the old ones and is even older ones down the bottom here. If you scroll down the bottom. So we're doing 14, but it's like a few missing right there went to this oldest size because there's a good generic old phone size and it's highly used for testing. Okay, but done the bottom here are some other ones just watched in the bottom, there might be the thing that you're missing. Good old pixel 21. Last thing is if you do think if we now change the size to much bigger, is there an automatic update? Okay, when I go, you are going from that frame size two. It's the biggest one we got were just do that. There is no automatically stretch stuff. You need to set it up beforehand, okay, without constraints like we looked at earlier, autolayouts, all that good stuff you needed with that initial work into some of your components. And it pays off later on when there is that new phone that you gotta test on. Alright, so that is how to update the phones so that it fits. Just changed the presentation side or go and update in design mode and go and update the frame to match what you needed to be. Alright, that is it, I will see in the next video 49. How to make sticky scroll position search bar in Figma: Hi everyone In this video see this little search bar here. Imagine if you could scroll up and look at that, kinda gets stuck and doesn't get off the page. Okay, so we'll look at something called sticky positioning will also get the navigation and the bottom navigation to stop scrolling as well while we here, alright, jumping, alright, first up, I've got a trick layout so I can see my phone prototype at the same time as doing my working. I'll show you that at the end. So the things you need to do to make this work, There's a couple of them. First of all, we need some content that overflows all frame. I just use Loren ipsum and just pasted it until it went over the edge. Then we need to go to prototype mode. And we need to make sure that the parent frame, we want to sit the scroll behavior for vertical. Now, it's not working yet, but you can see it's scrolling, whereas before it wasn't scrolling. Excellent. So now we need to make it sticky. So I've just drawn some random stuff in here. It looks like a search box, just a box with some ticks in it. You can see my frame there. Okay? And I'm going to select it, go to prototype mode and say scroll with parent. No, no, no. We're gonna do cool sticky scrolling. Stop at top edge. That's it. It's kinda, kinda work watch ready today. I love this feature is not working because a, it sticks to the top and it's hiding behind that notch. So we're going to add some padding to it. The easiest way to add some padding to it is within Autolayout in Design View, I've got this selected. I don't want to turn this whole thing into an order layout because if I did, it's going to work. But it's going to wrap around these two units. Okay, It's not what I want. What I want to do is put it in a parent frame. Say you my friend, frame this Selection. Okay. I have a look over here. My search box frame is inside this parent frame called frame saving, great naming Dan. And if I add a Auto Layout to the parent frame, frame seven, what allowed it's doing everything and it's trying to shuffle everything around, but there's only one thing in it, Search box. So now I can do cool things like burp. Okay, I want some padding. Let's get a feel for how much we need first and then test it and realize it doesn't work. Let's go on what happened. Well, what happened was we applied the stickiness to the original search box, not to this new parent frame that we just made. So just select the parent frame, frame seven, and don't want to scroll with parent, we want you to sticky to the top. Now let's go way. Alright, so we've got to do some Layout things. But the ego, how to stick out a little Search to the top. I love it. Now a couple of other things before we go. One is I sit up this Layout, you might be like, that's easy, but if you like, how did he do that? What I did was let's get rid of it for the moment. What I did was as you can actually open more than one version of Figma in a browser. It's easier, but you can do it in the desktop version as well. So I'm going to preview it. Okay, I'm on the wrong page. Probably. Look, I am this one here. Still doing It's cool. Scroll stuff is, these are separate tabs. You can actually drag, hold, just drag it out randomly. Now, I've got two versions of Figma that blows your mind. Do this. Okay, and what I do is I just do a little bit of desktop arrangement magic, so I can see both of them kinda drag that over there and this is over the top. That's what I do. Actually, only two of this tutorial to be honest, what I normally do is have this open on this other screen over here. You can't see it's got all my notes. So I set that up. The other thing was that I thought I'd mentioned here we didn't need to angels, but hey, let's throw it in here. Is this in this, I'm going to copy it, paste it. There isn't a pulled it off is because watch what happens. They go away and this thing is doing weird stuff. So basically the same thing. Okay? I'm going to say you prototype, scroll with parent. Nope, instead of doing sticky to the top, I'm going to say fixed in place. Let's give it a go now. We'll get that are used to going to allow the padding for this thing to look like it pushes up against the top bar and we're going to work around the notch and the edges will do that in a future video. The last one is this Nav at the bottom here and just kinda like rolls around follows the parent. We don't want you to follow the parent. Want to say you prototype, scroll a parent. I want you to fixed, stay in place. Look how cool we are. All right, it gets better in the future videos, but I don't know, It's pretty cool now. We're having to this. Here we go. Anyway. Alright, there is our feature. Let's recap a few things you have to remember to do just as a reminder, and things that can't do. So, first of all, the parent frame that you're previewing has to be overflow vertical doesn't wait for horizontal at the moment, are both one on vertical that might change in the future. Another thing is, is you can't get it to stick to the bottom and stack up. Okay. You can only get it to stick to the top, not the right, down the left, not the bottom. You have to have texts that is overflowing. So you've actually got something to scroll. You'll be able to turn on overflow vertical bar. Your preview won't move. If there's not enough room, you could do a really nice list, which I should've done, okay, or just a giant colored box or in Ipsum like I did. And how did I get my Loren Ipsum? I actually went to content real. I like content real because you can go to text and you can say you, I want some Lauren. Lauren, Okay. Hit Enter and kind of combines lots of other people's ways of making Loren Ipsum. I just went before, I can't remember or understand. Loan just fills it in. I copied and pasted a couple of times. But if you're old school and you don't want to use a plugin. This side. Anybody using this slide, I've shown not to be with the site. You might be using it as well. The good old learners them sides so ugly, but everyone uses it. I want this many paragraphs generates. You end up with this and you can copy and paste it out and get spammed by Ed's intermittent fasting according to my age. Anyway, there we go. That is sticky scrolling. Alright, I'll see you in the next video. 50. How to stack multiple sticky text vertical scrolling in Figma: Hi everyone. In this video we're going to do this where we've got a heading at the top and it's stuck to the top. We've kind of done that already, but watch what happens. Look, there's a venue heading coming. It's coming. It's coming. Oh, look, and it stacks on top. They all kind of like stick to the top and kind of colapse on top of each other. Super handy, kind of a tricky feature to do. I made a video of this originally when it came out and I found it didn't go well. Check the comments a lot of people giving out about my terrible explanation. So I've re recorded this one, so the UI will be a little different. But I feel like I've kind of, I don't know, found my Zen and hopefully be able to deliver this one a little bit better and acknowledged that it is a tricky project to do, but good luck. It's really fun and we'll do it. Let's get in there. All right, first up, I've got an empty page. I've added my navigation and my lower navigation. And what I did was just so they don't scroll while I'm working on it, we've done this before. They click on them, go to a prototype and say position. I don't want them to scroll with the parent. I want them to be fixed. Do it to both top and the bottom so they don't scroll along. The other thing I want to do is I want to be able to, there's a lot of testing with this particular project, so what I'm going to do is I'm going to have them both on screen by heading play present. Make sure you've got the name, you've got your actual thing you want to present, selected at the top there. Okay, it appears in its own window. Okay, original. This is the prototype. I'm going to drag it out and just resize it. And turn the flows off and resize it so it's like I can see both of them at the same time. They're actually just two separate windows now. Okay? You can do it on a browser. I normally do it on another screen, which I have here, but you can't see it. I'm going to do that way. So testing the working doc. So first thing we need to do is we need to put everything inside of a wrapper frame. Okay, so I'm going to go up the frame tool, I'm going to decide how big my text box needs to be. I'm just going to guess it for the moment about that sort of big, let's name it in my page. Okay, and I'm going to say what do we do? We're going to call this one rapper. Okay, okay, let's go to Design View. So I've got my wrapper inside of this wrapper. I would like all of my content. Okay, because it's going to scroll within this wrapper. So let's add our parts. I'm going to grab my type tool and just click inside my wrapper anywhere. Add a title, Event Details. Okay, it is a heading. Now you might be inclined to go. All right. I'm going to hit Return and then add all, you know, the details about the event. Okay? The thing is for scrolling is that these need to be separate and separate boxes. The thing you want to stick to the top which they're heading and all the body copy needs to be in separate textboxes. I've got my finished version over here, because you see here that this one is separate from this, so that that can stick to the top and this scrolls along. Let's preview this one just to be super clear. Okay, there you go. When I'm scrolling at the top, can you see the heading sticks And everything else is in separate boxes. Even that second heading, they're heading there in its own box. This is in its own box. This is on our own box. And that's one of the big takeaways of this, is that they all have to be in their own separate boxes. All right, so let's go back to our one. We've got a heading, okay, I'm going to get rid of all of this and just have my lonely old heading in here. Mm hmm. I'm going to put it in the top edge of my wrapper, just make sure it's still inside of my wrapper. Okay, I've got my heading. I'm going to actually, you know, we'll leave it as event details. Now, I need my body copy. I've got some over here that I just had lying around. I'm going to grab a chunk of it. Copy it. You can use content reel or you might have some lying around or you can just grab any sort of details. So type two, I'm going to draw its own separate type box. Okay, Not part of the hitting, it's hard to see the wrapper. Okay, If you do want it to go right to the edge, but let's just drag it out. Let's hit Paste. Okay, I'm going to click off, and then I'm going to just drag it around so it actually snaps to my outside parent wrapper. You can see it there. So body copy. It doesn't really matter. I just want it to line up. Cool, so we've got a wrapper inside of that rapper, we've got a hitting, and inside of that wrapper, we've got a hitting. We've also got a separate box for body copy. Now for this body copy, it's probably easier at the moment. It's a fixed width box depending on how you drew yours. I kind of dragged it out so it's fixed with it doesn't really matter, but it makes it less confusing. If it's on auto heights, it'll just expand and contract as we have it. So let's give it a test. Let's go over here, nothing happens, okay? So the first thing I need to do is I need to add enough content that it can be scrolled 'cause there's no scrollability yet. So let's grab all of this and go copy. And I'm going to put it Return in and head Paste. Return in Paste. I know double returns, I'm just pasting. Pasting, pasting. So now I've got stuff that's scrollable. I still can't scroll. Okay, I'm trying. You can't see my scroll wheel is busy doing stuff, So making sure that it's inside my wrapper. I've got this thing, I'm going to call it body copy, copy one. So the way to make it scroll is sometimes we've been doing it to the parent frame. Okay, And we've gone to prototype. And we've gone from overflow, no scrolling, to vertical. Let's just do it for this wrapper because we don't need anything else to scroll just inside of here. So I'm going to say you under prototype overflow. No scrolling. Now let's get it to scroll vertically, please. So let's do that. So we've got the basics going, right. A little scrollable box in the middle. Now like we did in the search box, I need to make this heading here. Okay, so I've gone inside my rapper, I've got event details and I'm going to say prototype. I would like it to not scroll with Parent, which is the default, and not fix like we did with the top and lower nav. I want it to be sticky as I want it to stick to the top edge. Okay, so let's click off that and let's give this a goal. You ready it sticks, It's awesome. All right, phase one, done. We've got a heading that sticks to the top. There's some problems though. You can see there is text folding underneath it. So this is one of the quirks, I don't know, features you notice on lots of people's examples online. They just have a colored box. And that's how they just avoid actually acknowledging that there's a little problem with things overlapping. Let's acknowledge it and actually work to fix it. What we want to do, it's like a trick. Basically, we're going to put a box behind event details that's the same color as the background. Make sure the layer order is right and the text will actually still be there, but it'll go behind a big box. Do you kind of get what I mean, We'll just put a big colored box behind it and we'll slip behind. So let's try and do that. First of all, let's make sure we've got the hitting details selected and if we go to design, okay, you'll see that we can't add a fill to it because it's just a plain old text box. I can add a fill if I want to make it a fill. Make it the background. It's not filling the box, it's actually filling the text. I'm going to undo that. So what we need to do is we need to wrap it up in its own little box. Okay, We'll wrap it up in its own little frame. So with the text selected, we'll say you, my friend are going to go inside of a frame. The only reason we're doing that is so that we can add a frame, can have a fill a pill, let's make a big crazy color for it. I'm gonna plus let's click on this and let's pick something crazy. Let's look at the screen. Let's see this. It may or may not work. Okay, let's have a look. It's not working. I know it's not working. Okay, Have a little think, pause. Why would this not be working now? You might be working at, oh, you might just be watching. Why is that not sticky anymore? Do you know why it's because it's now in a frame. So let's rename this instead of Frame 35. Let's call this one heading one. So we made event details in prototype sticky. Okay, But then we put it inside of this other wrapper and that's not sticky. So actually we don't need this to be sticky. Now. We can turn it off, you can leave it as is, but the heading, okay, the wrapper, parent thing, that it's inside of this little green box, he needs to be sticky. Let's give that a go. Polling, no scroll parent. We'll get him to be sticky. So we should go back to working and you're like, Dan, it's still not working. The next part to know about it, okay, is the layer order is important. So the moments, have a look, we've got our wrapper and what's next in line on top is body copy. We don't want it to be at top because it's kind of scrolling on top of things. So what we're going to say is say, let's close it down. Say hitting you be above, it's still in the wrapper but above body copy. Let's give it a go now. See it. Look at that. It's working, okay. There you go. So what we need to do now is make the frame a bit bigger. Okay? I'm just going to drag it out so it covers anywhere potential text is going to be. You can say, look, disappears behind it and you're like, you can keep a big green box. Okay, if you like it. I'm actually going to change the box. I'm going to go to design and say, actually you are now the background color. So now can you see the fakery going on? That's how you make this thing work. Okay, Sofaza, good, How's it going? This is a way better explanation than my last video anyway, a lot more calm. All right, the next thing we're going to do is add multiple headings. And what I'm going to do is I'm going to undo tobacco being green, just so that it's visually easier for you guys. But ideally, I want it to be the same color as the. Let's add another heading. The trouble is that this wrapper here, by default is clipping contents. It's stuck in there. And I want to add more to this and you can't see it. You're like, how do I add another heading in here? Okay, I want it to be inside the wrapper but want to be inside the wrapper. But after body copy one, which goes off down here, let's click on the wrapper parent. And we'll say, let's not clip the content for the moment, Okay, We need to turn it back on. But just for the moment, while we're working, let's keep this out. You'll notice that it goes there, hangs out the bottom. Then you're like, I thought we just said don't clip content we kind of did, we did for this wrapper. But the actual document itself, okay, the outside parent frame has the exact same problem. Okay? It's clipping it as well. So now we can see it all. We're going to have to turn both of those back on. Confusing. I know. Okay. But while we're working, let's have clipping off on the wrapper and the parent frame, okay? And now we can kind of see stuff. So what we want to do is add more bits. So what we'll do is it's actually easier doing it over here in the layers panel in this case just because there's all this clipping going on and it's inside the rapper and so what I'm going to do is grab both of these, copy and paste them heading two and body copy two and I'm going to try and drag them down. Here we go. Sometimes it's easier just to use the shift key and hit the down arrow. If you've got them selected in the layers panel, you can see they've already jumped out of their event details. There are tricks for doing that for the moment. We're just going to do it caveman style and just move it down. Okay, so they're afterwards. Okay, so they're lined up. Let's do two of them while we got it. Actually, I'll make this one a bit smaller. My body copy, Let's just make this smaller. Okay, I'm going to have, I'm going to do it over here again, heading two, body copy two, copy paste. I've got another heading three and a body copy three. Let's drag these down. This could be the tricky bit is just getting these all stacked up. Sometimes it's easier just to have these ready, not while we're working heading two. I'm going to change, I'm going to say this one's going to be my venue details or just venue. And this one here is going to be where, where, when. All right. It might work because we've copied and paste the one that was working. Let's see how we go. First of all, let's just go check what we've got. What's working? It's not working. Okay. I'm scrolling up, but I can't see any other stuff. Why can't I see it? You've already spotted it, right? It's because it's not actually in my wrapper. See, let's twirl these down. Heading three, is there? Okay, And there's heading two. All of these aren't inside my wrapper. You guys come on down inside the wrapper now. Let's give it a go. Okay. So let's scroll up and there is venue. And you know what I've done. I've made the last bit of text not long enough because I can't scroll anymore. Right? So there's no chance of them overlapping each other. Okay, so there's last text down here. I'm going, I copy it and go paste, paste, paste, paste. So there's a lot more. Do you get what I mean? Like if there's not enough actual content, I can't keep scrolling up now. There's loads of content to keep scrolling. So look. Event details, let's go. Venue covers it and then when were Covers it? That by Fluke Works. Okay. You might try yours and you'd be like, it doesn't work. Okay. It's because of the layer order. So if I ended up just dragging these inside my wrapper at the bottom here. Okay. Which probably might be more the default option. Okay, So let's go. Event details are on top, then let's go. Venue goes on top, perfect, and then when we watch, disappears underneath. Okay, so the layer order is really important. So the hitting, so we want the hitting one and body copy one to be at the bottom. We want to be covered by hitting two and then covered by heading three. But copy three, does that make sense? Let's give it a go now, when, where now we've got all the stuff sticking out and you like, why is that sticking out? It's because remember, we opened up this clip contents just while we're working to see this stuff because otherwise it's like tricky to work on obviously. We can turn that off again over here. Now. Now we've got something a little bit more how we wanted it, okay, where it's not scrolling off the bottom, and we've got these things stacking up. There you go. So we scroll away. What I'm going to do is I'm going to go through into each of these and say Bill is going to be this fine heading two, this is this color. Then sometimes it's easier to just use the layers panel. Hitting one is done hitting one. What we've done, hitting two is hitting three. Hitting three is going to be the background color. Let's give it a go now. Now it's a bit more seamless, where it acts as you had imagined. There you go. We've got a scrolling thing that all stacks up. It's kind of a new feature. It's a little bit complicated. It's really complicated. Okay, I've tried to kind of go slow and go through step by step. All right, and lastly, the outer wrapper actually doesn't need to clip contents. It's totally up to you. You just need it on or off. It doesn't really matter when it goes to preview. It just, it's easier when you're working on the background. The other thing you might do is it's really hard to work with black text if you're on black theme. So you might want to click the background and go to Page. And just pick something lighter so you can see your body copy against it. And the things to check is make sure that I was just going to click on these. So you can see under design, it's mainly under, so clip content that could be on or off. Really, it'll still work. And under prototype, I've got no scrolling going on. This wrapper needs to have overflow of vertical scrolling. Okay, for it to work and under design clip contents to work on it, turn it back on again. Turn off clip contents to work on it when you're doing editing. And then turn it back on again to preview nicely. Okay, the inside of this wrapper, the layer order is really important. The top parts are at the bottom, okay? And the last parts are at the top of the layer stack. Because you wanted to build on top when you're looking at them under heading, Okay, go to design. You can see clip content. Doesn't make any difference in this one, but I've got my text inside of this heading only because I wanted to add a background color to it to hide the text underneath. Okay, you don't have to have it. And you need to make sure under prototype that that heading is sticky, okay? Even if you don't use a frame, make sure the heading is sticky. They can both be sticky. It doesn't matter. It's mainly this one here, okay? Whatever is in this level, okay? Directly, whatever is in this level, directly under the wrapper. The other things that might be causing you problems is your body copy might be set. It gets really confusing if it's set to this kind of like last one, like fixed size. It's much easier when it's auto height and you don't need to do anything in terms of prototyping with the default Scrabble with parent, okay? You can leave it like that and just go through and make sure they're all the same. Heading two is sticky and it's above heading one and the same with heading three. All right, let me know the comments if you do run into any other problems and if you've got it working, have a check at the comments and see if you can help somebody else out. I'll have a look as well and see whether I can maybe explain this one a bit better. Definitely better than my first version. Still a tricky one to do if you are struggling quite a bit. My advice would be to start again, rather than trying to fix one that exists is just to kind of plod through and work through the video again and just be a bit more purposeful that you've got kind of like a little bit of understanding about it. I bet you the second version will be good and it can be handy to have all of your headings and body copy just kind of ready to start with before you start doing some of the other things. Just so that you're not trying to build it on the fly and kind of drag it and get into weird places. All right. I hope that was helpful and that is it. I will see you in the very next video. Good luck with the scrolling. 51. Class project 06 - Multiple Sticky Headings: Oh, you know what time it is? It is not painful homework to do time. It is FUN class project time. It's very different. This one here is, you're going to try and make your own Multiple Sticky Headings. Hopefully you're playing along in the last video. If not, now's your chance to practice it. This is one of those key videos that I feel like if you do this class project, you will learn a lot because you'll bump into lots of issues, but those issues will help you become a better Figma User. Basically do the exact same thing we just did in the last video. So create those stacking scrolling things of here. You can see they stack over the top of each other. I want you to use real data though. By real data, I don't mean like placeholder Loren Ipsum, I want you to either create a fake event, will go and find something on an event site that you can use and borrow and use it as placeholder text. I want you to add an image as well. For me, I probably had the image just either above Event overview or underneath it. I'll let you decide where and put it in a real dates and real venue. Make sure that there's enough scrollable content. That's it. The only other thing is good, it linked up. So under prototype, get it connected to this one of these homepage cards. So whatever images and stuff you using in here, get it working over here. So when it's clicked, it's going to jump to that page there. And when you're finished a video okay, of your scrolling, That's the best option. Remember there's video capture on both Mac and PC. Mac has one built-in called QuickTime Google how to use that? Windows has one as well. Can't remember it's called and upload a link to your video. You can use YouTube or Vimeo or Behance as well. Host videos have already discussed this MNA. Anyway, it's a recap. Share the video, upload it to the assignments, the link to them, assignments, and tag me on social media, use the hashtag member Figma Advanced without the full stop. It isn't easy way I can go and have a look at people's work specifically for that course. Choose your social poison and tag me in it. Love to see what you're doing well. So remember, when you are posting not so much on social media, but especially in the assignment sections to comment on to other people's work. Remember the rule, but paying it forward, alright, that's it. Class project time. Enjoy. It is gonna be hard, I promise I have to watch that video before this one. A couple of times you might run into new problems. If you do let me know in the comments. If you see somebody down there who's struggling or need some help, jumped down there as well, help them out in the comments. Go team. Alright, that is it, I will see in the next video 52. How to make Interactive Components in Figma: Alright, hold on. She had like watch this. If I hover above this button, hard luggage changes, it's interactive. It's a component that works. I've actually done this earlier on in the course with Animations, but we didn't really call it interactive components because it was animation. But now we're going to get this hover state. The one thing is going to be, is it obvious? I don't know. And we have a one is really easy to learn this principle. We're just to recap it. The one thing that's not going to work though, is hover on a phone, okay, As much as you want to have will be your finger over your phone and get to change. It doesn't work. This is more of a hover button for desktop, but the hover state is a great way of showing the interactive components. So let's make it our first stop. Just so you know, this is the exact same technique we did earlier for our animation without tics popped up, okay, we made it a component. There were variants. There was Interactions between these variants. That is an indirective component, but we will using it for like a trick for animation. When people talk about Interactive Components, normally they're dealing with those UI elements like the button useful. So let's go and make it. So to start with, I created a button. The button is nothing more than ticks and a rectangle. I've made mine and autolayout. The button changes size. That's totally optional. What is an optional is that the thing needs to be Component. My case it's a frame, that's an auto layout frame. I'm going to convert it to a component. You can see down there components symbol. I'm going to make a variant of this. And this one here, I'm going to switch to design mode, shift D. Click on the background, find the background and pick one of my darker colors. Okay, that loop we need to do now is add animation shows Shift E again to go back to prototype mode and say, this goes to here. Okay, But on tap, I'm going to go for the wall hovering. Okay. And when it's hovering change to is variant to I got some bad naming going, but it's working. Let's go and say instant death. Let's just leave it all by default and give it a test, maybe a shift one. I'm going to decide which page to work on. I'm going to throw it onto my wishlist page. Any page you want to go to my assets Option or Alt to K. And I'm gonna go, Where are you button? Right. There you go. I'm gonna throw it onto this page here, which I'm previewing over here. And hopefully if I scroll above it like that, it's got a hover. It's not very pretty, but that's it. Indirective components. So things that need to happen is that it needs to be Component and you need to have more than one variant. And you need to animate between the two Interactive Components in a fancy mine up a little bit. There's nothing else that productive in this video, we'll do something a bit more complicated the next one. But for the moment, I'm going to pretty mine up. If you want to hang around. Hang around. If you don't, don't shift to, what I want is you will hover actually first list, name these things. So I'm gonna go Shift E back to design mode and you are called default, that's fine. And this one here, not variant tooth, so it's going to be called hover. I'm also going to fancy this someone out with a drop shadow. Indeed, my favorite drop shadow is zero, something like two. I'm tabbing along to something like that. I like it kinda pointing straight at the bottom there. Can see that one. Now in a hover above it. Can you see there's a little drop shadow that appears and also a little bit stuck the way it changes with Instance. So Shift D, okay, to go back to prototype, instead of going to Instance, I'm gonna go to dissolve or smart animate when we go to dissolve. So there's a nice fade between the two. Alright, anything else want to do? No. It's a hover button, Dan. Well, it has gained you do. Alright, that's gonna be for the moment. Let's get into something more complicated in the next video. 53. How to make a checkmark turn on and off in Figma: Hi everyone. In this video I'm going to show you another use case for that. Interactive components, like the Hover button in the last video. Just one more to give you a good understanding of its potential for lots of different UI micro-interactions. See this one here. Click on, click off, click on, click off. Nice. Alright, let's get started. Alright, to get started, all I've done is made a text box. I have drawn a rectangle with rounded corners and I put a checkmark on it. You can draw checkmark. We can find one from a plugin is plugins because you like me might've spent about 10 min during a tick mark that's still didn't look good. And I'll show you another cool plugin that I use for icons called icons eight. I got a paid license for this one. There is a free option going about it though is a searchable, but you can go through and pick, say you're doing work like we have for iOS, it will actually have all the icons for that design system. Same with things like material for Android. Windows there, there's all sorts of good stuff, okay, and you can pick the right size and SVG is where I got my tick from. Or you can draw yours. Alright, to make this thing work, I'm going to select all of the bits by shift clicking it all, and I'm going to convert it to a component, may get a variant and then switch these two up. I'm gonna go up here and not delete it, but just an eyeball off on this. And that's it. Well actually half it. I'm going to switch to my prototype mode and Shift D. And I'm going to say you variant. A little bit of Double-clicking going on. Okay, So you go there on tap, change it to this badly named variant to I'm gonna get her to go Instance. And that's it. I need to put out an example of it. Okay, so let's grab an instance of it. Go in to an empty page number in front of images to go through open frames. I'm gonna go to my assets panel option or Alt to, and I'm going to say you right here. Then over here I'm gonna go click clack. And it's gonna kinda work. The tick appeared but didn't go away. So let's fix that shifting to go back a few. The infant November. And in here shift to and I'm going to say that goes there when clicked and this goes there when clicked or tap. Remember it'll say tuple mobile, click on a desktop, preview it the same, same, and it should work nicely. It's good to go. Click on, click off, click on golf. Like it is nice and easy. That is a component that has variants but now has interaction in it. Alright, clicking ticky thing onto the next video. 54. Interactive components with sliding button in navigation for Figma: Hi everyone. Let's take our interactive component knowledge a little bit further and make this prototype that has the line that appears that I mesmerized by look bounces back and forth, follows where we're going. Let's jump in and get it working. All right, to get started, we need three separate pages. I've called mine today this weekend and newest. Okay. It's going to match this navigation along the top here. And I've actually just duplicated the card that we made earlier and all I did was change the images. So it looks like we're changing pages for you for the moment. You might just put text on the page just so you know you're jumping from different pages. What I also did was I went and created three bits of text. That's all they are. And a frame here could be a rectangle, is just a line which will name command R, control R. On a PC, I'm going to call it line. That's going to be the thing that jumps around. Okay. First things first is let's grab all of this and let's convert it into a component. Let's set up the navigation to jump between them and test that. First what I'm going to do is I'm going to move the component off, the main component off, because I can't shift to switch to prototype. I can't get today to go to itself because it's inside of itself. So what we need to do is grab this component, the main component. You can stay up there. Let's give it a name shift that turns on rulers. It's command and control. Our On a PC it's rename this one and go nav hyphen sub like my little sub navigation. All right, let's put an instance down here. Option or Olt dragging. And what I'll do is I'll copy and paste on all of them. So click hold, shift, click, and just go paste. There we go. So that's all the pages. Let's test it to see if it works. Okay, I've already got my prototype open here. Nothing's working. Why isn't it working? Let's go back here. Oh, we didn't actually add the navigation. When today's clicked, I'm in prototype mode. You go there when weekend is clicked. You go there when newest is clicked. Sometimes if you can't see the page because you've got so many, you can just actually, instead of dragging it at an interaction when it's tapped, I want it to navigate to my page called hot and new or just new, where is it Newest up to you. Same thing. Let's try it now, Today, weekend. All right. So that parts work test as you go. And the cool thing about doing it this way is that we've done it to the main component so that the interactions are done inside that component so that all the instances come along for the ride rather than trying to drag them all out. But we know that that's good practice. But we need to stop it from jumping. We need that line to move. Now this brings up a good point. We can change instances, we can do stuff like the today. I can change the text of it. Okay. So this one's going to say yesterday. Okay. So we can change the text. We can change the text color. Great color change, Dan, it's better. There's some things we can change about instances, some things we can't. One of them is layer order and physical movement. Watch this. If I go on this instance, I want it to be here. But on this instance, where did everything, I did something. On this instance, I want to double click it gray. We've got it. And just move it across. We can't move it. Okay. It's all grayed out because the main component is the boss of movement. Okay? And layer order. We can do topical things like text change and we can do color change, but some things we can't. So how do we do this? For this particular one, what we need to do on our main component, we need multiples of this. It doesn't actually move, does so I'm going to just dragging out, so I've got multiples of these. Okay? I'm going to get them to line up and we're just going to turn them on and off. For each of these. I'm going to reset this one. Reset all changes to get back to this, so it kind of moves. What ends up happening is as long as the names are the same, so we've got a line, line line. That's important if you're copying a frame and it's got frame 123 or rectangle 123, rename them to be all the same. Otherwise smart animate doesn't work, right everyone? I just wanted to jump in here. A few people having questions and issues mainly around the fading. If yours is fading, instead of sliding like this, and mine looks different because I'm further along in the course, I'm just kind of double back for answering questions. And I'll show you somebody posted in the comments, they left a video, which is really handy. Let me, can you see what's happening here? I'll get it playing. Let's play. See when they're clicking on it. It's fading rather than sliding. Okay. And I can see in their video that it's because component three, that's the name of their component. They've called it 12, 13, and 14. They've called it rectangle. I called mine line. It should all have the same name for this particular trick to work. Okay? That would be the problem with this one. If they were all the same name. I bet you would work. Yeah, that's the one thing to check. You can see in mine here I've got my main component, and inside of it is the three text boxes, but separately is these line, line, line. Make sure they're all the same and make sure smart animate is the thing that connects them. The page to page, you might be like, how did he do the big one? That line we made, can you see it is just the small line line. It's up to you how you want it to do, but hopefully that helps. The next question that popped up was, were you using smart animations between these two or three separate frames so that we can get this cool animation? What if you don't want everything on the page to do a smart animation? We could do it. I guess I'll want to point out, I find that when I'm working is that often it's not a 100% complete prototype that works every single which way. They can get really complicated and I can spend days trying to bug fix and get this perfect portfolio, sorry, prototype. When in fact I could have easily a separate frame to say this is how the menu works and exclude all this bottom parts. Then say this is what the pages look like, this is what a page transition looks like so that I can break them into separate parts. Really easy to make and not very complicated and still gets my point across. There will be times where you just want to make it perfect as well. What I would do in this case, if you wanted smart animate and something else happening down the bottom here, I think fade is fine. Okay, Unless you move them, like I did in this first one, actually, what would you do? Okay, paused. What I would do is I do smart animate between them and you. We'd get to this page, but this page would be blank. I would say click this button. Get to this blank page and have none of this on here. This blank page Have a prototype of an interaction that said, wait for a little bit after a time delay. Then go to my page with all the bits on it and do a different transition. You'd end up creating some extra pages. Totally doable? Yeah. All right. So I hope they answered some of the questions that you might have at this point, but more to come carry on with a video. So we're going to do is say you, I can't move you, but I can turn you off. And I don't even want to turn you off, I just want to hide you. Okay. There we go. Pop, turn the eyeball off. Use your own sand effect. Okay, for this one, when we're on the weekend, we want this one on and these two off. So I'll speed through this. All right, the shortcut is command shift on a Mac, it's control shift H on a PC just to automatically hide them or you can make the nice little noise, enclose the eyeball that's working. As long as the name the same we should be working. Let's go. One thing we're going to do as well is we're going to actually go to prototype mode. And there's a flow up here. I don't need a flow up there. I don't know how that one got there. Yours might be down here, might not have one at all. I'm going to say actually flow. It's going to be hele, it's going to start this flow. It jumps to the right page. It still doesn't work. I know why it's doing it. What we want to do now is smart animate. Which bits do we smart animate? We could do it between here. We could go through and say, instant, change it to smart animate. But we'd have to do it for every instance we can do it to this main one here, our main component. And say you, it's doing the right. Let's go to the right page. But it's going instant. Yours might have defaulted to smart animate. Okay, remember the last thing you did. Let's go. Smart animate. Let's go now. Are you ready? Ah, the glory. Look at it. It changes shape to fit under the different ones. It moves along kind of a nice little micro interaction to help the user know where they actually are. All right, going a bit deeper with our interactive components, adding a little bit of animation. We did a line underneath, you could obviously do a line over the top. Oh, good class challenge. I'll see in the next video. Actually, before we go, I want to show you, well let's just do some better easing 'cause that's kind of cool. But it looks way better when the easing is one of these or a custom one these quick and you can experiment with yours. Let me speed through this, all right. Much better. That kind of like little bounce kind of back and forth. Oh, it's nice. I love it. Okay, there we go. But don't worry, I haven't forgotten about the little challenge that I've decided to do. And you're thinking, Dan's challenge needs to be to line this up, look why is it so close to that side? It's driving you mad. I didn't notice that It's driving me mad now, too, so I'm going to shovel the navigation across, but I'll do that in between videos, I'll see in the next one. 55. Class project 07 - Sliding Button Nav Challenge: Hi everyone. It is class project time slash challenge. The first one, K Challenge one is basically recreating what we've already done. This line that moves along, okay, create three pages, create three nav links. It doesn't have to be today, we can newest, it's up to you. Want to test that the structure works and there's a line moves underneath it to do that first. And then the extra, that challenging bit is I want you to move to this line is gone and now there's a background that moves along. And can you see the text change to white underneath? That's it. I want you to the first line one first and take a video screencast of that version and then move to this one and do some changing. Why? Because it's a challenge with, I think within your grasp dB actually do. And it'd be interesting to see which way you tackle it. And then the very next video you will see in the list here, there is a completed version of this challenge where I'll do it, this particular one. Just so that you can compare the way that you tackled it with the way that I tackled it. You might find that you'd like, you're way better. You might like the way I do better, but don't forget that video yet. Do it yourself. Seaweed, go, see what you get stuck. See how long it took you, how complicated yours was, and then compare it to how complicated mine was. Now, also, when you are doing a video of this, if you've been doing screencasts now, maybe look to use your phone to record it. So get out your phone like right now. Okay. I got my phone in my hand and just record you going through it and show a little bit even disk space dirty, clean doesn't matter. Just to make the reviewing of these little more interesting for everybody. Have a little look, everybody's desk. So what's going on? So video of your animation. It's not essential. You can just take a normal screen-cast. Alright, so I've listed everything in the class exercises, but I don't know. It feels long and hard and I feel like that demo was better. Grade three pages, create a nav with the three different links. Get those to work. So they jumped every page, then get that line to move under all the different Nav Options, get it to bounce along. One thing I have edited in here is the version history. So whenever I'm working, often when you get to this point where let's say, let's go back to this one here. You would like, where's he? And you've finished this one and you want to move on to the next option of it, you might be keen to just go actually, I want to save this in time so I can come back to it if I need to. We cover this in the Essentials, but let's cover it again here. I have nothing selected. Go up here and say version history. And you can say, alright, I'm gonna go and make this something completely different. So I just want to hit Plus and say sub nav. Let's say that we're up to the buttons, slide one, and we're gonna do something else with a gradient. It just means that later on you can come back to that version once you carry on, once you've done it had done. And it's one thing that kinda gets you a bit stuck in there. Carry on, carry on, carry on, and change it all, mix it up, make this thing I don't know, a different color and uric it all. Okay, then you can say actually click off in the background, go back to my version history and say, Let me get back to their check it out. You can just look at it and that's it and had done it, it'll jump back to where you were. Or you can say actually this restore the version. I'm gonna go back to here and completely go back to that, but and then hit Done. Now what kind of reset back to them? Save a version history once you've done the line Challenge and then do that button Challenge, which is change the line to a button. See how you go there and get the background to move along the line did in addition, and the kind of challenging, but how do you get the color to change? Okay, can you see it goes from white, Tim black to white, women button goes underneath it and that's one of your challenges. Bonus points if you change the button color as well. And triple bonus points for gradients. Loved me a gradient. Share the video of both challenges. She links in and upload it to the Assignments section, also shared on social media. Tag us with Figma Advanced. Pick your platform or all of them and make sure you jump in and get some feedback to, to other people. Paint afford. Alright, that is the challenge. I'll go through it myself in the next one, but do it yourself first. See we get stuck. See how you approach it. There's no right way. If it works, it works, but then you can check up my one in the next video. Alright, good luck. 56. Class project 07 - Completed: Okay, This is the completion video. I sent you a task and the last video, this is kinda where we're looking to end up, let me show you the way that I went. Not the right way, not the best way, not the quickest way. Just a way that I went and you can compare it to yours. Or if you've got lost, hopefully you can go, Ah, that's why I'm, I'm wrong. Further learnt anyway. Let's get into it. Alright, the completion parts, do I complete it? I don't know. I haven't practiced this. A lot of their kind of content in this course and make sure I do beforehand. We get the bugs, get the order right. I leave in some of the bits that I get lost in because I know that you end up getting lost two, so Good to see how to work your way out of things. But with this one, I'm just going I said the challenge. I think I know what I'm doing. Let's actually just do it ten. So what I'm gonna do is I'm going to probably just reuse what I've got and holding down the Option key to drag it left and right. Okay, Alt key on a PC does both sides. And we have to play with layer order. So I'm gonna use my square brackets. We're gonna do with all the lines. Because remember, one of the things we can't do with Instances, we can't change the layer order. So all of these need to be down here under all of the text. Now in terms of actually what I might do is undo, undo, undo, undo, undo, undo, undo. Alright. Is do this all in one big go. So first of all, I'm going to move them all down, then we're them all selected. Did you do yours individually? It might've been something you did. So I'm gonna do this. I'll hold down my Option key. I can't, I can't do the widths altogether. What I might do is see if I can go to mix width and go plus or will it go from the center? We'll see, can you to again the same widths. They didn't go from the center, but hey, that's okay, Cool. Now the big thing is the color change, right? So I feel like That should still work. Let's test it. Command Option into another couple of ways of doing this, right? You might have found a perfectly good way. There might even be quicker. That's okay. Okay, that's good. It's not lining up very well then. I'll fix that later. It's got the mechanics working. The one thing is the color change. You could change it up here with say, a variant. You can make this into its own component, a K, you can say you're a component and you've got to variants. We couldn't do it. We can't do it in here because it's inside of a main sub. But actually, you could get down the wormhole and it would work, make these a separate component add here, have to Variants, put them back in or down here we can just say, remember the things we can change. We can't change the movement of just today, but I can say this has a color of minus plus. You going to be white. Copy the fill. And I'm going to say you there, I'm going to have this fill. It's actually ended up with two fills. You paste to fills. And let's have a little look up. Ah, alright, let me know in the comments how you did yours. I'd be interested to see just like what you did differently that took longer but still got to the same place because it's handy for other people will go like, Oh yeah, either they're way too, or you might be like there is a better way. And 100% agree there is. There's lots of different ways of doing it and I bet you, there's a better way. What I'm gonna do now is play around with this spacing because it is not good enough. What did I do plus, plus another 16? And shuffling along, that fuels better except the height. One upon. Don't want to open up the idea. Alright, good work on the challenge, everyone. If you couldn't work it out, hopefully there was an aha moment in this video for you, but that's it. I will see you in the next video. Bye now 57. How to use Sections in Figma for organizing your content: Alright, hands up. Who's never used this option here called Section. Alright, if you've got your hands up, we're gonna look at it in this video for using sections for organizing your content kinda like this where we can Section off mobile desktop tablet will double back and change all kind of like Component area for a Section. Why we're doing sections for organization here in our prototyping section of the course. Because in the next video we're actually going to use sections to do some pretty sweet prototyping. But I bet your lats, you don't know the main purpose of sections, so let's do that here. That kind of awesome, like a mildly awesome, but we need to learn them so that we can use them in the next video. Alright, let's jump in. All right, fessed up a bar to file from the Figma community. Thank you. Have NSA huge till October Baratta, just so that I found something that had mobile and desktop and iPad different screens in it. So this is a really good example of organizing using sections. Sections are hiding under where we have frame, okay, there's one called Section with click on it. And we can just draw a box around stuff we want to organize. There you go. Look at all layers. Everything is inside Section one. That's Command R to rename it. And that's coolest one. Well, Now could we not just do this with a frame? Hit the F key for frame, drag it around this slot. And same thing, I'm going to name it and I'm gonna call it Desktop. Know there's not a lot of difference between the two, except there's just visual differences when it comes to organization. In the next video, when we start doing some cool prototyping, it's magic. But for now, can you see the differences here? It's a little bit more different from all the other frames, Kay? He's got a little box around it. We can like frames go. You get to pick a background color to help separate it out from the background. Same thing we can do with the frame. One of the sweet things you can do with it is Double-click the edge and it kinda wraps it around leaving some padding. Can you say leaves like 100 pixel padding either side. And it's just a visual difference of kind of like a hierarchy when you're trying to separate things out, trying to show developers or other people or keep your ideas in some sort of check other things you can do with it is you can click on this section. And when you go to Share, I'm going to share a view link. And can you see it says link to current section. You can turn that on if you've got it selected. Let's copy the link and I'll open it up. When I send it to someone else, they open it up and they get directed to this particular section. Now frames do that too. Now we're back. There's anonymous. I opened it up in a private browser and anonymous has joined me. Okay, so let's wrap up the organizational parts for it. So shortcut is Shift as you can drag them out. You can convert things into sections. So this frame here now, maybe you have got something already, it's already sectioned out. You can right-click it and say convert to section. You can grab a bunch of stuff and go you right-click and say rapid new section, Command-A. And this is going to be tablet because we hear him because we advanced. I'm going to undo that. You can convert back. Okay. Let's say that this one was a frame to start with. You can convert it to a section up here in toggled between them. Now again, It's easy to add stuff to. You might decide that this particular screen needs to be in here. And it just jumped sections like frames do. You can get rid of a section by right-clicking and saying ungroup weirdly, you go not unsanctioned. You can't put sections inside of frames. Interestingly, Let's convert this to back to a frame. And I want to say, alright, inside of here, I want as big frame, I'm going to say Shift S for sections. I want this to be my specific section. And it kinda works except it doesn't It looks like it's inside of it, but can you see it jumped out of that Franco desktop and just went above it. It always wants to be the parent. Okay, It's blessing that way. It's used for like high level organization, not for sections inside of frames. Okay. The other thing to note as you can have sections within sections though. Sure thing. I got a section here. Let's give it a background color. But another section and here another section. And then you can, you see I can get his hierarchy going to the section has to be the high-level. That's about it for us. I command you to go to tab to command, to control to on a busy. Because want to get to my second tab. And I'm going to go to this section. This is perfect to be a section. It gets the sweet icon, it gets a slightly different title. I can double-click the outside to make it all fit nicely. And am I work my way around and have a welcome screens and my on my sign-up process is a separate section. You get the idea. Alright, so we're good with sections for organization. Let's get to the next video. We'll do sections for prototyping, which is super mole fund 58. How to use sections for prototyping in Figma: Hi everyone. Hey, we are going to look at using Sections in Figma to do some fancy Prototyping. I think it's fancy anyway, to give you a quick demo of what we're doing, you need to have your concentration face on you ready. What normally happens when we're wiring something up, okay, is we kinda stepped through a flow and it's all very linear. What we can do though, is normally do this. You buy a ticket, you get to the checkout, go to the next page, get to the attendee info, get to the NASW page and go to payment. And once you're back here and you want to get back into it, you have to start again, kinda work your way through in a linear fashion. Bought, watch this because we've used sections. I can say buy a ticket, keep an eye on one to add add the numbers there to make it easier. So we get to one, we get to tumor like, you know what? I'd like to go back and check some details before I pay. So you can do that. And in the past, without previous skills, if I click buy a ticket, you go back to number one. But whatever happens, straight back to number two, no way. That is the secret power of the section in Figma. Let me show you how to get it going to get started. I took how Vince details page that we made earlier. I put a button on it randomly in the top. Then I was like, again, I'm going to do a cart flow checkout at tickets and information and payments. And you can see I started with a little bit of vigor and then got bored. You to make this work or you need is three pages, call them cat 123. Maybe just put these titles on and you can fill up the other details later on. Let's just make it work. Now let's why this up as we would normally without our secret trick, Shift D prototype mode, this button, when it clicks, I start the checkout flow. Then once I get to the next step that goes there and then it goes there. So that is pretty normal. Yeah, the thing I'm gonna do is these titles here. I'm going to say, no, you're gonna go here. So when somebody tries to escape my card, okay, they're gonna go back to this event details one. Let's test it. So I'm gonna go, I'm gonna go and add a flows starting point just to make sure it's dots on the right page. This is normal. I guess I need to show you what's broken to show you how, why this cool Section thing is the fixed. So if I go here and I get to checkout and I go to halfway through attendee information. I'm like, actually I need to really check the event details. So I click back here and then I'm like, Oh no, that's perfect. And so I click on back to buy tickets. It jumps right back to the beginning. It doesn't know where I came from. So to make it remember, we use sections, so I'm going to leave it all as is, except I'm going to create a section Shift S or from this drop-down up here. Okay, And I'm gonna say U is Amanda to rename it. And that's called this one. Checkout flow. Hit Escape to get out of the naming double-click the edge wraps around nicely. And all we're gonna do is say you sit and go into that first frame. I'm going to say you actually go to the section. That's where the magic happens. Well, there's two things. Delete the second one. So when this button is clicked a, there's gonna go to there. And I think that's what we need to do. Let's preview it. Let's check our float. Same thing as before. Let's go, I'm going to buy a ticket and it doesn't work. You wait there. You saw it? I didn't see it on drag. I'm not sure why and drag was there on tap, please. Thank you. Try it again. When I click this one, it's still broken because I'm using smart animate. Kaizala is not smart animated. Why? Because these buttons have the same name. I should change them. Go frame nine, and that one's also frame nine, but it's forget any of that happened. Does he know what he's talking about? Okay. So let's go back to the beginning of outflow. I'm going to hit Alpha reset. And I'm going to say by ticket, great, get halfway through at my tickets, go to the next part. And I'm like, I wish I knew what was it again. So I can go back to the beginning dates. Perfect. So I can go back into buying a ticket, but I can skip that step. Look at that in jumps back to we lifted. Oh, so good. Is it good? I don't know. I think is genius. Alright. What else can we do? We looked at earlier on, remember, was there was a flow in here that said back, there was that one and I said to kinda leave it for later. Now's the lighter. What it means is let's add a button. So I'm going to open my last plugin, pretty shorts icon hit Command Option P, control op, open up the last plugin, mine didn't open. I'm not sure why. Alright. Is that the right shortcuts? Let's close it down. It is anyway. So I'm using icon eight and I'm going to find a back button. And I'm going to use this one. Maybe there's a free account, you can do free stuff with this. I've got a paid account. The link here on the screen. If you do want to go sign up for icon night, I've got an affiliate deal with them and you get a discount as well if you do want to sign up for it. But I've got my back button. I'm going to say, actually I don't do this properly and it cut it. I'm going to shift one. I'm gonna go to here, shift to, and I'm going to say Pastes, that's gonna go into my components. Where did it go? There has been on the bottom. Hello, make it a Component. Command Option K, Control Alt key on a PC. And I'm going to say when you are clicked, go back to just drag it out and it comes up, okay, or you can do it over here, on tap, go back. And this is because we using the Sections is going to help us do the back to where we last were. That makes sense. That really show it. So forget that we're in a cotton now and just think we're a bunch of different pages. I'm going to go to my assets and I'm going to get my arrow out. And I'm gonna put this one here, copy paste because the components is back. The cool thing about that is, let's say we're gonna go do this now. We're gonna go Started the overview page. I'm gonna go here, move onto the next page. Head back, goes back to the last page I was at. But if I hit back again, look at that, it jumped that whole page because it kinda knows the flow that you Winton. Now of course, in this particular exercise you'd be like, I probably just wanted to go back in the cart and along let flow and that's okay. But I don't want to build out a whole new set of pages. Just hit the Back button, you get the idea, right though, it operates more like the back button on a browser, there's times where you want that to happen. Alright, so that is using sectioning, using these sections to do prototyping, the fancy prototyping, Mandy's noodles get busy after a little while anyway. Very cool. Alright, that is it. I will see you in the next video. 59. How to add iOS battery wifi notch status bar to Figma: Hi everyone. In this video we're going to look at how to add these status icons at the top here, battery wifi network or they the time along the top as well. We'll look at how to deal with this notch that's on some phones. And although this video is 10 min long, the quick answer is, you just go and steal it from the Figma community. In this case, I stole a sweet one from Wayne Dahlberg and I pasted it in. Why is this video 10 min long? I'll show you how to still at good by stealing, I mean, appropriating because that's what's amazing about the old Figma community, right? Let's jump in. So let's do it. Let's go and appropriate somebody else's status bar. And the trick is community is the best place to find something like this. So go to the Figma community and in the search, what you're looking for is to put in whatever the latest iOS or Android version is, the case material or whatever device you're looking for. Try and pick that because you wanted to look like the new one that everyone's using. Satisfies the other word that you want. Okay? And for me, I want to go not for Jim in Figma, just Figma. And then you go through, and what I tend to do is I'm looking through here and this one might be great, okay, but it's got zero likes and 18 downloads. I'm looking for something that has a lot more. This one here has loads, has 525 likes, and has lots of downloads, and I've already checked it. So I know it's good. Open it up. You're going to open it in Figma. And basically that means you're taking a copy of it and then we're going to go steal bits from it. So that's our cover. We're going to use Page Down to get used to the shortcut, to go to this other page that he's created whose he was weighing somebody. Go back here. You go. Always. Dahlberg, you go waned. Doubt pick. Thank you very much for making this because it is awesome. And basically what you're looking for is let's go through his assets or Option or Alt to have a look. There's only two of them. There's lots of stuff that's embedded in it. Fine. But what we wanna do is go, I want this status bar. Let's drag out a copy. Actually what I wanna do is actually grabbed the main component. So when I have to kinda keep jumping back and forth into here to maybe do changes, not that I plan to come onto or control to, to jump back to that tab. And what I need to do is just paste it in. Okay, paste it here in my main components one, it should be on its own page by now, but starting to get a bit unwieldy. It's right there for the moment. So I should have at my assets, I'm going to type in stat that kinda cool down my assets there it is. What I wanna do now is add it to this top here. I could edit to each individual, but we know that that's a bad idea. We want to add it to the main component, which we can find by right-clicking and saying, go to MainComponent, here it is there. Now we're going to add it in that a go in and maybe minded up backwards. That's one trick that I don't know. It's not it again. I know that sometimes I do things like flip horizontal and do that all the time. Command P, Let's go horizontal. So what I did, I'm not sure. Okay, So we've gotta in here, Let's look at my Layers option or alt one and ended up in my main components. So it's gonna appear on everything. Other than we got to push the logo down. That's all we do. Okay, let's look at our prototype over here, needs to be smushed over there a little bit. And the ego, it's got to status bar. Now, I know we've gotta do some laying out, but that's it really, if you like, how do you do it? You go steal it, borrow it, appropriate it, better words. But weighings made this for us to save time, which is cool. You can go ahead to the next video. Now, I want to dive in and have a look at this component just because it's pretty interesting What's been made and we'll look at the notch. And so what I'm going to have to do now is I'm going to have to go through and make sure working on my main component, give myself enough room. Okay, I'm gonna turn on my grid to make sure it's kind of yeah, I'm kinda sticking to my grid pattern. I'm going to grab my logo and I'm going to drag it down and it get rid of my grid. Hard to see our show, something over here that's previewing. I'm going use my left and right. That one looks beta. Just want to find one where I'm kinda like laying it out where everything's not overlapping and that looks like it's gonna be a good distance from the notch. Now you can preview the notch here. It's coming from Figma. When we are doing our prototype. The notch is coming from the phone that we've picked. They're all different. 13. Like an eight doesn't have a notch. Okay, so that notch is coming from there and you can use that to kinda preview it. Or you can turn it on in this particular status bar, because when he's awesome, he wins. Let's go back to design mode and created a variable for, for dark mode. He also went in and in this status here can you see there's a notch if I click on it. Okay. There's a notch as visible. It's not the right sizes. They're not sure that I need bad. Wayne B might just want to see it hears that you can design around or at least know how far the logo fuels from this notch here. I don't want it on. I'm happy to just see it over here. Let's dig in as well. I've got time. Okay. This one, he has a variable of let's go green. A little ticket goes around it. I go back to clear. Also in here there is indicators for is the microphone on, is the camera on. Let's have a look into the status bar K, this little pot here. And here there is. Maybe you can drag this in and out. Okay, so there is a digital network. So let's have a look at the network. One, 3 bar, or I love this one, everyone. Rural Ireland. The Wi-Fi signal, you can obviously turn up and down as well. It's pretty well-built Component, don't think it's the kind of thing that you would put the effort into it potentially when you are making stuff. Okay. Let's look at the battery. Okay. For me, I live life on that. Always be charging my phone life. My wife on the other hand, likes to only charge your phone when it dies. That's how she does it. And then once it starts back up, she goes from status normal to charging on a paranoid charger now, but you anytime I get a little bit charge, we know in the comments and you're paranoid charges like me or you let it run until it dies and then charge at person anyway, that is using somebody else's community project to put it in our status bar. That's what you do for a lot of System UI bits and pieces. We'll do one more in a video next. But for the status bar, go find somebody else that's made it. Or if you're crazy person, you can build it yourself. But also, my opinion is, does it add to the demonstration, maybe for like final portfolio looking pieces but for actual testing doesn't help. I don't find it. Let me know difference between having the status bar up there and not having it there. Getting people to do some user testing. So leave it up to you whether you want to play the game of like and leaving space along the top here and all our designs for that status bar and then notch. Alright, that's it. I will see you in the next video. 60. How to add iOS or Android Snack Bar UI to Figma: Toast. Anyone look at this, this little pop-up toasting here or Snack Bar pop-up dialog box. We're going to make this. So we'll add the heart and we'll get this to pop up. We're not doing it because this particular UI feature is really important for UX design. It's more of a, for instance, I'm going to show you how to go out and find a particular UI element that you might want to use, okay, there is something that's being built by Google or Apple, or WordPress or Laura Val or bootstrap or tailwind. Something, something that's already made out there. You want to go and find it implemented into your design. Check out the guidelines for it. Just happened that this one took my fancy because it's called Toast or Popup. Toast is good. So let's go find it. Let's actually get it going. It's kinda like teaching you to finish. You'll be able to find all the other things that you might use that already exist in an operating system and just implement them into your figma design. I'll look it up. Buh-bye. Hello. Hello, bye. Alright, let's make that together. Alright, to get started, let's try and find a Figma file with somebody else's has drawn it. So we don't have to draw it ourselves. And some basic documentation about how it should be implemented in all I did was for this one, I just googled Snack Bar for Android. And I ended up the material site right here. If I scroll down, there you go. There's even a Figma file, ready for it. Happy days. Now, I'm in the browser here. And throughout this course I've been using the desktop version, but you can just open it in the browser. The nice thing about Figma, same, same browser desktop. And what's cool is you can actually copy and paste from the browser version into the desktop version so you don't have to like try and find it again on the community right? Now, trying to find the bits I want. I know it's probably in hand, page down, page down. Like there's all sorts of stuff in here. A nice way to do it is up here into search. Okay, I can type in Snack Bar and see nothing on this page. Let's go old pages. See what I can find loses Snack Bar stuff. I'm looking for a component hopefully is an auto layout and you can double-click on the name and it takes you to it did not. Going to search. Maybe just double-click an icon. There you go. And so there's that auto Layout and I can see what I want in there, but I'm also looking for It's filter it by just show me the components. You go Snack Bar, Dark, always all sorts of cool stuff. So I'm going to grab this. There it is there. I'm just going to copy it. Jump out to my desktop version of Figma. Okay, find a happy spot for it and paste it here. By heavy spot. I mean, I'm gonna put it in my main components. We are so really to put this on another page, but I'm going to resist. Okay, so we need a couple of things now we're going to put an instance of it. So let's switch to assets. And actually I switched mine to from grid to list view just to make things easier because my Snack Bar hip pop them there. Now I need the hot at the top. So I'm gonna go into my assets pile and I'm going to type hot, make it a little smaller. It's pretty massive one, we need for 24, maybe multiples of eight. Don't have to, but I'm gonna go inside of it, double-click it to go inside. And I'm going to make this particular instance. I'm doing it on my main components that it appears on all of them. Shift one over there as well. So next up, shift to, let's connect it up. Now it's gonna be an overlay because I wanted to not go to another page, just wanted to pop up. Thing is with overlays is that it actually has to be on its own outside of the frame. It's going to start off screen and be loaded up. So what I'm gonna do is going to say you when the hottest clicked, going to shift E to go to prototype. I'm going to say go to this thing, but I don't want to navigate it to, I want to say open Overlay to Snack Bar, which is cool. Too centered. No, I don't want to say to the screen, I can do manual. The problem with manual is like, let's say, I want it to be perfectly there when it opens. Excellent. The problem is a relationship between wherever the button is clicked and this many pixels down. So what ends up happening is because my prototype, and if I click this one, perfect, if I click this one. Actually what we're going to have to do is say When close, when clicking outside to, so it goes away. So there we go, goes away, quite click this one is actually appearing, but it's down the screens like way down here. So that's not going to work in this instance. What we're gonna do is we're going to say you actually just stick to the bottom. There's one on the bottom there. Problem is there's no padding from the bottom if you figure out a way of doing it other than the way I'm going to show you now, let me know. But it works right? It means that this one will appear there, that one on one page, I just need some padding at the bottom. So what I need to do is add some fake padding at the moment, if I look for my Layers Panel Option or Alt one, okay, layers, I can see that this thing is Snack Bar Hanging out by himself. And what am I do is tune into an autolayout, even though there's only one thing in there, just so that I can say 00, I'm tabbing zero at the top and on the bottom here. I don't know Looks just typed in 64. Let's see, Are we going? And let's open it up. Now. It's freaked out. Why is it freaked out? Well, let me think. Anyone pause video. Alright, I got it. And we were linking to the Snack Bar. We want it to link to this parent. Now I'm going to rename the parent. Remember, Command or Control R on a PC. It's cool. This one, Snack Bar, padding wrapper or Rapa. Rapa. It could be my Rep name, Snack Bar and dad joke. Other than that, what we need to do is relink this thing because it's trying to go inside of there and it's lost and it can't do it. So Shift D, let's say you I no longer go into Snack Bar. Let's go to our wrapper. Where is it? Snack by Rapa. There is. Now let's give everything else. So click out when closing, be at the bottom. There we go. 64 is not enough. Is it working? Okay, so you need more. All this. What do we do? 64, 54 plus 16. Refresh click. We've ended up at a random page. Left and right arrows. There we go back to the one I was testing. Nearly there. Another eight, we'll do it. You go double-check like I want it to be above that. Have a look at the documentation. Where are we here? At guidelines? And you can kinda get a sense for where things are meant to be. Like, I can see it's above their do's, don'ts. This stuff is really useful just to get your understanding of how to use it. Look no rounded corners on the, on the edge of the shape. If we're following the Android guidelines. And the app developer for Android or Swift or whatever they're using, I going to just use the defaults anyway. We don't want to be customizing all of that stuff. Alright, anyway, so you've got to have a read. How far should it be up? Go check the documentation. I probably need another eight. Here we go. And let's check it on the other pages. So close it, open it. Actually before we go onto the other pages, we need to edit this thing here because at the moment, and let's paste that in there. I've got this like you're Vint has been noted a wishlist. We're going to just update the ticks and let's see how good a variable listed. So I've got the Instance selected and you can see all this week, good stuff. Look at it. I've got an action. Do I want an action? Do I want the close? Okay, I'm gonna go action because I want to have the option to say, undo. Such a nicely made component. We know how to make sweet components now as well. And you can see how useful this is for that thousands of designers and developers who need to go through and do this without breaking things. Okay? There is a longer action. Okay? Two lines, single lines are so good. That's why I'm going to use your event has been added. One last thing is I probably want it to when it's clicked shifty. Okay. I want it to close when outside, I don't need it Background Overlay, it just makes the background dark. I'm going to probably make it move in from the bottom. I need to go check the documentation, but it's a live life on the edge. A really cool kinda pop up and say, Well look. I think the Android one does a weird animation that I can't mimic here and Figma, but it'll loop. Last thing is I went when that's clicked, I want it to close. So what I'm gonna do is say, you Instance, I'm going to add an interaction. Like normally you drag these rails everywhere. We don't want to do something. Problem is, is actually it does appear. You can close Overlay. There you go. I was just gonna go and edit up here. So select it and edit up here. Same thing, tap. It's going to on tap. I would like it too close. Overlay the guide and realize you could just drag it to close Overlay. Nice. Alright, so now I'll lovely thing gone. You close here. I don't think that needs that gentle Papa. It's kinda weird. He probably just a fight in and out. There you go. That is taking us through just like 1 million different things we could be adding to add a little bit of realistic notice to all prototype. Will you be expected to do this for every prototype? No way, if it does help the user testing, maybe your goal here is to work on the wishlist User Flow. Then yeah, we'd be doing this. We'd be adding that little bit of toast or the snack bar that pops up and you can do the undo. We might have to add a notification that appears here. We don't have to dig into that particular thing and add the why elements from the mobile app, okay, Android or Apple for that particular flow, you might just edit because it looks cool when you're trying to present or sell to a client. That's another thing you end up doing if you're pitching a design and you're looking to sell it, sometimes adding a lot of the things like all of this at the top here with the status bar. Anything else? Sweet bit of Popup toast makes it feel like we've gone the extra step kind of proves a little bit about Figma skills as well. Alright, that is it for this video, we made some toast. Mean you could wreck. I will see you in the next video. 61. Class project 08 - Operating System UI: It's me. I thought I'd escape the computer because we've got a class project because not much to discuss. So I thought I'd do it in-person. Mean you? What does it? I want you to get a bit of UI, like we did in the last video, that Snack Bar Popup toasting. Okay? Something different from that and implement it. Okay. And I don't want to give you anything in particular, because I want you to go into a little bit of exploring, find one, see if you've implemented Dr. self-managed trying to get it going, pick something else, it's easier, that kind of thing. Okay. So I want you to pick a minimum of one, okay? And it could be, there's lots of things you could implement from iOS or Android if you wanna do it for another framework, I'm okay for that as well. It could be things like that. Date picker or Apple has their dynamic Ireland thing that appears at the top. Have a look at your phone and direct with it, see if you can copy one. Go find the documentation. So if you can find the Figma file, see if you can get it working in Figma. And that's what I want you to do within class Project. One minimum at the list will be in the class project still have what you need to do. It's like one line. Make sure it's an interactive element so that you can implement it and show me with a little video like it being used. Yeah, and then upload the link. Sharing the assignment section and share on social media, make sure you use the hashtag Figma Advanced. Lots of different places you can share it there, tag me, and make sure you also chip in with somebody else's work to give them a little bit of feedback. Alright, Go forth, implement a UI element on your own. Good luck 62. Be careful what you create in Figma: Hi everyone. This video is a warning. Be careful what you create it and it can you zoom in and out like that? Be careful what you create. What is he talking about? I'm talking about prototypes and animation. So Animations, things they just play through, okay, you don't really do anything with them. And then prototypes, which we were doing the last few video with is like interactiveness. 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 gonna be making it. So just be careful to not create something, sell it into the client, and then not B. And then it being either e6 and something that they loved or it being something that cost. Sometimes some of those interactions when specialty skills, it might end up doubling the price of the job or doubling the time. So just be mindful of it. A good 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 indirection, so make it feel and really sell the concept. And it might be for your portfolio piece, go wherever board for that. It might be just to impress the boss. There's times where you need to go to the level up. But there are lots of times we're actually all start doing something and kinda keep adding stuff. And it's, I've doubled the time that it took me to build for no real net game when it comes to the user testing because that's what we really wanna do. We don't build something quick, get it out to the stakeholders, getting the hands of our users, and get feedback. And Figma is rapid prototyping. I'm not sure why they did that. It's rapid prototyping. And there's nothing rapid about some of the things we've built here. Just be careful and have a look at the term Lean UX, okay. It's kinda just sometimes you can get a bit lost and the details and sometimes all it really needs something super-quick, super Wireframing and sketchy to get where you need to go and be able to iterate. So that is it. And 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 in Figma. Isn't, It's not built for that. Okay, you can do some basic animation. We'll do it because it's foreign and it helps us explore the tools and get really good. But if I'm going to viewing animation for something, something is 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 animation. And you just kinda pick it up and dump it into Figma. Okay, it's not really an animation tool. There's plugins that will help you with animation, timeline animation. Just know that you can do it other places and just dump it in when it comes to Prototyping, that there's Figma as special, speciality. Okay, so it's really good at interactive prototypes 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 end, you might have to then go into the next step, which something like ProtoPie is pretty common. We'll touch on that later on. But yeah, you go do not design something that can't be built. That is warning that I wanted to get out here. Alright, that's it. I'll see you the next video. 63. What are the advanced Layer shortcuts in Figma: Hey everyone, welcome to the advanced Layer Video. Don't skip it, even though it sounds boring, it is super useful when you are daily using Figma. I personally be waiting for this video in this course because I don't know, we've been doing it the long way. There's been a lot of this double-click, double-click, double-click to get inside this stuff. There are shortcuts and they're awesome. Let's get into them. So the first one is, let's say I wanted to change the text and there's undue like we can click to the parent frame, double-click it to get inside, double-click it to get in there again, I'm inside the button and I'm just going down this layer stack by double-clicking. You can eventually get there. And we've finally, I still gone to click on it because I'm in prototype mode and that little dot was in the way. But eventually I can get there and change the text to something else. But there is way better shortcuts. So if you just select the parent that you want to kinda go into and then just hit Enter. Enter just ends up Diving down inside of stuff. Super good to come back out of that kind of like layer stack is your backslash. Okay, so what are your keyboard? It's the one that's slanting backwards. And you can kinda go up and down this Lissa into, into, into can you see it going down over here in the layers and then backslash, backslash, backslash comes out to their parent. If I do want to get to this text here, or at least select everything inside of it. I can just click it once hit Enter, and I'm inside I Snack Bar. Now my delete it or change it. This is a good way of diving in and out of things. Let's do one more. Let's do our button over here, shift to with it selected as the inter. And look, I can actually change the text without actually having to click it and highlighted at all. I just pushed into a couple of times. You go to get out of it. The backslash backs you out of it. If you've hit into too many times, I don't use that much. I said escape. Escape means it's get out of here. Escape again, kind of gets back to not selecting anything. So generally just click on the thing you want. Hit Enter, Enter a couple of times until the text selected, and then we can go back to, I can't move but there was a chord, then mesh escape a couple of times. Next one I wanted to show you is you can actually just leap all the way in. So instead of going you and using the because this one's quite complicated, alright, great for button hitting into you just go down the layers. You can actually just jump to it by holding the Command key on a Mac, control key on a PC, I got nothing selected much. That's just click it. We're in. It dove through quite a complicated card. Can you see it's quite deep, deep, deep. Okay. I'm inside of that and I can work on this and break it. Just Command click things to go straight to them. Background, click on that. Hold down Command, click on this. You don't have to do with the double-clicking we've done in the course so far. Happy Days, or the next one is choosing siblings. So I'm going to click the shift to, to zoom in and I'm going to hit Enter to get inside and it's selected everything in here. Maybe that's not what I want. What happens is if I had tab on my keyboard, okay. Can you see it tabs along what's called the siblings. Okay. So the parent is the wrapper on the outside, things inside of it are the children of it. But these children have siblings because the siblings are just like one level deep. These that is the parent to this and it has no siblings. No. Because there's nothing else in the same level. But at this level, that's the parent. These kids here have a big old family and you can just have around PC. I can tab to the next one, to the next one that can be handy. I don't use very often. You might be dealing with a lot more lists. My problem is is that it falls apart a little bit like let's go inside of this and it's tab or that one went perfectly. So that's a good way of using it and just tabbing through the different variants to select them. And where is this? Find another one that might be broken? Shift one, hurricane. This one is shift to I reckon it is because I've already practiced. If I'm here, I'm on tap down to the next one. What happens? I don't I go up and I tab again, and I'm at the bottom and I'm going all over the place. Basically what it does is it doesn't look at your visual order on your upward. It looks at the layer order over here. So can you see, let's move it over so we can zoom in so far. So this one is that the bottom, even though it's all the top over here. And there's Event Card is underneath there, that one is there. So kinda gets a little bit sometimes tricky when that layer order is not right, I can rearrange them and that will then work. And I probably wanna do that for when I kinda get this ready for maybe my library to share with other people more. If you want to, can go super nerdy and go Shift Tab. It's going the wrong way. Can you see that now? So tab's going backwards. Hold Shift Tab to go the other way. Is that useful then? Some people love the keyboard shortcuts. I do have keyboard shortcuts. Some people would just want to click on them. That's fine too. Again, if you are inside of these things tab gets you out the ejector seat. The last thing about siblings and it kinda ties in with the first point as well as its I just want to delete everything off this. Sometimes you're like, I don't want delete the whole frame. Okay. I want to select everything in it and you end up doing these weeds selections. What you can do, click the parent frame, hit Enter, and it just selects all the siblings inside of it and hit delete and you can just clean things out quite easily that way, escape to get out. The next one here is we've done this before, but I want to include it in this video as a nice little wrap-up of everything. We do want to change the order of these. You can use your square brackets, okay? All right, next to the P key on your keyboard, okay, to move things up and down. So there's two ways of doing it. Just holding nothing down and using the square brackets either open or close. Can you see my layers panel, they're just goes all the way to the top, all the way the bottom. If you do want to just move it up one or two K in-between its siblings can hold Command and do it. You can, you see it goes up one at a time. So now I can say you're at the top tab to the next one. Let's pick this one or the bottom here. So I need to move it up one. So I'm gonna hold Command or Control on PC. And just, yeah, you wanna be there, right? Perfect. No, you're gonna be one down. So now shift tab. I've got this one at the top. This next one there. Do you get the idea what I'm doing there? I'm just moving them around so that the same visual order as they are in panels there. But I know some keyboards out there don't have those square brackets. Okay, So what you can do is command or control forward slash and just typed in keyword shortcuts. And then have a little look at a range and to see what is set for your keyboard. They're trying really hard to get everybody's keyboards kind of aligned. Hopefully there's something in there for you there. Why some of those blue? Some of them are blue because I've used them before. Some of them I don't use, or at least I haven't used in this course so far because I reset my version when I start these courses, you go another good Layers shortcut is right-clicking. So let's say this is somebody else's work. It's quite complicated. There's lots of levels and frames and autolayouts. I want to get the action text, okay? Or at least to see what's underneath here, I can right-click and I can say slick layer. And can you see it's showing me both the parent, in this case, grandparent parent, the thing that I right-clicked. And then in their Snack Bar action, then there's an auto layout, and then there's the texts that I want. You can supercharge that one by actually just holding down the Command key on a Mac, control key on a PC and just right-clicking. And then it goes straight to this same thing just kinda goes directly to this layer list. And you can say actually I want this bit to copy it and then paste it to do other things with. That is the Mastering the layers in Figma. I'll add the shortcuts to the shortcut sheet. Remember that's in the exercise files and I'll try and include them in the rest of this course. Or you can ignore them and be the guy or girl who just keeps clicking into affinity. Eventually you will click things. That is totally fine too. Alright, that is, it's, I will see in the next video. 64. How to find layer Zen shortcuts in Figma: Hi everyone over here and my layers panel look, it is messy. My designer OCD is kinda like flashing red light going. In this video, I'm going to show you how to find layer Zen using a few little shortcuts, right? Let's jump in. Now, Ms. Day. Alright, the first and best one has had nothing selected, which is the escape key. Smash that a couple of times and then just hold down Option or Alt macro PC and hit L. Look at that. Everything just collapses. Well, somebody else's document that everything is everywhere. Suddenly you're working on missing Missy, have nothing selected and hit Option or Alt L. Alright, another handy one is let's say the section here when I go into it and I kinda wanna go into this one and you kinda wanna toggle them all down just like Expose yourself. We don't expose this up, uncollapsed yourself. I want to see what's going on in here. What we can do is it's toilets all up, is we can select the layer first. You've got to select the first and then hold down the Command on a Mac Control on a PC and just click on the chevron, there will be a little arrow thing. And then it just click, unpacks everything, exposes itself to the world. Okay, So that gets even handy. We're actually doing on this page. It's too complex, so let's look at something else. Let's say this Animations page. There's not a lot going on in here. Okay, to expose them all, I have nothing selected. I can just click one, but I can actually just have nothing selected. Member escape or clicking the background, do a Command a or Control a to select everything. And then do the exact same trick. So I'm gonna hold Command on my Mac, control on your PC and it opens up everything. Both, there's only two things on this one, but you can see on this one, especially working with community work, with somebody else has done it. And you just want to kinda like unpicking. You're like what is in here. Just select either one layer or do a select all and select everything. And then just Command click it and kind of tools it up. And it also collapses it as well. So once in the option L, maybe you're just do that. Okay, it's up to you. Here. Select all hold down, command or control. Everything gets opened up. Nice. Click it again, holding that same key, everything closes. Other things, just get your layers in order. If you've got a small screen up here, if you're not using pages, you can actually just click this arrow here and pages go away. If you're just working on one page, you don't need pages. Maybe you've got lots of pages. He's one of them to go away you while you're working, you can use page up and page down to get to them. We can also do is you can drag this bottom bit. If you've got lots of pages and it's taken out lots of room. Just make it smaller. You can still scroll within here. Okay, It's a nice way of tidying it up. And the last thing we've done before is you can actually resize this. Sometimes you're working with stuff to have a look, select all Command, click it. Okay, I don't have any really long names. This one here maybe go Page Up, Select All, and click this one. Okay, it's actually getting quite far down this list. It's actually not that far, but you can drag this in and out at the same space or be able to see all the land names depending on how deep it's going. The last bit of layer Zen actually is going to be into preferences. What happens by default is if I use my rectangle tool or tool, same for frames, anything. What Figma will do when I drag it out can see rectangle 24. If I Option or Alt drag it to get a duplicate. I get 25. If I hit Command D or Control D, I get another 126. So it names them because it sees that last suffix, prefix, suffix, the number of the in there and goes, I'll add one more, which can be handy. Sometimes though it's not Handy. He's one of them all to be called 24, whatever the first name was, you can in your preferences. Okay, So Figma preferences, and there's one here that says Rename duplicate layers. Now you can see my 20s. Even if I duplicate him, I get another 27. 27, 27 up to you, which do I like. I normally just leave it as the factory standard one and then get annoyed when it remembers when I don't want it to. So I'm going to turn mine back. What are their preferences where it's not black or white or, you know, it's needed a half on, half off. There you go. Now you know you can do it. Alright, that's it. From the whole video. If you remember nothing else, have nothing selected, which is the escape key and hit Option or Alt L, and it just tidies up all these things. They did nothing. It's open it up, everything's open and have nothing selected and go Option L Alt L on a PC, It's my favorite one. Alright, all the layers in done. I'll see you in the next video. 65. How to hide and lock unlock all layers in Figma: Hi everyone. In this video we're going to look at hiding things in Figma. Like, I don't know how to do that. Oh, but there's some fancy tricks. Not many, but a couple. Let me show you them. Alright, start with the caveman way is you can click the eyeball on and off hiding layers. The shortcut is Command Shift H on a Mac, it's Control Shift H on a PC, there'll be in your shortcut sheet. In that earlier, you can get fancier and let's say you do need to just hide things up on these three frames here. And I'm going to use my quick actions because there's no shortcut for and it's hidden. Deepen the menus command forward slash or control forward slash to get to my quick actions and then type in hide in a second one down here it says hide other layers. Look at this. Clean and tidy, need them all back. Just hit Command a or Control a to select all the layers and then just use our shortcut again, which is, do you remember familiar. It's like 30 s ago. Do you remember you do it's Command Shift H or Control Shift H. So you can kinda toggle that on and off. And if you're thinking, Can I just select everything and Shift-click these ones to get rid of them, then use my hide shortcut. You get it the same place. Alright, that's hiding. It's going back 66. How to use Locked layers in Figma: Thinking, I hope this is not a video about locking and unlocking layers. It doesn't feel very advanced courses. Somehow I'm going to advanced locking layers you, it's a short video. Good stuff to know. All right, first up looking at layout, the caveman way, it's a little Lock over here. There's a shortcut, Command, Option L, Control Option L. It'll be in your shortcut list. You probably add shortcut overload by now, but that one's same as hide. You hold the same two keys down. One is H, one is L. So hide and lock, kinda tied together. But again, not very advanced courses. We can do that where it gets better is sometimes there are Locked item. So this one here is locked. Okay, what I can do is remember that trick from earlier. Who remembers how I started that list of what's underneath my cursor because I can click it. But if I hold down my command key on a Mac, you got it, control canopy C. And if I right-click, it gives me that nice sweet layer order, allows me to select even things that are locked. And then I can use that shortcut to unlock it so that helpful. It can be anyway. Other things we can do is sometimes you just want to unlock everything somebody else's document. Why some things Locked, you're not sure there is an option. Okay. The shortcut is unintelligible. So what we'll do is we'll do our quick actions. So command or control, forward slash. And let's go to unlock. There's an unlock all objects. There's the shortcut there, Option Shift Command L on our neck and there'll be Alt Shift Control L on a PC. Do not remember that one. You won't use it enough, but the quick actions gives us access to it in or just dive into every single thing on this whole page, on all the pages, just this page that it will unlock it or what are the things that you might bump into is let's have a look. I'm going to look at something complicated, this thing here. I'm going to lock it using my shortcut Command Shift L, Control Shift L on a PC. And you end up in here. You're like down here like these little dots, these dots from we know now, I think as he saw me lock it. But if these dots are in handy, like you're not locked WACC what can I move you? You're like, Why can I still not move you my card. Okay. I can see you can unlock you. It's because the parent is locked. Okay. There you go. Alright. That's all I got for Locked layers, you're dismissed. I'll see you in the next video. 67. How to Find Replace and Multi-select Layer Search in Figma: Hi everyone. In this video we're gonna do Find and Replace, which is interesting, easy. We'll push it a little bit further when we're dealing with really complex Figma files. So let's jump in. Okay, so are all my layers panel here. Not many people know you can do a search in the Layers panel. And let's say I want to find Welcome. I've got on a few pages, I've got both textboxes with the words welcoming it. And I've got some frames called welcome screen. Okay, a nice way you can use it is I can hold down my command key on my Mac, control key on a PC and just select all three of them. They go, there's kinda weed yellow color and freaked me out when I first saw, hey, I didn't make you yellow. It just means it's highlighting it and I can just do some really simple changes size-wise. You might just use it for this simple fact here, select lots of things at a time without having to shift click everything, you can take it to the next level, which is see this little settings here. You can say Find and Replace. So I'm gonna say Find, welcome, and change it with start. Replace All. Okay. It's a good way of going through. It might be some buttons that you've named and the initial design had login. But now to keep everything consistent, it's gonna be sign-in or things like that where you just want to find everything in the document to a Find and Change, undo that. You can take it a bit further and say actually just find the ones because I'd use lowercase, you can say match the case. That might be helpful. Let's turn it off. One thing we've replaced, what I really wanted to do is uncheck Replace. I feel like I could turn it off. Okay. I don't know if you'll find it that way. You just click on Find and you go because when replaces on is not much down here. But when I go back to Find and I go back into my settings, look at those extra stuff. It's talking about the extra stuff. I'm going to turn off this filter option here with match case. And let's up the top here. Do a search for early bird. I'm just going to type an early way too much stuff. Okay, It's been used loads, there's loads of components, frames, instances of those frames, those instances have Variables. It gets messy. It's what you can do is go in here and say, actually show me everything that is maybe a main component. Okay, There you go. There's my one main component and the different variables. You can see it even moves to them. All you might say actually show me my instances of this, lots of instances. But it's a good way of filtering all images that have a specific name. One, find the text, you get the idea. One last little trick is remember we being able to rename everything, say you selected all of this. You can actually just slick them all. Okay, I've got every single thing I might delete them right now. Hit Delete. Don't want to do that. Oh wow. That broke the Figma. Alright. You wait, the onion joint, fix it. All. My tabs dot working. I'm please It's okay. You idea again, I'm back and it did crash and did all the early bird Instances go? They did. And how do I get back? This is good learning process for us. I'll pretend like it was made to be part of the course. I'm gonna go into nothing selected. Go up here. Could you show version history? And in here I'm gonna go back. I didn't save it on purpose, but there are some auto saves from earlier on. So I'm going to click it. See it here. Hey, they're all back. So you, my friend, are going to restore to this version. And if you ever do this like me, you try and work with it and you can't do anything, I can't select anything you've gotta hit Done up the top. It's a weird place for it. Alright, we're where we were doing searches, were doing early bird. We want just the instances of it. I'm going to select it all. I'm going to select the first one, hold Shift, grab them all. Now I'm gonna hit Command R to rename them. Actually, this is bulk renaming. Let's do this in a separate video just so it's nice and square it away for you in the course content Bulk Rename is super-helpful, right? That is it for Find, Replace, selecting multiple things in your Layers panel, maybe making adjustments, maybe changing the text. I'm not very spectacular, but very important way of speeding up your daily Figma Workflow. Alright, Onto the next video 68. How to Bulk Rename Layers with advanced tricks in Figma: Hi everyone. In this video we're going to look at this amazing bulk renaming option in Figma. We'll do some easy stuff. We'll do some cool stuff where we tidy up a lot of our components and instances. And then we'll get really fancy and I'll show you how I can't really write an expression, but I can show you how to copy and paste one to do some FUN stuff in the Bulk, Rename, but don't get too excited. I don't really know what I'm doing with coding expressions, but it's good to know that there. And it'll give you a good example of how to make it work and where to find more info. Alright, the bulk renaming fund begin. Alright, let's start by renaming these super cool Pleistocene icons. I know you'll ask. And the Forum icon eight, K 3D plus Selena. Okay, Super cool. Let's start with some easy renaming. So I'm gonna select these three and I'm going to open the bulk renaming. Now bulk renaming is just the same shortcut Command R or control R on a PC. But because we've got multiple things selected, this kind of bulk renaming window opens. Do we need to match anything? Not in this case. I'm just going to rename there's gonna be icon and I'm going to use an underscore. And I'm gonna say, I want some downwards numbering. Okay, I could delete that and I could make, It's like ascending or descending numbers. That looks me, 123. You can kinda see this, this is interesting ish, this is code for, put a number in descending. I don't know how it works. It's cold. It's a regular expression and I can Google my way through making stuff happens. So we'll do a little bit in this video, but just keep an eye on these. These are ways that the computer can find things in our text, sought through it, organize it there called regular expressions. Anyway, let's say like we can modify them like caveman style. Like it's put in 01, I can put an another N to put in three for lots of ints. You can figure out what it's doing a little bit. There. I got, I want 3001, perfect, renamed, bulk renaming gets bit. When, let's find these in my original icons here, these are the main components, so I'm going to rename these a select them all, use my same shortcut Command or Control R and we're Bulk Rename is really handy is when you want to group components using this method. Because at the moment, Let's have a look at our assets panel. We have all of our stuff just like hanging out in here. Again, if you've got a 1,000 icons, they're just going to end up hanging out here. And I quite tricky to use. Some documents will have 100, 200 icons. So what we can do is we can say all of you people will switch back the layers menu so you can see it. Use my command. And I'm going to say, actually they're gonna be, we're going to rename them. We're going to put them in a folder called when a folder, but a group color icon and then use their current name. So dollar sign ampersand is the regular expression for current name. So it's going to put the icons slash and then their regular name. That's Previews really handy. Now if you did the Essentials course, you'll know that when I do this and you can kinda see it over here in my assets panel. Now, I will have just with my icon. There we go, Page one and my main components, I have icon, but they're all grouped together. Can you see there on one Nice little bit. It does make it easier later on when you go That's use an instance of this. And over here, can you see I've got magnifying glass, but in that same little icon group, I can pick the heart or I can pick the use of regular. It's easy way to switch out between these instances, okay, just using that forward slash. Alright, next thing is, is that I'm going to use this kind of group of icons. Again, you wouldn't have these, so just grab them from any plugin, like on eight is good. And there's loads of free stuff in there. And what I've got here is I've got a solid and an outline mode of the same icon. There's just times we the solid one is required because like we using outlined I'm using outlined here because I liked the look of them, but they're just gonna be times where they're too small against a mixed background. We're actually going to have to pick the solid option, two options. So let's do the bulk renaming. They had selected all you use Command or Control. Odd rename them. And I'm going to say it's N to the icon folder. You do that by adding the slash. Some people like to have spaces either side of the slash. It doesn't matter. Arguably it looks nicer, but doesn't matter. I'm going to say icons are not going folder, use the current name. But also I want to go another level down and say actually, I want to find a solid version, a copy. Then these ones are going to be the outline versions. Let's kick Rename. Let's drag out an instance which I realize now I can't do because these are actually over here. They're just frames. So it doesn't really matter when you tune these into components before, after all the naming of accidentally lift mine afterwards. But we're going to create multiple components. Happy days. Now, drag it to Instance. And over here now, I've got a little bit better structure. So Misenus tidiness look all under icon. Let's say I want to find the delete. And can you see in here I've got an outline or a solid vision handy Another thing we might do is let's have a look at the assets panel. It's starting to get messy in here like all assets panel, a local components, or it's messy, it's not too bad. Like can you see these though are getting all split off. So there on page one and my main components which is handy the beginning inside of icon. So bookmark, now though we're starting get, actually, I want to do something. I want to grab all of these. I'm going to cut them off this page. I'm going to make a new page. It's my pages there we app Plus, I'm going to have my components page. Now, when should you do this? I do it about the sort of stage. You can do it the beginning. Just make sure you go to page with all your main components all over here. It can be just to tidy away for you to work or if you'd like me, I just kinda bump into it, needs fixing. I'm going to spend the next little while getting it working. Alright, I'm going to start by making a section or a frame and just rename it and call it icons. So I've got some way to put my icons. And if paste my icons in from that of the page, then my main components just double-check that got the right icons. They're not instances. And there we go. It's just going to be a bit tidy. Now when you're working with an instance to say actually you, my friend, are all my components page. As you are an icon, what kind of icon? I need the delete and I need the solid one, you go. One thing that might happen though is either Tidying up somebody else's document. Okay, you've opened like the iOS design system or material or something else and you just need to get rid of the lot of structure they don't need. Let's say that you're not going to use the solid ones that gone from your file. What's gonna happen now is you've got this separation. Can you see outline at the end? We just don't need it so we can tidy it up because of the moment we still have this extra step that we don't need. Okay, So we're gonna go, I'm gonna go into icons. We're going to say, yeah, give me the delete and then we're gonna go and pick the outline vision. There's just one extra step. It's grab these, use Command-A and say, I want to find, keep an eye on the preview of here. I want to get rid of all of the outline, not just outline. Bought the slash outline. Okay. To clean it all up, then I can do that. Okay, that just kinda removed a chunk of that naming convention. Now I've gotten instance, it says you are all my components page. You're an icon and I just listed, you don't have to go inside of bookmark and click it one step down or the next thing I wanted to show you is something to do with regular expressions or regex I mentioned earlier. And I'm gonna put my hand up and say, I don't know a lot about how to code it, but I know it exists and it can be handy. But for me, I need help from a developer to help bright some of these search queries. So I've got this example here. We've got the word icon underscore 001. We did that earlier. So I'm going to rename them all. And what I want to do is switch the words with the numbers. There is no option in here. It says pick all the names, okay, and then switch them over for the numbers plots. If we know that we can do some coding in these fields, we should be able to do it, okay, and this is where I'll reach out to a developer and say, Hey, can you help me? This? Okay, I'm gonna walk you through an example and it's basically I just took it from the Figma website. I'll leave the link to this article. It's just the Search article here. And it just starts with a basic one and then has some reference material which is still well above my head. But have a look, you can see some of the search patterns that you can type in. But again, let's just do an example so that you can squirrel it away and your back pocket to know that if you do have something tricky to do, you can probably get help because it might save a lot of time. I'm going to copy this and the match field. And I kinda have understand it's his grab all that upper and lowercase words or letters that also have an underscore in between them. And they're also has, I think that's for all numbers for slash D, K. And find all that, all the, all the letters that has a hyphen between it and then all the numbers, grab all of those. And then dollar sign one, which is the first thing I've pulled out, but actually put the dollar sign two first. So it's gonna put the numbers, whatever. The second thing you grabbed over here, first, the first bit, second. And let's just put an underscore between them so we're able to switch it around from being icon 00120001 icon. Good example, Dan, it's more, I guess just, I want you to be aware that Search, especially Bulk Search, can do a lot more than what's available in there. I mentioned the dialog box itself will upgrade over time to give you more options. But anyway, forget about how bad I am at coding that stuff. And let's focus on how cool those little processing icons or they go. That is bulk renaming in Figma does some amazing stuff. Alright, that is it. I will see it in the next video. 69. How to replace instances and variants with shortcuts in Figma: Hi everyone. We're going to dig in and show you how to switch things out quickly and easily, either with instances like this one here, look, switch it nicely. I'll show you how to do it when it's deep inside of a component which is trickier to do, also had a switch out instances when they're in Variables as well. So that crazy little target thing that appears sometimes as I'll show you how to detach and reset all instances as well. Alright, and it's jumping. First thing is, is there are some icons that you can put into document. So there's a folder now court icons to bring in all four of these, add them to document, make them components. We know how to do that. I'll do it at the end of this video just in case you do get lost. But all we need is components. We're going to use this thing with icon. So let's do the coup swapping. I'm on page one now. I'm going to make a frame just so that I can see what we're doing. I started recording it on the black and you couldn't really see what it's doing. So we need a couple of things. Let's grab. I'm gonna start using this, okay, This Resources tab, It's Shift I, both Mac and PC. Shift I opens it up. If you keep typing, it starts searching. I really like it because shift I opened it. It's remembered components from the last thing I did. And now I can type in hot. I find that it's really easy than using the assets panel over here. So I'm gonna drag this out and I'm going to drag up two versions. Two versions. Why? Because I wanted to do one on leave one untouched. And this one here with the Instances being kind of like smushed. Because I'll show you the difference. Let's find something else that's used. The pencil familiar. The pencil by itself. It doesn't really do anything and just drag it out. And it's very small. And so what I can do though, if I hold down the Option key on a Mac, the Alt key on a PC, can you see this little line appears around them? That little lines is, alright, I'm going to switch you out. And what it did was, is I made those icons really small because it demonstrates that if I change nothing about that original hot instance, the thing I'm swapping it with uses its size. But if I've destroyed it like this, hold on that same key, Alt on a PC option on a Mac. Can you see if I've distorted it? It goes, oh, I'll try and match it handy. Yeah, of course there is the way of going in here and using this and finding your way through the components doing search, I find that option of just holding down Alt on a PC, option on a Mac, and overriding it is super easy. And sometimes it doesn't work and I'll show you the trick for getting around it. Let's say that we want to switch out this here. We've got these guys. If I just use that exact same trick and I say pencil icon, I hold down option, like Dan said, or Alt on a PC. Nothing appears. It kinda just threw it in then autolayout and so it just kinda like dumped it in there, didn't switch anything. What you can do is you can hold down the same key option on a Mac, alt on a PC, hold down command as well. So that's option command, Mac Alt Control on a PC. And you see the line appears now. I have like diving inside and deeper into something. And because I hadn't resize these, replace that out with its new size. If I want to go into this one and this make this 31. 31. Now, holding those two keys down, option and command on a Mac, Alt Control on a PC gets the new size. Let's say you switch out components where at least the shortcut for it, or another shortcut for switching things out is when you're working with variants. So find something in your document. Components set, you're looking for the variance. I'm going to use this text here. I'm going to hold Command and click Control, click on a PC just to kinda dive inside of my variants. And some things will have a target next to it. Somewhat gay and little tool tip is giving away what we're doing. Can you see it says, Hey, would you like me to select all matching layers? Okay, you got awesome. They can go through and say actually I want to change the font size or the color or say you want to switch it out. Let's say. But here I've clicked on the outside of this. It recognizes that there's more than one. There it is there. And I can say actually switch it from its price to, I don't know what else we got in there. The upper Nav, not appropriate, but it's a great way when you do end up with lots of variants inside of a components yet, and it explains why sometimes there is a target and sometimes there isn't. Why isn't the retarget here? These will look very similar. The two different It's looking for stuff that looks quite similar. Gets to a point where I'm not sure if you have this example or not. But you can see on my one, Let's do this. F I command click this. It says, Hey, there's more. You go sleeping for me, like me. Why didn't you pick that? Okay. One of the things is looking for is obviously it's text and it's the right font and the size. It's looking for those things, but it's also looking for the structure of the layers. Okay, so let's have a look. This one here didn't get picked. Command clicked it. It's because these ones here, it, his buddy. There is an instance inside of, directly inside of it is the child of the texts. Whereas this one here is this the Instance inside of it is another wrapper or frame. And okay, so normally allowed inside of that is the text. So it doesn't know how to jump deep into layers or at least it doesn't at the moment chick use sometimes though instead of replacing instances and changing variables, you just want to like break it all apart. So there is a cool newest feature where let's go Shift I to open up our components. Let's type in COD from the thing we made earlier. And I'm going to drag in this, this is quite complex. Remember over here and my layers panel Okay, Let's have a look at reopen it. All right, hold down Command on a Mac, Control on PC and it should spill it open. But you can see I've got an instance inside of that. As an instance is an instance of the bottom part which has an instance of price and just everything is tied back. Sometimes you just like leave it alone. I don't want everything to be Instances. I just want to smoosh it all apart to be frames and not connected to anything else. To do it with the card selected, sediment you a quick actions. So command or control, forward slash. And if you type in detach, detach instance, you want to detach all the Nested Instances because the moment detach instance kinda works, but all of these still stay in there. Can you see? Whereas if I undo that, hoping quick actions, use detach all instances. You'll notice that are looking at this command click, all of it is being broken apart. It might be that using somebody else's work or you just want to kind of a fresh start and kinda pull it all to pieces. There's no real good place to go find it. So just use quick actions and just remember, you can detach all Instances hopefully. Alright, let's close a little lab. Who moves the shortcut hold down Option and hit L or holter. Now, just all the layers collapse back down. Thank you very much. Last shortcut is when you are working with Instances and you don't wanna delete them, you want to smash them, fights want to reset them all. You can right-click each one and go reset all changes. Obviously, you can use your quick actions as well. You can do is actually you can slick a lot of them. Okay. And did them all in one big go to say go back to the way you were meant to be resettled changes. You go tiny pencils. So that's how to reset all your instances, alright, and then it's gonna be it for like the shortcuts. So we're gonna be learning. What I'll do now is I promised at the beginning, I'll show you the bits I skipped to get to where we started. If you're happy with making multiple icons and doing the renaming thing, totally fine. If you need a little bit of an extra look at it, I'm gonna do that here now. I've reset everything back to before we started the video. And I'm gonna say it's bringing some images are some icons. I always nearly always drag in from a Finder window icons to just drag them in. Okay, I use my mouse Zooming in, hold command and use my scroll wheel in and out. And I'm going to make multiple components. Great. Now I'm going to rename them Command or Control R on a PC. And I'm going to put them in the same kinda like subcategory that I had before. Icon slash. Why? Because I want them grouped with those other icons. So they're gonna go into there. They're gonna have current name. And I'm going to hit Rename. And again, a kind of work. It's jumped to our assets panel. So Alt to under my Components now I have two. Why don't I have two of them is because these ones that I just made haven't gone in to the section that I made does have a look. Some reason when I dragged in my images from my Finder, they didn't go inside that section there. So there will actually kinda separated. To have a look at my Layers Panel Option one. These are the guys that are brought in. They didn't end up in here for some reason. So that's what we're gonna do getting there. Now, when I look in my assets panel on to components, there's just one group of them. Alright, and so that's how I got started with this course. Dragged them in game names, make sure that the right place we go, alright, that is it. I will see you in the next video. 70. How to use Instance Swap Component Properties with preferred in Figma: Hi everyone. In this video we're going to look at something called component properties. It is a really underwhelming name for something that is spectacularly good when we're getting into complex components and is a really good way for an alternative for Variants. Just a quick overview. This one here is what we've been doing traditionally in Figma and what we've been doing in this course, we just make a button and we've got three instances of it. This one here does the exact same thing, but then it's missing all these extra bits. But that is what the component properties does. In this case, there are a few different component properties. We're going to look at the one called Instance Swap and to quickly demo what it does. I've got two buttons, the old way I go through and pick the badly named variance. Well, the new way, the yellow button, okay, and the yellow button over here has an lovely little thing saying icon, which I can do you want to either done, do you want the Plus, you want the pencil, I guess picked from it. It's easier for the person using the button, somebody in my team meeting the future. But it's real power is here where I didn't have to create all these components. It's just one. I switch out this instance using one of the component properties. And if you're like, Hey, there doesn't seem like a whole lot of work. It's when variants tune into something like this. Don't, don't, don't check out the fields here. Look at all the different variants you need in a field using Google's materials, so many options that we could cut down to something that looks and works a lot more like this. Alright, let's jump in and I'll show you how to put one together. Alright, to get started, I all my components page, I made a buttons section and I drew something that looks like a button. It is just an auto layout at the moment with a background color in some ticks in it. Now we're going to show you the bad way because I feel like it's the only way to really appreciate and understand the new fancy way, the way I needed my head anyway. So let's take a borderland, it's converted into a component, okay? I am going to have variants of this component, three of them. Okay? I'm going to add some instances. That's why this thing is called an Instance Swap and will only work when you do something like this. So shift I, okay, I'm going to find what are we got ticking there is a done. There it is. Okay. So I'm going to drag in this. Okay, There we go. Doesn't quite fit, resize to fit. So I'm going to have an instance of the tick and I'm going to have an instance of let's go icon and just have an instance of the pencil in there. And Shift I go for the Plus icon. You need these Instances in here for this thing to work. So this is the wrong way of doing it right? So or not the wrong way. It's just the way we've been doing it from now. We've made this thing called button a great. And for me, I had to kinda make three versions of it. Not a big drama, where it becomes a big drama is when you have to do something that's more than three instances. I found this one, shake out of this. That is a main component and these rule the Instances, my goodness, it's probably the most complex one I could find. This is Google materials Dropdown input fields. So this feels really easy, but obviously you can get a lot more complex. On the other side, the person who's using this goes to the component library that you've shared with them, opens this out and goes, alright, Dan is button a. There's different properties that he hasn't named, okay, but there's variant 12.3. So that's not a big drama, but watch this gets better. So I'm going to make a duplicate. I'm going to attach it. Can you fill color and you color? Here we go. So this has nothing to do with this now, these are all separate. What to do now is we're going to make it a component like before. Let's rename it and call it button be. And what we're gonna do is instead of making variants, what we're going to say is because there's an instance here, which is our tech. We can say, I would like you to add over here, okay, duns come from the name of my icon, but I want to add it Instance Swap. It's this thing here. It knows it's an instance. So you don't click on the outside button. You click on the Instance inside of my component and you say actually I'd like you to do an Instance Swap please. In the instance name is gonna be icon. So people that are gonna be using this, I'm thinking ahead to the person using this now saying There's gonna be an option says icon, and they're gonna be able to add some preferred. This is where this gets really good. You can say it has done, but I also want them to be able to pick, Multiply, which I need to rename to close, add. Let's add the pencil, but I don't want the bookmark or the delete. There's just no reason to have it for this particular button or any buttons. It's used for something completely else. Let's click Create property. And the nice thing is that thing that I made looks kinda nice and clean. Let's bring in my Shift I and let's type in button again, the strike this out. I'm the user using it now I say, Alright, Ronnie to button, to animate this sweet button. Here you go. Alright, what options do I have over here? You get this new stuff. This wasn't there before. But now I've got this Instance Swap, this is done. And they can pick from these only the three. If you've ever worked with a document with like say 100 icons on it, this huge list of the lip here, whereas here I can just pick the preferred ones means the creative can say actually, I can only use these three. They can go and swap them. So I really wanted to convey how awesome this is. I guess we're going have to do another couple of videos when we make something more complex, I think as the only way, but let's just quickly recap. So for me as the creator, mine looks a whole at tidy and you might be getting stuff now, would you like where the variance, how would these hidden other people's work? So I've got my main components selected over here. I've got this Component Property that has got this as this little diamond here. That's an Instance Swap. You can have more than one Component Property. We'll cover them all in a minute. But you can say in here actually the person needs that didn't need something else. They need to go into default needs to be a the plus and also for the preferred ones. And people are using the delete and you're like, You can't use Delete, Stop using delete. What they really need is they need to be able to add a bookmark for this button as an option. For me. I didn't have to go and make another variants which from around autolayout, the mouse, it's nice and tidy and for the user when they're using this button here, this is the one that dragged out. They all need to do is go in here and say, Hey, what am I allowed to use? All the preferred options? And if they're like, Hey, I really need that trash can one, I don't care what dance is. The default is preferred, but actually they can get to all of the components within a library shade to you or local Components. Now I can go and find my icons and dig in and grab every single one I want. I can override it, but it just makes things tidy about like what you can and can't use for me as the credo. And the user just gets a nice little dropdown to pick from stuff. Alright, that is component properties for an Instance, Swap, super cool. Alright, let's look at the next one in the next video. 71. How to use Component Text Property in Figma: Hi everybody. In this video we're going to look at the Component Property called text. It allows people to go into the Properties Inspector here and actually go, I'm going to change this to sign up without having to dig into the button. Is that useful? I don't think so, but does the advanced course, and I betcha, there's something important about that Component Property than I really don't understand. It's either that or Figma has bigger plans for the future. So Let's learn it, know it's there, and then we'll move on to the other component properties. Good way to move to the start of a video. Dan, who wants to this video now, do it with me anyway. Alright, to get started, I have a button. It is a component in dealing with the main component of this and it needs to be text and the inside, the thing to watch out for is under the Properties, my component properties. This is the thing that we made in the last video. I'll Instance Swap that we called icon. In here. Let's add another property by selecting the text. If you go down towards his content, you'll have to do some scrolling in here, find content, and here you can add Component Property, okay, the text Component Property. And basically all the defaults are good here, ticks is the name of the Component Property and the value like the kinda be changed, you put something else in here. I'm going to leave it as button, create property. And what ends up happening is this turns into a little pill, but what ends up happening for the person using it shift I am Button. I got rid of my other buttons. Okay. I just back to the L1. When they drag this out, they've got under our Button be Component, they've got are Component Properties, okay, and we've done this before. We can switch it up to plus, but they can change the text in here. Now. Sing up. Hello, sign up. There you go. Now, why is it useful? Say the beginning. I'm not sure exactly what it is for. I imagine we'll be able to inject stuff into this at one stage outside of Figma or using some, I don't really know. But you can do it. I can kinda see how it's useful for the person that didn't have to go in and double-click on this and change it. Okay, they can just do it all on the parent here. Then I have to dig in or hold Command or Control click to get inside. Is that a saving? Yeah, maybe it's not, but I bet you there's something that I'm missing that this little ticks field is gonna be awesome width, you might already know it's let me know in the comments, but it's another one of the component properties, a nice, easy one that I can't seem to find it useful. The ego onto the next video. 72. How to use Boolean Component Property in Figma: Hi everyone. In this video, we're going to look at the Component Property code boolean. It's a crazy old word. What does it do? We've learned it before when we made variables with things on and off. That's the kind of Boolean way, true, false, yes-no on-off. We've made this where we can do this little toggle switch on and off. But we're gonna do in this videos get fancier. We're going to create one main component, and instead of having a couple of different options, we're going to build it into it using the Component Property could Boolean and end up at the same place so I can turn things on and off. But it saves so much time in these variables here, and especially when we get into multi dimension variables. But for the moment, let's make a nice, easy one to get our head around this weird word Boolean and make it happen in the component properties. Alright, to get started, I've got two separate main components, buttons see and Button D. Let's do it the wrong way, not the wrong way, just less advanced way, Essentials Course way, nothing wrong with it. But when you do get into more complex design systems, you end up down here. And we don't want to end up down here. What we're gonna do is we're going to make a variant. Remember this is the wrong way. I'm gonna go insides like my icon, I'm going to hit Hide, which is Command Shift H or Control Shift H on a PC. Okay, and what I want to do is I want to name these. I'm gonna grab the component, set, the property, want to give it a bit of property name to say, does it have an icon? And let's go into this and say yes. And if I use yes and no, Okay, that's a Boolean. It means on-off, true, false, yes, no. And the cool thing about that is that I can say this button here has this little toggle switch. Awesome. So let's do that more fancier. So what we do is we don't have to make a variant because Boolean is one of the options. We don't do it here properties what we do is we go and find the thing we want to turn on and off, okay minds my icon. And what you wanna do is kinda tricky. Took me a little while to work out with as well as under layer. Okay, So not at the top here under properties, we want to go on this layer. I want this option here, okay, create Boolean property. And it kinda knows true-false, kinda done already. I don't need to do anything else. You go. There's my main component, Tidying than this one. Okay, but when I go to use it, shift, I drag out the button here and I can go up here, look, a little toggle switch, does the same thing. Nicer. So Boolean can be anything that is a yes-no on-off, true-false. Okay, where's the Instance Swap? Remember early on we had to use an instance in here you can see my components here was an instance of my icon, whereas we can do it with the actual text as well. So this text here we can say actually down here, I want to find the layer, whereas my layer there it is there. Okay, there's that Boolean option here. We're going to create a new property that says just Text true, false. Now this instance over here has two of them. We can have just the icon or we can have just the text, we can have nothing and it freaks out. Both of them, sorry if you didn't both off, it doesn't know what to do, but then you go Boolean. Awesome. Alright, let's start combining them all in the next video. 73. How to make a input field using only component properties in Figma: Everyone, in this video, we're going to look at our component properties in a little bit more detail. String a few of them together. We're going to make our text label. We're going to do it with an input field where this easily can become loads of different variants to make all the different options possible. But we're going to use our sweet new tricks to be able to do this where this is the main component that has all of these different options. Let's have a look, see the little required field and turn it on and off. We don't change the label. Do you need the helper text down the bottom? Yes, no, change the words in it. But what if we need the red line around it? We can go, let's just use the arrow. One look at that's super tidy and a really good example of why component properties are awesome. All right, let's jump in. All right, first up, I'm going to draw that input box. I'm going to do it in speed mode. You make one similar. All right, so there you go. The one thing when I built this was I kept these two separate. Okay. The asterisk, it's like shorthand for required field or mandatory. I kept that separate so I could turn it on and off. With this, I didn't make this an auto layout. I put the text on top of the frame, not inside of it, because I want to later on, like I showed at the beginning, make the outline change. Color, color change is not one of the component properties at the moment, but we can do instant swap. So we can switch that out. So we can switch an instance of this out. Cage is the background, but I don't want to switch the text, text name. Switch the background color. All right, Now it's a matter of making it work. So what we'll do is we'll say, let's do the easy ones. First of all, let's select it all and make it a component. Okay? And let's give it a name. It's going to be called Input Field. Cool. So let's do the easy ones, like the booling. So we're going to click on this and we're going to go inside of it. Okay. And we're going to say, over here, look for a layer. Look for that little icon. Okay, click on that. And that's all we need to do. Let's get an instance of this working shift. And let's type in input. And there we go, main component. This is my instance. Okay? And we're going to say you have this cool little toggle switch. Is it required, is it not? Let's do the same for the helper tech. It's not needed for all of them. We've wanted it as an option. Okay, so I've gone into my main component. I'm going to find my layer, there it is there. And I'm going to say there's already one called show as as that's what it is. I'm going to create a new property that says perfect. Thank you. Now, down here, I've got two toggle switches. Show that one. Show that one. Happy days. Anything else I need to turn on and off? Probably not for the moment. Let's put that input text. And I might have to concede now that with three bits of text in here, maybe that text component property is better than I thought. My instinct to grab all three of them and see if I can make down a content member. Content is for the text. All right. This little section here that says content doesn't exist anymore, little UI change. Figma now has moved it, okay, and chunked it into the text. Let me show you. You can see here, there's my text. And they just moved it to be part of this whole tile. There is no content anymore. The times that are going to content. Just look for the exact look for this little field here with the bull in here that is going to create our text property. No more content mixed in with the text. All right, carry on. These things are everywhere, which is a little bit confusing. But look for those icons. Under content, it says Mix. If I click this and just click okay, they all become the same thing. They're all connected. Now if I get them down here and I start typing, okay, where is it label instead of label, I put in sample text, Okay? Or sample at least, can you see they all changed? That's not what I want. Okay, So I'm going to undo, I'm going to do it individually. Click on Label, Find down in Content, find the sweet icon instead of just the word text. This one's going to be label. The value can be labeled. That's fine. Sample text here, Same thing, not that one. We're going to create a new property. Sample text is probably not a good name for it. Let's call this one field text. This last one here is going to be on new property one. That's going to be called helper text. All right, so why am I conceding this is actually useful? Watch this one. When somebody drags out a new version of this, they can go through and say, oh look the label for this one is say name. They can tab down, okay, just tab on your keyboard. And then you can put in, you know, whatever you want in there. And then the helper text will be first name and last name. All right, I'll take it back. That's kind of useful then clicking all of this. One thing we're going to have to do now, it'd be nice if these were together at the moment it says show helper text. Okay? But then the imput of helper text is down there. Rearrange this. Okay? After we've created it, we need to go back to that main component where we're doing all the main work only in this one. Those little lines are repair, can you see them there? So what we'll do is probably the most important. Actually we'll do it label at the top, because it's at the top of the stack here, that's the label text. Then we'll get it. Do we want it to show the asterisk or not? Then the helper text probably needs to be down underneath the helper text, actually, probably the other way around, right? Show it first and then be able to type into it if it's shown. We look at this now. Does this make more sense? Change the label, say e mail? Do I want to show that it's mandatory or not? Then there's the text field. Okay. Smith, do you want to show the helper text? Yes. Okay. Then what do we want in it? All right, that makes mostly sense. I need to change the name of this because this one here show Asterix is probably not that great. You do the same thing when you go back to the original one. And you can edit these as well. Okay, so you can just double click them here. We might just put in on or off these makes sense when it says show helper text, but we'll just make that required over here, on off, nice. Now there wasn't a really good use of an instant swap, okay? Maybe had an icon somewhere in here, it's an arrow or something like that. You would do that. What I'm going to use it for as a bit of a hack because what I want to do is have an error option, basically the red line that goes around to show that this is a field that you've either missed or got it wrong. Or not enough characters, too many characters, that sort of thing at the moment. Okay, if I click on this, there aren't. If I go to my properties, there are only variant booling, instant swap, and text. You might be watching this and go, hey, there's 40 more of them. Dan, I'm expecting that this is reasonably new. I can see in my head all the different ways that you could do this. Okay, it'd be great to be able to switch out color styles, font styles, everything from the styles I reckon's gonna come across. Let me know in the comments if there is new stuff in here and if it's just a small thing, I'll let you work it out. But if it's, you know, if they've added loads, I'll come back and re record it. All right. So how are you going to do that red line around the outside? Hmm. Have a think about it yourself. Pause it and think, how would you do it? All right. How am I going to do it? Is I'm going to do it with this frame here. Okay? I'm going to call it field. And I'm going to actually make it an instant, so I'm just going to drag out the field here. Okay, so it's outside of my main component now. Nothing to do with it. I'm going to make two of them. We're going to have commander, this one's going to be field era. This one is going to be field default. That's the one we've got. Now let's do this one. I'm just going to change the stroke, do it big red. What I want to do is I'm going to grab this one. What I want to do is I want to make them both into components. Multiple components. Separate ones. Okay? This one I'm going to switch back into here. You can see here, it's just a frame. At the moment, I'm going to go copy. We're going to use that sweet shortcut command shift R or control shift to switch it. Now, it's not just a frame, It is an instance of this. But because there's an instance, I can now go to this main component and say add an instant swap. How do I do it? Under properties here, I'm going to hit the little plus and I'm going to say I want to instant swap. I want to go inside of it and pick the instance first, okay? Then we're going to go in here and say, this is the default field, I want instant swap here and I want to say which ones can you pick from just from field default and field error. That's it. Hopefully now you can switch that one out to error. Oh man, look how good that is. We've got just this thing here. We've had to have a couple of extra main components which we could delete now because there is an instance hiding in there. Hang on. No, you can't. I've come back from the future. You can't delete those main components mainly because I can restore this one. Okay. Comes back, there he is. Where's my error one? I can't find it to get it unless it's been used somewhere. Okay, and it wasn't used anywhere, so it's kind of like gone forever. So I'm gonna undo loads and go back. You wait there. Alright we're back. So let's not delete them. That's not good practice anyway. We're just going to hide them so we can't see them. There you go, you'll be over there. Still pretty tidy though, right? Got one main component that does a lot of work, so our instances of that are really easy to both create and adjust, but even better, it's for those people who are going to be using our amazing component has this lovely sweet little panel here on off too easy. All right, that is it. We have tied together a couple of component properties. We looked at instant swaps. We did that for the back of the field with the red line around the outside. We also did text and the bullion to turn things on and off. All right, that is it. I will see you in the next video. 74. How to Combine Variants with Component Properties in Figma: Hi everyone. Hey, in this section so far we've learned a lot, learnt, even learned a lot about component properties. We looked at Boolean and Text and they're all great and they save us so much work when it comes to creating our components. But there are limitations. So you'll end up combining both component properties along with the variance that we know and love is just some things Component Properties can't do, at least not yet. Things like color changes, especially if you want to add Interactions like a hover on a button like we're gonna do here. Size changes can be done. Picking out new colors, can be hacked to get done, but it's probably just easily using a variant. That's what we'll do now is we'll build out kinda like a real-world example of mixing component properties along with more traditional variants, will make this thing. Okay, it has a lot going on. It can do so much. Bought was still quite a minimal amount in the components set. Alright, let's dive in. Okay, to start with, I've got something that looks like a button. I'll call it button main. It's a Auto Layout and it's got an instance of an icon in here. It's converted into a component and let's create variant for it. Kinda mixed in with all of this now, okay, so I can create a new variant property to one of them. Okay, the second variant is gonna be cold. Hello, Rename the property to state. Okay, so we've got a default, state of default and a state of hover. This one here I'm going to command click the background. Okay, so I can get to the fill, just make it a bit darker. There we go. So one of the things Component Properties can't do is in directions, okay, So when a hover above this, I want it to change color. We can't do that with Component Properties. So we're gonna do with variants. So shift E, let's say you go to their onClick know while hovering, change to the hover state. And let's do it. Dissolve. Alright, previewing it. And we've got my little preview sit up here. The one of the problems at the moment with states that quite new and they don't allow you to have flows to start here for previewing it, you still need a frame. So I'm gonna do is keep everything on my kind of components on there. And I'm still going to hit the F key and pick a phone. And I'm going to put an instance on this one here. So Shift I am going to type in button and Button main areas. Now, I should be able to start a flow there. Preview it, put it over here with all my other stuff. Go. There's my button. If I hover above it, there we go. That interaction needs to be done with a variant. What else needs to be done with a variant at size? Something we can't do. So what we'll do is we will stick the outside, make two more variance. Okay, actually, I'll duplicate the ones I've got. So I'm going to slick you and you. And I'm going to duplicate both of those, these two here and design, I'm going to just change the, I'm gonna go, I don't know, plus eight pixels and maybe Plus for those is gonna be my large buttons. So first of all, let's wrap this. The shortcut is crazy like Command Option Shift R. How I remember that one, it's Control Alt Shift R. Okay. But it's probably easy just to click the button up the top. Yes, this one here. This is kinda get the components set to wrap around it with the components sits selected lids create that mu variant property, okay? This one's going to be called size. And the default, fine. I'm going to grab these two and say you are size of these two here. Size of default. Perfect. So over here now I have got ah, button instance that has to variants. When is the state? M1 is the size. Okay? I haven't updated this states on these two. And U2 are a state of you, a note you are default and you are a state of all Java. We go. Now over here, we've got you and we've got state of hover and default. I'm not going to change the state. I do want to change the default to the large one. All right, everything's working perfect. Let me create a secondary color just, I'll do it in Speed mode just so we can get to the good point of like weird. We then add a component properties. Alright, so there, Yeah, Another thing that we need to do in variance is a big color change like this. Alright, so let's check out our button. We've got size, good default, colors, secondary or default, Great, regular, old variant. Okay, So if there's size changes, color changes, and if you want to add Interactions will still use Variants. Bad. What ends up happening is, I'll speed add the version that is missing all of the pluses. You wait there. This is where component properties come in. I've added a variant that has no icon. It's doubled. What I had up here, kinda ballooned my buttons out. It totally works over here. I can pick the option that has no button or button large. This is getting quite complicated, so I'm going to undo and do it the proper way using Component Properties. Okay, So what I wanna do here is I want to say you are going to double-click. I'm going to grab my icon, not the vector on the inside. I'm grabbing the wrapper that I'm using of my instance. I'm going to say actually you have trying to find the right icon on the right layers. In this case it's under layer. I want show icon. I just wanted to go show icon. Here we go. And I'm going to now apply it to all of them. This is where that trick earlier on. So if I double-click to grab this, can you see I can select them all and say apply because I've already made it. I can just toggle it on. Alright, so now I didn't have to duplicate that whole set. I can go over here and say actually icon on and off. Can you see the power of it? Now, button is a good example for me to show the hover interactions and the different sizes were component properties come in is for that kind of like more to do with like things like cards that were making. If we had to have lots of versions of these, it could be tricky, especially if you're just turning things on and off. And like we saw before when we're doing all fields here, well, there's lots of things to be turned on and off. Icons to be turned on and off. Awesome. Alright, just to complete it before we go, is I probably want to grab you, grab all of these by hitting the little target find layer. And I'm gonna say, I'm going to add a new one that says show text. It's going to be true. And it means now I can say on this button, I can see the text on and off. Same with the icon. Actually, we've already got the icon off. What I probably want to do with the icon though, is have a way of switching between different icons. So it is different from the layer one that we did show icon. We're going to find it here. There's my instance, I've got an instance. I want to find that little icon there. And I'm gonna do the Instance Swap. And it's gonna be this one that's gonna be my default value. I'm going to add some preferred ones. Okay, I'm gonna say this and that, and maybe that. Excellent. Now, again, I didn't have to duplicate it, especially if I obtain icons. You didn't have having to make ten more sets of these to have a little different icons and then turn them all off. Another set. Man, it gets big. Now I can say you Instance, this one. So tidy. Let's do the last bit of Tidying. Two more bits is the text. I probably want to under content. Remember, I want there to be editable over here, which is growing on me. Okay, Text primary button, great. It means that people using the instance my other team members can go through and change the text over here to be sign-up. And last, but a Tidying is probably getting this into some sort of order. We do it by using the main component K or the components set. And we can drag these around. So we can say probably the most important is gonna be the text and we can drag it up. It can't go past these variants. But the top of this list show icon on and off. Let's put showed text probably after this one because it's less likely to use show icon. Yes. And then pick the Instance that seems right. In terms of the state, probably don't need that at the top. I need that state there because I need the interaction. But it's not something somebody who's gonna be changing. I don't think size and color probably color, size, state has how I think this should appear to be able using my project. What color they want, what sizes it needs to be. The text that's going to be in it. Maybe show it takes should be above. Do I need the icon or not an impact the icon, alright, that is a combination variance mixed with Component Properties. And what have we saved? We've got this, which is still quite a lot, but especially with those icons. And I needed for them, ideally for more sets of these duplicate, duplicate, duplicate to show all the different icons and the different sizes and different Hover states. Batman. Alright, that is it a bit of a mesh up, a bit more of a real-world project. Alright, I'll see you in the next video. 75. How to apply component properties to existing design systems: Hi everyone. Hey, we've gotten an existing design buttons system here. It was built at a time before Figma. Hey Component Properties. And they'll be lots of times either with your own existing work or documents from the community. We want to go through and say actually, I want to combine it down and use Component Properties. And it's kinda allow us to do something like this where instead of this many buttons or we need is this mini, which is handy both US for organizing for the people using our buttons and the team. But really the video is, I want to show you the kind of shortcuts to be able to make these updates in Bulk quickly. Whereas up until now we've been building them as we go working on individual parts. So bulk changes, bulk updating, and a good example of updating previous files to a newer fancier format. Alright, let's dumping, alright, what we'll do is we'll work on this one to get it from the community. If you do a search in the Figma community for Material Design button, probably Edward move and you'll get here. Thanks Merv, gorilla and open it in Figma. If you can't find it, I'll leave a link in the bottom of the class projects. There is a link there to it. Directly. Open up a version for yourself and we'll see how much we can cut down some of the shortcuts to make this easier and less painful. Alright, so let's go to the button variants page. And what we're gonna do is try and like we could work on this whole thing that we'd be at this for awhile. It takes a little bit of time to reconfigure an existing design system. What we're gonna do is just tackle this bit and I'll show you some of the shortcuts. If you're having to tackle it yourself, there's nothing wrong with this. It's just quite big. I pick this one because it has left and right icons, which is going to make a good example. And what I'm gonna do is because this is an existing design system that other people might be using. I might just leave this alone and then make another version. So I'm holding down the Option key, Alt on a PC. To leave this alone, it might be in a shared library. I don't want to mess with it. What I'm gonna do is hopefully cut down this lot. Actually, it will put them over here so we can be all amazed at how much we saved. So we shouldn't need these ones, right? I need just one version. And what I probably need to do is add both arrows and so I can easily have none, right arrow and left arrow by using our boolean toggle. So these are all instances at the moment, I'm going to break them apart using Command Option B or Control Alt B. Now that just Autolayouts them into a component, don't open. Everybody do that. Command. Shift K is bringing an image where I want Command Option K. And that's not even what I want either. I wanted to say all of you guys, I wanted to make you into a component set. We could make multiple components and then combine them is a variable which makes it components set up to you. I'm just going to go undo and go straight to make components sit with a bunch of variables in it. Alright, so I have a look. So what I wanna do is it's a little bit of copying and pasting. Let me show you some stroke That's because I need this right, left arrow to be inward, this one. Okay, so I'm going to hit Enter to dive inside of the parent and hit Paste. And then I can use my left arrow to kinda toggle amongst the siblings. Now I want to, for all of them, what I'm probably going to do is go. If you click off, I'm going to click once hit Enter, and that selects all the siblings. I'm going to copy it. Same for this. Enter on my keyboard, select all the siblings deleted, click it again, hit Paste. And I'm gonna do that for all of these. I'm gonna do it in Speed mode. You weight them. Alright, I feel like there was a faster way of doing that. Let me know in the comments if you like, Hey, when you just do it this way, everyone else have a look down there to say if there was a better way of mass-producing that. Okay, so we've thrown everything in there. Now what we wanna do is add all of our various component properties. And what we're gonna do now is not do them individually. We've been going inside and finding this and going finding the layer and saying, okay, on the layer, I'm going to have a boolean where I say on and off. What we can do is actually grabbed the components set, okay, and just do it to this. We're going to add everything in one big go and then go through and edit. So what do we need? We need a couple of things. Some properties here. Now when you've got the whole thing selected, you've got the justice one Properties option layer doesn't have it specifically. So what we can do is we can say, let's have boolean. Okay, this one's gonna be called Icon lift. I'm going to have another one. That's gonna be icon, right? Because that's something I want to turn on and off for them. I probably want to do something with a text to say text is going to be button text. I'll apply that. Don't hit enter, create Property. Other things I want, I'm going to need already got one property here. Let's edit this and say this is gonna be my state. And I want another one that's going to be a variant. Remember before we worked out the country size and color. So we're going to use that one. We're gonna do a variant that is due with the size. Alright, so let's go and apply it. Now. I've got this, let's click on this one here. Use our sweet target and say, I would like to apply the Instance Swap. I don't have another instance. We could add that. But at the moment in this document here, because actually 12 and I don't need to swap this out. I just need to turn on and off. So not this one. I'm going to find the layer and say, I want the Boolean of ICANN left to turn on and off. Can you see that you kinda added it to the components it, and now we can go through and easily and quickly say, actually, I want the one this is right. Rather than creating it as we go, text again, click on this. I want the ticks to have under content. And because we've already made it, when we click on it, it doesn't make a new one. It says, oh look, there's already one. You can make a new one. But there's that one. Size-wise. It's these ones here. Actually state wise is going to be default. That's what I want. This one here is going to have a new value of hover. This one here's going to have a new value of on click. When you click kinda goes dark and there'll be a disabled or inactive. So let's add another state, and this one's going to be in active. Alright, next one we want is size. So we're going to say all of you fellows are size of default. You're going to be large, large for just all even hear all going to be a size of you get the idea. Now, I'll speed this bit up. Alright, shift I, I've got my button, I'm going to drag it out. And hopefully now I've got the different states, okay, I've got the different sizes generally to play around with the layer order here. But I've got Icon left, an icon right? And I can change the button text. We've gone from this chunk here, okay, to just this one here, which is really nice and tidy. And it's a nice way to tidy up previous existing design systems that you either get from somebody else on the community, somebody else and your team. And one of the big things we can do is we can do a lot of things in bulk by just applying them to the component set. Then using lots of our nice shortcuts where we can use this little target to select them all and apply them all in Bulk. Ideally, you'll add component properties as you're making them. But there's gonna be lots of legacy stuff around. There were just built before this was a feature in Figma. There you go, updating an existing design system and adding your component properties on top of them. Alright, that is it. I will see it in the next video. 76. What is Simplify Instances in Figma: Alright, so there's two parts to it. Let's look at the component properties at the moment. So what you do is you select any main component. It doesn't have to have variables. I'm going to use this one here just because by default, if I look at the instance of this button, you can see there is all the effort that are put into component properties. But look at all this other stuff that potentially somebody who's using my component, okay, the rest of the team, the client that I've designed, this foreign Figma, okay, they have access to all of this stuff. I don't want that. So what I can do is and go back to the main component, go to the component name in your Properties Inspector, one's called button main. There it is there. And I click the little settings. And there's this thing, Simplify all instances. And what it does was, is now and I look at this, can you see all that stuff down the bottom has gone all the fill color, the stroke that affects any of that stuff is just tidied up. They can still get to it until this. But what we're trying to do is make it easy to use and I'm going to turn it on and off. I don't know how to reset it. I just do that. Okay. And it's back to being nice and clean. We're trying to focus the people on using this when they using it. Only things that I've said you're allowed to adjust. I don't want you to adjusting the effects fill the stroke, just wants you to be working on this stuff that I have laid out in my Component Properties and Variables, that's it. And touch anything else, please. And obviously they can if they need to. So that is the Properties Inspector. Let's look at the other thing it does. I'm going to jump page down to the next page. I'll use this card here that we made earlier. And this is the instance of that card without anything added to it. You can see, I can see the text and the price there is this price instance over here. There's price, there's the early bird instance. There's all sorts of stuff in there. So the same thing happens. Watch this. If I say main component, I'm going to find that name here, find the settings or configuration and say Simplify all the instances. It means that when I select on this, Can you say look tidy to roll up. Just means it just stops people getting overwhelmed. If they may be our junior designer, and even if they are a senior UX designer, and it might be that it just gives an indication about what to change, when not to change, okay, and what it ends up happening over here is you can still see all layers, right? And sometimes you will see some layers but not others. Why is that? It's, you decide as the creator of the main component, you can decide which lays gets shown by giving them Component Properties. We did this earlier in the course before we learned component properties. But let's say now let's select on this, okay, grab all of them, and let's add our text. Okay? Create a property. This one's going to be called text to. Why is it, why is already text in? Because I've re-recorded this video and I had it takes one and I forgot to delete it anyway. So I've added this text property here, my Component Property, the difference now when I say You, my friend, are Simplify all Instances. Okay, this thing now will show that layer. Then I'm meant to be working on and changing, but not all the other layers before this was hidden all in there because there was no reason for me to get in there because there was no Component Property. Yes. And so it does two things. This thing over here, really tidy, doesn't have all the fill and all the stroke and all the effects like it does before. And in addition, it tidies up the layers and will only show you the things that have been set as a Component Property. Both here. There it is, I can change it over here, or I can change it in layers. You go when you wouldn't be using them. I wouldn't use them for myself. Probably even my future self will probably want to get in there and dig into it and it doesn't really stop anyone. But if I was making sure this was ready for a larger group to use, definitely be turning that on. Alright, that is Simplify Instances in Figma onto the next video 77. What does Expose Nested Instances do in Figma: Hi everyone. In this video we're going to look at something called exposing Nested Instances. What does it? I'll explain it really quickly at the beginning here. Then we'll make something quickly. Okay, take about a minute to make using existing stuff. And then in this video for the people that kinda need a little bit more understanding will make something from scratch which will take a little while. But what's the easy answer? The easy answer is this. I've got two components. This one here, I have put an instance of it inside of here, There he is there, that Text. So I stuff that in there and with the Expose Nested Instances off, okay, if I make an instance of this There he is. Maincomponent instance. If I have it selected the parent, can you see I can do some things to the parent, but I can't do anything to this field. Ticks that is inside, I can't see it unless I go, you go to Properties and I say Nested Instances, show me everything inside of it. I've only got one thing you go. Now when I'm working with the instance, I don't have to dive into this text. I can see look field ticks there it is. There. I can go and change it to typing. It bubbles everything up to the top parent so you can control it quite easily. Do you go, are really long intro, but that's how it works. We'll go and make another one. Do I won we build it from scratch for those who need it. Alright, let's get started. Okay, the way this works is that you can only use it when there's a Nested Instance. And it Nested instance needs a variant or any of the component properties, Boolean text, any of those that we've learned. So we've got one that exists already that we can make work and then we'll go and make one together just to really drive at home. But I've got this card that we made earlier inside of this cadmium, but we nested inside of it. This thing called price. You can see it there. And this is the main component. This will be stuck this in there. Okay, So as a Nested Instance inside of this, components that here doesn't even have to be Components sit just a regular old component as well. And with that structure working something Nested, you can click on the parent. And you can go over here under Properties, you can click on this plus, and you will see this. If there's nothing nested inside, you won't be able to see it. Okay? And you just turn it on and you can decide when the outside of my instance, like the parent, the wrapper is selected. Why not also show the person that control for price, okay? Because what happens in the past is to get to this, you click on it. Let's have a look for instance, and it's moved across. So you can see here, there's price that I can change the price off and it on can play with a text about Aconex. It's that price. I can get in there and double-click, go inside there it is. You can double-click or Command click to get inside, to grab the Instance and change it for the Expose way. It's just nicer. Let's go, let's click on you. Click on the little Properties and under all of these, magically disappears. And let's show it for price. Okay, so now when somebody's working on my instance, they don't have to go and they can see price by the outside wrap up. Can you see all the changes for I can change it to horizontal and off and horizontal. Click then you can see the Nested Instances and our case is just variable, okay? But you can see any of the things that we can do with Component Properties. It's just handy than having to dig in, especially some really messy stuff. So let's make one again because we jumped to something else. You might need a refresher or just need some little help, kind of, let's just make one together. If all that seems nice and totally understandable, you can jump out to the next video. But for the rest of us, what we'll do is I'll jump to my components page using page up. I'm going to start with this. No, this one we made this earlier. You can design your own. I'm going to make a duplicate of it and then switch it to pieces. Remember earlier in the course how to smoosh something to pieces. What I'm gonna do is I'm going to, there's no amazing shortcut for it. So I'm gonna go at command forward slash or control forward slash. And I'm going to look for detach, detach instance. We know there's a shortcut, but I want to go to the one that says D, attach all Nested Instances because it's actually quite the hierarchy going on, on the ASE. There's that, there's also that in there that we made. So I want to smoosh it all back to detach, detach all Nested Instances, and everything is kinda broken apart. Let's give it a bit a name, because I've got two input fields. This is gonna be my input field v2, going to convert it into a component. Let's add some properties to it. High-level parents stuff, and then we'll make the deeper down Instance. Okay, so let's add a few properties that kinda bulk editing way. So not Variants. I'm going to add a couple of booleans. This one is going to be label, whether it's on or off. I want to make another one Boolean to say whether the help of Text, Help text is on or just leave it called helper. Let's do ticks change. This one here is going to be labeled and it's going to have the value own label. But I tend to do is go text hyphen label. Okay, that's what's gonna be put in to my little ticks field? One more. How we go into this is this feeling easier, are still quite confusing. It's good that we get to do a few different ones. So this is gonna be text for the helper. And this is gonna be called helper text. I'll export text to the front so that when I am looking at these things, say I go into my text here, I'll label it that way because when I click the parent, can you see takes labeled texts helper when it's the other way round and find them hard to figure out who does well, let's apply them to stuff. Anything else we want to do, bullying and Texas enough for the mode. So the label needs content is going to be edited with text. Label. Same with the help of text. This is going to use the same one, but it's going to use takes helper. With it selected. Let's go to our layer and let's turn the boolean on and off using that toggle switch and label under layer, go to the same thing. So let's create an instance. So shift I am just going to type in v2. Alright, layer it is. And now I can see the label on and off. Let's move it over here. So just a zoom so far. You on, off, on, off. And I can just the label text. And I can adjust the help of text. So that's one part of it. How do I get to the exposed part? This might be a good example where I want this to be changed out. Okay, so I'm going to cut this out and just paste it out over here. I'm going to make this as own Component, cold sample ticks, which is actually pretty good. Actually going to rename it just a cool it field text, field, text. It's make a variant of it. And this one, he is gonna be something like I want us to be able to switch it so that it looks like somebody's typing. Typing. I'm going to use that. We'd character that. I'm not sure what it's called. The Big standing up you on my keyboard, it's the, it's kinda tied in with the backslash anyway, In what have you liked it. And I'm gonna adjust the font color on these two. Let's name them better. So I've got a property of text. And the two different values are gonna be maybe not default but placeholder. And this one is going to be typing. I use tab to kinda get around to them all. Here we go. It's got these two. Let's put it in. So I'm gonna go field text or is it field Text Veritas there? And let's put it inside of my main component. It appears down here. So this thing here has its own stuff going on. Has to Variants field ticks is text with two different variables. These to the parent though, has its own stuff going on which is labeled help her. It has these booleans and has these Text adjusters. And what I can do now is because that is nested in here, I can say actually got a properties Nested Instances and you might not want, so you might be like don't change this or yes, be able to change this one in this case. Here we go. So now in my instance of that one, I can see just by clicking the parent, the outside, I can see everything that I need to turn the label actually is move it over here again. I have to zoom so far, the label on and off, helper on and off. But I can also see in here, look, there is the change it to typing. Okay, well placeholder. We can always do this by just double-clicking and getting in there and still being able to see it. So I can still teach it to placeholder. But now it's just a lot more user-friendly for me and for any of the team that I'm designing this for. Alright, that is exposing Instances in Figma and that my friends is gonna be components of variables for a little while we did loads. And you'll probably sick of it. I'm a bit sick of it. There'll be a Components and Variables level to later in the course we'll do but more. But for now, hard, take a deep breath, duvet of a walk around, ready for the class project, components, Variables, Component Properties, instances. There are all awesome, super-helpful and kinda one of the big reasons we're here for the advanced course, but deep breath, it's do something else for a little bit. Alright, I'll see you the next video. Alright, one last quick thing. I finished the video and I was like, Man, that's knowing didn't know you. Why is that there? How would you get that asterix to move along when people start typing FirstName is really long. Why an asterix move? Oh, I want you to pause here and see if you can get it to go. Alright. Did you pause it? Okay, you go back to the main one. Okay. You're going to select both of these, which can be tricky and you're zoomed out. So things like both of them and I'm just gonna go shifting. Okay. And it's kinda turn it into an auto layout. Okay, I've got no spacing between mine you might have a bit and yours. Okay, but now all the instances, Hello, Look, you moved along. Maybe days, There you go. Commas restored onto the next video. 78. Class project 09 - One button to rule them all: Hi everyone. It is class project time. We're going to tie in all the component properties that we've learned in the previous few videos. And I'm gonna get you to make One button to rule them all, okay? It's gonna be your main button for your app. And I'm going to get you force you to do a few things to it. It's really good example of the type of button you will be creating. So basically, I'm gonna read through all of these, but let me show you kind of like this is a smaller version of it. He wasn't gonna be a bit more complex. But basically this sort of stuff where there's a main button, there is two different colors, is two different sizes. There's an icon on the right and over here, I have the ability to adjust them and turn them all off when I'm working with my instance of it, symbol instance with a lot of control. So what do you actually have to do? So the button text, I want you to be able to turn on and off with the building and make the tics editable. I won't go through every single one of these, but I just give you a, for instance, like in that case and your main component or actually in my instance, I want to be able to turn the text on and off for the Boolean and be able to change the text from within the Properties Inspector. Okay, with the icon, same thing, turn on and off. But this one has an Instance Swap to remember before we can go through and from this go through and pick a different instance, the different icons from this preferred list. And I want you to make sure you using the preferred list as well so you can get that working. What else? I want you to have Variants. He's going to be a default size, a small one and a large one. Often just done with a padding. You might have to adjust the font size as well. And it's gonna be three colors. This thing's gonna get big men, primary, secondary. And when we use outline, it'd be something like this where there's an outline version of it. It's gonna be default, a small and a large version of those as well. I want you to make sure that the Simplify Instances is turned on. So when people are using it kinda tidies up that Property Inspector, you might have to go back to that video to work out that one. And the last one is like this is gonna be a bit of work on its own. If you are a sucker for punishment. And you really want to just kinda like push your skills and make something really complete is you can put in the optional states, okay, That's default. Have oppressed, disabled. Okay, That's these ones you outline has his own one, you and disabled. That's optional because I realize this is getting a pretty big project on its own. And if you are doing it, get the interactions to work so that when you have got an instance of it, you down here preview it. That it works, hover works. When you click it, it goes to the state. You go to see if you can make that deliverables. I want to see a screenshot is probably the easiest way to have a look is what I would do is get your main component, get it nicely laid out so it's not looking like a mess. And be in Design view. And take a screenshot of all of this so that I can see all the properties as well as all the variance over here, okay? That'd be perfect. Optional is be great if you can. I know not everyone is doing it, but great to see a video of you are looking at this instance here. Not a preview of it, but just going through here and going look good. I can do we and it all working. There would be the Qie Gei being able to do all this stuff with a short video. If you do do that, Make sure you upload it. Remember, Vimeo, YouTube, behance is another good place. And then just share the link of you making your mega button work. Share it on social media as well, and use the hashtag Figma Advanced so I can check it out if you run into any problems, post that up. And because we're doing the two people commenting on other people's work thing, if it's not me or one of the TAs, one of your fellow students will help with any problems you might have had. And if you've found it while you eventually worked it out, make sure you go and help somebody else that might be having trouble. Alright, One button to rule them all. Enjoy the frustration. It's gonna be tricky if for some than others, but go in, get messy if you can make it happen. And I will see you in the next video. Oh, don't be afraid to watch any of the previous videos as well. Okay. She like, Oh man, how did he do that? Jump back there. All videos. You can go watch them again. Alright, that's it. Let's get onto the next video. 79. What are some font tips and tricks in Figma: Hi everyone. This video we're going to cover all the quick shortcuts, Tips and tricks for dealing with fonts, Type weight, line spacing, letter spacing, making things bold and strike through this some good-quality shortcuts that work across not only Figma, but other word processes and kind of the things that I use on a daily basis. And I think I'll just wrap them up in this one video here. Hopefully there's one or two that you haven't used before. Alright, let's dive in right first up, there are lots of shortcuts and I'm going to put them all in the shortcut sheet that you can get from the exercise files. And to get started, I just got to text-box on an empty page. Let's select all the text. And my first and favorite one is you hold down Command and Option on a Mac Control Alt on a PC, there's two keys, hold them down, and then you're looking for the greater than and less than keys. The editor will flush them on the screen here, okay, there are the ones down normally next to the M Kiana English keyboard, often tied in with a comment in the period, okay, and if you go left and right, like that, what does it doing? Can you see over here it's shifting through the different weights. I love it because otherwise there's this fund game of clicky click, click the not quite click. Awesome. Alright, so that's Command Option on a Mac, Control Alt on a PC and use that greater than and less than key, those same greater than and less than key with all the ticks selected, just hold down the Option key on a Mac, alt key on a PC and use greater than and less than to extend and play around with the letter spacing. Mine was mixed because I was playing around with it before, but they're all selected all in and out. Good thing about that one there. And a lot of these textural cuts, it works across all typography programs, word, Illustrator, InDesign, all sorts of stuff. You can do individual ones. Just have your cursor flashing here. Hold down the Option key on a Mac, alt key on a PC and use that greater than and less than. And then you can work with specific letter spacing, not the whole thing. Maybe dice. Alright, let's put a returning type something. Because what we can do is slick that all and to automatically adjust the Line Height, It's Option Shift or Alt Shift on a PC. And those same, greater than and less than, they do loads for us. Nice font sizing can be done as well. That's Command Shift and the same greater than and less than. You can see my font sizing going up and down. So good. Sometimes though you want to scale ticks and you're just looking for a size, you don't know what it is and smashing through that shortcut can be troublesome as sometimes you just want to scale it up. Like it's not scaling it up. If you hit the K shortcut to get to scale that option up here instead of move at scale, then you can drag it. I do this a lot when I'm trying to figure out like heretics and kinda like large display text. I don't know what size it needs to be. I'm doing a little bit of that. Then I might go in here and jump back to V for my selection tool and go actually, what does it close to? Its kinda stuck between sizes? Is it going to be 32, 24, both of those and uncle work, I'm going to end up doing 28 eight-and-a-half. But I use the K tool to kinda get me close to where I want to be. Other shortcuts that are useful is just the basic typography ones I use all the time. Command I Is italics. Command B will turn a regular text into toggle between regular and bold. Strikethrough is another one that I use quite a lot. It's Command Shift X or Control Shift X. On a PC, I'm a nude for lines and lists and bullet points. And other one is Command Shift again, but Type eight on your keyboard, okay, that's Control Shift eight, same shortcuts again, but seven kinda goes between bullet points in numbers. So eight is bullets, seven as numbers. There are other ones. I don't use them very often, so I'm assuming nobody uses them, which is probably untrue, but you can find them under, up, under here, under the F, under texts. You can see these ones in here. So Create Link. I use quite a bit as well. But in terms of some of these, I don't know. Some of these ones align text left. I never remember. I should remember the text align center. I'll add these two, the shortcut sheets in my case, Option Command R and L kinda makes sense left and right. T for sin to you in the way you work might find some of these other ones useful. But the cool thing about all of these is that it works in Word, it works in Google Docs, works in Illustrator and InDesign or Photoshop or the same shortcuts, super helpful. One last little tip and trick is new for Figma, kinda seen it before, but let's tied in together. There is now a Find and Replace for type. They never used to be up until recently. So if you're old school user and this is new, you can do Find and Replace for text. You will find the word Figma and replace it with Dan. Replace All he does except when he's doing little spacing, option or alt greater than, less than, making it mildly better. Alright, those are some of the shortcuts that I use all the time can be a little overwhelming. So print out the shortcut sheet and tackle one or two every day. See which ones stick. Alright, that's it. I will see in the next video 80. How to see Live Font Previews in Figma: Hi everyone. Welcome to the exciting world of truncation. Okay, what is truncation? It means that when I've got a text box inside of an auto layout, when my older allow gets too small, it just switches out. Alright, we can set the overflow, but it's not really what I want. What I wanna do is this, watch this one. It gets smaller, getting smaller, getting smaller. Look at those three dotted lines. Okay, so the text is truncated. It's really handy. We can set a maximum amount of lines. We can let the autolayout decide the size and it will automatically add the little dot-dot-dot, meaning there is more texts in this textbox that is able to be seen. Truncated is the word. Let me show you how to do it, right to get started, I've got a textbox, that's it. Nothing else special about it. And what I can do is with it selected, go over to my Advanced Type settings and turn on truncated text. It's a little dot-dot-dot thing there. Okay? And sometimes nothing happens because you need to actually make it smaller and then it will truncate. There is another option for the truncating is that dot-dot-dot. More to be red. You can go a bit fancier if you set the text box instead of this fixed height or fixed size, go to this other one here, this his auto height. Okay, the cool thing about order height is with truncation off. It expands and contracts depending on the size of the ticks it's in there. Okay, so it's a good place to stop for anything. But what can happen is if it's auto height, we can go to these settings here and now we have tuned on this truncation. Thank you very much, and you've got maximum lines, okay, but you have to have the order height on. And I can say actually, I just want three lines. I don't want to drag it out when they always to be a maximum of three lines. There you go. Let's do something slightly fancier with an auto layout. So I've got my text box selected, nothing fancy about it. I'm going to shift a to make it an auto layout. Let's give it a quick film. Now if I make the text inside of this, okay, truncated perfect, with the next line of it can have as many as it needs. Okay. I want the box to resize for it. You see that it's not quite working. I want it to truncate. So what I need to do is truncations turned on. But I need to say this textbox here. I want you to be not fixed and hugging the contents. I want you to say fill the container, Galilee the outside container. Okay, so my backslash key to click the parents. And now it should do more cool autolayout things and truncate. You go. That's truncating text, funny word. And the thing to remember is if you don't have the max lines, it's because we're on a fixed size. We need to be on auto height and then turn it on. And these L max lines, alright, truncating, I'll see you in the next video. 81. How reset fonts & set default fonts in Figma: Hi there. In this video we're going to do two things. We're going to reset the font back to the factory into that Figma users. And also, I'll show you disappointingly that you can't set the default is not a persistent default for the fonts, but I'll show you a kind of a work-around ish. Alright, let's jump in. All right, The first one is resetting your fonts. Sometimes you'd be doing something you're like, why is it still doing that? How do you get normal? There is no reset font or you can do though, is just close Figma, goodbye, reopen it. And now when I start typing, it starts typing in the default. You go, just close it and open it again. Weird fact about Figma. When I start typing on top of color, it goes white. When I go over here and I start typing, can you see it goes black. That is just clever Figma stuff. Alright, the next one is how do I change the default forever? Say we're not using until we're using Roboto. And I want it to be 16 point. I can kinda doesn't work. The short answer. I can go up to ticks and I can say, I can go to edit and I can go Set as Default Properties. Okay, so when I start typing the next thing, look, it's still at, problem is I'm going to close it and open again. Your weight there, start typing again. Go back to inter, which is the current default for Figma. There you go. That doesn't work. So it sucks, but it's good to know there is no way of saving the default at the moment. Let me know in the comments if that changes, you can obviously pick a style, okay, So I've got a font. I'm going to click on my little Styles panel. I'm going to hit plus. And this is going to be, say this is my h three. I can get consistency by selecting them all. Go into here and saying actually you all older age three. When I start typing, it will remember, I'm not sure why Typing default every time. Okay, escape to get out of it. It remembers it, but if I open and close it gives what's going to happen? Your weight there? No, it's back to back to into keep the font size weirdly, but that's not that helpful. But luckily we've got styles. So the ego, getting back to a default font is just opening and closing it. And you can't set persistent defaults. It just remembers the last thing you did, even if you tell it to set the default properties when you open and close it, It's back to square one at the moment. But there you go. We use styles, alright, that is it. I'll see you in the next video. 82. How to Use Line Height Percentage in 8pt grid in Figma: Hi everyone. In this video, we're going to look at why people care so much about sitting there Line Height or letting spacing between lines two percentages rather than the default in Figma, which is order. The quick explanation is I'm gonna turn my grid on it. If I'm using an eight point grid, which a lot of us do for consistency. We could the ugly old Auto, it says I'm kinda halfway through the white line and then just down the bottom of it. Now I'm in the pink line. I'm willy nilly. I'm everywhere. It's hard to line things up with that Text Box and it's really hard to be consistent across lots of pages. Whereas my percentage here look lighting up the white line, also lining up the white line. You are also lining up with my eight point grid white line. And it makes it easier to align it with other text boxes and images. Oh, it's very exciting. Kind of useful though. Let me show you how to get it going. Alright, so let's edit first and then talk about why it's useful. So I've got some texts and handed some Loren Ipsum over here where I've got my living or Line Height. We can type in instead of say Auto. The moment auto will pick the line-height appropriate for the font, and it's defaulting to 16 here. If I bump that up to say 24, okay. And I click an order, can you see it's using 29. I don't want it to pick numbers outside of my eight point grid that I'm using. So what I'm gonna do is use percentages. I'm going to undo. So 16 point instead of auto, I'm going to type in, let's say 100 per cent because as an easy one to understand, it's probably too tight for what I need, but it's good to understand this principle. I'll probably use 150, okay? Because this is a percentage, it's in relation to this. So what is the Line Height or living for 16 point is 16 point. What if it was 200 per cent? It'd be this times two, which is duty to become on brain if it was 150 per cent for the editor. Cut out my long pause, I hope. So. Why is that useful? Let's turn on our eight point grid. If you follow along the course, you should have, I click on my apparent frame here, are just made an empty one. You should have a grid style or ready to go. If you don't, Let's just quickly make a new one. So I'm gonna go new grid. I'm going to change it from a grid, two columns and the amount put in loads. And we're going to start it at the top and go eight by eight by eight point grid. What I'd like to do is get this textbox lined up to the top here. And can you see now how that everything sits in an even spacing? Now, if I go back to, Let's do two of them. So let's make this one smaller. And let's make this one here. So if I do the one that is just set to auto, which is the default. Okay, can you see it sits kinda just a little bit above the pink line here. This one's a little bit lower and then kinda halfway, he's getting halfway up, way down to the bottom. Now, it's just inconsistent for laying things out. You can totally do this. There's nothing wrong with it. But if you're laying out a really complex site and you want consistency across layout, which a lot of us do as designers, than using an eight point spacing is great. And then using the percentages for the living means that things will line up with other textboxes. And if I'm drawing things and I'm using the grid, I'm going to use my tool for frame. Can you see how things will line up a consistent amount from the top and a consistent amount from the bottom. Handy for kind of like aligning images to things and getting buttons to align just makes it easier. So for me in this case, a shift G, is there enough weight? There is not. Okay, so I'm probably going to use a 150. It means that not a one-fifth Line Height, 150 per cent. That is really common. It's quite open. You're going to decide if that's right for you. Bought using 150 per cent means when I'm looking at my grid, things still end up in a similar sort of spacing. Can you see this one's just a little bit below the pink and it's kinda alternate because we using 150, so that's just a little bit below the white here, just below the pink, below the white blow the pink. It's consistent, means I can still line things up where it gets really cool is one of the new features in Figma, which we'll do properly in the next video. Bar. Just to give you a hint, is the moment because you're like, what does all this, why does it align up with that? Because you have to do this and you're like, I can do that. But what if there was an option under here, under the text, the three little dots, there's this magic new thing. It says cap height to baseline. Look at that. Everything matches up the top, so the top of the cap, okay, That's why this one's called what does it cold cap height to baseline. Okay, So it's kinda line things up to the cap height, so their capital letter, the top of it and the baseline is this line down the bottom here just makes it a little bit easier for this outside of the frame to be lined up. But we're looking at more in the next video because it's good for body copy, but it's amazing for buttons. Let's jump over to that one now 83. How to use Leading trim to cap height to baseline in Figma: Hi everyone. Have you got a button like this where you said the padding needs to be eight at the top and end at the bottom. What's this giant gap? And can I turn it off? The short answer is yes. Go to your three little dots and switch it to this thing called cap height to baseline. Look at that, let's dive into that a little bit more. Alright, what is the problem at this textbox here has base at the top and space at the bottom. What does that? It's a problem found in every single type Design Program. It's a pain, but there are workarounds around it. Okay. In CSS it's called Leading trim. Lead like the metal Leading trim. Another word for line-height, Figma calls at the beautiful word, whereas it cap height to baseline. And you can leave it standard or you can treat it more like an object which has really handy. It gets worse like I've made this autolayout button. And we using into, which is the default Figma. And it's reasonably consistent because he's a bit of space at the top and there's an equal distance at the bottom. But if I'm trying to use like its hold down my Option or Alt key. Can you see I'm trying to use eight at the top and at the bottom, it's not really eight as it is eight plus another three pixels there and another four pixels at the bottom. And it gets worse depending on the font. So I'm using later for my font. Can you see this one's sinks down even further? What does this giant gap at the top? And look, there's 13 the bottom. So even though it still says eight, okay, It's a really off centered button. And like before, and the way to combat it, and let's hit Enter to go inside of all autolayout. It's got As option and we can choose cap height to baseline or Leading trim. Nice. Now it feels more like 88. There's always gonna be strange fonts. It's up to the typography to see where the cap height is. Okay. Can you see the cap height on this is with the blue line is which is the top of the capital letter, that's the cap height. But for this particular letter, for B, it's a little bit above it. So have a look at some other ones. Capital T is above it, they're all above it, okay, for some reason later, the designer decided B was going to pop out the top. They're not the same for inter, it's a little bit below. So there's always gonna be some quirkiness there. But I think that cap height to baseline really kinda solves a lot of our layout problems, especially when we start adding things like icons. So let's add an icon shift. I said I'll tick. It's going to edit into my Autolayout. Let's have this thing off. So I'm going to turn my cap height to baseline back to standard. And I say autolayout, you are centered. What you'll notice is there's nothing centered about it look like the tick is way above the B. And knowing near the baseline, BAD if I go into this and say you are the sweet new cap height to baseline, look at that sintered, heavy days minefields a tiny bit off because there's no descenders. Can you see my baseline? I've picked a word that has no descenders. Nothing goes below the line. But if I type in, that was a total eggs. Looking down on my keyboard lookup, what have you done? Can you see now? Alright, pause back and back. Game face on your professional Dan. Can you see now there's these descenders. Okay, so now it's a little bit more lined up. You go when you're doing buttons and you doing Text just to in the cap height to baseline, just take it on. You can't turn it on by default yet. You can set it in your textiles when you're making it, okay, So when you make a style, it can be part of that, which is perfect. One thing you might have to do is if you send this off to develop and they build it, it ends up looking like this, okay, with things kinda not quite lined up, just talk to them about it's a relatively new CSS class called Leading trim, not Leading, leading the lead middle. And if you're still having problems, it might be down to the Font. Have a little look at it. It might be doing some crazy stuff that is not controllable encode. You can fix it by right-clicking and saying outline stroke. But now it's not a font, it's just a shape and very hard to implement on the upside or the website side. Sometimes we do just need to live with a tiny bit of happiness that you go Leading, trim or cap height to baseline in Figma 84. How to set Hanging Punctuation for pull quotes & call outs in Figma: Hi everyone. In this video we're gonna do this where the Punctuation is hanging outside of the main text box. Let's go for pull quotes or call-outs. Simple to do. You do is select the textbox that only works for punctuation at the beginning and then go over to your text in your design Properties Inspector, let's go to the three little dots. Normally I say to basics, let's go to Details. And there it is, there Hanging Punctuation. Boom. Nice thing I'll show you while we hear is you can do the same thing with bullet points. I'm going to select all three of these. And instead of being inset this amount, we can go to the same place under Details. And just underneath that, can you see Hanging lists? Boom, they stick out there as well. Why do we do that? There are people out there who wants to do that. I have no idea what you want those is to go over the age. I know there were people yelling at the screen going, hey, I need to do that for work, or I love the way that lays out and that's okay because you know where to do it now. Alright, Hanging Punctuation in Figma, that's it. I'll see you in the next video. 85. What are the Advanced Type Options in Figma: Hi everyone. In this video we are going to look at this menu here, type settings, all these advanced settings that go along with some of the fonts. We're not going to cover everything because some of them are self-explanatory and some of them are. It's more down the road of typography and understanding typography terms, but I want to cover the good ones that you'll need and that a useful when you're working with type in Figma to make a UX designs. A quick overview and you can dig into the ones that you find more interesting yourself. Alright, The first one is that they're not all created equal. So I've got three, actually, I can count this four lines of text here. What I want to show you is under the settings here, into is this first font here. It is the default for Figma at the moment. And I say at the moment because they have changed it in the past. So what we'll find is there is under details, there's a lot to go through. We will cover most of them. But if I go to the worst of all my options, this is a free font I found online. I'm not sure why pick on this cactus font all the time, but it's called CagA Sandwich. And under details can you see I'm scrolling up and down. There is no scrolling up and down. As some of these options will be available to your font and some of them won't. And his two reasons. One is if it's shaped like a cactus, it's probably not gonna be a very complete font. And the other one is you may be using the free version and maybe not the pro version. Sometimes there's a provision of a font that has a lot more depth to it. And often you need to pay for those options. But I found someone that we should all be able to find K. These are all Google Fonts. And Google fonts are the defaults that are built into Figma. So let's dive in and have a look at some of those Advanced Settings. Okay, So within to selected, we'll look at the basic stuff we won't cover. We've kinda covered it all. Details covered a bit of this. The ones I don't want to start with are the ones that you might not have heard of before. We're going to start with the most interesting, which is stylistic sits into. This is really boring. Can you see the difference up there? See the a and the end? That might be really important for what you're doing. I know with my kids in school, teachers are always looking for a font that has that in it. They end up using Comic Sans. But for us as designers, something that's maybe more interesting is I've picked a script font. This one's called meow script. Very professional. But the cool thing about this is under the details, it's quite a robust Font. There's lots of stuff going on in here. Let's look at this stylistic sets for this, what we might do is just break it out over here. Where we're going to break it out in. I do not know. Maybe get you Command or Control D, D, D, to have a look at this one and we just compare a few of them. So when this font was designed, the typographer or team of typographers, I'm not sure who made this one. They made up some other sets, stylistic sets. So let's have a look at the stylistic alternatives. Can you see there between that and that, so much of it changes. So you might get to a point where you like, I like this font but the aid doesn't read well. There was an alternative, I stylistic alternative full that font. So it's doing that first one off and look at the different sets because this is all the alternatives and this is like a group of them that go together. There's lots of different options here, so you can turn this one on the difference. Let's look at this one here, the third one, or look at different that as you might be like, yes, that's what I need. I like the flow but all the wiki squarely bits aren't working for you. Okay, so I won't go too much into it other than especially script fonts. Often you can find some really cool stylistic sets and build some really cool little forms. And especially if you're trying to do maybe some hero text or some logos or something more interesting. And just in comparison that I found that one because it was reasonably advanced. Okay, this one here is INT. So we'll go ahead and look in here. Let's have a look at the stylistic sets. There's only one. What does it do? It's gotta stylistic set of looks like xi's only. And I can just find doesn't have any, not even the z's. The next one that's kind of interesting is Kooning peers. So we'll use this font. It didn't have any stylistic sets, BAD typography. I went through and sweat a lot of time with. Let's have a look into details. Let's look for style, Kooning. There you go. Horizontal spacing, cleaning peers. It's on by default, which makes it look good. You can turn it off. What ends up happening here? It's interesting to see that normally the T and the Y at this far apart, That's just kinda them spaced apart as characters. What the typography said is if a T, capital T is next to a lowercase, why? I want you to tuck in nice and tight. Like a good that is that's why you might be using some kind of like, I don't know, some plugins in Figma or using maybe a tool. I know I've got one that I use for my vinyl cutter here that doesn't apply all the Kooning peers. So all the time this ends up looking gross. Okay, so same with this one here. It has kidding peers. Okay, it's only really slight. Let's look at this one here. On, off, on, off Nothing going on in that one. I think it could probably use a little bit in places. Hey, what would I know? That's Kooning peers. Alright, the next one that's in these called ligatures, I'm going to click on the cushion script. And with it selected down here on the details to have a look. There's one called letter forms and there's ligatures for those who don't know what ligatures are. Basically what ends up happening is let's turn on and off. Can you see that this one, the F and the eye, when it's together, the font and Figma go, hey, the typography, I said, if these two letters are together, I want you to switch them out to this fancier looking option. Okay. It's the same if there isn't. If how can you see it changes automatically is because the typography I said I don't want, and if an owl look, I don't want them to do this when they get together. Holding option and using my less than key to do my little spacing. Can you see it kinda gets a bit. What does that now? Okay, So they went and said, alright, let's, when they get together, make ligature magic. Oh, cool. It depends on the font. Some fonts have none. Like I know, even this one here, I'll enter doesn't have any ligatures or even the F and the I I think that one does, and I'll kick this one is definitely not going to, because it's hard to beat perfection. If I. Something else that's quite useful is when you're doing with numbers, Let's look at two things. So into, again, a really complex, amazing font to use because it has a lot of depth with the numbers selected I'm gonna go into here. And this one out of all of them is the only one that has, what does it have? It has character variants. And what we can see here is let's, It's got an alternative one. So let's actually look zoom in on this one. Okay, Let's look at the different one. Because either one, oh, look at the one change, pointy QB or rather for do you need an open for clothes for? Okay, sometimes it's not just numbers. Watch this with the actual text here. There's a lowercase tail for the L. Okay, can turn that on and off. Okay, So this is not going to cover everything you can do in this font. It's more to show you that some fonts have a lot of control and some of them don't try picking a good body copy font can save you some headaches down the road when you have to deal with different languages, maybe scientific notations, or your client really doesn't like that. Six, there we go. 26. Yeah, the thing that's useful for numbers is let's move down to one of the other ones. This one here, the font that I'm being using later. Okay, let's have a look in here. It doesn't have the character sets, what it does have under numbers, this number styles. And let's have a look at this. Let's get back and then number styles. Can you see the difference between that? This one? Okay, a lot different numbers styling. Can you see the differences there? Mainly with the one. Then we get into this option where it's mono-spaced, monospaced is, so that we can have different numbers as long as the same amount of characters that will line up, can you see different numbers and there will line up? And that's not always the case for different fonts. Let's say this one here. I'm gonna get rid of four characters, but Type in one's because it's not mono-spaced, that the same amount of digits, but it's really hard to compare them. Where's my Leto? I can turn that on. So it's monospace, maybe not as tidy king, so I can get it down so it all fits in there nicely using this first style, but I can use this model style and everything lines up nicely. There's other ones in here. Have you ever got a font that you like? Why is it dangling down? Okay, this one, he's probably got more of them. May go. Some of them are up, some of them are down. I'm not a fan of that style of type. Might want to turn it on, or you might have a font that you might want to turn it off on. Know that you can in here, again, they're all gonna be different. Some will have mono spacing on by default and there's no way to turn it off. That's why often designers end up falling in love, or at least as safety, with a font that they liked the look of. And they know it can be quite useful and they know it's not going to give them headaches later on. Alright, that is the rough overview of the things that I kinda look at in a, not a daily basis, but the stuff that I know is quite useful when I'm working. There's a lot more in there. So have a look around, see what your font Scott, you might have to do some font research and decide anyway, we're going to push on with cactus font where V is, there is kicking his Sandwich for life. I'm not sure why I'm picking on this phone. Mainly because I've got to ease up on Comic Sans and brush script, the IGA. Alright, that is it. I will see you in the next video. 86. How to use Variable Type in UX app design in Figma: Variable fonts are amazing. That's what we're going to do in this video. I'll explain what they are for the people that don't know what they do. And then we'll explain kind of the reasons why they're getting more and more popular in UI design, both because of their flexibility and because of things like file sizes and how they could be implemented in CSS. And then I go on a big tangent about independent fonts foundries and why you should use them. So yeah, that's towards the end. All right, that is it. Let's get into variable fonts because they are amazing. All right, So some of you know, variable fonts might be using them. I just want to kind of point them out. And point them out why they're so useful and becoming more and more popular in kind of app design and web design. All right, first out, what is variable font? This font that I've been using, I pick lato. It is not a variable font. How do I know if I click on the little type settings here, there's no extra tab that says variable. I have a really great amount of different weights, okay? And different italices, different slants on it. There's a really good font, it's going to do me well. But if I get the chance, I'm very excited. When I pick a font that I like that's also variable, what does it look like? So this is into the default, okay? And this one is variable. Okay? What it means is I have best of both words, I have an option to actually just go straight over to bold. Okay, for this first sentence here. But let's say for the title I want maybe Bold. Okay? But actually, can you see there's all this little adjustments in between? Can you see when I drag this, can you see the title? Look how much control I have. Okay, There's just so many fonts. We're like, bold is not quite bold enough, and black ends up being like too much of, you know, too heavy. So you want to go back to like there's a little bit in the middle. And why is this useful? It allows me a lot of control, okay, for the OCD designer in me, but also when it comes to implementation. On the code side for either the app or the website, variable. Fonts are bigger, naturally. Let me show you a font that I was missing with today. Okay, this font here, Job Clarendon. And what ends up happening is there's two versions of this font. There's this version which is your normal, or is it this one here, lato, okay, Jumping between all of these, okay? There's just a bunch of different options. That's all of these. You install them all. And if you use them all, okay, the person building your app or your website has to call all of these fonts k to make it work, okay? Whereas this is bigger, you can kind of see it here. You see the kilobytes. It's much bigger as this variable font, but it has all of this baked in and all the bits in between. And it's really common when you are doing, say, a body copy font to have at least four of these anyway. So you end up making up the size of that. You know, variable fonts are bigger for sure, but when you need four different weights anyway, you end up getting up to that size and actually going way past it often. So variable fonts keep the file size down and gives you loads of extra control for those kind of edge cases. We actually just need it to be maybe the accessibility is wrong for this particular card, we need to just bump it up a little bit more so that it's more visible against the background. Is it required? No, it's nice to have, but it's always something I'm looking for. And the other thing I want to point out while we're here is that we've been using Google Fonts up until now. Okay, that's what's baked into Figma. But there are also loads of other ones around the world. Okay, From independent typographers. And I just want to point out, like I'm pointing out, David, Jonathan Ross for this one, just because I stumbled across one of his awesome fonts. And this one here, there's a free trial. And yes, you have to pay for it if it needs to go into production. Okay. Or use it for clients. But I think as Ux designers, we're getting, I don't know, we're getting to open Sands. Roboto is where there's no love in the fonts anymore. So you can find great fonts and also there is great variable fonts like this one here that are downloaded. It's great and variable. And just look at much we have on this one, this one's cabin. Okay, This one's from Google, so it will be in your dropdown list. I'm going to switch to my new one. I can't give you the font because it's kind of, you can get a free trial of this font. Look how cool it is. Okay. You can go to his website here, Jar.com Okay, there's a free trial to go. Otherwise experiment with a Google font. And at the moment as well, you can't really find out what is variable. I'm hoping that font Preview plug in has it as an option. Hold the phone, They've updated it. Now you can find what variable fonts you might already have. Okay, so with the text selected, click on the font and it'll default to all fonts. You can click on this and say, actually show me the variable fonts and it shows you everything that you've got in terms of variable A. So much handier. Let's pick one. Okay? So I've picked it, now I go back into the properties, okay, the little dots. And you can go look, it's variable and now I can play around with them. This one's only the weight, but look how cool it is. Man, I love variable fonts. All right. One last thing before we keep going is you probably just saw it. There is popular fonts as well. In Google Fonts, you can separate by different stuff. Have a look, there might be new stuff in there now, but that's super handy. I'm going to go back to all fonts, okay? So they're all there. Again, I wish for it and they delivered. Thank you, Fg. All right, carry on. And but also you can go back to Google Fonts and do what I did and just say show me something that is only variable fonts and you can kind of see if it has two axis or one axis. What is two axis? Let me undo that. So cabin is a good example of this. Let's go in under variable. Can you see the weight and width? Okay, I love it when there's width, especially for apps, the screen real estate, it's really small. You have to squeeze in some stuff. So we've got Techno on a bike for the name of this kind of event. But if there's something longer, I'm kind of stuck breaking into two lines, having a word count on that. Watch this, I can grab this. I'm not sure if I've got enough room, but can you see? I can use something still not enough room, but it gives me ability to kind of fit more typing on the top here. And they're all different, some widths go really, really low. And I love that ability to keep the same theme of font, same style, but be able to decrease or increase the width. And this one here, it has weights as well. This one goes down to 400 K and up to 700 only. Okay, but look at that. I'm going to go back to my job one, I'll just show you. Take it on a bike but convict in. All right. Let me just quickly make a couple of examples it that look how much different though, like how much communication you get with a variable font. Like I can use the same font, keep the file sizes small, but do some very different things with my headings on. Variable. Fonts are reasonably new, so if you're working with a developer, you might have to just kind of say, hey, I'm using a variable font, so you're going to see all sorts of crazy sizes. Normally they'd be expecting to see 700 or 300, but you've given them 7603 'cause it's perfect for what you want to do. They might just dump it down to 700 because they're like, how do I get 7603? It's not hard, it's just a CSS class. Easy to understand but you might have to remind them or just at least point them in the right direction. All right, that's it. Your other research is go in Youtube techno on a bike or drum and bass on a bike. I love that guy. He cycles around, plays music. A bunch of people follow him. It's good fun. Anyway, variable fonts. Variable fonts are awesome. If you didn't know about them, you're welcome. If you did know about them, hopefully that gives you a little bit of information so that you can sell it into the project. Maybe look at paying for a font from an independent font source. All right, speaking of independent typographers, I'll give you the ones that I know use. And you can let me know in the comments, the ones you do, so we can kind of get a little pull going. So David, Jonathan Ross, somebody only just discovered recently oliveal links to this at the bottom of the exercise file. Clem, a fellow kiwi, a beautiful website and beautiful fonts and big in the scene. So go check out Chris's websites. Call Clem.com in CJ as well. Somebody I know and does really cool fonts. I love using his work and Blaze type as well. It's more of a collection of independence. Yeah, really cool stuff. There's loads out there. So maybe explore something outside of Google Fonts for your next project. Yeah. All right. That is it. I will see you in the next video. Go, Variable fonts. Whoa. 87. How to curve text with type on a path in Figma: Hello gives what we're gonna do. You guessed right how to curve text, Figma, some people call it type on a path wrapping text around a circle. I'll show you that Figma doesn't do it natively, but we can use a plugin, will look at the limitations of these plugins and then show you how to do in Illustrator and bring it in. Alright, let's go some text, right? First up, you need some text. Second of all, you need a curve. I'm going to use the P for the pen tool. I'm going to click up and drag and click up and drag to get a curvy thing. And I'm gonna hit escape a couple of times to get out of drawing mode, and I'm gonna combine them. Now Figma itself doesn't do type on a curve. So you need to use a plugin. I'm going to use to path seems to be the most common one at the moment. So when I use has a few bugs, will it be around when you're looking at this? Who knows chick? See if it runs. Maybe do a search for type on a path or curve text from Figma and see which one pops up. But this one here at the moment works reasonably well. It's like both of these things. And I'm going to say link, and then you go curving text in Figma. Let's do the circular one and then we'll dive in a little bit more and see where it breaks. Okay, I'm gonna grab this one. And that particular plugin doesn't work for going completely around. So we're going to use as there's one called Arc, have looked for an annual plugins. Again, this is not here. So if you can find one that is, can see the preview down here, but you can see it up here. And you can see on how, how much you want to go around Woo-hoo. Okay? There you go, 100%. So it's a perfect circle. And then you go by the, you go kind of overlapped weirdly. So all of these plugins, this one and this one, I want to just point out that there are bug filled, great, that it around and I get asked loads from people who how to do this and you can make it work in Figma using those plugins. So plugins will get better. Eventually Figma would do it. But let's see, let one here. I don't know. The preview looked like it was butting up nicely at the bottom, but now it's overlapped. Can you adjust that afterwards? You cannot. But we could do it again because it makes it duplicate of it when it makes it. So some quirkiness, this one here has more quirkiness. The cool thing about this curve one though, is that with its selected, I can open up my previous plugin, which is called path. What was it called to path? Let's run it. Okay, I can continue to adjust it. Watch this. But it ends up doing some funny stuff you like. What's that? The big Leading there. Can you adjust the lighting on the fly? You cannot. You can do some crazy stuff with like Actually before we leave here, there's an offset from pixels. So you can push it along and you get back to zero. You can line it up the right. You can learn at the center. And the offset here you can decide it goes from zero, which is underneath to, I'm going use my up arrow to 0.1, 0.2, 0.3, 0.5 is halfway through. And you can go all the way up to one. If your curve is going this way, you can play around with a horizontal align. But let's say that is doing some weird stuff. Go back to my offset being one. How do I fix that? You can do a workaround. Okay, I'm gonna get frustrated with this workaround and then just have been to Illustrator, show you how to do it because this is pulling from this and they're linked gay. So I'm gonna go in here and go use my sweet shortcut. Remember cursor flashing between anything and go. Actually I'm going to select all of these, maybe just those. And I'm going to hold down the Option key on my Mac, alt key on a PC. And I'm going to use the greater than and less than symbols to open it out and you're like that's not enough. How? Because it doesn't dynamically update. But I can now open that plugin Command Option P. Have this selected and can you see it kind of reject it when looked. I've got the F and the I kind of working. And you can spend your time now going back and saying actually, Vega, you need more and you need less. You need less. And Spain drops. And in doing that, and how that go bearish. And what I'd end up doing is getting frustrated and just jumping out to Adobe Illustrator, which I know not everyone has. I'll delete my text in there because you're going to copy that. Illustrate is just more mature product for doing this kind of stuff in jumping back into Figma. So again, I'm going use my Pen tool, click and drag up to get the same kind of curve, shift X to change the fill to the stroke. Use the T for the Type Tool and watch this. If I just hover above it, the nice text on a path. Here we go. Paste that. Alright, we did using Illustrator with Figma and Essentials course. But one thing you might find is if I copy this because it's in such a strange thing that Figma does not recognize when I paste, it just comes in all pixelated. Okay, it was just not good. What I want to do is make a duplicate. I want to outline it. I'm using all shortcuts here, K Command Shift 0 or Control Shift 0 to outline it. Now I can copy it. It's not editable now in Figma, but at least as Victor, nice and scalable and good. And just the way that it deals with type is a lot more, lot more better than having to try and do that to make that happen. They go back to that same thing with a circle. I'd probably just jump out to Illustrator. Grab my ellipse tool, hold shift, drag out a circle, grab my pen tool, and click. Not on that because it will go inside. I want to find that type on a path to centralize it defaults to it. Sometimes it doesn't stop mine about them, then you go. It's pretty good. By default, there was a lot more options under Object Path, type, type on a path. And you can go into type on a path options. And there is a lot more you can do in here. Make sure previews on okay, and again, outline it and bring it into Figma. Plugins are good getting Figma and kinda pushed the limits of what it does and they will get better. And Figma will introduce some of this stuff itself. Sometimes it's just easier to go out to illustrate it, but I know not everyone has Illustrator. The program will the skills and illustrator. But I find as a UX designer, I talked about to illustrate a bit for doing, especially the illustration drawing top and a path. So it might be the next course after this one, I've got a course for Illustrator. There's an Essentials and then advanced. If you do wanna go there, you'll find it the same place. You've got this. Just look for Illustrator essentials or Illustrator advanced cross-sell done. Alright, that is it. I will see you in the next video. 88. How to use adobe fonts & local fonts in Figma: Hi everyone. In this video we are going to install adobe fonts into Figma. They're not in there by default, and it's kinda two pathways. We'll start with the desktop version of Figma, okay, that is downloaded and installed on your machine. And then we'll do the web version. They're slightly different. Now, adobe fonts is a paid part of the Adobe license. If you don't have this paid subscription and skip this video, can't use adobe fonts, or at least you can only use the free ones. And often the free ones are already installed into Figma anyway, because Figma uses Google fonts as its base, those are free commercial use fonts, but we've got a subscription to Adobe fonts and the library is a lot bigger. Some really cool fonts in here. I don't want to use them. So first of all, we need to find an Adobe font. You can start by, I've got like the Creative Cloud app open on my Mac here, open it up on PC, kinda need this open. And I can see I can manage my fonts. So first of all, finding a font in Creative Cloud isn't that useful? You can just go to this fonts.adobe.com login with your Adobe username and forget your password. It's been a just trying to reset that. Finally get in and then find a font. I'm going to go browsable fonts, and it's going to pick something random. We will look Variable fonts right at the top because it's important and ignore that. And I'm going to pick, and I'm going to pick one, wait there. 10 h later. Pick any font. Okay, I've decided like this one, rock grotesque. So all you need to do is activate the font. Do I need it all? I'm going to turn them all on. Because I can you do this from the website, right? It sends a signal to your Creative Cloud app. And hopefully in a second, hey, look, there it is. And it's going to start activating it. Great. So it is now available kind of like all my local machine on my laptop. Oh, here's the rest of them. But you'll notice in looking Figma, if I grab this and say actually Rock, there is no rock font. Rocker task. So what you need to do, Germany's just open and close Figma. So goodbye Figma, I'll come back. Figma. And hopefully now under are OK. Ok, we're grotesque. There it is there. How cool is that? Is a variable font. It is not. But you saw there was a lot of options. Nice if it's still not working or you head fonts that we're working and now they're not. What Creative Cloud does is because you can install a zillion fonts. What it does periodically, it goes and says, nobody's use this font on a long time. Can you see previous active? Okay, This layout might change. You might have to dig around for previously active or inactive fonts. So I have used this before, but they've all been turned off. Why? Because when I'm loading something like Photoshop or Illustrator, if it has the load rulers fonts as part of its startup. And when you have like a bazillion, it takes for ever, what it does is goes, it sneakily without asking goes, you haven't used this in a very long. It's going to take these off and have the appearance of loading faster. It does load faster. B might find that some of them get turned off. So you might have come in here and say actually turn that back on. Okay, and it'll switch to the active Font menu. And then you'll have to close Figma, opened back up again. Let me know if you having any other problems in the comments with the desktop version. The big problem is making sure Creative Cloud, the app from Adobe is open and Jiminy gets installed with everything else. And just make sure as well, and make sure that you've restart Figma, close it down, open it back up. Alright, for the people using the browser version, I'm going to jump to Figma. Okay, so the browser version, pretty much exactly the same as the desktop version runs on the same backend stuff. What you need to do to make sure this works is two things. You need to go to your account. Go to settings and under fonts here, make sure local fonts is enabled. If that's done, you need something else. Okay, If you go to Figma slash downloads, what are the options in here will be the font installers. So choose your poison Mac or PC. Remember this isn't required if you're gonna be using the desktop only app, I generally just install it as well because there's loads of times I'm working on other people's projects and I end up working in the browser not knowing because it work. So similarly, install that and then you need to refresh your browser. So here in Figma, you open your document and hit refresh. If that doesn't work, close it down, open a backup. Now I'm using Chrome here, and that's what Figma suggests. It runs in different browsers. If you haven't further quirkiness, trichrome, save effects, is it? Because I think that's what Figma supports more than anything that might be causing your issue. And from here, it's exactly like the desktop version. You login to your Adobe account, you pick some fonts, you activate them, make sure Creative Cloud is open on your computer. Hopefully find them in the active fonts, and then reload the browser. You should be a way, alright everyone, that is how to get our adobe fonts into all Figma file. Alright, that is it. I will see you in the next video. 89. How to Preserve text overrides or not in Figma variant: Hi everyone, Welcome to the most boring mean named video in the whole course. How to Preserve text overrides or not. In Figma variants, that catchy tune is because I want to make these videos searchable and you'd be able to find them hard to know what the name them sometimes and sometimes they end up being stinky titles like that. But is it worth your time watching? Totally is. I'm gonna show you the two options by default, what happens in Figma is if I change this text, this is an instance with a variable. There's two of them, one, to begin a small Tidal, but they actually have different amount of characters they can use. By default, what happens is if I go and change this kind of premium listing that's allowed more characters, and I go and switch it to this other variable, the texts persists, comes along for the ride, and that's the default. Normally that's what you want, but not in this one. I want the user of my component here to know that there's a certain amount of characters. I don't want it to automatically switch out, and that's what this one's gonna do. Okay, I can change the text here in the premium one. But if I switch it to the other variant, can you see the ticks? So that variant comes along and overrides what I wrote there originally. That's what you want most of the time, just continues on. But there are times where you need the text to switch in-between the variance. Let me show you how to do that. Alright, the default action for Instances is probably the right one. And by right one, I mean this, I'm going to drag out an instance. And if I change the text in here to sign up, and then I go and change to one of these other variables. Even though this variables say is primary button, my tics change is persistence. So I'm gonna go over here and say state to holla. It used the background color and maybe the size as well. But the text is persistent decay that text overrides I made continues along. But there are times when you don't. So I'm going to jump down to my other page. Okay, so what I've got here is I've got two Event listings and we can pick between a premium one and a regular event, use get less characters and I don't just pick a font them. And I mentioned there'll be pushed to the top. And to cut to the chase, I'll do it properly, but to the chase basically if I have this one called message and this one here called message because of the same turn them into variants. Figma assumes that there are interchangeable. They're just called message. If you name them something differently, they will override each other. Let's do it just in case that wasn't clear. I'm going to slick this one. I'm going to stick it into a frame. Command Option G, Control Option G. Same with this one. It's like both of them. And let's turn it into a component sit up until now we've been making a component and adding a variable. We used it a different way to mix it up. So let's see how it works by default the wrong way, I'm gonna hold down my Option key, drag it an instance. The person using this can go through and say, alright, I'm going to add my fancy listing. Spell it right? And they can go and pick, actually, let's pick a different variable. Can you see it changes, but the listing event is still Leah. And if they put it in a really long one, like they can do in the premium, they're going to run out of characters. It's going to break my layout. So how do I get it so that it changes to the text listed in this other one. As a reminder, an to give everybody a character count to work too, all we need to do is we need to say this in here. Command click, Control, click. Okay, it says message. Let's Command or Control R. Rename it. Let's go message, this is our premium one. This one here is going to be regular. Go. Now let's reset this. You said all changes. Let's switch it to our premium version. Now somebody goes through, okay, they change it and they're like, Oh great, I'm going to use this again for something else. And I'm gonna go say I'm going to use a smaller version. Look, the ticks gets switched back to this event listings and it's basically down to the layer names being different. That's it. Now this could be working against you, someone you're like, why is it keeps switching? You can go back and just rename these in the components set, okay, find the Variable and just make sure that that have the exact same name. Alright, so that is the end of the best named Video in this course. How to Preserve text overrides or not in Figma Variables. Useful. I tried to make these titles like searchable. So you can go into Search and the course of figuring out where they are. Man, that is really unsexy title but useful. Alright, that is it. I will see you in the next video. 90. How to use Chat GPT AI to create placeholder and personas in Figma: Hi everyone. In this video we're going to look at artificial intelligence, in particular Chat GPT for creating placeholder content and other UX tasks in Figma. And if you're rolling your eyes go and not U2 AI, yes, I am that guy. Let's stick around. I'll show you it's pretty useful, especially if you are a lover of Loren ipsum. Actually quickly we create an event listings, some fictional ones. We go and ask Chat GPT about what features would be in a particular app. Then I asked you to create a persona, alex. The results are pretty amazing. If nothing else, there are great starting point or I'm using it all the time for things like this where I need to style up something on each some content and it's not just Loren ipsum will be into the site hasn't changed in 1 million years. So Chat GPT is amazing for this. I've written down something like predefined things, but I just type it in. It's amazing how good it gets it. So I've asked for a fictional event, listening for a techno event in limerick becomes over the title date location. It is spectacular to wait for to finish. How good is that? Look? Ready to row. And then you can do things like kinda just, I don't know. Let's say I need it for 200. Let's do 300 characters or less, characters or less. Kinda let it do its magic. You go through hundred characters or less. Now this is free, somehow magically, it might not be when you're doing it. Chat GPT might not be the thing that the moment I'm really happy with it, Let's say I want three variations of that for my listings. And I'll speed through this. Look at that variation 12.3, all unique. Be careful not to use this in a live site and throughout your body copy in your ticks for a website, I know Google error checking and punishing people using AI created content. Not sure how all that dust is going to settle, but my advice is not to use it on a live site is really good for other things as well. Let's say I'm going another one, like whenever I'm starting a brief, I'm actually designing this app. That's what I did for this particular course. I was like I typed in something like this. And I actually don't want to regenerate on a new chat. And this one he is going to be give me ten main features for an event listing. And I could do this and it only take me half an hour and now, but it's pretty spectacular how close it gets to what I would get to in the end. And it's a good starting place even if nothing else, Eco ten features that we can use as a starting point, you can kinda keep trying to regenerate responses to get it tighter closer to what you want. Let's do one more that I use quite frequently, like the use cases are endless. You want to create a UX persona for my techno event. Kicked back and relax, we get Alex, who's 25. He's in Berlin, of course, zones. And it gives us background. For me. I find this part of the process. I know what I want it to be and I find it hard to get the words out. So for me it's a really great starting point. Am I going to use this verbatim? Probably not, but man, it's a good course starting point or a template. Man. Oh, I am pretty like I'm getting used to it now. But man, this is new and exciting. If you haven't got into AI, GBT for UX is a good and feels like actually something I can use in my work rather than some maybe fluffy AI stuff in the future down to earth, not on the ground. That's what I wanted. Remember I'm using Chat GPT. This might not be around Chat GPT might have gone rogue and I don't know, taken over a country by now and might not be available. But I bet you, there's another alternative for it. Free, maybe paid, maybe anyway, it's a great way that I get placeholder text rather than Loren Ipsum, which I used heavily in the past. And this is just texts Don't get me started on some of the image generators. 91. How to create an image style in Figma: Alright, it is time to move on to images. I'm going to start with a nice little trick where we can turn an image that we might be using over and over. It might be our hero image, you'll in illustration that we using everywhere instead of having to import it every time and put it into things we can do is we can take it into a style and apply it to loads of things all at once and it stretches and fits. It's awesome. Then we get really creepy and show you one. So if Dan's grubby face, alright, the image style is useful. Let's check it out and just ignore the creepy Dan phase. Okay, to get started, I want you to get an image and I want you to get a frame and draw circle and type some text. The image I just got mine from unsplash okay, from the app when I was put an abstract and down one, there it is right there. Okay, and I am going to select it. And what you'll notice over here in the Properties Inspector is that actually an image is just a fill. And we know from earlier that we can fill styles like we did without primary colors. Same, same. So I'm gonna go into there and hit plus. And this is going to be the name of my style, is going to be image abstract one and all end up with another one. Okay, and that's it. Then you just go and apply it. So I'm gonna say you have a fill of not primary 50. I'm gonna go get rid of that. So you have a fill of one of my styles and abstract image one. Here we go, look at that. The one thing you might run into problems with, unlikely sometimes with it selected if you've cropped it first. Okay, save cropped it. The style for this thing here now under fill is set to crop. And it just might give you problems because we want it to sit, to fill so that it resizes itself to fill out the different shapes. So when you create the style, just make sure it's set to fill. And then you can go over and select a few things and say, alright, and won't my fill style of Escherichia image. But goodness, I'm over here my Event Card, I'm going to show more properties. There's my fill image, I can go actually, let's just use that one. Nice. Now if you're thinking, Actually, you know what I really want, I need that we increase the face of dance. Okay, So same thing. I'm going to break the link and create and you style. It's going to have this image background by going to have another fill gay. And I click on it and I'm going to say, let's haven't image fill. I'm going to pick the mad image. Okay. Pick dance head, repeat two from the Images folder in your exercise files. Okay? What I'm gonna do is tie lit, make it a lot smaller. All. And what I probably need to do is play around with the opacity. If you add a second layer, it defaults to 20 per cent. It's going to put it in 100%. If your layer order is wrong, you see next to it the little lines you can say actually want that in front of that, you just drag it up. Alright, now I can turn this gym into a style, okay, and this is going to be the query Dan style. And now I can say actually I want you to be create, install. Look how cool that is. My worst mask ever. Don't look too closely. Edit. Alright. That is a how to turn an image into a style especially useful if you've got a hero image, you're kind of illustration of graphic that you use loads and loads turn into a style, share it with team. Everyone can use it. Save some time digging around, trying to insert images everywhere. Alright, that's it. Onto the next video. 92. What's the difference with Images inside frames vs fills vs Masked in Figma: Hi everyone. In this video we're going to look at these three different options for putting images in a box. How exciting it's super important though, because it catches a lot of people out. Especially when we move further on in the course, because you can have a frame that has nothing inside of it, just an image as a fill. This one here is a frame that has an image hiding inside of it. This one here is a mosque group inside of this is a lot more complex. There is a masking object and an image and the rapid mask group, you will stumble across all use cases of this, and they all operate slightly differently. And after this video, you'll know how they work so you don't get caught out too much. Alright, let's jump in, right, to get started, I've made three frames, That's it. Okay. Frame 1,718.19 in some ticks underneath for no good reason. Let's look at the different ways of putting Images inside. So the first one and the most common one, the most useful and most flexible is just having a frame and giving it a fill of this color. But all of a solid note of an image. Choose the image. I'm going to get it from our exercise files can to images is one called product one. Okay, the cool thing about this is by default, it's set to fill. So it means that it stretches and does good stuff for responsiveness. We can go through and say actually we want to crop it, okay? I can grab the edges and change the frame. I'll click the image K and mess around with it and rearrange it in here. So it's quite flexible. And undo. The other way of doing it is putting an image inside the frame. Whereas this one here can you see the last structure? There's no little chevron. They I can't there's nothing in here. It's quite tidy. It's just the fill applied to the frame. Let's bring in an image. Let's go command shift K, Control Shift key and a PC, or hit the convert to component, which is very similar Command Option K. I do that all the time. Whoops. I'm going to bring in product to, and I'm going to wait for a second and then just paste it in here. That difference is, first of all, it's giant. Second of all is can you see here at my frame as the same old fill color and get rid of it. Doesn't really do anything, but the image is inside of it. You go, It's a separate object. That's why it's not scaling and resizing. And if I want to resize it to fit inside of this frame, I can double-click it, realizes way too big. Zoom out there it is. Okay. Hold Shift. So it's just a worse way of doing it. Okay. But you end up doing this way all the time. And sometimes it's easier rather than trying to do this and trying to do the crop and trying to fit it in here, you see the image has a fill applied to it. I can copy this, get rid of it and delete. Grabbed my frame, which actually get rid of the image layer there. Go to my frame, just paste it in there. Now it's a lot more connected, uneasy, but that's where a lot of people get stuck, especially as we go on through this course. Probably better to be a fill. If you wanna do the whole separate thing inside of it, you might wanna do a mosque. So let's do that as a last option. So I'm going to bring in product three. Can be way too big, so I'm gonna hold shift and drag it out, stick it on top of my frame, click the Mask button, and then you go, you end up at a similar place. It's a lot different kind of structure here. We've got this mask group. Now inside of it is my image. And then this is the thing that is masking it. So I can work on these independently, on the frame to say you on my mask, and I can work on my image, resize it, and reposition it. So we end up in a very similar place. We can do all the cropping, whether it's a fill, whether it's image inside of a frame, whether it's a fill of a frame, whether it's an image inside of a frame or it is a mask that has two ingredients. The mask, the thing doing the mask, and the image itself. But when we're looking at it from like this, they will do the same thing, but different methods of getting there mostly do this images a fill. But anyway, I just wanted to point out the differences before we go too far on because it catches a lot of people out. Alright, that is it. Image fill, fill, fills. I'll see you the next video. 93. How to crop images using shortcuts in Figma: Hi everyone. Nice, easy one. We're gonna look at how to crop images using some sweet shortcuts. It's jumping right to start with, I've thrown in three images. You can get them from anywhere. Okay, I've just dumped them onto my desktop here. They are from the exercise files. These are the creepy chickens made these last week, then a couple of videos for you, but man, these seem more creepy this week. So let's look at cropping so we can click on these and there's a crop option here. And we click it and we can start doing some cropping. Okay, so there is a better way though. If I hit undo, undo again. Okay, What I wanna do is if you have an image selected, now, it is just a plain old image. If I grab the edge, just kinda resizes. But if I hold down the Command key on a Mac, control key on a PC, can you see how you can really easy just grab these edges to resizes and crop it. That is the best way. It's my favorite way. Hold down Command on a Mac, Control on a PC. The other shortcut that is handy is doing it this way. You can't really see how big it is. So what you can do is if you hold down the Option key on a Mac, alt key on a PC and double-click it. You get into this mode here that shows you like. So you can see both the frame that's kind of cropping it and the actual image itself. And you can grab that image, can resize it, hold Shift so it doesn't mess with the scale. So down here, double-click, it doesn't work. If you hold down Option double-click or Alt double-click, you can get that crop. You can work with these separately. Depends on which way you want to work. Or the one I used the most is just holding down command. And you can crop things up. There we go. Let's Control on a PC, you have a handy one is if I grab the frame tool and I want to put this in as a fill, if I put that in it, it becomes an image inside of the frame. Just a reminder, what we can do is we can copy and paste properties which includes this fill. So I'm going to hold Command Option C for copying properties, That's Control Alt C. Then command option B is kinda working, moves it across spot because I did this crop over here. It's kinda stretching it out to fix that. You can go in and say not crop, Let's fill. Here we go. So command double-click or Option double-click on a Mac or Control and Alt double-click. Alright, that's it. I will see you in the next video. 94. How to mask images with text in Figma: Hi everyone. In this video we're gonna look at putting Images inside of text. The easy way is click on Fill, go to solid, pick image, choose an image, and you're done. What we'll do though, is in this video, I'll show you a couple of different ways and I'll show you the difference between masking and fill will put multiple images inside of it, will even squeeze a vector. And I will look at a couple of things that might catch you out. Alright, let's jump in. First up, I've brought in some images, bringing anything. I've put some in the exercise files called water oh, 12.3, just to use as examples, but you can use any old image. Okay? And to get the image inside of the text festival that takes needs to be thick enough that you can see the image inside of it that's too thin. Hermione's the shortcuts to make the weight bigger or what's handy, It's Command Option and the greater than and less than, okay, That's Control alt greater than and less than, and we go. So I've got something nice and chunky. I also, I'm going to use the K2 to scale my type. Remember that trick? Just get it something proportionate to my image. And the best way in my opinion is to select this and it doesn't even need to be anywhere near it. We're going to use the copy properties like we learned in the last video. Remember that's Command Option and C, or Control Alt C, and then Control Alt V or Command Option V on a Mac that will paste it inside that fill. That copies the properties, in this case the fill. And we'll paste it in here. And I'll put it inside of a frame so we can actually see it. The nice thing about this is that it is changeable. Okay? We can delete stuff and we can make it rowdy. Can you see the image changes to fill it in the background? So that's why it's really nice. And the layer structure is really nice. Gates just type with a fill inside of it. Easy. You can adjust it afterwards the moment sit, it's default to fill. So it's going to try and cover every part of the type. Sometimes you want to sit in part of the image. I'm gonna get that out and I should've made a duplicated the beginning. You have a white fields can be gray, That's okay. Let's make a couple of coffees then. We've got this one. Let's say that you want a specific part of this image, maybe the top part of it, not the bottom. Actually It's use this image here. So we don't want it right in the middle here. We want to down the bottom, let's say. So what we're gonna do is copy it using our shortcut and then paste it here. Okay, what we can do is move the shortcut from the last one. We can hold down. How do we get all the extra cropping around the outside? Now, Kiwis hold down, then we double-click the key is all you got Option on Mac, Alt on a PC. So just double-click it. Now we can see the frame and we can say actually I want to move it around and maybe resize it, okay, holding shift. So we want the top part of this. We won't try and get the bubbles through. We can re-size it in this mode as well. Okay, maybe that's what you want. Here we go Escape to get out. The one thing when you do change it from fill two, because the moment this has got our image property of filled by default, we've changed it by hitting that shortcut to escape. This one now has out one of crop. Can you see the width and height of it here? The one thing if I resize it, make it really small. And as an example, and watch this if I Alt or Option double-click it. Can you see what it's done then it's kind of done. This we'd crop thing. I don't know why it does it, but it does. That's one thing to note. You might have to go through and say, not helpful. I'm going to copy and paste it in and again. Alright, so I've undone it till I got back the other way you can crop images. We kinda looked at it a couple of videos ago, the fill versus crop. Okay, I'm going to grab this one for this image here. K tools make it nice and big. Actually just do it to this one here. Is you can just select them both and make a mask realize, undo that this needs to be the back, that's the open and closed square brackets near peaky. Send it to the back, select both of them, go to mosque. There's nothing wrong with this way other than the layer panel is a little bit more complicated. I show you both of these ways is because you will get other people's work with, have done it this way. And some of them will have done it this way with It's just this text. Okay? It's just an image inside of it. The reason you do it this way is there's no real good reason that I can think of. It is handy when you want to mask more than one thing. Because I can say you want this one, want to Images inside of it because it's a nice, easy grouping to say actually I want you in there and actually you're on top. Okay, so now I've got a mosque group. That's my masking text and anything underneath this, we can have lots of things can go inside of it. Probably more handy when you've got a victim. Okay, let's go. I'll vector in here. And again, as long as it's you've got beautiful then you can put lots into it. But you can actually over here just so you can actually have more than one fill. Gay. And I can say actually this one has image. Fill in to pick an image and then pick a product, a little car. I'm not going to fill it. I'm going to crop it. Because what I wanna do is say kind of getters and this is a little turnip. I'm actually move it around. By default, the extra fill one gets 20% of fill color. So you can actually do the same thing where I've just got some plain old text. It's got to fills. Same as this. Doesn't really matter, but we get to use to both of them. Alright, so that's masking with text. The takeaway is just do it this way. We copy and paste it in four. You can go the longer way. I don't know. Is it longer? Fill image, choose Image, stick it inside of there. Let's grab this one. If I close it down now, there is absolutely no difference to what we did when we copied and pasted it, all filled it with an image, we get to the same pot in the best is that this resizes because it sent to fill, it will resize and keep my image in the background. Alright, let's get rowdy. Actually. Let's finish up and I'll see you in the next video. Bye 95. Class Project 10 - Text Mask: Class project time. Easy one. We are going to put Images inside of text. What I want you to do is use your app name, okay? And I want you to split into two separate blocks of text. And I want you to experiment with both ways of masking images with text. We looked at an earlier video. This one here is just the layer limerick with a fill all the way over here or that image in it. Okay, nice, easy, simple way. I want you to do this all the way as well where we use this masking. So it's an a moms group is my image. That's the type there. Want you to know how to do both, because you'll get both from other people, from the community. There's no right or wrong way, but it's good to know how to handle both. So two separate images in two separate bits of text. What OPE to do is put it in Instagram frame. So up until now, a hit if key, we've been using a lot of the phone stuff. I want you to go down to social media and pick one of these. I'm using the Instagram post from mine. You can use whatever you want because we are gonna be making a kind of an ad as we go through this next section. One because it allows us to practice a lot of the imagery stuff in this category, in this section, but also gives you a hint at what a lot of designers are doing. They're actually using Figma fulfilled Graphic design purposes. It doesn't do like I'm kind of more traditional print based graphic design can be made to do it. It's not really great, but depending on where you're working for me so much my design work now is more digital oriented social media, especially. So you can totally use Figma for that outputs great files grade to work with. So start with a post. And what I'll get you to do is I want you to upload you a screenshot of the two Text masks. So just one screenshot of both of those and upload it to the assignment section. But don't worry about sharing it on social media at the moment. Cause a little while. What we're gonna do is we're actually going to let me grab a Lowe's, unhide them all. Now my base work, okay, What we're gonna be doing is creating an ad and we're going to try and force every single section of this imagery part of the course into this. That's why we end up with this abomination of design. Because we need to stick all the elements. And so we'll put that at the end. I hope yours is better than mine, but we're gonna learn all sorts of cool imagery stuff with things hang out and use. Transparency is masks and all sorts. A luma mask is and all sorts of stuff. So we're going to squish them all in. And what we'll do is we'll get to share our final project at the end, you go, the green Dan are so bad or I might have to go switch that one out. But for the moment, just do these two texts parts, upload them, and I'll see you in the next video. 96. How to mask using transparent pngs with alpha channels in Figma: Hi everyone. Let me show you how to use images that have transparency to mosque background images and fills. This image has transparency, double Bam masking out another image. I'll show you how to do it. And then if you want to stick around, I'll show you how I made these transparent background images in Photoshop and nice and easy to make a really nice effect in the end. Alright, let's jump in, right first up, we have gotten your exercise files. There's two alpha ones under image, okay? There's a JPEG and a PNG. Jpegs have no transparency or alpha. Alpha is another word for transparency, but the PNG in this case does often we're looking for pngs to make this work. Okay, so I'm just going to bring it in and I'm going to scale it down. He's Mike K2. Get it to an appropriate size. What are you doing there? Yes, I've already recorded this one. It didn't go very well. Lots of my way. So we're restarting. So we've got this, we need an image for this to mask out. Okay, so I'm going to bring in another image command shift K. And let's bring in, I'm gonna bring an Alpha four. Cool. It's a cool abstract thing. I'm gonna make it the right size to cover this. And we need to remember that who's on top is that this will that, that seems normal. So it's wrong. That needs to be at the back. Select both of these and all we need to do is hit Make Mask. And there we go. It looks at our PNG that has transparency or alpha indices are I will make your mask. Who remembers the shortcut because it's not framed very well. The paint marks aren't coming through very well. Who remembers the shortcut to show both this and the outside? That's right. Hold down the Option key on a Mac, alt key on a PC, double-click it. And now I can move this background one around to get it to where I want you. Here we go, skip a couple of times to get out. That is how you do an Alpha Mask. You can do it with shapes as well. Wheatley, I can do it with this frame. But if this frame is a rectangle, okay, this might change and I don't know why this is happening. So let me copy the properties that paste the properties rectangle using the rectangle tool, frame tool. I'm going to bring in my PNG again. You get it to an appropriate size holding Shift. I'll do one there and I'll do another one down here. So the rectangle, as long as this isn't the BEC square bracket to the back, I can go Mask. Woohoo works. Play around with my gradient there. Lovely. This one here though. The moment I need to double-check that this image is not inside of the frame, which it just happens to not be where as at my frame 21 is there, where's my image? And these are far apart on the Layers panel. Select both of them and hit my closed square brackets, they all come to the top. Now, this image needs to be below the frame but not inside of it. You go. Now, do the same thing and boom, I didn't work. I don't know why I haven't been able to get that to work. Let me know in the comments if you do. But hey, we can just make it a rectangle. Undo that. There you go. You can do with anything that has an alpha channel. There's another one, a native practice with this mountain range. What I'd like to do is actually just show you how I make, because I made these for us. You could just go out to something like Google and say cityscape PNG and find something you need to check on the licenses if you're going to use this properly or if it's just personal use and you're practicing download anything. So if you want to make stuff just out of interest, I'll show you how I do it in Photoshop. I've got this one here. I want to mask the background. Okay. Do I want the water? There's two options, right? You can select subject which often grabs the interests. And then over here in your Layers panel you can hit mask layer. Save this out as a PNG in your way. You might have to do some tidying up. Okay, so you can use the Quick Selection Tool. Hold down the Option key and get rid of some of these bits in here. Okay, you just kinda drag them down. It's pretty good. There's holes that you need. You let go of that Alt or Option key and just color in the bits that were left out. Depends on how detailed you need to be. Whoop. Alright, I'm going to add my Layer Mask and how am I going to save it? I'm going to use the option here. So I use File, Export, Export As it's brilliant because it allows me to do a couple of things. Allows me to say, because remember, JPEGS I mentioned there don't have transparency, so I'm just going to fill it with white, which is not good. We want PNG. So it has transparency. You can see it there. And inappropriate size. So I'm going to put it in. It's 1,500 pixels wide. So it's not so big. And then I'm going to export it. So that's what I do. The other option might be is this one here. Okay? There's an option here to say Select Sky. And I can say Select Inverse, and then hit that Layer Mask option and did the same thing, save it out as a PNG. One last little tip. If you're looking for a really cool silhouette, sometimes the edges of this is not very strong. What you'll find is, if I do this, Can you see it's a little bit fuzzy at the edges here, which is maybe what you want, maybe not. What you can do is try not to be a Photoshop tutorial. That if you do want to learn Photoshop more, I have an essentials and advanced course, but what this layer selected, you can go to your adjustments. Let's look at levels, which is the second one in here. And you can just miss around because you don't actually want, you don't care about the sky and the mountains, right? You're looking for a nice high contrast between the two. You can mess around trying to get a really clear definition between the two. It'll get rid of some of the ambiguity when you go to select both of these, we're being very destructive. Ok, and let's go to merge layers. I just right-clicked. Now if I go to Select Sky, It's just a little bit clearer about what is what I can do. The same thing, Let's inverted, okay, and my Layer Mask. And we just have a nice tidy it edge on a lot of this because he just CRISPR. You can spend more time and get it better. Now we do a File, Export, Export As, and just make sure it's a PNG where you go, give it a more appropriate size and do what we did at the beginning of this course. Bring it in and use it as a Mask. Alright, that is masking using transparent pngs, aka Alpha masks, aka alpha channels. That's it. I will see you in the next video. 97. Class Project 11 - Alpha Mask: Hi everyone, I'm super awesome project to do not homework. This one is creating your own Alpha Mask. So create a Alpha Mask to mask an image like we did in the last video. Now you can create the image that you use yourself, okay? So make the transparency yourself with something like Photoshop or another tool that you know how to use. If you don't know how to use that sort of stuff at the moment, you can find one and existing PNG from the Internet. Pngs, one of those files that has transparency baked in so often if you add it to a search to something like Google images, PNGs, what I went with, you will often find a lot of images that we'll have transparent background. Check the licenses at this stage though we are using it for educational purposes, using it commercially. You're not trying to sell it. So often, you can just use anything but double-check the license. When you're finished. Take a screenshot of it. Okay. That's the one we made. I want you to do something new and different. Just remember though, you might want to be all look at the other stuff we're going to make. It's coming up. You're going to add it to your Instagram ad, pick something relevant to your music genre. Otherwise, U2 will have to try and squeeze a city with paint or reason onto your edX. There you go. I will see in the next video, enjoy the project 98. How to create a luma mask in Figma: Hi everyone. In this video we're gonna look at how to create something called a Luminance Mask or Luma Mask. Basically it uses the light and dark parts of an image to mask things out. And you can do some cool duotone effects. Alright, let me show you how to do it. Alright, first thing is bringing an image, okay? I'm bringing in luma one. There's nothing special about this is just a JPEG I found on unsplash does look cool when there's a really high contrast between the foreground and background. Let's enter reason I picked this one plus that look very palm tree ish. Okay, The next thing you need to do is we need to make sure that the mask is on the bottom of the thing that you want to mask. And make sure it's behind. Select both of them. You masking button and nothing happens until over here in the Property Inspector, I can you see it's defaulted to alpha. There is no alpha and this one. But look at this luminance. What it's doing is using the dark parts of my image to put a hole in this one, I'm going to click off, click on. So I've got the whole thing. Can you see, look, it's actually a hole. In this case, the luminous is using dark parts to poke a hole in it. And that's when you get this kinda nice Duotone kinda look going on. If yours is looking a bit weird and maybe I pick one that has high contrast because it looks good in this tutorial. If you have to use an image and you want to try and do something different to it, what you might have to do is go into the image is my luma one. Actually, no, it's this one here. Okay. And I can go into the image and you can mess around with things like the exposure. Can you see? And maybe you want a bit more detail in there and just have a play around with contrast and saturation. Just all of them to see what moves the needle in terms of getting at how you want. It's mainly the lights and dark, highlights and shadows. Those sorts of things will change the way this a luma mask works. Sometimes though you want the opposite at the moment there's a whole with the tree is, say you want the whole in the background, you know what the tree to be purple. Let me bring in the other file. Alright, I bought in luma to, and made a couple of colored boxes to kinda show you the difference. And actually right there, alright, the magic of editing. What I want to do is invert this first. So there's no feature at the moment. They keep adding features like this. There's no invert colors. But there is a plugin that I've found called Invert color. I'm gonna hit Run invert. I need to select at least one. Then I'm going to run it. Actually, I think the way that this one works is that to start with, it will say something like configure settings, hit Save, then run it again, and it will invert the colors. So basically just switched them around. It's mainly to do with the lights and darks. Okay. You see now the cat was black but now he is white. Okay, so I'm going to do the same thing, put it behind, make it a Mask. Make sure that said to illuminance. And it's due the difference between these two. You go Same, same, except one is inverted and one It's not depending on what you wanna do. It's pretty cool. Alright, that is how to do a luma mask in Figma 99. Class project 12 - Luma Mask: You got to class project time. This time for an Alpha Mask, a luma mask, Dan, Oh, capitals, yelling keyboard. Alright, do what we did in the last video, but with aluminum mask, overlay it with a colored frame like we did here. Pick something appropriate for your app depending on what genre of music you got. Okay, you can use your own image or you can find a stock library image, something like Unsplash or Adobe Stock or Envato Elements, whatever you've got access to, and then take a screenshot and upload it to the assignments. Again will keep it in the assignment section, but we'll put it together later on. What I did and you guys all get to decide what you wanna do is I put it in the background, they overlaying the background image. There's my one there. Why do I have a palm tree? That is very good question. Because that's what I picked. Alright. You pick something more appropriate. Alright, do the project, upload it, and I'll see you in the next video. 100. How to make a spillover mask outside of the frame in Figma: Hi everyone. In this video, we're gonna look at something called spillover masks. It's a word that I made up, but it's these images that kinda spillover the edges of the rectangles and circles. And it looks really cool. It's really easy. It's just an optical illusion in Figma, more of a layer stack, but it's cool. So let's jump in and I'll show you how that made, alright, to get started, bring into images. And I have got these two spiller once. There's one with the mask, one without a mosque. For this to work, you need to have Masked something out from the background, but you need both of them to get that kind of cool over Levy thing. Now, not a Photoshop course, but I will at the end show you I got this masked out up to you. There's lots of other tools to do masking. And what we're gonna do is we need these. I'm going to make duplicates of them, okay? And I'm going to make sure that this is over the top of this, because of the same size, they should overlap nicely, the bit confusing, but you get the idea. So what we're going to need is basically this one here that has a mask. I'm going to turn the eyeball off so I can't see it. This one here, I'm just going to move up so it's underneath this one, just for confusion sink because I've got these other copies at the top, one on top with the eyeball off. Okay, So it's hidden. Then this version I'm gonna do is I'm going to grab the Ellipse tool, which is the 0 key on our hold down Option on my Mac, alt on a PC and shift just so it starts from the center when I start dragging. And it's a perfect circle. Get it how you want to the V tool, the selection tool, line it up and all we need to do is put this at the back, okay, so it needs to be behind this image. I'm going to Shift click it. So I got both of these selected, make my mask, and then just turn the eyeball back on this guy on the top. Like that, you go inside the outside, his stuff looks trick, but it's just a optical illusion. Another kind of interesting trick with this is I'm gonna do the same thing. Make a duplicate, oh, my keyboard to get a circle Option Shift or Alt Shift on a PC. And we'll do it with a color like you're at the beginning. They can pick any color as long as it's because I'm gonna green. I'm looking actually just going to pick something different, but I want something to contrast this kind of brown, warm ocher color. And of course it's greened in and get it lined up holding Shift so it doesn't squish my circle. You don't have to really do anything, just send it to the back. And this one up the top here, I'm going to add the cool thing about something that has transparency. If you add the effect of drop shadow, Okay, in here, I'm gonna go zero for, it'll depend on your shape. That looks fine for me. Blow for Y4, so it's poking down the bottom in 25 per cent. Looks quite cool. So it's have a look. No shadow, shadow, shadow, shadow, cool. It's really what happens is the mask, it's done somewhere else. And we just do some nice layering here in Figma. Now, that's a super easy one. Let's do one that's mildly more complicated. So let's bring in the other two images. Remember command shift K, Control Shift key on a PC, bringing the to spill O2s. Okay, and I'm going to place all and these are put them over the top of each other for me, which is great. I've got one with a mask on top and then a mosque at the bottom. What we wanna do is let's turn off the mass one. Let's just turn the eyeball off. Who moves what the shortcut is. Command Shift H or Control Shift H on a PC. So I've hidden that one. Now, this one here, so if I get that one exists, Let's just work on this. So I'm going to mask mine with a rectangle. We use a frame because it might throw up another problem that'll be helpful to cover. Okay, So I'm gonna use a frame. Same tricks work if I hold Option and Shift and start in the middle, it'll draw a square from the center, okay. And then get it so that you want to add to pop out. Yeah, let's do that wasn't my original plan. Okay. And all we need to do is slick both of these and make a mask that has to be the back. Using my square brackets, then make a mask. All right, so it's hide that to try not be too confusing. Okay. And we've got spillover to the one back on. Actually, it's doing that went on as well. Next, I got my mask on. Okay. And then I've got this plain old spiller to mask just hanging out here. We need to trim it up because I want the bottom to trim up. And what we could do to save time is I just want to drag this up from the bottom. Really done. I, who remembers what I hold down on my keyboard just to kinda trim it up. That's right. Command on a Mac, Control on a PC. And then we go, go how it's kinda poking out the edges. Nice and subtle. Big one at the top. We can trim it up more nicely. I'm holding that same key down. Command on Mac, Control on PC. I don't know. I really like that spillover effect. Now how do you get the mask? And the next one we'll get started with the pen tool and will mask it out in Figma. But at the moment, there are some plugins K there. Okay. Ish, not really. And I'm not saying you have to learn Photoshop, but most people who do a lot of UX design work, but also know a bit of Photoshop and Illustrator. Don't have to. Those of you who do. I'll show you what I did to get the file started. Alright, so this one was really easy. All I had to do was actually delete the thing that I made. Open up the image in Photoshop. If you want to follow along, you can do I want the spill O1 and O2 than no mask options. I'm going to drag that into Photoshop, open it up And we'll start with this one because this one was super easy. I just went Select Subject, which is magical and awesome. Even done a pretty good job of in here around the glasses. It depends. Like we could spend a long time doing masks, but for what we need, probably need to trim that out. Maybe it's let me grab my magic wand tool. Okay, and we don't use the magic wand anymore. We use the Quick Selection Tool, which is better. And I'm gonna hold down the Option key on a Mac, alt key on a PC just to get rid of some of this and let go of that key to add to it. Can you end up hopefully with something that's a bit balanced? And again, decide on how much detail you want to go into. That feels like enough for me. Then I just say it Musk and then I say Command Option Shift S. Okay, to do this one here, it's under file, it is under Export, and it's this one here. Export is great. If you're still using Save for Web doped. Okay, this one here is much better. Okay? Png, some transparency. I gave minor width, a height of 1,500, so it's not so big and that's how I mask this one. Okay, this all the one here was a bit trickier. So I went Select Subject, stand back and got close. And it's the same key. We can play around. There's two things we need to do. Back to the Quick Selection Tool. And you just have a look, Let's holding nothing now because there's missing bits. So I just, by default it's on the plus adding Mode. I just drag around until it starts getting the bits I want. Okay? I'm being very lazy here, okay, but its thing a pretty good job. All of this is still a good image to mask. There's a reasonable contrast. Again, I'm not doing anything. We're just kinda dragging around. Now if I want to remove, because at the moment that's selected, right? So if I do that fat, what I wanna do is minus this bit out. So like before hold down the Option key on a Mac, alt key on a PC and just dragging the paint just really wants to snap to the edges. And it learns as you go. Don't want this bit. So I'm going to Alt drag. And I went, oh yeah, grid all of this because it's a really similar tone. It gets rid of that pit as well. So I'm going to add that back in by not holding anything down. Now, how long am I going to spend making this awesome? All there'll be up to you. You can just click once. When to File option. Click this what you end up with this balance of like, yeah, it's really good. I love it. K. So that is my Mask. And then save as PNG bring into Figma. Actually, no, it's not because I had to look at this. So if I do this mosque, it's a little tripped up on the edges, right? Like the ages are okay. But it's a little bit, no, no chewed up. What we can do is once you've added your Layer Mask, you can have the mask selected and go to this one that says, because on the layer mask go to this one that says Select a Mask. This is the magic part of Photoshop. Okay, I'll stay nice and close and watch this if I crank out the radius tufa, okay, it'll smooth out my edges. So I've got it up a few pixels. If you tap P, it'll show original, okay, toggle it back and forth. Again. It's kinda dove into all the waves here and just looks a little bit nicer. There's a lot more to select a mask. What I might do is look at smoothing. I'll crank it right up to kind of smooth the edges too far. But a little bit of smoothing. Or just a couple. I feel like that's fine for what I need. Does any kind of ghosting around the outside, you can shift the edge and a little bit, Let's shift to all the way in. Can you see it? All the way up? All the way in kinda removes a bit of that ghosting. Okay, in a little bit. And just kinda repairs that Mask or like I don't know. Thanks. Sees that up a little bit. So now I'm going to click on the layer. I'm going to Export as PNG. And that's how I got those images for you for this video. Cross-sell, do dance, Photoshop essentials or advanced course, depending on your level, Eric and everyone does the Essentials. One, there's so much in there that you might've missed even if you are reasonably experienced it Photoshop, if you've already done my course high-five, you go, bam, alright, that is how to do spillover masks in Figma. There's just too less 101. How to use the pen tool to make image masks in Figma: Hi everyone. Hey, in this video we're going to make this mask here using the pen tool. We're going to use it to create a victim mask. It's not really a pin tool exercise like how to use the pen tool. It's a bit outside of the scope of this course, but for those of you who kind to know it already aren't petrified of it. I'm going to show you how I go and make these masks, the pros and cons of the do's and don'ts. Alright, so that's jumping. Alright, Before we go too far in this video, the first chunk of this is just drawing this outline around our coffee cup with the pen tools that we can turn it into a mass later on. That bit could be particularly boring for everyone. Depending on your knowledge of the pen tool with you care enough about the pen tool. But there is some good stuff in this video about doing masks inside of masks. So there'll be a timecode on the screen now, Thank you to the edit is Jason and Taylor for making all the editing magic happen and numbers appear, run reports. You can just jump to the ER, to the interesting bits. If you would like to learn a little bit more about the pen tool and watch me do it, my technique, What's the whole video? Otherwise, jumped to the part into the video. Alright, so I've got an image that avoid him from the exercise files. It's called Pin tool. It's in the Images folder. Bring that in. It's really big. It's kinda the topic doesn't really matter how big it is. Remember this is for people who already have pen tool knowledge. It's kind of outside of the scope of Figma. We do cover it a bit more enduring later on. So if pinto you like, man, that's too hard, It's okay. You can just watch those because there's some interesting stuff that goes on. But it'd be a lot of you out there with pen tool. Knowledge will either be a master of it, which will be a few and everyone else that scared the pen tool and use it if they have to, I'll go through my process, but also some tips and tricks for getting masked within masks and stuff. So what are we gonna do to make this easier? I'm going open up my quick actions. So it's Command forward slash and just typing the word snap and turn that off, that off, in that off, okay. It just means the pen tool is going to try and snap to a bunch of stuff and it makes it tricky to draw these kinda more natural shapes. So I turn mine off and try and remember to turn them back on later on, but you'll forget. That's okay. The other thing is, is that I don't need all of the frame or the chrome of Figma. Remember that shortcut earlier on, Command or Control backslash instead of forward slash, can you just cleans it up? You can still work it. And if you know your shortcuts like P for the pen tool, you can just use a lot of your screen real estate for this. So what we'll do is I'm going to not try and explain the pen tool, but I'm going to either go around because I kinda myself. So click once for corner down the bottom here, what I like to do is I could click once and then try and do a curve there. So a lot of people try and do nothing really wrong with it, but I find everything flows better when you get down here, click hold and drag, even though it's Bindi. Okay, I like to line it up straight ish. And that means that when I click hold and drag over here for a curve, everything just flows nicer when there's less anchor points. I'm using my spacebar a lot and I'm using my shortcut for the mouse. I'm holding Command or Control on a PC and using my scroll wheel, I find it a nice way to get around. But you can use plus and minus to zoom in and out if you'd like. Over here, one equal distant over this side, I'm going to drag it out kinda the same as the other side. Can you see these kinda match now you like, what about the big gap in the middle? There's lots of times we have to come back and fix things. Because later on we'll come back and we'll sort that out like this. But the moment I'm just gonna leave it, click hold and drag one up here. And clicking once here. If you're getting the wrong spot, that's where it, this one here is an interesting one. How do you tackle? It's a curve here in a corner there. What do you do? I click hold and drag to get the kinda curvy bit, then hold down my Option key on a Mac, alt key on a PC and snaps it, drag it up here. Way to drag it. So much experience comes with the pen tool. It's hard to know exactly. It's not up until the left, it's 1 million times and get better at it. Hands up, who's hands up? Who's had problems with the pen tool? Who is having problems? Who is a master? Because they did dance, illustrate a course, cross-sell. Alright, so I'm gonna go up here, click hold, drag up. Even though I want it to straight. I want that curve there, kinda sticking out at the top. Then I probably want a really big wide 01:00 P.M. so that it's curving up but really flat. And I want to mimic this one over here. So I'm gonna go, you didn't quite work. It's alright. Click once for this corner because there's an inside corner. Click hold and drag over here. And if you're far enough away, like in all your lines, look good. And click once what I'm looking for and if nothing else is when you get to the end, can you see the little icon changes? It's all joined up. Now, I switched to the selection tool, which is the V key, and I work my way around fixing it up. Sometimes they're just not in the right position and sometimes the handles that poke out of them are the wrong ones. So again here, how much do I care about this? I should care a lot more. That this doesn't quite line up. But I don't because it's just a really small little mask that's going to be used quite small in my design. And What I jump out to Photoshop to do this, I totally would. I would jump out. Where did you come from? If you've got a stray point that you don't want. What you can do is with the selection tool, you can click on it, hit Delete, but I got rid of that whole line. So what you can do is use the pen tool, hold down the Option key or Alt key on a PC. See the minus kinda leaves the line there, but gets rid of that anchor point that we didn't want. Back to the Selection tool. Okay. Do I have any handles to work with? I do not. Hey, your BAC minus you Selection Tool. That keeps coming back. Alright. Go away. Escape. He's back. Why you keep coming back then? Gone? You watch me get rid of it. And that's back. Is that a handle? It's not hang. I'm going to have to open and close Figma. Here, pen tool, hold down Alt or Option. You've gone hit Escape to come out of it. Hit escape a couple of times, come out of it, double-click it, and it's back. Me, or is it Figma? And then close Figma down and open it back up. You wait there. Alright, We're back. Let's see what we got. Double-click it to get inside of it. Got a point that I don't want pen tool, hold on, Alt or Option, gone. It's back. Alright. I'm doing it, getting rid of that way Pinto. And then drag that one out and then drag that one out to connect them up. Why was that bad? I have no idea. That normally doesn't happen. Alright, we're going to ignore that for now on, if it happens to you and you go, sometimes that happens, that's looking good down here or looking good. Let's get this one to be balanced. And the trick with good, nice curves like this is that this should be the same on this side. Similar. You can see they're not perfect, but the same kind of links hitting the same sort of direction gives me the kind of a nice consistent curve. Our rights, now we're at the jump bit, or for those who stayed around and watch the whole thing, we hear. Of course, we hear those who jumped along and scrub back and forth timeline of eventually founded. You'll hear, welcome. We missed you. Okay, so we've got a victim. It can be drawn by somebody else. The trick with it is a couple of tricks actually is that the stroke around the outside yours is probably black, is not important. It's the fill if I try and actually it has had done or how to escape. Okay, so there's my vector, it has a stroke if I put it at the back, like we did before, select them both, make a mask. It's making a mosque. It's just making a really thin, tiny one. The coffee cup is in there somewhere. Okay, but not that useful. So I'm going to undo, undo so my strokes on the front or move my coffee cup to the back. Select the stroke. I'm going to get rid of the stroke at a fill. And it's the fill, no matter what color it is, is what's going to give the mask it's Maschine. So I'm gonna send it to the back. I'm using my square brackets. Using the first of the square brackets to send it to the back. Select both of these, Make Mask. Looking at us, we made a mask and let's stick it in a circle 0 key on your keyboard. Hold down the Option Shift key on a Mac, alt Shift key on a PC to drag perfect circle from the center. Get it. So it's peaking out the top, send it to the back. Give it a color. Let me use my local primary color. Get it kind of position there nicely. And I'm going to add a drop shadow for no reason other than it looks cool. So I'm adding it to the coffee cup. Okay, and what I'm gonna do is I want this kind of big lofty one. So I'm gonna go 50 actually. Well that's not worthy enough. Hundred. And if you blur it like 200, you get this kind of like I quite like it. Can you see what I mean by the blur there? Blew off, on, off on. Anyway, that is a way of using the pen tool to do masks in Figma. There's nothing wrong with it. It works really good with nice crisp edges. It just took a lot longer. So many people still use the pen tool technique instead of some of those out Photoshop tricks, totally fine, just takes longer. The thing you will run into problems with is they've got one of my junk drawer or is it junk drawer there? It is their junk drawers where I keep this stuff that you don't see is my life, my taste stuff. Can you see Masked? This would be easy and it'll be easy right until about here. And then who knows how easily that would be, then you really need something like Photoshop. Anything is out-of-focus, kinda blends in with the background, got light overlapping. It makes it tricky with the pen tool. But products, stuff like this is super easy here. Terrible with the pen tool. Great and Photoshop. Alright, that is it. That is how to use the pen tool and Figma to do our vector mask. The big thing to remember is that the fill needs to be in your mosque for it to work properly. Otherwise, I don't work. Alright, that is it. I will see you in the next video. Alright, you thought it was over. I'm back. I've come from the future. Okay. I was doing some other work for a different project and I forgot to my snap back on. So just when you finished doing the pen tool in lesson this exercise, remember your quick actions come out of control, forward slash and go snap, and then go, You bet, gang. Open it up again, snap, you back on and do all three of those. Alright, you go. Now you can carry on 102. How to use color layer blending modes in Figma: Hi everyone. Hey, this video, we're going to look at something called layer blending modes. They can be helpful with things like black and white logos, not transparent, but if we miss with the blending modes look, we can make it transparent. We can see through the white stuff. It's a nice little hack. What I like using them for though, is this can you see images of background? We remove all of the color from it. Then we can play with the color blending modes, okay, to do some cool stuff with just a solid color but of overlapping color gets some interesting things. We do it with type as well. This is editable type. Can you see? And it's just kinda affecting the background in an interesting way. Color layer modes, blending modes, mixed blend modes. There's lots of names for it, but it's the way that layers interact. And we can use this to our advantage to do some kind of cool, creative things. And it's jumping, right? Let's start by bringing in logo, one-two-three, that same versions of the Bring Your Own Laptop logo. And in a pinch, you can use a layer mode because the moment I've got this white background, it's a JPEG, there's no transparency bought. I can kinda fake it by going you over here, my Layers panel instead of pass through until it's moving across. The editor doesn't have to move across so fast. Let's Zooming. Okay, and we can go normal, does nothing dark in talking to multiply that. We've got this thing that appears to be transparent and it works. Obviously, it's better to go find the vector version rather than a JPEG with the layer blending mode set to multiply. But hey, it works. There's a whiteout version here. You'll have to play around with the different settings to see what works for your logo. Lighten these three groups. Can you see like all these kinda do the same thing? All of these kind of do the same thing. So the little lines there, okay. So they're not all exactly the same, but they kind of grouped them together. You go got like a whiteout version. Works really great with straight white and straight black colored logos. It depends on the logo, on turns on the color as well. So again, it's move it over there, Zooming and it's have a look. So multiply, Kesey, multiply between Multiply and normal. It actually changes the green a bit. And I would have a problem with that as the designer who made the logo, Okay. So it will depend on the color of your logo. Can you see you might find one that's close enough for a mock-up, okay, there's lots of different options down here. But that is interesting. Bad, we can get really creative with it, is let's bring in an image. So let's bring in an image called layer blend. I'm just going to drag it out here is a size, way too small. Alright, so I've got this image, but I wanna do is maybe just copy the fill. Because if I copy the whole Properties, remember our shortcut Command Option C. And I click on this frame here, and I go Command Option V. It'll work because in the background. But what you might not have noticed this, see this square. Whereas before they went, they got their screeners from this is what you can do is actually just grabbed the way the agenda here, copy it like this, and go paste. Alright, so it's in the back of my frame. I want to do a couple of things. I want to this image here, probably pull out all the saturation and play around with the contrast, probably the exposure. Okay, I wanted to be kinda dark and moody in the background. So you can do some pretty like all the typical kind of photo editing stuff inside Figma. But I wanna do now is overlay something over the top. So I'm just going to grab my frame tool. I use a rectangle tool. Why am I decided not to use the frame tool here is because I know that I want this just to be a background. And if I do a frame and I start dragging things into its kinda like imbed inside of it. I could do a frame and lock it. I'm just going to use R for the rectangle tool. Rectangle that is the size of my background. Okay, Here we go. Perfect. Fill it with an color. I'm going to pick ready fiduciary color. We go. And only need to do is change this from pass-through, normal does nothing, and then you can find the thing that works for you. The nice thing about doing this is that you could switch out the background image like you could just make images like this and Photoshop, okay, make a pile of them. But actually what you can do in CSS, your developer can do it engineered, can do, or you could do, is you can have two things. The background image, which you can pull out all the color of maybe soil saturation that can be done by code case in order to do every image. And same thing with this that's over the top here. You can play around with these layer blending modes. In CSS. They're called mixed blend mode. Have a look up that is a CSS class. Okay, you can do some pretty cool stuff. I'm going to pick one. Here we go. Now we've done the whole background, but you could do something interesting with, oh, I know, actually boring way could just be something like this. Let's see this round the corners, holding Shift and dragging it up. You might do something kinda like this. I don't know what I'm doing. That doesn't have to be the full covering. I have to play around my layers. You have to top what I'm gonna do. I'm gonna jump to do some drawing. You wait there Okay, I should probably take you along for the ride. I've made two rectangles and I've double-clicked to go inside, Let's to one of them off or double-click the one that's up. And I'm going to drag actually I'm going to grab my pen tool, hold down my Option key on a Mac to get rid of that point. And that's kinda cool on its own. I click Done. What I might do is grab the other rectangle that I hid and go You same thing, double-click it. Grab this one, kinda drag it around here. Oh, that might have cool. I'm gonna do that. Is it going to look cool? All we will see, I'm gonna pick another color because what we want is to overlap. Okay, that's what I've decided I wanna do, is I'm going to try and find something that has a coup overlap. And we might have play where I'm the layer modes here. Okay, So while this looks cool, that looks cool, that overlap isn't great and it's to do with the layer mode. We can do all sorts of stuff in here to find something that is quite cool. Is that quite cool? Oh, I don't know. All That's quite alright. Then you speed ages, doodling and drawing stuff that looks kinda interesting. Alright, that's the one I liked the most. Oh, there we go. It was worth it. Stripped down the middle. Let's deal with some text as well. We can do the same thing, okay, so I've just duplicated. I started typing and then I was going to resize and I thought, I know I'll do is we will use some of our shortcuts. So to do type, you can use the shortcut for size, which is good for small stuff, which is Command Shift, Control Shift on a PC and that greater than and less than often though. And I wanna do really big changes. I'm just going to use the K tool for scale and just drag it up. Probably want an even bigger. Okay, the other shortcuts, I'm going to select it all. Now you probably not going to remember these off by heart, but remember gotta shortcut sheet printed off in depends on your type nerdiness like font-weight for some reason there's a good shortcut for me, won't be for many people, but it's command option or Control Alt on a PC and just use that greater than or less than. Find something that's nice and big. Option Shift or Alt Shift on a PC to play around with the line-height. We're having this mesh it because it was such big type. Whom is the decreasing the letter spacing. Okay, That's right. Hold down the Option or Alt key and that same greater than, less than. Alright, And why do we want to be hearing and hit Escape on my keyboard? Because if I try and use the V key, the shortcut doesn't work when you're in the Type tool. I'm going to undo, hit the Escape key. And I'm going to rotate it around and do giant colorful Text. K for the scale tool. And let's pick a color. Muddy yellow. There we go. It's going to change when we look at our layer modes. So if I look wanted to kind of as a background thing, not a real like readable text. I just want it to be a cool background thing. I'm going to find something that works. You wait down, going to wriggle up and down this for awhile. Getting gonna go with overlay. I had my head **** to one side the whole time. And I might play around with the opacity of this layer. Here. I'm gonna go down. This is just shortcut with it selected hit 550 to on your keyboard, just the number two. All right. That's what I'm looking for. Alright, that is blending modes. There's lots you can do with them. They can be implemented programmatically. The ENS, you'd have to make a zillion of these. It could be that whatever the default, uploaded images removed, transparency, Ed Type, give it the mix, blend, CSS Mode. And you can have pages looking really unique that you didn't have to make them all. Alright, that is it, blending modes, Color Modes. I'll see you in the next video. 103. Class project 13 - Social Ad: Hi everyone. This class project, we're going to make a social media ads. So we're going to tie together a lot of the techniques that we've learned in this section about images and mainly cropping. So what I've done is I've put it on its own page. Okay. I've used the frame. Under social media. You can use any of these. I don't mind what aspect ratio you use or what platform. Wants you to make something that is for a persona, it's not so much of a design challenge. Don't worry if you're like, Oh, I don't want to make something, just kinda get it all in there. It's an ad to promote your app. Some of you though, take your time, make something nice. The trouble and tricky thing is, I don't mind what's on here, where it goes, and what you say, the language you use, the images that you use. It's really more of a technical challenge, okay? It's gonna be like creatively, it's gonna be quite tricky to try and fit all of these into the ad somewhere. Okay, so what I want is I want the text marks and Alpha Mask, Luma Mask, spillover mask and layer blending modes. There anyone that might be tricky as a spillover mask, not everyone has had a mask really well or use the pen tool, do best. You will not file if you can't do it. Just a reminder as well while you're working as a couple of shortcuts that we learned earlier on. If you're on a Mac, hold the Command key down while you're dragging the edges. And we've cropped it on a PC, it's Control. And jump into that cropping Mode. Maybe you can hold down Option on a Mac, alt on a PC and double-click it. There you go. And it kinda jumps into this kinda cool cropping Mode. Just a reminder, you don't have to use them, but there you go. Deliverables, a screenshot, or you can export your add K and upload it to the assignments. Now, when you are exporting, you can just do a screenshot like we've done before, or you can select on your frame in over here in your Properties Inspector, if you haven't done exporting in the Essentials class, we haven't done it yet in this course. You can just select on the frame and say export as a JPEG up to you, which way you wanna do. I don't mind. For this one though. I'd love to see what you actually make. Share it on social media, use the hashtag Figma Advanced. I'd love to see what you make and don't forget, especially in the assignment section, if you've seen anybody else's, it would be great if you could drop some comments on not just one, but two people's work and you go make a social media app, try and squeeze all of that in there. Do a better job than Dan. Holy moly. Alright, I will see you in the next video. Enjoy the homework. Actually no homework, enjoyed the class project learning stuff 104. How to add video in Figma: Alright everyone. Welcome to this video section and the course. I can't stop smiling because I love this guy. Random video of a pug makes me happy though. I'll show you how to get the video inside of the project. Some of the reasons that it might not be working for you. Some of the requirements, pros and cons. And of course we'll put a plug in some giant texts, which is awesome because it says pug life. Alright, is jumping. Alright, to get started with, I made a video frame. To bring in a video. You bring it in just like an image, and you can use your shortcut command shift K or control Shift K. And in your exercise files there is a video option if they are grayed out, that is bad. One of two things is happening. You are on a free plan or you're on a pay plan like pro enterprise education organization, there's a few different ones, but even if you're on those, you can't be in drafts. Okay. So go back to my files page. I'm in drafts. There's my Figma file. I am part of a team, my Bring Your Laptop team. It is a paid team and I can drag it into it. I've made a folder full mine called Figma Advanced Course. When it goes in there, I can open it up. And probably it'll still get stuck ads coming in. Sometimes you have to restart Figma to make it know where it is. Sometimes it does, sometimes it doesn't. Now we can bring them video. But those of you who only have a free account, you can just watch this part. There's a few videos in succession here. And this section about videos, do them because not only do we learn about video, and you'd be like, I'm not using video. We do build some kind of complex components. We throw in some component properties. Autolayout. Yes, I watch through even if you can't do it exactly. Like I said, you can bring it in like an image. Okay, I'm going to bring in this one here. I should bring in this like because I'm doing a techno thing. Like I'm gonna do this puck because bugs are awesome. They make me smile. I see one for no good reason. Hugs. Oh awesome. Alright, and you place it just like an image you can click wants to get the full size, what you do big, okay? Or you can just click and drag it out and that's what I'm gonna do. I'm going to drag it out, wait for it to load, click and drag it out. Hold Shift. So it comes through the right proportions. Okay, I'm not cropping it. And they go, Let's just preview it how it is by factoring. So I'm going to switch to preview mode. Who remembers to switch between design and preview? It's been a little while. Shift a, you got it. Okay with this one here, I'm going to start a flow point so that it just jumps to this right page. Alright, there's my pug, he's playing a bug. Cool. Alright, One thing I'm kind of jumping back from the end. I finished the video. I was like, Oh, I should mention this about here. So we put it in an image using our shortcut, okay, and just placed it, you can actually just draw a frame and apply it like we do an image, okay, so we can give it a fill of solid, good video. Click on Choose video. If it says, Hey, you can't really explain why. It's either in drafts or you're not on a paid account. And maybe that might change and you can bring in your sweet image. Oh sweet video, sorry. You end up at the same place. Okay, we both have a container with our fill. This one here is a container with a fill. They look a little different in the Layers panel. Can you see this one? He is my frame called frame 24, bad Dan. This one here is just, it's got a nice little icon for video, but you can get them to do the exact same thing. Alright, carry on with the video. And yes, we make some texts video in it. But that's coming up later on. Ignore that. A couple of things is when you're dealing with the playback of the video. And maybe there's Design View and then there's prototype for you. Prototype view has some stuff to do with the video that you can see on design. Okay, so over here, Let's move this over here. So autoplay is on. Now for preview it Command, Option return, Control, Alt, return on your keyboard. I mentioned again, just a little reminder. You can see it doesn't play, which is not there FUN. What we can do under prototype, we can edit interaction. This is when it's tapped. I would like you to play pause video and all of that. There's video toggle. Perfect. Now let's give it a preview. Come on three, so I can get to my third tab, control three on a PC. Just another reminder. I can you see this pose? I'm just clicking once. Tapping to play. Awesome. Alright, Happy pug. Before we move on and add controls in the next video, just to know that video is just fill K like anything else. If I go back to Design View, you'll see that it's a fill like our image. So we can do things with those fields just like an image. We can remember the shortcut to hold down to start cropping. Okay, it's Command on Mac, Control on PC so we can crop out video. It might make it trickier later on for the developer to produce the app in this weird shape that you've produced. Normally video is kinda get stuck on a certain size Gemini, it's 16 on the top and nine down the side. It's called the aspect ratio. Anyway, if you don't know much about video, you can crop it. It can cause problems like an image though. I can draw a frame down here and I can say you, I can either copy properties or I can grab just the fill, go copy and paste it. Moving around. Can you put it in text? How you totally can you wait there? Alright, tupac wouldn't be happy bonds because we've already copied it, could be the fill. I should be able to select this and go paste. And then you go, Let's make sure that the video and the prototype is autoplay. Let's go and check out this. Make Dan happy. Oh, the dog that always looks like he's pushed against the window. Alright. So yeah, video can be used like images. A lot of this stuff, I won't cover everything you can do, but if you can go with an image, we can do it with a video. Things you should know that Kennan context. So the first is you need to be in paid plan professionals, the starting one. And there's lots of those algorithm that check, they might change this at the moment. It is paid only if you have a free Figma license, they might make it in there. It's kinda weird one that's one part of the paid. The other thing is it needs to be not in drafts as it can't be under drops. It has to be in a pay team. That's my one. They're not free, Free Bed control to. The other thing is that it supports most general file format. So Mp4, probably the most common MOV. There's another one, uses web him as well. That's normally how you get these sorts of things that can't be too big. I think 100 meg is the limit for an image video that comes in if you need to make things smaller and cut them up, probably something like Adobe Media Encoder. That's the one I use anyway, that's part of the Adobe suite. It's really good at just trimming things up and making the file size is smaller than the other thing is at the moment of this recording, videos then playback on the mobile app which is a pain. So before you go and spend ages getting this thing working, knowing that you're gonna do user testing in the field on the app, just not going to work. So you might just make it look like a video, but it doesn't work in the app at the moment. So double-check that. The other one is, where do I get my sweet pug images? And I get them from for this demoing. And I make videos premiere Pro After Effects. If I just need some placeholder stuff, I jumped out to something like pixels. They're good for photos as well, but there's a video option and I have got a really big library. This will change. You can see there's my pug Search. And I found this guy in here, check their licenses, but most of these, or you're able to use them commercially without retribution, but double-check it yourself. If I need paid videos, I'll use either Adobe Stock or Envato elements. That's what I use for my stuff. If you want either of these, you can use these affiliate links here. They give me a small cut when you sign up, doesn't cost you anymore. It's very win-win. Otherwise this site pixels for just some placeholder videos. Alright, let's get onto the next video. 105. How to make a background autoplay video in Figma: Hi everyone. Hey, we're gonna make a background video in Figma. If you're thinking, Hey, Eric and I already got the nose to do it, you do. I made this little short video here for the people jumping out of context and I like, what was that? How do we do it? So they can jump to this video, know how to make a background video is only a couple of teeny tiny things that might be different, livable video using it. It's easy as it's do it. Alright, you can do it to any old frame. I'm not gonna do it to any old framing and the background of my phone frame here. So with its selected, I've got a fill. I'm just going to switch it by changing it by double-clicking the white there. Actually, let's do it this way because it does cause a problem. If I click on a second fill here, which is fine, except the top one is 20 per cent. So I don't want my video to be 20%, I want it to be 100. So I'm gonna go to their solid video, and I go choose video if you can't get past here, remember you need to be out of your drafts folder into a paid team plan. And I'm going to pick my as my there we go. Abstract background video thing. Give it a second. Videos do stress things out and by default it should work. Okay, but we can check by going to shift E. Okay, I've got my frame selected, it's set to autoplay. I'm going to get it to set a loop, which is important. Note, make sure it loops. It does. Do want any audio. I do not. This is a background image because there's a background video. Let's preview it. There we go. Oh, there it is. I'll go a little background Graphic going. I'm gonna have to mess around with the type to make it white, but you get the idea, alright, if you are looking for background images, abstract background is handy, Tim to know and Looper bull. If you type in the word Looper bull, it means that the beginning in the end of the same. So when it does loop, there's no big jump like this one here doesn't have one. So it's nice and loop able. Alright, that is background videos in Figma 106. How to get a video play when you hover in Figma: Hello everyone. In this video, we're going to create a video that plays only when you hover on it. Okay, a very important note is that I'm hovering on a mobile phone, which is impossible, okay? You can only do this on a desktop version. Okay, We, somebody's got a mouse that they can actually hover over K, but I'm putting mine on an iPhone because that's what I had lying around the frames that we've built. So let's jump in and I'll show you how to hover and play. Alright, so I'm going to import a video in a Bring him video to kinda get roughly the right size here on my board. I'm gonna hold shift while it's coming out to make sure it's the right aspect ratio, the heightened width thumbs mushed around. Okay, and I'm gonna go holding Shift, get it to match my thing down the bottom there. Great. Now the way the thing is is that I can't do this. I can't say you under prototype have an interaction that says when I am, this is what I thought I was gonna do. Like while hovering. I want to play the video. On tap. On. This might change. Okay, So check this way because it's a lot easier the way I'm going to show you. But the moment you can't do video plays on while hovering in this indirection, it might be a workaround. Let me know in the comments if you've figured it out better than I have here, and I'll come back and re-record this video for the moment though. I'm going to get rid of that interaction. I'm going to say video, come down here. I'm going to need to make you a component. Okay, I'm going to rename it. Let's call this one video Hover Play. Play, or that's Command or Control R. I'm going to need to variants, it's named Rosa, go along so and they click on the components set, go back to design. We have a property called probably one. Let's call this one playback. Okay? And we have got two variances, have a look, we've got default, which is the top one, and this one's gonna be pause. I wanted to be paused by default, I'm tabbing down and the second value is gonna be play to lead to make that happen. This is an interesting thing just in videos in general, watches if I slipped on this top variant to pause, I need to move it above because Mrs. with my head. Okay. Any the same order as overhear? Pause on top. Okay. If I go to prototype, which is Shift D, I haven't got the autoplay from before. You're like, Hey, with the Zant gone, tweed. Now because this is a variant is actually wrapped up the videos in there. And these my autoplay. But if I click on just the outer wrapper, which is my variant, you can't see a lot of that stuff. So just be mindful that you're looking for the video deep down inside of it. The first one is autoplay off. In the second one, double-click to get inside or hold Command or Control, and click the dive inside and make sure autoplay is set to on loop. I'm probably going to get it. The sound off depends what you want to do. I don't think there is sound on this video, but you can turn on and off. So now we need the interactions. I'm gonna click on this top one. Okay, I'm going to say when you go to this one, I will not on tap. I want to go while hovering, but now I can go to play pause and it lets me did not you there on drag while I've I got already got one. I've already got one. So there's this one here. Let's get rid of that. I've got while hovering. Now I don't want to overhaul the cheese. My brain sometimes we don't want it to on Hover. What we wanna do is say on hover, I don't want it to play pause. So let's get rid of this. Start again, Dan. Okay, you'll do it. I'll leave this in here. So on hover, I don't want it to play pause. I want it to just switch to this variant. So we're going to switch to change to, to playback, to the play version, which is the bottom one. So while hovering, change it to that. Then this essay to autoplay and it should go. Let's drag out a duplicate hold down Option or Alt key. Drag any one of these out. It actually grabs the whole Instance set, okay, not just that one part of it. And other than it doesn't line up, lining up. Now, let's give it a preview already. Got my preview open. I do not. Dancing chickens. Let's start this flow here and watch when you go. Look that. He got it. It's rather staged. Well-lit DJ sit. Anyway. But there we go. Alright, that's it. Just remember that you can't hover on a mobile phone. We're just doing because that's what we have lying around in terms of frames. Okay, that's it for now. I'll see you in the next video. 107. Class project 14 - Hover Play: Who I can feel it. I feel like you'd like amen, I hope it makes us class project. It is a class project. I just want you to make that same sort of video card that plays when you hover over it. Create a video card that plays when you hover over it. There you go, like this, but find music that suits your genre or use your own cute small dog. Either one. I just wanted to get this thing working and I want you to take a video of you interacting with it. So share the video link of your Hover interaction, upload it to the assignment section, upload it to social media as well if you want. I'd love to see it. Make sure you use the hashtag Figma Advanced. And if anybody asks, tell them, go see Dan could check out his amazing course. And it's all just a reminder to comment on to other people's hovers. This one here is more of a good work, high-five, unless there's something Critique about it. This is more prove you can do it type of project. Alright, that is it. I will see you in the next video. 108. How to make a play pause button for video in Figma: Hi everyone. Hey, in this tutorial, we'll get this video to play when we hit the Play button, pause. When we hit the pause button will get the sound to turn on and off for the mute button. And we'll get it to skip ahead 5 s. It's actually only 2 s because it depends on I pick the video that's only 4 s long. Good. Back then, but hey, it works. Let's dive in order to get started. I have brought in some icons from our exercise files. I've put them in their court icon is called Video icon. There is six of them. Bought them in, made it the appropriate size. I use 3d2 pixels and made them white. And it's all my components page. On this other page, I have got an image. I've got a video that is a pug that is on a motorbike. Of course, it's just a video imported any which way you like and put up a box underneath. We'll go into a bit more full detail in the next video, but for the moment, it's just getting going. So first step, I'm going to need Shift I, and I'm gonna go to my components. I'm going to type in play. So I've got a play button here. I'm gonna put it down, put it where I want it, and I'm going to switch to prototype mode shifty. I'm going to say when this is clicked or tapped, in my case, it's going to just automatically jump to this, okay? But if it's not, okay, go down to play, pause, play, pause, find the video. And mind's going to be a toggle, toggle to start with. Okay, and now he's going to preview it. I'm going to click the video title. Let's preview. Alright, video with audio. There you go. Play, pause, play, pause. Couple of things we need to do is one is that it auto plays. So I've got it selected. I'm gonna turn autoplay off. So there's my preview now, play was play pause. The other thing I might wanna do is I'm going to have a mute by default. You might not have heard it across the microphone here, but there's audio on this one. If you do want the same video, it's in your exercise files under videos, it's called o5. Kinda chopped line down a little bit to fit more in my window. Alright, so what we wanna do, It's not easy. We're doing the next one. It's not easy just to toggle between an icon that is play and pause. You can, but you can't do that Angular to play the video at the moment, or at least I can't. I'm going to show you what we're gonna do and if you find a better way, let me know in the comments. So what I wanna do is I'm going to click this one. I'm going to Command or Control D So that two of them, okay, and I'm going to switch out this icon here. Okay, So the icon at the moment is the icon of Play. Let's go. Good icon. I'll pause, and let's select it in prototype mode. Click on this. On tap. This is going to play pause, but what do we want to do? I wanted to pause only this one. I would like to toggle. Nope, I wanted to play only. There we go. Let's give it a preview. See, it works. So it's not playing, which is good. Let's get it. Play. Pause it. Hey, Play. There we go. Let's get a mute button going. Like you can imagine, like I'll show you the other ones, but it's going to be the same. Same. Seems appropriate. Does that look like Thailand? Anyway? Same, same but different. What we're gonna do is shift D. We're going to replace this one with the mute them very easily. We're going to go to prototype shifty and say, when this is tap, not play, pause, mute, unmute. And we'll get that one to toggle. Alright, let's go. You can't really hear it. Can you hear? Alright. You might have heard it in the background. The editor might have bumped up the sound a little bit so you can hear the motorbike. Let's do one more. Let's do the duplicate. Move this one across. Let's switch up the icon. The one I'm not sure what the go forward 10 s one is. So I kinda looked at a few apps and what is the bump forward? 10 s. I looked at YouTube and audible and a few other ones. I couldn't find a specific one, so I just kinda made this what does loop point in here, but I found, okay, that one's already 32, I'm going to make it white. Let's speed this up. One thing that I flipped this one, Let's undo that just because you don't know well, if you just drag it eventually flips. So that's what I did. I'm just going to wind up and I held down shift and option to get it to go from the center. And then I just made sure it was day two pixels. I'm just eyeballing the frame over here. There we go. So it's going 14 s here we did. Alright, what do we think that look like a proper icon and it converted to a symbol, rename it. Okay, so I've got now a symbol that should go my components library bringing, I'll leave it there to thicken up the line as well. But you get the idea, right? I need instances of it. There we go. Yeah, not thick enough, but anyway, what we wanna do for this one Shift D is say, this one here. When it is tapped, I want it to. So I'll only do jumped four and back. Joseph, specific time is the same. You can pick a time and you'll video to jump it to. I'm just gonna get a jump forward. 5 s, 10 s. Oh, I think I wanted to be five. I'm not sure. I'm not sure there's videos 10 s along. You get the idea. Okay, So let's give that one in Previews. Have a look, reset it. I do not want to reset it because I don't have a flow on this one. So I need to shift D. So I need to click on this time. Let's start a flow point here. So at least it defaults to it. Play skipped in. Yeah. Play skip ten or five. In my case, mine is kinda looping back. How long has this video then check this before we get started. How to check it? Go to design mode, click on our fill and it is exactly. You can scrub it. Look, I need to jump. Once again, you get the idea. Let's make it 1 s. Alright, I got mine to jump. 2 s. You wait, Where were you said? Oh, yeah, genius Dan. Okey-dokey. Why do we have two of these? Can't remember. Anyway. We've got to mute buttons, we've got one play one pole is you can get the idea for stop it as a stop action in there as well, doesn't get used very often in these sorts of playbacks. Let me just pull us further, okay, and just a reminder as well. If you video is not playing for some reason, it is because your design file is either in drafts, wanted to things as either in drafts and all you're not in a paid team plan, both of those things need to happen at the moment to be using videos that might change in the future. There you go. Does that annoy everybody too skinny? Yes, I should go fix it up. I'm not going to do right now. Alright. I'll see you in the next video. Okay? Okay, I'm going to change it. Maincomponent GoToMeeting Component Command. Click it. So we jumped straight in. I'm going to Shift click both of those go 2-3. Let's for three, looks good. My actually doesn't match much better. Who will the circle is not the rights are a FUN game of trying to match icons. That's good enough for now. Let's go onto the next video. But it takes us not centered. That's it, definitely it. Let's go on 109. How to build a video card in Figma: Hi everyone. In this video going to make this button here toggle. I see play, pause, play pause. So it's kinda like the last video where we had separate buttons, but this one we want it to play and we want it to change the icon. To do that, we need to tackle this a slightly different way. But also in this video, I'm gonna go through the entire process of building this reusable card. Okay, So it's gonna be it's going to take longer because I want to not just skip to the functionality, want to actually build it for a little bit of practice. Also be warned that this video here that I started using has some flashing lights on it. Okay. It's a nightclub scene. So be careful if you are sensitive to this flashing lights. I want to do is I'll make sure I don't use them in any other videos in the course. Sorry about that. Alright, let's get into the full video card design process. Someone like Components page. I'm going to bring in the icons that I glossed over a little bit in the last video. I'm going to place all I'm up in this no man's land, so I've got a bit of area for it, all the different sizes. So I don't want to do is select them all. And you've gotta make sure when you're selecting them that if you do a little lazy selection, can you see it's grabbed the victors but not the frame that therein. So either drag a box all the way random or click on this first one, hold Shift, grab them all. Okay. And now mixed Canyon Lincoln it so when I change them all from various sizes to 32, they're all the right kind of size. While the selected selection colors are going to be white. I want to be ever see them all lined up with each other. So I want to grab the parents of stop. Okay. And I want to just drag it over here. And what I tend to do is just grabbed them all now and go to distribute centers horizontally. So they will kinda like space out. You can do that with sometimes, sometimes you can do it with this tidy up. But the moment that one went as a grid, a grid along there, thanks. Let's make them all multiple components. And now we're ready to move to a video. Shift one. And I'm going to put mine on my icons page because that's where they should go. And then we're going to go page down. I have made an empty page for our video. Alright, and get started. I've got some text. I have got a video there, wouldn't it is video. Oh, six K from the exercise files. And I have got frame to the bottom. And just at a good habit, I'm going to put my tics inside of my frame. I'm going to turn my frame into an auto layout. Let me get my autolayout to be the right size. Work on the padding. And I'm going to bring in shift. I'm going to bring in a component called Play. I'm going to drag it in, kinda squishes over me. Let's turn the whole thing into a component. And we should probably work on our main components off over here, CO. Because what we're gonna do now is we're not going to actually use this button. I'm going to make it look like the button gets used. But really what we're gonna do is have to variants that are going to toggle between this top variant. It's given them names. So it's click the Component said. Okay, let's go over here and let's click on the little settings. And let's call this one Play mode. Play Mode. Tab down. This one's going to be paused. This one, one's going to be playing. There you go. Pause and play. So I figured got my name's mixed up. Let's continue on. So what we wanna do is this bottom one down here. I'm going to keep clicking until I grab my instance of that icon and I'm not gonna do any fancy Component Properties. And we're going to say, just kinda toggle between these two here. Because as the pause, so what I wanna do is they when this is clicked, so I'm going to switch to shifty to prototype mode, go down there and say on tap, change to the play mode of play. It's playing, but it's called the pause button. If you get what I mean there. Okay, dissolve, we'll evil that for the moment. Let's see if it works. Actually, Layouts command, click, Control, click to dive into the video. It's to an autoplay on the first one off, it should be left on, on the other one. That's Option or Alt, drag out an instance of my main component and lay it all. There's a line there, cabin that Let's go. Hey, we're doing it. Doesn't toggle back. So we want to go from there. When you're finished, go up there and it should snap to everything. Let's give that a go. Now. Let's go to prototype mode. Let's start a new flow point so we can at the little Play button there. Alright, default line to the middle, ignore that play. And then toggles back to pause, play, pause. Now going about it is that it kinda stops where it is. A couple of things to tidy this up. One is the gap that we can't see there, but we can see there. This happens when there's especially videos sometimes because the proportions they might end up being like a half a size, like a half a pixel. The moment that one's alright. This one here, I'm going to bump up a tiny bit. Actually not doing it on this, gonna do on this one. Let's move it up. One pixel. The same to the bottom. If that doesn't get rid of it What I'm normally looking out for is kind of a half pixel over here. You can accidentally have 0.5 pixels. So that normally what gives you a line? I don't know why it was creating the white line there. If I take this on the phone, it'd be fine. White line just kinda at this particular Zoom Level, go. Alright, other things that I wanna do is I want to make this a bit more usable. So I'm going to add Figma. We're going to name it Command-A. Let's call this one. It's called a cod. Cod video because we've got, I think cart event as well. Excellent. What I wanted to do is I want to add some properties inside of it. It's in component properties. So why don't wanna do is slick on this ticks in here. So a couple of clicks to grab the text and find content. Add a Component Property. This one's going to be video text. And the cool thing about that is over here for my instance now, the person using it can see the two variants that have got Play and Pause. And over here they can change the text. The only thing I need to do when I'm doing this retrospectively, let's give it a preview, is when I play. Can you see it's toggling to the other one? So I need to link though. You don't really relink them. You just gotta make sure that cooled the same thing. Down here. Command click to jump straight to the text. I'm going to add another content. The Component Property for content. And I've already got that one here called video text. Now, this one should change. Excellent. What else should we do is tidy it up because the text is too high and it's not lying in the middle was great when it was just one single line. So what I'm gonna do is go over here to both of these. So one, hold Shift, click both of these. And I'm going to say actually be left but centered. It's not going to change much over here, but it should change this guy to be centered, depends what you want to do. I'm not sure that's actually better. Alright, next thing is, is I want to be able to switch this out so I can have more than one. Okay, I've duplicated it. This one here. I go inside. You're going to make sure that you've got the video selected. Sometimes you might have constructed Joseph with a frame, with a frame with a video inside that frame. You don't want to be switching that out. You want to go deep, deep, deep into it to try and find the video. And that's easy. Remember, Command on a Mac, Control on PC goes straight into that thing. And in Design View, I can go into the video. I can pick a new one, bring back the pug, Give it a sick switch to our preview. And here we go. Play pause, pug, play, pause. The nightclub. Or there's two of them. I didn't realize that. Look, there's two versions of this because this thing has been told go and play that videos name nor a particular frame and a video, but go play that videos name. So that's why that's playing twice. And you go, we all in something that effects it. Don't use it twice and you go, alright, that is gonna be it. That is how to get that play pause button to toggle in Figma. If you can think of a better way of getting that going, let me know in the comments. I'm looking forward to the day we can add to tap operations onto that One button to get it to both play and switch to another component like I Play button for the moment this works. Alright, I will see in the next video 110. Class project 15 - Video Card: Hello everyone. It is not homework time. It's been class project time. It's very different. I want you to make a video card like we did in the last videos. The video well, it looks like this. Okay. The requirements or needs to have a video title. It needs to want you to make the one that has the toggle play pause button. So when it goes, the play turns into the minus, sorry, the play turns into the pause. I want to work. Have a mute button there as well. What I want you to do for the final one is actually have, I wanted to be a component that can be reused. So I want you to show it as two separate videos. What videos? And hopefully they're in line with your project because we're building that. But if you need pugs in your life, go to that too. Okay, so it's the same component, but just to instances with different videos and what don't want you to do is before you go and just kinda copy what we've done already, have a look at other video players. There's not a lot you can do, but there's some more, I want you to be more interesting than just exactly what I did was very inspired. What I've done is I've put places that I would go and have a look. Now, you're looking for the word video player UI, or video card or video UX. And that's what I did. So I went hand look at dribble, had some good results on different things in play buttons and it's all very nice. I had looked at Behance as well. I typed in video play UI. Another couple of sites that you might not have used, screen lane.com, It's pretty cool. I just typed in video and had a little look through and found some good stuff. And page Collective was another good one. Just things have stumbled across recently ish that I'm using to get ideas for UI. I've put links to them here in your class projects. So there's deliverables are like normal. Take a screenshot or screen Video, Screencast, screen recording, that's probably the word. And upload it to Vimeo, YouTube or Behance and then share link of that of you interacting with the cod, just you clicking the Play button, pause button, you button. Okay, and upload that link to the assignment section also. This is one of those ones where I would love to see it on social media, upload it, tag me, and also use the hashtag Figma Advanced. If anybody asks where you're doing, it comes in the my way. And remember, this is a nice one where you can comment on somebody's work, a little bit of feedback, alright, that is it. Enjoy the class project. And I'll see you in the next video in a bit after you finished your project. Alright? 111. What are some advanced color tricks in figma: Hi everyone. In this video we're going to look at color tips and tricks in figma, loads of shortcuts, a little bit of informational knowledge about color like dynamic color. And in the end, we devolve into color law. Funny color memes from the Internet. I think the funny anyway, where somebody decided to name all the colors. Alright, let's jump in. The first one. Easy one is using the icky to get to the eyedropper to steal colors. So I for eyeball, you get it. Okay, but the only warning with this one is this one over here. If I click this, this is a style, my primary color. If I want to steal it using the eyedropper tool, I will. Okay, and I click on it. It actually brings through the hexadecimal number nought, the actual style, which is a physical bug. There's a lot of people complaining about this. Hopefully it'll be updated when you do it. But at the moment, it doesn't take the style, just the hex number. So you gotta be careful. You can use it and update it in a big sweeping update color styles, which we'll do in a video or two, just to make sure they are using this styles that you go. That's the eyedropper tool I for eyeball. Or the next tip is with something like this. If I hit my number of keys, it will jump through opacity. You probably already know that. So just the numbers on your keyboard, 33094900, turns out to be 100% opacity. And to get to 0% opacity, just hit zero twice, do two cases to 00 once, 100%, double zero, 0%. Confusing ten to the idea, reminded that you can actually nudge color in here. Okay, so I've got it open. I can use my up and down arrows. Can you see it goes down, cross the colors hold Shift to speed it up. Okay. There you go, up and down. Out of fund that particularly useful, but the scroll wheel on the mouse's, so you, my scroll wheel here, you might be using a touchpad or something else, but I can rub my scroll wheel up and down. And we can change the hue, hold down the Option key whilst doing the same thing. It changes the opacity. I don't use it at all. But there you go. Color tips and tricks, you might need it. What are the things that I use a lot, Hicks is not very good. I use it for copying and pasting from programs, but I find HSB, RGB. I don't really understand. I know it's red, green, blue, but I can't really type in the color. I want CSAs colors, okay, if you are a developer, you can copy and paste from code, okay, if you're using RGB and a for alpha, that's how transparent it is. You might be copying and pasting. So you can switch to CSS and just dump it in there. Same, I don't use HSL. I use HSB, Hue, Saturation, Luminance hue saturation brightness. Basically the same thing. I liked this because I can play with the hue, maybe don't play with the hue slider, okay, but let's say that I get to a color that I like, but I know that's the saturation. I can hold Shift and hit down, and it just kinda lowers it down. I find it's useful for picking colors when I'm trying to pick maybe a color to complement the one I've got. And the brightness, you'll see it there. It kinda move straight across. And this one here if I up and down. Okay, I find those handy. So scroll wheel left and right to when I'm rubbing my mouse wheel. And this one here to go up, down, the saturation up and down and then tab across, hold shift up and down to get lightness and darkness. Now the interesting factoid about color is that you can programmatically now encode, get what's called a dynamic color. Let me show you that real quick. So I'll leave a link to this and the exercise files, but it's just good documentation of what dynamic color is. The short version is, is that when you are loading content into say, an app or website, you can encode go and say, Hey, look at the image, Find me a color from it. Like a general color. Most use color and set that as the Color Theme. So let's say that's our album cover that gets loaded into our music app. And instead of being this, this might be your default colors. It actually goes and checks the image and then readjust is colored based on it. You'll see it loads when, let's say this bottom bar here will be pulling colors from this. You can't do it in Figma, you can't like magically do it. You could just use the color picker to mimic it, using needed work with your developer to make sure that it's something that happens. It's something that you've identified and you want this to be dynamic, requires some documentation and speaking with the developer, it's not hard to implement. It might mean that your color scheme is not perfect, but it can be quite sympathetic and give the illusion of lots of stuff going on and lots of design choices when really, it's just kinda pulling colors from the image. And the last one is naming colors with words. This isn't essential. This is more FUN if you think design, color, nerdy, history stuff is FUN. I think it's hilarious. Like you can type in the word red if you want read. Is that handy? Kinda is interesting to note. The Farm POD is that somebody at some stage decided to name all the colors. There's millions of colors. They're not all named, but it's part of the kind of UI design folklore. Okay, so like this one here, somebody decided this is blanched almond. There's some really weird kind of Color Naming in here. I guess I share it with you because it is one of the fund kinda design means and you should know them. Don't find it funny. That's alright, skip ahead. But if you are killing it, It's interesting to see what you can spell gray with an a or gray within the same, same. This one here though, like let's type in dark gray. Dark gray is lighter than regular gray. Men, It's weird. Needed pink. There you go. It's pink. Need more pink. What about how pink? It didn't work? No spaces hot pink. There we go. Deep pink. There is fuchsia. I can't spell if you look at the top, that one in one of my favorites is Aqua. Aqua. And it's very different. Cyan, exactly the same color. And probably most famous all the colors is not peach. Peaches useful is this one here. Peach puff. Puff. What are the best name colors of all time? So the next time you're at a design conference and somebody starts referencing peach puff or the X 11 color naming system and dark gray is a lot of them regular gray. You're in on the joke, alright, that is it. Color tips and tricks over 112. How to change replace colors in Figma: Hi everyone. In this video we are going to look at changing colors in Figma. That's pretty easy. It's going to get more challenging when we have gone through this course. And some are using a color styles and some I using the hicks number, the color looks the same. So we'll do a find change to make sure all of those are consistent. We'll look at some of the cooks with color styles when we're looking at opacity and the end, I'll go through and I'm actually going to change my primary color from from that red that I've been using to green because rate is a terrible color for a primary color, you will all yelling that at the beginning of the course and took me awhile to realize that that looks like an error sign. You'll notice none of my buttons are that color, so not very good primary color. So I'm going to shift this to my accent color and introduce this green as my primary color. You go, Let's jump in. The quick way is to have nothing selected and then go Command a on a Mac, Control a on a PC to select all K and then go down to your selection colors and say, show me them all, and then go and change whichever color you want in here. Okay, you could go through and click on this and say actually I want it to be the 900 now, okay, and it goes through and updates. Do if it's a different color, you might have to go figure it out first. So you might have to go actually click on this color here. Okay? There it is there, 70, 65, e4. And do the same thing. Select them all, go down to Section colors and you'll get the first ones there it is there. Okay, and I can go and change this one using my scroll wheel to change the hue with fast. Okay, so there it is, there. You'll notice some of them didn't change. It's okay. I'll show you that in a sink, but that's the quickest and easy way. Select all, find it, change it. I'm going to escape and undo. All going to undo a lot. There's a lot of undoing because it counted every scroll as our undo. You got. There will be though, some of them tied into this scuttled my main colors here and my main styles, cable, you can see there's a bunch of other styles, is a bunch of other colors that you might have to dig around in and figure out what it is. And that's the easiest way to change color. There is no Find Change at the moment in Figma, there are plugins. I haven't had any success with them so far, end up being just as much hassle or at least more hassle than actually just doing a select all and change. Any trouble with doing it my way is that you have to do it per page. So if you've got 100 pages, you have to do it 100 times and that's no Fun. I haven't found a plugin that is better if you do have one that you've had success with, let me know in the comments. Have a look down there yourself, see if somebody else has got a cool plugin that might work. Alright? One of the other things that is kinda weighed about finding colors in this program is that this, did you notice that when I said select all, find this color, whereas it this one here is that not all of them changed. Can you see it's actually treats. I'm going to undo that again. It treats this one here because it has an opacity as a separate color, which means double-dipping, which is a painting that button. Select all what you'll notice is down here, there is a color down there with the same number, 70, 65, e4. There it is there. Okay. So you have to change both of those. Unfortunately, there is there and I can change it. Okay. It's considered a separate color. Now that brings up a good point when you're doing your styles. The moment that is not a percentage of my main style. Why is it not? It's because just so you know, if I make a color here, okay, I go to my color styles and I say, let's make it for 500. I can't play with the opacity of this, just a bug at the moment. If it's here, it'd be great. It's the future. And you have got percentages for styles. But at the moment I can't apply capacity, this opacity to the fill layer of a style. I have to break it and then play with the opacity, which is fine. Okay? Because I could do this, right? I could say you are. And then I could play around with the layer opacity. Let's get it down to 50 per cent. The trouble with that though, is this one here. This where is it? This has a Percentage. Can you see it is set to 80%. It so that we can see the stuff behind it, kinda prove it. Let's go over here and say, actually, this is what I'm using yet. So this is my, this one here that the version we using. This one here is going to use a fill of the style. Okay, the costal 500. And I'm going to play with them the layer opacity down to 50 per cent, you see it does the entire thing, not just the color. So that's something to note. And is it a bug, somebody a bug? It's just something that hasn't been implemented in Figma yet. Another thing about those color styles as well is that you can't have more than one. Which this color style. Can I have another one? No. Just get rid of the color. But you kinda to color styles applied to it with different opacities. You go, if you do want this to be part of your styles, you can create another style. So let's click on this one here. Let's find it and say you and not a currently a style BAD we could At the Styles button, hit plus. And we could call this 1500 and put it in 1.8. So 0.8. So 0.8 is really common and the way to write percentages, and when you're dealing with web, you could write 80 per cent. That's totally fine though your front end web developer will probably go one is 1.0 is 100% and 0.0 is 0%. That is 50 per cent. That is a descent. It is up to you. You'll see both around, create a style. Click off in the background into the right place. You need to go in there. You to go there. You can see, you can probably instantly see what the problem's going to be here is that how many do I create? Do I make a 0.1, 0.2, 345-67-8910. I'm just gonna put this one in because that's what I'm using right now. And only putting the ones that I have to, because otherwise there's going to look a bit crazy, become less helpful. Next thing I'm gonna do is I was being lazy throughout this course. And I applied the style sometimes, and sometimes I went like this. I wind, you have a fill color of local and that one. Now, the trouble of doing it that way is that it uses the hexadecimal number, okay? So the hex number is fine, but I want everything now to be connected to this style. So when I change it at all updates. So when I can do is use the same sort of trick is figure out what the hex numbers, um, so like everything. Go down to show Selection colors. Let's find the color that I want. There is. And instead of replacing it, I'm actually just going to say you and now that style of 500, and it kinda disappears from my list, they should all have that style applied after the same thing with the purple down here. So I'm looking for E4. I'm going to select them all. I'm going to go down. I'm going to find that purple that has E4 there it is there. And I'm gonna switch it out full my 500. And now I'm going to add my last color or my new color because that red just doesn't work. It looks like an error message, red, gaze. I'm gonna go switch that out for a green as my primary and that rate is going to become my accent color. Let's rename this one, exit. And the screen here, it's the one I'm going to use. You are going to be a style called. Actually I'm not gonna do it this way. We use that plugin like we did before just to speed things along, it's going to grab you. Let's open up the plugin. Okay. Those are widget, okay, Color little generator, and double-click it to open up. Remember this from way back in the course. Pop in my color. I'm gonna hit Save styles. Okay, color name, this is going to be my color, primary. You see how putting them in groups as a whole lot easier than it is naming every single one of them. Because it's really easy to name Color Group and not have to do it for every single color. You want to keep all those on to dislike the opposites and go delete. I've got to just to tidy a set of colors. Here we go. You, thank you very much and delete that now. Alright, that's it. Changing color is relatively easy. Sake dole, change it. We also went through and just hide it out. Somebody else styles now as well. Alright, that is it. I will see you in the next video. 113. How to create Color Themes for light and dark in Figma: Hi everyone. In this video, I'm going to show you how to make Color Themes for both light and dark mode can be a little daunting to know how to use what we're. So I'll show you the tool that I use to kinda get me close, get me started, give me thinking about some of the different use cases that I might not have before. Alright, so this is the link here. I'll leave it in your exercise files. Now note this might change, might update. We using M3 material. I know I rely on material. A lot of my UX design work, mainly because it's just really well-documented. And they have these great tools here. Even though I'm not using it necessarily for Android development, just really good UX design tools. So we need to load it up. It will be loaded to dynamic switchover to custom. And then I switched out my primary, secondary and tertiary colors. You just click on them and copy and paste them from Figma. And the cool thing about it is that it gives me a few things that gives me what my colors are, Plus a lot of variations. Can you see this green wasn't part of my initial design. Neither any of these colors here. So it's looking for harmonious colors that might help expand my colors. So I've got more variations about if all the different use cases. Okay, So my dark color on the primary color background and the ones switched out, particularly liked the screen. So I'm going to ignore that one there bought it might just stop pointing to other colors and ways they might be combined. Plus it gives me a light version and a dark screen version. And again, it's taking my primary color. Let's change the hue of it. It's actually just darken a little bit. You go here another couple of interesting combinations and my primary color with colors outside of my original color set. But I useful variations depending on how new, um, this might be a good screenshot. Take the dark scheme and the light scheme and might be just good for you to bear, but a build this out for a future design system. If you are liking you the colors, you can actually hover above them and say, give me that the law Copy button, and you can paste that into Figma. Anyway. That's a little handy tool that I like. I thought I'd share with you here in this color section. It's not hard and fast the way to do it. It just a nice way to maybe extend the way that you might be using your colors, give you some other options. Plus suggests some light and dark scheme Modes. Alright, now does it, I will see in the next video 114. How to group color styles using slashes or folders in Figma: Hi everyone. Hey, we're going to look at how to group color styles in Figma using both the slash method and making a folder and dragging it in, right? Let me show you both. All right, first of all, let's look at the slash method mainly because it's really common. But I used to use and teach. And you'll see lots of people's tutorials using it as a shortcut. Then we'll double back to just the grouping that we've done. Both a handy, alright, so I've got my primary color here. I'm going to make it a fill style is going to click on my style button, hit Plus. I'm going to call this primary. And this is my 500, right? The middle brightness of it all gets complicated now when I say I want another version and I want a slightly dark one. So I'm gonna go down to here, break the link, click on this, go to brightness, saturation and brightness hold Shift and go down a couple. That is going to be my, while we five-hundred, that's gonna be my 700. So I'm going to make a new style, style. You primary 700. And if I click off into no man's land, you'll see these are fine, but you can see how it can bloom pretty quickly. What people do is let's rename this and say actually, let's rename it. And it's cool, this one name slash. So as long as you put the forward slash in there or you want to make a joke about Guns and Roses lead guitarist Slash can't think of a good one. And most of you, would you young to know what that is anyway. So if we put a forward slash in there, okay, Now if I hit Enter, look what happens. It's changed it from being just floating down the bottom. It made a folder which has 500 inside of it under the same thing for this one. Double-click it. Okay. A's rock legend in the middle. And they're all in a nice group. There you go. That's why people will put slashes and everything. What I tend to do now is actually just go, you are a new one and you are my 500. And if I click Off, I can right-click and say new folder called secondary. You end up in the same place. If you see lots of people on the Internet using tutorials or in classes or colleagues using the forward slash method, it's totally fine. I tend to just make folders here and the color styles panel, nothing good thing about grouping them with a using the slashes or making folders as you can change them. You can say actually these MEN to be in here. Whereas if you don't use that naming convention, okay, call a primary five-hundred is one solid. It makes it hard to move around and makes you having to rename all your styles if you do, go and change that later on, alright, that is it, either way, suite groups of color styles in Figma, you can do if any old styles we using it for colors here, works of fonts as well. But that is, it, either way is good. But now you know both. Alright, I'll see you the next video. 115. How to descriptions to your styles in Figma for others to use: Hi everyone. What are we doing? We are adding descriptions to our styles. We can add them in here just to add some further information for styles we do when we add sharing these styles with other people doesn't make it clear maybe what it's used for and what it's not used for these to do. Let me show you how to get started. Have nothing selected, click and no-man's land or hit Escape a few times. Okay, you're looking for your style that you want to add a description to J. In my case, I want to add it to this one here, the 100 click on Settings icon. And down here you've got an option for descriptions. Ignore that, that came from the widget that I made. Okay, we're gonna leave that for the moment. We'll talk about that and AZEK, so the scription I might add might be used for use with Popup Modals. And where do they appear? For myself, probably not going to document them, but when I am a shearing this library with other people, okay, it's handy because when I hover above it, it gives people a little to tip. Eventually, actually not there. It's when it's actually being used. So let's say I'm designing my modal, okay, I'm going to use the color and I'm going to hover above it and watch used for Popup Modals, you go, Now it works just the same with type K. You can add a description for here, H12 and three, that's pretty clear headings 12.3 and paragraph, but you might have some other strange names that you have to describe a bit better. And other thing is it's have a look. So I've filled this with this primary color. Can you see it's got that contrast there. Okay, where did that come from? Let's have a look here, looking at my styles. This was in here by default. When did this come from? Do you remember the widget from earlier shift I, this color levels generator, this made it automatically. It went and said, I'm Michael will the style colors, but I'll also put in the contrast color. It's kinda already done it in this example we see dark, lighter, lighter, lighter. It is a good contrast to this background. So you might like this. It's nice to know where it came from. Festival. It's not there by default. But you might find actually, I'm going to have to go through and scribble this out, go into this one and go, don't want, you don't want this, don't want that. So some widgets do input their own descriptions and it might be confusing because you're like, I don't want all these variations of contrast colors, you might be a lot more specific. You go. That is how to add style descriptions to colors and fonts, mostly handy when you are sharing this with a team. I wouldn't do it for myself. And as I know, future Dan is going to totally forget what that color was. Four. Alright, that is it. I'll see you in the next video. 116. Editing someone else's styles or component library in Figma: Hey everyone, Hey, I've started a new document. Someone else has shared library with me, option three, Alt three on a PC to open up libraries. Sweet shortcut. So I've enabled it, I've started using it, but now I want to go and edit some of these styles. How do I go and do that? Let me show you how. Oh, and actually we'll do a little recap for those people who lots of you'll be using libraries all the time, that'd be great. And this will be jumping straight into this because we covered it in the Essentials course. There'll be a few people who are just following on from the Essentials Course haven't had a lot of practice. So at the end of this, I'll kind of recap some of the do's and don'ts for creating a library. But for now, let's show you how to edit somebody else's library. Alright, first stop. You need to have a library shared with you. We covered this in the Essentials course. I'll cover that at the end of this video in case that's a distant memory. Okay, but let's say that you've got library, it's being shared with you. You've cited using it. I've created this untitled file. Okay. I've started using some of the Bring Your Own Laptop brand elements from the shared library, but now I want to edit them. So there's two ways of doing it, color and font go together. They'd have a similar sort of method. So let's say this color here. I can see it as a color style by the look of it. Okay, if I click on it, I can go down to my color style and I can almost see the little Options there. It's hidden behind the Christian MAC. But I'm going to click it. And can you see for any of these, it's going to say, I can actually change it here. I need to go to the style definition. So it's going to jump back to that original file, okay, the original library that was created in, and I can edit it there. Let's have a little look at Components slightly different. Okay, So components, There's a couple of different ways I can do it. I can overhear, you can see here's my instance of this button. I've dragged it out for my Bring Your Laptop style library, and I can click on this option here says go to main component and library, or I can right-click it and say go to main component. So the same, actually, I haven't added the styles with this one here. Let's say I make this paragraph when it's applied. Okay. I don't want to break it. I want to click on it. Go into the same as Color, click on the little settings icon and go into here, go to style definition. Doesn't matter which one of these you click color font buttons, you'll end up at the original creating file. If I make changes here now, it will spill back to the original file and any other thing is connected to. Be careful, if you can't get to this file, it means that the file hasn't been shared with you so that you can edit it. You've been put in the view one category. So what you need to do is go back to the file originator. In this case for me, it's Victoria borrowed all she does the you exhale bring your laptop, Credit this file, and she reluctantly shared it with me to edit because I was like, I need it for the course. She said, don't break anything. So I'm not going to break anything. That is how to edit styles that have been shared with you. If you are locked out, what you're looking for the person to do just so you know what it looks like is I'm gonna go into here. First of all, let's publish this library. We did this in the Essentials course, but if you haven't got to their, a cool shortcut is option three. K will open up your library, or you can go the assets panel and click onto this. I need this one to be published. So this is the file that I'm working on now. Okay. Publish it all first. Okay. And then the file needs to be shared with somebody. If I type in Daniel Scott and I can have can view, that means there's other person Daniel can use the styles like I did for that original file, but they can't edit them. You can go into here and say Actually they can eat it, you go, That's what the person needs to do. If you can view libraries, but you can't change them. One last little tidbit for those that are quite new to libraries are reminded from the Essentials is that the file must be, the file that you want to share. Can be in drafts, but you can't share components. You can own shear font and color styles from drafts. Once you've moved it into one of your team library, it has to be in a paid team library, not this free one. If I move this into this free one, okay, I'm going to click move, check it out and go into here. And what you'll notice is if I go to my library option three or all three and a PC, there's publish, unpublished it, and publish it again. Let's pretend it's for the first time. You can see here 47 components will not be published. Just the colors and the fonts that needs to be in that command one to jump to home-base. And this needs to be in a paid prime. There we go. That is how to edit somebody else's styles that have shade stuff with you. And just a quick little recap on libraries in general. Alright, I'll see you in the next video. 117. How to hide color font styles & components from team library in Figma: Hi everyone. In this video, I'm gonna show you how to hide components, font styles, color styles from your library so that when you publish them, other people can access them. You can still work on them. It might be that it's a work in progress or it's just something that you're using and you don't want to confuse the team with. I'll also show you a couple of little things that might catch you out if people are already using the components or styles. But for the moment, let's jump in and hide some styles and components. Alright, so I have published this library from this file here and used it in this untitled document here. I can see all the bits. But in a, b, c, d that we made, we want to hide any of those so that other people can't use them. There's two ways you can find it in your assets panel. So remember, option one is Layers, option to as assets. Okay, I'm gonna go to my buttons and the easy way is to right-click it and say Hide when publishing, what happens is it comes out of here and goes down to this folder that says hidden stuff. Okay, there it is in there. But I've got to republish it. Otherwise, this person can still see my button. So I'm going to call this guy Doug. Doug can see Daniel's file. I'm going to have to publish this. There's no quick, easy way to publish, or at least no shortcut. Option three, published one change. It's this thing here has been modified, but nay, now Command or Control three, okay, it's gone, can't see it. Now with styles, it's slightly different. Command to control to, to get back to this tab, stop doing shortcuts, styles. It comes down to naming. So I've got nothing selected over here. If I don't want Doug to be able to see there's 900 style. I'm going to click on it. And what I need to do is at the front of it, add an underscore or period you'll see people or full stop. It depends. I don't think it makes any difference. I see lots of people using both eyes underscores. You can use a dot at the front. I don't think so. Let me know in the comments if you have figured out a difference, All I know is that I can still see it. But when I hit Publish and bot option three, Alt key on a PC, or you could use your quick key to, to publish changes to library. That might be the shortest way of doing it. You can see that it has been removed. And now let's go check Doug. Doug, when he's grading something can go through Krebs is fill colors, but he can't see the 900. It's gone. Four components. Go back to components. We did the right-click. You can actually do the same naming trick. Let's say that I want to hide button this one here, we're putting button B. So what I could do is right-click it published when hiding. Or if I want to keep that kind of underscore consistency, I can rename it maybe Command or Control R. And I was going to put an underscore or a period in front of it. And what will happen is when I publish, not until you publish quick actions into, into, into, because I've done it all before it's published that one. Let's go check out Doug. He's gone. There's no real bitter if I go to Assets, can you see they all ended up in the hidden section, except the name of this has changed. I haven't really decided which way I like better. Sometimes it can be clear when there's an underscore that it is not meant to be part of the library. Now one thing that might catch you out is that if Doug already uses this site, that goes alright, I need the pink button. And what does that? Random box uses the pink button. And then back here, I say actually quick, before Doug goes and use the pink button, I'm going to remove it from publishing. Publish this file command forward slash, control, forward slash. There it is there. Okay, quick. Glad nobody used it. Over here. Doug still got it. It's not something he can drag out, but it doesn't remove it. Okay. So once somebody has got it already, It's kinda in those documents, I as the Create Account, make changes to Doug's button. Unless I published the button again into the library. And then it'll connect back up and push changes along. One last little thing is if you're missing with libraries quite a lot like intensely like publish, unpublished, link, unlink, doing lots of that stuff. Some in you having like man, I used to work. I have found many just not in my normal kind of design practice, but making this course Figma, it freaks out and I just have to close it down, open it back up again. Basically what I was doing is I was the mafia and I was doing that and publishing. And they were staying in Doug's file and I was like, this big man, like maybe I've done something wrong or broken the Internet. Turns out I just, I think I was a little intensively going through the libraries and I just had to close Figma, get a little nap. Okay, just for a second. We'll sleep and then we'll go back up and everything worked again. Alright, that is it. That is how to hide components. Colors and fonts are just the same. Just put an underscore in front of them, make sure you publish the library and anyone else won't be able to have access to them unless they've dragged out instances, then they'll have an instance in their own used in this file library. There is bundy, alright, that is it. I will see you in the next video. 118. How to compare changes in component with overlay in Figma: Hi everyone. In this video we are going to look at what happens when somebody updates or library that we are using. How do we go and review the updates before we commit to them? We get to here where we can do a side-by-side comparison. Very clear what's changed. Or we can do this cool like little overlay where we can say, let's see the difference. Very clear. Now we're going to update, alright, let me show you how to get in there and use it, right, so I got to files. This is the file that's creating my library, and this is a file that's gonna be using my library. So I'm going to grab a couple of components from that library. Great, I'm using it, but they in some updates come along. So back to the original file. Let's make some small updates. So 8-16 extra pixels on the padding. This one here will change quite a bit. Alright, changes a lot to remember the shortcut for changing the weight. Just a reminder Command Option and use the greater than and less than, that's Control alt greater than and less than K. So I've made some changes. I'm going to publish it. Remember, Option or Alt three on a PC. Let's publish those changes and let's see what happens over here. Okay, like normal, we get our updates available. We can go to review, instead updating them all. And the interesting bit is, instead of clicking this click on this little arrow here, you end up in the comparison view. So not that, that I'm going to show you how to get to the individually instead of doing every single one because you're like, Man, I need to work through these step-by-step to see what the updates are and how much they affect me. What you can do is, let's work on the blue button. And you can see, I can update these individually. There's an update available for this. Great. I'm gonna click on it. Instead of updating the instance, I'm going to review the update and this is handy. You can see the current updated, okay, and I can say, Yeah, I want that. Let's look at the next component. Okay? The problem with this is it looks exactly the same you like, has anything changed? So we can do is we can switch from side-by-side here to overlay. You can turn the overlay on and off, on and off and nothing has changed. I change anything, swear I did. Oh, you can see it over they look the paddings there, but it's not in this. Oh man. Oh, let's just update and see what happens. I've done this loads and it works every time, and I've even demoed this video. This is about the third time I've recorded it to try and get a bit of good flow going, but some reason today it's not working. Let's go update. Let's go have a look. Hiccup bigger. That was weird. He normally it just shows you the padding and the whole excuse of this was to show you that the overlays handy to see when it's just really small changes like padding. But for some reason it didn't work there. I'm gonna leave this in the course because sometimes that happens, I'm going to close down Figma, open a backup and jump straight back to that screen to see if it works again. You wait, did, alright, so I've gone back and changed it back to eight from 16. Let's publish it again. Published that one change. And let's have a look over here. There's an update where it can review, it will go to the other way, can set Hanging update, click on the arrow. Okay, and let's do Overlay. And now it's working. It's given me a little bit clearer idea about what the changes that could be just the pixel and you'd be like, There's no way in this view to go pixel change. You can kinda see it there now that it's obvious, but sometimes it's hard to see unless you go back and forth with this Overlay. I'm happy with that. I'm going to update it and close it down. And then you go, that is how to do some previewing of changes that have happened to a library that US sharing. And what happens when it does, doesn't work. Close it, open it up again. Good as gold. Bugs like that seemed to get cleaned up quite a lot with Figma, like the ones that I'll go and report this now to Figma and I betcha in a update in a month or two, that glitch will be gone. Some engineer will go through and fix it, or you might be doing it yourself. You might run into it, but now, you know, turn it off and on again. The truth to fix all technology. Alright, that's it. I'll see you in the next video. 119. How to refactoring styles to another design file in Figma: Hi everyone. In this video we're going to look at relinking styles or some people call it refactoring. We're going to tidy up all of our styles out of our working document, pick them up, move them into a completely new document, nice and tidy, all on its own. And we're going to use this file to build future apps and websites from not the crazy person working document, that a bad place to have all your main styles, especially when you move on to the next project, let me show you how to pull them out, put them into another document whilst still maintaining connections that you might already have to design files you've already created like this one here. They need to know with a new home for these styles is automatically. Alright, let me show you how to do that. So this is the original file that I've created a lot of my styles in. I've used those styles in a separate document. I've used some of the text styles, some of the color styles, components we'll do in the next video. But what I wanna do now is I want to actually grab all my styles out of this document and put it into a main and styles and components file. I just created a new document and gave it that name. There's nothing special about it except that it can't be in drafts, so that it needs to be in a team library, styles or work on the free plan. If you want to be working with components, maybe you have to be in a professional or above, basically any kind of pay plan. So that's the kind of structure you need. The main thing is that this copy and drops, otherwise it kinda breaks. So I'm gonna go to this one here. This holds all my styles. I want to get them out, so I got nothing selected. I'm gonna grab my primary color, all of these in this group. And you have to use cut Command X on a Mac, Control X on a PC, you have to cut them, not copy them, move them to you main styles and just paste them. Hopefully this appears down the bottom here, and let's go to publish. So we have to publish these because it wants to say it's moved to this file. I'm gonna publish this so that all the other files like this one here is affected, should update. It's have a look. Now up here, Let's have a look. Let's review the color primary has moved from Event app. There's no visual changes, It's just moved. The way to prove it is now if I click on this, I go to my style and I click on the settings for it. I can go to the style definition which used to point to this first tab. Now hopefully it will point to this second tab. There you go. Tidy, tidy. Look at us. Let's go into all of these colors. We can grab Shift-click both the text and the colors. You gotta do the grid separately from the colors from the text. But let's I want this I want all of these colors except for this exhibit. Creepy Dan, I wanted to hold down my command key and a Mac control key on a PC. So I don't want these. I'm going to remember, cut them, move them over here, paste them. It's going to say publish. Yes, please move to this file. Remember you'll get an indication on any app that you've used, those colors on, that things have moved, but also on the original one you took it from case I've taken it all from this and this one is updated now says, Hey, they've all gone. I'm going to review it. These colors are moved from this file all the way over to this other one. Okay, We can double-check this one here is now, oops, this one here. There he is. He is There. He is. Sittings and go to the style. They've all moved across. So any file that is used, the colors, even the originating one, needs to be updated. Alright, let's finish by getting all of the grid styles as well. But it's cut, not Copy, Paste, publish, publish. Any files that have been using it. When they open up, will come up with that option to say it needs to be updated, either the originating file or this one here. What else we got? Let's get the textile is cut you and put it in here. Publish, you get the idea. Alright, so that is how to move your styles from one document to another to kinda tidy them up and get them out of your working document and show everybody what are super efficient UX designer you are with your master document. Alright, that's it. I'll see you in the next video. 120. How to move relink refactoring components to another design file in Figma: Hello missy designers, It's time to tidy up our components. We've got a working document that we've generated a lot of main components for. We even started using them in other documents. So it's a big mess. Every time somebody wants to update one of these, they have to go back to this working document that's connected to other documents. We just want to grab all of our components and move them to a centralized file and refactor or relink all of those components to any document that might be using them. So we can detach this missile working document and have one source of truth. Alright, let's get some component Xin. Alright, so I've got a component, it's a main component. I can tell whether icon here, it is, started life in this working document, I've published it, I've used it in this mobile app design here, but I need to move it to a tidy of file. Okay, I'm calling this one main styles and components. So I've got a more centralized design system that other people can use and not linking back to this first work document. So the easy one is you select it, make sure you got the main component, not the Instance, and you cut it. You can't use copy it, it cuts or Command X, Control X on a PC. I'm going to move it across here and it's going to work. So it's going to work. It's going to say, Hey, you've moved this over. Would you like to publish it? If this doesn't appear, it means that this document here is design file that you using as your main styles, not in a team library. So it can't be in drafts for this to work. The other thing that might hold it up is that components or can only be published from a paid account. So if you've got a free account, even though it's in a team library, it still might not work. They do change this, they go through and change their pricing model and walk can be done at different levels. So it's not hard and fast rule, it might be the reason you're not seeing this published in the bottom here. I'm gonna publish it. I'm gonna move this file. It's a warning. Okay, have a read, let's publish. And we're going to work. Let's have a look at my mobile app now. Here. I'm going to review any changes and for me is just a move. So it's moved from Event app. Let's update it. Happy Days. Has anything changed? Let's have a look. So I'm going to select on it. I'm gonna go to here to edit my main component. And it's jumping to this file, which is perfect. So it mostly works. One thing that's going to catch me out is that this particular thing actually has embedded inside of it nested components, or at least Nested Instances of those components. So main component, great, that is this, but if I look inside there is this, Look at that. There is that hot, okay, there is the pricing, which is this bottom piece. All sorts of stuff need to come back. Now, watch this. If I right-click this and say go to MainComponent, it's kinda go back to this first file. So you just gotta be sure when you cut things out and move it across, you're grabbing everything. In my case, I need price and the lower card, I need the icons that are being used. Let me show you how to work all that out. The other thing to note, separate from that is that like we did with the styles, when you cut something and move it up cross here, this file says it needs to be reviewed because it was using an instance of it. But the original file says, Hey, I've changed, I need to be reviewed and this is moved from this document over to this other one. I just need to update it. And now we're all happy. You go. Hard to do this properly though. Instead of just copying across the main component, we need to bring in all the instances that are embedded into it. There was an option earlier on where we went properties and we can see all the Nested Instances, okay, expose them at only exposes the ones that have options like large, small. It doesn't have the instances. Obviously this icon here, even though it definitely is one of my icons. So the way to do it is to actually unpack all of this and just see what's going on. Actually the easiest way is to go back to this original, go to the Assets panel, open up local air components, and then go through every single page and just cut and paste all of them across. Then everything comes across. If we want to be a bit more surgical, okay, what we can do is I want to open up all of these to see where there might be Instances looking. Who remembers the shortcut to open all of these up? Do you remember? That's right. You're hold down the Option key on a Mac, alt key on a PC, and they should all on 12. And you can see there's one instance is another one, It's another one, there's another one. Okay, so I can go and pick these up and cut and paste them across. You can save time if you're unorganized and we're over the place like me, you can right-click them and say go to main component. There it is. It's going to cut. Go to Paste. It's not put them on top of each other. And make sure that this is published. And this one is reviewed and published as well. And then go through and say, actually I need you and he'd do anything else I need. I think that's it. But when ETL the icons as well cut them like everything, I think it did. Paste them over here. I'm going to stop building out this page with some sections like we did before. But you get the idea. So let's do it. Lids publish it. Let's finish it off in one last thing at the end. Let's review this one, update all these moves. The last thing is that you might not want this file published as a team file, might just be a working file for you. Once you've cut and paste everything out, you can Unpublish it. Remember, option three, all three and a PC. Not sure what I did to that, but I did something. Okay. I'm going to get back into there and now I can say you are going to be unpublished. I'm gonna leave mine open, but that's what you might want to do. Alright, so that is how you tidy up your working documents, get everything into a centralized design file. Alright, that's it. I'll see you in the next video. 121. How to swap parts or entire component & style library in Figma: Hi everyone. In this video we are going to completely swap a library that a design file is linked to its great way to try out new designs because this one is hideous. Instead of making it better, Let's swap out the library. And there we go, New Library swapped. So if you need more Brush, Script or Comic Sans in your life, continue watching. Or if you just want to figure out how to swap libraries, you have to keep watching to now. Let me set the scene, tell a story. I have got this file here called event app. Okay, it's using a bunch of components and colors and font styles, not in this document. We moved it to this main styles and components document. Great, but now I want to go and try out different styles. So I want to swap the library, okay, I'm not gonna do it to this app. This one's too complex, is things going on? I just want to build a version two of my styles and see what they look like on all the components before we go in and commit them to all the documents that it's connected to. It's a really good use case for swapping libraries. So here's my original main styles and components. I have made a version two, just with a few of the elements that top near the lower Nav, I've updated the button in some of the text fibula brush script. So what I'm gonna do is instead of just going to this file option three, all three and a PC and going, and I can go into here because it's connected to main styles. I could go into here and say Swap library can update everything, what I'm gonna do, so things don't go crazy. I've created this file here called design change test, just as simple document, it's still connected domain styles. I've thrown in a few of the components and colors and type that I want to experiment with. And I'm going to change this one just to keep it away from that working dark. So let's close that down. We're not using anymore. This original one is connected to this document. Let's switch it out to this new version where I've changed colors and fonts. Just as a like a little test run. You get me. Alright, let's give it a well. For this to work, you need both styles to be published. They both need to be in a team library. If you want to use Components, you need to be on a pay plan, at least for the components part, surprise jump cut of EDA to colored boxes using my primary and secondary colors. Just to help with the example, I want to swap this files library option three, Alt three on a PC. So why don't wanna go to, is I want to find this go to little arrow here and is an option in the bottom it says Swap library. And it's gonna go from my main styles that I created first to this new one here called main styles v2. It devoted to that because I chose it before when I first recorded this video and got lost and restarted it and re-record it anyway, so you'll have to pick yours from them. Now the big trick here is to make sure that the styles in both the first one and the second one had the same name. Can you see H3 from my tick style is called H3 over here, like colors had the same folder structure. Okay, so have a look. Color hyphen primary five-hundred, same with this one here. Color hyphen, pardon me, I got lazy and into two colors, but as long as the names match up, it'll work. You'll notice in this V2, I don't have my accent color, gang because I'm lazy. And I'm going to pretend. It's because look at this. Anything that can't be found unmatched will still retain the old style. This might just be heads-up for you to go and actually make that color and new style. I'm going to ignore it down here. The up and F is called the up and have the two different styles. One thing here is it's missing this primary button. Let's actually do this now. And then I'll go through and see why this one is broken and it's going to swap libraries 321 and switch. It goes through, it is updated the top nav that lower nerve, the colors. The font hasn't done the button. So let's go and connect those up. So it's a good way just to kinda be working on this kind of maybe an update version of your files without pushing it live to the team because it's a big move, okay, once you've done a few tests, you might want to then go through and get people to switch the falls at the wicking on to the new style. It might just be subtle changes, nothing big N brush scripty like this one. It's good. Figure out why this didn't connect. So in here, it's called button space main. So that's what that main component is. Let's double-check it. Go to main component. It is called button main. What have I called it in main styles here? I've called it button hyphen main. So I need to go through it and say you go, I need to publish this again. Everything needs to be published. Option three, all right. So last time I'm going to say it, I promise to open up the library's panel. Let's publish it. Now we can go over here and say update library. Let's go to here. Let's swap the library for this library here. The only thing that's found is this one here. So we can go and swap. Here we go. Comic Sans, goodness, Jewish. That is a big old library swap. If you just want to do an individual and Swap. Oh, shortcut that maybe I haven't shared. Command Shift T. Control Shift T on a PC opens up the last close tab. Okay, It's a shortcut. I use a little time for both browser and in Figma. Okay, so you can go in here and say actually, I don't want to do that whole library Swap thing. I just wanted to go through and switch out just one little bit. Okay, I'm gonna go into this, okay, it's an instance of up. And now I can go over to here, some components were moved since I last did this. What were they? Ignore that. Okay, I'm going to go you, Let's not switch the whole library. This is switch this instance. So we can go over here and up here where it says Nav, upper click on this. I'm going to swap Instance. It's connected to that other file here, my main style, I actually wanted to connect the library for my version two. So I'm just going to activate it there, do nothing. I'm going to swap it. I'm just gonna go in here, turn it on so that I can say you can be swapped Instance Swap with that one there and let swap it with this top thing. So let's move that across. It's preserved the color change that I have on this top nab, there was an override to it. So I can right-click it and say resettled changes. Okay, so you can do bits individually or you can swap out the whole library. Let's go to make sure you using the exact same names is your current library with your new library that you go, that is swapping libraries in Figma 122. What are some advanced drawing tips and tricks in figma: Hi everyone. Hey, this video is all about my kind of advanced drawing tips and tricks and techniques just to help you when you are building things, making things, drawing things. They're all kinda small stuff. They didn't really deserve a video on their own. So they get all smushed into this video, loads of good stuff. Let's jump in. My first and favorite one is when I'm bringing in a bunch of stuff, okay, so I'm going to import everything from icons to bring it in, go Replace All, and they just end up being all on top of each other. Like use the tidy up option. What do I do if only there was a way to unpack all of these, you can use your quick actions and type the word pack. And you can go vertically or horizontally and it just kinda like unsmooth wisdom. Cool, huh? It's always the vertical and horizontal there, depending on which way you need to go. Obviously, you know about smart selection and tidy up, we can just drag these to replace them and the gaps in-between, okay. To adjust the sizing. Alright, next fund useful tip is that when you bring in logos and they're all we'd sizes, I've just used a plugin called Victor logos. And let's bring went in. And you'll notice that you come through at all different sizes. So I'm going to select them all. The way. I kinda beat them into order is I make sure that the little locking icon is on. Mixed is 100, so that'll just 100 pixels now, width, they're all an appropriate size. Now this is where a few shortcuts are useful, the align ones. So the are relatively easy to remember. Hold down the Option key on a Mac, alt key on a PC. And if you look at your keyboard, this is English keyboards. And can you see ASD, if, and W there on the left-hand side? If you're an old so gamer, you'll know that these keys got used a lot for like moving up, down, left and right. So that works for the alignment. So hold down my Option key on my Mac, alt key on a PC. And if I had W, it's up at aligns everything to the top. Can you see him there? If I go Option S, which is down, it lines everything at the bottom. If I go undo, undo, and if I go option a, does everything on the right undo that option D. Is that useful? Mainly the left and up, a and W. The other two handy ones are that same key and is V and H. So vertical, horizontal. So you can line them along vertically, along the middle, which is Andy. And horizontally that way there's probably a distribute centers shortcut, but it's too complicated for me. Mine is Command Option V, not too bad. Why do I never remember that one? I don't know. I'll edit to the shortcut sheet now for a weird little shortcut is that let's say that you do spend some time getting your logos in some sort of order. Maybe they don't line up perfectly and you kinda do some sort of like, interesting, when the white side, the logos don't quite balanced technically right in the middle. So you do some sort of movement and you want to align this to something either the top or the right. If I select these, I'm inside this frame. If I want to right align it to this, it's not going to work. But I can do is watch this. If I hold down my Shift key and I hover above, can you see shift on, shift off. Basically what to do is it'll put it in a temporary group because what I'd have to do is group it then, right. Align it to select to the side, and then ungroup it. And that works. But you can temporarily group something. You hold down the Shift key and it does basically that groups, it lets you align. It doesn't mess with any of my stuff. So without it on just goes because smush. Okay, but if I hold down Shift key, click on that, it aligns it in this like temporary group. Now let go. No longer in a group, obviously works for any of these bots, a temporary group around it and then starts aligning it. It's get this to line vertically. And horizontally. You go, oh, without having to do a group. Next, drawing tricks that I use, I'm going use the 0 tool to draw a circle, hold Shift, drag it out. I use this quite often, shift X. Basically what it does is it toggles the fill does stroke, whatever the field was, is now the stroke. Let's make this a little bit more obvious because maybe we add a stroke. When you're designing icons and you either put it into the wrong one. Always want to invert it to see what it looks like. So now I've got a couple of more interesting colors. In color. Sometimes there's a green with it selected Shift X just toggles between the two. If you've got something that you want to remove the fill of it command forward slash to get rid of it, you can remove the stroke but going shift forward slash. So you Option or Alt forward slash, this one, shift, shift forward slash, stroke gone or the fill gone, or Command X toggles them. Go on. What we're talking about. Strokes are little thing that not everyone knows. Gotta frame. I'm going to add a stroke to it. I'm going to shift, move up one to jump eight. And did you know this little option here, strokes per side, you can decide I just wanted something on the top or you can go into here, or you can go into the air, go to Custom and say, I just want to, I'll maybe the top and the bottom 90 so much. You go strokes per side of a frame or a rectangle. Weird shortcut is, let's say these logos here, they're the same width, but this one is occupying more kinda like visual real estate for me. If you just use your hold the Command key down on your keyboard, Control key on a PC and use your up and down arrow. It will scale it. It's not like you gotta go up two lift through. So it'll go it'll scale it up a bit and left a lot if you hold Shift as well. So hold down Command Shift on a Mac, control Shift on a PC, up one, up to if to, you can scale things. Waiter. Alright, another tip is outline mode. Let's say that we make this one white tied to see. So show outlines. Shift TO will actually just show you an x-ray version of your documents. You can actually see all the details man afford logos complicated. But all of these you can start to see even though it's white on white, that can be really handy when you're trying to align things up if you're old-school Illustrator, Command Y is the shortcut from Illustrator that works as well. Shift 0, I think works for a little bit more keyboards around the world, and it's Mac and PC, whereas Command Y or Control Y on a PC. Sometimes there's to shortcuts to do the same thing for a little bit more detail. Let's go to this one here and let's hide it. So Command Shift H to hide or Control Shift H to hide or just turn the eyeball off. What you can do is I can't select it or see it if I go to Outline mode shift. Oh, okay. I can't see it either. What you can do is you can actually turn that on. You can go to Figma. You can go to View. There's one in here called outlines. Whereas it outlines, there's actually include hidden layers. The ego. So I can actually see this one even though it is hidden. And I can actually select it in outline mode. Sometimes that's useful, sometimes it's not. But now you know it can be turned on and off, right. Shift over to get it back on. One last thing is we know this from earlier is the Spacebar key. Whenever you'd like during with these, Let's go Shift X. And you wanted to get it close to a frame and it jumps out her meals. What the shortcut is. Just a little reminder. That's right. If you hold space-bar, you want to get something close or get it to the edge like this. Okay, hold spacebar while you're dragging it. Okay, so drag it, drag it, drag it, hold space bar. It means it will get one escape the frame that it's in. It's great for these like, I don't know. Large, so clumsy. You need on the age of the page. There you go. Those are my tips and tricks for drawing in Figma, little roundup for you. How good is pack? So good, alright, that is it. I'll see you in the next video. 123. How to draw in Figma with the pen tool- Anchor point mastery: Hey everyone. In this video, I'm going to show you some advanced pin tool techniques. We're not going to cover too much of the basics. I'm gonna show you if you are finding it tricky to draw things in Figma, I'm gonna show you two ways, the way that kinda makes more sense but isn't Advanced. And then I'll show you the advanced way that I use when I'm drawing in Figma, if you're already a pen tool master, you can skip along. If the pen tool strikes fear into your hot. Watch this video and hopefully it'll make it a little more useful for you and you are doing your drawing in Figma. Let's get going. Alright, so I'm going to bring in an image. It is in your Images folder called pinto practice PNG. Bring it in. I'm gonna go just click once to place it. Okay, I'm going to lock it. Command Shift L. Control Shift L on a PC, just so I can't move it. And now we're going to draw. So P for the pen tool, I'll show you two techniques. The slightly more understandable way and then the gray hacky way that I like to do it, that tends to look better. Let's all start down here with the more understandable way. You click once for corner, okay? And you click your nice straight line, click and drag. So find the middle of the curve. We might have to turn snapping off. So click Actions, Let's turn snap or these off. Alright, back to the pen tool. Down here. Click once for corner, where it's at the apex of the curve. Click hold and drag for a corner, Give it a wiggle, see what it does. And we'll kinda get it like this, like we did earlier in the course. Don't worry, you can fix it up later. But I find this is the easiest way to teach people. Click once for corner, click and drag for curve. This is a quanta, it is click once. Is this a corner or a curve? That is a corner. Click once. Now the corner click once. The corner click once, find the apex of the curve, click and drag out. Don't be afraid to move it around. Get it there. Perfect. Click. Once I'm going to get to the apex, I can't do this all one big go. I can try to get the apex, but you can see it's just not quite enough. We're trying to do too much with one anchor points. I'm going to need probably to, I'm going to need one there. And one here is click hold and drag. One over here, click hold and drag. Didn't get it right the first time. That's totally okay. Get it somewhere close and we can fix it up. This one's a corner, It's okay. Click and drag curve. Click once for corner, click once for corner, click and drag for curve. Click once for corner, click and drag. You got the swing of it. That's generally the easiest way to get started. You can move these around afterwards by using your move tool, which is the V key. You can click on these and say actually you go there and move it that way. You go there and need to go this way. And you go like that and then just kinda like finesse it into some sort of acceptable shape. Then it comes down a lot to practice, practice, practice, practice with the pen tool. Once you've done a better practice and you get good at doing it this way away or the more advanced ways. And then click Done. I'm going to delete that one here, my P tool again. And I'm going to use some different shortcuts. So it's pretty shortcut heavy this one. So we're going to start somewhere easy like a corner. Click once for corner, click once for corner. This is where it gets different instead of clicking once and then trying to do the curve over here, which works. It looks much nicer when you don't have as many anchor points. And what we can do is we can actually do a curve here. You're like, Hey, we don't want to curve on a straight bit. What we can do is start with a curve, kinda get it straight ish, okay, like that. Hold down the Option key on a Mac, OK, canopy Santa kinda breaks. The handles are coming out of this anchor point. It's called mirroring. When they, Mirror recovering, when they match, I'm going to break that mirroring. Mirroring. Hey, it means that I can then go and try and predict this next curve. That's where that comes down to practice. I kinda know that that's gonna get my curve going in the right direction. And before I carry on, what you can do is actually just grab this and drag it back to its home. And you can see it comes straight again. So there's no handle coming out that side and just want from this side over here, I'm gonna do the same thing. Click hold, drag. My curve is totally often good work and I don't want to let go because if I do, it tries to curve that but okay. So I'm going to click hold and drag and then break it again, holding down that same key option on a Mac, alt on a PC. And then try and guess where this needs to go about there. I'm gonna put one anchor point there. So when not quite ride another one directly across the same sort of angles do not quite right? And then work my way around. If you've Joel one that is curve, you can break it afterwards. Hold down the Option key. Go back to here and what we'll do is it'll snap it. Okay, then I've got a corner. Or if you do a corner, you want it to be a curve. You can hold down the Command key on a Mac, control key on a PC and drag out new handles. Option to break them. Command to drag out new ones will control on a PC. So here, I don't know, is this even helpful for you? Drag out my curves there. Click and drag up here. If David detaches, you can just click on it once and it will connect back up. Now, this one here you're like, Oh, it's a corner on a curve. Again. I'm gonna go like this, get it kind of close, break it, and then continue on. But it before I continue on, I'm going to drag him back to his home. This one needs a straight butt here, so I'm going to probably drag that out. Go click hold and drag out. Dry, come back. Check this out, break it. Come back here, get rid of this guy. Can drag out it lost my point. Let's click that one once, drag it out, break it, actually drag him back before I go to here. Sweet drawing Dan to go and tidy it up, I'm going to use my V key and just go through and move these things where I needed to go. Just, again, I'm always looking for the anchor points to look very symmetrical. It ends up having a nicer curve. If these things are balanced. These two here, I kinda directly across from each other, but not quite the same length. So these two here, it says an anchor point down the bottom. Let's have a look at this one that looks about the same sorts. This one needs to come out a little bit, little give and take, a little repositioning of anchor points to get them perfect. Yes, this is a circle. I should just draw a circle. But we're practicing the pen tool. Alright, that is how I do my victory drawings in Figma. There's a little short overview for those people who haven't done much drawing in Figma or at least dev, kinda maybe a bumbling their way through it. Hopefully there was some tips and tricks in there to help you with your icon and logo making in Figma, alright, and that is gonna be it. I will see you in the next video. 124. How to draw with Bend & Mirror angle in Figma: Hi everyone. This video, we're gonna look at how to draw something with kinda using the pen tool. But not really if the pen tool is in your, I don't like you basket this videos for you. We're going to show you how to use something called the bientot, which basically just means you can just drag lines and get anchor points super handy. Plus we'll work through these crazy things. What does mirroring, Mirror angle? They're actually really handy when you want to avoid all the shortcuts we did in the last video. So let's get into drawing without the pen tool, kinda. Okay, so let's grab the pen tool you like, Hey, you promised us not to learn the pen tool because it's painful. We're going to start with the pen tool just to kinda color it in. So we're just going to click and all the key transitions, okay, just go through and where do I want it across here? I don't know. Like before, let's put a couple of bucks head and just kinda hit all the transitions and apex is, and then we're going to use the pen tool. The pen tool is this one here, the shortcut for it as holding down the Command key on a Mac, control key on a PC. And what you can do is just clicking the middle and just go, you owe ligand, that will get us doing bending stuff. Okay, you might find this is just an easy way to get your icons into some sort of order. You'd be like, what about these guys? Okay. So when you have got things that are not mirroring, where I can't say, what you can do is switch back to this Selection Tool, which is V key and keyboard. Click on this guy and say actually, you can be either just Mirror angle or Mirror angle and length. And nothing really happens except when you go and change this can you see, it becomes see the length on the other side changes and angle is the same. You end up with just, yeah, it's a way of smoothing these things out. The other one is if I select my selection tool, click on this. If I go Mirror angle, click on it again. It'll mirror the angle but not the length. Can you see? You'll need both. Okay, in this case, I probably want Mirror angle and length. Okay. I don't know why deselect, but hey, it does, so it does the length and the angle. Now, that is, there can be a nicer way of doing drawing. If the pen tool and all the shortcuts or just a bit mad. Same thing is if you've got a curve and you needed to be a corner, go to no mirroring, and then go and break. It. Said, well the shortcuts. So first of all, the pen tool, just handy. Hold down the Command key and you just go Uk, UK. Add your own sound effects. You can get really close to what you want. And if you need to change something, you is going to be Mirror angle and length. This one here, it's fighting with them. We go now one last one. If I click on this using my Selection tool and but you can move this guy back to his home base and it disappears. Alright, that is how to use the pen tool without using the pen tool. Alright, that is it. I'll see you in the next video. 125. Can you animated anchor points or booleans in Figma: Hi everyone. Hey, I get asked a lot. Can you animate anchor points in Figma? So we can use smart animate to do cool Mophie things, maybe use booleans as well. And the short answer is no. I've got these two shapes here. They don't morph together like you'd hope Figma currently doesn't allow this thing with this boolean here, I wanted to kinda move around because what I want is to do this with this thing, moves around and follows things. It's a cool tutorial that I saw from smelt studios and I tried to recreate it and brings up some really good points about what we can and can't do with drawing in Figma. So the answer is no. Let me quickly demonstrate how I made these ones just so that you super clear about what you can't do. Great story, Rodin. But in the next video, we'll actually go and make this a bit of a trick. And the trick is gonna, I'm gonna show you what this, There's the trick. Easy. It's actually just that block sliding along. It looks cool, especially when this guy jumps up and change this color. But if you try move the anchor points, it just fades along, which is not bad. It's kinda cool still, but not exactly what we want. So let's demo how it's broken. Alright, just for quick demonstration of Joel and what I'm going to call a crown. Okay, It's just a vector drawing. I'm going to convert it into our components. I'm going to make a variant. And instead of just changing the size which we can do, we know I want to actually miss around with these anchor points, okay, and do something interesting. And unfortunately, Let's go done. Let's shift E to go to prototype. You connect it to you on tap, change to this other variant using smart animate. The same going back the other way. Let's drag out an instance. Let's preview that instance. Command Option, Enter, Control Option, Enter on a PC. Click, click. Okay, it just doesn't work. Unfortunately, just as a fade is the same we booleans. If you're thinking, Oh, I wonder if I could just animate a Boolean like that Navigation example which says if I draw out a rectangle, okay, I'm going to use my O'Toole for the Ellipse tool, drag this out and go, You two people are going to be Boolean, subtract. I'm gonna do the same thing. Let's make it a component is have a variant of it and I'm going to switch to shift. Oh, okay, For outline mute mode, I find this easier when we're working with booleans because of not being able to see them, but they're going to drag this one this way. Okay, and try and animate between the two, that both shapes, but at the moment, so I've looked Shift 0, Let's switch to prototype mode and go, you go to their on tap change to Smart Animate. You can go to the back, grab an instance of it. Let's give it a preview. Let me get boop. Boop, just as a fade. I wasn't sure whether I just showed you the beginning to say, no, you can't do it. Whether I show you examples of it not being able to be done anyway, that is the truth of the matter at the moment, but there are workarounds which we'll do in the next video to make this kinda cool navigation thing move along. Alright, let's do that now 126. How to animate a mobile nav menu in Figma using a dip: Hey everyone, We're going to make this cool navigation thing where it kinda moves around and bumps around. It's very cool. It was an online tutorial that one of my students brought to me, though having some trouble. I was recreating it. I bumped into a few things as well. So I think it makes for a really good learning exercise for us all to do together. It'll combine how to animate paths or at least the tricks to make it look like we're animating that little dip in the bottom there. And some of the issues you might run into if you're trying to do it yourself. Plus it looks really cool. Bouncy and Debbie, look at that. Alright, let's get started. So I saw this tutorial and very cool tutorial from smelt Studios. What I wanna do is break it down because I've had students come to me trying to recreate it. They bump into a couple of issues. So what I'll do is we'll do a really simple version of this and we'll make it more interesting as we go along. So let's just do it with really simple Boolean to start with. So we're going to use the auto for the rectangle tool. Why not a frame? Because we can't do a Boolean with a frame and we can't do like Pin tool, Anchor Point stuff with our frame, can only do it with a rectangle. I'm going to draw a rectangle. If you'd like me my tenure snap back on, get it snap. What I want to do is I'm going to grab the Ellipse tool. I'm gonna hold shift, drag out an ellipse. I'm going to combine these two, okay, using a Boolean, I'm going to use the subtract and we know we can't move it along K as an animation. But what we can do is we can say inside of subtractors, the two parts, right? Rectangle an ellipse. The ellipse, I'm actually just going to make way longer than I need. I'm dragging out the side here of the rectangle, holding down my Option key on a Mac, alt key on a PC, and it drags from both sides. So I've got dislike, got a little bit extra area here so I can move it around. Can you see it needs to be enough that I can get all the way to over here. So I need mine to be a bit bigger. Not the whole thing. I just want the rectangle. I'm going to hold Command and click the rectangle Control on a PC to dive right into their hold down the Option key, Alt key on a PC, just drag a really big. Now the really big thing here before we move on is that just dragged it out so we can see the whole thing is that this whole section needs to be in a frame, needs to be inside of frames that we can move it inside of it. Okay. It needs to be the child of a frame. So to do it, I'm going to use the shortcut for framing something, okay, wrapping in, summing them to a frame. So I've got everything selected, Command Option G or Control Alt G to put everything inside of a frame. Let's name it commander, call it Nav Alt. One. We're gonna do is make it a component. Let's have a variant is just have to for the moment, I drag it back into my frame here, which is not going inside, you go inside my phone. And this bottom one here, not the wrapper. The subtract on the inside needs to go all the way over here. Well, not out. Hold space bar if you need to keep it inside the frame so you don't want to move the variant itself, the whole thing. Because we can move variants anyway, we like, just like more of an organizational thing. We want the things inside of it to move. So let's see if we can make them work now. So I'm going to switch to prototype mode, shift E, click on this first variant and say when you are clicked, go here. So on tap, got a variant to use smart animate. And I'm going to use quick because it looks cool. Same thing here. Click and drag the bottom line up to here. It should get all the same defaults. Let's drag out an instance of it by clicking the first one inside of the set hold down Option or Alt. I'm gonna drag mine up here. This doesn't need to be there anymore. So let's give it a preview. So Command Option Enter, Control Alt, Enter, it's going to preview going, let's go to click. Look at that. Here we go. That's the basic mechanics of it. The trick is, is that we're actually just sliding this alone and that that needs to be inside of a parent frame. And that you're not just moving the variant, you're moving this stuff inside of the variant. That's the important bit. Alright, now that we know that that's make a slightly prettier version, I foresee it taking us a little while. So you go away. And I'm going to start with a nice dip. Rather than actually we'll start with the icons shift. I, let's type in icon, and I'm going to work with just these three for the moment. You can get any icons you like. We'll get you. And I will get the hat. I'm just going use three of them. Stick them all in browse sweet shortcut. If you use the quick selection, how do we stack them all out? Let's right-click action. That's called PAC, PAC horizontal. There we go. I'm going to line them at the bottom. So I'm gonna hold down Option on a Mac, alt on a PC and hit S for the bottom. Or actually let's do H V. So they're all vertically aligned. They should be a smart selection. I'm still in prototype mode, so I'm gonna go to Shift, drag these out. How far that far I'm going to grab the Rectangle tool to build my part of this. Okay? We go, I'm gonna send it to the back using my square brackets. Can using the first one kind of pushes it all way to the bottom of my phone. That kinda looks alright. I'm gonna go inside of this so I can use my sweet pen tool skills. So I'm gonna go my V key, double-click to go inside, go to my Pinto, which is P. I'm inside of it because I'm in the object drawing mode, you double-click it to go inside of it. Okay, and I'm gonna go probably three, right? 12.3. Go back to my V key for my selection tool. This one down, you can get them lined up. Does that look like a good V? I think so. Something like that. Some of the shortcuts we learned before I'm gonna do for this one is a no mirroring. I'm going to have Mirror angle and length. For this one down the bottom here, I'm going to grab my pin tool, holding down the Command key, which is that Bend tool, Cain can actually click on the icon itself. Now at the moment it's a bit wonky, so I can say actually Mirror angle and length. Get back to my selection tool. And I can say, here we go, it's gonna be the same length and width. Okay? And I want to be something like this. Maybe I'll round these off as well. I'm going to use the pen tool and just click on this and just drag it out a little bit. Same with this one. Yeah. That'll work. Okay. Done. So I've got the Bend, I've got all my shapes. What I wanna do is make sure this is really wide. So I'm going to zoom out. I'm gonna go, if I drag it, it's going to smear my thing. So what I'm going to do is go back into object editing mode. Click this first anchor point, hold Shift, grab the second one. Just make a really big Same with these to hold Shift, click both of them, make it really big, bigger than you probably need it, because it doesn't matter. It can get clipped off. This hit escape a couple of times to come out. Alright, and now what are we gonna do? Now is the big point where we need to make sure it's in a frame. Select all Command Option G, Control Alt G or right-click it and say convert to a frame selection. That it, I think so It's converted into Component, may go variant Command D or Control D to make another one. And I'm going to do it actually all my frame here because I wanted to be able to see them all within the clipping boundaries. I'll move it off in a sick. So we're going here. Let's just double-check it works. So this first one, perfect, this one here. I want to not adjust the variant. I want to just the rectangle in here and just goes up. And let's just do that bit, Adrian sound effect. Okay, and I'm going to go to prototype mode. Go you, I kinda go here, change to probably variants Miami. Quick. Let's see if that works. Let's grab an instance of it. Let's preview it. It freaks out. Close it down, preview it again. We go, it's click. There we go. Kind of working. Alright, let's just fill it in. So what do we go? I went that whole thing. Click down here. Okay. Get rid of the noodle, click on it, delete. What I'd like to do is do this bottom one. So this one here, the rectangle inside of it, goes down to here. So those are the three little jumps. And what we'll do is we'll get it rigged up. So when this, when this, this and this, I'm holding shift. So in this is clicked, goes nowhere. Or at the right spot when this is clicked it goes to here. Same with you. The heart. When the hottest click go to the hot one. Hot one, he'd go to that one. What else we got? You're going the right one. This one. So when a ticketing goes back to the first ticketing option with this one, just double-check. Are they still using smart animate and quick? Alright, so let's keep previewing it. Let's test it. You, you, you, alright, they all work in. Let's get these guys just to get a little different in size. So this one here, I'm going to get to go up. I'm holding my Shift key down using my up arrow go up 123 probably. I want consistency between these guys. One-two-three. One-two-three, that I have to be what I might do as well as the and you know, what have I clicked? So click on that one hold Shift, double-click that one, double-click that one. And I'm going to say, all of you are going to be not that color. I'm gonna get it switched to the other five-hundred, that one there. What I also might do is scale them up. Now, you might be tempted at the top here just to go, alright. I'm going to, you could just go plus eight or not in that one after the width, you could just go plus eight, okay, and stretch both of that one. That is plus eight. That kinda works. We see kinda went from the top left. As we the scale tool is a bit handy, a cave for the scale tool. And you can see, I want to scale from the center how much like 0.25. There we go. That didn't work. Thinking on the fly, Let's do it all separately. Okay, So you are going to be a width of listed the height because I think the heights are all the same. Let's go plus eight. And it goes from the center. Same for this one here. K2 plus eight. There you go. K2 plus eight. Alright, let's see if that works. Let's go over here up. Or it is nearly there. That doesn't quite sit in the center. Bugs me. You have a look. You just need to be a little bit that way. And I kinda put them up all the same size, but this one needs to come up a bit higher because they don't all have the same heights, right? So there's gonna be a little bit of back-and-forth trying to figure out what looks best when they move to these, you go, we can't animate the pause and we can't animate booleans at the moment. But you can kinda make it feel like it does. But actually just shifting that along a nice bit of smart animate. I think the easing of this that quick makes this all really cool. There you go. Alright, that is going to be it kind of a tricky one to get together, but a good time for some of those shortcuts that we're learning. And is it weird that these haven't scaled in my preview? Can you see that a regular small size, we know those scales in here. Okay, but they just haven't previewed here. Let's offer refresh. Refresh doesn't help them at all. Don't know why. It's one of those open Figma, close it back up again things I think frame. Let's go back in there. Let's get it inside of my iPhone. Let's have a look now. Now that the right size. Here we go. Alright, that is it. Now, I'll see you in the next video who I know there's gonna be a problem I'm thinking of for chewing his snus, for citing, I'm doing something. I reckon that if you do this in a different order, which I know some of you will. Can you see, I've got three variants. They're all the same size, even though these poke out at the top, what you can do if you do it a different way round is these can be different sizes. You might make these first, they make a component set. I can see people doing that. So if you find that, let's save this one, will do it to this one. The frame, okay? All the way around the outside here is the same height as this, so that when they transition, they all line up. If they are not, if I click on this one and I grabbed my Command key, control key on a PC, I can actually adjust the frame separate from everything else. I can just wrap. It is a frame even though it's called a variant. Okay, I can say let's make this one bigger. That might happen. The thing that ends up being a bit taller than this one, because this one's kinda clip there. Let's have a look at what happens to it now. And then you can you see it moved if you end up in that trap, okay, what you need to do is a couple of things. What you need to do is just make sure this is snap to something that is the same size on all of them. If I hold down my command key on a Mac, control key on a PC around the variance. So I selected the variant, I can make it the right size and that should work for you. Let's give that a go now. Well, I know because I broke it that way, but that is a problem you might run into and hopefully that'll fix it for you. Click on the variant, make sure it's the same height. I can kinda see it here. You can just type it in. If it needs to be 50, I can type it in. It won't work. If you didn't put it in a frame fist, if it's still not working. Okay, it needs to be inside of that first frame that we made early on. Wrapping this all up a nice little container for everything to move inside of, separate from the actual elements, you go, alright, that is now the end, definitely the end this time, Bye 127. Class project 16 - Alt Nav Animation: Hi everyone, class project time. I want you to recreate this. If you haven't already from the previous video, what I'm really looking for is that anchor point that kinda moves along. I know it's kinda faked. Do something with the icons may be a change of color. It doesn't have to be this kind of like drippy droop thing or it can be, I don't mind. I just want to see that you can get the mechanics working. I wanted to be so that there is the shape, who is my original? Using the anchor points just to practice that a little bit as well. What you might be tempted to do is cheat. Cheating is fine. I can check, but you could just maybe like let's say this one here. I could have a circle here that match the background and just move the circle alone. You wouldn't know. You would as soon as content try to go behind it. So you go, I just want you to recreate a video of you interacting with it, upload the link to the assignment section, share on social media, I'd love to see what you make. Use your own, using your own colors, you can use my icons or any icons that you want to use to maybe just by set up a little bit up to you and don't forget to comment on other people's work, feedback, encouragement, teamwork. Alright, that's it. I'll see you in the next video. 128. How to overlap & stack things in a Figma Autolayout: Hi everyone. In this video, I'm going to show you how to overlay things so that they stack on top of each other, if you like, just put them in different layer orders. That is partially true, but not if you want to make them an auto layout where we can nice and reorganize them. There you go. You can play with the stacking order as well. Fancy. Alright, to get started, I am back on my page one with all the junk. I have made. Frame shift to animate a box for the comments to go inside. I'm gonna bring in some icons that I want to overlap there in your exercise files. Command shift, K, Control Shift. It's a bit late for shortcuts. Dan, especially those ones, bring in icons. I'm going to place them all or on the wrong spot. I'm going to use my Quick Actions. I'm gonna go pack horizontal. And the easy way is with them all selected smart selection. Now let's you do negative. There you go, but it won't let you change the stacking. And while that's the easy way, that's maybe all you need. Let me show you the proper way. Probably stats here we are. All of these guys need to be multiple components. These need to be taken to my main components document or to my components page. I'm not going to right now. Don't judge me. Okay. These instances, even though the components can still be negative aligned, but the trick really happens when we turn them into autolayout, maybe shift a K and it's good uname command emoji responses. Okay, I can now using autolayouts still use that negative. Okay, but the nice thing about here is we've got some advanced Auto Layout Options, and we can now go in the Canvas stacking. Now, they're all there z-index, depending on what you want to call it. I'm gonna do first on top, lost on top. Okay, it depends on what you want to do this properly, properly. How big do these need to be? I'm gonna go back to the main components and say K for scale and the height there. I'm going to make these all 16 if Mrs. with my autolayout because it's still using the negative that negative sitting, which doesn't make sense when it's really big. These on my page. Last thing I wanna do is add some drop shadows. I can probably do it to this. Actually, I'm going to tidy it up, make it look nice. But really that's it. The negative spacing works just with regular old objects. It work when you make them components. It works when you make them autolayouts. But once the autolayouts, you can play around with this stacking under the Advanced Options. What I wanna do now is pretty them up. I'm gonna select them all. Go down to, oh, this is worth hanging around for if you're going to jump off is effects. I'm going to add a drop shadow. And what you'll see is it's have a look. Them over here. Can you see let's move them over to here. Can you see what's happened? Not good. Drop shadow. What I wanna do is grab all of these guys. Go to my fix. Are you effects go into the settings. There is an option now and here this is show behind transparent is who? I don't like that. I don't like what drop shadow, but it works. I want to go maybe to that way zero, that way. I like to tab through these as I'm changing them. Maybe just one that way. Maybe go. And when they get negatively applied, they've got a little bit drop shadow between them. Love that face. Alright? Alright, that's it. That is how to easily overlap and stack things in Figma 129. What are the shortcuts for hug & fill in Figma: Hi everyone. In this video, we are going to look at how to switch from the resizing fixed hug fill using shortcuts. The short answer is double-click the edge for hugging and Option or Alt double-click to go to Fill. Why is this video so long? There's a couple of things you need to know, but not much more. Let's rebuild this and I'll show you the tips and tricks. Alright, so these shortcuts, Let's grab the type tool and draw a type box like a rectangle. Okay, so it's gonna be fixed size box. I'm gonna put in some text, you type in some stuff or pasting some Loren ipsum. And I am going to use the frame tool. I'm going to hit Escape to get rid of it all. If I'm going to draw a line here and use a frame to do it with a fill of that. How high it's going to be, a height of eight pixels. Let's turn this whole thing into an auto layout. And the way this needs to work is that makes sure that your comment box, everything that we've drawn so far is inside of it. You give this a name. Can be my role. So everything here is gonna be shifting. It's gonna be an auto layout. I was gonna be top-left. So let me show you how responsive this is so far. Not very responsive. To make it responsive, we need to play around with the re-sizing, that's hug and hug and fixed height. Instead of playing around with these drop-downs, you can use shortcuts. So good. The first one, hug, let's say our resize this box through my designs and I realize it's gone to fix. I can't go and change it to hug or I can use the sweet shortcut. All it needed to do is double-click the outside of this box and you can see undo, fixed to redo, hug. Same for the width. If you want the horizontal to be hugging, just double-click the edges, it snaps to resize. It takes work slightly differently. Hey, kinda the same sort of things I wanted to hug because at the moment this thing, a fixed height when it goes outside of that, my parent frame, doesn't know what's going on. It only sees this text box, okay. It doesn't see all this other stuff. To get that to switch to hug contents, slightly different with text, the operation is the same, so I'm gonna hit escape to get out it takes mode, just double-click the bottom. Instead of going to hug, which it kinda does. It actually switches it from this fixed height box to auto height. Same thing, but now for double-click, copy it, paste, paste, paste. Now it's responsive. Okay, so double-click the edges to switch it to hug the side here for ticks, if I wanted to hug, if I double-click it, it doesn't quite do what I want because it does, okay. It hugs the contents and the contents doesn't have a break, so it just goes on forever. So as we just did this option. So when you're using a box, when it's a frame or an order layout, double-click it, it will hug the contents for text. It does similar but different options. Converts it from there to there to there. Fixed to auto height or width. Just double-click the edge. The one I end up using more often is the next shortcut. Same thing. You double-click the edge, but you hold down the option key. What does that do? It goes to fill container. So let's have a look at this. This now very responsive. But if I click the text here, hold down my Option key on a Mac, alt key on a PC and double-click the edge. See at the moment it says fixed, watch this. Bam, fill, fills the container. Now, it's all sorts of good resizing. Let's do the same for this little bar here. Little harder to click, Okay, but if I hold Option double-click, it switched to fill the parent container. So I'd say Double-click the edge for hug Option or Alt, double-click the edge, fulfill Haiti, right? That does it say in the next video? 130. How to set absolute spacing so things ignore Autolayout in Figma: Hi everyone. In this video we're going to look at something called Absolute Positioning. This comments box here, can you see it's an autolayout and it has this avatar inside of it. Means I can move it around, comes along for the ride. Because normally it does this. You try and put it in autolayout and it goes I need space. You're like No, no, just go over there and then it pops out and then it's in again. We're going to fix that with Absolute Positioning in Figma. To get started, I've got a circle. I'm going to open a plugin called content real. I use it just a minute ago so I can use the Command Option P, Control Alt P shortcut to reopen it. And I'm gonna go to Image and I'm going to find an avatar. You go, no, I want, I don't know. What ends up happening is this is fine. The avatar is great, except you'll find that like 1,000 other mockups have this exact same woman. That's alright. So what I wanna do is I want it to be there on the top there. We know that I can hold space bar. So I start dragging hold Spacebar. I can put it there. It's not part of this gang though. I can make another component wrapper on it and it's just a bit of a pain. I want it to be part of this, but I don't want it to be in the float. What we're gonna do is we are going to put it in the flow. We want it, and then we're going to use this magic thing here. It's called Absolute Positioning. If you're a Web Designer, you'll know the term. If you're not kinda make sense, but of annuity web term, you click on it. You can absolutely position it anyway you like. Okay. I'm gonna put mine up here. You can end up accidentally dragging it outside of my comment box isn't what I want. I'm going to undo that. So there's a couple of things I can do. One is I don't want it to be clipped. I'm gonna hit Shift Enter to select the parent, which is my comment box. And I'm going to say do not clip the contents, which is showing me the edge. Double-click to go inside of this now so it doesn't pop out. Who remembers the shortcuts, so it doesn't leave that member. Space Buster works. Okay, so I can get it here. The cool thing about it is it's still part of that comment box. Look, comment box. You come along for the ride. I can turn this whole thing into a component and that will remain there. If you in the positive done like some zero height tricks, okay, this is the replacement for that. Now, if you've never heard of a zero height trick to try and make things like this work. Be thankful. Alright, couple of things I wanted to do to tie it up is I'm gonna drag it over here holding spacebar. I want to play around with the padding of this to give it some space. So I'm going to click on this. There we go. And I'm just gonna give it some extra padding for the top to allow room for my avatar. I've spent ages trying to align it up. You wait, they're going to a drop shadow. But I didn't like, anyway, we're going to leave it there. That is Absolute Positioning in Figma 131. How to absolute position something that is responsive in Figma: Hi everyone. In this video, we're going to add this little lozenge thing here, okay, And we're gonna get it so that it's not only outside of the flow, but still part of by autolayout. But look, it's responsive, comes along for the ride. Alright, let's jump in, right, Let's make that little box. I'm gonna do it in Speed mode. Okay, that took me way too long, but luckily got speedy version of it. It's just a lozenge that has text in it. I've made mine in order loud so I can play around with the padding that is not necessary. What's necessary is that it's going to hang about here. But I want it to be inside the autolayout like this one. So I'm gonna do is put this inside of my autolayout King and I get it in here so I can see the line murmuring going to put it. It doesn't really matter because it's going to be absolutely position. Notice that it's just the second one in the list of these comments box like before, I'm going to say absolutely positioned this thing. Boom. Then I'm going to move it over here, hold spacebar so it doesn't jump out. The stays within my autolayout, the comments box and put it wherever you want. I'm gonna put my day. Now, let's check how responsive it is as you could do, Duke, not very responsive at all. So what I'm gonna do is I'm going to use some of my shortcuts into the go inside tab, tab, tab, tab, tab, tab. Find the one I want and I'm going to set it from left. Okay. That's not why that's why it's not responsive. So I wanted to be Santa, right? Depending on what you want to do to the top. Thank you very much. Now, it should, Hey, I probably want mine to be not seem to depends if you wanted to be in the center, I'm going to have mine to the right. Here we go. Responsive stuff that's outside of the box. Look at us. One thing I want you to note is can you see it's moved my upvotes little lozenge that I made. I'll stop using the lozenge. It is ended up down the bottom, even though it's kinda started life at the top and it looks like it's on the top. Just kinda pulls it out of the flows, have pushes it down by the avatar. And the upvotes used to be at the top of this comment box, but now they've getting pushed down to the bottom here. I don't know why that's interesting that you go, alright, that is how to do Absolute Positioning plus a little bit of responsiveness. Alright, I'll see you next video. 132. How stick things to the bottom right of an auto layout in Figma: Hi everyone. We're going to put this image in the bottom right. Doesn't have to be an image can be anything. We're going to use the Absolute Positioning trick. Plus we'll look at a little bit of the stacking that we looked at earlier, plus a little bit of masking revision. Alright, let's jump in. All right, Let's make it work. So I've got this here. It's just a cropped image of a cropped image. I'm going to want it in here, okay? But I'm just going to add it to the flow wherever I like. I'm gonna go your way. Absolutely. Positioned comes out of the flow, ends up at the bottom of my autolayout and I'm gonna put it in the right position. And the last things I need to do is the moment is not responsive. Alright, so only need to do is click on this line is the great name of mosque group. And I'm going to say Constraints. I'm going to make sure it's to the right. And I'm going to say stick to the bottom, please. Let's it. My guy is super responsive. They got Cooley is ignores the padding sticks to the bottom right. What is this thing? I don't know. Something I designed in Adobe firefly, which is Adobe's AI image creator. I typed in Cyberpunk flower particular theme. Anyway, one last thing I want to show you is that that is above this, which might be problematic, but we should be able to click on the parent comment box. And it's an auto layout. Remember before we use it in a different contexts, but we go into the advanced settings. And there was canvas stacking last on top because these guys are at the bottom. My mask group is the last and the list I can say actually put the first on top. Yours might be defaulting to the other one, that ego. You can toggle between the two. Alright? You're allowed to go. Now, I'm going to remake this mosque inside of a mask just because it's good to recap. A little confusing. Yeah, we'll do it anyway. So I'm gonna hit the 0 tool hold shift draw circle. I'm going to go Command op, command shift K to bring in an image that's Control Shift key on a PC, I'm going to bring in this Firefly one, and I click in there. Okay, so what I wanna do is I'm going to grab a frame, draw it over the top. I'm gonna give it the same for pixel radius that I've been using for. Then I'm going to get it how I want it. I can adjust that afterwards. It's like both of these. I'm going to click mask. Not going to work because this needs to be at the front. That needs to be there and then mask, always get it wrong. Okay. And that's how I got this kind of like clipped out mentioning the corner there so I could use the drop shadow that's going on. I can still obviously go inside of it. Hit enter tab along for the different children in their the mask and the flower. And you can move whichever. I'll probably be moved the flower here. Okay, make my adjustments. I actually, I'll probably do it to this one. Double-click to get inside of it at tab, double-click to get inside tab, tab between the two children. Okay. And I'm going to adjust this one. You go. That's how I made that. That wasn't worth hanging around for Dan. Yeah, You're probably right. One last thing before I go is basically I've finished this video when I was like, Oh, I want that to be bigger. How do we do that all with the shortcut, 0 wash, remind people with the shortcut. Anybody remember how I get into? Because the moment it's using the fill option, it's going if I click on my ellipse, it's using the fill option, okay, inside of that ellipse, how do I get in there and get all the shortcuts so I can scale it and move it around and resize it. And it's right, you hold down the Option key. So if I click off, obviously can no, OK, canopy C is a little bit of click habe, kinda double-click a couple of times until eventually start seeing all this stuff. Remember, and I can change it to crop and resizing, but just dragging this middle bit, you want to like break it from the edge because of that, let me play around with the crop edge. Those blue things are let me play with a circle, but that's not what I want. I want to kinda drag it out so I can get the edges of this molding shift so it doesn't go crazy. And that's what I want to get a more interesting crop and cut the ego escape, escape, escape is EBITDA. Yeah, What's cool. Alright, there you go. I'll see you next video. 133. How to resize a box automatically in a Auto Layout to match text in Figma: Hi everyone. See this little colored box on the side here. I'm sure it has a name. I don't know what it is. Bad when we delete text or editText. Can you see it expands, responsive. It's a nice mixture of autolayout, Absolute Positioning and Constraints. Alright, let's jump into make it, alright to get started with, I'm going to hide some stuff because throwing everything at this tutorial and we didn't ending up with a bit of a mess. So I selected my avatar Command Shift H to hide it. Control Shift H on a piece into the same with this. And let's do the little texts expanding thing. So first of all, I need frame. Okay, I'm going to drag it out size. I can adjust this in a sick. I'm going to use a color 500. I'll use my 3D color. Give it a name. Poorly named Dan. I know there's a technical word for this thing. Can't think of it and if I'm honest, I doubt the word there is a word for it. I'd like before. I'm gonna kinda get it the right size first came in by dragging it in, holding spacebar, kinda get it lined up. I guess pretty good. Actually. Nowadays. Resize it here, get it how you want and then drag it into your autolayout off into autolayout, same as before. We're going to sit the Absolute Positioning to route here. And what we wanna do is get it to stretch, okay, so I'm gonna get it to snap to the edge there. It's too close to the text or fix it in a bit. But why don't wanna do is we want to say Constraints to the left shore, but I want the top and the bottom. What that means is it's gonna look at the overall size and adjust. So if we adjust the overall size by changing this textbox which is set to hug contents, or at least the equivalent for a text box which is auto height. Can you see it changes one line, lots of lines. I'm gonna go back to what I had. Now, the only problem with this is that it's not particularly robust in terms of responsibility. Responsibility, responsiveness, stretchy Text things has no responsibility in the world. Alright? And what we wanna do is to make it a little bit more robust. Actually, it's gonna do two things. Actually this next bit I'm going to undo and we go back to things that I want to do. I need to push this over and I can't go to the textbox and say you go this way because it is all left aligned inside of, inside of this autolayout. So I can go Shift Enter to select the parent. And I can say to the right, It's kinda working, but it's moving everything else over. It's not really what I want. I'm going to undo it that way. What we're gonna do is a bit of inception for autolayouts. I've got autolayout parent, this textbox though. We know that if I added autolayout to it shifts a okay. It gets padding around the outside. And what I'll do is I'll set that to zero. Terrier cross the zero and show them all to say on the left, Let's have a bit, a Lou, I've got some padding, so that's pretty cool. And the other thing is that that's still a problem stretching because of what it's doing is it's just a bit of a trick. We are saying, Stay this far from the top and this far from the bottom. And when the text box expands, so does this, but there's no direct connection between the two. This textbox makes the overall parent bigger, this gets bigger, and it kinda works until you do this. What we can do though, is we can say you, we can put you inside of this. So let's go you would you inside of that autolayout because it's already an absolute position. I'm inside this frame. Let's give it a bit of name-calling it. Coming to Xbox. Inside of it is my tics blocks plus my stretchy thing. And because it's absolute positioned and drag it out, don't want it too far out. We don't want to drag it out out. So remember hold spacebar, let's get back in there. Hold spacebar, hold spacebar while you're dragging it. Okay, and now it's use my arrow key. It is still inside my textbook, which is an auto layout. Let's click on this guy. He's still set to top and bottom, but he's referencing this box now, when I make this bigger, can you see it doesn't wreck it. But it's still has that nice functionality that it gets bigger and smaller. Alright, that is how to make a stretchy, give me the name. If you do know, if you're talking about graphene, you're like, Oh, that's called a something or other. Somebody to do the pull quote and indent or something like that. The name for it, let me know in the comments. But for now, I think that's it for Absolute Positioning. We did a few different versions of it because it is quite powerful in super useful for super charging your autolayout, amazingness. Then we go all the adjectives. Oh, one last thing before we go our shortcut tests, pop quiz, I resize this so it's now our fixed width. What's the shortcut to get it to jump out and fill the container. You remember it, you do both of them, you double-click. I realize it's not the one you want. And then you go Option on a Mac, alt on a PC and double-click it and it fills the container. Here we go, pop quiz over in that my friend is the end of the video. I'll see you in the next one. 134. What are the autolayout padding and resizing shortcuts: Hi everyone. In this video we're going to look at some shortcuts for autolayouts, just a couple of handy ones. One is resizing, resizing a frame here. Normally we can just grab the corner, but if we hold down the Option key on a Mac or Alt key on a PC and do it, it drags from the center and it resizes the whole thing from the center out. We already know that one a little bit. You can use that same shortcut for padding. So I can drag out that padding on that slide, but I can do all of them there at 19 now, which is not a good number. Okay, so I'm going to hold down my Option key on a Mac, alt key on a PC and drag one of these headings. You can see it does lift and right, which is handy, I can get it to like 16, that's kinda where I want it. But if I hold down Option and Shift, let's Alt and Shift on a PC, it does all of them the same time. Look at that. Nice. Or I wanted to be 16. There we go. One thing I noticed there is that out the sky probably want sticking to the bottom and resizing it the moment it is packed in there. So by default, everything inside of my auto layout is set to packed space between. You can kinda see that little thumbnail there is gonna kinda spread it out. If I go down here, packed means it's going to try and squish it all at the top or in on the left, depending on what's sitting here, you have horizontal or vertical. If you switch it to spacing between, it just tries to stretch it out to fill the space provided goes to Auto. There's only works for a fixed height box. Because as soon as I go, who remembers how I get this to jump up and hug contents? You remember, we double-click the edge. It switches to hear to hug, which also switches it back to Pact to say no. If you give it a fixed width, but if you give it a fixed height, you can then switch it to space between a lot of people will just do this. They'll just type in order. No bonus there. Alright, so those are the shortcuts. Plus we got a little emojis sticking to the bottom. Alright, I'll see you next video. 135. How to create a minimum width height button in Figma: Hi everyone. In this video we're gonna look at minimum and maximum sizes in Figma. So I've gotta button here, it's an auto layout. If I make it smaller, eventually it can't get any smaller, it's going to minimum width. And likewise, I can type lots of stuff and eventually it won't get any bigger. It's called Min and max widths. Great for things like buttons, but you can use it on anything as long as there's an auto layout. Let me show you how to make it. Hi everyone. This is an updated video because they've just released a better min-max. There was a hack to do it before, so things might look a tiny bit different. So what we're gonna do is like Normal, an auto layout button can get really small or really big. So we want to add that minimum and maximum to do it. Don't do it to the textbox due to the parent came in, but you can have backslash. So you get the parent gave the autolayout here and minds an auto layout? Yes. Okay. And the new budget is over here, under width, there's this Dropdown now, okay? And you can add Min and max. That's it. Just make sure it's to the outside and not the textbox and the inside. Okay, so let's add a minimum. What should you minimum B, it's up to you. That's pretty common for 44 pixels to be a minimum button size. And 32 for an icon. Just kinda like people need to be able to touch it, especially on a phone. Great, Let's look at the maximum. So let's go Dropdown lids that one. Let's go back up to width and say add a maximum width. How big? I'm just use multiples of eight. I have no idea what a good size for a giant button is, but 160 seems about right. Now. I can start typing and it will keep going and eventually break. Okay, so we've got a maximum size, which is awesome. Alright, let's enter our text. And what I wanna do is just make you aware that I'm going to grab a frame and I'm going to draw out something that's kinda the same size of this. There we go. And what you'll notice is that when they do minimum and maximum on the widths, they include the padding. Okay. You can see there that's 44, like my minimum was there, but it doesn't include the drop shadow. The drop shadow here is I just made something fancy. And well, it's just two-by-two pixels with nobler, again, gives you that kinda really cuboid drop shadow, but it does not get included in the frame. The other thing to note is it's give it a fill color. It I'm not sure why Garfield color, but this here, a frame can't have minimum and maximum at the moment. Neither can a plain old text box, neither can a rectangle. It has to be an auto layout, which is this option here. Maybe you can be an auto layout. Now, I can have the dropdown for min-max. Another thing you can do because it's the advanced course, is you can drag it to a size. You've already got existing buttons on your design. There already are the right size. What you can do is go up to here, make sure it's an auto layout. Then under width, you can say, I'm going to add a minimum width, bringing a drop it down again and say set it to the current width, whatever you've got. Okay, so that'll use the existing dimensions for width. And you can do the same thing for max. And you have one didn't width, but obviously height works the exact same way. And if you're like, what are those diamonds that'd been in the course and Dan hasn't mentioned them. The kind of new. Let's have a look at one frame. I'm going to cover these later in the course called variables. Okay, it's a new thing and there's a whole section on that later in the course. So we'll get to the little hexagons are not diamonds. You go, That's minimum and maximum sizing in Figma, the new version, a little side note is because how long it lasted, that heck, the course comes out in about 10 h from now because it's not even released and the new updates have made me go back and re-record the min-max video. Good work. Figma, you guys wait till I record stuff and then go and change it. Anyway, it's up-to-date now. Enjoy. I'll pass you back to regular Dan, who you know and love. I'm future Dan picked irregular Dan by 136. How to wrap auto layout objects in Figma: Hi everyone. In this video we're going to look at wrapping autolayouts. Okay, so I've got these little pills in here, there inside and autolayout that look reps in the passage is gone straight up, straight down. Now we can wrap. Exciting. Let me show you how to do it. Alright, so wrapping I've just made and autolayout there has some ticks in it that kind of expands and contracts. I want to put them in a nice little group that wrap, okay, So I'm going to select them all, all my little autolayouts, put them into their own autolayout, rubbed them all up shift day. And the new version of Figma is actually wrapped it. Or by default, what's happened in the past is this and this. Okay, So we're gonna do it on purpose. We're going to say, let's wrap them to whatever the sizes and the cool thing about it. So that's the wrapping icon, is that when I drag it, can you see it'll expand and contract depending what fits in there. These could be images. I've made these little pills with hashtags in them. It's totally up to, you. Might have defaulted as stucked on the bottom for some reason. Double-click the bottom to hug it, you go. If you're gonna do something like these hashtags, that in the last video move we learned minmax that might be useful. So I'm gonna hit Enter on my keyboard to dive into my autolayout to select them all in one big group. I didn't show you how to do this in the last one is I can say all of them have a max value of, let's say at that, it doesn't go too crazy and go awry. This hashtag horde we've designed is or breaks into two lines just to restrict the max-width of those ones. There you go. That is wrapping in order layouts. This is a new update videos. So you might have bumped into this already, but the ego wrapping on purpose. Alright, I'll see you in the next video. 137. What does stroke included excluded mean in Figma auto layout: Hey everyone, in the autolayout advanced settings, there's this thing called strokes. It's got included in Layout, excluded in loud. What does it mean? Let me show you what let me show you what I mean. I've got this autolayout done the bottom here. Okay. It's made up of two parts, this textbox, Okay, if I double-click it, you see this textbox. It's a little hard to see, purple and purple, but can you see that button right up against this module that I've made for the early bird. Okay, there's no space between them. Okay, and let's add a stroke to this early bird module. I'm gonna say you have a stroke on there and let's make it really big. Okay. Let's paint it on the outside. Can you see it did nothing to this text. The autolayout just excludes the stroke, just ignores it. Now, normally, that's fine with a big stroke like this. It actually accounts for quite a bit of physical distance and you might want you spacing to be pushed out to others. Autolayout to actually include the stroke when it's doing it's Layout. To do it, Let's select the parent shift into, okay, and let's go up to autolayout. Let's go to the Advanced Settings, and that's what this one is. Strokes included or excluded. You can see when it's included, it changes it quite a bit, might be exactly what you need. Now this is a big example of a 10-point stroke. What might end up happening is let's say you design something that has just a one-point stroke, okay? And you've lined everything up and it's excluding it. Okay. So it's ignoring the stroke you handed off to you engineer. They come back and say, I've lined it up exactly how you've designed it in Figma, you like, no, it doesn't, it doesn't line up perfect. What happens in web development or app development that the developer engineer, she has to actually include the stroke. There's no way of excluding. It. Might be just a little different. So you can mimic that. And in Figma by saying include stroke. For some of you that'll be super important and for a lot of people, it won't be. But this is the advanced class. That's what that thing does. But now you know, alright, let's get onto the next video. 138. How to set custom spacing in auto layouts in Figma: Hey everyone, Have you got an auto layout, but you need some custom spacing between a couple of them. Disclaimer at the recording of this video, there is no official way, There is hacks. There's three of them. They all kind of work. Let's start with the easiest. Alright, let's do it with text first. If you've got a bit of text going to turn it into a component, I'm going to duplicate it. Command or control DDD. Let's have five. I'll change the text. You wait there. Okay. A bunch of text. Let's make it an auto out shifting. Now we can adjust the spacing, but the moment doesn't matter what you hold down. You can't do separate padding at the moment. It's one of those other features that I feel like so many people are doing hacks for that, it'll be out soon. All right, hack one is I've got this instance in here. I want to space between these two, right? Is it's actually set to a fixed height. So I can actually say my tickets is bigger and you can have a space in there. There you go, hack one. For some reason my auto out is set to a fixed height. Remember how to double click it on the edge, okay, to get it to hug easy. So that's hack number one. I'm going to undo that, That works most of the time. Another one and really common one is to use an invisible frame. Okay, so K put at the height that you want, that's good enough for me. Whatever height that is, 88. Perfect. Accidentally stumbled across eight point pixel grid. Okay. And it has no fill, no stroke, but I can still drag it and put it in there and it keeps the space going again. I'm going to have to double click it to go to Hug. And then you can just use this, okay, to do your spacing. Remember, Shift is a really good outline view so that you can then you see it a bit better. You still need to account for this for the padding, okay? So if you need it to be 88, you've got a minus, whatever your space between here is a minus 2201, which is not great. Say it's 16. 16 at the bottom, 16 at the top, plus what's in the middle. That's going to give me my spacing. Anything wrong with that? No, not really. You can tie it in with a hack from earlier on. You can slick on this invisible frame K, hold down the command or control key. Remember up and down does the height up and down and you can just get it going. If you hold shift it'll do in eight point steps handy hack number three. What we can do is say you three are in an auto shift, you are also in an auto out shift A. Okay? So I've got the parent frame, but I've also got these two things on the inside. And we looked at this earlier. If I go the parent frame and I make it bigger, nothing really happens. Why? Because they're packed in there. Remember, there's an option for auto outs under advanced auto out settings. And instead of packed, we can go to space between. Okay, and we'll try and spread them out, everyone. Just a reminder that they've gone to move that remember from earlier on? Okay. So it used to be under here. Okay? Called space between. Now it is just if you hover above the vertical spacing. Okay, The gap between this one here, there's a little drop down and it's just called auto now. Okay, there you go, carry out. And these guys are kind of trapped inside their own auto louts, okay? And it puts in this giant gap in the middle. This one's handy because it will try and force itself down the bottom. So depending on what you're doing, this might work okay if you need this to be at the bottom. But if you want it to be a consistent size, you might want to look at the invisible rectangle or just dragging the size of that frame bigger and keep an eye out on Figma updates. I'll update this video if I can find a new way that Figma does it, but for now, choose one of the three hacks. All right, that's it. Custom spacing in or layouts inside Figma. Done. I'll see in the next video. 139. How to organize Components into groups in Figma: Hi everyone. In this video we're going to look at organizing our Components into groups we've kinda touched on already, sort of make it clearer. We're gonna be using this external Design Library, okay, another document, and we're going to make sure everything is nicely grouped into different sections. There's two ways of doing it. Let me show you the old perfectly good way and the new perfectly good way. Alright, let's jump in, right, let's start to tidy up our component taming. The moment we've got a mix of the slash naming convention and we started using Sections Plus was starting to use our other documents to hold our main styles. So let me show you the two roots and you can decide which one you wanna do is tidy up our emojis, okay? These are my main components here. I'm going to cut them, okay, maybe you have to cut, we're going to move them to another main styles document. We're going to paste them to make sure the connection works. We're gonna hold down Option three and a Mac, alt three and a PC. And we're going to publish those four changes. These emojis have moved. This makes sure that this original document right, and then naming get two options. We can select all of these guys. We are going to, instead of calling emoji smile, which came from the actual file names itself, we can rename it with lots of them selected. We can hold Command or Control R. What we're gonna do is we're going to say emoji is replaced with emojis slash. And we'll use spaces. You don't have to rename it. This, publish it. So everything kinda knows what's going on. And it means now back at this original document, when I am holding down my shift, I think you to my components. Let's have a look at that document that we've shared with this document. Okay, this is our main styles. You can see the emoji is in its nice little folder. There they all are for slashing is awesome. What's becoming more popular now is actually just use a section we did sections earlier. Remember the hiding under here, Shift S, draw it a section. And I'm going to name this one command or control are going to call this one emoji. What I can do with these guys is I can rename them and say actually where it says emoji, emoji space, forward slash space. I'm going replace with nothing and I'm just going to have Rename. It's going to pull all of that emoji off and then naming can come from this section. It's published those. Okay, go back to the original here and let's look at the library shift. I love a good our main styles and you can see here, same thing happens, okay, I've got this emoji folder. It looks exactly the same. Okay. And are in there, why is this better or worse? It's marginally better. It just means if I say I've got a button section, I don't have to name everything. I can just go Shift S section. This one's gonna be called button. This button and just throw it in. I don't have to rename it. I've got some icons down here. They've got that naming convention, icon slash, I'm going to remove it Command or Control on a PC. I'm going to say icon slash replaced with nothing. Shift S for a section. Let's command R, pull this icon, and then just grab these guys, throw them in. It's a lot easier to move them from one to the other. Because really that thing there's probably not button might end up having a tags section and I can just go drag this emoji section, okay, and it renames it and reorders it in all the connecting documents that are referencing this style, this one. There you go, the throne in. And it Double-click the edge to fit them all in, putting it in a firm. Okay, but now that part of this buttons subcategory, you can go further with a slashing name convention. Say that you've got these, but you've got two versions. There's one that a solid and one that has outlined. These are outlined versions that one's a bit of both. But let's say that I'm going to Command R Now, and I'm going to say this one is going to replace with outline slash and then current name. Okay, so I've got some depth in here, but the parent is from icons. And I can go into the weeds with this slash naming convention in here. Let's publish. I'm going to review all the changes. Basically they just moved around, let's accept them all. And now shift I have a look, its codomain styles and icons here. I have still got this extra level to go to Outline. Okay? And then here I might have a solid version. I showed you. This is cuz mainly at the moment, people are only using the naming convention and then just using frames for this outer wrapper here, because of the introduction of Sections, it allows us to group things quite easily and move them around from section to section rather than have to Rename and group rename stuff up to you how you want to tidy up your components. You'll see both around and occasionally you'll see this where there is a icon slash, current name. Okay, So now they have icon slash, outline slash magnifying glass. But because they're in this other thing called, let's call it Icon. Get a little confusing, not confusing, but over here now we'll publish. Review. Let's update all. Now if I go into my components and I go to my main styles, you can see I've got Icon Plus icon plus outline. Doesn't really matter. But that's what will happen if you're using a mix of the full naming from slashes and the sections on top. I'm going to remove those. Undo and publish. Now I'm going to have to work through my document and go through the assets and find everything that is used locally, find a home for it on my main component, put them in the right section. Or if you're not using a separate document, have it on a separate page and just move them all into that other page, into a section with some slash naming. Alright, that is it. I'll see in the next video. 140. How to create slot placehold components in Figma: Hi everyone. In this video we're going to make a slot component. What does it? Basically, we've got something that we're going to reuse over and over again. Like the outside of this modal is across this rounded corners, there's a drop shadow. Instead of having two or 100 different Popup Modals or sharing a lot of the same elements. And when you have to adjust, say the cross, but when you have to adjust part of it and then when you want to adjust part of it, you gotta go and adjust all of them. What we can do is create something that has a placeholder slot in the middle, this one here, then we can assign some preferred instance swaps, okay, so people can go through and just change the center of it. It'll stop people going and thinking, alright, I need to change this quite a bit. So I'm going to break it apart and create another instance getting all missing. So a build one from scratch, we'll get a little bit lost together. We'll fix it again. Then we'll have this sweet slot component where only the center part changes, not the wrapper. Alright, let's jump in and do it. Alright, so I've got two separate modals. I've made a modal section for these guys. Okay? And what I'm gonna do is I want to get it set up first with just something in here, and then I'll switch it out to the placeholder afterwards because I want some actual content and it might be using to kinda get the padding and stuff right. So for this to work, the parent needs to be an order loud shifting will make it a component because that's what we're using this for. Now it's in modals. I'm going to call this one Popup. This crosshair. I'm going to say you are absolutely positioned where I'm going to drag you to overhear. I'm going to make sure you are in the top right. Now the padding, I'm going to increase all the way round. Who remembers the shortcut? Will you do hover above it there and hold down the Option key on a Mac, alt key on a PC, make sure you're zoomed in front off so you can actually get the line hold Shift as well. And it will do all the sides. I'm gonna go mask can be quite big. I'm gonna go up to 40, remember multiples of eight. Alright, so what I'm going to do now is I'm going to get this stuff and pull it out. Okay, I'm going to pull it out down here. And inside of here, I'm going to put a slot component. The slot component needs to be its own main component. We know main components can't live in other main components. So I'm gonna say frame, I'm going to Control or Command R, and I'm going to call this one on my slot. Now you can call it anything you'd like. There's no official rules to it. But most people DO though, is they'll give it a stroke. They'll make the stroke pink. And they'll go to the Advanced Settings and change it from solid to dash. You didn't have to do that, but Everyone seems to be doing. Does it need to fill? It can do. What size should it be? It doesn't really matter because it's gonna get switched to something to hold our modal open when it's hugging it. So this needs to be a component. So I'm using my shortcut Command Option K Control Alt key on a PC. Just a reminder, and I'm going to drag an instance of this, okay, over here to get into this and just make sure that this pop-up modal is hugging both ways. Now, we're going to make the bits that go inside of it. They don't need the external Chrome or on this modal, okay, these guys here just need to be components. We're going to use the Instance Swap. So we need to make this a Component Command R. It's in the modal section. So this is going to be email sign-up. This one over here. I don't need the modal. Okay. That was just there for design because I wanted to switch inside of there. This one's called delete. Yeah, we're not. You can come modals. Let's get big enough. You're going to come in here as well. Make sure it's a component and the slot, we probably will keep that somewhere else because it's not gonna be, you can use this in anything we using it for modal, you can use any element K. Is this going to work? Let's give it a test. Actually know the main component here we need to add the property, remember Instance Swap earlier in the course. So this component here, I'm going to say under properties, as you know, I'm gonna do it for this slot. So select the slot inside of it. I would just say slot. I want you to be able to be Instance Swap. What do I want? I want you be able to swap with the preferred values of not everything, just my sweet modals option. And I want just delete and sign up. Close that down. Now is it going to work? Let's switch to my assets library option to have a look at our components where we got modals. We're going to say, I want this pop-up on this document here, go into it, select on the slot and say actually, I'd like to change it from that. Pause the video, stearate for a little while, realize my preferred values on, in their, realized what I've done included in the course because it's probably going to happen to you. Is I went and did all that whole stuff. Instance Swap. And I did a list and I hit cross instead of create Property. Don't do that. Okay, so let's fix it up. So I'm gonna say you and you create Property not cross. Now should be able to click on my parent modal, okay? And they're inside of it as an Instance, Swap K with some preferred values, okay, and I can switch this out now to what everyone I want except that one's broken. Great work. Then you get the idea. Let's leave that the ignore that. Okay, it actually switch this to the other one. That's the goal is that I have this full control now of the pop-up modal and the elements that are generic for lots of different stuff. If I come back and say actually I need to adjust the padding. Okay. I can do it to this one. Okay. And they all adjust. I don't have to go and adjust the team. Different modals that I've got for popups. You can have more than one slot. We've just done one here. Alright, let's figure out what went wrong with this one. I think I know what it is. This is not an auto layout. It is just two bits inside of a component and they get thrown into here and autolayouts. The autolayout just smashes them together. So I'm gonna say as you are component but also shift a in order loud. Now hopefully over here, if I switch this one, you need to be. There we go. Alright, that is a slot component and how to break it a couple of different ways and fix it again, the big things that will catch you out is that the things inside, including this, needs to be a component and an auto layout. And because they need to be main components, they can't be inside this original one. You need to make them outside here, bring an instance of them. And then when you're ready, click on the Instance that you want to swap, okay, in our case the slot, do the Instance Swap property, make sure we hit Create property and not cross. The other thing we might do is add a bit of text to this slot, or is it okay, so we might go inside of this one, grabbed the text TO and call it S1 placeholder slot, just so that when people are using it kinda gives them a bit of acute to what we're doing. You get all sorts of notes in here. I think we'll do before we go actually is let's publish it because I want to use it back over here. Okay, so I'm in that kind of main style design file. I've got all my components. I'm gonna go option three, Alt three, and a PC. Let's publish all the things we've done. And because we've already connected this design file, we should be able to option one, option to, to go to the essence, or you can go up here. And let's have a look, not the local components. Let's have a look at the main styles and ways memorials there it is there. It's grabbed the Popup. Then me or somebody that's working with my design system can go through and say actually I want to delete. Actually, no, I need the e-mail sign-up. It's a bit big Dan, you go, alright, that is it. We made a placeholder Swap Component. I'll see you in the next video. 141. How to convert an existing website into a figma design: Hi everyone. In this video we're going to look at a really cool plugin. We're looking at the EPA website. Are we looking at a Figma file look Outline View is a Figma file. Will it text is editable. What does it good for? It allows us to throw in any URL and it will try its best to convert it into a figma file. Great for those projects where you weren't involved in the initial design. Maybe it wasn't even designed in Figma. Maybe it was Photoshop or Illustrator or Microsoft Paint, something else. And you have to go and start recreating pods. In this video, we go and grab that button there. We make it a cool photo layout, convert it into components and start using it in our process. It's also really handy for going in borrowing images, pulling out colors, icons, logos, general, all realm cool fund tool, the tools called HTML to design. And let me show you how to work it. Alright, to get started, I've just got an empty document. It's and drafts. I'm going to open up the plugin. The one you're looking for is something called HTML to design, hit Run. There is a free and a paid version. I'm going to go through the version of free that is available to me now. Probably changed by the time you get to it. I'm going to use apple.com. You can type in any URL you like. You can ask it when it's chicken the website to ask for light or dark mode and what size? This is not coming directly from Apple. It's just saying, Well, would you like us to try and load a tablet size version of it? Does your website have a version that has tablet? Does your website have a tablet size? It does. Well, at least Apple does. Okay, so pick that, then hit Import and you can type in any URL. You can see here that some of the upgrades for Pro, but we can get a lot while we need and the free version at the moment. Now, depending if you have the fonts like we looked at earlier, you can go and download the fonts if you need them. Okay, I have a bunch of them have the helvetica that I need. And now you've got to prepare yourself because there is amazingness and then there's stuff that isn't some amazing things that would be useful if I needed, let's say the logo. I can remember Command or Control, click and click into stuff. I could easily copy that and paste it into my other document with all my logos, maybe a master components. Okay. There we go. We might have to tidy it up. No one's come through really nicely. Other things that might be more painful. Let's say I want this button, okay, so I can keep clicking and just double-click the few times I've gone inside all these Div Tags, found the button. Unfortunately, if I keep going in, this is actually not text, it's just a shape. Then SVG. Why? I have no idea. I would assume it would have been text on the website, but apparently see the plugin or it's Apple that are enduring it as a vector and not actual editable text. The useful bits is images. Okay, I can Command, click, Okay, find that image. And I can say, let's export what I've got selected. Let's preview it as a PNG JPEG. Sure, hit Export and we've got that image, or just copy and paste it into a different document. Supercool, other cool things is you can start rebuilding some components. So let's find a button. It's use this one here. I'm kinda come on, click the outside. So I kind of grabbed the wrapper of this thing. Maybe you can drag this out. Okay, I'm going to copy and paste it. It's just, I've got my own version over here and we'll see how good this is. There are going to be times where it's just easier to rebuild it. And we're gonna be times where you can just use this plugin to get you close enough there and there's gonna be some Tidying up. Now, first of all, I want to check if this is Text. Perfect. So it is death is Text. Problem is it's not autolayout. So I'm going to select the parent shift a for an auto layout. It skipped a little padding. It looks great. The only trouble is that this isn't lined up in trouble is this thing here is kinda trapped in some sort of weird mask. So I could turn club contents off, might get us there. What I might do is actually just use remember all the keys plus resize to fit Command Option Shift, Control, Alt Shift on a PC, and it will just redraw around the outside. And that's kinda lined everything up nicely. To have a look at the background, Scott ginormous, rounded corners on it. That's fine. I can turn it down to two or 20. Okay. So I would say that this was worth the effort of grabbing it through the plugin because that made me a little bit just to kinda get it ready. You can see how amazing it is for website that you've inherited, you might have turned up with a job. Nobody is using Figma, or at least it was designed and say Photoshop or Illustrator before anybody was making components. We just can't find the files anymore, download it and start recreating them. If nothing else is great for grabbing logos, icons, colors, and recreating some of these components. Alright, that's it. The one warning is, I've made this feel like it's perfect and works really good. Works pretty good on the Apple site and a few sites that I've tried, I've tried other sites and adjusts. It's actually too hot. There's just fits are broken up and the depth of all of these layers here a little confusing, but I feel like you might be at a point now this far in the advanced course, we actually know what I'm doing. This is super useful, alright, that is it. I'll see you in the next video. 142. How to make a drop down using overlays in Figma: Hi everyone. In this video we're going to make this look at this. It's a Dropdown menu. You can hover above stuff. Fancy. You can go to different pages of giant page two, it gets better. We're going to have a second level. We can go to More Options and look, there's a second level. Now this particular method, there's a couple of ways of making dropdown menus work in Figma, this is, this is probably the easiest way. We'll do another one in the next video that's slightly harder but a little bit more robust. You'd use this one to get started, okay, and it's really good if you've just got one or two minuss, want to add a bit of interactivity to this particular method uses a bunch of open overlays where we just have a menu on the side and we just open it in a position underneath the button. So nice, easy way to get it working. Alright, let's jump in and trout works. Alright, to get started, I've created a new design file and just to keep it separate from everything else because it can get a little messy, confusing. And I've created three frames, a page one and page two. I'm using a desktop view mainly because in this dropped it. Like I said at the beginning, there's a hover action and you can't do a hover on a mobile device, but people wanna do it on desktop. So that's what we're going to preview on and we'll have all components here. Okay, Let's make two buttons. Okay, I'm going to use the Type tool, click once, some reason using diets, some reason I'm using giant text. I'm going to make mine more appropriate. Scape shift aid, make it a autolayout. I'm gonna give it a background color and some padding. You idea? Because there's nothing fancy about it. I'm gonna have two of them. I'm going to have my filter and when you click it down, menu item, this menu item because they're gonna be lots of different links. And at least puts a type, I'm going to say, I want it to be a fixed height and width, okay? And I want this one to be 180 by 48. And I'm going to make sure it's kinda line to the center of my autolayout. Not important. Actually run the middle. There we go. To autolayout. That is it. We should make them both components so we can easily update it later on. Okay, So create multiple components, not a set, not anything else. Rename them both. Command R, One button, Shift Tab to go to the next one and you're going to be called menu item. Alright, so what I wanted to do is this filter. I want to grab an instance of it. Actually, this filter, when it is clicked, I would like to open up a bunch of these. So I'm going to grab some instances of it, okay, and grab one, I'm going to duplicate them out. Command D, D, D, grab a few of them, select them all. And what they need to be is they need to be in a frame. Remember when we did overlays, we click on the button, say open Overlay, and it says which frame do you want. It doesn't say which group of instances or which stack of them we need to group them all together. We need to bring them all together in a frame. So that's Command Option G. To make it a frame, just give out frame and name. Let's call it list one. The thing with overlays is let's go back to this button here. So this kind of we used just will move him down either way. We use them so that we can update him and he updates all of the items. Okay. So that's what he's for, but let's forget about him sneaking down there. What I want to do now is a this button. When you are clicked, let's go Shift a to go to prototype mode. Say indirection is going to be when it's clicked, I would like it to open an overlay of which I can't see what kind of see this one called list1. Okay. Overlays have to come from no man's land. They have to come from outside of another frame, so it can't be nested inside of it. Let's put it over here. Now, I can say, I want the interaction on click. I want you to open an overlay of Which one there is one. Where do I want it? Let's go Menu and then let's just move it around where we want it. I'm going to have my dropping out the bottom. But yours would you like? And we're going to have the closed when clicking outside. So we knew but he just clicks around, it closes up the unofficial way to escape. I mean, you Let's see if that works. So I'm keeping my components over here. Let's drag out version over here, okay, on page one. And I'm, and I've got a flow going on this one. If you don't say you have a flow on this page so I can preview it again. Hopefully, I've been there for reset. Anyway. I click on this. Hey, look at this. I'm gonna mean you click, click, click. That might be all you want. Why? If you want a hover board, if you want to connect it to a page, Let's do both of those as one-on-one. I'm going to go back to my main component. As you know, I'm not, I'm gonna go to this menu item here. And let's add the links. I'm going to say when menu item go to design mode, you can have your item one tab down to three. You go, I've changed the names now I'm gonna go back to prototype mode. Say when this one is clicked, go to page one. This one's clicked. Go to page two. I'm going to make sure the filter is on both my pages. I'm going to copy it and paste it so that when I preview this, I should offer refresh, go to Filter, page to page one. Here we go. We've got a menu that works. We want some hovers because hovers are what menus do normally. So that is why we've got this main component here. This one here we can say I want a variant, okay? And I want the second one in design mode to be fill of this hue saturation brightness I'm gonna hit Shift Down Arrow to go down my brightness. Okay, make it a different color. It's not going to quite work unless we add our prototype and directions. So switch to prototype mode to say when you are what clicked, note while hovering, change to property one variant to. It's not quite what we want. And we'll use dissolve. Same thing here you go back that way, it'll work. We've got some terrible naming. Let's just prove it works first test, test, test. Okay, Let's have a look at us. Awesome. Well done us this name, these variants properly. I have been using the design mode and using this option over here a lot. What a lot of people do though, is I'll double-click over here and say state equals hover. Tab, tab. The state equals default. It depends, like if you're more of a Web developer, you might do it that way. Or if you'd like me, I end up doing it this way. Clicking on properties, give me the state name and then doing it this way. And then getting really OCD and go default should be above Hover, makes no difference, except that's the order that they are visually. Anyway. Now, just double-check, we haven't broken anything. Nice. It's still goes to the pages. Alright, That my friends is the first level of Dropdown menu. Now if you're like me and everything's working, you're like, how proud of my this next step will probably break it. So what we're gonna do is go show version history. So have nothing selected, hit escape, escape, escape. This little chevron here and say, I want to show version history. Let's save one little plus button and we can add this one. Before I went broke it jaws so that we can come back to when it was working and give it another go if we break it, why do I do that? And I haven't done it before, is because you'll probably end up breaking it. It's tricky to do this next step now, trying to explain it nicely, alright, so what we want to do is basically do the same thing. We have this MainComponent here when prototype mode, when it is clicked, it has this menu dropping out. What we wanna do now is we want to do the same thing. We want to find this menu item, which is this little component down here. And when it's clicked, have another option I don't wanna do to all of them. So what I'd like to do is down here and I give ourselves some room. Is I want to grab this first one command or Control D, duplicate it. I want a third variant. Name them. I've got Hover default and we're going to have this one cold state equals state three. We'll call this 1. S level will change the name of it to make it clearer. We'll call this one more so that you can click on it. We'll put arrows on it as well in a bit. But you know that you can click on this and you get another level of menu items. Okay? So what we're gonna do is duplicate this list, okay, so that's how kind of like level one, Let's duplicate it. It ended up very far away. Go over there. Okay. It's automatically called Atlas to which works for me. Let's rename these to make them a bit clearer. Alright, so we've got this list that's going to appear over here. We want to say, I'm prototype mode, not hover. We can do both of them. We're going to say, when I'm clicked, I would like to open up overlay of L2. I can see it because it's all the way adhere. It's not nested in another frame. Where do I want it? Over? Here to the side, slightly different place than the last one. Close when clicking manual, looks good, is it going to work? Not straight away. Let's have a look filter. You jumps to the pages. I can't see it here. Why can I see it here? I can do is on list one, I need a switch at one of these, my more one. Because there were variant a should be able to go through and say actually this, just click on this one. Go to Design View and say, Yes, I want it to me. Menu item, which is this thing, is like components have done here, but not the default one, not to have one. But the second level. That's how we doing in sectioned man is weird to me a few times to record this in any sort of like non pulling my hair out, what's left of it, but let's give it a go. So filter is going to activate this one of the items in here. This one has some special ingredients where it shows us the list here. Let's give it a go. Pre-set filter. More, plug it. Look at us, we're doing stuff. Now of course we go through, and when we click these, go somewhere, the moment they're not. But we learnt that at the beginning. Alright, house rules going. If you need to go back or maybe you can go into here, show version history. Go back to before I broke it. You can click on this one and say wait for a second, go to there and say restore this version. It's not what I want to do because mine is working. There you go. Other things you might do to tidy it up, just moved it around and resize this to make it look nicer. The one thing is, is we can have a hover on this option here. Because at the moment, if I prototype and I say you want also a hover, Let's make a duplicate of this. Has changed the color of it real quick If I say Shift E, you go there. When hovering, change to state four, I should name it. But also do the clique. Can you see to get this a little wanting to say you can't do both, you just kinda like hover above. It. Says indirection cannot be triggered Wilson other ones triggered first. So I can't make both of those work. I used to be able to just both work. I used to be able to change the layer order here of these, but I can't make it work anymore. You might try it and I might try and do both. But for the moment, if I try it, filter, Hover, hover works and I click on it, all the both working again. If I close it down and reopen it up, alright, it's working again. I'll leave that in the course because men, it used to work. And then when I was preparing for this video, I couldn't make it work. Did the exact same thing, I swear, but then just couldn't make it work. So hey, how it says it shouldn't, but it's working now. There you go. You might have more problems, problems. And the other thing I wanna do is I am going to add a little chevron there so that people know to click it. Okay, I'm going to shift click all of these to say actually left align them because I want to put the little chevron and I'm going to open up a plugin, okay, I'm going to use Iconscout, like to toggle between all the different icon plugins I use. I'm going to use error. And I click once SVG insert in mind is kinda randomly put there, I want to grab the outside frame of it and it makes sure it's the size of needed to be. Actually, let's get it to go right around. And actually that's a pretty good size. Do you think it's make it a component? Let's grab an instance of that component and let's put it in with my autolayout. And depending on which way you want it, you might, instead of having four arrows, you can just go rotate this 90 degrees with you or dropping down or pushing out. Like over here. It is dropping down, but that way is pushing over some this one here we need to make sure I'm gonna go centered, maybe left-aligned. Same with this one. Okay, this one's already sainted. The only thing with this is I probably want to, on the outside, it's all kinda squished in the middle, even if I go center, remember that trick we can do to push them to the outside to kind of like space the middle. So under here, under autolayout, instead of packed, we can go space between. That was the word I wanted. I'm gonna do the same thing and I grab you, copy it inside of this graph, the parent go here, say packed space between. You shouldn't do this at the beginning when you're creating it. I just didn't want to add too much confusion to this video. Let's go, let's reset it. Filter. More. Look at us doing stuff. Yes, not very pretty buttons. They're working for us. Alright, that is gonna be it. That is one way of doing it. Remember this way he has just really good. If you've got one or two menus, you need to kinda just prototype. It's quicker, it's easy to understand the next video, but the next one's a little bit more robust. People can build more components sits for a bigger design system. Yeah, let's go into that now. 143. How to make a multi level drop down menu in Figma: Hi everyone. In this video we're going to make this tiny little button. But look what happens when we click it, it Dropdown and look, we hover above stuff and look at this ready mind-blowing. There's a double dropout menu. Some might call a sub-menu multilevel Menu. And when we click on stuff, we've got a page to exhilarating. Now if you've done the last video where we looked at a different way of making a Dropdown menu. We end up at the same place, but we use a different method ticket there. And it's important to learn both. It's both good practice for us learning ear and the advanced course, but it's handy when we using other people's work, they might've gone about creating dropdown menus and different ways. And if we know both, we'll be able to easily update it or make our own. Now the last video, I said that this method was a little hotter than the last one. I'm not sure it is. I think I've got better at explaining it in the second version. So it seems about the same up to you, which one you use. Alright, let's jump in where I liked before. I've got a Components page and I got two pages that we can kinda jump between. I'm going to start with the Type Tool, Tiki, Filter button, ginormous text, or down. I'm going to escape on my keyboard to select the whole thing, shift a to make it an auto Layout. I'm going to start a little bit new idea. Okay, so I've got a buttons and actually button it says in order frame, I'm going to have another one before make it a component because on them to be separate components when he is going to be my menu item. Because they're going to have different amount of texts in them. I want them to be a specific size, not the text. I don't want to change the text to fixed width. I want to use the parent to shift into, okay, I don't want you to go fix width and I'm gonna be 160. Left aligned is fine. Alright, So all these both to be separate components. So create multiple components. That's the name, the right command or control, or it's gonna be my button filter. This one here is going to be my menu item. Alright, so here's the big thing we are going to make it. We're going to leave this, okay, these are our main components. We're going to use instances of these from here on. Okay, So you guys are helpful but you can go away. Okay? So I want this, it's an instance of Button filter. I want to stick it inside of another component. Let's give it a better name, is gonna be called drop down. Dropdown. I can spell. Oh, why can't we go dropdown menu. This one's gonna do majority of the work we want to variations. This one here is going to have some of this going on. So again, I don't want the main component in here. I want the instance of this. I'm going to make an instance holding down my Option key on a Mac, alt key on a PC. Then I'm gonna drag it in here. Okay, And where's it gonna go? It really didn't want to go inside of my dropdown menu there to zoom. So you can just drag it and try and get it in there. I want to inside a variant to, that's really where I wanted this name, these. Okay, I'm gonna do it over here because that's why I prefer. Okay. This is going to be struck down. Oh man, typing today. Okay. And I go tab to Variants. I'm going to have closed and Tab again open. And I'm going to change the layer order for no good reason other than closed is on the top and I feel like open should be on the bottom. Inside of open, I've got two options. Now, these two instances of these two guys at the top here are wrapped up in this parent here, parent frame, which happens to be an auto layout. This is up to you whether you want to keep it in order loud, because it might be helpful. Let's say this vertical layout is actually quite useful and at the moment or the wrong way round. So I'm going to click on Filter and go, you're at the top. And then these, I can go Command D, D, D, or Control D, D, D, the parent Shift Enter. It doesn't have to be an auto layout. You can go minus and it will still work. You just come in now you can mainly move with them to where you want it to be on leave mine as the autolayout because it's kinda helpful. So I'm done. Alright, so now we just need the indirection. So this top one here is Shift E, Okay, I'm going to say you go to the ER when clicked change to the Dropdown of open and Filter button here. When you are clicked, go back that way. Go back to closed. Let's give it a test. So I'm gonna do, is I'm going to drag an instance. Notice that none of that these guys go down here. You are the boss. You're doing all the work. You want to instances of this. Okay. Let's preview it. Well, it work. I don't know. I think it should. Page one by click on this. Hey, it works. Here we go. So there's a Dropdown menu. I'm actually thinking which way is harder now? Is it the overview way or this way menu? It will learning both of them because you'll find both of them online. No right or wrong. I'm sure there's about ten other ways. Lids fancied up a little bit with our hover. This one here is a MainComponent. I want to variance, I want the second variant, Shift E to go down to Fill, click on HSB. That's so I like using this last one hold Shift, hit down to darken it up a little bit. I've got to one Dark, One light. Let's name them. Let's click on the parent, Let's click on the variance, and let's call this state. And we've got default and hover. And we're gonna go to prototype mode and say you, when you are on hovering, change to hover. And you go back to this onclick change to default. Nice. It should work without any other hassle. We go Nice. Now, this is where it gets confusing. We need a second option. Okay, so we need that extra Dropdown if you just need that, your job is done. Obviously, we need to go through and say You actually over here, this one here, oh, pen design. Let's go from closed to open and say when you clicked prototype mode, I'm gonna just kinda say as another interaction other than hover. When clicked, go to navigate to page two, because already on page one, Let's give it a test. You page they both called page one. They are both go page one. There you go. You like it didn't work then? Because I called them both page one. Now let's give it a go. Using my left arrow to go back off or refresh. Didn't refresh it much at all. This first option should go to page two. Here we go. Nice. What I might wanna do is by default, close that down. Now. Copy it. Paste it over here. Alright, we style a buttons. Change the writing over here, okay, instead of saying menu item, you can have the different pages of categories. Change mine. Alright, there my ones. We go. Okay, next thing I wanna do is add that second level. So what we wanna do is you basically want to recreate this kinda contraption here. We'll reuse these because these menu items, you could have a second set of these, but they do what we wanted to do. Basically, we need to recreate this. So we need to first button, not an instance of it. We need to break it apart. It's Command Option B, Control Alt B is Rename it so we don't get too confused. What's called this one other, change the ticks in it to say other. You can see over here in the Layers panel I'm just tabbing through. You can kinda tab through the menus which is handy. Remember, they didn't change it at all. There we go. Dot, dot, dot the label and the text. Okay, so we've got this, it's an auto layout. Let's make it a components so we can control it. And now we need to do the same thing as we did before. Let's duplicate this. So I've got an instance of it. We don't need that anymore. That's just my overall controller. This instance though, can be inside of a component. We do that because we want to variants of it. This variant here is not going to change a whole lot except we're gonna do the same thing as this. I want one of these menu items. You could create another set of menu items if they needed to be functionally different. But I'm going to create an instance of this one, okay, not a new component, just another instance because I want to use these on all of them and put it inside of here. And it won't go inside. It's ended up hanging out here, not inside of it. So let's have a look at naming first. So with this selected, I'm going to go Property, this one's going to be secondary dropdown. I'm going to have to I'm going to have closed and tab open. A little bit more sense. So I want this, which is not in anything to be inside secondary, or is it there? Inside my component that I made that are called other, I actually didn't call it, it just got it off that original name. So let's rename this Menu button. I want it to be inside the open option once we the other way around. So you're on top. This, I want to be Command D. I went the wrong way. It's an auto layout so I can't move it to sometimes the autolayout doesn't suit us. So I'm going to click the parent, Shift Enter, grab that whole group. And I don't need it to be an auto layout because I wanna do a cross and then down, okay, It's not like just one flow. I ended up. Drag out a few more options, however many you need. You can shift, select them all and say, oh, look, some of them ended up way out here. You get in there. Actually, they need to be in with his buddies there. That's probably what's going to cause you the most problem is that you're doing things and dragging them and duplicating them and ended up outside of where they need to be either outside of the components set like it did at the beginning, or it's going to end up outside of the variant open. They're all in the now. Because I'm weird size and going on, remember Command, Option shift, all the keys plus R. That's Control Alt Shift R, wrap it around at least. And that's going to Eric it as soon as we select all of these, I remember quick keys. Let's use pack vertically. Now it's the wrong size. Alright, we got on a phone a bit of a tangent there. Basically what we've done is remade this. We took an instance of this button. There it is there. We made two variants of it. The second variant here, we grabbed a bunch of the menu items and we throw it in. We just make sure it's inside of the variant that we named Open. And now let's taste it works without connecting it up to that first one. So I don't wanna do is remember, this is the boss. These two guys were helpful for controlling the style of the buttons, but the mechanics are happening with these two groups here. Okay, So you want an instance of view. Let's put you over here. If you work, we go refresh. It's not working. You know why it's not working? Because we didn't actually add any interactivity. So in my prototype, you go to their onClick change to open this button here. I don't want to do it to the whole group when it's clicked because I want these menu items to go somewhere else. But when there's other, other button is clicked, go back to this first option. Let's give that a go. You get it works. Now we need to tie it in with this. So what we need to do is we need to go over here to my first list. This menu item here, we need to switch out. I could grab this copy, go to this one, and go paste and Replace command Option Shift V, Control Alt Shift V. Wonder why I made it too small. That's okay. Flux in a second. But now that would trigger this group. This guy will trigger his another group. I think let's give it a go. You know, you filter, go down to Other. And there's my menus that what am I do is just make the original 160. That's why I've got this. So you're gonna get you and not hug your fixed EUO 160. What are you broken up here? You fit, you fit. Maybe the bees need to maybe just move over a little bit as well. Hopefully over here. I don't need that one. Just needs to preview this one. Boop, boop, boop. Here we go. Let us. Now you can spend some time going through and saying actually when this one is collect in prototype mode, where does it go? It's going to go to click and go to page wherever it needs to go to. Navigate to this other page that I've made, right? Page one. Filter, other menu item, page two. Alright, So how's he hid, wrecked after about a dropdown menus. And if you do find it a bit tricky, often what people will do is they weren't actually build an interactive dropdown menu just to be something that looks like it. So I'm going to drag this out and break it apart. And they'll just do this, they'll show this plus this. And then they might have another menu just destroying my design. Copy Paste this, you guys out of there. And I'll just do this to show a Dropdown menu. Because the developer building it, we using JavaScript probability to build your menu. And I just need to see the visuals for it. And your stakeholders might just need to see what one of your menus looks like. Dropdown game, I have these other buttons and you're just showing how, for instance, this is how this works. And that's it. There's no components, no instances, no swaps, no variance that just show this version. But it is really good to show in those kind of prototypes and interactive version rather than just aesthetic one. Alright, that is it for the other way to make dropdown menus, whole lot of similar components, but a different implementation, no right or wrong. And you will find stuff in the community that uses either version. And it's good to know how they're made so that you might be able to use somebody else's work and make it work in urine. Alright, that's it. I'll see you in the next video. 144. Class project 17 - Nested Dropdown Menu: Hi everyone. It's class project time. I want you to make it Nested Dropdown menu. I don't mind how you make it either. The last two methods we looked at, but it's gonna be the tricky one where we have an additional sub-menu. Okay, so do the first one when you click on a button that drops down, but they don't want to see one of the items. Be able to expand to show you another menu. Just in case I'm explaining it badly. This button with menu, with other menu that pops out. What I want you to do is you can create it plainly like I did, but I'd like you to look and do a little bit of research into dropdown menu UI. That's the term that you'd put into the various places. I've shown you a few places to look earlier in the course like this last link up here, K Dribble Behance, screen lane, page collective, mob, and there's lots of places you can check, even a Google search just to get an idea of how you might do use. In addition, if you've already made a Dropdown menu in your life and it's structured a different way. You think you'll way is different or better, or parts of it a better. I'd love to see that version as well. Show us that in the submission and let us know in the comments as well. There's more than one way to make a Dropdown menu. Okay, take a screen video of you using your Menu and then upload the link to the Assignments section. Share on social media, hashtag it with Figma Advanced and make sure you tag me in the various places. And of course remember to comment on a couple of other people's work as well. That's the minimum. You can comment on some of the work, but at least two. Alright, Have Fun and pain. Making Your Nested Dropdown. If you do run into trouble, put your notes in the comments. If you did do it, check the comments and say If you able to help someone, I'll try and jump in there as well. Together, we'll make a Nested Dropdown menu. Alright, That's it. Enjoy. They're not homework. I'll see in the next video. 145. How to create a hover grow effect for images in Figma: Hi everyone. In this video we're gonna do this kinda like Hover thing where they fade in a little bit and get a little bit bigger when you roll over the top. Why is this video so long? Is because I want to show you something where we make it really easily, but then we want to keep adding stuff. We wanted to fade as well, as well as grow. And we want to be able to go into this, open up a plugin and just go and quickly say, alright, I want a new set of images that we're all going to be male and hit Apply all. It's going to say, would you like apply to the image section that they all update? Maybe the text needs changing. Okay, let's change anybody's firstName or first and last name. That's click Apply all would you like it to apply to the Component Property named artist's name, you're like, Yeah, let's do that. Same with the country as well. And we want it to all work with finished. So I want to take you through a little bit of not only just we'll do the image Grow thing at the beginning, that's really easy. But what I'm gonna do is keep adding levels of things that we wanna do. And we're gonna keep bumping into problems and try and problem-solve together. Because sometimes this course can be a little bit like, hey, this is how to do it. It's super easy. Why aren't you doing it so super easy? The truth is, as I end up building something the way I think is good. And then I kind of like, oh, and I also want to do that and it breaks the other thing that I made me like he okay. And then you're like, oh, I also want to do this and then I want it to be really easy for other people to use. And you'd like, you end up down this rabbit hole of doing it the easiest way you think, then adding a little bit more complexity, breaking it, fixing it. I guess this is more of a real-world approach to the way I work when I'm building out components in Figma and I've talking, it's already too long this video, but I hope you enjoy it. Ms. Jumping. To get started. I've just got a frame that is the square root and a frame here that you can see as an auto layout. And I've got some text inside of it to separate text lines. Hey, add his name and country of origin. Alright, let's get started on our journey. This one here, I'm just going to put in an image. So I'm gonna go to Fill, I'm going to go not solid. You are image. Choose an image and you exercise files. There's artist 1.2. You've got to bring it out. Just one. Okay, It's gonna be good. I'm going to make a duplicate of this because I'm probably going to end up making another version at some stage or my habit anyway. Alright, let's convert this into a component. Let's give it a name, an artist, okay? And what I want to do is have two variants of it. And this bottom one here, I'm going to use the trick where I can go inside of it, Option double-click. I'm going to switch it to crop and I'm going to try and find the edge, which can be tricky. Hold down the Option key on my Mac, alt key on a PC plus shift. Okay, I'm just going to scale it up a little bit and see how this goes. Let's try get an instance of it. And I'm going to preview this and it's not going to work. Why not? That's right. I haven't added the interactions. Okay, so that's my first little problem. So I can do that. Shift E, you go to their on tap while hovering. I would like you to change this variant to its name covariance. As we go. Let's click on the parents go to Design. I'm going to say in the settings here, this is gonna be my state and there's gonna be default and a hover. Now going to preview it and see how we go. Oh, look at that. The one thing we just need to make sure is happening is with the interaction, is that we set it to smart and Animate. I've changed my gentle CO, Alright, so let's job done, right? The problem is going to run into this when I say actually, I want multiples of these, long as you say you and then another set, what would you from having their duplicate went a bit crazy. Okay, So got a bunch of these. I'm going to select them all. I'm going to use plugin. I'm going to use the one called Content real already had it open, which is Command Option P, Control Alt P on a PC. To open the last, use plugin using content real because it's really handy. I'm going to hit image and I'm going to say, I would like a bunch of photos apply to them all. And it's going to say Select Layer and you're like, Oh, wow, alright, Give that a go. I'm going to say this layer. Here we go. Apply that one. Can I do multiple ones? Yep, hold Shift, Shift and Command, kinda dig in and grab all of these and now we're going to play them all. Excellent, Now a token. So I'm going to preview this flow here. Oh, first problem. Okay, So you could go back to here and go to this option and say actually let's copy the properties. Remember Command Option C and then Control Alt Z on a PC, I can say actually you under design have another state of hover. And then I could go into this and then paste that state, which has those same two shortcuts plus V. And now it's going to work. All badaga scale that one. Now. Of course it ourselves. We run into a dead end. I'm gonna show you a way to get rounded. Not so much like the official way, but just bumping into problems Fixing them as we go, you might find that that original option that we had just scaled up and down with one person is perfect. You scale each of them up. What I wanna do is I want something where when I update one image, they both update. Basically what we want is we want something inside of here that is on both of these, the moment these are two separate images, we want to make this a component, have two instances of this. So that's gonna be the fix. So LEDS, it's hide you. I'm not sure we need you. What I wanna do is I'm just going to double-click on this, drag out a version of it. Okay, it's not an instance, it's not anything. I just kinda dragged it out because I want the shape and I'm going to convert this into a component. I'm going to rename it and I'm going to call this one hitch up. And then I'm going to drag out an instance, copy it. And I'm going to say you paste them, place It's Command Option Shift V, Control Alt Shift V on BC. Oh man, shortcuts at the same for this one, so that these are two instances linked to the same component. I don't need you to. Instances are the main component. It's kinda be hopefully I'll work around when we update one, we update both. Let's see if that works. Okay, but to trial and error, selected them all. I'm gonna say Open Content, real images, probably going to say photos. Select the layer. I can do that. So Command and Shift, and I'm clicking all of these command shift, that's Control and Shift on a PC. Okay, apply all. It's not liking it like it used to. More problems because it can't dig into the fill into our instance. We can do though, is instead of this just being my boss told you that it's kinda like two ways of adding images. You can it be a fill or let's get rid of that. It can be an image that sits inside of our frame. So let's bring in an image. So I'm going to bring in artist, I'm gonna bring it out as two. Now. I'm gonna hold down my Shift key to make sure it's the right size, appropriate size. I'm gonna put it inside of this. The difference between this. Often when we're doing some complicated images stuff, It's nice to have a frame with something actually tactile inside that we can scale and move around and do stuff. Let's see how this works now. First of all, let's see what's happening. Nothing's happening. So is my Hover working? It is, but there's just no difference between the two. So what I'm gonna do is I'm gonna go inside of this one, inside of the head shot. Okay. And in this there's an auto S1 and can I just scale it, say K? And because inside of the Instance, we can't scale it. More trouble. Let's try the parent. Let's go Shift Enter. Okay, to grab the parent, maybe just scale that up so the keto, you totally can 1.05 bit bigger. Let's see if it works. First of all, Hover does not work. Okay, So got you. That one goes to their preview. Refresh. It's kinda wicking. Something's wrong with it. Don't enjoy what are after looking at it a little while, I just closed down Figma and opened back up and then it worked fine. That was weird. I'll even that in the course because there are times where you like, I just went back over and I was like, seemed to be working and I just had to close for grit and open a backup, kinda broke it and we go working. It's kinda outside of the scope of this. Okay. So how do we fix that? Okay, So can I clip it inside this parents? So I got this Hover, took out my Hover frame here. It's got a border around the outside. Let's clip it. Okay, Here we go. Let's see if that works. And it kinda works. You can see there's a bit of ghosting that goes on because there's not clipping on this one. And it's kinda trying to grow into this one. So it's kinda like clipped here, not clipped here. And as it grows at half clips and halfs not so both of them Eclipse. Let's see preview, preview. Right now we're working down the bottom there. Can you see the name? Depends on how you wanna do this. Do I want maybe this at the top down he has do it to this one. Let me use my square bracket. Come all the way to the top. Break it would work. Didn't can you see they it kinda jumps back and forth. It doesn't like missing with layers. I'd like to layers to be the same on both. Here. Frame 37, which is a terrible name, Let's rename it. Okay, It's my artist text block. This one here also needs to be called out as textbox and they need to be in the same layer order. Can you see it needs to be above headshot so that group matches that group. We go. So more fiddling and fixing. Alright, let's get it to fade in because I know there's probably gonna be a problem there too. Okay. So what we did in the past earlier on, actually, let's just make sure that these oil update when I change it, That's another good point. So select all these open up to my plugin didn't open because I've closed down Figma and reopened it. Now my shortcut will work after this. He's we opened up at least once I'm gonna go images, I'm going to click photos and I'm gonna go apply all. And now it can actually access that image that's inside. We've got a bit distracted. And so instead of it being a fill, we've got to try and select everything. Now, there's actually that unit that's inside of the frame. When I say unit, I mean that over here, remember it is not just a frame with a fill. It is a frame with this image actually physically inside of it, that little icon there. Okay, maybe we placed it and drag it inside the frame. Now, let's see if it works. Ah-ha, It's working. Missing a couple of images loaded now. Nice, are easy to update. Scale up a bit. Let's do the fade. So I could go inside of this one here, keep going inside and I can apply fill. Let's see if that works. So an extra fill like we did before. It's not working. Okay. So how do we do it? So it's on top of everything lids. It's maybe work with the image. Okay. And say image is gonna be the exposure down. Let's try that. Go here. Refresh. What it's done is broken it even more. You can't do that transition between or at the moment, at least it can't do that exposure transition between the two. It sees this as a different image. Is this now because we've made these changes. Alright, we can live with the ads, more workarounds. How do we make that work? I've already had to think on this and kinda run into the problem. So I'm pretend thinking, okay, what I'm gonna do is add our frame. Actually, I want the frame to be the same size as this. So what I end up doing is duplicating and Instance, breaking it apart, getting rid of the image on the inside. Give it a fill that I want. I'm gonna give mine black at say, $0.22, rename it and call it fade. And I'm gonna put this inside of this one so they're on both. And then hopefully I can just go to you and say, I forgot the fade selected. I haven't, there's the fade. Let's say the fade is set to zero per cent. Is this going to whack? Fades there to start with, and it goes away. Happy days. Alright, let's just make sure that we can now go and update it. So let's select them all. Remember, we're trying to make this useful for our team to use what they don't break it. Let's see if they can just go through pick new images. Male advertise. Now we can dig in and pick that layer which is cool. Let's see if it works or does. Okay, The other thing we probably need to rename is actually can be renamed the Instance. So in here, this fade, there's this thing. Can we just give it another name? Let's cool it image. Now when we go and update this, it might be a little clearer. Picking a different option every time. Yeah, I can just grab the image. Nice. Preview, it works. But he's fading in aright and scaling up. And some of the last little bits to tidy this up will be to go back to our component here. I'll components set and let's go in and fine artist name. So I'm going to select on artist name. Okay, and we're going to use Component properties because I want to be able to update all the text in here easily by just typing it in and hopefully use some of those plugins just to kinda pre-populate them. So why don't need to do is say artist's name, find the content option in here. Okay, Let's make a Component Property and say, I want the name to be artist name. It's going to have a default value of artist's name. That's fine. Same with this one here. Okay. I'm going to say you have not had a sname. We're going to create a new one. That's what other in two separate text-box we're gonna put in country. Excellent. So hopefully over here now, I can select them all and say, Look, I can change artist's name to Dan Scott, who lives in New Zealand, actually from New Zealand, who lives in Ireland. Let's test it. It's broken. Okay. So we've only done into one of the two instances. Okay? So funny, done into one of the two Variants. Okay, the look the same but over here. So if I click on an artist named Kesey's got this kinda like lozenge, terrible word, roundy, rounded rectangle thing. It's like a little tag to say that's applied. I've got to content a property, this one here, Command or Control click doesn't have it, but I've already got one made. I can apply that same with EU country. So now they should be tied together. Let's give it a preview. All I get that nice. Alright team, but doing it a little bit of a jump. I know, but I forgot to show you one of the coupons is that I can select all of these now and say actually, I'm going to use plugin and I'm going to say Text. And because we added those Component Properties, I can say let's put in people's name first and last. I'm going to sit apply to all and it says Which one do you want to add two and add it to artist name. Thank you very much. Look at that. They will update it. I'm now Ralph Edwards. Going to get back. Another one is company no country. There's all sorts of options in here. Let's say apply to all Which one country of origin. Look at that united Kingdom of Great Britain, men, they heard that the long way. But something you have to be ready for super long names. It's always the United Kingdom of Great Britain is just typed UK. There we go. Problem-solved. Alright, let's carry on with the video. I just forgot to show you that by the time ago to the end. Carry on. Now I can move this to my masters component library, update the library, and either future me, all the people that I am working with or four can go can go option to have a look at the library. Okay. Mine is still here on to page one, but they can try it out this oddest. They go and change the name, the country, and now go and change the image. Either using the plugin, random people, it's tested, you working, or they can go and do it manually. Can't wait for the to be a Component Property for images. I imagine there'll be out soon. Keep an eye on that if it's not there already. If I wanted to do it manually, okay. I can normally Command click and just dive inside or something. But the moment I've got this fade that's in the way. So what we might do is Lockett, Okay, so I can command click this to jump straight in and change the image. And that's a good point, okay, instead of doing it on the instance, kinda unlock that, I'm gonna go to the main component, which is in this case the fade is coming from the head shot, which is inside the artist, which is then passed onto my instance. I can say lock that so I can't change it. When they are dragging out another instance, they can command click and I will bypass the fade with a lock, can get straight to the image and be able to update it manually. Yoy needs a little bit of carbon. Okay, and let's preview it. You look at that easy reusable, took a little bit time to make, but sometimes I make these tutorials seem really easy, like I've got all the answers and often there's a lot of kind of like trial lab test it. That works and then add a little bit more. And now it doesn't work. We've got a cool face emoji thing. We figured out a couple of ways of doing it. You might not have to go down this far for what you're doing. But I feel like it's interesting to see, I don't know, problems, resolutions, more problems, more resolutions to something that works in the end, hopefully. Alright, that is it. I'll see you in the next video. 146. Class project 18 - Hover Grow Effect: I hope he doesn't make us do that hover grow thing for a class project, surprise, class project time, hover grow effect. And you don't have to go as how core and kind of meandering is I went, I'd like you to test yourself though, come up with an idea, come up with a design, get it to the things you need, is that you need to have text kinda two lines. We had artist's name and country of origin. You can change that for something else. I don't know. I was trying to think of other ideas that can be done there genre, not sure how important country of origin is. I just want to them and with those texts parts, I'd like you to make sure that there are component properties so that the instances can be changed easily in the Properties Inspector, I mean like this, but you can go over here and easily see these Component Properties and update them. I would like you to get the image to grow. You can get it to fade as well. You can get it to do anything you like. Like she didn't give it a test to see if you bump into any problems when you have done it. I want you to hover over. I'd like you to send a recording of you doing this. Okay, so there's two parts, senior screenshot of view, hovering and doing its thing. And also a screenshot of this part over here doing something like this where you have this selected, do a screenshot of all of this so I can see your actual, I'm pointing at my computer screen here, the image, but also over the Properties Inspector, over the spit and upload both of those. The video I'd like to get a link screenshot. You can just upload directly, upload them to the Assignments section. For those who you can't do videos, just do a before and after a couple of screenshots of it small and it big, that'll work. Anything else? Screenshot of your Instance, little video of you in directing with it, have a little research or how you might design this. You probably not going to find artist Card, but you will find something like headshots or bios. Users avatars have a look, come up with something a little bit more interesting than my green box with black text. Once you've done it, shared on social media as well, love to see it. Make sure you use the hashtag Figma Advanced, and make sure you go and help out to other people. Alright, Enjoy it, bumper to any problems. See if you can fix them. If you do find a better way of creating what I did there, they're just knowing the comments. I bet you there's 100 different ways of doing it. Enjoy the learning. And once you're finished, I will see you in the next video. 147. How to make an expanding Search Bar in Figma : Hi everyone. In this video we're going to make this. It is Search icon in a circle, but watch when I click it, it expands. The text appears nice. It's got a little bounce to it. Let me show you how to make this in Figma. To get started, I'm actually looking at my main styles and components. I should be making my main components here and then putting them into the various design documents afterwards, throw shade library. Okay, so let's do it that way. And I've got a frame in here that just as a placeholder for the size that I'm going to need this Search Bar, and I've got these two parts. I'm going to select both of them. So just an icon, a bit of text. I'm going to lower the opacity of this 15 on your keyboard to lower it to 50 per cent, both of them shift a to make it our autolayout doesn't have to be an auto layout, but we like autolayouts because it allows us to do things like padding. Maybe you 16, tab eight. Okay, and I'm gonna give it a fill. I'm going to use white because I've got an off-white on the background here. I'm probably going to need a drop shadow or line around the outside. Something. The other thing I want to do is I want to make it round because I liked that kind of bouncing in and out of that circle. Okay. So drag this up, you can keep dragging it out, right? Okay. You want me to keep going to a high number K so that it's perfectly round. I just type in 100. It's way more than I need, but at least it makes it perfectly round. Cool. Next thing I wanna do is this, make this Component do I wanna do that first? I don't think it matters. Let's make it a component. Let's give it a name. Search bar. I'm going to get it the right size to start with. I'm going to say you go out that way. This is probably going to need, let's put it in a drop shadow. Let's start with drop shadow, and I'll show you a stroke in a bit. Drop shadow which 111 to the opacity is gonna be ten. Is that enough? Probably not. Just elder. So this thing now needs to variance, okay, So component to Variants, this first one needs to be trimmed down. And it should work if I know it's not clipping that will clip that out in a second. Let's just see if the mechanics works. So shift E, I'm going to say you the top this bar here, we want the parent. We want this default one to when it's clicked. Switch to variant to use smart animate. And I'm going to use, when we're going to use. And when it comes back the other way, I'm going to use not bouncy. Let's use quick. Let's give it a test. So leave our MainComponent out here. Grab out Instance, not the whole thing. So this part here, you can't do a duplicate. You can, I'm in prototype mode, switching vector design mode make things easier. So let's give it a preview. So you all It's kinda working. The circle is working. What we wanna do for the last part is we want to say you the top here. We could just say that this is set to hide Command Shift H or Control Shift H. So it's hidden on this one, but they're on this one that's have a look. So you yep, yep. Yep. Kinda works but it fades in. And the bounce I'm liking less and less. So we'll turn the bounce off. Let's go quick. And one on the white back, we'll use quick as well. Okay, so let's give it a go. You, it's not working at all. Alpha refresh. Go back to here, realize you've instead of starting flow on prototype so that we can, at least when we hit Refresh, it comes back to this page here. It's still not working. Cool. What did I break? You idea? Alright, we're back. Yeah. Just closing and opening. It seemed to fix it. I'm having more problems in this course and I normally have in Figma, normally it's super unreliable and you might find it super reliable for you. But sometimes you need to turn it off and turn it back on again. So let's have a look. What we wanna do is instead of hiding it, Let's have a look and variant to. Let's turn the eyeball back on the default. Turn the eyeball back on this one. What we're gonna do is actually just say the default variant. We're going to go to Design View and say clip contents. And let's see if it works. Keep testing. And it works kind of can you see the editor will zoom in a weird pixelization. This something that never used to happen. Now what happens? I bet you, when you're using it, it doesn't happen. I think I know what it is. Is that this one here we sit clipping to and we didn't for this, it doesn't really need it, but it doesn't like to transfer between the two. Let's have a look. Diego. Now it's nice. Okay, So a couple of things is that it's clipped, which is great. And what I probably wanna do in this version, so Command click, actually, I went too far into the vector. I want the component of my little magnifying glass and I can't move it around because it's inside of an auto layout. Says we're maybe not using the autolayout and just using a frame with them sitting inside. We can make it work. Okay, I can click on this one here. Now if yours is not perfectly round up here, mind is accidentally ended up being the same height as the width. That's why it's like this and it's not quite looking right. Just make sure whatever the height is, is the width. Now we can mess around with this top ones padding And to try and get it lined up in the middle. Okay. You can break it into individual parts and stop messing around with that. It's not going to affect the second one. Let's give it a go now, looks nicer. Probably needed a bit smaller there as well. So you can use scales, the keto, I'm going to make it 0.75, but at the right size and mess around with my parent. So I'm going to say you are 40, but instead of hug contents, I'm going to say you a 40 as well. Now, let's mess around with this one you over that way, but I think are a good boop, boop, boop, boop. Here we go. Very cool. Scales down, bounces down. I like it. Alright, one problem that I running into is watch this instead of a drop shadow, I'll leave the drop shadow one. But if I add a stroke to both of these, because let's say that I wanted to be, actually, let's put a stroke, Let's give it a color and use my 300 neutral. Dismiss that. And we go. And at the same one on this, I'm gonna go stroke of 300. We are. Now this gives it a little bit of pixelization as well. Can you see that does some weird stuff with it, can't deal with it at the moment. Chicken for you. Let me know in the comments as it's still doing the same for you with a stroke. I can't make it not do that at the moment. You go a little bit more into position. Nice. Last thing we'll do before we go is let's get rid of the stroke because it's making it look ugly. But also we're gonna get it to pop from the right. So let's quickly get rid of the stroke. Slick. Both of them had minus both of them are gone. And what we wanna do is we want it to be over here. And let's preview. It. Doesn't quite work, kinda pushes from the other side of the defaults from the left. So we can do is not in the main component. We need to do it in the Instance. It needs to see the parent frame. And we can say actually let's use right, just going to use that side to push off. Let's give it a goat. A look at us. Nice. I need to line it up because it doesn't quite line up. And you can totally do a stroke like when it's actually made in the app or in the website. But for us at the moment, there's just a tiny little bug in their Figma. Those sorts of bugs just disappear over time when they get launched and when the team gets around to updating them. But for the moment, I love it. Gave the last last thing. I was looking at it and I was just about to finish the video and I was like, I can't live with that not being in the center. And then I was like, Oh, do I just keep moving it and going back here? I'm like, No, you don't do that. What you do is you go back to this one, okay? You say, scroll to the top, Find your different variance. You're pulling named variant to just switch it to that. Then you can click on it and get it right in the middle. Okay, then switch it back to default and say magic. Now it's perfectly lined up. The last, last thing is, because I've put it on my main styles and components, I need to publish it. What I'll do is I will get this and put it in its own section. In that shift is to make a section. Okay, I'm gonna make a section, I'm going to name it, command. This a field. Actually can't think of what it should be. Is it a field? Does it go into other? Copy that styling, put it onto this one. And I'm gonna get view in the right bit. There we go. I am now going to publish it. So remember, option three, we've done this before, right? Option three opens it up, okay, Alt three on a PC, how libraries? We're going to publish this change. Okay, there we go, just one change. And now with this document here, now that I want to use it, I should be able to either go to my shift I and type in search. Search even. Okay, we'll go to my assets panel and then I'm going to drag this in. I'm going to move you guys a little down. And then you go. I'm gonna have to switch this to that variant to get it lined up nicely. There's something else I have to remember how to do so let's switch back to default. Who do you remember what I mean to do? That's right. We're going to say lift. We're going to make it right. So that starts over here. And then variant pops out. Is it in the middle? There you go in the middle. Back to that one. Now let's preview it. Vigo, doing it properly. Making main components on our main styles and components file, ensuring them with the rest of the team. Alright, that is actually it now, a few little bonuses at the end there. Onto the next video. 148. Class project 19 - Expanding Search Bar: Hi everyone. Hey, the class project for this video is the expanding search bar that we made in the last video. I want you to make your own. Alright, So listed in the class projects, but there's nothing much to it. Make the search bar, let me know in the comments if you bump into any problems, maybe any workarounds to get rid of the pixelization, maybe that's gone now, let me know. So make it to a screen recording of you using it and interacting with the search bar and then upload a link to the assignment section. Share on social media, use Figma Advanced. I bet you this one. People love seeing this one online. And if they asked you where you got it from, you say, Oh, I know a class you should do. I'm pointing them to me. When you uploading them, tagged me in the social medias, and make sure that you add some feedback to, to other people. It's very cool. Man, I click this forever. I've made 1,000 of these, but still clickable. Alright, enjoy the class project now homework, and I'll see you in the next video. 149. What are Variables in Figma: Hi everyone. Hey, in the next section, okay, well the next two sections we're going to look at Variables and I wanted to quick overview videos you can kinda see further along what we're going to be doing to hopefully give you a better understanding now, early on, what variables are capable of. So there are three main food groups for variables. There is the first one where this prototype here, watch this. When I hit the button, look at that, the number goes up. If I go back one, okay, It goes back to zero and you see the cart, when I go up one, it goes up as well. And this appeared, It's all very cool. And no, it is not a spaghetti of a bunch of different frames case just one frame with some local variables that we assign. We tell these buttons to adjust these variables. Okay, it looks kinda confusing, don't worry. We'll go through it step-by-step. But there are variables that we can do to control our prototypes and make them what they call advanced prototypes using Variables very CO and gets away from the noodles going everywhere trying to connect all frames up. Very cool. Now the second food group, okay, I'm calling him for grids, for really use cases. This is a logical, logic based use case for Variables. Click the button that goes up one and changes that little icon from this component variant from empty to full. Some logic going on using Variables. The other use K for variables is using Modes and Variables. So I can say this card here, okay, down here on my Layers panel, I can say you are the color of light mode. You can be dark mode, changed, background color, font colors all updated. You can go even further. You can also say actually I want the spacing to be not compact but Comfortable. Let's stretch it out a little bit. Oh, look at comfy it is. So this is variable modes. In the last one we'll look at is Design Tokens, where we can define a lot of things and reference them to each other to make things like design systems a lot easier to implement, both for us and enlarge design in Figma, and probably more importantly, connected to the development side of building an app or website. So you and the developer are using Design Tokens to work together to make sure things are updated correctly and a scalable, that's design tokens will cover all of these individually as we go through. But I wanted to scope out we were going for this next two sections here and an overview video. Yeah, The thing is that you've known throughout the course. I've mentioned it before that I say variant and variable. I get that language mixed up. This is a variant, okay, it's a component. This to variants is the empty and the full variable is basically to do with this local variables. There's a lot to go into Variables. We're going to cover lots of different ways of using it to spacing general colors, all sorts of cool variables. But variants are just these different options inside of a component. There you go. Oh, the other thing before we get started, as well as that, there is a point where you need the pro paid version of Figma to use all of the Variables. There's some parts you can do without it, some parts you can't. And if you have noticed up here these little hexagons and pentagons, whatever they are, icons appearing amongst everything now. Okay, they are Variables. It's kinda newest upgrade and that's what they represent, those little shapes there. Variables. Would you just go and make something, Dan? Sure we can do that. Let's go into the next video and make our first variable 150. How to create cart total using number variables in Figma: Hi everyone, Welcome to this video about variables. We are going to look at specifically a number variable. It's going to do this, are gonna be able to hit plus and minus in tight our prototype. Very cool and a nice introduction to variables for us. Let's jump in and make it work. Alright, to get started, I have grabbed our cart from our previous file and just put it into a new document just to keep things separate. This is an update video by the way, so things might look a little different and the Variables Interface might change a bit, changed significantly. I'll update the video, but if it looks close enough, you'll get the drift. So to get started, what I want you to do is I'm gonna grab my text tool. Click once. I'm going to type in on number zero, okay? And I'm gonna kinda put it in the right spot. You can go there. Okay? So what we need to do is define our variables, are local variables. What that means is we have nothing selected. I'm using escape and there's this new option over here called local variables. Let's click on this Options here. And we're going to create a variable. We're going to look at the number variables in this video. I'm gonna give it a name. You can call it anything you like. Cannonical, mine, total. What is the value going to be? Let's just change it. Just change it to five. And that is it. Okay, so we have defined our variable in here. Let's close this down. Now we need to assign it or apply it to something and we're going to apply to this. I'm going to click on this textbox here and I'm going to say You, my friend over in the text panel, okay, there's this option. Okay. That little hexagon paint again, I'm not sure which one it is shaped with dotnet. If you click on apply variable, we've only got one, which makes it easy and we apply it and watch what's gonna happen to the zero. You're looking at the zero, I'm going to get his watch changed to five. Exciting, not really, but at least we know it's connected. Okay, let's have a look, Let's open, let's have nothing selected. Click off in the background, and it's open this up. And I can say the total is zero and watch it change. Can you see it changed over there? They are connected, which is awesome. What I would like to do now is actually show you how to break it just while we here, I've got the text box selected. So you down the bottom here, this little pill here that is showing me that this text object that I've selected has this variable assigned to it called total. I can break it by clicking this. I can also rick it by accident, by changing it. Okay, if worked out that if I change it to, it goes, wow, just got rid of the connection and it's broken now. Okay, it's not going to work. I'm going to undo it till it was working. And that's back there. Excellent. Okay, the next bit is making this Plus button work with it selected. Let's switch to prototype mode. That's the big thing that I was kinda getting confused when I first learned this was that some of the work happens in Design View, some work that happens and prototype view. So in prototype mode, with this selected, I'm going to say let's add an indirection. We've done this before. On tap or onClick doesn't matter. I'm going to say I'd like to sit variable on this little thing I've got selected here. What I wanted to do is first of all, it's going to say, Hey, if you wanna do this, you need to move it to a paid account. I'm gonna do that back. So with it selected, I'm editing interaction, hitting the plus button. I'm going to say you want to set the variable or variable. I wanted to be the total. What expression do I want? Alright, so I want to sit total, which is this thing here. I want to say that what I want to do too, but I would like total to add one. I just typed in one. So I'm saying find the total and then get the total and add one to it. There you go. Let's hit Enter on the keyboard how it looks weird. But there you go. Let's see if it works. I'm gonna go to my prototype lists, use this snazzy new one that you haven't seen much in the course because it's knew they would get Shift Spacebar and ready city are looking at us, goes on forever though. Okay, we don't have a minus, but the ego would sit out for his Variable high-five. Not so hot. Let's make it go backwards. So let's do the same thing. I'm have this selected switch to prototype mode and it interaction. It's gonna be an on tap out. I'd like it to be set the variable on this thing. What do I want to sit? I wanted to control the total, which is this thing over here, my little zero. What I want it to do once it's find it, I want to write the expression that says total. I wanted to go minus one. Hit Enter. Let's see if it works. Shift Spacebar. And let's go positive, negative, positive, negative, positive, positive, negative, negative knee. You go, there might be a couple of problems with yours. You might be going like, I know there's a negative 01:00 A.M. I going to pay negative many. Are they going to give me money? We will fix that in the next video with conditions. But for the moment is working. A couple of things I want to show you is I find it easier to operate on these things. Who is a little diamonds that pop out once you've assigned the variable, they're actually easier to do it when you select them in here. Why are they better? I don't know. The thing. He feels very detached over here. It's bounds a look different by the time you get to it because this is brand new update for the course. Last things I want to show you before we go is you can remove everything from these individually. The sit variables. We can say none and it will get rid of it. Undo that if you want to get rid of the local variables. So remember in Design View, nothing selected under local variables. You can go, you can right-click them and say delete variable. If you want to remove it off the text here, you can just delete this thing here, okay, say detach variable and it will break it about the you go, we added some variables and it controlled something. What's really cool about it as we know that in the past we've probably try to create prototypes and does not done them case, as efficiently because you didn't have having to make frame after frame after frame and joining the prototypes together. So there you go. Let's go to the next video where we get rid of this minus and a cold conditions. So you in the next video 151. How to add add conditions to variables in Figma: Hi everyone. In this video we've got all add N minus buttons working, but we have a problem where it will go to negative one to three. If we keep hitting minus Bar, we're going to fix up with a condition that will say, if it gets to zero, don't go any lower. So let's jump in and work out how to make a conditional. Okay, So remember our problem is that we can add stuff and we can minus it, but eventually it goes to minus C. We wanted to stop at zero. So to do that, we're gonna do it to this minus button. Okay, remember we can do it over here and a prototype. So we have two random prototype and we can start working on it over here. I prefer to work on it over here using this little shape here. Okay, So the moment we say, hey, find the total which we assigned to that, what I want you to do, I want you to minus one from it, you go. But what we need to do is add what's called a condition. Okay, so let's add a conditional. Knowing conditional works. It says, if this is true, do this action, otherwise, do this other action. What we wanna do is say, if the total is greater than zero, I'm just typing in zero here. I want you to do an action. What do I want you to do is I want you to do all this thing that we made, the set variable up here. I'm going to collapse it down to make it easier to drag and grid that would sit and drag it in here. What do we just do? We said that if the total is greater than zero once you to minus one off it. If it's no greater than zero, I want you to do nothing. There is no Stop. Don't do anything, uses leave it blank. So this is two which is greater than zero, it will minus one off. If it is one, it is also greater than zero. So we'll minus one off. If it is zero, it is not greater than zero, so we'll do nothing to get the idea. Give it a test in, come down, okay. Is because I'm teaching coding and I'm not very good coda. And let's go up and let's go down and it gets stuck at zero. Let us, I'm impressed with myself. If you're a developer, you're shaking your head because I've mispronounced lots of it and probably done things along way, but hey, that's as good as I go. Alright, so that is our condition, conditions that interesting, That's a little icon here, okay? And we have our variable sit inside of it, but it only gets activated if this is true. Otherwise do this other thing. And this other thing can be lots of stuff, but if you leave it blank, it will deactivate the whole thing. Alright, you're over explaining it, Dan, Let's get onto the next video and do some more variable goodness 152. Variant change using Boolean variable - change cart color: Hi everyone. In this video we are going to look at how to get a variable to change a variant and a components. So this is all variant, okay, What to variants? There's this empty cart and this full cut. I wanted to be able to click a button, Use variables to go and change it. Watch ready, 321. All very exciting. We're going to learn the Boolean variable, which is handy for doing things like this. Alright, let's dig in to get started, draw some sort of icon button. We're going to need to Variants room but not Variables, just two different versions of a Components. So I'm going to speed make this component with two variables. You know how to do that now? Alright, so what we wanna do is put up components set off on the way in our components page. It's going to put mine on this idea. I need an instance of it, so I'm gonna select this first one, hold down my Option on a Mac, alt on a PC, drag this out. So this thing is to modes. It has two different variants. So for a Boolean operator, this is what we're doing here. On, off true-false can only have two options, okay, perfect for this. And what we wanna do is name them correctly. So the naming is super important here. So going back to my components here, Let's open it up. Let's call this one cart icon. And the two values need to be true or false. Okay, So I'm gonna put false as the first one. And true is the second one. Like the logic I'm going to use, this is the cat full, true or false, okay, So the first one is false, it's not fill, got nothing in it. That makes sense to make sure you use the words true and false. That's what makes that Boolean operator work. Okay? Now there are few things to make this work, okay, so first of all, have nothing selected. Let's go to a local Variables and set one of these. Don't be tempted to hit the Plus button, okay, adds a different modes, not what we want. I can't undo it. I'm going to delete the Mode. I want us create a new variable. We're gonna be using this Boolean one, the on-off, true, false. Then we go, okay, let's give it a name. We should call it something like and Cato. While oftentimes they'll use CamelCase. So they'll be a lowercase first. There'll be no spaces and the B uppercases to denote the different parts in too much of a visual person. And I do stuff like this. Okay, That is a terrible way to name it. Probably question them is going to kill everything. But it won't make a difference here in Figma. But if you're a developer, you're shaking your head, can't use spaces, you should use camelCase, the best of all the cases. And the default value is gonna be false, which works for me. You might have it true. It's up to you. We've done that part. We need assign that to something. Okay. So when you say you have been connected to this one here and I'm going to say the cat is full. Just double-check that that works. Second, de-selected local variables, true, false, true, false. So that's working excellent. Now we need the button to make it work. We'll start with the plus button here. How do I find all those variables? Fool the prototyping because that's what we're doing, right? Advanced prototyping, how do I see it all? That's fine. We need to be in prototype mode, so shifty. And I'm gonna do it over here because I've already got a variable applied to it. Otherwise, stat woken up here. Okay, so here I've already gotten on tap. I've got this set variable for adding to the zeros already. I'm going to add something new. I'm going to add a conditional. And this conditional is going to say things like, what are we going to say? I'm going to click in here. We're going to say if the total is now there's a few ways you could do this, right? I'm going to say is greater than zero. But you could say greater than or equal to one. Or I'm thinking for any other good ones not equal to zero, there's a few different ways of doing. I'm gonna do greater than zero. What I wanted to do, this thing is bound to change because it's a little bit clunky. If I'm honest. Do you hit Enter or do you what do you do now? Commit button. I hit Enter. That works. Okay, so the condition is looking for if the total is greater than zero, what we want to do, we're going to add an action that says, set L variable, what variable? The Boolean one, which is this Add to Cart. What I wanted to do to it, I want to set it to, if it's greater than zero, want to set it to true full man. Now if I hit Enter, it goes an edX stuff. So it's a little bit weird. So true. Click out, there we go. And if that is true, do that. Otherwise just do nothing. Excellent. So let's give it a test. Isn't gonna work. Oh, seem to easy. Shift Spacebar. Let's get a little preview going. Alright, jump cuts. Somebody came to the door. I came back ready for action. Alright, we've got our preview going, watching there, 321. Hey, look at us. We did it. But basically codas said no one. But there we go. I'm, the only trouble is if go down to zero, it doesn't work. Okay, so what I'm gonna do is sit as a challenge. It's not gonna be a full class project like in a video for you guys to submit. It's more, I want you now, okay? To go through and add logic to this minus button to turn it back. Okay, basically have a look at what we did for the adding to it, okay, and see if you can make it work in reverse over here. If it goes horribly wrong, it's okay, Variables are tricky. I'm gonna do it in the next video, but definitely give it a try now get that one working thing of the minus are going and let me know in the comments, did you get it going or did you need help? That's totally okay. Just interested to see like, yeah, good luck. And if you get there, awesome. If you didn't, it's okay. We'll do it together in the next video. All right, my friends, I'll see you in the next video after you've had a practice 153. Turning our boolean variable to false in Figma: Alright, As how did you go in the last video? Did you get it to turn off? You did high-five, bang. Good work. If he was his big Cody myths, that's alright, we'll do together. And let's look at what we're doing. I want to be able to turn this off when I get back to zero, so it doesn't work. So let's have a look at the logic in here already. Okay, So one of the big things is like, what do I squish it in there? Where do I put it? We're going to add a second condition. Okay, to say that if the toe is equal to zero, okay, he's couple of ways of doing that as well. And I would like to do this action. I'd like to sit this variable, which variable is the cart full to false. Then click out. Otherwise do this other action which is nothing. Okay, So does it work, Dan, as the good question, you have to reset it up here. My one, this is kinda new. There's reset kinda works. Waiting, waiting, waiting, waiting, waiting. There it goes. Sure why? But I've reset it and let's go up and let's go down. Go up and go down. We're doing stuff. And we've used it to toggle this on and off. You go to use your imagination about what you can turn on and off with a Boolean operator, okay? There's like you might have something where it's a button. Somebody says, I would like this extra feature and it might enable or disable some other features. Or it might enable or disable different buttons that you can click because you've gone to the, you a choice tree. You might click the, the annual there might show you the discount and how much you're saving as long as it's that, if you want to use Boolean, okay, you have to use it on and off. There are other things you can do, which we'll do in a bit. But yeah, you go, That is it. Let's jump in the next video. 154. Making a Overlay Popup in the Variable action panel in Figma: Hello everyone. In this video we're going to hit the Plus button and a little message can appear, you're ready. That's what we're gonna do. Okay? I want this in this section here because we've done that before, right? You're like, hey, that's just an overlay totally is with this new Variables feature though they have pulled some of that functionality so you can do it in two places. At the beginning I thought maybe we will making a variable to do it. And actually no, they just kinda use the same interface to be able to do variables, conditionals, and some of those navigation things that we normally do with noodles where we drag and connect them up. So let me show you that we're all clear, alright? Oh, one thing as well as I forgot to mention the beginning of this video, you need to be in prototype mode for this to work. You probably will work it out, but I forgot to mention that being prototype to be adding all this indirection, you get the job in. The next thing I wanted to show you is kinda bundling in normal actions that we do into this little drop-down thing here. So just to show you that they're thinking they the same when the feature commands like either they different are the same. And let me show you what I mean is we've, if I click off, we've got these two little icons. That's a conditional icon, that is the variable that's been applied to this button. It's just an action. We've done lots of other things. I said the local variables, assign them to buttons, but we don't actually have to do that to use this chunk here. So what I want, like sorted the beginning there is when I hit Plus, I would like it to do stuff not set of variable, not a conditional. I would like to do something that we've done before in the past. So instead of dragging a noodle over to here, okay, and connecting it up, we can actually just do it in here. So regular old Open Overlay, I'm going to say what I would like to do. Open the success message. I want to dissolve it. You don't want it to ease in and out and then run out of real estate. Scroll down last 100 days ended probably Manual. The thing kinda gets in the way, but you can drag it because I want it to appear there and close them clicking outside. Perfect, Let's give that a test Shift Spacebar. And when we click this, Hey, look at that little success added to cut Diego. So it's kind of like it's the things that we've been doing but in a slightly different place now, just so you know, you could definitely skip that and go and draw that one. Okay, and add an overlay like we've done in the past. There's no better or worse. I just know when I first. So I'm like, Am I doing variables for open Overlay? Know, just turns out these things can all be assigned to this button. Variables, conditions, and regular old Open overlays. You go in saying that there's other things we can do in the other actions can navigate to. He goes to different page. We can go back, scroll to on the page, open a hyperlink. Okay, there's lots of other things we can do in there as well. Alright, now, that is the end of the video. I'll see you next one. 155. Light and Dark Modes using Collections & Color Variables in Figma: Hi everyone. In this video we are going to look at light mode and dark mode. Okay? It means that we can select a frame and say You, my friend, are now the color of light mode, your dark mode. And it goes and changes everything inside the frame. To do it, we need to learn what a collection is and what a Mode is that are particularly hard. So let's jump in and make this awesomeness happen. I love it. Document mode, dark mood, light mode. To get this started, I have got just a couple of bits of texts. There's nothing going on in an image, okay? The first thing I want to do is have nothing selected. It's good to our local variables. And we are going to realize that we have already got our first collection. We're talking about collections of Modes. Collection just think of as a group of different roles at the moment, we've got this one called collection one. I'm going to rename it and just call general my junk drawer of stuff I want. But there's more specific collection that I want to do with colors. We'll do another one for sizes and a bit. Those are all different collections. So I'm going to say let's create new collection. It's called this one, colors American, New Zealand D. Okay, so we put using everything and we're going to create a variable. And we're going to start with this color variable. Okay, So just to reiterate, we've got Collections, we've now got to a general one that was doing a totals and Alcott switching. And now we've got color and you'll end up with a few different collections. I'm gonna go to this one. We're going to name this first color. And when you're naming these, if you're going to Use variables to change colors. And it's kinda like styles. They do a lot of the same thing and you can use the same naming convention. So this one's going to be my primary, primary color, but we'll do ticks primary. Okay, So this is my primary texts call out what colors are gonna be. I'm going to use a dark color. I've kept this green so we can see it change. So let me use a dark gray. Okay, So that's gonna be my value for primary text. Now, we've done Collections. We know what variables are, but what's this button? Because I keep clicking it by accident and we get this extra category. These are the modes, mode, one mode to this one here is gonna be my light mode. And you can't tab across yet, but this one here is going to be dark mode. Getting exciting. Okay, so here I'm going to say we might text, I'm just using this one, definition, Text and I'm gonna apply to this text yet, but there's two different modes that I can switch between. Okay, I'm going to have light mode and dark mode. Light mode is just gonna be light Text E. And that's the first part. So Collections, different modes, modes can be lots of different options. It could be small and medium-sized things, okay, in terms of maybe spacing and padding. So let's close that down. And what I wanna do is first apply it. So I'm gonna say you have got the fill color of, I'm going to add my Styles panel and it's kind of bumped into all the time styles. They haven't really separated at nicely yet. And this might look different on yours, but there we go. Texts primary, boom, you takes primary as well. Adding it to the things you want to be able to switch between modes, then how do you switch it? So it's applied, but it's in light mode, right? So that darker color. How do we get it to go to that white color, dark mode, just select on it, go to the Layers panel. Layers will have this little icon here. Okay, we can change the Variable Mode that only appears once you've got modes. There it is this color and 3D CAD. Dark mode, exciting a, make it more exciting. Then I'm gonna back out of that. What we can do is I'm going to I should have made this before we started. Let me quickly turn this into an auto layout shifting. And I'm going to make another autolayout that combines these two shifting. Here we go. Because I want the spacing and stuff to be played with. Alright, so we've got this, we could do it to this whole parent frame and change it and it will look through everything that has a mood applied to it and try and change it from leitmotif dog mode. Go the parents selected, which in my case is called frame to make it cold Card and same place. Go to your Layers panel. There it is there. Okay. Color and everything inside of here should go dark mode like that. Let's make it even better. We want the background to change as well so we can actually read that text. So what we'll do is two things. Let's escape, escape, escape, so that we can see local variables. We've only got one kinda color here. Let's add a non another mode. That's what I want to click every time. It's this one down here. Let's add another color variable. So we're getting there, right, we've learned color number boolean. Okay, Let's give this one a name. So we're gonna do Interface in face. Sometimes it's called surface, okay, I'm calling mine Interface primary. Okay. I can use it once, but I've got two different options for it. I'm going to pick dark purple for my light mode. Note that's for dark mode. I'm going to use just the white and this one's gonna be darker. There we go to different options that is nicely contrasted against that, and the text is nicely contrasts against the interface background. So let's apply it. What do we apply it to? Do it to this autolayout frame? Say you have a background fill of using the little symbols and Picker. Okay, I use Interface, great, but let's give it some 16 by 16 padding. Okay, And are you ready? Okay. We can say You, my friend, are going to be Layer panel. This whole thing inside of it is going to be dark mode. Prepare yourselves. I'm excited. Are you excited? Does me? It's new stuff. I like it, super awesome. It gets even better. Let's undo that. What happens is it defaults here. Can you see it just defaults to whatever the first mode is. So it's defaulted to light mode, whatever the first one was. Okay, so it's actually go to Mode apply to you. Okay, So 52, these are three of these. And what if I could grab the whole frame and just say layer is now Dark Modes. Way, good way. Alright, so that things to remember is local variables. I have got Collections now. We've got more than one. We had collection that we're renamed general and go this new one called color. We edit a variant to it and we added an extra Mode. So Collections is just basically groups, Modes, things that we can change between waking give the object, like in this case, a color, one, name, a token to say you are Text primary, but it has other functions that we can toggle between. From there you go and apply those colors to the things that you want to apply it to. And then the parent frame, whether it's the textbox, the autolayout that's just above it, or the one that's surrounding it. Or now case the whole phone. You can then go to Layer and then switch between the different modes. Alright, good work team. Let's do another version of that in the next video. 156. How to change spacing with number Variables in Figma: Hi everyone. In this video we're going to use the same thing we did in the last video when we're using Modes and Collections. But we're gonna do this one for spacing. What we're gonna be able to do is over here is used not only dark mode, light mode, which is cool, but we can go to compact versus Comfortable spacing. And can you see the space between everything changes? Very similar to what we just did with colors. But we're going to use number Variables and change the padding around the outside, right? Let's jump in and I'll show you how to do it. That's too tight. I know it is okay to get started, we need our collections. They have nothing selected. Local variables. Let's create a new collection. Let's call this one spacing. Okay? And let's create a variable. We're going to use a number variable because we're trying to control numbers, not colors. We're trying to change the space between things, okay? And that's done in pixels, which is done the numbers. So my first one is going to be my medium. Often with spacing, it's done in these kinda like more T-shirt sizes. So mediums, small, extra small, extra large. You should go and create them all. I'm just going to create the one I need right now. Just going to do medium. You can write out Medium. That's okay too. The value for the size is going to be 16, okay? And I'm going to have two modes. It could be mobile Mode. The different spacing between mobile versus desktop. You might decide that it's common to say something like the Compact Layout, okay, versus Comfortable. That is a common enough way of spacing. So my Compact one is gonna be, let's say 16. And when it gets comfy, it gets kinda spread out of it and it's a bit bigger. So let's go and apply that. So let's say that we've got this already. It's an auto layout at the moment, is just got random sizing for around the sides. What I'm gonna do is instead of saying that this spacing here is where is it 16, you see this little option appears here. I can say you are variable. Now I'm gonna teach you to medium. That's my medium spacing. I did the wrong spacing. It's alright. I'm gonna do this one is about your medium. This space between stuff is set to ten at the moment. Apply variable. When would this one is these ones you can click on the little icon. This one here, you need to get Dropdown and do it. I'm okay with it. So let's apply the medium. So paste that out. I've got another one in there. This one here needs to be hopefully because I like using this on page one. Hopefully that will be applied variables there soon. The moment you can't and you are going to add variable of medium, medium spacing everywhere. Now let's go and change it. There's change it to you could do it to the parent frame and it's due to the whole phone and say actually access member layer, we're gonna go light mountain dark mode. But look, there's also spacing, dark mode, light mode, but spacing is in there. Okay. It's defaulted to whatever the first one was, which is convect, I'm going to default. I'm going to change it to go to Comfortable ready, 24 pixels everywhere. It's ginormous. Go on. Okay, So it just means you can probably go for I probably get mobile desktop then Compact and Comfortable. And depending on your use case, but because there's a Mode, you can start to see, Look, I'm on this parent frame here. I can go Comfortable. I can switch this, but I can say actually I want to Compact, I don't want it to be light mode, which is not working. Why is it not working? Ah, either I did this in front of you were off camera, but this frame here. Okay. I said you can do any frame. Okay. The parent frame, we can do it to this specific one. I've got to change this and it's overriding what this one is trying to do. This autolayout here is probably too dark mode, so it doesn't matter what I do to the parent. So I'm gonna put it to auto so that it follows the parents. Now I should be able to hear a lot more Dark Mode in Comfortable sizing as CO. Now the next thing is, is that let's add another one of these because like why do we have more than one? It's just gives you some units of spacing because the moment we've got medium, let's add another color variable, sorry, number variable. And we're going to have that small, okay? And this one, he is gonna be like 8.16. We can use both of these in our design. We don't have to pick one or the other. Can change the layer order by dragging it up. Okay, I don't know why it needs to be the top. Okay, So what I'm gonna do is you can see that spacing in here is too big. So I'm going to select this and say You, my friend, are a different variable. You are the small variable, which in case of us, because we're in the comfy version, is said to 16. So for this one here, I want use it to the small version. So in this design now this outside is set to medium. This inside sit too small. You might have an extra small, you probably will have an extra small K, which might be full pixels and you can just apply it where you need it. But you've got two options or two modes. So that later on, when somebody goes and changes it, they can go Comfortable to Compact. And now that goes down to eight, that goes down to 16 were appropriate. Alright, that's it. I'll see you in the next video. 157. What are Design Tokens in Figma: Hey everyone. In this video we're going to discuss Design Tokens. There's a lot of talking in this video trying to explain what they are when we use them. The main reasons we use them, the difference between Variables, styles and Design Tokens. There is a lot of arm waving that you can't see and me explaining, but hopefully it's useful to get us ready for the next video where we actually start doing some of the design tokens. But let's get started. Let's get the arms waving. Let's go. Let's start off by making a simple design token. The moment I've got this just basic design here, I'm hard-coding the color. This color has a stroke than the bottom of the screen. This box at the top here has the same color. That's not good because I have to then go and update all of those colors every time I want to make a change. So we need something to represent that color. And that's where design tokens can be useful. And that's where it design token is useful. Be warned, we've kinda done this already with nothing selected. Let's go to local variables. Let's create a variable, a color variable, I'm going to call mine Karla primary. I'm going to give it this color. I'm gonna go and apply it. It's going to grab this box at the top here. And I'm going to say, I don't want you to be hard-coded. I'd like you to use one of the styles. It's kinda not a style. Styles of down here in the circles. And the Variables minds of jumping around, stopped jumping. There is there in this square, okay, basically the same thing. Here we go. I've applied my color variable, aka a design token to this box so that later on it's really easy to go and update the color, especially when I've got multiple instances of the same thing. I can say local styles, you design token or this actually because we've used the token instead of the actual number, it's really easy to go and update. Like, Hey, is that it is more to it, but basically it's what it is. This here is a token that represents this. We use this instead of that number as a placeholder design token, variable placeholder, they all do the same thing. They represent something else that kind of holding information inside of them. And an alkane is holding color, we create another design token, okay, this one could be a number, and this one's going to be border-radius, and we're going to use eight. That is another design tokens, really simple one. We'll get more complex. But now you're asking a design tokens just variables. They totally are. If it's a variable that controls the design of something like Spacing in padding and font and color design token, aka a variable, What's not a design token but still a Variable. Think things like this. So many more variables in the world when it comes to especially coding. We did this earlier in the course, is look at our local variables where we went to General. Okay, total equals value zero. That is not a design token. Is the cart full? False? No, that's a bit of logic we used for creating our advanced prototype. It's a variable, but it's not a design token. Design Tokens is a way of us as designers to kind of like group the things that we spend all our time doing, okay? Font spacing, color focuses what we do with variables, but your developer, we'll just call everything that you do doesn't matter if it's color or font, probably just a variable and might shake their head at you going fancy Design Tokens. It's just the Variable and I guess it is that it defines our world. So we've made some Design Tokens earlier on, less good spacing. Still the design token, this represents eight pixels. So sam is our token. We use that instead of this to make it easy to update, both in our Figma design and in where our designs are being deployed in a website and an app that your developer is also using this variable name so that things are consistent. So why do we use them? Kinda three reasons. I think. One is that it makes things a lot clearer if I'm using border-radius in my, both my design and when I'm coding the website. So you building out CSS border-radius is so much easier to understand and logical, it makes sense. The second reason is for large complex designs, we need this kind of structure so that we're not just using the color values and pixel values on everything and get unwieldy real quick. Great for large designs. And probably the most important is when you are working closely with the development team. This is probably the most important reason for using Design Tokens, because what we can do is we can both agree, both sides, Design and Development, agree on a naming convention so that they're not trying to translate what you've called color one to what they're calling color primary. If you also use color primary, we all know what we're talking about. That's gonna be a lot less implementation problems. And later on when you're trying to update the design, you can say, Hey, Kayla, pardon me, needs to be this other color and you develop because my problem like an update that because it's written right here, color primary. So why don't we just use styles like we'd have in the rest of the course. Styles are fine, okay, they're very Figma centric though. There's nothing really wrong with them. The big upside of using say, variables as Design Tokens. You can use styles as design tokens as long as the naming conventions are fine, okay, because you've seen we've made color primary before and we've gotten a color value that a developer will know exactly what you mean. But when it comes to the term Design Tokens, often we are referring to variables. And we like Variables more than styles, mainly because we can do two big things which will actually do in the next video, a lot of talking in this video, I know let me just hit the ground, but I need to set the stage a little bit. Let's have a look at our one we're making in the last video, what we can't do with styles as we can't do these modes. Compact, Comfortable. That's why Design Tokens, aka a better fitting with variables. Because we've got these different modes, same with the colors that we made. Okay, we've got light mode and dark mode, whereas in Styles we'd have to go ticks primary light and then have another listing that says ticks primary dark or is this we can just have one and these two different variable modes. Yeah, the reason we use variables instead of styles is that you can get variables to reference other variables. We'll do that in an example coming up. But styles are kinda wrote their own thing was variables can all link together and get this kinda like chain action go. They design systems. Can you get quite tricky and quite complex way in Variables referenced other Variables, who referenced other variables? It's also the secret power though. Man, you've done some talking, Dan, have I clarified it at all? Probably not. Let's go and actually do something in the next video and we'll kinda make it a little bit more sense. Hopefully, you shouldn't see how much I'm waving I'm doing. Can you feel I'm waving to help explain it. Okay. Anyway, let's get onto the next video and actually do some stuff, put it into practice. 158. How to create Design Tokens in Figma: Hey everyone. In this video we're going to actually make some design tokens. We, okay, we are going to start with a first-level Design Tokens, nice and simple. We've done it already, and then we'll add a bit more complexity to it and show you the value bonus of that complexity. We'll look at kind of like some root design tokens and we'll alias those Design Tokens. Don't run away. If it all sounds too hard, it's not. We'll work through it step-by-step. Let's get into making some Design Tokens. Let's do it. Okay, So the first level, let's have nothing selected local variables. We've done this before. We're going to say, let's create a variable. Let it color, Let's give it a bit of color name, okay, I'm going to call mine color primary. And you don't have to call it color primary. It'll depend on what you've worked out with the developer and what you're calling things. Sometimes I won't use hyphens and I'll use something like this called camelCase, where it's a lowercases That with and then uppercase for all the different word changes. Some people will use underscores, but never any, just full-on spaces. Coding language do not like spaces, so there'll be something in here. We'll go with color hyphen primary. Okay, we'll give it the number that a color that I want, which is my green. Great, I kinda first-level, really simple design token. It's going to apply it. You and I have this selected actually what we can just select everything here in my little autolayout and say in this selection is this color. It's been used twice, both in this top box and the line down the bottom. So I'm gonna say I'm going to switch everything that uses this color in my selection. For the circles which are styles when stool jumping around for no good reason. Back to the top. Oh man. I'm gonna go to the one that is a square, okay, that is using a variable aka design token. Great, I'm going to use them on my button as well. Okay, this button here is going to be using that style. And that is great until you decide that actually this button needs to be a darker or lighter color, you want to change it. So we're stuck now with a very limited option. We can go through and change the primary color. And we can say actually I want it to be darker, but I don't want this top and bottom just the button. I need a really specific thing changed. So what I'm gonna do is I'm going to delete this one just to clear things up. And I'm going to name my collection. I'm going to rename this one. This is gonna be called my root colors. So I'm not actually going to use by root colors. Why do we create them? It so that I can create another collection called alias colors that are going to reference those and we'll see why in a second. So go to alias colors. We're going to say create a color variable, and this one is going to be button primary. We could color it here, that actually it is way better to go actually right-click, I'm going to sit this, create an alias. I'm gonna go to my libraries, okay, and I'm going to look for my root colors. I'm going to say that's connected to there. Okay, So button refers to this one. This one refers to that hexadecimal number. The second level now, now the reason this is handy is because that's more specific. Okay, this is what they call semantic. When they're writing it, where you're describing what the button does not want. The button looks like you don't want to call this one button green. That's how button primary, and it's referencing this color. Why is this useful? It so that you can have some root colors that we've got color primary, let me add a few in here. I'll speed this up. So I've got these root colors that are potentially going to use all over the site. And we've worked out, we don't want to apply them to every one thing because what happens when we need to change them? Well, we can do is have this alias option. We can go crazy with this alias. We can have as many different use cases, kinda semantic versions of this. We can say button primary, this button secondary that gets used on only the checkout, only if there's an error. You can get quite specific. But it can reference this color that can be easily updated and kinda spill through the website. So let's create one that's really specific. So this one's going to be OK. You wouldn't name them that long, but you can be quite specific. And I can say, I want to set this alias to, I want to use my libraries, I want to use the square ones and I'm going to be using my different weights, okay, so I've only got a few root colors, but I can have as many of these aliases is that I need for really complex sites. I'm going to say I need this guy and I'm going to say You, my friend are using that. Not the root colors. Don't use that. I want to use my aliases. So I can say button on Card for microsite. It's very specific. It's really easy to know what to do with it. And later on, if I go back to this huge sprawling website, There's used a bunch of different aliases and I say, guys, we're just going to update that secondary color. They can go to the root colors and say actually that is easily changeable Okay, they can go through and change this. And they've only had to update this one little place. But for all the aliases that reference it, they'll update as well. Likewise, if I undo all of that, if they come back and say actually, we want to update just this button here, I don't have to go and update the root color became because all I need to do is find the alias that controls it, which is written. Okay, I can see in here both in my design in Figma, that button on curve for microsite. Okay, I can go and find that if I'm a developer, either iOS, Android, web, and depending on where it's getting implemented, or maybe it's getting implemented across them all. They can go and find just this button. Find out where it is. In their library. There'll be storing their Variables somewhere. You will starring yours and there's local variables option in Figma. And you can go find that alias because you know the name of it. You can find it and actually say, Okay, I want to change this to end at the Variable. I want it to go to where? Let's go to this lighter version or the Docker version. Gives me kinda small control over what we're doing here for these little Instance use cases. But there's a nice big overview of the root colors so that if the brand changes, maybe it's a usability tests and you find that this orange is a permanent color, justice to light. And you've done some testing in the contrast ratio. Just a little bit, you get into the AA's, you're like cool, and everything spills throughout the site that's referenced. This are aliased it, they call this to mapping, where you've got one group of variables mapped to another group. You could have then have a third one that is mapped to the alias that is mapped to another root. I've never built anything that complex, but there'll be people that have and do all the time. Now other things you can do here in Figma to make things a little easier and you'll see other people doing it is first of all, naming with courthouse color primary, right? Remember we've got camelCase, lowercase, upper, upper no spaces. So that's a way of defining it in other one is we've used 500 for the kind of primary color. You can call it color primary. This one here. Color primary light. This one here, color primary, darker. It doesn't matter as long as it's consistent, like depending on what the developers use to coding things, the framework that they using K will have kind of like norms that they normally use for naming things, forgot what those are and depth those for your designs or vice versa. Get them to use what you like to use in terms of coloring. I find it's easier just to pick whatever the developers using. The other thing you can do is I'm going to undo that, is you can actually group things in here in Figma. So instead of using with these hyphens, you can say you, you holding Shift. I'm trying to hold Shift. And just like draw these, I can right-click them. Let's go and doing some weird stuff. So group with Selection, I can't really tell what it is. Hopefully right-click working better for you. Yep, Group new selection, great. So in this route Variables collection, I can create a group and this is going to be cold. Karla primary. In here, all I really need is 300 tab, tab, tab, tab, tab, tab, tab doesn't work. Metazoa. It's not working at the moment. K and you in 700, this might be just a tidy away. And I'll show you because you'll see it when other people are either doing tutorials or you're working with other people's work. That collection, a collection. You can have a group. And it just helps tidy up sometimes some really big kinda root colors, especially when you get into the aliases with is like a bazillion, different things going on. Okay? You group them into borders, into buttons, into cards. Okay, It's a way of collecting them all together in last thing and why it gets more and more powerful, we talked about in the last video is that root colors can have two modes. So I can have more variables, not in the right team. We've done color modes before, right? We can have a light and dark color mode. They're both referencing secondary color, but we can have a light and dark mode. I need to move mine into a pay plan, but you get the idea. You can build these like we've only just got started and we've got a reasonably complex Design Tokens going. How do you feel there's an auger too much further in this video, let's be happy. It's done and kinda got an idea and let's do another example. In the next video, you get a cup of tea, relax, take a break, and I'll see you the next video. Finding it a little bit hard. It is kind of HOD and tied to explain RPM doing a good job. Anyway, let's go into the next video and do more. Another example, help deep breathing 159. Creating spacing & radius design tokens in Figma: Hey everyone, Let's make some more design tokens. We are going to look at sizing and border-radius. And this one basically the same as the last video, but the different example to how bid this in. We'll cover some more topics as well just to kind of expand on what we know. But basically we're going to create some roots icings that has some values. We're going to reference them in another collection using aliases to make it easier to be really specific, okay, border-radius for a Card uses the medium. Medium happens to be eight pixels, but something kinda completely different. This padding for this card here uses the same sizing. The base sizing values are root sizing of large, two different things referencing the same route collection. Letting us be quite specific, but also giving us great control when we can just update the root collection to make big sweeping changes. Alright, I've talked in, you confuse everyone. Just get started, okay? Alright, to do it, Let's go to have nothing selected local variables and we are going to create new collection. I have a sizing and I'm going to create my face variable. This one's going to be a number, okay? Because we're gonna do extra small. Just gonna be to go another one will speed through the rest of them. Okay, so what we're gonna do is use T-shirt sizing K4, these values here I'm using an eight point grid and yours might be different, you might bes and 1012, okay? You can do your values as you like, okay, and I could totally go through and say actually the spacing on this side is not going to be 16. I'm going to replace it with my variable, okay, So I'm gonna go you and you are going to be my, so what does it 16, which is my large perfect, do the same for the top as well. The problem with leaving it here and not go into that next level with aliases is that if I do the same thing for say, radius corners, Let's go to backspace, grab the whole autolayout, and I want to add rounded corners of large as well. The trouble with them all referencing just large. If I need to change the size of large to be something else. Okay. But I don't want it to be the radiuses you like. I can't change because if I change the radius from 16, okay, let's do it to 30 for example. I've also gone change the padding for that. What we're gonna do is just keep this kind of like coal or root sizing. Okay, and then I'm going to create another collection that is my earliest one. So Alias slicing. So I can say actually I got something has a lot more specific. Again, this one is going to be okay. It's it's gonna be border radius, my card. Okay. And I can say, I don't wanna put it an actual value. I want to create an alias. This is actually for my border, for my cards specifically I'm going to use lacZ. And for the like, padding or spacing for my card is going to be I can still be large. Okay, I can say You are large, it's going apply it. So let's grow the border radius for this and say you are no longer looking at large. You're looking at this more specific alias. This is border-radius for the Card. In this padding down the bottom here, left and right is going to be you padding for the card. Padding for the card. Why is this more useful? Is that it's really easy for me as a designer to no way the padding of the card is saying with the developer when the coating out the site. But it also gives me control later on to either do a big global update to say, Okay, everyone, we're moving from eight point grid. Let's go to my sizing root and I'm going to say, everything now is going up to 12th. Now everything is gonna giving up a couple of points. Say everything's going to be is it 16? I don't know if it's going to be 20 now. And you'll notice that both the radius, let's go up to 200. Too much. Both the padding and the radius come along for the ride. So I've got this kind of like good control over everything. But probably more importantly, is I've got specific. If somebody comes back and say, actually I need to change the radius, you don't change large because that's what it's referencing. You go to the alias for the sizing and you say border-radius is not gonna be large anymore. You say, can it be not large, but can it be, we'll just use medium for the radius for the card. There we go. We've made that change. We didn't have to go and create another variable that said, what medium is? Medium is a points, okay? You just got to switch them around. Which one this is, is referencing because you a nice can control what we're doing here as well as padding would be its own group. And we could a group for all the padding and create a group for border-radius. You can end up having groups for everything. You can decide on splitting them up. We've got sizing aliases and Color aliases. Those are good to have separate that can be smushed together, that just be a little bit tricky to work with, okay, but fonts, which you can't do quite now, but I bet you'd be able to do in the next soon update for it. You can do stroke thickness, you can do lots. Any sort of design element here in Variables. And because we're affecting the Design, recording them Design Tokens, Design Tokens I'm using in this kinda like simple use case design tokens depending on where you are and how big the company is and how invested they are in a design system. You might find that Design Tokens also represent the, why we using it. The reasoning behind we using this particular style on a card. So there's more to design tokens than just what the Variables says. Padding Card equals large, but it's the core part of it. Another thing I want to point out about Design Tokens is that the naming conventions are super important. So padding card makes sense, Lodge makes sense. And the reason we don't use actual numbers is because the actual numbers, it will depend or change depending on the team you're working with. So I know, Let's go to sizing root. In Figma. We use pixels. But when you're a developer, they say building a website, you'll use something like this. You go one, what does it count? Remember REM, one rim or maybe one aim that will represent the same size. 16 pixels in Figma is one rim. In web design, it might be one DP and mobile design. Those different teams, they're going to use different like the way that they described the final outcome is slightly different. But if you're using this as a consistent thing across all three teams of four, if you include yourself as the design team, everyone knows what they're doing. Large equals their version of 16. And they had different developments spaces. And if you say, Hey, I need large to be 16 pixels, they can go through and pick the a version of it. You can get them mapped properly to the different development teams depending on how hardcore your design system is. But know that 16 pixels is not universal. It's universal in Figma. Okay? But the other development teams are gonna be using different measurements to get to what you want lodge to be. That's why we use Tokens, makes it easier. That's the same, but colors, we use colors as, where are we going? We're going to use the a root colors. We use hexadecimal numbers here in Figma mostly. But you'll see that there's an RGBA version of it and that is written differently encode when it's written in SPSS or SAS or less, or iOS or Android. But we can all say that primary color 300 is this green color and they can define it how they need to in their different development spaces. I'm making this easier or harder. Okay, That'll be it for this video. What we'll do is we'll do one more video after this looks like when you should use them, when you shouldn't, who should be using them? Who shouldn't? Alice do that? Now, seeing the next video 160. When would you use design tokens in Figma: Hi everyone. Hey, this video we're going to just wrap up by Design Tokens. We're going to talk about when you should use them, when you shouldn't use them, and what stage should you start using them? So let's jump in and do that. Now. When would you use design tokens? You'll be using Variables all the time because it has some useful stuff like, remember the Advanced prototyping where we're doing, where we got to click a button and edit to the total. And we also did. You'll also use it even if they're not being used in their traditional design token fashion, okay, so variables that do represent a color, color primary, you might use them in your designs. You are using Design Tokens, where they become more there. Full Design Tokens himself is when you're working with a lot Jimmy, they are larger business with a larger design system. That is Jim, really, the most useful is when you're working with the development team. And generally that development team has internal working for accompany large enough to have its own internal UX design team and development team. And the connection between you two are quite tight. You might be working in the evening, this same office. So that the things you do flows through the design team really nicely. Especially if you have two different places is going to iOS, it's going to Android, it's going to whip lots of different places that might be going to design tokens for consistency is effect. So when would you not use design tokens for smaller jobs? Styles work perfectly. The big drawback for styles is that you can't reference them using aliases, but for lots of jobs, there's just no need to sit up there. Kinda complexity with groups in different collections because it might not be that needed. Jiminy those smaller jobs as well. And there is a disconnect between you and the development team who's implementing your design. And you do not want to spend a whole bunch of time getting a Design Tokens, getting a structure naming conventions going only to have the developer ignore them, grab your figma design. This happens layers and go about big. You've gone eight point grid and I've gone nine, looks about right? And they've gone and built during sizing, they'll view, build their own. They'll need to build Variables, and they will build design tokens. But there'll build them in their own language using their own way, a methodology depending on the way they've done the last job, the way that the framework is structured already. So be sure if you are going to put the effort into building design tokens that the development side of things are aware of what you're doing. You've got a consistent naming convention. Otherwise, they might just ignore what all you've done and do their own thing. Okay, So smaller jobs generally don't need Design Tokens. Larger jobs generally do. It's a good general rule. The last one is weird. Does it get done? When do I start building these Design Tokens? It's up to you when you are new. At the concept stage. It's probably not that useful to start building Design Tokens just yet. Because you are, it's about rapid prototyping, not slow prototyping day. It's about just getting it out, getting a tasted. What are the client thing, What's the feedback from the stakeholders? Use styles to keep consistency. But don't be building out Design Tokens just yet. Because often it's when you've got the final kind of client sign-off or the projects moving into development, then you can spend some time getting everything nice, working out a good system because you've got a sense of what the job isn't. The scope of it is to make an appropriate thing, work with the development team at that stage. How do you name it? How do you want me to name it? With your Leading the naming or following what they're doing. Generally, it's done after at least yeah. You got a good foundation of what you're doing. If you're working in an existing company and you're doing this course, you'll have a design system probably already, or you have to go through the old stuff that I've got and build one out yourself. It's done after all that kind of like fiddling around picking fonts and colors as already done. Lastly, there is a lot of upfront work with design tokens, but the long-term usefulness of them is amazing when you are working in a larger business. So yes, there's a lot of work upfront if you're thinking, man, it seems like a road work. It is until you've deployed your design and it's everywhere. And then you have to go and make updates. And it's just a big headache because this person that's got the WordPress blog and this person who's managing the iOS app version, they're all, you're trying to manage and juggle them all again. Whereas if you've got an, a sound as set of naming conventions and design system, you can mix it easier for everybody. That makes sense. You go a little bit waffly. I hope that helped you understand a bit what Design Tokens, where to use them, we're not to use them. You go, That is it. I will see you in the next video. Alright, I'm gonna go back inside the machine, got out for a little while, back behind the screen. Let's talk. See you next video. 161. How do you animate along a path in Figma: Hi everyone. In this video we're gonna do this. We're going to get PacMan to follow a path and animate in Figma. Kind of, why did he say kind of? Because before we get started, just so you know, animation in Figma is quite tricky. So we're going to use a plugin called motion. It's really kind of cool, timeline keyframe based animation. But once we've made it, Figma doesn't really want to accept the thing that we've made these workarounds and we need to do this in the course a, because I get asked how to make animations on a path all the time for Figma. And because you're going to spend agent on the internet looking at animated stuff, animated victors. And people are going to show you up until a point and then they're not going to talk anymore. All the tutorials that I've ever found, they get to the point you're like now, implement them in Figma and they don't, they just kinda get to this point ago, Look, job done. But there are some quirky things about Figma. And at the moment of this recording, all of these Animations get reduced to gifts which work and we'll do. But there's a few things that don't. So let's get into it. Explore, understand, be super knowledgeable. And of course I know Figma awaiting for me to release this video to make all of what I just said and what I say in this video to be not right. Hopefully there's an update soon where we can import, I don't know, JSON or animated SVGs. So do check that. It might be really, it might be out. I feel like it's gotta be on the roadmap not being right up until today. So now let's get in to get started. I've got phone frame. I put a background image in it is in your exercise files. If you want. It's called abstract background. It does nothing except they look cool and I'm a little Pac-Man. If you weren't there for the Essentials course, if I draw out a circle and go to my selection tool, you can make this. Number them, them, them, them but okay, so that's how I got my Pac-Man. You draw something and then jump back in K. So for this to work, we need a path for it to follow. I'm going to use my pin tool. So the peaky and I'm going to draw something that kinda goes, I'm clicking and dragging out to get a curve. Okay, It's kinda go like this and then maybe something expanding the path down there and then something like that. Okay. Escape when you're finished a couple of times. I'm going to move this on mainly because it's going to expose an issue that we might run into. So we've got the shape, we've got the line, we need to find the plugin. The plugin we want to call motion, like there's lots of different plugins motions. Probably the most robust, It's really good. But again, Animation in Figma as just auto, it's knows what it's made for. But everyone keeps asking me how to do animation on a path and we can kinda do it. So what we need to do is be able to zoom out and kinda be able to see both of them. Okay. A little bit of jiggling around. Now, I want to select on my, It's called Subtract. Subtract his Pac-Man. Actually this Rename over here, Pac-Men. And for some reason it doesn't update in this, but if I close it, reopen it. There it is, Pac-Man. Now if you've done timeline animation before, you'd be like, Hey, this looks awesome and it is, okay, it's very much like Adobe Animate after fakes Premiere Pro, any sort of timeline keyframe animation tool. So we're not gonna go into too much depth here, but for those people. And there's a lot of us who know how to use the basics of those. Motion is a great step. Who just do something basic together to get something made, but also to see where all the problems lie, come to an education process. Now this will change over time as Figma evolves for the moment, Let's run into those issues. So why don't wanna do is I want to say Pac-Man, I would like to. Can you see this option here, X and Y, all three of these are linked. I can say you beginning one of them. It says pick a path, that path, and click OK. It's going to work. My guy there, he kinda worked. Kind of kind of got stuck there. Yep. It's kinda working. If yours is the same. The reason this isn't working is because my vectors outside the frame that I'm working on, both inside or both outside of it. It doesn't matter. Okay. That's what it needs. Then there'll be able to connect up. There you go. Good bit of animation. What's wrong, Dan? Nothing wrong except, let's come Pac-Man. Let's click on these. First of all, the easing needs to be linear. Let's go to in and out. And let's do some adjustments for the time. So I'm going to click on Pac-Man here. I'm gonna go to the top. I'm going to type in account type in 1 s. If you do, just put some 0.1. So I'm going to say one is for a second. I'm gonna get my workspace to drag it down so it snaps to the edge so that it doesn't just plays in that little loop. Next time. Alright, The strange thing about Figma now is that it won't allow you to just keep that. They're like, I can see it playing. Why can I just have the animation? Just like throw it into a Instance or component. I can move it around and it'll play on its own, much like a video. It's not how it works if I close this down now and preview it, It's ever look Doesn't do anything. This may change in the future at the moment, it can't make this happen. I can export it and bring it back in. So that's what we're gonna do. But it doesn't always doulas stuff the plugin does. But my prototype mode can't take this information and ported through to our prototype. That's the biggest limitation at the moment. So how do we get rounded? Couple of things. One is, let's export it and re-import it again. So you've got some varying export options. The one that I want is probably SVG, because you can animate SVGs now, the victim will be there. Unfortunately, that doesn't work. You can import that into a figma or at the moment, lumps in a big on animated version. And this one he had Div. This one here is a JSON file. I liked JSON because we can turn it into a Lottie file, which you might not know about now, but unfortunately end up at a data in there as well because at the moment Figma, account and port or Lottie file or JSON file. But you could do now is get the animation going, not prototype it. And saying this JSON file to your developer, there'll be able to implement it, okay, that might be the workaround for you. You can't see it in Figma, or at least you can't see this JSON file, but you can send this to your developer to get made into an animation. Alright, but say we want to see this in here because we want to prototype it. It's part of what we're doing. Okay, so there is an option in here called GIF. We all know what a animated GIF is, okay? I'm gonna leave it all as default. I'm going to export it and we get it. There it goes, chug and through. This will work two-degree case. I'm putting mine in my junk drawer. I'm going to leave it badly named. Let's export one more version, the video, because we're like, I'll just use the video. Unfortunately, it exports as an mp4. Mp4s are great. They just don't have transparency. So I can kinda like use it on top of stuff. It makes a big, solid lump of a file that I can't see through. So we'll look. I've got those two files. Let's have a look at both of them. So I got my GIF. There is excellent. And let's have a look at the MP4. So that works as well. A gift can have transparency and Mp4 can't. So I want the GIF because they look fine. It's a little pixelated, but we can get around that. So what we wanna do is I wanna do a couple of things. I don't want to see the line. And we can do that by finding the victor and just tuning the stroke down to 0%. Okay, that'll work. And it actually exported the background of this. What I might do is actually grab this and the victor, drag it out. Okay, can't see it, but there it is. They'll go to Outline mode membership. Do. Okay. I'm going to select both of these. I'm going to open up the plug-in. Again, I'm using the shortcut Command Option P to open it up for the plugin that you've used last or Control Alt P. You said that shortcut. Well, I'm going to try and export it. It's going to say I need a frame, so I can do that. Okay, I've got these both selected. I'm gonna put them in a frame. I'm going to name that frame, but bidder call it Pac-Man. And now I'm going to export it. And export the GIF best quality, high-quality frames per second. I think you need the paid version to go up to the higher frames per second. But hey, it's going to work. Alright, Pac-Man GIF, that's what place I made one earlier. And let's look at Beckman GIF. Here. You guys got transparency. Equality for GIF is always not great. You can switch it from best to high-quality. But now gifts one of the files that and occlusal this down that Figma can use. So we're going to put that in some way. I'm going to make sure it's inside of my frame. Okay, kinda starts there and kinda whizzes around. And I get them to kind of in there. Let's preview it. Now. You go, There's my little animation. Refresh. He cuts out the bottom. Okay, it's because that, Let's go Pac-Man. Can you see my path kind of gets right to the edge here. So I'm gonna have to make my frame. Now the vector, the frame Pac-Man, bigger. Just to accommodate Pac-Man as he goes around on his little victor path there. Is that enough? Probably enough. You go, you can get them to animate on a path. At the moment. It's only a GIF if there's a new version or I just don't know all the way of doing it. I really want Victor, because gifts are, the animations aren't great. Or as my guy, there is just a few things to remember when you are creating it in motion. Makes sure that both the path and the object or inside the frame, you can turn the opacity down on the stroke that it's following. And if you want it to be transparent, just put it in a frame that has enough space around the edges for our little Pac-Man guides and I'll get cut off in bringing that GIF. Once you've done it and you might sell it into the client or TIA team, then you can use motion. Forgot what the team wants to. They want animated SVGs which are good but quite limited in what they can actually accomplish. If it's simple vector stuff, it might be fine. Okay, but also it might be animated CSS, you can do basic stuff with them as well at the moment, for me and my knowledge, a JSON file is probably the best, most robust implementation. It keeps a vector. You can actually end up controlling this Animation in code. It's not like The Gift where it's kinda made and you can't change it ever. You can actually control stuff inside. You could change the colors of the Pac-Man. You could change sizes. That's all done in code afterwards, could be some dynamic cool stuff going on your website. I think the biggest takeaway is that a Animation in Figma at the moment is not what it's made for. It's about rapid prototyping, but as it matures, I'm sure it'll introduce lots of other features. I'm hoping JSON and maybe something called Lottie will come into it soon. It may be animated SVGs, that'd be awesome. Alright, that is it, animating our Pac-Man on a path in Figma. See you in the next video. And actually before we go, a little sign off from my son who's been home all day, who's sick? Sick for the first leg 2 s to now it's just being annoying or day. Take it away, Finish finish off the video she received were the first 2 min. So I know that's what I'm trying to work with people. Yeah. See you next video. Bye 162. How to add Lottie animation files in Figma: Hi everyone. In this video we're going to put in Animations from Lottie into Figma. But to cut to the chase at the moment, we can't put Lottie files natively in Figma, we put in gifts and then we send the developers the Lottie files. So it was a little bit of a workaround at the moment. This will change them sure, soon as I hit record on this video. But for the moment, Lottie files can go in natively. Let's work out, Let's look at the plugin and figure out the way to work around it at the moment. Alright, first step, if you haven't heard of a Lottie file, and I'll say it there, my accent. Lottie files. It's really common animation file used actually in production on a website or an app, uses JSON is the underlying code. It's very fast to load. It is very small, which is good. And it contains all the good stuff that we need, like victors and we can do all sorts of kind of timeline animation. So Lottie is awesome. And like I said at the beginning there, we can kind implemented in Figma. It's like the last video. We can implement a GIF. And then seeing the developer the file that they need, the trouble is gives a gross. They work. Make two files because the reason they look kinda gross is when they're on a background that needs transparency. So let's open the Lottie plugin. So Lottie will require you to sign in. You can set up a free account. You can get quite far on the free account. I find often just using the website, it's actually easier. You can go in here and say, I want loading animation. Hey, instead of spending ages trying to design it in Figma, okay, there's a bunch of stuff in here, and there's a bunch of free stuff, which is awesome. But let's do it in Figma here. Let's do it loading. Figure out which one you want. Let's say we want this cool thing. So I can insert an SVG and that might be what you do. Scalable. It's victory, it's good. And what you do is, let's suppose that distracting. You just have to note this when you're saying it to developers like this isn't animated file. Here's a link to the JSON file, all the Lottie file. Okay, so you'd link it from here. There it is. You'd open it up, your download it, and you'd say, here is the Lottie JSON file. And that might be it. That might be the way you connect both of these together. You just put an SVG placeholder seeing them the link. But let's say you want to demonstrate the gift. So what you can do is let's delete that. And at the moment we can't. Hopefully soon, you might be watching this and you might be able to click Insert Lottie, and it might be working perfect. It will happen soon, okay, it can be done. It was actually in Adobe XD, so they're doing it. We on Figma is roadmap. Is it gonna be inserted? I don't know. Hopefully it'll be there soon. Let me know in the comments. If it has updated, I have to come back and re-record this video. But for the moment what we do is we say Actually this is, instead of GIF, I'm going to make what size will make a big one. Okay, It takes a bit to make it. I'm gonna put it in here. I'm just going to make sure because it's kinda just dumps it anywhere on the page. So make sure it's in the frame that you want to preview. Okay, so I'm going to close it down now and I'm going to have you a preview you there it is. It looks fine. I don't know. I felt that it looked worse. The boss, this one's actually pretty nice. I've made a bigger file and scale it down so the gifts looks alright. Okay. Go, It's an animated GIF. Diego. You put in the GIF and then senior developer again, that Lottie JSON file into trouble is it's not Victor. I can't change a lot in hand, but I can do a lot of color adjustments in the Lottie file. I know for the free version you just take what you get K, but you can with the paid version, go through and say, alright, it's fine, my one. It's pretty cool. You can go through and if you've got to pay version and go to Customize, and you can pick different colors. Again, save those Animations, make your own palettes. But for the moment, that is, you need an individual plan, which is a pipeline. But there is loads of cool free stuff. And I'm looking forward to re-recording this video when we can actually put in Lottie natively. And then when we do our export, the developer doesn't have to be cassette, a separate file. They can get it from the documentation and from the inspect panel. If you want to make your own custom Lottie file, you can, you'll need something like Adobe After Effects as a plugin called body moving out of the scope of this course. But if you do want to check out my after fixed course, I'll be updating that real soon and making sure there is Lottie animation creation as part of it becoming the default. Alright, lossy in Figma at the moment, we're just kinda sticking in a GIF in sending the developer the Lottie file. That's okay, we can make it work with. They'll slightly crusty edged GIF. Alright, that's it, I'll say in the next video. 163. Making Your Designs Accessible - A Guide to Accessibility plugin in Figma: Hi everyone. In this video we're going to look at accessibility in Figma. We'll look at a couple of plug-ins that can help us and what things you should be watching out for when you are doing your designs. Alright, let's get started. First up a disclaimer. I'm not an expert in accessibility, but I wanted to keep it in this course because it's a good plugins. There are some main things to check out when you are doing the design, but there's a lot more than I know about accessibility. But you go take everything I say here with a pinch of salt and do your own research. So the main things you want to focus on when you're doing your design work. On the Figma side, K is kind of two main things. It's to do with fonts and how legible layer and touchpoints, how clickable some of these buttons are, and how far apart they are, fonts and touch points. To get started, what I did is I created a new page with a new frame and I just threw a bunch of my elements on here. They are from my main styles because I just wanted to throw them all in and run some checks to make sure that we're hitting in the right direction. Plus it's nice and clean on this one simple page with one simple frame. Now, when it comes to plugins, there's a few of them. I don't have any particular love for any particular one. They're all grades. They do enough of what I need to do. Ad stock and contrast, search for those in the plugins. Remember these might not be around by the time you get to hear these change with the time some of them have paid, some of them have free will. Start with the one that is quite visually easy, doesn't have a lot of detailed to it, but it's quite cool. So it's got to contrast. Gotta run. And it's running on my frame here. And you can start to see a few things. Somethings are green, some things are red. Basically it's a ratio, it's something to one. You see that's 3.1, 321 and it has gone red. It's not good, not enough contrast. This one here is the same contrast, 3.13, but it's a larger font size. So there's a trade-off between the color that you're using and how big it is and also the weight of it and what's on the back of it. See here down the bottom of this one, the editor will zoom in. So both of these are the same size, the same font weight, but the bottom one there has a lot higher contrast ratio. So as green and the one above it doesn't have such a good contrast ratio against that purple. The differentiation between the two is not high enough to pass the test. Who makes the test? Most accessibility tools refer to this document here, this big, ugly W3C document. That's what you're looking for. If you want to go further into this, you'll see that word around the WCAG. Wcag, nobody calls it there, but it's the Web Content Accessibility Guidelines. And you will find proper descriptions with examples all through here. It's quite tricky to use. I end up loading it up. Okay, I've ended up in this quick reference, this will change. We're using V2. I think they're drafting up V3 at the moment, but I just do a search for contrast, non-text contrast. I'm looking for contrast minimum. Yeah, there we go. Let's look at the full description. Basically it says large text has to have a contrast ratio of 3.1 logos with text in it doesn't have to have any contrast requirement. So this is we go to upskill your knowledge. Now know that there's an AA and AAA down the bottom here, you see this needs a seven to one, much higher contrast ratio. You'll see here in this plugin that you can switch between these two. You see, even with large texts, it's the wrong color. So there's none of contrast ready to get a triple a rating. And you gotta check to see which contrast ratio you are aiming for. Now, in fairness, I've never worked anywhere that's required, any accessibility requirements, no legal requirements. But I'm sure if you're working for a government agency as well, I've done work for government agencies and whilst they might have requirements somewhere tucked away, there's nobody actually checking them. So it's kinda optimize the designer to make sure I'm implementing them. And if there ever was an audit, I would fail on this, but it takes here. So how do we get rounded? This one here, you can just play around with things like this. Things cut big. My small screen. Let's do it with this one here. So let's say, let's adjust the white. Okay, I'm jumping the weight up using my sweet shortcut from earlier Control Option greater than listening. And I'm going to refresh it. It's bigger, still not working. So to have a look at my colors. So I'm gonna go over here. I'm gonna go to my, let's say my seven hundredths. Let's see if that we'll pass the test. So it's changed to the 700. Let's run it. Now. It's got a much higher contrast color ratio. And it works. You can see how important to understand a bit of this early on in the design, just to make sure you have got colors. They don't look like danger. I pick the red which I don't like. It's a bit of a pain. But at this size here, it works great. Now just so you know, some of the basic rules are this stuff here. So if it is 18 point and not bold or above, it's considered large text. You get away with a lot lower contrast ratio. Large text is also considered 14 point, but only if it's bold, still considered large text. Again, you get away with a lot lower contrast ratio. So contrast ratio for fonts is a mixture of the font size, what weight it is, and what color it is compared to the background. Let's have a look at another useful tools. Have a look at stock. One has a bit more into it. There's a paid version of this as well, but let's have a look at the contrast I'm going to dive into my button here. And it's telling me these two here, it's passing the AAA test. It's considered large text. It's got a three-point one contrast ratio, but it was normal text, non-bold, smaller than 18, it would fail. It has suggestions you can see it's referencing the WCAG, okay, so early on in your design, once you've got some text styles, do a little bit of a test with stock or one of the other ones. Remember, ad is good, stock has good contrast is handy just to see, are you designing something that is going to eventually have to be changed anyway, I got really weird is too small. And when it comes to text, text is considered stuff that has to be red and usable. If you've got text that is like to have a look. Here. This takes in the background here, this would fail the contrast ratio greatly. This is considered incidental text. It's like pure decoration and it serves no user purpose like it's just as a graphic. So you have to worry about those. But then sometimes you run to this stuff is like, is it usable, is it not? They can get a little tricky. The contrast ratio is a science, but it can get a little bit messy though. Let's talk about touchpoints. So let's look at this one. We just happened to be on this page. It is 32 by 32, and that's what I'm using full my Shift E for my prototype. If I click on this and go to this page that has a touch point, and the touchpoint is considered not the graphic, but the active area. So if I go and preview this, It's the bit that can be clicked. Can you see down the bottom there that's that kind of active area. That is the touchable areas. So what you can do is you can sometimes keep like that'll fail a touchpoint test. Okay, so what is the rules for touchpoints? The different for different operating systems. So an apple, okay, they want the touch area or the touch target to be, we've got 32 by 32. Apple wanted to be 44 by 44. That's the minimum size. Android is a little bit bigger, 48 by 48. And because Android's owned by Google and Google run the Internet, it's the same size for websites as well, 48 by 48. And Google has ways of doing tests to test how things work, especially on mobile devices, to see how you rank for search results. So it's an important thing. So let's look at a way of getting that stay the same size. But be the, let's say 48 by 48. So I'm going to go to my main component, okay, here it is. And you see 32, 32, I could just make this thing 48 by 48, but it's too big or the touchpoint to be bigger, but not necessarily the icon. So I'm going to undo all that. What I'm gonna do is I'm going to make sure I've got the parent. And I'm actually going to, so it's in main component is the vector inside. I'm gonna grab the outside. And remember the shortcut formula. You can hold down the Command key on a Mac, control key on a PC, and you can actually change the frame size separate from the icon so you could move it out that way. It's easier, probably just a slick the parent make it an auto layout shift a. And I'm just going to add some padding. I'm going to edit all the way around. Remember the Option Shift or Alt Shift, or you can just do it manually over here, type it in. What you're looking for is a total of 48 by 48. For me, I need to add eight by eight. I think that's it. We go total of 48 to all this padding will be included in the touchpoint. So I'm going to update it. Option three, say published all the pages being used in a few places. So I gotta be careful. Let's go back to here. Let's go back to this option. Let's review and let's update them all. And you can see back here, this is updated, it's 48 by 48. Should be able to test it. Now, if I click away, it's kinda suggesting way to collect, but you can see the touch areas much bigger. Okay, so that's 48 by 48. If you're developing for an iOS app, they want it to be 44 by 44. Now this changes. Go double-check. Don't take everything I say for gospel. Go into a little bit of research for the platform you're developing. For. The other thing that is consistent between both Android and Apple, and website design is a 16-point gap between them. So this has a huge gap, so they'll work out fine. But any buttons and icons needs a minimum of 16 points between them. Alright, last things to consider, those in the main ones, right? Getting the font size and their contrast, right, making sure the touchpoints are big enough in this space between them. But there are lots of other accessibility things to consider. Looking at your persona, what age demographic are you working with? What are their technological abilities? Doing? The minimum might not be enough for your audience are the things you can look at. Things like colorblindness and pull site. Some of the apps have helped with that as well. It's have a look at, it's have a look at this one here at now run the colorblind simulator. Came on, they freak free account, but I can select my artboard. Let's find one that has some content on it. It's click on this one. Okay, so I'm going to use the comments app board. And what you can do is you can pick a type of colorblindness. Then you can switch between them and see what it's gonna look like somebody else. And is it still usable? Is the contrast ratio high enough? Again, there's a lot more to Accessibility. Just covered some of the basics here, the main ones that affect our design side. There's a lot more that goes into the development side. People that need things like alt-text when it comes to images, screen readers, how the keyboard can navigate through a website. There's lots to think about when it comes to accessibility, but there you go, That's my overview. But ticket is just a starter for learning more about accessibility. Alright, that's it. I will see you in the next video. 164. What are some tips for working with colleagues in Figma: Hi everyone. Welcome to the working with colleagues, a section. This video is kinda like all the little tips and tricks that you can use to help with that sharing process with other designers are the people in your organization. There's useful widgets, loads a shortcuts, Let's of preferences you can turn on and off when you're working with a big team. They stumping, alright, so the easiest way to connect with either clients or colleagues about a file is using the Comment tool. Casey is the shortcut and you can leave comments. And you switch to this tool here and you'll see all the previous commands. You can click on them, move around. If you have got a team that is calm and happy and they're just comments everywhere. A handy shortcut is Shift C, toggle on or off that aren't disappear. That is kind of disappear visually. Very true. Comments are designed to be unintrusive. They're useful, but sometimes you need the big guns. You need a giant Post-it note if you go to widgets, okay, so there's a really good widgets. I'm going to put in the word sticky. And there's a couple little appear and both of these are pretty good. I'm use the annotations one like this one mainly because it has the little bubble extras which this bottom left can you see it has that little thing. Why that's important. I'm not sure. You can have your name in there as well. Okay. And your notes and pick a color. Very important. Post the notes should be yellow, so I'll leave it like that. And just when you're laying it out, just be careful. We'll use some of our Figma shortcuts because if you're dragging this around, so grabbed the title, drag it around, it'll go inside of frames and it's probably better just to sit on top of them. Okay, so watch this when I'm dragging it, hold my spacebar. Okay. And that'll mean that went jump inside of a frame and I can use it to mock up things a little easier. Okay, so that's the first widget. The other one that's kinda handy is a to-do list. Knowing you've still got work to do. I love working from a to-do list. I got them everywhere. Same thing, widgets and just typing to do. There's a nice unquote, a little to do. And it does exactly what you imagined. Add it to do. Okay, editing so that other people know what you're working on. You might use it for yourself as well. Just as a little checklist on the file, especially handy when you have to go away from it for a holiday, work on some other project, you can come back and it's all kinda tightened together. Again, this is just a little module. You can move anywhere. I find that a Hindi widget. When you are sharing documents with your other colleagues, you can hit share right, and copy the link, send them an email. What I find really handy is I'm going to jump to my main components document. Let's say that I'm talking about the buttons. Instead of sending them just to this file that's everywhere. I can say, click on this section. I can go to Share and there's an option here, it says link to current section. So if I grab that link posted in a Google Doc, Okay. Can you see it links directly to that section, not just the whole document? Great. When you're linking, like, especially via e-mail and you want to point somebody the right direction. You wanted to have to say on page four in this section, you can link drinking to it. It doesn't have to be a section. You can link to anything you want this module, they're the same thing happens. It doesn't matter what you have selected. We'll link directly to it. Alright, this brings up a good point. When there's multiple people using a central design system, they might be lots a little arrows around or you might be running a meeting and everybody on the file and is like arrows running everywhere. I find it handy to go Command pretty quick actions. And if you type in multiple cursors, it's on by default there is a shortcut that I'll never remember, but I can turn it off. And it just means even though they might be ten people in the meeting that you'll kinda demoing this to. You can turn them all off. Other thing you can do if you are presenting is you can go up to here and go to the spotlight. Me. And what they've just means is everybody that is still in this document. I've got it open on a couple of computers, my PC laptop over here, and I have it opened in the browser. What that means is that they will see the zoom level and the positioning of where you are. If I zoom in here, everyone else viewing this will be in the same zoom level. Looking at the same thing makes it really easy for presenting to have a look at the desktop view. Can you see it's move lifts actually do it a little taste. Moving around here. This other instance of it doesn't matter if it's you the moment that's another version of me. But it might be your whole team if you say to this option here, follow me, they all follow along. They can ignore it and you can stop it afterwards. Next thing is to do with notifications. They are great sometimes and then sometimes not. I've got the desktop app. So one of the perks is you have this little module that runs that appear when people add notes to your Figma file, you can have conversations through it. Sometimes though you would just part of a file, say the main styles. You don't actually need to be part of the conversation. There's lots of people talking about it and you just want to get off it hands up who's email is full of Figma notifications that aren't relevant to them. What you can do is you can go into your account settings either in the website or here in the desktop app. The notifications kinda spin little time deciding on what you want to come through to you. It'll depend on your role in the document. Often you just need things like, I only want if I've been mentioned directly or were applied to one of my comments, we can do them off and utilize something like the desktop app version of Figma. That's the only way to get the notifications through here. The other thing to consider when you are sharing is I've got this and I wanted to share this. Okay? The way that you set this up, when you're sharing the link, you can share both the design file and the prototype. You want to say the prototypes so they don't go to the design file better for clients, but also other team members. What you can do is what have you sit in here will be remembered. The link. Why do you mean by that? Is if I say set to actual size and then hit Share, it will open on the other person's computer at actual size, not in the Fit to Screen, same with the Chrome. So I go back to here, I got to prototype and I say actually I want it to preview in iPhone 14, but I want to use the red version. Now if I go in preview, but make those changes and share the prototype, it'll appear red and there's, so just be mindful, get it the way you want before you hit the share prototype. Last shortcut I just remembered is Command or Control L. You can see whatever you are on it. We'll share a link to that. You don't have to go through the whole hassle of going this and then clicking on that Command or Control L, Mac or PC. The same for both prototypes and Design View. If I've got this selected, I go Command L on my Mac, control L on a PC, can you see is linked to that frame. Now for paints this into a browser, you see it's linked directly to this page here. I'll go and add that one now to the shortcut sheet before I forget. Alright, so that is all the kind of like small little bits, the kind of tips and tricks for sharing with clients. And there's loads more substantial Tips and Tricks working with colleagues and we'll cover those in the next few videos. 165. How view version history duplicate and restore in Figma: Hi everyone. Hey, we're gonna do a deep dive into the version history. That's this over here we touched on earlier. But there are lots of other cool things that can do. Want to wrap it all up in a nice video. We'll talk about automatic backups, version history, how to go back and forth and time, how to share links of previous versions. All sorts of cool stuff. Let's jump in, right, everything we need is hiding in something called show version history. We looked at it briefly earlier. Let's go into it properly. And so I have nothing selected. So you can see the filename here and it should be there. You can find it under here, under the F, under file. There it is as well. Okay, either way, we have our version history. Now, first of all, let's talk about the auto saves. So there's a big chunk of auto saves. Hey, your one that you're looking at probably only has auto saves on manually saving versions of my history as I go along. But you can see here a chunk of auto saves. Now Figma is, it saves it every like 30 min that the file is idle. Nothing has been changed on it. So it doesn't record everything and every step just Records kinda like yeah, pauses, records just before you go away for a bright color pause. And it will list everybody that's worked on that file. It's just me working on this file at the moment. So it was less like an undo and say Photoshop and more just like key pots, big milestones, which because it's great, that is automatic and sometimes you want a bit more granular and then you'll have to do a manual save the one thing to know about any of this version history with a you put it in or it auto saves, is that if you're on the free plan or if you're in drafts, it only saves it for 30 days. Okay, so put it into a paid team. So if you want to keep it forever and it saves it all in the version history, you need to be in a paid team's plan. So you want to save a version, you can hit this Plus option here. Or instead of going through all of that, you can use the shortcut, which is Command Option on a Mac, Control Alt S on a PC in this acts as a regular save. The good thing about it is good to add a bit of detail, add a title, Edit, description, and save it. Just know that if you need to go back, okay. You can go into here and you can do a couple of things. When you go to this list, it works kind of strangely. Let's say I want to go back to five days ago. If I click on this, it'll take me back to that page. You can see some of the design disappeared. And I can view it and I can zoom it, but I can't actually click on anything. It is just like a view only if you did want to go in here and say copy and paste something else, or at least restore to this. All of the options along here, even the auto saves have these little dots here, click on them. And I can do a couple of things I could restore to this version, which means everything gets wound back to here, okay, in the good thing about that is let's say people are commenting on our work. The comments remain case. You don't lose those, but the work will roll back to here. Well, you might wanna do is you might want to duplicate it. You'll end up who versions. And the cool thing about this is that while it makes a copy of it, it's a completely separate file. Now you might use this to kinda go off in a different direction. It might be to share this file so that you can continue working on the original, maybe another team member. The only thing to note is this original still has its version history. This new duplicate copy, completely new file doesn't have the history. It's kind of started brain you. Another thing you can do and what I often do if I want to go back and grab something is I'll go through here and you can restore to this version. So let's restore to this old version. Give it a sick kind of flashes and does something. The big thing for me is I tried it says button up here, the Done button. Okay. I'm not sure why I need to click that as well, but I do. Okay, now it's fully editable and the cool thing about it as I can go and grab stuff, I don't know what I need. I don't know. I'm going to grab this. I'm going to copy it. And now I can go back to that first vision even if you do a bit of work here, okay, you Rick stuff. Okay. You can go back to that version history and go back to the one that I was just working on. No current version. Back to that one that I saved and I can restore it here. We started this version. Don't forget to hit Done once it flashes, wait. That flash will depend on how complex your designers, okay, how much assets is using. Hit Done. And now I'm back to where I was, but I can paste that thing that I deleted accidentally or broke or just want to use it for reference. The other thing when working with this as it can get kinda messy. So sometimes like this has got so many options in here, like all these auto saves in here. What you can do is you can go to Filter and actually just show me, like say you're working with a large team to show me your changes. But for me and anyone working on this file, so that's not that helpful. What's helpful for me is I can turn off the auto saves just for the things that I've purposely gone and added a milestone for. I've added to the version history of given the name, owning in a show, those that might be helpful to my orders, those back on. The other cool thing is you can actually share previous versions. You can go back to here and say actually, I want to see when we did this, when it go to the little dots here. And I want to copy a link to this one, which is really handy. You can share that. It'll be view only just like this. People can look at it, okay, but they can't update it or change it all selected. But if you're referencing it, that can be really handy to share. The link is here, I'll paste it in a browser and it's sharing to this specific version of it. It looked ten years looking at it as well. The last thing I want to show you is Activity Logs. I don't have the right account for this, but if you're working at the organizational enterprise plan level, you can look at something called Activity Logs are pretty easy to understand. To have a look in your admin account, you'll have big brother access. You'll be able to see who, when and what they did to the file and where they access it from K It's called Activity Logs and you can kinda see it here. It's an admin setting, but only if you have at the moment, it's enterprise and organization. So if you do need to figure out what happened where this is a really cool overview. It's called the Activity Log. Alright, that is the deep dive into version history. I will see you in the next video. 166. How to archive and restore previous versions of Figma files: Hi everyone. In this video we're gonna look at archiving certain parts of a design file. Let's say you want to delete components or delete pages because they're not used anymore. But you want to be able to go back just in case. The big thing to remember is if you're on a free plan or your fuel filers and drops, it doesn't matter. There is only 30 days of history and saving. Even with these arco versions, you need a paid or organizational enterprise plan. And these archive versions will hang around forever. Basically, we're gonna leverage the version history. Let me show you how it works. Okay, So archiving old work, there's no like official archiving section. Basically we're going to utilize what we know about the version history. But there's a good practice to follow to make sure it's easy to go back and feel confident when you, especially when you're deleting stuff from files. Let's say that we've moved most of our components or everything we need out to a separate file. So I've got this page here that I do not need. Okay, so I'm going to right-click it and I'm going to delete the page and freak out because I'm like, What if there's something in there? So what I'm gonna do is save a version history. Remember our shortcut Command Option S or Control Alt S on a PC, and let's call this one archive. Okay, achieve II. Anyway, archive. And we're going to put the date, so we're going to put in May and put it in 3 May, what was changed. Okay. This will be handy for future Dan. So we're going to say deleted the actual speed through this. Okay, We'll add some documentation. The cool thing about that is that now I can say now delete, gone, go about my work, keep working, keep working. Know that it's there. Okay, I can go back to my version history. Okay, and say, Look, even though I've done stuff, I can go back here. How do I go back here? I can click on it and I can go to the little dots. I can click on it actually and just work my way around. You'll see that the components pages back so I can go through and just review it while we're in this mode. Remember, we can zoom in, look and check, but we can't copy and paste anything out. We can't manipulate stuff. If you want to do that, you can either do restore to this version, grabbed the stuff you want, and then jump back to the current version. Or you might want to separate it out and duplicate it. So you've got another separate file or create another Figma file, a copy. And we can rename this now something more appropriate. I'll leave it missing out my drafts folder. Okay, and when you've finished, Let's click Done. So I can always go back there to make it even handy. Let's jump back to our version history now if dev version history, if you have to have nothing selected, then go to the little shape run. What you can do it a bit more professional is you can click on it, click on the little dots and say Copy link. Okay, and then we can create a change log hit Done. I'm going to create a new page. So I just quickly whip this up a cover page and here are my archive versions. Okay, Now, there's one little bug with this chicken works now because what would be really handy is to go, alright, today is this. I'm going to slip through the text. I'm going to add a hyperlink. I'm going to paste in that, but that doesn't seem to work. Like you can click on it for sure, but it does. It, it links to the same page, just has problems at the moment. So at the moment the workaround is it's just a paste it as a URL, which is not beautiful because that is not beautiful file name, but people can copy and paste it out. I'm going to make it quite small. And when might have to add some notes there of like copy and paste this to go back to this archive. Particular they haven't fixed it though. You can even see by default that it's made it a clickable link, which isn't still good. I'm going to break the link to it. Actually hit that link there, break it. So that's just ticks that people can click on it. Hopefully that'll update where you can actually click on it and we'll actually go to an archived version. But I can copy and paste it either in view mode or in design mode. Paste it into a browser, and you will see it's gone back to this archive version. And people can go and decide whether they want to restore this version or duplicate it. You go. That is how to archive staff and be careful it doesn't disappear forever. Just give it a name. That's really all you need to do. You can be a bit fancier by grabbing that link, putting towards own page that you go that is archiving your work without having a panic attack. 167. How to create & share a flows in Figma: Hi everyone. In this video we are going to look at flows and a little bit more depth. We covered them in the Essentials course, a little bit already in this course, but there's lots more we can do. Let's jump in and get to know flows a little better, right first up, let's switch to prototype mode shift D K. And if you haven't, you can see I've got loads of flows already. If you haven't, you probably got loads by the time in this course. But if you don't, you click on a frame and you say, I'd like to start a flow from here. And it just means we can link to and link a prototype to start from here rather than page one, which is the default while we're developing this, this might be enough. We can just hit play and start viewing from there where we can go in a little bit more depth with flows is where when we're sharing with clients. So I'm going to have nothing selected. Okay, and you can start to see over here, look, there's all my flows that have got, I happen to know flow eight. I think there's the one that I'm working on and watch this, I can click on this and it'll jump me to it, which is handy. I'm going to rename this. You can either rename it on here by double-clicking it, or rename it over here. Mine's going to be my mobile checkout. And why you would name it is that in prototype mode, when you send a link out to someone, can you see all the flows over here on the side? And obviously if flow 123 isn't that useful, this one more useful, you can add more useful information. By going back into here, I'm going to click on my mobile checkout flow. And there is this option in here to add more details so you can put it in a lot of documentation here. Look, bullet points, bold. If you hold Command I or you can do italics, It's Control I on a PC, there's all sorts of other stuff. If you know the shortcut Command Shift X for strikethrough, I'm not sure why I know that one. It's Control Shift X on a PC. So if you know the basic shortcuts for texts, you can put a lot of information in here, but I probably only use it for though is pasting a bit of a description and you can add a link. Where am I going to get that link from? What I'm gonna do is get people to be able to click on that link and jump to this page here. I'm going to select all my section. It could be a frame and can be anything. Remember in the last video, if we go share and this is turned on, it will link to the current selections. If I copy that, see an actions click on this. Let's go to this and I'm going to highlight that at hyperlink, paste it in, save it. Okay, why that's useful is when people are working on my prototype, they can click on mobile checkout. They can see there's a description and they can click on this and it will jump to the right page, just good documentation. The other thing you can do with flows is you can actually link directly to them rather than getting this big stack of stuff than having to work which when they want, you can have nothing selected be in prototype mode. And over here you can say, actually I want to link just to this particular page, copy and paste it to a cover page. We're maybe like this one here. Phi just hit paste. I didn't even have to hit the special shortcuts for hyperlink. It just assumes you want to paste it over the text a little underline. You're in charge of making it the nasty HTML from the 80's and 90's blue button. Now, this link will jump straight to that prototype, to the right flow. One last thing is you can delete flows. I'm gonna go back to my page one, shift one to see everything. Switch to prototype mode shift E. You can select them and delete them. If you don't need them anymore, you can select them and go to minus over here to delete them. And lastly, you can move them around, select on them, and go. Now it's over here, make a new file, move it one alone. That is flows in Figma 168. How to use the Slice Tool in Figma: Hello everyone. What does this to do? It's the Slice Tool. It's got a really good shortcut. What does it for? Spoiler alert. It is for exporting stuff and it'll only be useful for a couple of us. I don't want to oversell the Slice Tool too much in the exciting intro, it is utilitarian. Now feel bad for the Slice Tool, sorry, Slice Tool. Let's jump in and get to know it a little better. Maybe the Slice Tool, here it is, up here, is the shortcut. What does it do? Basically his way of exporting, there's a couple of use cases. Say I've got this really long doc that I'm working on. And when I export it, I'm going to export the frame minute with this big giant PNG. So what I can use it for is on the keyboard and just drag a box around where you'd like the export from. What's cool about it is it's not going to export just the frame. It's going to export everything you have selected. So even this background part, it's really useful when you're doing say, documentation, maybe out to the developer, or maybe just to throw this into an email. And the thing is if I go to my Layers panel, you'll see it in here. It's called Slice one. Let's give it a name. Okay, So my name is Slice and overhear it has its own independent kinda like Export option. Obviously I can go into the frame and export that, okay, but mine is gonna be too long. So I can select this frame, selecting the Slice as they've kinda made hard on purpose. To be like, I don't know, in the background, It's often you have to either select them in your Layers panel or drag a little box around them. And I kinda got their own little design as an icon as well. But I could say Exports, Let's say PNG, the name comes from the layer and I'm gonna hit Export. It's going to go into my file. Then you go, Here's my hot new. What's cool about it is it's repeatable. I can do that. Make my change. Okay, grab this one, copy it, paste and replace. Okay, now I can go through and export that exact same dimensions like a before and after. You've ever done it when you tried to take two screenshots using say the max screenshot and nothing lines up for his. Now, I've got two versions that are the exact same preferred documentation. Great for emails and also great for chopping up pages that need to be printed as well. Printing this can be a big pain in the buck depending on your printer and your printer dialog mastery. Sometimes it's nice just to grab a section and this is repeatable. The only other thing that's nice about it is that instead of just having one frame, you can actually go across multiple frames or big chunks of the document and grabbed lots of pets. Why I want to just use my screenshot Command Shift four. No, I'm not sure what it is on a PC and drag stuff around. I use that mostly. But there you go. There's the Slice Tool 169. How export uncropped and unscaled images from Figma: Hi everyone. In this video we are going to unstrap images ready for export. Depending on how much you know about development. Your developer will want the full image and they will do the fill crop fit option encode on their sides, they want the full image. But if I export this from Figma right now it's going to crop it down. It's gonna give it rounded corners. How do I liberate this image so I can send it to my developer at the full size or a specific size. I'll show you that as well. Alright, let's jump in, right, the easiest way is with a sweet plugin. So go to plugins and type in, export original images and run that. And basically does what it says. I'm going to click into this. It is a fill inside of this frame. And I'm gonna say, do I want it to be a PNG or JPEG? Jpeg is gonna be good for me. And for selection, we're going to just have the things that are selected. And click Export, excuse the name from my instance. That's cool. Let's check it out. Oh, yes, it unpacked it and brought it in its original size that was brought into Figma uncropped know, rounded corners. You can do it to whole group of things. You can decide. You can select everything on the page. Or I'm just going to click this event listening loads of images or cropped in there. And you can use this option that says select everything including the children. Don't forget about the children. Okay. Now headache sport. You'll get a zip file. Okay. It's have a look. I'm packet and inside that zip file. Oh my goodness. Look at that. They're all in there. Well, the crazy aliens and all the other images that we bought in through plugins. Super handy. Alright, there is the hacky way it works just as good. The problem is, is that your developer might want to be self-sufficient and doesn't want to have to go through and sift through all the files to find the right image, match up the names. What you can do is when you share file, okay, you copy the link you sent it to your developer. You have educated them that they need to go to the Inspect tab. And they've used it before maybe. And they can go round and they can grab CSS or iOS or Android code barge. They can't get to the image. Why can I see the image, CSS, anything? Nothing. What kind of see the images go inside, keep clicking, keep clicking. Still. Nothing. Ah, but there's a hack. I feel like in the near future, it'll just be listed here. But the moment if you go to any of these switch from the code view to TableView, for some reason you can click on that. It opens up in a new tab. There you go. You can copy and paste that out, right-click, copy image or save it, you go, you might use it yourself instead of the plugin, just grabbed a few images that you need. You can copy it and paste it back into Figma if you want. Basically again, it's the full size that I got it. It's a great way of being able to extract images from plugins and figure out where they are, what the cold, but it's also useful for is doing sizing so that I need to send them to my developer. I'm actually using the browser view. I'm gonna go back to my desktop view. And hopefully shift day there was over there. Daniel is working on it. Okay. This image here. If I go to Design, I need to make sure it is being marked for export. And what not everyone knows I can do the full size or like half size with double size depending on what I need. But if you go down to this one, this is who you might have some maximum requirements for your website. Let's say that you might have for a thumbnail or something, it's 150 W, as long as you put W in there, it'll export 150 pixels wide. That's a handy one. You might decide that you've got a couple of versions. There is a 300 W or an H for height. You can go through and keep adding exports. Click Export Image one, terrible name. But now you go image1 dot PNG and image1 at two. You go. Alright, that's it. That is how to untracked images from inside of frames and rounded corners and drop shadows and pull it all out ready for export 170. How to export webp images from Figma & Photoshop: Hi everyone. In this video we're going to look at web P. What does it? You've probably seen it around. Some of you won't will quickly cover what it is and I'll show you how to get that format out of Figma. Basically, it's a replacement for JPEGS and pngs. The super awesome. If you haven't already, you'll be asked to supply images in this format soon. So let's jump in. First out, if you haven't been introduced to Web P images now, what are they? Just a new version. All JPEGS and pngs. Is it the replacement for them? It is. I'm working on websites that are pulling out all JPEGs and PNGs and replacing them with width P because they are smaller, better quality. And at one format we'll do like lossy format, like JPEGs. You can get the quality down if you need to save some kilobytes. But it also has transparency like pngs, and it also has a lossless format. Not gonna go through too much what lossy and lossless is. And I guess all you need to know is that you're going to be asked more and more to supply webp images onto a developers because we're P is awesome. So at the moment there's no native support. So I've got this image here. If I go to Export at the moment, have a check, just check in your new version with a Web P is an option if it's not like in mind, there was a plugin to fix it. There's always a plugin. The best one here that I've been using is tiny image compressor. Okay, run that and it's going through your document and looking for everything that you had said to exports. If you're not seeing anything in here, you need to go through and say that image. And over here in your Properties panel and you'll properties inspected go to Export and doesn't add anything on there. Now that it is tagged for Export, you should be able to refresh this and it should appear in this list. What I'm gonna do is I'm going to use this one. If you select something, it should appear just here. And what I'm gonna do is up the top here, this little settings option. This will change your plugin that you might be using changing. But basically what you're looking for is, I think by default in this particular plugin, no image conversion, and then it goes out to JPEG. And then the second option is JPEG and PNG to webp. There's a lot more detail you can go into, but that's what I want for the moment. The other cool thing about it is you can decide whether you play around with the quality, okay? So say you want it to be this size, but about 60%, okay? In terms of the lossy format, you can drag the quality up and down like a J peg. And the basic roles is about 60% is normally pretty good. If it's a bad image, you might have to lower it up. When I say bad, it's just poor quality. But if it's commercial photograph, you can probably get it down to 60 and nobody will notice the difference. Do some tests, see what works for you and images that you've got. Let's hit export. Okay, Now throw it in there and that's what we're looking for. Web P format. It's very happy with itself. Okay, so it saved a whole bunch. I've, I pick the biggest image I found in your exercise files. The other cool thing about this particular plugin that I really like is you can set it to target size. You can say actually, I don't want you to pick a quality. I want you to try and get it to 200 kb. Let's say that's the biggest this image can be. Well, you know from your developer or your experience that you need images to be at 50 kb. You can do that and it will keep that size and try and stay under 200 kb, which is super cool. The thing we might do though, is it's using the actual size that it put it in the document. It's massive look, it's ginormous compared to the rest of it. What I might do is match mine height of 844, which is my mobile device. And then refresh the list. And then it's going to export it at 200 kb at that size. Definitely fit inside of my phone frame, but or maybe 200 kb. Let's go. Parts of that is exporting webp. Actually you can do it from Photoshop at the moment as well. Okay, it's not perfect yet. Check. What are really wants to do is I want it to be under Photoshop and to be under Export. And I want to say export as that's where I want it to be. It's the best way of getting images out of Photoshop for web checkup here, okay, the moment there's no weird pink, I'm hoping it will be soon. The reason I like this is that you can have multiple sizes in here, like you can do in Figma. Okay, so it'll export a one size to X. And you can decide on its final size because the moment this is very big, what we can do is we can say over here on the way out, rather than resizing and Photoshop, we can say actually you are a height of 500 and we'll export all the different sizes we need. But that's not there at the moment. We can get it out using the Save As. So I just wait, File Save As. And there is a Web P option in there at the moment, they just put that back and recently ended the junk drawer, the messy, messy drawer over here. Similar features as that plugin feel more of a Photoshop person. Lossy is going to lower the quality, but often unnoticeably, lossless means you cannot remove any of the quality, just make it with P. Alright, so that is getting your file formats into webp, just a handy thing for people who haven't experienced with P Now that becoming more and more popular. And I know if I'm producing a website now graphics for website, they have to be with P because Google likes it, download real fast and they look great. Alright, that is it for web P, if that plugin is not working or you know of a bit of plugin, let me know in the comments. And if you're watching this video, check the comments if there is something better, especially if tiny images not around anymore. Alright, that's it. I'll see you in the next video. 171. How to downsize reduce file size of all images in a Figma file: Hello everyone. Have you got a big Figma file that's using images that are way too big, then you need Figma is starting to report errors because it's struggling with all the giant images. Just want to resize. Everything fills images on their own. I wish there was a way of just downsizing everything to an appropriate size, not too small, but not too big. There's a plug-in for that tiny image compressor. Downsize a, let me show how it works. Alright, the way to resize all the images at the moment is using a plug-in. The one that I like is tiny image compressor, reluctant to show you plugins because they change, they update a bit to the UI will be a little different by the time you get there. If you do find one that's better. Let us know in the comments as well. Alright, and they'll thing we're looking for is this thing called the downsize. The only trouble with the downsize it is that it's part of the pro account. You get 15 tries, I think at the moment, do you 15 goes at doing this and that might be enough view for a long time. And you might consider upgrading to the very COAP. So all of these images have come through at much larger sizes to have a look at this water one here. So I'm gonna bring it in. I'm using this one because it's the biggest in the exercise files. I've got it from Unsplash. You don't get a choice when you bring in some of these images and what size they come in, what quality, especially if you're using a plugin, just dumped them in there. Why don't we gonna do is it's covered at that size. I never needed that big. So what I'm gonna do is use it in a more appropriate size, the same size as one of my image files. Same size is one of my phones. And what I can do, you can have nothing selected and you can do them all. I'm just gonna do one to speed this up. And the cool thing about it is can you see it's got to downsize it at twice the size I need it. So this is 844. It's actually going to do it at 16. 88 gives me a bit of scope and a bit of flexibility for exporting it and being good enough quality. A good default for both mobile and web is to have images at what they call at two X twice the size you need it for very high resolution screens. Perfect. There's patina for them all ticked in the whole document. I'm gonna go downsize. It's all done. Very happy with itself, 10 mb saved. And it's have a little look. So this image now is a lot smaller. How much smaller to have a look, remember our trick familiar on we can go to Inspect and go from code to table. And you should be able to click on the image loads over there. I'm going to go save images. I'm going to put it in my junk drawer. Him miss the draw. And let's have a look. So it was 6.2 and it has gone through and he got all look like I mentioned saved not 10 mb. I never show how they calculate things like that. But hey, it is 0.3 mb instead of six. It's going to make Figma work very well. And it's still gonna give you an appropriate image size for exporting when you do, go send it to the developer, heavy dice, alright, that is it. It's how to grab an resize all the images, even the ones that are used as a fill inside of a frame in Figma. Thank you. Tiny image comparison, even though you exaggerate your savings a little bit, 10 mb, I'm sure there's a reason. I don't know it. Alright. I will see in the next video 172. How to document a component in a design system in Figma: Hi everyone. In this video we're going to look at how to spec out a component K document the different elements that make it up, color font sizes, also the layout and spacing and padding, great for sharing updates with the rest of the design team or speaking at a document for developers or something about it is most of the work is done by a plugin, super awesome plugin will look at one that is quite detailed, one that gives us a bit more simple document measurements. Figma has an inspect options so people can go through and check it. But often working with larger teams, we need to do documentation as well. Alright, let's jump in, right, to get started, I've created a new page called Design spec and it is empty and it's go Option or Alt. And I'm going to type in COD and I'm going to find this that we made so long ago. Do you remember this guy? Okay. You need to have something selected, can be anything. Okay, and then you need to find the plugin. It's called eight shapes, the Search feature in the plugins at the moment you can have eight space shapes, it just doesn't find it. So put an H shapes together. There are other spec, options, but this one here for me at the moment is awesome, I believe are good at it has something selected first thing, click Run and kicked back and relax and be amazed, but what it makes, if nothing else, It's a great place to get started. There's probably more detail than we need. It might freak out whoever is looking at this to think that the heart icon down here depends on icon slash heart. You might have to reword that to make it clearer. But man, it's a great place to start. The anatomy here and down here all the layout and spacing's. Again, there's heaps of detail in here more than we need, which is good. Okay, padding is helpful, but do we need direction vertical, okay, it's the way that the order layers stacked it, it's up to you also brings out all my poor naming case. A frame for is obviously not very good case. We need to go back and do some renaming before we run this. But such an amazing place in such a well-designed plug-in, one thing you might find is that if there's nested like this one here was quite a complex nesting earlier in the course. It has not defined early bird, okay, number seven, Price large. It hasn't been able to dig into the instance that is that lower card and the early bird. You can see here it's not documented at all. So sometimes depending on the structure of it, Let's make another version of it and you might have to break it apart a bit. Okay, so I'm going to use my Command Option B, control upbeat, break it apart. Let's go to option one and have a look in our layers. So there's my Event Card here, on, off. You can see there, there's Nested Instances in here. So the hot icons, not a big drama. It's this one here that has got stuff inside of it. So I'm going to break that apart. I'm gonna go inside the price, break that apart. And it should see all of this now, do I need to break that apart? Anyway? Not kinda trashed it, but at least now for documentation purposes, running this sweet app. Okay, let's have a look. Alright, so have a look to, to get into it. It's a lot longer. Okay. And yeah, it's broken these pots down. It's handy for me as well because sometimes you like, can I really mean for that to be five pixels? Let's see the top there. No pun intended the bottom. It's not what I wanted. Okay. And it can go through and make adjustments before I send this out for development and add this to the documentation. Another handy one is this one here does some really cool stuff. It's quite long-winded though and detailed, which is awesome. Sometimes though. Let's grab this, make another version of it. And there's another dog. We looked at this earlier on. It's called Design doc. There it is. Design doc runs a similar sort of thing, but it's more for luck. Measurements, okay? It's done the height and the width, and you can click on stuff, the stuff that's important to you, okay? And then measure Mode again, and it's gone through and edit the padding. It's a little, I guess, just a different way if document again, same thing here. I love it. One thing you'll notice is that in your Layers panel, can you see how massive it is now? These plugins are creating a lot of detail, especially that first one. Okay, so keep it on its own page. And with a design doc, There's a lot of lock stuff because there's things like, I don't need this slide the width again, it's already in there. So I'm going to select all of this. Anybody remember what the shortcut is for unlocking Command Shift L, you guess right? Control Shift L, The Container Store total internal ones as well. Okay, now I can say actually this shift into parent, shift into parent, give it a rule that any of the WBS is it, you might use this as either an addition to this other plugin really depends on what the requirements are for you and your company one-to-one with the developers, something like this might be enough, chat with them, see what they want. But if you're building our online documentation, kay, a design system for lots of people to use and a big organization, something like this is a lot handy. We can add a lot more text and explanation making sure people use your components, right? Alright, that's it. That's great way to start documenting your components using a sweet plugin in Figma 173. How to use DEV Mode in Figma: Hi everyone. An update video. They've changed our inspect mode to this dev Mode. It's kinda nudes in beta. It's out in the full version though. And the one thing to note about it is that it used to be inspect here. Now it's this toggle switch here. You get to the same place, but with bonuses. So it's nice. The other thing to note is that at the moment, it's what's called an open beta so everyone can use it. Okay, but there will be a time in the future that they are plan is to make it a Pro only. So you might end up having inspect or a cut down version of this dev Mode. But at the moment everyone can use everything. So let's get into the pros for it. Alright, the biggest pro is that it's designed more for development use. Whereas before developers could get lost, even in an inspect mode, they get lost. Kinda like looking around, especially if your document looks like this, that like what do I do? What you can do now as the designer, okay, so we're still in design mode and we're going to use Sections, case it's in use for this as well. So sections we've looked at, I'm going to grab this and I'm gonna put it around something that I want to identify for my development. Let's say it's this frame here so I can draw a box around it. The difference with sections now is that you might've seen it. There's this little thing here. Okay, it says Mark for development. If I go to my arrow tool, I can click that. Okay, So ready for DIV. So I click that and nothing really changes in this mode except when I go to developer mode. And this is full, you develop the vision that dharma into view your design through. What ends up happening is see on the left-hand side here, there'll be a little coaching for your developer to kinda get him used to it. There is a ready for development section, okay, So when they open up the document and it looks like this, and then go over here. There's just this one section that you could name better than Section one. This is my weekend screen, so I'd name it as such. Click on it, they can go to it. So that's really cool. How do you get this to your developer, okay, So you as the designer or in this blue Mode, green Mode, blue mode. Okay, So your own this mode here. If I go to shear at the moment, I can only share links and beard, like the normal stuff. But if I go to dev Mode and get a share, I can say copy the dev link. That just means they come to this app, but they'll come to it via this green version so they won't have to go into design mode and then toggle the switch though, just go straight to here. And like if you have something selected like this here, you can link to a selection so they can go right to it and maybe not confuse people too much. Alright, so that's the first thing you can be clear about what's going out. Rather having a separate page that's maybe rid of for dev, you can just put a Section around it and say Do this. Now let's jump to this file is a little cleaner. And the next most interesting and useful feature for a developer, K with a, you are using it to develop or probably the next person in line, your developer who's taking your design and building it, is, let's say I change the color of this button to this other variable and using them a design you say this is ready for DIV, okay? You don't actually have to put the section around that says ready for Dave is just a helpful thing. You can leave it as is and seen in this file, okay, but they get this version. I like, what have you done? What you can do is a developer is you can click on the frame and you can go to this option here you can see it was edited by Awesome minute ago, are Diego or however long it was. This thing here is very cool. Compare changes. So you can see there's my button on the left, the button on the right. Okay, So side-by-side comparison versus Overlay depends like a color change is gonna be tricky to do. Because the overlay makes this, I don't know. You can just drag it back and forth. Can you see that makes it easy? See the colors side-by-side might be just as useful. The other cool thing is down here. Can you actually see it's got a history of, let's say my main button here. It shows me that the previous one, the fill color was this, and it was using this variable. The current one is this other color, but using this variable, super handy. And then you can go back through the changes and just see like maybe they haven't seen it for like ten changes in the like Man, this looks nothing like I touched it. They can go back through to the one they last soar. Okay, So that is super-helpful. Other general things is that it makes things easier for them to select, Okay, So in the past, especially if you've got autolayouts instead of groups inside of frames instead of frames instead of groups. It can be quite tricky to get in and get the things like icons. So this I can just do one click and I've selected the Plus button. It, it kinda disabled some of that levels, deeper level grouping for them because they don't want to know all the groups. They just want the icon. They can click on it and just go straight to it. See the general stuff that we saw when we used to have inspect just by itself. One of the changes is that you can as a designer or developer, linked to the resources that your GitHub library it might be you can link to Asana. If it's a job program you want to connect to just things that I like. It could be documentation around, like implementation of the button in your design system, so you can link to those. The other thing is, that's more typical depending if you've done web design before This border-box is a way that that'd be used to seeing things like if I click on this here, there'll be used to seeing the padding and border expressed this way. Same stuff, just more developer friendly. And the other thing is down here, some of the code that they might use might be great to copy and paste some of this out. Probably not. They're gonna probably rewrite it or use their own flavor of what they're doing BAD. It gives them a Sainz. It's really easy to see what you've done. The other thing is, is that we using CSS, they might be using one of the app development frameworks. And they can switch between something that works better for them, like normal to styles and colors. They can go through and export this. So let's go and have a look at this. They can go, they've got this plus button. They can come down here and say actually lids, give me this, I got this icon. It's an SVG. I'm going to download it and the developer has it ready to go if you're not sending it to them directly. Other kind of more normal stuff is that when they hover above stuff that aren't have to hold down any of the keys. Remember earlier in the course we have to hold down Option to get things like the spacing and padding. For the developer mode, you just hover above stuff. You have to do anything and you can start to see all the things including like as we using padding card, remember that variable, okay, and then I have to do anything just comes up nicely. Another cool feature for developers is that we spend some time earlier on in the course making these components to have Properties. Remember over here we can say actually we want the discard. Okay, we had Lower, we had a large version, we had a small version, we had one with the price off. So different versions of it. How do you communicate that to the developer? Normally through documentation. But now under dev Mode, what they can do is they can click on it. They can see all the different properties that you've got props. And you can see here price lodge, actually, what you do is you go into the playground and they can mess with it and they're not going to mess with your design. Because then design mode, if you switch it around, it kinda stays at that Mode. Whereas in here, you can mess with it, break it, change it, work out what's gonna happen. And then when you close it, it's not affecting the Design Option. K just a, it's a playground and you can mess with it and get a sense of what you, the designer, are looking to do these different options. So that's a handy feature as well. Last couple of features is that under Code settings they can switch a units. Okay, So you develop can be probably if they're doing web stuff, probably dealing with relative measurements instead of pixels that we use here in Figma, they can switch that. Okay? The other one is plugin. So there are two sets of plugins here. There's plugins that they can use. I say they because it's the other person. I am not a developer. I can do a little bit of front end stuff and copy and paste code. But I am not a proper engineers. So there are stuff for the Div that will be useful to them, for plugins to help get stuff out of Figma for them. The other set of plugins is actually Figma has a plugin. Probably the most useful one is VS Code because VS Code is very common Text Editor for developers. And there's a Figma plugin for that, which is really cool. Okay, so you might advise them on that and it brings in some of the design features into VS Code. They can pull stuff kinda like dev Mode, strain to VS code rather than going from Figma and switching between applications. So that's a cool little plugin as well. Just remember, at the moment, everyone can use Mode, how they're going to implement it in the future for pay, the unpaid people will have to see what that is and I'll have to update the video if it's a big change. But otherwise at the moment, everyone can use it. That will be a pro one feature, dev Mode. Alright, that is dev Mode. You go, I'll see you in the next video. 174. Class Project 20 - Finish your design: Hi everyone. It is the last class project. I'm hoping you're not working. You're like No man, I wish there was more. Either way. This is the project. Finish your design. Okay, So we've been building parts of this little bit messy throughout the course. I want you to tidy them up, get something ready for your portfolio, and to put some of those skills into practice. So basically, I built a little wireframe. It is in the exercise files. There's something called Z final class project. Just so it's at the bottom of the list there, there's a PDF and here this is what it's gotten it. A little wireframe for you to work from. You should have a lot of this already. The pages are in the individually as well. Let me show you the file that I made. Alright, here it is. So you've made a welcome screen already, partly getting into your page up. Remember this case, I'm sort of animation on the welcome screen. So what happens when people first install your app? Kinda like onboarding doesn't have to be too spectacular, but just tidy that up if you didn't do that earlier in the class. Now the homepage, I'm not gonna make it too tricky. You might disagree. But what we're gonna do is we're going to have three category Options. When you land, come out of the welcome screen. It's gonna be FirstPage when the app loads, okay, and that's gonna go to trending events, okay, So you use the Event Card, tidy that up from earlier on. What I wanted to do is have two other categories. Okay, So we've got trending. Okay? The other pages might be like we did in the course where we had this weekend. They might be subcategories within the music genre that you've got, okay, it might be new this weekend. Whatever you want to break it up into. That look very similar for wanna do is have that subnet that we had earlier on. So if we look alright, there is of him, okay, so it doesn't have to look like this doesn't have to work the same way. Just some sort of extra navigation to get round those three categories. You can have four categories. Can have to see you go homepage lending all of these. Actually, I'll copy and paste these cards. What are those frames? Okay, so just way of kind of like toggling between these three categories. I would like you to have a search option as well. We made the search bar, we didn't develop a search results page. I'd like you to do some research on what that should look like. One of the few things we haven't tackled throughout the course, through the projects. So I have the Search Bar and have a search results page and either clicking the event cards or the search results go into Event details. So just location, price, what it's about, some imagery. And when that's completed, I want people to be able to buy a ticket and we'll do a simple cashflow, okay, so this checkout flow will be there via cart of like what you've gotten your card payment details we the next step and then a confirmation page. That's it. Let's look at the class project. Make sure I've missed anything. Welcome animation homepage. It's going to default to the trending page, is gonna be a low Nav and a subcategory navigation. Okay. That is the lower nav there in the subcategory Navigation is that when these category pages, there's gonna be three, including the homepage of trending. You can be way more creative than me and the different categories, I don't mind what they are. Okay. Have a search bar with the results page, Event details, checkout flow. The last thing is I want you to document one component. It's probably gonna be the Event Card because it's kinda have the most interesting details. I don't mind which one it is. And if you are going to use the plugin, some plugin, I want you to tidy it up. I want you to dig into those layers, see how they're constructed and pull out the stuff that's not that useful. I'm looking for something like this. Not everyone has the same amount of time. So if you do, I'd love you to brand this. So it doesn't look like everyone else's tidy up the things that you don't feel pass on any good information to either your colleagues or the developers. Make sure you name everything nicely. Not frame for the you go, That is it. There's two optional extras in here, and these are for the people who really want to make this full there portfolio, Build that a wishlist as well. And the oddest profile page, if you've got the time and really if you want to practice the skills you've learned in this course, I'd highly recommend you doing the optional extras, but it'll be up till what time you have available for the deliverables. I want you to do a video like before of you interacting with your prototype, showing all the pages that we've mentioned, including jumping out to your spec page or you can upload a screenshot of that. Again, some people haven't been doing the video so that the course screenshot of all your pages will work fine to upload the video to YouTube or Vimeo or Behance and then share the link in the assignments section. And I really recommend sharing this on social media. Can't wait to see where yours ends up. Remember, we're all practicing here. If you annuity UX design or design in general. And you feel like our minds not worthy of going up online, get it up, get it out to the Bring Your Laptop community. We're all here to learn and I can't wait to see what you make a jump cut. Okay, remember to comment on to other people's work here. This is where you can spend a little bit more time with your critique. Be kind, be critical going to The Critique Sandwich. And optional for this as well, is to build this for your actual portfolio. Build it out even further than what we've discussed up top, okay, include the brief, the persona, any wireframes you might've made, you might have just jumped into high-fidelity. You might want to back out for wireframes for this one, just so that it's a nice complete portfolio piece. Not ideal doing it that way. Why should come first? But as long as you clear that this is a project that you did, a case study, of course, that you went through. That'll be fine. It's include your finished designs and when it becomes to a good portfolio piece, look for some good examples, but including things like assumptions that you had before you started, okay, when you're making things, things you bumped into things you had to change. That sort of stuff shows your thought process in the UX design process. Alright, it's a big one. Hopefully there's lots of those big chunks already lying around from earlier in the course. And there's only a few things you need to do to tidy it up. Hopefully some of you though, we'll take some time to polish it a little bit and get it ready for that all-important portfolio or at my friend's then his last the class projects, more videos to come though. So let's get into those to wrap it up, then you can get started on your project. Alright, I'll see you in the next video. 175. What's Next - Figma Advanced: It is the end. It is the what next video. We'll cover a few little nicks tips after this. But first of all, congratulations, you made it to the end. I made it to the end. What a long course. The biggest I've ever made. And yeah, that's want to acknowledge the fact that it is not easy to get this five for either of us. That's why I'm excited. I'm disappointed that it's the end. We don't get to hang out as much anymore, but I'll discuss some other courses that you might be able to do, come hang out. But first of all, celebration high-five, I know that this is a camera and you're not really there, but I can fill you on the other side ready and up and up. Come on. I'm gonna do it. There we go. Awkward. Let's discuss what's next now. Alright, in terms of software next steps, what you might go and learn with me with someone else is after Figma is looking at some of that sort of web design stuff. So either I've got a Web Design Essentials, kind of an HTML, CSS, some basic JavaScript that really helps when you are working with developers, even if you don't want to be like the front end designer for web design company. Just an understanding of that sort of stuff is super useful. If code scary. Looking at my web flow course, take you through how to build a no code version of a fully functioning amazing websites, pretty awesome tool. I've got lots of other courses, Photoshop, Illustrator, InDesign, After Effects, Premier Pro, Light room. There's all sorts, so go check out those if you want to join me in another course to upskill yourself, also follow me a Figma. I've actually only 10 min ago made a public profile on the Figma community. So sexual, my name in the community, Daniel Walter Scott or in figma.com slash at BYOL. Follow me and I follow you. Not sure exactly we're gonna do with it yet, but you gotta going follow each other. Now the handy thing if you don't know about Figma is that they have a conference every year, normally around May, June. Who knows when they're having it now it's called config, search for that and see whether it is and sign up. There's an online version and an in-person version. That is a good thing to check out the dump a whole bunch of cool new updates during that period, as well. As long as kind of like going and updating as they go as well. They're pretty good that way. And a super big thank you to our editors and reviewers. Jason Hummels Taylor Coleman, Steven trove of javac. Thank you so much, so much if it goes into stuff that you guys don't get to say, well, you do get to see, but it seems like it's all me, but thank you team for your help. Next is to ask you for a review. If you'd like the course, give me a review. And for those of you who really loved it and have access and the ability to have a link back to my site. Linking to my site really helps me grow. Goo loves it. It helps people find me more. So that's my ask, is if you have the chance either via social or via interwebs, if you can see the link to me. Amazing Figma course by Dan Scott, usually go check it out here in just linked back to this course. There would be cool. And lastly, I just wanted to say a big thank you to you. You've kept me company then this whole course. And I know it's kinda weird with the camera and I'm pretending you there, but I don't I feel you they're completely vibe and you made it to the end. We're buddies now. And I just wanted to congratulate you on making it through what is a lot of your effort and load your time. And you should be congratulated. Welcome to the end. But it's kinda sad as well. It's the last of the videos. We can hang out in other videos if you want to come join me. But for now friends, that is it into the course. Fade to black?