Figma UI UX Design Essentials

1. Introduction to Figma Essentials training course: Hi there. My name is Dan Scott, and this is the Figma Essentials course. Together, you and me are going to learn everything you need to know to get started as a UX designer inside of FGMa. During the course, you'll learn how to master all of the tools in Figma. I'll also share all of the UX design fundamentals to create beautiful user interfaces and engaging prototypes easily in Figma. Who is he? I'm Dan Scott. I've been a designer now for more than 25 years. I've won multiple teaching awards, and my online courses have been attended by more than 1 million people now, just like you. First, we'll give you your own unique brief and show you how to work with a UX persona. You'll learn how to create simple wireframes. From there, you'll learn how to implement colors and images properly in your designs. You'll learn the dos and don'ts for choosing fonts for web and mobile apps. You'll learn how to create your own icons, buttons, and all sorts of UI components using Figm's draw features. You'll learn the scary terms like components, constraints and variances. They're all real easy whence you know how. You'll also make our lives easier by using free UI kits and plug ins for FIGMa to speed up our workflow. You'll also learn how to use some of FIGma's handy new AI features. We'll build a simple style guide ready for client handoff. You'll learn how to make microinteractions and animations. All the way through to collaborating with other team members, an overview of FugMa sites so you can build the site yourself and exporting all the right files ready for handoff to a developer or software engineer. You've got assignments throughout the course that I set so that you can practice what you're learning and have something unique for your portfolio at the end. Now, this course is aimed at people new to design, new to UIX design, user experience design. Even if you're not really sure what UX design is, don't worry, we're going to start right at the beginning and work our way through step by step. Alright, my friend, it is time. Sign up and join me and go from Figma zero to Figma hero. Does he design his own shirt? He did. I'm so proud of this one. It's cool. I kind of turned it on the side and made it drippy. Except the gold won't iron. Every other bit ironed nicely. This bit drives me mad. Why won't you iron gold? Why? Uh. 2. Getting started with Figma Training: Hello. You're in. You made it. Good work. Hey, first things first is you need to download the exercise files. There'll be a link on the page here somewhere. Download those, the files that you need for this course. Also, in those exercise files will be a shortcut sheet, okay? We won't go too deep in the shortcuts for this one. We will but there are some ones that are just really natural and useful to use. So I've made a sheet you can print off, stick next to your computer and kind of, like, circle the ones that you use a lot. The other thing is, there is a free and a paid version of Figma. I'll start the course kind of using a lot of the free features, and we will bump into some paid features as we go along. So if you only plan to use the free version, that's totally fine. You can get really far in figma. You know, you can be quite a competent UX designer in Figma using the free version, and I will but I won't hide from the paid version as well, because there are some really cool things in there to do, as well. So even if you don't do the paid version, you can it's good to see what the paid features are and how to use them. The other thing is, there is a desktop version and a browser based version. I'm going to use the desktop version. They're exactly the same. One you can download and have on your computer, one you can just use in your like Chrome browser. There's no difference between the two. Use either. I'm gonna use the browser version 'cause I'm old, and I like things being on my desktop for no good reason. So there you go. The other thing is, is that I can speak very fast, especially if I'm at the beginning of a course and I've just had a coffee. I may be yeah, speak too fast for some people, especially if maybe English as your second language. The other thing is, some people think I talk too slowly. You can speed me up. There's a cog. Where is it? I think it's over here. Click on it. You'll find a speed. You can speed me up or slow me down as it suits you. The other thing is that figment is really good at updating stuff. They're like, Make it better. Let's change it. Let's make it more clearer. The problem for me, though, is as a course creator, they go and change things and make them better, and it can be tricky. If it's a big change, I'll just re record the video and you won't know. If it's a tiny change, just check the comments. There might be a note down there, like, it used to be called this and now it's called that, kay? But it's in the same place and it looks the same and does the same thing. So just keep an eye on that through the course. The other thing is that, who's excited to get started? I am. I love making this course. I'm excited to get started. Let me know in the comments if you are, too. I love checking those out after I make a course. I'm like, Who's popped to get started? Alright. Get on with the course, Dan. Okay, let's go. 3. What is Figma for?: Alright, in this video, we're going to talk about what figma is and what figma isn't. So figma it's actually become many things. What it's mainly used for is UIUX work. So basically, when you boil it down, you're making or you're designing a website or an app. So a client comes to me and says, Dan, I need you to design us a new website. You'd open up Figma and design it in there, and then you'd then afterwards, get it developed into an actual website. So Figma is the look and feel of a website and is a quick way of kind of designing it up to get clients sign off. Why do we bother, like, designing it in Figma and then go and build it afterwards? It's mainly about speed. It's about rapid prototyping. That's what kind of like the key term is for Figma and kind of alternatives to Figma. Rapid prototyping. So if the client comes to me and says, I want all these features, I want to do these things. You can quickly design it, give it to the client. You can prototype it so it looks like a website and functions like one. The buttons click. You go everywhere. We'll do that in the course. It's called prototyping. So you can get it to be really competent looking website. So the **** can come back and say, uh, it's not what I want, or that doesn't work, or more importantly, you can test it with that client's customers, and they can use this kind of prototype. Okay? It's not a fully fledged website, but it looks and feels like one, and they can get lost. And you can fix that. Okay? The iteration is what makes us a UX designer, and also what makes Figma so powerful. I can say, Alright, here, client, here's your project, and they say, no, I can go back and make quick changes, not go back to the developer and rebuild this huge Big code base that we made, okay? Just drag something around in Figma, super quick and easy, rapid prototype. And then go back to the client or their customer and say, What do you think now, okay? And watch them use it and realize they still get lost. Change things, change the language, move the sizing around, you know, adjust things really quickly so that you can get to a point where everyone signed off on it the client's like, Yep, love this thing. Then you can work with a developer, okay, to get this thing built. Or work with one of the other Figma features called Figma sites or WordPress or what else we got? There's other ones in my head Webflow, there's more, okay? Elementor. There's lots of ways to go and build it afterwards, okay? So we're going to focus on the design side here, the kind of UX design process, okay? And build sites that look and feel like they work. You just need to know that it's not just like in the made at the end, okay? That is the kind of process. And why do we do it? Because it's fast, and it's way cheaper than getting you to design it or spend the time making this fully functioning website for only to have lots of changes. So that's where figma fits in. That's what it does really well. Rapid prototyping. Now, what else Figma does really well is that it's kind of creeping into the general design space. So Figma was born to make websites and apps, okay, rapid prototyping. But now people they've excelled the tools, okay? And people have started using it for just general design stuff. So the tools you're going to learn in this class, we're going to base it around web design and app design, but we're going to learn the tool so that you could use it as a general design tool as well. And people are using it for that. So they call it Figma draw, but it's kind of just baked into this course. It's the drawing tools along with it. So you will find yourself like, Oh, why can't I just design this flyer in here? Or this social media ad, you totally can using the skills from this course. We got to focus on UIUX, but you can use it for all of that. Some of the other things that FIGMA does that aren't cover in this course. So they've got some other kind of, like, other tools. There's one called FIG JAM, okay, which is, you know, kind of a separate product. It's like a white boarding tool like Merro, okay, kind of like ideas and brainstorming. They have Figma Buzz, which is a specific social media design tool that's a kind of alternative for Canva or Adobe create. They've got Figma sites, okay, where you can take your Figma file, okay, that we're making in this, the design of it and actually turn it into a website. Okay? So Figma sites it's outside of the scope of this course. We'll cover it a little bit in the end, Okay because it's quite cool and the kind of next step in your process. But that would be an alternative for something like web flow or Wordpress, okay? Often, though, I'm building stuff in Figma, okay, and then giving it to a developer to build in a different kind of code base, okay? But if you're building it yourself, you could use Figma sites. They have Figma slides, which is basically a PowerPoint alternative. What else do they have? Figma buzz, social media? Let me check my notes. Wait there. There we go. Figma M is the kind of beta version of AI coding. You can kind of talk to it to code your site. That's pretty cool outside of the scope of this course. We're going to focus on what they call Figma. And that's the kind of general use for it, and they call it Figma design. So we're going to do it. Focus on UI UX design, but know that the tools you're going to learn, you know, you can use for general design purposes as well. Kind of an alternative too. Let's Photoshop More Adobe Illustrator, if you know that software. Alright, so that's what it does. I Burber along a little bit. Hope that's helpful though because there's lots of different facets to Figma. We're going to focus on UI, UX design, and it's called Figma Design. Next video. 4. What’s the Difference Between UI and UX in Figma: Alright, let's talk about the difference between UI and UX. So the differences are UY, user interface, UX, user experience. UI is the pixels on the page, like the fonts you pick, the images, the colors, the spacing. You're kind of making it look good. Okay, you were a UI designer, and that's how I kind of started in this field. Client would come to me and say, I want a website. I design it looked cool. He liked it. We sent it. Okay, I was a UI designer. Where I became a UX designer is the client come to me with a problem. Let's say it's a we need to update the checkout on our page. We want to make it better, okay? So instead of just designing something that I thought would be better, okay, I would design something. I'd have a good idea and a hypothesis on what could be done, okay? And then I'd go and test it, okay? So I'd test it with a couple of people and see, do they find it easier? Do they find it more trustworthy, okay? We run little in person tests, or you can do it online, or, let's say, bring your laptop. We run a lot of AB tests where we say, Alright, we're doing we always are looking at the checkout flow updates. We do AB tests where half of the people coming to the website go to the old 1.5 of it go to this new one. And I'm like, Alright, is it better? Do we have better conversions? Less conversions? Why? Can we change this thing? Did it make it better? We're starting to get into the UX field, okay where we are testing our ideas, you know, iterating quickly that makes us a UX designer. If you've ever used a website when you bumped to something frustrating, that is UX design problems, okay? And that's something that you're going to take notice of a lot more now and you should, okay? So, let's say, like I use my banking website via my computer here. I'm not sure why I'm faking typing, but, you know, one of the tiny frustrations is every time I go to this thing, they've updated it. And now, when I type in my password and hit Enter, it doesn't do anything. You go to grab your mouse and go and click the kind of submit button. You're like, it's so easy to go in and adjust that and if they'd done some testing on that, okay, they would see that people got frustrated and stopped there, and it would have been an easy fix, and would have made the whole user experience a whole lot more user experiencable. It's not a word. But you get the idea. UI pits us on the page, way it looks. UX is how people interact with your project. And that's what we're going to do in this course. We're going to look at both UI, and I'll give you some tips on how UX is done and prototyping throughout the course. We're going to kind of focus on the Figma tools, but I'll try and smush in there some UX best practices to get you started as well. 5. What We Are Making in This Figma Course: Alright. What are we making in this course? We're going to make this. It is a website for a particular ecommerce brand. Everyone's going to get their own one. The one that I use through this course is for wallets, okay? And let's give it a quick demo. All right, a little subscribe newsletter appears. Okay? We can go to Let's learn more about it. We make it kind of a home page, a features page. We go to purchase page. People can tick things, add stuff, and then you get a confirmation page. And a toggle switch that currently does nothing. We'll make both a desktop and a mobile version of our site. The mobile nav. We will also do wireframes. Okay? So we'll end up in this kind of more high fidelity version, this kind of full version, but we'll also build our wireframes to start, connect it all up, so it goes places and we can do testing. We'll make sure everything is responsive so that it can adjust for different screen sizes. We'll build out a basic style guide with styles and our various different components for navigation and buttons. It's all sorts of fun. So why are we building this? We are going to work with this. So we're going to start with a brief that has what we're doing and a persona and we're going to build this thing called a Ta oh, basically, let's talk about this. In the next video, everyone's going to get their very own unique brief. We're all building something slightly different. You'll get given our product and you'll get given a short persona. A persona is just a beef description of who the client is because if we make something for everyone, it just gets a bit plain and it's not really good for any particular person. We're going to identify who we're building this for. In this case, I'm building it for Sam. I know their age, I know basic information about them so that when we're making decisions throughout our design process is we're using user, their persona to make decisions, rather than building something that Dan wants because it's not for me, I shouldn't be the one deciding, this is cool. I think it should work this way. I need to separate myself and think, what would Sam want? Everyone will get one slightly different. Sam is keen on fashion and latest trends, so I'm going to use that in my head. Whereas you might get somebody who's very eco friendly or eco conscious. That's going to really change the design. The target audience. We need to be building it for them, not for you, not for the client or your customer, for Sam. Now, we'll cover just a little bit of UX design process. We're mainly heading the software, but I'll introduce it throughout the course just so that you get a basic understanding of the UX design process. But after this video or after this course, check out personas, bit more. Read up about them. This is a real bare bones one, now that we know what our persona is, we're going to work on this task flow. We're all going to be building the same one. We're going to build a home page, a features page, a checkout page, and a payment confirmation page. This is called a task flow. It's a very specific task to do on a website. Often you get given a job for an existing site that's not a full redesign. It's like, I want you to update the sign up flow or the cancellation flow or it might be how to upload a document. You'll be working on a specific task flow. It's probably important now to talk about the difference between a task flow and let's say a user flow. I found a good example here. This is more of a user flow. As flow very linear, this user flow, there's lots of different ways, lots of decisions of getting to this last part here and you've got to account for all of them. A much bigger job than what we're doing in this course. Let's say good user flow for the bring our laptop website. It might be that somebody arrives on the homepage, they sign up and to do a course, they might get to it via the search option. There might be searching people. They might be in the brows people. They might have come through an ad that goes directly to the overview page. There's all these different ways of getting to doing a video course. As a UX designer doing a user flow, those are all the considerations I need to do. Bigger job. We are doing something nice and simple, just a task all right. So the next video, I'll give you your unique brief. We'll use this task flow. We'll build a wireframe version of it, we'll test it. We'll then build a hiidelity version of it. We'll also build out a desktop version. We'll design it. We'll make it iniactive. All the while learning all the essentials for Figma, but also we'll bake in some of that UX design process. All right. You ready? I'm ready. All right. Let's get going. 6. Class Project 01 - Create Your Own Brief: Alright, it is homework time. Did he say homework? I meant practice by learning. So we're going to set tasks throughout the course, just so that you're not just following along blindly that you get to make something. And the cool thing about it is that you get to make something unique for you. We're going to use this thing called random project generator.com to generate a unique brief, but we're all going to follow the same task flow. So we're all going to be doing this. We're all going to be making a homepage for a product, the product features. There's going to be a checkout and a confirmation page. So we're doing the same task flow. But if we use the random project generator, we all get to make something slightly different that we can use that's unique for our portfolio. So open up the class projects Doc. It should be in your exercise files. There it is there, okay? And yours will be a lot more filled up than mine. So we're up to this one here, Project 01. So visit random project generator.com, and click on the UYx button. So let's do that. Okay? This is a tool me and the team here made, and you can click on UYXo you can enter a name. Doesn't matter what it is. Okay? Your last name, friend's name, pet's name, kid's name, Granny's name, whatever you'd like, and then a location. Okay? So I live in Limerick, and I'm going to hit Generate my project. Alright, and you will be generated your own persona. They will be very similar and the difference will be the product, randomly generates it and the name that you use, but everything else will be structurally the same. So we're all kind of designing the same thing, but with a bit of uniqueness. If you don't like what you got, don't hit retry. It's red for a reason. I'm warning you. Okay? So I'm doing Scott Wallets. My customer is, Sam. And it tells me a little bit about them. What we can do is download as a PNG. So you've got it so you can go back to it, just download it for your machine. Keep it somewhere safe. We're going to use it throughout the course, and we'll use it towards the end as well when we're combining it to make more of a portfolio piece. All right, so that's how class projects work. I tell you what to do, and sometimes I'll ask you to upload it to the site when we've got something a little bit more interesting to share, but for the moment, just save your brief somewhere, keep it in your mind when we're designing throughout this course. All right. That's it. Next video time. 7. What is Lo Fi Wireframe vs High Fidelity in Figma?: Alright. Let's talk about wire frame versus high fidelity. Ooh. It's pretty easy. Wireframes are wireframes, and high fidelity are these complete looking websites. So what we're gonna do in this course is we're going to create the wireframe, first, test it, and then build out some more of the design feature for this high fidelity. So it's normally called a Y frame, some people call it low fi and hi fi or wireframe and high fidelity. My advice is not to skip this. Advice is not to skip the wireframing step. Somebody comes to you with a project or a brief, you can get a wire frame going and test it, like the buttons working and the navigation kind of doing some basic stuff in minutes. You go back to your stakeholder boss client and say, I this what we're trying to do? And they can say, Yeah, you can move on, rather than spending ages, canning and tracking and picking images and getting it right for them to go. That's not what I meant. It's quick, it's dirty, it's easy. And you're going to have to do it for this course because we're going to do build this first. And it's going to give us a lot of the fundamental features of Figma before we move on and make pretty. Why frames don't have to look like this. There's no real rule on what they can do. Normally, people put a line through it for an image, but it. Let's go find some examples on Figma. I'm in Figma. I'm going to go to this home button up the top here. I'm going to go to this one says templates and tools. They keep moving this button around, but have a look, used to be called community. I'm going to type in the top right here. I'm going to type in wireframe. Let's have a look at a couple examples. So you can just borrow somebody else's kit. So have a look at this one. Click on it once. In is going to see. This one here has gone even further back as in they've stripped out the text of this one. You can do that, as well. What you'll notice, though, that they are monochromatic. Some people use one color, but no more than one. Pick an inoffensive color or just use black and white and versions of gray and pick a very offensive font. We're looking for boring stuff here, because what we don't want to do let's have a look at this good one as well. Okay? It's a lot more, let's say, complete. It's a bit fancier. Again, there's no real rules. You can pick one that has a little bit more design taste into it. What you want to avoid is having conversations with your customer client stakeholder about like, Oh, that's not Alfon. Oh, that's the wrong image. Oh, we don't say that. Many moore in our headline. What you're doing here is just testing function. When I click this button, it goes to here, and then this goes to here, am I building all the right pages? Yes. Awesome. Then we can go to high fidelity. Keep it boring, keep it functional. We'll cover using other people's templates later on. But if you have stumbled into here, remember home, templates and tools. I've done a search up here and you can open them up. Let's open this one here. And it just says open and Fig. The cool thing about it is now I have this file. It's open up in another tab, I can go back to home here. But if I go to recents, it's now just my file. Figma is this great community where people share their files and you can borrow them, appropriate them, steal them. Of course, we don't just want to duplicate it and pass it out as our own, but if you like the styling of some of Okay, from the templates, you can go through and start nabbing them. They're all selectable. You can start working with them. But that's jumping ahead in the class a little bit. I'm going to close down this tab. I go back to templates and I've deleted the wire frame from here just to show you high fidelity. It's not that fancy. It's just really made websites. This one here I could open up and start working with. This one looks like for a law firm. They've done a lot of hard work. I might be doing a job for an accountant or a lawyer as well. I like this. I can start with this. And start changing it out from my own fonts, my own images, but I like the structure. This is high fidelity, skipping the wireframing stage. Bad. All right. That is it, Let's jump into the course and start making stuff. All that is it. That is wire framing versus high fidelity infigma. Let's get on to the next course. Start making stuff, Dan. 8. Creating Our Design File & Introducing Frames in Figma: There. In this video, we are going to make our very first design file, and then we're going to start adding pages, which are called frames. We'll do some basic navigation, and we'll super excitingly make four white boxes. Can you see those on the screen? Anyway, this is going to be our mobile phone layout for our project. Let's jump in. All right, so I've opened up Figma. I've got a fresh copy here. So what we want to do is this screen changes quite a lot. Every time I make a course, this screen is different. Basically the same. What you're looking for is this little home icon. They move that around a little bit as well, but it should be in the top left hand corner. Then we're looking to create what's called a design file. Remember, this course is about Figma design. This first one here, my mouse is on slow motion. All right, wait there. All right, my mouse is back. So there is a design button. You can click on that. But in Figma, there's about ten ways of getting everywhere. I'm going to try and give you the consistent best way or the best way for our level. If you do discover another way. Good work. If you like that way better, do that way. Just for instance, you can click on the Design file, you can click on this Plus button, then click on the Design file. You can go to Reese know was it drafts and hit Plus and get a design file. There's lots of ways of getting a design file. All right, so let's create one. Bam. Basically, it opens up on a new tab here, see, Home the untitled file that we've got open, home untitled file. You can work from templates to get started. We're not going to. You can hover above them, and it just shows you them. That's just getting started. We're going to utilize templates later on when we get better, but we need to start from scratch. Let's close all this down and we get this boring thing. All right, let's go and create a page. You do it using this button down the bottom here. It is called frames. Frames are like pages or upwards from Adobe Land, click on this little icon down the bottom here, click and draw out something. You now have a page. It little cursor defaults to the selection tool after you've drawn it, so if you want another page, you're going to go back to the frame tool, draw another. Goes back to the selection tool, that's actually quite handy. Now, we want a specific size because we want our phone size that we're going to do our mockup for. What we can do is delete these by just clicking the name at the top. You see if I click the name at the top, highlights the whole thing and I can hit Delete on my keyboard. I want to get rid of that guy as well. What I'm going to do is I'm going to go to my frame tool. What you'll notice is on this right hand side here, you have to be on design is what it should be. This frame can have a bunch of preset sizes. Either phone, tablet, desktop, let's do phone and let's use whatever the most common size for the current time. IPhone 16 is I don't know. They're all roughly the same and you're not expected to design for all the different phone sizes. You might be expected to do phone, tablet and desktop, if you're doing, say, a website. If it's an app, you obviously only going to do one size, the phone. We're going to start with iPhone 16. If you're watching this in the future and there's iPhone 500, just Google what the common phone size is most usage. Google will tell you what the most of the world has or you can figure out what your boss client stakeholder has as a phone because they'll be testing it and you want to impress them the most, so you want to use their site. I'm going to use iPhone 16. If we're doing it for social media or something, you need it to be a specific size. Can you see if I have the name selected at the top, so off selected over here on the right hand side, you can type in whatever size. If it needs to be 500 by 800, you can do that. I don't want that. So I'm going to use the Undo on a Mac, it is Command Z, Control Z on a PC to get it back to the normal iPhone size. It is under Edit as well in Undo, or if you're in the browser version, you'll have a little bar at the top here where you can go to Edit Undo as. It up. I said we're not going to do too many shortcuts, but there are some just unavoidable ones. The other way is super long. The short way, the shortcut is I want to zoom in and out, hold command key down and hit plus on my keyboard, and minus comes out again. Hold Command on a Mac, Control on a PC and zoom in and out. You can use this over here. There's a little manual drop down, but you'll go mad trying to use this thing here. Zoom out. Go back up. Zoom out. Command or Control plus and minus. All right. So we've got this document, and it's called iPhone 6-1. That's not fun. We can rename it by just double clicking it over here and calling this one homepage and hit Enter on. People prefer to go over here on the left hand side here. Make sure you're under file, not assets. We'll do that later on. Go to File and you'll see down here under your layers, you can just double click it over here as well. Up to you. I want two of these. I can go back to my frame tool and say, I want another iPhone 16 and I'll dump it next to it. Let's call this one. What is this one? O features. Another way you can do it is you can select the word features and just go copy paste. Command C, Command V, on a Mac, Control C, Control V, on a PC, the standard copy and paste. No, thank you. Other shortcut I want to show you, hold down Spacebar, we're only one video and making stuff and already doing the shortcut, Stan, the real key ones. You hold down the spacebar key and you'll see your cursor changes into a hand, you click hold and drag it around. Hold Spacebar down, click Hold drag. Now we've got these three. All right. Now, depending on the job, you might be expected to do both a phone and a tablet and a desktop version. What you can do is let's zoom out a little bit. Command minus or Control minus on a PC. Let's click on features, copy and paste it. What I'm going to do is I'm going to click on hold and I can drag these guys around. These frames, I can drag them around and say, I want this one done here. Can you drag the name? If you drag the edges, you can kind of manually change the size of your frame. I'm going to undo that. And over here, I can say this frame here, I want you to be not just a frame, but I want you to be not Android 16, I want you to be what are we going to do? I pray P 11. Okay? Can you see the frame got a whole lot bigger. Space bar, hold it down, click and drag. With it selected, you can see this rotate here. You can decide if it's landscape or portrait. Just double click it. Call it homepage. Okay. Same thing again, copy and paste game. We can put in features. I forgot about this one, this one's called checkout. I got to copy and paste it. Dip click. This one's going to be called confirmation. You can do that for mobile, for tablet, same for desktop. Let's grab both of these. I just clicked and dragged a box around them both and went copy paste. I think they've ended up on top of each other. They did. So here we go down here. This one here is going to be frame I want it to be the desktop size. Desktop is you can see, there's a bunch of stuff. You can do the Apple Watch. You can do some paper based sizes. Twitter posts, they're all in here. I'm looking for scroll scroll scroll. I've gone past it. It is desktop. That's a super common desktop size and what most people use for designing a website, even though there are lots of different sizes online. I can drag that over there. You get the idea. What I tend to do is design for something first. We're going to design for mobile first for this wireframe, then we'll design for desktop first when we are working for our website. That's a conversation to have with your client. They might want to see both. But let's say bring your own laptop.com. My site. We're a desktop first company because most people are coming watching the videos and interacting with software. They're on their computer. We design for that first and then work out how it fits into mobile. A lot of sites now will be mobile first. We're designing for mobile first and then coming up with a desktop version afterwards. You can design them concurrently. Often, what I do is design one of them, the most important one, then work out the other sizes in between. What I'm going to do is zoom out far enough so I can see everything. Remember, command minus or Control minus on a PC. I'm just going to drag a box around all of these guys because I'm just going to work on mobile first. I'm just going to click Delete, so they're gone. If you do get lost, sometimes you can zoom in by accident or you've hit your scroll wheel and you zoom, zoom and zoom and you're like, Where the heck am I? Okay, you could use these little scrub bars here. Hello. G these little guys here and try and figure your way out. Often it's easier just to go up here and say, can you zoom to fit? I will just fit everything that you've got into the middle of the screen. So there's name our document. Like, some bits of software will ask you to name, you know, the file as soon as you create it. Figures like that. So you end up with 1 million untitled files. No, that's common. But we're gonna be super awesome, and we are going to rename our file. So I've double clicked up here, I'm going to give it a name. We're gonna call Scott you call yours your name, okay? So you're not doing Scott eCom. You're doing, I don't know, Sandy or Jim, whatever your name is for your company. And this is our eCom site, and we're going to go V one cause we're not cavemen. Don't be that person. Final. Final. One, new. You're laughing 'cause you do it. Okay? Let's go. It doesn't really matter if it's V one or A, B, C, something. So when we do have to update old files, yeah, it's easier to find. There is a fancy way of versioning inside of Figma, but that's gonna work for us now. You can double click it over here as well. Okay. And you can close it by going to file close or just hitting this little cross in the corner and it's gone. You're back to your home. And what you'll find is it defaults to recents, most of the time. If it's not, go to recence and you'll see there he is there. Look, e com. So we'll click it, open it up in a new tab. Let's go back to home. And what you'll find is when you have loads of files that are called untitled, you can right click them in here on a Mac if you don't have a right click on your mouse, you can hit Control on your keyboard and hit click. PCP, you'll have a right click. I do on my Mac as well. But you can right click and you can rename them in here. It doesn't really matter where you do it. And these things here, these are pain in the butt. I'm just going to select them. Go just dragged a box around them and had delete. Okay, these are kind of like getting used to figma files. I just find them make my life look messy. I'm like, Did I make those? Where those come from? You can leave them in here, or you can right click them and go to move to trash. Yes. Grab these two as well, and delete it just to tidy things up. All right, let's go back into it, either by double clicking this or the tabs already open. And that's it. We've drawn four white boxes. Good work. We all thought Figma would be more exciting. But we've learned what frames are kind of like pages, and we worked out what a figma design file is. It's the kind of thing that houses it all. Alright, let's go and make some more stuff in the next video. I'll see you there. 9. The Basics of Type & Fonts in Figma: Hi there. In this video, we're going to cover some of the basics of type. We're not going to go through every single setting in the type menu, but just the basics to get us going. You know how to change fonts and font sizes, right? I'll just show you the quirks of Figma. Alright, let's go and add some type to our page. Alright, so let's start Spacebar to kind of move over command or Control plus to zoom in. Spacebar again. I'm going to grab the type tool. It's down here in the bottom, Click on that. You'll notice that the really common tools if you hover above them, can you see it has at C next to it means I can jump to the comments tool by heading C, T for the type tool, F for the frame tool. So the really common ones just hover above them, and you'll see it'll tell you the shortcut. So we want T for the type tool. There's two kinds of type booxes. There's one where you click once and start typing. And this one will go on forever and ever. Okay? So you click once, you get a type box, good for headings, or buttons, just little parts of texts, and the type box just keeps on going. Is this one here, it is called an auto With box. I knew that name. The other type of type box is I'm going to click in the background, and then go to my T key. Obviously, if you've got your cursor flashing in here and you hit the T shortcut, you just get Ts. Okay, so I'm going to click off in the background, then hit my T key, and I'm going to click hold and drag out a box. This is called a fixed size box. I want it to be exactly this width. Difference this one is when I start typing, you can see it breaks on the end of the line. Better for body copy, anything that needs a line break. You can convert them afterwards. I can click in this one here and say, actually, you now a fixed size, and I can grab the point. I'm going to click off in the background. Let's go the whole way and click again. If I click it once, I can grab the edge here, and now it's a fixed width. Same with this one here. I haven't got the text selected. What does that work anyway? It does. It doesn't really matter how you have it selected. I want this to be an auto width, more like a heading or a button or some sort of small part of text. You can convert them afterwards. We'll cover Auto height later in the class. Those are our two text boxes. I'm going to undo to get rid of these. So on a Max, Command Z on a PC, it's Control Z or on my desktop version, it's Edit undo. If you're on the browser version, you'll have another edit. It'll be just underneath here. You can go to Edit, undo. Same thing. So I'm going to go undo a few times dt, dt, so many undo. Let's hit the Tiki and put in our logo for the brand. Now, if you've got a logo for the company you're working for and it exists, you can use the logo. But because we're kind of at the same time, developing a brand for this app at the same time, we're going to use just plain texts. We're not going to get into logo design just yet. So mine is going to be called. I'm going to use Caps. I'm going to go Scott or come on Caps. Okay, we're going to keep it plain to move it around. I'm going to click off in the background. Use my selection tool, I was going to move it up here. Next, we want our marketing message here. I'm going to grab a type tool, click and drag out, and remember clicking and dragging gives us a fixed width box. We're just going to type in marketing message. Marketing message goes here. I won't bore you with going through all the font stuff. You know how to change fonts. But the trick, let's just change the font size, something nice and big. I want to get it so it breaks on two lines so that we can look at auto height. By default, it's trying to do it automatically. You can type in something. It's 24, it's really common to add another eight to it or another four. Let's go 28. Genius, Dan. Let's go. What's 832. What you can do is see these little icons here. I end up doing it quite a lot in this course. I'll show you now see if you hover above this icon, this icon. You can click hold and drag it. If you're more of a tongue out looking at it, going, is that the right size? Maybe some letter spacing. Rather than trying to type it in and do math stuff. You can drag on one of these icons. There you go. Back to 32. So in terms of fonts, when you are doing a wireframe, when you're doing the high fidelity, of course, spend a lot of time picking fonts. When you are doing a wire frame, it's best to leave it as a super duper boring font. Something that's not going to offend anybody because what you want to do is when you're doing a test with somebody, especially with stakeholders when they might have an opinion on the font and that's not what you're doing for a first test. You're building a mockup to test the mechanics of this thing. Can they click the buttons? Do they get to where they need to go? Well, you don't want to come back and say, Hey, I don't like that font. Okay? So stick to fonts that are plain things that have I don't know, characters that have no character, like Roboto. Sorry, Roboto. Or the default one that comes. You know, the Inter is the default one Figma. So people use that a lot. Roboto is good. Sauce sends, whatever font you want, as long as it's I don't know. Boring fonts. Plus, like Roboto, I like it because it is boring. Sorry Roboto. But it has all these other weights here. I got a bold and an italics and all sorts of other good stuff to go with it. So keep your fonts simple. The other thing is when you are picking fonts, it's best to do it on the actual device. I'll show you later on how to preview on your phone. When I'm working on my computer, I end up spending ages playing around with letter spacing and tracking and line spacing. It's just too big. So what you can do just as a hack is to zoom out until your phone feels like the right size. Literally, what I'm doing now is I'm picking up my phone and going, It's a bit small, 100 is too big, so maybe up here, I can type in. Maybe 75 is good. Holding up phone, still too big. You'll be able to work out what it is on your phone to give you that you see how this is tiny now? You're like, okay, that's too small. But if I hold my phone up, it's the right size for the phone. All right, so I'm going to go a little bit bigger on this. The other trick with any of these fields in here is, I got 12. These numbers are pretty good for jumping between stuff, but what you can do is just click in 12 and just use your up arrow. C just goes up in increments of one. If you hold shift and press up, it goes increments of ten. So we're at 38, it goes up to 48. But if I just use my ra key, just got to have it clicked in there. That works. Up and down. Then I find this is about there, looks fine. This one here now needs to be bigger, click in here, pop, pop up pol shift, go up. You can see because I have a fixed line height, 32, and my font size is 53, it's getting a bit weird. If you need to go back to a line height of automatic, just delete what's in there and it will go back to Auto. You can see here it's squishing out of the bottom of my textbox. It doesn't really make a difference here, but I can drag it a bit bigger there. The other reason is I'm going to go to alignment. I'm not going to go through all of these. You know how to use type. The thing I do want to mention is that often when you're dealing with, let's say, you see how got marketing message goes here rather than the actual marketing message. Especially when you're at a really new stage of the app, I like to add really generic stuff like this generic boring fonts with non offensive titles. They know where the marketing message is going to go in there, but if I start using I don't know, my own creativity to add marketing messages here at this early testing stage, somebody's going to come back and say, hey, we don't sit like that. This got to go to copywriting. No, no, no, just click the button. I want to see if it works. Often, I will strip out anything that will cause any offense or cause the wrong feedback. Marketing message goes here is fine. Need a couple little things before we can move on and other things to point out. If I'm dragging this around using my pointer. If I click hold and drag around, can you see it just jumping around? It's pretty handy. You can see there lining to the middle of my page. I can drag it down. That's the middle middle of the page. Oh, nice. I'm gonna stick that there. I'm gonna copy and paste. This is another interesting thing about Figma and zoom in. Copy paste, and you're like, What happened? Actually, it pasted on the top of it. By default, it will stick whatever you've copied, right over the top of it. So it looks like you haven't copied it. But now you know that, that's fine. Okay, I've copied and pasted it. This is where my product shots going to go. Product shot. I'm going to make the smaller because it's more of a I don't know why. It's going to be smaller. The other thing to do is if you do want to copy and paste, often what I do is I hold down the option key on my Okon a PC. I've got it selected. I'm on my move tool, keep calling it the pointer tool. The move tool, hold down that option key on a Okon a PC. See the little double arrows that are appearing. The double arrows means when I drag it. I've got my mouse down the whole time. I've got that option or Olkey down. I'll make a duplicate. Same here. I want another one. There we go. There are two of them. I can slick both of these, and all I'm going to do probably is just make them bold. And make them a little bit bigger. Now, typography here has the basics. If you're like, Oh, where's the rest of it? There's the rest of it. There's a little options here, type settings, you get all the extra things. We'll cover different parts of it in this course. But here is the other things you might have been looking for. I'm going to make sure it's scented. I'm going to make sure it is all uppercase with uppercase. There it is there. I'm going to double click this one and say, this one's my B now, by now, and this one's going to be my learn more. Learn more. All right, I think that's it. Look what we made. We put text on the page. All right, that's going to be it. Boring old text. Let's do boring Old boxes in the next video. 10. Rectangles, Circles, Buttons and Rounded corners in Figma: Back, we have added rectangles to the video. I'll show you how to do rectangles and circles. We'll do rounded corners. It's very exciting. I promise. Let's jump in. Alright, let's start by grabbing the rectangle tool. Down here, it is this thing. It's a rectangle. There's a bunch of other stuff. I there's little arrow next to it. Okay, there's a bunch of other kind of useful drawing tools together, but we're going to start with the rectangle tool. And what I'm going to do is I want a kind of a placeholder image. It's a big rectangle like you saw at the beginning. So I'm gonna click hold and drag out and it's gray. Whoo. But it also covered my text. It's still there. Look, hello, you're underneath there. So let's look at something called layers layers. You know what layers are. How do they work in Figma? There's a couple of ways to get to it. So I'm going to show you a couple of ways, just to show you all the different ways in Figma, not to bambooz you, but it's kind of good to know the kind of main ways of finding stuff. And you'll find the one that works best for you at your level. It's easy one is to right click it and say, not select the layer. I want to send to back. I'm going to say send to the back of the layers, and it's behind there now. I'm going to undo that. The other way is over here in this left panel. You should see file. You might be on page one, and we should see layers. The only other thing you might be in is assets. Jump over to file your layers, that's one page called confirmation, O called Checkout, one's called features, and we're on this home page. Inside of here is all the bits and you can see it's a layer order like more traditional design software. Rectangle is above where as a product shot. I need to click hold and drag the rectangle, see there's lines there. Give that a crack. Undo it if it goes horribly wrong. You could drag product shot, click Hold hold hold hold, and drag it above rectangle. That works too. The way I want to show you is that I'm on the desktop version, so I've got File Edit view object along the top here. If you're on the browser version, you'd be like, I don't have that. Yours is just hiding in here. File, edit view objects. S? They're exactly the same object there, object there. It doesn't matter. Often in this class, I'm going to go up the top here to find stuff and you'll be like, I don't have it. It's just under this F here for Figma. You'll see I can go to Edit can go to Object and I can go down to bring to front, bring to forward. I can't actually because it's grade out, it's because I don't have it selected, I'm going to undo it, so it's at the top. So I'm going to click on the rectangle. Then I can go to Edit. I was under Object. You can send backwood, which is just go one level down so it'll be behind marketing message. I want to go send to back completely at the back. Again, it's in the exact same place, U object and there's send to back. Okay? You also said there's a shortcut. So many ways. Object, I use this one quite a bit. It depends. If you're ready for shortcuts, this one here, the square bracket is just on your keyboard. You'll see it normally next to your Peki and bring to front. I can go square bracket forwards, square bracket backwards, forward, back, forward back. It doesn't matter which one you use. But in this video, I want to show you all the different ways because I want to give you a sense that there's multiple ways of going at it and it doesn't matter which way you end up choosing. But that's it. I'll go just an easy way from now on. All right let's zoom in down here, space spa, click and drag, Command plus to zoom in. Control plus on a PC. Let's grab our arch for the rectangle tool, drag out a box, and I'm going to use my square bracket because we're fancy with our shortcuts, but use anyway you like. I've got a B now button. Now, another trick in figma is if you want to select two things, I can click and drag over these two or I can click one, hold Shift on my keyboard, and click the other one, and they have both selected. Now I want another rectangle. Instead of drawing it, I'm going to click this one once and use my copy paste. Which ends up putting it right over the top of it, but don't worry, we know, and that is going to be that. I've been talking about keeping design out of this wireframe. Wi frames are meant to be super just generic. But I can't hot myself for some things like rounded corners. Oh, I really like rounded corners. If you click on this rectangle here and you zoom in far enough, you will see the little dots in the corner. You can click hold and drag those. If you can't see them, which is if I zoom out and I have it selected and you have your cursor flashing above it. Can you see it's not there? It only shows you at certain view levels. You have to be in quite close to see these. If you want to do them manually, you have it selected. Over here, under appearance, you've got this one called corner radius, and I can type in eight. This one, I can either drag it and you can see it tells you that's eight, it's up to you. Hold space bar, move up. Click on this one as well, and I'm going to make this consistent by typing in eight as well. You might decide that actually corner radius, you don't want them eight in all corners, you want one of them to be different. See this little option here, expands the individual corners. At the moment they're all at eight, you can decide this bottom right. You see it's the top left, top right. You got it bottom right, I can make this 130. It just means that if I zoom out, one of them is different. You can do that manually as well. You can hold down the option key on a Mac key on a PC and you can do them individually as well. Can you see that? Just one of them moves around. All right, I'm going to go back to consistent, corners mixed. I'm going to get rid of mixed and just delete it and type in eight over the top and hit Enter. Now, they're all the same. All right, we're drawing rectangles with rounded corners. Let's draw circle. Down here is our circle. Was ellipse, which is a shortcut for O. Lisa looks like a circle. I'm going to hit the O key on my keyboard and I'm going to drag out a circle. Another thing when you are drawing either circles or squares or anything, if you want it to not be an oval, Okay, okay. Here you hold down. What key is it? You know what key it is. Shift. Hold shift while you're dragging and you'll get lock the height and width. So on something about that sort of size. You can see the sizes of it over here. Mine's at 32 by 32, roughly about there. It doesn't really matter. I'm going to zoom in on it, space space bar and I'm going to grab the type tool because I want that plus button. So I'm going to grab the Tiki, I'm going to click once, and I'm just going to type a plus on my keyboard. Font, I'm going to use interim bold, that's fine. Go back to my selection tool. Now, if you want to move this, you'll be like, A, I want to put this above this button. Yeah. Sometimes you just need to click off in the background and then drag it. In terms of the font size, we're going to use our sweet shorku click in here and up arrow. F get it right size. It jumps around. It's trying to lock into pixels. That's okay. So about the right size. Again, remember, we're at 400%. 60 kind of worked for me. So now I'm like, Alright, that looks good. The other trick that I want to show you is when you're trying to line something up, it can be quite tricky. I'll show you more exactly later on. But dragging it around, it tries to snap. Can you see it's like, Oh, I want to be here. Do you mean here? You're like, no, no, no, just right in the middle. So I want to nudge it around. So what you do is you have it selected, I'm going to click off in the background, click at once and I can use my arrow key, the keys, on my keyboard, just to move it around to kind of get it to where I want. That is good. Oh, what does that button do? You didn't ask. If you're zoomed in close enough to your circle, you see this dt and you'll be like, what does this do? You ready? No, no, no, no, no, no. That is totally not that useful, but it makes me happy. Anyway, I imagine bar graphs and pie graphs and. Alright. Let's zoom out. I'm going to use the shortcut to go. Zoom to fit is one that I'm going to try and knock into your head as we go through this course. It is Command zero or Control zero on a PC. No, it's shift to zero. No, it's none of those. Command zero? Oh, heck. My brain's gone. Zoom to fit. That's what I want. Okay? So the one I just showed you, Command zero is go to 100%. That's fine. This one here I like a lot. Zoom to fit. Okay, and shift one. I know that. Okay, hold Shift key down both Mac and PC and hit the one key, and it'll just fit everything into your window. There we go. We do some rectangles. Look at us. Alright, I'm going to select both of these and just kind of move that over here. We'll use that a little bit later. It's gonna go in the middle down here. And then we'll get onto the next video. Let's go do that. 11. How To Use Color in Figma: Hey, there. In this video, we're going to go from this to to this. Gray to this color. Teal, green, blue. Anyway, we're going to look at the basics of color inside of Figma. Don't skip ahead. There's some useful juicy stuff in here plus a little bona shortcut at the end. All right. Let's jump in. All right, color is easy. Let's click on our gray rectangle. It's the default color for Figma and over here under Phil, you can click on this little color square here, and you get this color picker. You might have used color picker before. If you haven't little dot here is the color that you've selected. You can click and drag it around to pick any color as long as it's red. I'm going to move it up into the top right here and what you can do is grab the hue slider and just drag this along. Can you see what's doing to the color? Say you want it to be a blue, you can decide I want it to be more of a blue and I want it to be a darker blue, or I want it to be a less saturated blue. Saturation is left to right, up and down as brightness. You can pick something in here that works for you. Black and white, it's weird. You can use these down the bottom here. These are some default colors. Or what people tend to do is click hold and drag drag drag drag drag past the corner. I'm still got my mouse held down. If you drag it past the corner, jams it into full white and same with the black, if you drag it down this way, it drags it full black. Up to you. It's a huge slider. This is the transparency slide. I'm going to pack this color here. I'm going to drag the transparency down, so it's a bit more see through. You can't really tell now because it's seeing through to the white in the background. Let's move it above all of this and let's move it to the front on the layers panel, either way you want. I'm going to use the square bracket down by the piki. Can you see it's frosting and looking through that. Sometimes you don't need to have this open. I can have this selected. If I want the transparency backup, can you see it's at 47%. That's where I dragged it on that last window. I can type in 100 and enter here. I'm going to put it to the back again using that first square bracket, I'll put it back to where it should be. I'm going to pick a color. It's very common to use blue or light blue on top here. I'm going to use a teal for no good reason. The trick here is to just use one color. Try not to get too far into picking colors for everything, especially in this iframe. Remember, this is about testing the mechanics of it, not really styling it. But you want to Okay, so pick a color you like. Now, the default down here is this hexadecimal number, so it's a six digit code that represents the color on the web. You can change it down here to RGB. If you've got a corporate manual spec document, you've got to use the official company color, you can type them in here. It's RGBA, which is red, green, blue, and Alpha is the transparency. You can either drag that slider or do it down here. It doesn't matter. Other ones that are useful is CSS. If you're more of a developer and you know the CSS colors, you can type them in, or I don't use that very much, Hue saturation luminant. I use hue saturation and brightness. Where I find this quite useful is, if I want to make this darker, I got to drag it down here, but you end up going like, Wows zagging it down, you're like, No, straight down. You can click in brightness. Brightness is up and down. So what you can do is just go in here and go, you see my arrow? I'm just using. You can't see my fingers. You can just click in here, like we've done a lot of the other ones and just drag it up. Hold shift, and it'll joke up in big chunks. How saturated the color is is left to right. So instead of wiggling it this way, you can just click in this one here and go upward down. You see it goes left to right. Same with the hue. Wanted to be a little more blue. It's gonna go up up up up, up, p, p, p, p, p, p. There you go. Really common, though, to leave it on hex. Leave it on ten. The other thing is that you'll end up with a bunch of colors down the bottom here. It's like colors you've already used. There's that gray. If you want to go back to it, there it is. There's that blue we just mixed up, so we can say you or want it to be that color of the blues gone now because it's not used anywhere on this page. Good wick Dan. Undo it, so it comes back. I can use it now and say you are that color. I don't like it. You wait there. This color I'm going to us. The other thing you can do is use Eyedrop atol you can click in here and say, I want the eyedropper to be that color. The good thing about the eyedropper tool, you can get into some really nitty gritty. Can you see? Next to the icon there, there's this little you see it a little zoomed version of it. Say if you just want this weird gray color on the edge of that type there. You can only see it when you really zoom in. No, you can't even see it when you zoom in. It's there. Great picking colors of images. I am going to show you the shortcut though is I'm going to click on this. I do this very often. I'm going to hold Shift to click both of these. I got them both selected and do that undo the move. Hold Shift click both of these, use my eyedropol shortcut, which is I on your keyboard, the letter I, not your eyeball. I can click in here and they both will become that color. It doesn't matter really where you do it. Sometimes it's hard to click on things. If you do find it's really hard to click on things, the easiest way is just to zoom in a little bit and say, A now it's easier to click. I can go into here, use my eyedropper tool. There it is. All right. I'm going to get a shift one to show me all my frames all in one document. You can change the frame color of the phone we've got here, down here, you can say it's full of white, which is if if, if, if, you can change it to something else. Some people like to make it a light gray. We're going to leave it white for the moment. Frames can be colored just like rectangles. They're very similar. Thing you might want to change or I can't remember the default is. It's the theme color. Basically, there's a very white layout of my interface, everything's whit. Backgrounds are light gray. You can go into this little F here and you can go to preferences. You can say, actually, I want the theme to be light or dark. Your system theme at the moment, mine's getting it from my Mac. My mac telling it, it's daytime, you're going to use a light one and it's nighttime it changes to black, which is weird. You could force it to be black. It doesn't change the document, just changes the interface. It also means when I create a new document, create a new design file, you see the background is black. If I grab my frame tool and draw something else, we're in the same position, but the interface looks quite different. It's just a black dark version. It's up to you. If you do change it to dark and you're like, but the background is still light color. You can have nothing selected, click in the background and go up to here and say, actually, I want it to be dark. I can't remember what the default is. Yours will be different depending on your system preferences. So I'm going to force it to be light and stay in light mode for the rest of this class, but you can change it. Theme, light, nice. Another thing that's useful is depending on your vision and your screen, you can go to view and go down to interface scale. You can say, actually, I'd like to make it larger or try and decode those hieroglyphics. Not useful Figma. But if I do that, can you see everything in the panels gets bigger, and you can go bigger and bigger and bigger. You've got a massive big wraparound screen, it might be nicer just to have the interface bigger. Go, should I leave it this size? I'll leave it this size for the video so you can see what I'm doing a little easier. One last thing is this is driving me mad. Is driving you mad? You didn't care? This doesn't fit in everywhereel. So I can drag this a bit bigger. I don't know. It needs to be bigger. I'll show you a little shortcut. A little bonus for waiting to the end. If I drag this side and I want it to be equally out that side, what you can do instead of just dragging one side, and then the other, you can hold a sweet shortcut. I promised no shortcuts, but we're done loads. Hold down the option counter mac. Ok counter PC, and you see it does it from both sides. Ooh. Fancy. See, it was worth hanging around doing colored squares. All right, that's it. The big takeaway here really is, don't use a lot of color. Try and keep your y frames really simplistic, use gray, use blue. Don't try and start color coding things again. We don't want to distract from our goal of this y frame test. Just test the mechanics. Do people click where we think they're going to click? Is this the kind of thing that the client wants without fonts, without colors, without styling? All right, that's it. I'll see you in the next video. 12. Strokes Plus Updating Color Defaults in Figma: Hi there. In this video, we're going to look at the stroke, which is the line inside of Figma, all the things you can and can't do with it. Also, I'll show you how to change the default. Whenever you draw a rectangle, it matches a previous style that we've made. All right. Let's jump in. All right. Let's add a stroke. Stroke is just another word for a line. I'm going to click this big rectangle at the top here and over here, by default, when we draw something with a rectangle tool, we get a fill, but no stroke. We can add a stroke by hitting the little plus button. Get given a little stroke around the outside. By default, it's a one point stroke or they call it the weight. That's how thick the line is. I can click in here and use my up arrow or type it in. I'll put in something nice and thick so you can see it three. You can get rid of the stroke by clicking this little minus, add it back in, you get it. Obviously change the color of it. If you want graze, you want to just a lighter gray, just keep it dragged to this edge here and find something in here or just make it black, close it down. Let's say you spend some time, you're like, actually, I want this to be what? Three. Spend some time, you're like, I love this green color. Well, you don't love it, but you've got to use it over and over. If I go over here and say, rectangle tool, which is archy, and I drag out another box, you're like, doesn't have the rounded corners, doesn't have the color, doesn't have the stroke. I could use my eyedrop at tool, click on it, eye for the eye drop at tool. Bam, I grabbed part of it, but not the rounded corners. It just grabbed the colors. What you can do, is change the defaults. Let's say I want this to be the default for every time I draw a rectangle. What you can do is just have it selected, go up to the F up here, go down to Edit and there's this one in here it says, set the default properties. You have to have it selected first or the thing that you want to steal all the properties from. You click on that. Nothing happens except that it appears down the bottom. Now I'm going to click off in the background, hit my archey for the rectangle and I draw something else. Look at us. We reset our defaults. Also do is, let's say we do something different for buttons. That's the default for every time you use a rectangle tool, but there's obviously different use cases, we've drawn our placeholder image. First is a button. Let's say the button is different and we've got a different color and we've got a different stroke around the outside. Hideous, but we need to move it over here. What you can do is you can say and you probably saw it in there in the same place under the F, go to edit. You can copy the properties and paste the properties. If you're doing this a lot, there's a shortcut there, so I can copy the properties and you, my friend, are going to be if edit paste properties, and I'll grab everything from there and paste it onto there. Awesome. I don't want to do that, but now you know how. All right, undo, undo and do. Those are the defaults. Let's look at drawing some lines. We've put lines around the outside. Let's draw a line on its own, it's hiding underneath the rectangle tool. There is the line tool. Going to click on that. I'm going to start up here, click hold and drag drag, drag, and get it down to the bottom corner here. I want it to be the same weight, so I'm going to click in here and go up two, so it's three. Weight, and I didn't line it up very well. We'll do that in a sec. Back to the line tool, which is the l key. Click hold and drag from down to there. It's really common Ug keeps changing that. I'm going to say, two, three, we could copy and paste properties. Let's do that just to practice. I click on this. I go Command Option C on a Mac. That's Control Alt, C, and click on this other one and go Command Option V, it will paste the property. Use that loads. Again, this is too many shot you're like, Man, he said no shortcuts, wait too many shortcuts. I showed you the long way. You can close your ears when I start doing shortcuts. All right, so that's good. Except I mess this up, so I'm going to zoom in. Command plus plus plus. Spacebar, drag it out. You can click on it once on this line here. If I click and drag it, it'll drag the whole thing. What I want to do is double click on the line and I get the two points at the end. Can you see? If I click on it, it turns to circles and I get the little endpoints of it. Spacebar move down if I don't click off in the background. I click on it, I'm like, I'm going to move the square. It ends up doing weird stuff. So I I double click on it, I can say and spacebar, that one looks all right. This one needs work. Double click. Here we go. All right, so we've got a couple of lines in the corners. To get out of that, you need to click a few times in the background just to come out of this mode here. It's not as you got to triple click. That's what you need to do. All right. We've got our lines through there. Let's do our burger menu. The Burger menu is the common thing on navigation for a mobile phone. Let's grab alky for the line tool or go the long way. You can totally go the long way. Wherever you're ready for, here's the alky, I'm going to click and drag out. Now, it's pretty good at snapping, but if you do what I mean by snapping is look at that. It really wants to go straight. You a little bit off, it's easy to get it back. What you can do is like we did with the circle remember when we dragged out at the circle, we held shift, it locked it into the heightened width, you did the same thing with a line, which alky, click and drag out. If I hold down the Shift, the moment goes anywhere, if I hold down the Shift key, you see it locks it into 90 degree angles, 45 degree angles even. That's handy. Get it to a size that you want. Again, when we test on an actual phone soon, that it's hard to know how big the burger mean should be. Basically just three little lines. I like to call it Nav sandwich. Nobody else calls it a nav sandwich, but most people refer to it as a burger. Going to do zoom in a little bit. Let's look at some more lines stuff. We want three of them. You can copy and paste using Command C, Command V or Control C, Control V. We know our suite shortcut. Now remember, hold down the option key on a Mac, can a PC and we can duplicate it. We do the same thing again. I want to do one more shortcut. Close your ears if you're like, no more. All right. One more. For those of you still around, hold down the option key and drag it out. What you can do now is you're like, I want to do that same thing again. Just duplicate it, the same amount, same distance. You hold Command on a Mac, Control on a PC and a D. That will duplicate or do again Command D or Control D. It's really handy. You can keep going, great for lists and stuff. Anytime you're dragging something out, say, it's a list for this a little bit. I'm going to first of all, got to duplicate it. You're like, I'm going to do that. Then remember command or Control D, to do it again. It's great for building out little lists like that or squares or circles or dots. We've got these guys. We need to look at some advanced stroke stuff. Not really. Let's get I'm going to bump it up size wise to two, just so you can see it a bit easier. With this top one, this is called a butt cap. It's an unfortunate name, but it's the line that comes along and just ends here. You've got another option. Click on this. The stroke here. This little stroke panel. You have this start and end point and here they tie in a bunch of stuff. I like arrows. There you go. If you want to get rid of the arrow, hit undo. I want the other end to be an arrow. There you go. You've got some basic stuff in here. The one I wanted to show you is that I don't know why it bugs. This butt cap on the end here, you can say, actually, I want it to be either, I got to scroll down a little bit. I can't quite see it on my monitor anyway, there's round and square. I'm going to say round. Can you see it rounds the end? I like it better. This one here, the last option is you can do it either one. It does both ends. There's a square one as well. What I want to show you is basically the line, can you see there's that little blue thing throwing through the middle? That is the actual stroke. Then you put a weight on it and you can see the little blue line will stay but the blue lines in the middle and it just expands at either side. If I do square cap, let's have a look. Can you see pushes the line in a little bit and go square on the end. I don't use that very often. People ask. It's there, but I use the rounded cap quite a bit to smooth off the edges of strokes, you might want to buttcap. I'm going to select them all. This is a good point. Can you see here it says mixed. You'll see mixed all over the place when you've selected multiple things. I'm just on my pointer tool, drag the box around all three of these. It's saying the start point is, it's a mixture of butt caps, rounded caps, and square caps, doesn't know what to say, it just writes mixed. It says mixed, it's unsure what to display. I'm going to say all of them down the bottom here, round. And I only did it to one of them. That's weird. Round. It is going badly. This is a weird bug. It doesn't normally do this when I teach it. What is wrong? I am giving up. What happens with I think it's the square cap, they've changed the way they do that. When they make the square cap, it used to jut out. Now they've tucked it in, so the square cap, the line ends up being the same size. But it changed the width of my actual stroke. You're not making sense, Dan. Don't worry. You won't be doing that too often, but it's a bug, and I'll leave it in the course because you might bump into it too. Weird, confusing and even down the instructor is a little bit weirded out by it. I just remake them. Anyway, the main goal here is to look at the difference between the flat ended cap, butt cap, and the rounded cap. All I'm going to go to shift one to see the whole thing, and I'm going to select all of these, and often I just use my rakey to move them around because it's hard to drag them the size. It's like snaps around. You're like, no, no, do D. I like to get it where I want it to be and then just use my rake to taperoni. All right. You go. We've got a burger menu or a mobile nav or nav sandwich. Let's start that as a thing. All right. I'm just going to move this up here. Using my rakey again. Oh, nice little shortcut for you is we've done it before. When I'm using my rakes, I just nudges it around. If you hold shift while you do it, it does it in ten times it by ten. So instead of moving one pixel up and down, if you hold shift and use your rakes, it does it by ten pixels. Stuff I use that I forget I do. There you go. You know too. All right. That is it. Strokes and looking at the default colors inside of Figma. Onto the next video. 13. Object Editing and How To Escape in Figma: Hey, there in this video, I'm going to show you this thing. It's called Object editing mode. You might have been stuck here already. I'm going to show you what it's for and how to escape it. See stropy lines. I want to show you early on in the class this. We're going to go into more advanced later on. But people get stuck early on. If you're a double clicker, you probably already here. You might have figured your way out already. But if I have an object, and if you're a double clicker and you double click stuff you're like, what's going on? How do I get out? How to get out is just to double click on the background. Let's do it with a new rectangles. The archy for the rectangle tool, draw it out. Default back to the move tool. Double click it and you're inside it, you're like, what is this? It means basically when you're not in object editing mode, you grab the corners of the rectangle and it does rectangly stuff. It's forced to be a rectangle. By double click it, I go inside of that object and I can wreck it. I can grab the corner now. You notice that the edges change from a square to a circle. Watch this. Look, we've destroyed it. Out now, and now it's no longer doing rectangle bits. You've got inside of this object and you've edited it. It's called Object Editing Mode. You can do some other cool stuff. Watch Double click Go inside. I can click on this line here. I'll just clicked online, Delete on my key. I've got rid of that line, which has got rid of the fill. I can say, Get rid of that line and you can start destroying this thing and start pulling it apart. No longer a rectangle. This can be handy later on we start drawing our own icons. I'm going to undo it to get back. But that is object editing mode. That's where we ended up with this line as well. And we double clicked on the line and we're like we got the dots. We're in object editing mode. The way to know as well is the line doesn't have the stripes on it. This thing down here appears. Watch this. I double click on this over here. You see this wasn't there before, click off, click on. Says, Hey, do you want to mess around with the move? Do you want a lasso tool stuff? We're going to do the Shape Builder. We'll do all these tools later on. You can get out of it by clicking the official cross or if you're in it, just double click on the background. Go Object editing mode and where people get lost early on. Alright, that's it. I'll see you in the next video. 14. Scale vs Selection Tool in Figma: Hello. In this video, we're going to look at the difference between the move tool and the scale tool. The move tool is what we've been using up until now. I'm going to resize this, and it just kind of gets biggerish, but it's not what we want. We want to scale it up. So we're going to use the scale tool, okay? Select it all, and it's going to do this. They both have their place. Let me show you how they both work. And we get a little bit lost, but we fix it. It's okay. Let's jump in. To start off with, I want to add the stroke around these buttons, so I'm going to grab this. Go to here, go to edit, and I'm going to say copy properties, or you can use a shortcut and I'm going to select both of these. Not the type, want just two little rectangles and I'm going to use the Command Shift V or Control Shift V on a PC. All right. Figma by default works the way you manage. I select on this. I've grabbed both of them. Both the text and this button here and you're like, I want to move this out a little bit. And maybe resize it a bit. But let's say that I want it to get bigger. Let's say this one here, I'm like, A, that's too big. I need to make it smaller. Watch. The font doesn't get smaller. Resizes rectangle, but nothing inside of it. Same with the stroke down here. If I want this whole button to be bigger, watch. If I drag it bigger, you're like, the stroke is the same width. The text is the same size, like, how do I do that then? Want all to be bigger. Ah shift. It kind of scales it proportionally for the rectangle, but the font is still the same size. So we're going to use the scale tool. You will toggle between the move tool and the scale tool quite a lot in this course. I'm going to grab scale and that's going to do the thing that we wanted to do. Scale both the stroke and the font and the rectangle together. It does it proportionately. I'm going to undo that because I want to do it to this. I'm going to select both of them. I'm going to go to my scale tool. It's already defaulted to it. Now I can see you get a bit smaller. You can see it's shrinking down the cross, which is a font or the plus, and I'm going to move that in here. Actually, I want a stroke around the outside. Let's do that at the end. It's more about the scale versus stroke. You'll need will toggle between the two quite a bit. Fonts. We've done if I click in here, I can play with my font size. Double clicked inside of the type box. Let's say I want to make it bigger you're like, oh, yeah. But don't worry, there is a super awesome easy shortcut for scale, which is clearly S for scale. No, S is for the slice tool, which I never, ever use. It's K for no good reason. V is the move tool, see down the bottom here, V and K. You talk between those quite a lot. You see it changing down the bottom here? K, VK. I would be on K for scale I can say, all right, a bigger. This thing here, I want to select all of this. I'm on my scale tool. I can say, A switching my sketol. I'm going to select all of this and just scale it down so it's smaller. Somehow I didn't get that. Grab it all. Then scale it down? What's wrong with you? What did I do to this guy? Let's have a look. He's working. Mm. Please hold. All right, I'm back. I know what I did now to break it. Yours is probably operating fi. I'm going to show you why mine's broken. It's because I was showing you something earlier on and you might bump into this anyway. Let's keep this in the course. This line here, can you tell the difference between these two? This one here has this box around it. The reason is is because when I was showing you about how to go into it, double click it, and move around in that side of it, I showed you the wrong way of doing it is this watch. If I grab this one, so you. I grabbed the rectangle and tried to scale it up. I ended up putting a box around it, instead of it being a line. Now it is a line inside of a rectangle. So what happened when I grabbed the square head to demonstrate the wrong way to do stuff. I don't normally do it, so that's why it freaked me out a little bit as I was lost. We won't go too much into how to fix it. It's really complicated for early in the course and not really useful. We can just copy and paste. I've got another one of these, I'm going to drag it out and I'm going to show you get a bonus because we got lost. What I'm going to do is I'm going to go over here and say flip this one over and I'm going to pop that into the corner. When I'm dragging it, let's click off in the back. Click and drag the line. We end up putting a box around it like we did. Watch this. If I click hold and drag this, it causes those problems when we're resizing. Try not to try and drag the edges of these boxes because it might cause us a little bit of trouble. If you do need to edit the line, make sure you go into object editing mode by double clicking it and then moving it around rather than dragging the squares around the outside because it causes that problem. All right, that's the problem. That's how to fix it. Where were we? A, selection versus scale Hopefully now I can select all of these. Go to my super sweet shortcut, which is K. You got it, and now I should be able to scale this up and down. And the stroke comes along with the font comes along. Everything scales. Back to the move tool, which is probably the most common tool, remember, is I've got nothing selected. Let's hit V on the keyboard. There we go. Shortcuts or use the long way. It doesn't really matter. That is the difference between using the move tool and using the scale tool. You will toggle between the two all the time. Great for fonts. Okay, scale it down. There we go. Smaller font. All right. That is it. I'll see you in the next video. Let's try not to get too lost in the next one, Dan. All right. 15. Frames vs Groups in Figma: And in this video, we're going to look at frames versus groups. We've used both of them. Well, at least you know what a group is. This is a group up here. Just keeps things together and I can squish it and move it around. Does groupie stuff. Frames though, super special. They groups, but they can do fun stuff like this. Look, it's sticking to the corners. I can make it smaller and I can clip stuff. Frames have special powers. Like groups, and I want to introduce them quite early in the course if you're like, man. After this video, you're a little bit confused about frames still. Don't worry. Introducing it earlier so that it's not just a big freak out later in the course because you will run into lots of templates and other people's works that are all using frames instead of groups, you'll be like, why? Why? We'll cover some of the Y. Now, let's jump in. Let's start by drawing some shapes on this side. Let's grab the rectangle tool. I'll draw a rectangle and hold shift, so it's a perfect square. Let's do the polygon, which is triangle, let's do an ellipse as well. Roughly the same size. I don't have to be. I'm going to zoom in. I'm going to say, all of you have no stroke. I'll select on both of these and say you don't have any corner radius for no good reason. Just want simple shapes. We've got three shapes and I can line them up for no good reason. Come down, move on. Let's select all three of these and I can right click it and say group. Command G, Control G on a PC. Really common grouping. Grouping works, how you imagine. I can click off in the background now and now I can click and drag all of these because they're in a group. The other thing to look at for is can you see over here on my Layers panel, remember you go to be on file, page one, and we're on this features page, there's this one called going to call this one icons. You can rename it over here. Inside of here, sometimes they collapsed, sometimes they're open. There's a little Chevron here. You can open them up. Inside of my group, there is an ellipse, a polygon, and a triangle. Excellent. Groups. You can ungroup them by right clicking and saying ungroup the group goes away and it's just the shape sitting here now all on their own. Undo that because I want that group. They are icons. Down. All right. I'm going to show you the difference between a group and a frame. So what I'm going to do is I'm going to duplicate this. I've got two of them. I'm using my optional Alt drag. I'm going to ungroup these. Is my group up the top, called icons, and these are my three ellipses. I'm going to move these above this in the layer panel just to make it easier for you to see. There's my icons, and then I've got these guys just hanging out. I'm going to do is hold shift, grab you, you, and you. They're all selected. Instead of saying group, we're going to say frame selection. We've got a similar shortcut. You're going to go oh, they look very similar. As in this is all just suck together, you can move them around. This one here that's now in a frame, not a group. I can move them around. What's the difference, Dan? Well, in terms of grouping stuff, nothing really. You can use a frame or a group. In figma, they use frames for everything instead of groups. Why? Because they are like groups, but you get some extra bonus features. I'll cover a little bit in this video, maybe just a teaser of how frames work, mainly because if you're opening up somebody else's template, use somebody else's you it or opening up somebody else's project, they can use frames for everything. That's what confused me when I first got started. I was like, Why's frames everywhere? They do I say weird stuff, but really they do some powerful stuff. As we go through the course, we'll learn more about them, but I want to introduce it early so that you're not like the heck of frames. Cool. Let's talk about frames. Over here, you can see the difference in the icon. As you can see groups are represented by this little dotted square and frames of this little pound symbol hash thing. It's got a works the same way. Look, there's stuff inside of it. Some of the fundamental differences, watch this. If I go into my group. So this is my icons one. Let's just call this one groups to make it easier. Inside of here, if I double click to go inside, this is object editing mode, you go inside of it. I double clicked it. So inside my group, or you can just click on it over here. I'm going to delete the ellipse, delete the polygon, delete the rectangle, and the group goes away. There is no use for a group with nothing inside of it. Undo that. What happens with the frame? If I go inside my frame, delete this, delete this, delete this. The frame is still there. This is weird. This is why you'll end up with lots of empty frames. You're like, what the heck is an empty frame for? I can exist on its own. This brings us back to how we got started in this course. Watch this. Remember when we drew out our phone pages. They were using the frame tool down here we used. Down here, we use the frame tool, the FK. A frame can exist on its own with stuff inside of it or not. Groups can't. That's one of the perks of having a frame. It makes them weird when you delete things out of them, they still exist. You're like, that's weird. That's right. We're getting used to the weirdness. Let's look at a little bit more of the differences. When I'm using a group and I just got the group selected and I resize it, everything squishes. Whereas if I grab this one, the frame QC can occupy its own little space. It doesn't squish the contents. This is really handy because frames, say, I do it like this and drag it up, you're like, doing nothing, Dan. Wow, what you can do is you can say, I want to clip the contents so you can use it like a mask. That's a perk of a frame, and I undo that. Let me show you a couple more just so that we can get used Why am I making everyone scared of frames? If I wait to the end and show you frames, it's too much too soon. We're going to do a little bit here and we'll go through the course. By the end, master of frames, you will be. Let's look at the group. The group here has a few different settings on this right hand side. Watch this. If I click on the frame, there's a few extra parts like layout. We can click on flow. At the moment there is mixed free form. Watch this. I can stack them this way. I can stack them vertical. See? Go back to free flow. Actually, you have to undo. Can do some other cool things. Let me just demo one more, move the group up there, grab this frame and what we'll do is we're going to know a weird thing about frames is you don't unframe. You group and ungroup, but you frame and then ungroup. Both of those use the ungroup to break them apart again. We've lost our frame. What I'm going to do is going to grab you copy and paste this, move it over. It's jumping ahead a little bit, but I want to give you a sense of why frames are powerful and why you see them in so many people's other documents. So I'm going to select all three of these, four of them now. I'm going to right click, I'm going to say frame selection. What I can do is go inside of the frame by double clicking it. Member object editing mode, go inside. I can say, you are going to have the constraint of top and left by default. This three, though, I've selected all three with my shift key. So I'm inside of the frame by double clicking I've had shift to grab all three of these. I'm going to say not top left. I'm going to be top right, nothing changes except if I come out, now I grab the edges, watch this. Can you see the icons here want to stick in the top right because I set them to top right constraint. This becomes super handy later on when you're like, I've got nothing selected, F my frame tool. I want we're now working on the tablet version. We're going to do an iPad Pro 11 inch. I'm going to drag the name down here and I'm going to grab this and copy and paste it and move it down here. Stick it there and watch what happens. Look, drag it out, it's sticking to the top right. You can do with lots of elements inside of frames where you can drag them out and they resize nicely. If you're feeling a little overwhelmed, it's okay. We're going to cover this over and over, but I just want to get into a bit of frame action early on so that it's not a huge big shock later on. But also, you will just see everyone uses frames. You're watching somebody else's tutorial online, you using frames. This is why. They're really powerful. I don't need this now. I'm going to click on the name and hit Delete on my keyboard. I don't really need any of this either. So I'm going to get rid of it all. Oh, one last thing about frames that is interesting, is watch this. When there's a frame on the background, it has a name. This frame has no name. Let's have a look. I've got this features panel. Remember we named that. That's my iPhone size, and that is a frame exactly like the frame we just made. You can either draw frames using the F key or you can select stuff and wrap a frame around. Frame selection. It doesn't really matter how you get your frame, they are the same once they're made. The weird thing about it is, see how this one has a name up here, and this one here doesn't even though, it's called frame one. I can see the word features here, but not for frame one. It only happens when this is out. You see? Who I got a name now. But I got no name. So all find things, you're like, that has a name that doesn't have a name. It's just because they're not nested, which just means there's a frame inside of a frame. The name goes away. Oh, Dan. This is meant to be helping you be less confused about frames. But let's just move on. All right. Move on. That's frames versus groups inside a figma. One thing is that should I never use groups? Are they bad? They're not bad. They just lack some of the features. So if you like to use groups, you can use them. If you need them to do other things like clipping or that constraints where it sticks to the edges, then you need to use frames. But there's nothing wrong with a group.Pople just use frames, though. All right. That is it. I will see you in the next video. 16. Class Project 02 - Wireframe: Hello. It is class project number two. We are building out our wireframe to a more complete version. So basically just this. We've kind of built this part together. I want you to build out these other pages. They're not particularly hard because they're just rectangles with some type. I've put some placeholder text in here just using Xs. It doesn't have to be exactly like I've got, but just something similar to this. We want to be relatively similar as we work through because we're going to build stuff together. So even if you disagree, like, no, they shouldn't be there. Do it similar to Okay. The only other thing is the arrow. We covered arrows, so you might have to go back to that one. But yeah, just build out this for the three pages. We're following our task flow. If you're unsure about all of this, remember there is class projects in the document in the exercise files. There's a class projects PDF. You can check that out. As we're using this task flow that we looked at earlier. We're building homepage product features, the checkup page, and the confirmation. That's what we're building. Just remember, pick a simple color and just a simple font. It's also probably a good time to mention that there is an illegal fonts you can pick. You can't pick papyrus, comic sans, Times New Roman, aerial or brush script. Those will get you locked up. So any other font than that. Then when you're finished, I want you to take a screenshot of it all. So there is a way of exporting frames. At the moment, on a Mac, I know I can hold down Command, Shift four, and click and drag a box around them all, and I get this kind of handy screenshot that appears on my desktop. PC, I'm not exactly sure what it is. Just double check what it is on a PC. The different versions are slightly different. Or take a photo with your phone and then upload it to the assignment section of this website. Okay, you'll find a place where you can put them. And for those people that hang around to the end, you get a bonus. You'll notice that MO doesn't have these across the top, because I was like, Oh, just copy this and click on this features one and paste it. You're like, huh of that. But why is that there? It's because of some weirdness that I want to show you actually. So just doesn't normally happen, but it happened in this case, and I was like, I'll keep it in the video. So Scott's wallet are inside this homepage. Can you see homepage? In the Laos panel inside of there, kind of like indented is Scott Wallets. Like like on this though, you are hanging out on no page somehow. It's not on confirmation. It's not on screen checkout or features or homepage. It's just hanging out by himself. This is my burger menu. That is why when you're selecting it, it's copying this so it knows where it is on the page. This thing doesn't really know where it needs to go. So when I copy it and paste it, it just throws it into features page and it's like, M that happens every now and again. Not very often, often. Anyway, what I'm going to do is just make sure this burger menu is inside of my homepage, which is where til those up, this just needs to be make sure it's inside of here. Can you can hover above and go, Woh inside of there. Now when I select both of these and go copy, I click the word features and paste, goes in the right place. That is a quirk of figma, it happens every now and again if things aren't in inside of the frame that you needed to be. It's just hanging out on its own. I don't know how I did that. There you go. Little bonus tip for you there at the end. Go make your project and I will see you in the next video. 17. Where To Get Free Icons for Figma: Hello. Hey, we're going to talk about free icons. There are loads online. I'm going to show you good places to get them both from websites and from the Figma community. I'll show you what file types we need and how to clean them up to get them usable. Let's jump in. All right. There's lots of places to find free icons. I'm using iconfnder.com. I like it. I've used a free. Let's go and find an icon and talk about the dos and don'ts. I'm going to type in. I need a shopping cart. So type in shopping cart. A couple of things you want to be wary of depends on how you're using this. Let's say we're using it just for study practice, you can use any of these. The ones that you like there's free and premium, so I'm going to go to free for this class. You might pay for them, that's fine. We are looking for. The other thing is, if I want to use them commercially, so for work, I've got to make sure I use commercial use. Now, some of these commercial use ones require you to have what's called a backlink. If you hover above it says, you need to add a link back to the designers website. They'll let you use it, but you need to on your website or app somewhere, you need to link back to say, This is where I got this fun. You might choose to looking for a shopping cart that is used for commercially, but there's no backlink. As I can just use it freely without having to acknowledge the creator. Now, what am I looking for? Basically find something you like. I like this one. I'm going to click on it. There's a couple of ways you can download it. There's PNG and SVG. You probably know PNG. Um, you know, it's just an image file. It has transparency, which is perfect, and then there's EFGi which is better for this case. So let's have a look at both. I'm going to download a PNG. It's going to be 28 pixels. I'm going to download it. All right. I'm going to click Save. You can just copy the PNG to clipboard, and then go to Figma and just go to paste because I just copied and pasted it. Okay, that's obviously a quickerway or you can download it if you need it share with other people. Anyway, let's have a look at the other one. Let's go to EFG. Let's download it because I want to show you some stuff. I'm downloading SVG as well, and I'm going to copy the clipboard, and I'm going to paste it. You're like, they look the same, Dan, kind of. If I grab both of them and scale them up, remember our scale tool is the K tool. Okay, and I'm going to scale them up. Can you see the difference between SVG here, PNG here? PNG is made of pixels. It's transparent, which is cool, but it is not scalable. That's what SVG stands for scalable vector graphic. I'm going to grab this and it is scalable and it is transparent. You can obviously get a larger PNG. I can go in here and say, I want a PNG, Dan, if I make it big, it's going to work. Copy to clipboard. Perfect. It's nice and clear at this big size. It's still made of pixels, though. Eventually, if I scale it up, I'll start to see them. You see the little fuzziness around the outside. The other thing is if I download it, I want to show you download it again. Let's have a look at the sizes. Okay, so SVG is pretty small. It is 500 bytes. There's that first PNG, the small one, which was too small, right? And it's pretty close on file size. But as soon as I make a bigger PNG, the file size is much bigger. So 5 kilobytes. These are bytes, these are kilobytes. That is 5,000 bytes. So it is ten times as big. And when it comes to web and app design, you want when you're producing a website, you need these icons to be super small and load super fast and be scalable. SVGs win. The other perk for SVGs is that get rid of this one. Too is that they are color changeable. Watch this. I can double click it to go inside. I'm in that object editing mode and I can say, you are now red. Whereas PNGs, I can't as easily. I have to jump out to something and recolor it harder to do. SVG is for the wind. Sometimes, though, you will pull down an icon that'll have a white background. It'll just be on like this. Sometimes they're on, sometimes they're not. Can you see here now it's not transparent? Because it had a frame around the outside that has white in the background. You can fix this by. Let's have a look. Let's get rid of this. SVGs, when you get them from other people, from websites, quite often come as a mess. The mess is there's a frame and inside of that frame is a rectangle and my little vector drawing that I want of the shopping cart. I don't need this other junk. What I can do is just select it in my frame. Here's my vector. I want to pull them out of that frame and this frame here now is not very useful. I can clean them up afterwards. You end up doing that quite a bit when you are working with other people's SVGs in the way that figma deals with them. They are complicated, I know, more complicated than a PNG for sure, but this is just the way we need to go. The other nice thing about SVGs, if I double click on them, you can start to see these dots. We saw these dots when we're working with that line. Watch this. Zouk. You can start customizing them on Mad Max trolley. Super fast. Another good place to get free icons is from Figma itself. It has a community. I'm going to go back to this little home icon here. I'm going to go to Template and Tools. They keep renaming this. Sometimes it's called Community and sometimes there was a button down here and then there was a button up here, just keep an eye out for where it might have gone. Every time I change this, and change it. So from the community, I'm going to search this community, I'm going to type in icons, and what you'll find is there's loads of brilliant stuff in here in groups. Let's say that I want hero icons is a really common one to use. It's a group of icons that a lot of designers and developers will use. I'm going to open that up. It doesn't really matter which ones you use. You're looking for the style that you like. This is going to bring up a good point. I'm opening up basically somebody else's file. This is the preview. I've gone into community, found something I liked. There's lots of other stuff in here like other people's wireframes, mockups or full apps and websites. We'll go into this again later on. For the moment, though, it's going to say, I want to open this in Figma, which is a weird thing. You don't check it out. You actually open it and now this copy is yours. What I mean by that is on hero icons, if I go back to my home, close this down and go to my drafts. It's kind of where we started off. There's the task flow, there's the wireframe that we're working on. And now hero icons is a file that I have. It's in the Cloud, but think of it on your desktop now. It's like your file. It's not connected to the original one. This can get a bit messy. I've got when you open up lots of different icons, they'll stack up in here. So what you can do is once you've found the stuff and maybe pull it out of here, you can go back to this Home tab, right click and move it to trash, so that you can keep this tidy. So if you're going through loads of different templates, other people's community stuff, they'll mess up your documents. All right, let's have a look in here, and you can see just loads of cool stuff, different sizes. The nice thing about it is, let's say something like this where this house icon. This is building here. They've got a solid version versus an outline version. But when it gets smaller, can you see they actually change it. When it has to operate a really small size, they lose a lot of details. See the windows get smaller. A designer has thought this through and think, when it's this big size, it looks like this, but when it's smaller, we'll kind of adjust it. You can see this one here is a little bit more elaborate. When it gets smaller, it gets just a bit more cut down to be more visible at a smaller size. Loads of cool stuff in here. One of the other things that if you've downloaded something that's other than the hero icons, you might find that under pages here, there might be a cover page and then there might be the icons. That's what they've done here. You might open up something, you'd be like, I can't find it. Because there's pages. We'll do pages together later on, but have a look, there might be something else. The other thing is trying to find the icons in here. You can search search search, but there is an option. Icons. I can have a look through here. There is all my icons, loads of stuff. They're very well organized, but you can do a search. You can do what are we looking for? Shopping? Is there a shopping one? I imagine there is. Oh, look at that. Okay? So it's jumped straight to it. Now, how do I pull it into my document? What I'm going to do is I'm going to say, Alright, I like this guy here, double click it to go inside. Now, this is where it gets a little bit messy. I'm going to close down the search. There it is there. I'm double clicking it again. Okay? So it was inside of a group. Now it's inside again. I can go inside again, and I can get right down to the vector there. Okay? You know, you end up with this object editing mode. That's when you know you've gone deep enough because it could be groups inside of groups inside of groups. So you're trying to find those. I'm going to copy it and then I'm going to switch to my other tab. Oh, shortcut time. Command one, two, three on a Mac, Control one, two, three. We'll switch between these tabs at the top here. If you've got four things open, you can go one, two, three, four. If you've got nothing open, you can only go to Command or Control one. That's just the home base. I can switch back to Command two, paste, and there we go. I'm going to use my scale tool, Juk Okay, and we've got somebody else's icon. One last thing that might happen is that you might grab, let's say it's this and I just grab that I think I've got it, and I'm going to go Command two, Control two on a PC I paste it in. What I want to show you is I've got it. But it's got this weird icon over here. Basically, this little icon here and this little group here, it looks weird. It's got a purple color. It's because it's an instance. We're going to look at instances later on. It's too far from where we're at now, but you can then go, All right, what is all this stuff? Remember, I can go inside of it, say, I want you, I can either cut it and paste it, it comes out of that and that little container, which is called an instance can be deleted and we're back to having our vector. So I guess I want to show you that because you're going to be looking for stuff and you're like, What is all this junk. Essentially, we just want to pull the vector out of it later on when we know what an instance is, they're going to be useful. But we don't know what those are yet. Grab the vector. All right, we don't need any of that right now. All, we've figured out where we can get them from. I'm going to show you one other place to get them before we go and make it a class project. But we'll do that in another video because it's another function side of Figma called plugins. That's it. Working with icons in Figma, try and find SVGs, and try and dig out the vector part of that icon, ditching the frame in any instance that wraps it up. Learned a sweet shortcut Command or Control, one, two, three, we'll jump between our tabs. Impress your colleagues with your tab jumping. I'll see you in the next video. 18. How To Use Plugins in Figma for Icons: Hello. Hey, we're going to look at plug ins inside of Figma. Basically, a plugin is a little mini program that runs inside of Figma to kind of extend it. Okay, it could be finding fonts and images. It can do all sorts of stuff. He, there's lots of different plug ins. I'll show you how to find them inside of the Figma design doc, also in the community. There are a super powerful way of extending Figma and super useful for us. So dive in and I'll show you how to find them and use them. Right, plug ins. They are found under here under actions. They do move this around. Every time I record this video, it's somewhere new. They have a little look around. We're looking for actions, and we're going to go to this one called plugins and Widgets. So we're going to look at plug ins now. We'll look at Widgets later on. Let's look at something we already know, so we'll look at icons. I'm going to type in hero icons. Because that's the one we found that community document for. It doesn't really matter, but there happens to be a plugin for it as well, rather than opening up the community doc, searching in the files, and then bringing it in. What this means is plug in just a little mini program that runs on your screen, it's just easier than going and digging through files. I can go in here and say, I want the account page. They have accounch, let's go for it. There's no account. I'm looking for a person person. Man. Do they even have one? Account person, man, woman, nobody. Come on, Brain. Let's give up. Let's go book. Okay, so there is a book. Let's use this bookmark one. So what you can do is you can click and just drag it out and you have an icon, ready to go. Look at that. Super cool, super quick, super easy. Remember, it's come through in a frame with a vector inside. There's nothing wrong with having a frame. I think in the last couple of videos I'm like, Get rid of the frame. No, it's kind of like a group. It's got the vector inside. It keeps it in a nice square. There's nothing wrong with it. Sometimes, though, they come with a a white background. You can see the turn the eyeball off on this to hide it. Sometimes they come through with it and you can turn it off. A frame sometimes is often used because let's drag out another one is that they can be lined up. Can you see? They are different size vectors, but let's select them both. They're in the same square, if you know what I mean? That's handy for icons because that is the same height by width, the 24 by 24 by the look of it. You don't have to get rid of it. I'm just making you conscious of the frame because what ends are happening is let's go four something else, Let's find something with bits. There we go. This one here, I end up sometimes doing this and you're like, Okay, I want to get rid of this part and then this part, and you end up with junk leftover because there's this frame that I haven't deleted. Over here, I can see it. It's got nothing in it. I can delete it. Getting you used to it. You can find plug ins other ways. I'm going to get rid of these guys. Oh, you see I did it there. I didn't get rid of the frames. I got rid of the insides. Thought I did. I just didn't drag a big enough selection around them before I had delete. So let's go to community, and let's go to Templates and Tools, which used to be called community, which they still call community. And let's go to plug ins. Actually, there is a set it says specifically find me plug ins for file organization. There's lots in here. My advice to you is after this video, just spend 5 minutes having a look through the plug ins. You'll be surprised at how many things have been made for us here in Figma. It's really useful. If there's something you're doing repetitively or something weird for your job that you use this other company, Splash or some stock library site or some database, you'll probably find somebody's created a plug in. There's so much here. Spend some time, have a look around editing in effects. On plugins, there we go. The reason this way is quite useful is that often are you can say I want the free ones. The other thing that's handy in here is let's say iconfy. Let's have a search. Let's go icon, Pio? It's meant to be a company, but there's a lot of different people. I've typed in knifi all products I want to show plugins. You can see this iconofy, there's another iconofy. You can have a look and say, A, this one's been used by 23,000 people, which seems like a lot until you see this one and this one's been used by 3.5 million. When you're new, that's a good signal to go. All right. Lots of people are using this one. This is probably the one I want. It's the same plugins. We can just get to it a different way, either via the community or via inside our design doc. I'm going to open it in which file we're working on we're working on that one there, and there's my plug in. Here it is. You'll notice that all plugins are made differently as in there's no consistency. Me showing you how to use this one was very different from the hero icon one. So some of them are really big like this one, it's quite in the way. The other herro con was quite small. This one here has some cool features like what this if I go, I like this one here. I can decide what color it is before I get into Figma, and I can decide what size it needs to be. It's going to be an SVG and I can import it as a frame or as a component. When we get more advanced later in the course, you might jump to this. So that'll save us a step later on. But for the moment, we know what a frame is. We're going to bring that in. Where did it go? Just on my page, you can just drag them out as. Okay. Just remember, they're not made by FIGMA if they're not working, it could be that they're not supported anymore or they're a new plug in and there's one poor girl trying to keep the plug in alive on her lunch breaks. So sometimes you feel like, Oh, this should work, and it doesn't. Why is it not working? Plug ins are done by the community, sometimes by companies, but not FIGMA. The one thing down here as well that I want to mention is, let's find another one. Let's go Unsplash. A really good one for free stock images. If I search that, I'm going to plugins and widgets and let's say that, click on this one. I gives me a little preview. You got Run and save. Okay? Run is the one you want. It just runs within this document. Okay, I just starts working. That's the one you want. Save will save it for your organization, which just means if you're using FIGMA as part of a larger team, like an organization and a big company with multiple Figma users, you can save it, and it means everybody will have access to it. Most of the time, though, you just want to run it. There we go. Slash. All right, there are loads of plugins, and that is your introduction to plug ins. Last thing is, if you go back down and here on your actions panel, you will see that it has recent ones, so you don't have to go and search them every time. All, that's it. That is plug ins inside of Figma. We'll look at a few more letter in the course, but that's a good intro. Let's get on to the next video. 19. Class Project 03 - Icons: Hello, it is not homework, but super fun class project time. I want you to find three icons for your site. A, I want you to find a cart in image and a success icon. Let's have a look at my one. So the cart icon goes on every page, at the top here, okay? And the image icon, we're going to switch out for the crosses, okay? So it's really common to use this kind of generic looking Iman image placeholder icon. Okay, so I want you to switch that out where you've used it. And also on the confirmation page, find some sort of, like, good work. You've done it icon. Doesn't have to be a ti. It can be a ti. Your image can look different from mine. Your cart might be a shopping bag. It depends on your product. You find a good place for another one, you can have more than three. That's fine. A couple of things I want to show you though before we go on is a little trick. For those of you who are doing the homework and haven't skipped it, you get to win. I'm going to copy this one. I've got to make sure I've grabbed the frame that's got my vector in it or just the vector if you've cleaned it out. I'm going to click on features. Click on the page name and I hit Paste. I'll go into that page at the same position. Same with this one, hold Shift and grab both of these and go paste. Ends up on both pages. Look at us. It's great for navigations or anything that is consistent across the page. Consistent across lots of pages. Imagine you've got, I don't know, 20 or 30 of these frames for your mobile phone different pages. You can paste them across lots of them easily. The other thing I want to show you is I used the iconfiPlug in. You can get them from icon finder. You can get them from wherever you want the community. I don't mind where you get them. I'm going to jump back in time now and show you some of the issues I have I don't know, just to keep showing you some of the quirks with Figma when importing icons from other people. Right, let me show you now. So I ended up using icon Phi and just dragged out some versions of it. I ended up on this page here, and this is where it's weird. Let's zoom out. Let's say I'm going to drag this one up here, that worked fine. The vectors inside the frame, I'm going to leave it like that, and it's up there. This one here, I'm going to drag out the vector came out of this frame, the frame is still down here. It is just one of the weird things about FIGMA. That's okay. We're getting used to it. The thing that's making it weird is that if I click on this vector, it is a vector inside this thing called Ix success. Somehow I clicked on the vector and not the frame. If I click on the frame and then drag it out, I get the whole thing. Sometimes you can grow the vector and not got it, Dan. The other thing to note is that this first one, I'm going to undo. This icon here is inside my features page because it looks like it is. Look, there it is there. This other one, if I click on this one here, the success one, it is actually hanging out my layers panel, not inside of features. It's just on top. Imagine if you know layers, you'll know. But if you don't, it just means it looks like it's on top of it, but it's not actually inside of that parent frame, which is called features. What I'm going to do is it's just something to be mindful of and I'll keep reminding you to the class because that's where we get caught out. What I'm going to do is I'm going to say you select the whole parent frame and then I'm going to drag it. Okay, now it's completely out. That's fine. Same with this one. He's come out of features, so he's no longer in there, and then this one in here, I grabbed the vector again by accident, I'm going to grab the parent frame and drag it out. Now these guys are hanging out, not on anything, and I'm going to be a bit more specific. Sometimes it's easier just to zoom in because it's easier to grab the little names. In this case it's a dot dot dot because it's quite small. I'm going to add it to one last thing I want to show you is that I grabbed three different. They went from the same family. These match size wise. But this one doesn't. What I'm going to need to do is drag it up and be a bit bigger. The reason this came is 24 by 24. That one's 24 by 24. This one came at 16 by 16. Now I can use my skeletol just drag it up. It should snap and get. There you go, 24 by 24. Now it's the right size. You can select on the parent frame and say, actually, you are going to be 24. See it says dimensions by and because the height and width are locked, they're called the aspect ratio. I'll do both at the same time. Was that helpful? I got to add these things because yeah, there's some quirks to Figma. The real easy ones to get used to them. I want to throw these in here just in case you do get lost yourself. And what I might do to make this a little bit nicer is I'm going to say. I'm going to call this one icon, hyphen cut. This one here. Maybe you can double click them over here or in the Las panel. This one's going to be called icon image, and this one here is going to be don't click that button. That is the let's remove this. That is, little icon, if you do click it, that just says to the developer when you finish this course, I'm done with this that's ready to go to development. When it's off, it means it's not. You'll accidentally click it like I did. We'll cover Dev mode a little bit later on, and we're going to call this one success or tech. It doesn't really matter at this stage. I'm going to put them on my document now move them around like you saw at the beginning. I want you there. Actually, this one didn't need to be that size because I'm going to use it a lot bigger work your way through and finish the project. I will see you after the class project. 20. How To Use Pages in Figma: Alright, everyone. This video, we're going to look at the exciting world of pages. I want to have its own video because there's a few things to it. I want to add some extra value, and we're going to need it because at the moment we're starting with just one page, our mobile wireframe, but we're going to add a bunch of other pages to keep our persona and task flow on. We'll have this one we're working on currently at a desktop version, and also I want to show you because one page you can get quite far with, but eventually you end up with stuff like this. This is more of a real world project from me. It gets messy, you end up having lots of different pages. Instead of just page one with all the junk on it, you need to separate things out so that you've got kind of different groups of content to make things a little bit easier. We're going to do that in the course. Let's jump in and learn pages in figma. Let's go. All right, pages. You get given page one by default. If you can't see it, you might be on assets. Make sure you're on file and see page one. You can get pretty far with a document. You don't need pages is what I'm going to say. You need to understand them though, because yeah, they're handy having extra pages. Plus when you're working with other people's documents. Let's go through now and make sure you're on file. Let's call us one. Instead of page one, this one is mobile and it's going to be wireframe, not Wi Fi. Let's add a new page. We're at the little plus button. Let's call this one desktop. We're probably going to skip Y frames. Going to call this one desktop and you've got two pages. These feel like pages, but they are just frames. Let's go to desktop and let's create some pages. F is the shortcut for the frame tool or grab it down the bottom there. I'm going to go over here and we're going to switch from tablet phone, desktop, we're going to pug, desktop, this 1440 by 1024. I don't know why you need to say 1024, but that's how everyone refers to that size. No 1024 for some reason. Okay, how many of these want four. I'm going to use my option down on a Mac on a PC. Just drag this one out. I've got two or you could use your copy and paste. Just click the name first at the top and then go Command. Who remembers what duplicator? That's right. Good work. It's Command D on Mac Control D on PC. I've got four of them. Then we're going to go to the shortcut Shift. Hold Shift down and hit one. That's fit everything onto the page. I like this. I'm going to speed this up because I'm going to copy and paste. Actually, I know what that one is, home page. Let me copy and paste them so they match. You wait there. I'm just going to flick between this one and this one. The shortcut for going between the two pages is just your page up, page down on your keyboard. You might have told the function key if you're on a laptop. I copy that had escaped to come out of it, page down. This is painful. I'll skip it. Let's jump to the end. We're going to create a third page. This one is going to be going to hit plus, and this one's going to be A persona and task flow. Now, on this page, I want it to be the top, so I can click Hold and drag it, so it goes at the top and it doesn't have to have a frame. I'm just going to dump in from the exercise files. I'm going to dump in my persona example. You should have yours screenshotted or downloaded from earlier. I'll zoom out a little bit and then add my task flow. In here, there's two task flows. It's the P&G version, which is just like a screenshot. We can use those. Shift one to squeeze them all in. So there's a great place to keep the brief and what we're doing all on the document. As you can see, these guys don't need frames to go onto. They can just be dumped on thing I want to show you is that if the task flow at the moment is a PNG because it's easy to add, but see, we do want to add somebody else's Figma file. You've downloaded it, you've found it, it's on the hard drive, somebody shared it with you. It's most easy just to share a link to the file, but people do share Figma files, the actual file, you can save a local version. I've done that in exercise files. I'm going to show you at Hope and one. What we're going to do is go back to home and we're going to go over to this little icon here, Import, and we're going to import from my computer. We're going to find out exercise files. We're going to say dot FIG. You see it there, not the wireframe. I'm going to grab the task flow dot FIG. I want this one because it's a working file. I've inputed it or is it there? This instead of an image is actually all the rectangles and things. Instead of that image, I can copy this, go back to my what do we shift two Command two even to go back to this and get rid of this PNG and just paste in the actual files because then we can go and change it and modify it and fix stands terrible spelling and pick new colors. Up to you, but I also wanted to show you how to import other people's Figma files when they're a physical file. We'll do sharing properly later on. Why do we bother going through pages? I mentioned at the beginning, but I want to show you one other good example. I'm going to go to home, I'm going to go to templates. Let's look for let's say you're building an IOS app, IOS, we're going to hit Enter. We're going to find one that has, for IOS 17, let's open that up. And what you'll find is open and Figma, which we know we're going to agree will give us a local copy of our own version. We're not actually working on this, it's now the person who made this. We're working on the version now that if I go to home and I go to my recents, there it is there. It's actually on my computer now. But when I'm in it, you're like, Oh, it's nice. It's very comfortable. There's not a lot going on. But then you go to make sure files under pages. Look, cover. Change log. Getting started. But look at this. I can scroll down and there are lots of pages for this one particular document. Obviously the operating system for mobile devices is huge. So we can go down and say, actually, can you see what they've done is they've grouped them? Instead of mobile versus desktop, they've gone, I want to fine. Let's find something interesting. Let's look at notifications. Super interesting. But here is a page dedicated to links up here to the guidelines for them and stuff you can start using. They're a little bit complicated now because they're in something called components, but we'll learn those. You'll get hang of those later on. But it just gives you page control. Look at that. All the dots you need when you're swiping popovers. So look. Oh. This is for iPad only, but you can start to see people group things in pages, and when you're new, you might not find it or get a little confused or lost. There is lots of stuff hidden in the pages here. All right, let's close that down. I'm going to go back to here and keep everything clean. You won't. You'll have loads of junk lying around in here. That's okay. I'm going to go into here and say, to be tidy for this course, remove the trash. Excellent. That's it. We made a whole video on How to add a page. Good work, Dan. Hope there was something useful in there for you and I'll see you in the next video. 21. How To Prototype in Figma: Hi, everyone. In this video, we're going to prototype. One of the powerful features of Figma is being able to mock our designs up and test them on at least a virtual phone and later on on a physical phone, where we can click through to our different pages and check out how it's working. We can get it to a more appropriate size. We can check sizings, and we can keep this open and keep working and be testing all the way through. It's called prototyping. Let's jump in and learn the basics. Right, first thing, shift one just so in the screen, we're going to switch to this option here called prototype. You will toggle between design and prototype quite a bit and get probably a little lost to begin with because prototype, if I click on this now, it loses all the design things, so the color and the font and the sizes. So just be mindful. I'll remind you through the course. Let's click Prototype. Let's click on this first frame. You click on the first heading of the frame, we'll go home page selected. What we're going to do is watch this voice hover around this dot that appears on the corners here. What I can do is I can say, click Hold drag. Go there. By default, is just going to say, all this is going to be fine. It says, The trigger is going to be when I'm tapped, I'm going to navigate to the features page instantly. Let's do the features page. This one, just drag it here. You can drag it back this way. You can drag it all see these things here, they're called noodles or wires, and we're going to drag it from features to this page. Then when we go to checkout, we're going to scroll over Spacebar and drag it to this one. We're going to use all the default interactions. All right. Get ready. You're ready to prototype? You do it by hitting this little button up the top here. The little play button. It's called present. Ready, loading. There it is. It's in a phone. Not good. Here is all my logo and stuff stuck in it. We'll address that later on. Okay, watch this fight. Click once. I move to the next page. Next page. Next page. Oh, very exciting. And then it doesn't go anywhere because we don't have anywhere for that to go when it's finished. All right. The thing to note when you are dealing with this prototype view is that it's actually opened up in another tab. So there's the tab we're working on. All it did is when we had the play button, it opened up our design in the tab. A couple of things we're going to look at is watch this. There's nothing here at the moment, but if you give it a real big jiggle of the mouse, jig jiggle or click in the background away from this. I will say, look, all these other options here. The main ones you're going to look at is restart. You see down the bottom here, Restart or the arche. We'll just get it back to the beginning so we can go through it again. Lovely. There are more options up here. You can go full screen to get rid of the chrome if you want it to be presenting it to a client. Click that off again. There are more options here. I'm not going to go through everything. The only other thing you might do is you've got a manual way of going through this as well. So just back and forward through the Okay, you can leave this open. You don't have to close this once you're finished. You can just leave it there and it's live. What happens is watch this if I click in this, you'll notice that I can't see the color. Why can't I change the color, Dan? Yeah. That's right. I'm on prototype, going to go to design. Down here, I'm going to pick a new color. I'm just going to drag any old thing in there. And if I go back to preview, I don't actually have to launch it. I can restart it and you can see I'm back here, can stay open. What I tend to do is click and drag this tab. I can move it around and I can say, right I want it to be on this right hand side here. I can be working on this side, which is a bit squish now. But it's a live update. I can say this. Actually, I want to go back to that original color. What was it undo, undo, undo. You can see it's updating over here. And what I do even more is less side by side. And what I do is actually drag this and have it open. What I'm going to do is close that down. What I normally do is I'll preview it and actually grab this tab, you can actually drag it out of the browser onto my other desktop that you can't see. I'm doing the exact same thing. Hearing on my other document. Up to you. I'm going to close it down. Another good way of previewing is in here, there's another one. So instead of hitting the play button, there is a preview button. Okay? So you click this little Chevron here, this little down arrow, click on preview, and it'll open up in a little window that can be moved around. It's just hanging out there. It's too big. I can scale it down to more my phone view. What this is really handy is here, I can say, so I'm working on the size of click on Features. Can you see it updates? I click in here, and the product text is just too small. I go through here and say bup bup, bup, you can see it instantly updates. I'll move it closer you grab the top of it there, you can start in my dist upp view, I can be quite zoomed in, be working on stuff and go, right, what does it look like in terms of font size on a mobile device? I'm not designing the wrong size. Because you see that 99 way too small. So I'm going to go in here, make a big, big, big, big, big, bigger bigger bigger bigger. You get the idea. Shift click, nice and big. Again, you can restart this one and close it down when you're finished. I'm going to go back to my prototype mode. You can delete these wires by just clicking on them and hitting Delete on your keyboard, just physically deleting them. Click on the frame itself and click in here and hit Delete if you want to get rid of them. I'm going to undo undo because, we're going to delete them. That's what I want to do. Delete that guy, you eat there. Actually, I'm going to put them back in because I want to show you a couple of other things that are interesting that maybe catch you out. If I'm on checkout and I go to play, actually, it's gone yeah, that's fine. If I click on, you switched it from preview to present. Whichever one, whichever frame you have selected is the first one that's going to appear. Can you see I've ended up a checkout you're like, that's not the first page. It just means that whatever one you are working on will present first. If you want it to be the homepage for the first one, I reset, it'll be on that page. One thing it can't do is you can't let's delete this in direction. You can't connect to another page. I'm still in prototype mode. I can click on Homepage. I can see this a little dot. You can do it on either side. It doesn't matter if you want it to come out at the top, just automatically goes to places, but you can't get it to go to another page. Doesn't like that. So you have to go to another frame, that's fine. You see they let go too early so you go to get it to drag across and thing people ask is sometimes you don't have the mobile frame, so I'm going to go to homepage and you're like, How did I get the mobile phone or maybe I don't want a iPhone, I want a Android or something else. In prototype mode, click on the background, so you got nothing selected and here you can see your prototype settings. You might want an older phone, you're going to be in the future. You can only be in the future. You probably got a 17, 18, 19, you might go, right, I want a Google Pixel two from the Dark Ages. Then when I have present, it's going to use that as the frame. Same for desktop, let's go to desktop, with nothing selected, you can go through. I think I changed mine. Yours probably is on nothing. I put mine on Macbook Pro because it looks cool. And when I preview this page, there's nothing on it. Not very exciting, but it is on this MacBook Pro. I'm going to go back to my mobile one. You can change it to horizontal and vertical. They don't perform very well as it's very uncommon to design for vertical landscape mobile unless you're specifically designing an app to do it. Often it takes the shape of a tablet size, doesn't preview very well because it gets squished in there. Lo There you go. All right, that's it. That is basic prototyping. We'll do something a bit more exciting than the next one. Let's delete the interactions. So I'm clicking on these and just deleting them. And say goodbye to the noodles. Not many people call them navigation noodles. It might just be me, so be careful when you go into the meeting and talk about noodles. Anyway, let's get on to the next video. Let's connect the buttons. 22. Prototype Animation and Easing in Figma: Hello. In this video, we're going to look at adding interactions to buttons, and when we click them. All that one didn't do it. We're going to click on this one. Can you see we're going to add some animation to the transition between the different frames. We'll get the navigation to work up the top here, learn more. Oh, slighty. Okay, so let's add interactions to buttons and add a little bit of animations in between them. Hump in. All right to get started, make sure you're on prototype mode and make sure you've gotten rid of the old noodles. So I'm going to get rid of you, you, and you. All right, and shift one so we can see them all. All right, so we've done page transitions or page and directions. What we're going to do now is actually do it to the buttons. We're going to go click on the By now button, make sure you're on prototype, and you can see you get the little dots here like we did for the entire frame, where they appear we can drag around. We can do it for anything. Look, the text here, there's icon. We've got this button here. I want when the B now button is clicked to click hold and drag drag drag to the payment page. We've skipped the features page. Let's give this a test. Shift spacebar to open up that little preview. W that, I'll move you there. When I click on By now, it jumps to the checkout page, skips the features page. Awesome. I'll make that smaller so we can see things. The other Well, actually, before we go too much further, I'm going to hit for reset. Can't see the buttons. This is a good point to point out. We are designing for the I'm scrolling up for the iPhone 16? And the buttons are fine. See them, but you might have to support older models of phone. You might have to just check what the most common phones are currently, what are the sizes and test on a few of them to make sure that Because if I go back to this where is it? Pixel two if these buttons are below the screen, the initial screen, it's called below the fold. That's what they call it. Old printing term where I can't see them and aren't as likely to find them because they have to scroll here. What I'm going to do is they can scroll on the phone. But over here, what I can do is watch this. I can grab both of these. That's an interesting thing inside of Figma is if I'm in prototype, not design, I can still move things around. I can't change the color of it. It hard to grab them. I grabbed a whole bunch of stuff there. I don't know what I grabbed. I'm grabbing you can move them. Come on, Dan. Going to zoom in. Clearly not as useful in prototype mode, but you can move things around. Can you see my little preview? I'm like, I want them there. That means they can be seen on iPhone 16 and this old phone. And what else can we do? Let's do this button. Now, be careful where you're selecting to prototype from. You can click on the text and get that to prototype over to our features page, and that will work. The click area, the thing they've got to click is the text, which is a lot smaller than the actual button. So I'm going to undo that and just make sure I'm clicking the button. I want that whole thing to be a button. I'm just clicking, holding, and dragging. The next thing I want to show you is the animation. So by default, it's on Instant. What I would like to do is when that Learn More button is clicked, I would like it to do something a little bit more interesting like Dissolve. Dissolve is. If you hover above this little thumb now here, it'll give you a little preview. Dissolve is clearly pretty easy to understand. Skip animate. There's a bunch of different animations in here. It's missing the best ones in the world Page Peel. But it's got your regular ones move in, move out. Let me just demonstrate. I want to go through there, you can explore those. Let's do the difference between, let's say move in. You see? It's very exciting. I'm hovering above it, slides in there. Watch off on there's something a little bit more special for push or slide in I quite like. You see slide in, I pushes the other one and dissolves it at the same time. The white one there gets pushed out. Let's just preview it actually. Over here, I can click on this. You can see the other one moved to the left and dissolved while this one, the second frame moved in. That's quite a cool one. Some of the other things to look at is let's look at direction. We can get it to go from the other side. I'm going to hit. I'm clicking in here, hitting Alpha reset. I go a little more. Can you see it push from the left. I'm going to go back to the right. You can go up or down. Let's talk about the curve. Ease out is the default, and what that means is that it comes in really fast and slows down at the end. It eases out. If you want it to come in really slow, you want it to ease in and then be fast at the end, you can use ease in. You can do both. Ease in and out is often just a good default. I like it. Slow at the beginning, fast in the middle, slow at the end. Some of the other nice ones is ease in and out back. This has a nice little bounce again. Watch this learn more. It's got this what do you call it anticipation from animation. It comes in and goes a little bit past where it needs to be, bounces a little bit. I like it. You can play around with these. You're not allowed to use bouncy. It's legal. So have a go with bouncy. Doing doing doing you're allowed to do that. I'm going to use these in the back. Let's look at duration. Duration is just how long it takes for this whole animation to take part. Milliseconds, MS, there's 1,000 milliseconds in 1 second, so that's 1 second right there. So you want it to be longer, you want it to be 1 second, the 0.3, you can do that and watch this. Is it. No more. It takes a lot longer. You work out your timing. The defaults are pretty good, though. I'm going to go back to 400. You set. I lug it. Probably a bit fast, actually. I'm going to go to 700. There you go. Now, let's do some of the other ones we've got By now Working, learn more. You can just do a Select All, so you have to have nothing selected. I'm going to zoom out, shift one. See everything. I close it down. And you can have nothing selected by clicking in the background and then go to Select All, it's edit I don't know the shortcut. There it is Select All, or Command A on a Mac Control A on a PC, and you can see all of the different noodles. Can you see them there there's two. So which other ones do I need to? On purchase on the button. Let's drag this off I bought it. Congratulations. And what it'll do is it'll remember the last thing you did. It's going to slide in using all of curve and duration. Perfect. Another tip is, we get stuck. Remember, Shift space bar to open up the little preview or you can hit a little play button up here, up to you. I'm going to go to By now purchase. I get to this bit and then I'm stuck. There's no real way I can do anything else. What do we do? Move him down there. Grab the white bit to drag it around. It's really typical for the logo to be clicked to go back to the home page. Let's do this. I'm in really close and I need this to go to the homepage. Obviously, I could zoom out and I could drag the wire over or the noodle. But your designs get really, really complex. Sometimes you just know where it needs to go, but you don't want to have to zoom out and try and drag it across all of this stuff, which is dragging, dragging, you're like to do. It can be a bit of a pain. What you can do is just do it manually. With it's selected, you make sure on prototype. You can see indirections here. You can add a plus next to it. I've got a new interrection. The trigger is on click. When this thing is clicked, the action is going to be, we'll cover these later on. But we're going to say, I'd like it to navigate to. What destination? Well, look, here's in my pages. I want it to navigate to my homepage. What kind of animation I'm going to get it to do a dissolve. I'm going to leave everything default. You can close it down and you can see that the wire is going down here. Sometimes it's just easier to do it manually. So it's good to go now. It goes back to there. More. Nope. Can't go back. I haven't done it to this page. I did it to just this one logo here, but not to these two. This is a good point. What you can do is you can just work your way through doing the same one for all of these. Or what you can do is let's delete that one. Delete that one. What you'll notice is you can do some basic design stuff inside a prototype. I think we discussed that. We did. I'm going to select that and copy it. I selected on the confirmation page I've copied it using my shortcut, and I'm going to click on Checkout, so I know it knows where to go and then just a paste. You see, it went into the exact right spot. We've talked about that before, but also bought through the interaction. It doesn't work when you're in design. Watch this if I click on this and go copy I go over here and paste and then go back to prototype. I worked. It never used to. It does now. Hurray. I knew that. Anyway, so you can copy and paste elements and they bring along the interactions with them. Now we should be able to go here and go and go back. Go to the By now page, it's purchase, go back to the homepage. Oh, we're doing it. We're prototyping. Do need to update an old one, like this one here, I don't think does the same thing, you can click on it or actually, maybe it's this one. You can click on the wire and you can see it underneath or you can change it up here. It doesn't matter. If you want to see a bit more over here, you can click on it and it will open up with all of the stuff that appears when you click on the wire here. All right. So have a little experiment with the different animations. Okay? You know, all of these. Unfortunately, there's no page peel like we all love. I think it's been made illegal in most countries. So yeah, that is it. Experiment, don't mess with smart animate. Get a good idea. Editor, can you exit us from this video using the super lovely page peel? Let's go. I said, Do it. There you go. 23. How To Add the iOS Status Bar in Figma: Hi, everyone. This video, we're going to look at the status bar, which is the time and the battery and the Wi Fi signal. We're going to add it to our template because at the moment, it's getting bunched up here on the iPhone 16. We'll add it so we've got a bit of space so we can avoid the letterbox, window pill. I can't remember what it's called. But anyway, we want to avoid the camera that pokes out through the screen on most new phones. All right, let's jump in. It's called the Status Bar. Alright, so let's do it together. I've done this for a little while, so let's figure it out. I'm gonna go to home. I'm going to go to tools and templates, and I'm assuming I can type in IOS. It's called a status bar. Okay? I'm using IOS because I'm using the iPhone. You could use the Android status bar. Okay? And then the way I decide which one to use is, I don't know. Just start looking at them, see which one, that looks kind of good. It's got lots of likes, got lots of downloads. There's probably more. Don't care enough. I'm going to grab one, open it, see if I can grab IOS seven, have a look, status bar. There it is there, so I'm going to say, actually, these look like parts of the status bar, have a look. Oh, okay. They got lots of options. We're going to go for just the basic one. Are we doing on dark or on light? We need the dark one. I'm going to copy this, go over here and I'm going to say, let's do it to the home page. Let's go home page, go back to design, and I'm going to go to. First of all, I know I'm going to have to move all this down. You don't have to add the status bar. That's the first thing here is that your developer is not going to want it, but when you're previewing it, it can be a bit weird not having it. Here we go. I'm basing it up the top there. Perfect. I probably going to do it. Let's go to our preview and let's make sure that we've got let's have a look, it's up there. We're going to switch the phones. Let's go back. Let's go to prototype. Let's go in here and go back to iPhone 16, which is all the way at the top there. Now let's preview it better. Because it's put in the what do they call this? The pill, no, the letterbox, the door. I can't remember. But now we've got our Nav in here. What tends to happen especially for mobile web is you don't need it because the browser ends up pushing it down anyway, and there's a bit of browser chrome up the top. But for our template, I think it's good. We worked it out together. The one thing we might do is, do I want it? I really don't want it. What we might do is select it and go to design and maybe just give it fill color, so that when we're designing, we can work around it. Can I drag it up? Oh, I can. Nicely designed. The one thing though is when you start adding complex components from somebody else is it's going to bring along a few things. This thing here is an instance of a component, which you don't know what it is yet. So you just go to be careful, you're like, Do I really need it? Could be. There's a dark mode option. Look, light mode, dark mode. This is the stuff we're going to be able to build as well. The really interesting thing is that actually these icons are pulling from this document over here. There's a way of doing that in figma. I'll include it here in the course just because you'll end up doing it. You'll be like, I want that you'll grab it from somebody else's and it will start pulling from other documents which can be a little confusing. What you can do is you can select it. You can right click it and you can say, I would like to detach this instance, and you can do the same for all of these. All these little diamonds are linking back to that original document. I can go to you as well and go to detach Instance. Now it's just part of this document, same with this one. This is a bit of a crude way of doing it as it would be great if you know what instances and components are, which you will do later. But I don't want to go too deep on that stuff now. Just want to throw things in here and put a little bit of this in here so that if you are jumping ahead, like, I'm going to grab that I'm going to grab that. You end up with a little bit of problems, know that it's not you, it's just your current knowledge is not quite there yet. But don't worry, we'll get to that. We've got that. Do I want it? I'm going to take it off. Course. You can do it. You're totally allowed to. Okay, but I'm going to take it off for the rest of this. Just we're keeping it easy, man. There you go. And let's move on. Where did the line around my button go? Hm. Has it always been gone? It has. It's been annoying you, hasn't it? I have no idea when that went away. Alright, is it. That is how to grab the status bar and mess around with that so that you can get it to preview just a little bit better. Right, let's jump into the next video. Forget this video happened. I guess that's the moral of today's story. Alright, next video. 24. Testing on your phone with Figma Mirror: Hello. This is the other side of my office. You normally looking from that way across this way. This is that way it looks like my junk and my sound boards to try and make it sound nice. And it's nighttime. It's not kind of moody. It's just actually dark. It's about 11:00 at night, and we're making courses for us. And in this video, we are going to be looking at something called Figma mirror. What is it? It's a way of testing our You know, we're on the computer trying to design a phone website, a mobile first website, okay, or an app, okay? There's no point spending all your time on there. You need to be testing on the device, that thing, okay? So there is an app you can download from either the Android or the Mac app store. You can tell I don't use it. But it's called Figma mirror. They might be changing that name check in the comments if they have updated it, but it's called Figma Mirror. Right, pause there for one sec. Hey, they've updated the mirror app a tiny bit. Okay? So once you've installed it on your phone, okay, what you can do is used to just start automatically. Now what you need to do is click the mirroring button, which is in the bottom right. Just click on Mirror, and then here inside of Figma on your desktop, just click the page that you want a mirror. Okay, I'm going to click on a homepage, and it'll appear in your phone. It's magic. Actually, you might have to click the begin Mirroring button, but then it'll be magic. Back to the video. You sign in with your Figma user name and password, then somehow magically just it's happening. You don't have to be on the same network. Magic. And basically, what happens is, can I show you here? I'll show you. Can you zoom in on that? You kind of can. Basically, if I click on different things here on my desktop, you can't see what I'm doing over here. But if I click on my details page, where is it? Details page? There it is. Click on my checkout. So it's kind of live updating. And even Verda, it's actually live in directing. So, will this work? Maybe. So, click on my Home button. What can you see? Home button. Home Button's too small, 'cause I can barely click on it, and you can't see what I'm doing. By now button. Look at that. Okay, purchases. What is it focusing on? Is it focusing on the right thing? Maybe. Fades. Oh, look how good this is. So I can actually work on it. And the big thing I'm going to show you is the By now buttons too small, the text. Look fine on desktop, but it's teeny tiny in there, okay? The purchase button looks all good when I go to By now. And how is this filming the cam? This is probably terrible, but hey, that purchase button feels good to me. I'm finding it very hard to click on the buttons along the nav, as well. They just need to be they don't need to be bigger. They need to be smaller with a bigger area around them, so a frame to make them bigger. Logos too small. Text on the purchase page is good. The checkout page. And and I do get stuck on the Learn More page. I don't have any sort of, like, prototyping off the more product details page. I forgot to add it. You probably saw it in the last video, but when you get to this kind of stage and you're like, testing it on your own, you're like, forgot that bit. Well, that's way too small, or that's a hideous color. Green. Okay, so, actually, that's probably pretty good. Oh, one let's do a live update, 'cause that's pretty cool. I'll adjust the Zoom so we can do it a little bit better. You wait there. I'm gonna change the camera. Alright. So probably should have done this at the beginning. Watch this. It's live updates. I'm moving stuff around on my desktop, so you're looking at my laptop. There, my phone over there. And, yeah, you can just kind of work. So when I'm working, especially there's initial stage getting font sizes and stuff ready, I just kind of like I don't have a propped up. I just have my phone lying down on the ground. But so you can see it. This is really handy now. I can go through and say, actually, font size here, what do I want to do? It's a group, so I'm going to go into my group, and I'm going to use up and down. Until I find something, what I'm looking at is I'm keeping my eye out on my phone here. Okay? That's what I'm looking at. I'm like, Is that an approachable size? What you'll find is pretty much always, 16 is good. Okay? You can't see it because it's on this side of my desktop, but I've gone to 16 points. That gym really is a no brain a good one. Okay, can't wreck it. 15, if you're trying to be cool and fancy and trying to keep it small. But if you get down around the 12 and 13 points, it becomes quite a tricky thing. It's fine for some things, but for a big old click now buy button, it feels a bit small. So I want to go through, and let's make this a bit bigger. Put them across. Let's send them together. There. I have to do the same for the learn more button. It's hard doing it one handed. I need my hands over here, but I don't want my hairy knuckles in the video. But you get the idea. You can make changes really quickly, be seeing what it looks like on a phone, okay? It's pretty much instantaneous. I don't know. I'm pretty amazed by how that works. So, yes, if you're designing for tablet, have a tablet. If you're designing for desktop, it's a bit easier you can just do it on your desktop. But mobile phone or an app, okay, or a mobile first website, like we're doing, okay? Desktop is part of our plan, but it's secondary. Most of our audience is going to be coming from paid ads, 'cause I talked to the client about it. Those are the kind of conversations you talk about as well, like Lead Generation, where is it all coming from? It's coming from Facebook ads. It's all gonna come from mobile phones. If it's coming from YouTube How to videos, like a lot of my courses do, then it's desktop first. So kind of questions you gonna get into as a UX designer? What do we design for first? Alright, it is late, and surprisingly hot with all these cameras and lights going, I am going to Let's make another video before we go to bed. Alright, that is Figma mirror and testing your prototype on your phone. Seen a bit. 25. Class Project 04 - Testing on your phone: It's class project time. We are going to prototype your mobile website and test it on your phone. Use the techniques that you have used already that we've learned over the last few videos to wire report your buttons so that when you click the buttons, they jump to the right pages. Then download the Figma app. I think it's just listed now as Figma. You should find it. It has the mirror option. You'll find it on Google Play and the app store. That's what it's called and test it. Click the buttons, see if it works. If you for some reason can't make the app work, the downloadable app. You can actually just go to figma.com slash Mirror, and you can use that as well. You do that on your phone. I'll ask you to log in. It's a workaround. So when you're on the app, log into it, test your design. What you're looking for is just make some light adjustments are the buttons clickable? Are they big enough? Is the text legible? One of the big things you might find a little bonus for this video is that it's there shopping cart here. I haven't rigged up. It should be. Let's go to prototype. Let's go and that is clicked. You go to the checkout page. The one thing that might happen is that this buttons quite small. It's hard to tap or maybe close to the menu. So what you might learn through your prototyping is a zoom in. I'm going to say, actually, this needs to be a little bit further away from this, so I can actually click it with my big finger. The other thing you can do is that depending on how you've got your icon, you might have picked a different one. It might be working differently. Let's go through. It's good to design. Let's say I want the clickable area to be bigger, but not the actual icon inside. I want the icon to stay that's the right appropriate size, but I want the area that is active that I can click to be bigger. I've got the move tool, in this case, what's happening is it's scaling up everything inside. We're getting a little advanced here, but it's something you might want to do. Cover it properly later on. Let's double click to go inside of that frame. If you don't have a frame, I'll show you how to do that in a sec. This stuff inside of my icon cut is set to scale. I can set it to center where it says constraints. That if I click off and click back on the parent frame, you can see here, not the vector, the frame that's around the outside. Now look what happens. I can make it bigger you know, the area around it bigger, but the icon stays the same. There's more places for your finger to actually touch and click. If you don't have one, let's say I have an icon and it does, and I'm going to copy and paste that out. Let's say you have followed me earlier and you didn't have a frame, you just got the icon sitting there. What you can do is you can right click it and say frame selection. Now you're at where I started. We're going to go inside and by default, gone too far inside. Let's go the vector here. Oh. Okay, that's a good point. When I click enough, I get little icons. What I want to do really is have the frame selected, correct the vector and then you'll get whether it's set to scale or center. So there you go. Little bonuses for people doing the class projects. You can make the frame bigger, but not the things inside. All right, test it out when you're finished, what I want you to do is I want you to take a photo of the frame of your sorry. Take a photo of the phone, okay? Just to prove that you've done it and upload the photo of your phone with the project on it, the Y frame, and upload it to the project section. I can imagine lots of people like, I don't have a second phone or a buddy or a partner or kid or somebody to take a photo of your phone. Okay, you can just upload a screenshot if you like. And once you've done it, what I want you to do is be excited. I don't know. I bet you probably have the same thing. When you get it going on your phone, there's some sort of magic. Even me, I've done 1 million of these. I'm like, When I see it on my phone and start working on it, touching the buttons, I'm like, Oh. It's real. It's live. It's exciting. I hope you feel that too. So get practicing, prototype it, make some adjustments. Maybe the fonts aren't the right size, maybe the buttons aren't clickable, and then upload it to the assignment section. Project section, even. All right. Enjoy. I'll see you in the next video. 26. What is Smart Animation & delays in Figma?: Hello. Hey, it's time to learn how to do basic animation inside of Figma. Okay, we are going to get this arrow to animate in on our congratulations. Your purchase is on its way page. Animation is pretty interesting inside of Figma. It's a little quicky. We're going to learn something called Smart Animate. Let's jump on in. Right, first up. Shift one. Just give everything on the page. Spacebar, click and drag. We are going to make two versions of this confirmation page. We're going to animate between them. So you can copy and paste it. I'm going to hold down my option KanimAcO key on a PC and drag it out. So I've got two copies of it. And what I want to do is we're going to animate this arrow. What happens in Figma. It's a little strange, is that basically we're just going to animate between these two pages and something needs to be different. This arrow is going to be different. We're going to move it over here. Just move it a little bit to the left. All we do is we say confirmation page if I go to prototype, and when this one's prototyped, when we play it and we get to the confirmation page, I want you to then go over here. We'll just leave all the defaults and we'll give it a test. So let's go to our little prototype. What will be on? Let's use present. No, not use present. Present is fine. Go. I'm going to use a little version so we can all see it, so we're going to get a preview. Giant Phone. I'm going to go to the VywPage and I purchase and then it goes here. If I click once it moves. Works. What we need to do is add the magic. The magic in this case is if I click on confirmation page and I click on this transition between the two. Instead of using Instant, we're going to use the one we ignore before Smart animate. We're going to leave everything by default and give it the same preview. Let's close this down. I'm going to use Shift Enter to open up that little preview. It's not shift to Dan. It is Shift space. Shift space, and now, go to pictures and click once I it animated. How very unexciting. But we got it. We did it. Good work. You first animation. Let's make it better. Actually, we're going to break it because I bet you're going to break yours. Now, one of the things I want to do is it didn't move in very fast. I want it to come off screen. So I'm going to move it over here. You can hold Shift, so it comes across while you're dragging it in a straight line. Great. So it's over here. I'm going to preview from this confirmation page. If you click that one first, then hit Shift Space bar. I'll start here rather than the home page. If you have nothing selected, it starts from the first frame. But if you have the name of the frame selected, it will start from where you have selected. Let's click it once and it didn't work. Kind of worked? I'm going to use my back arrow to go back one. Just my arrow keys or you can hit Reset. I just use my left and right arrows to go forward and back. B, click once doesn't work. Why doesn't it work? This happens a lot. If things are fading in, it's broken. First thing that we're going to do is I'm going to click on the title up here, move it a bit closer. I'm going to hold Shift and grab both confirmation pages and move them so we've got some space. It's really common just to keep the animations a little bit separate, so you've got some room. This guy over here, what is he doing? If I put him there, Okay, hold shift. He's still not going to work. Why is because have a look at the layers. I've got my confirmation page one, two, and I'm on my layers page and I can see my layers panel over here. File, mobile, wireframe, you can see this confirmation page and this one, if I twirl them up and close them, this guy, line 13, is just hanging out by himself. He's not on any of these frames. It's playing this page. And ignoring this guy. What it does, it goes, Well, he's not here, but he appears here as we just fades in. What we need to do is make sure this is on this page. You can do it by dragging it. You see now, it's inside the confirmation page. Look, he's inside there, but if I drag it out, click at once, hold shift, it pops out. What I can do is just force it in. Which page is it? Let's name these. Double click it, confirmation one. Confirmation two, just so that I can know the difference between. I want it to be on confirmation page one. U line 13 should be there. It disappears. It's in there. It's just hidden because it's clipped into this page. Give it a go and see it. Know where it is there. Let's give it a preview. Click on this one, Shift space. Let's click it. We did it. It animated in. We're geniuses. Let's close it down. One of the things you can do is if you're doing animation that comes off the page is you can click on this confirmation page and one of the perks of a frame over a group, which is this page here is over here. If I go to design, there's an option here that says clip content. See this one here? Feel like we learned this earlier, did we? Can't remember. All right. It's been the weekend. Ah, so let's turn that off and it means that you can actually see it. You can go. Actually, I want it to be a bit closer or a bit further away or I change the stroke size or width. When I preview it, you shift face bar, click again, it still works the same. It's just not clipped off. Now, it doesn't really matter how you publish this, whether it's clipped or not. Sometimes you want the clipping just to be off while you're working and then turn it back on when you finish the project. Another couple of things that might wreck your If yours is still fading in you're still fading in, Dan. Check that it's inside the right frame, so maybe name them. The other thing that is important to know is that basically what it's doing is it's saying, I got these two frames and Dan decided to smart animate between the two. What it is looking at all of the things in here. If anything moves, it will animate it, which is awesome. But it needs to know what it's talking about. Let's say I've got line 13 and I've got line 13. If somehow, for whatever reason, you've copied and pasted them and this one's line 14, it won't know what to do. It needs to be the same name. 13 and 14 is not going to work. Let's give it a go, it's going to go click, and it's going to fade in. You're like, it's fading. Fading means broken because it's like, A, this thing just appears on this page, I'm just going to make it appear. You just need to make sure that your names are the same. It doesn't matter what they're called as long as they're the same. If it's still not working, what you can do between your two frames is let's say this one is not working. I'm like, I can't make it work, Dan, getting rid of it. What I can do is grab this version here, copy it, click on the frame title, and paste it, and you'll see it's pasted Line 13, Line 13, and then animate it again. Make sure it doesn't leave the page. It's a little hard one to see. Can you see if I twirl these up? Line 13 has actually come off that page, so I need to drag it back in. We've learned that. Sometimes that can just solve your problem. Let's give it ag, click once. The next thing I want to do is this clicking once business. Obviously, people aren't going to click after they get to this page. We're going to learn another animation technique. Let's click on confirmation one. Let's make sure we on prototype. What we're going to say is the moment it's on this interaction called tap, go to confirmation. In this case, it's going to confirmation two. Or you can click on this Y here. Matter. Okay, so we don't want it to be on tap. We want this other one. We want another one that says after a delay of how long, we'll just leave it as the default, then go to confirmation two. It's not going to ask for permission. It's just going to wait for. Can you know how many seconds that is? It's right 0.8. Okay, let's go. Shot plus. And now, C just went on its own. I'm going to use my Ara keys to go. Back to the homepage. You can use left and right. I want to find the homepage. Where are we? There we are. Let's go to By now. Let's purchase it and wait. Wait, wait, wait, wait. Look at that. Did it on its own. That is called after delay. You can play around with the timing. Okay? We've got it at 0.8. We can make it 100 milliseconds. So it's basically you can't put in zero. Can you not put in zero? Yeah, you have to put in one milliseconds. We can instantly after one millisecond, go. The other thing we might look at is you can click and drag these, by the way, if they're in the way. Often they can end up like this. You just need to click and drag this top part of it to move it up. Let's look at our easing. We looked at easing. Let's do the one I like the most, which is ease in and out back the little bounce to it. How fast should it be? Let's make it 1 second and give it a roll. Takes too long. There is a lot of that changing the duration, Shift plus, just checking far too fast. Alpha reset. That feels nice. Now, we've only done the movement. You can animate anything. As long as you don't change the name, you can animate anything. Let's find. Let's click on confirmation one, go back to design. You'll end up toggling between these two a lot. I don't want to get too heavy in the shortcut, so if you block it out if you already fill up. But if you're looking for the shortcuts, shift E toggles between design and prototype design and prototype. Hold Shift on both Mac and PC and just tap E and we'll toggle between them. So I want to be on design. Let's clip content so we can see this thing and I'm going to say, let's change the transparency of the stroke so we can make it zero. It fades in as it comes along. You shift space. You see it faded in. Can't really seeing, but it did. Where are you now? All right. It's gone away. Line 13. There it is there. Let's turn the appearance back up to 100. We can decide on the triangle. Maybe the triangle has none to start with and grows a triangle. Let's give that a go. I'm going to move it just in a little bit so we can actually see the animations that we're missing with. Reset. Okay, I don't think you can grow that one. Yeah, it kind of grew. There you go. I just couldn't really see it. Can you see it kind of like appears? That's not that fun, Dan. Let's change the stroke weight. Try not to click on these. These are called variables. We'll look at them later on. See these are little diamonds. They're in a lot of things. We'll do variables later on. They're pretty hardcore. Try to avoid them. Let's give this a go. All right. For refresh, giant arrow coming in. All right. So that is it. That's animation, the basics of animation and figma. You have two frames, something's different on both of them. As long as the two things appear on both frames, you can't have it not appear here. You can't delete it from this frame and just hope it appears over here, it will, but it'll just fade in. You need two things, the same name on both, and you need to make sure they're actually on the frames that you're animating between. Have a check out these layers here, close them all down. I find that's the easiest way to see. Is there anything hanging out here that shouldn't be? Then just make a change between them. Either movement or size or color or anything you like. The big trick here is to switch to prototype, shifty or click the button up here and just make sure this page, you click hold and drag and you make sure it's animated between the two and smart animate and it will smart animate them between them. If you accidentally have two interactions like I just did, what you do is you click on the frame, you say, which one do I want tap or delay. I want to get rid of this tap. I want my delay and move to all right. That is the basics of animation inside of Figma. It is a little clumsy. If you're from any other animation tool that has a timeline, that's just the way it is in figma, but we know now, it's a little clunky. We don't do a lot of animation in this wireframe stage. But it's fun and I want to introduce it earlier so we can do more complicated stuff later on. All right. That is it. Animation inside of Figma. That was meant to be the end and I record the intros at the end. And then I was recording the intro and mine was broken. I'm like, what do they do? I've come back to show you. I'm going to preview from the checkout here, so Shift plus. Then I had this that big arrow appeared along. You're like, Where did that come from. Anybody else have that problem when they're testing? The arrow moves that way. What's happening? And how do we fix it? We have got an animation between the checkout and the confirmation page. It's this little noodle here. The button goes to here and it says, On tap, I want you to slide in. I'm using this in and out. What it's doing is it's sliding this way. I was a little animation. So you see the whole page is sliding across. That thing there can be seen because I left the under design shifty. Under design, I left clip contents off. If I turn it off now, it should work. Because I've left that out, even when I preview it, this can be seen because the animation between here and here is a slide, this whole unit slides across, goes Zook, and we can see it on this transition. There's two ways of getting rid of it. This one where I say this page, I'm going to clip it so it's hidden. Let's see if that works. Pretty sure it works. Okay, I worked. The other thing we can do is this here when it is prototyping between the two. Instead of doing all of that slide in, we can just go instant. There's no visual between these two. It just goes think and I'm already here, that'll work as well. I hope. Either way, it's probably just easier to clip contents after you've finished working on it. You might have had that problem. I had that problem. Now we're going to do the end final final end. See in the next video. 27. Class Project 05 - My First Animation: Hello, it is class project time. We get to make an animation. I want you to do what we did in the last video, animate something on the confirmation page. It doesn't have to be the arrow. If you're a little bit new to Figma, you're finding this quite tricky, especially in animation is just do what we did in the last video. That's totally fine. If you're feeling brave and you're a little bit more experience, you're like, Yeah, I can do this. Try something else. Try ball, square, tick, icon, something else to animate. I don't mind what it is. And when you finish your deliverables, I want you to just take a screenshot of both your pages. A, the two confirmation pages. That is totally. Upload it to the projects. If you are a person though who knows how to do screen recording, do a preview, record your screen, and upload it. You can upload Vmeo or YouTube links. But if that's a little bit out of your scope at the moment, don't worry about that. Screenshot is fine. When you are getting started, though, have a look in the projects, see what other people have made. Yeah, get some ideas, appropriate, copy, add your own flavor to it. And there's a little bit of you might get it first pop. Most people will have a little trouble working out the clunky animationne of Figma. That's totally expected, don't beat yourself up if you're like, bit of trial and era going on. You might have to rewatch the last video. You will get the hang of it. All right. That is it. I'll see you in the next video. Happy Animate. 28. Sharing & Commenting on a Figma file with Stakeholders: One. In this video, we're going to look at how to share your files with stakeholders. It might be your client, customer, boss, friend. You want to share the wireframe with them nice and early so they can see what you're doing and give it a test and say, you're on the right track. I'll show you the best ways of sharing it and also how to leave and work with comments. We're working with this guy named Doug. Doug is my not so smart alter ego. I'm going to show you how to make it easy for him to be able to work with me as a UX. Jump in. To share your document with your client, customer, stakeholder, whoever needs to see it. I like to share mine early on. Just click on the giant Share button. I'm going to click on this one that says Copy Link. It says Linked copied. Then I can just paste this into an email. So anybody with this link can view it let me open it up in a browser. All right. This is what your customer client stakeholder sees. I'm the customer. My name is Doug and Dan's doing some work for me and he's just sent me this link in an email. I've clicked it, opened it, and this is what I see. I don't need a login, I don't need a password. I can view this thing, I can click and drag around. There's not much I can do. But I can have a look at it, approve it, say, you're on the right track. Maybe you could change this, why are we doing this? You can get that dialog started early. Just using the share button. Now, if you're practicing this at home and you're copying and pasting the link into another browser, you need to paste it into an Incognito window, something that's not logged into your accounts because otherwise, you'll use the link and it knows you're logged into Figma, so we'll be infigmA. You need to use a browser, either need to log out a Figma in your browser to test it or open up an incognito window. You don't have to do this. It's more de Okay, so I am Doug, the customer client. I like it. If I need to do anything else, they need to log in. It's free. They can sign up with Google or just sign up with their email address. Let me do that. Now that I'm logged in with Doug, you don't have to do this. This is just showing you what the other clients see. I think it's useful to see what they can do. It's a little bit complicated. We got all this stuff going on. But the cool thing about it now is they can do commenting. That's the big one. They can go into comments and Doug can say, Ar Dan, What's up with? Why is there no stroke here? Doug posts that and the cool thing about it is, let's switch back to being down. Close that down. What you'll see is, look, first of all, there's Doug, which is really weird. You can see this comment. Look, why is there Astra I wrote that. I don't have to read it. And what I can do is we can just communicate via these easy comments. I can make updates. I can do things like this and say, Alright, Doug, perfect, smiley face. Don't tell anyone. You can say, L, I've done it. Tick, so that's resolved and it's gone. Another interesting thing about Figma is that it's a real collaborative tool, especially when you're working with other designers, you see Dogs there? Let me show you. Let me get the screens organized. This is Daniel. This is Doug, my client, and he's viewing the document currently. The weird thing about it is, look, you can see Doug move. Can you see on the right hand here? That's Doug moving around. I can see him moving on my screen, it's live. Same thing on my side. He can see me moving around, which might creep Doug out. Anyway, the other cool thing about this being a live collaboration tool is I can read Doug's mind. I can see him poking at this sign here, and I know that he is worried about the green color. I can say you green color. Well, what was it stroke? No, it was this. I can say, let's go to design, let's update the stroke can you see on the right hand side there, it's updating. I'm using this left hand side here when I'm designing, but Doug can see me moving things and adjusting it live. Watch this. I'll move it around. That's easier. Look, it's a live collaboration tool. The cool thing about it is Doug did not need a paid account infigma. He can check my work. He can keep up to date with it. You can log back in and see how far I've got. You don't have to resend a new link and a new email. The other thing is, let's go back to being Dug. I am Doug. I can click on this and I can preview it. I don't think you can preview it without being logged in. But he can go through and test the animations as well. Last thing I want to show you is I'm Doug still, and Doug might find this quite confusing. There's lots of stuff that they can't mess around with. They can slick stuff, but they can't move it. There's things like the pixel widths and heights, all sorts of stuff over here, you might be like, Oh, that's going to freak Doug out. Doug is not computer savvy. I need to show it to him, but it needs to be a lot simpler. What you can do is inside a Figma. I am sharing this. I can say share. You can use this option here. Is Copy Prototype link. So you skip all of this and go straight to the prototype. Let's bring it up, incognito window, so it's not logged in as me. Okay, I need to be dug. Doug logs in and it goes straight to the prototype, and they can work with it. But they just don't get all the extras. Plus, they can do stuff. It's a little bit hard. See up here. There's the commenting. I can say, why is this 99? It comes back to me on my site as well as Dan. This might just be a nice easier version for them. Have a quick look at the comment, Bec afigma, you'll hopefully see. There it is there, Doug. And lastly, you can reply to Doug in here. You can say, why is this 99? This is just a placeholder. Go, and it goes back to Doug on this side. Look, on reply, there it is there, just a placeholder. Cool. All right. That is sharing with stakeholders so they can view it and comment all from Figma. All right. That is it. I'll see you in the next video. 29. What are Teams Projects drafts in Figma: One. In this video, we are going to share our documents so they can be edited. We're going to bump into something called teams and projects and files and pages. It's the way that Figma structures, it's file organization stuff. I found it quite confusing when I started, so I want to make a video on it here so you know where everything is and what are these toms mean? Let's jump in. All right. If we do need to share this with somebody else that needs to edit this work, plus a lot of other things. A lot of features is tied into this. Let's go to share. I can't say, Doug, you can edit it. You're a colleague, you need to work on it. You're a developer, you need to work on it. I want to move to edit. It's going to say, Hey, you need to move this thing to one of your team projects. Let's explain that. Because if I go to share again as well, you see it says here, to invite people to edit, move this draft to your projects. What are all those things? This confused me when I got started, so I'll explain it to you. Let's go to the home. We're in recens which is normal. You've got this thing here, a team. Inside of this team has drafts and projects. Hey, so you're given one team for free. Think team is your company that you're working for. This might be bring your laptop and you might not need any more teams. You might just have to bring your laptop team. But if you're a freelancer, you might have four customers, 20 customers, and they're all just separate teams, different companies you're working on. Side of that team, we've got drafts and projects. Drafts whenever you make something new, it ends up in the draft. Then when you need to make it editable to somebody else, share it so they can work on it, you need to move it to one of these projects. That's what this was asking earlier. I said, Hey, you need to make sure that you move this from drafts into one of your projects for one of your teams. We've only got one team. You can have only one project for free inside of your team. That project might be, in this case, it's our eCom site, but you might need another. Ject that's maybe to do with something else within the company. Maybe it's the sign up flow, maybe it is the summer sale. You can create all these projects. You can give them one by default for free, and if you need any more, this is where we cross over to the from starter to professional plan. This will change, the prices will be different. They mess around with us all the time. But this is where you might decide that actually, I need a seat. A full seat is 16 my case euros per month. It'll be different in all sorts of different countries. See here, the limited one is you get one project. That's this thing here in cases our econ website, but you might need a second one, which might be your social media campaigns. You can have three files in there, and the other limitation is you can only have three pages per file. Let's break it down. If you've already got it, you're like, Yeah, don't cover it again. Skip ahead to the next video. There's nothing. I'm just going to cover it again just to make sure I know I was in need of this video when I was first getting started. We've got one team. We've got the free account, so we've only got one project. Inside of that project, I can have three of these, the design files that we made. I've made this one. I can make another one for design and it's going to be a frame is going to be let's say we're designing some social media Twitter post. That is, two files. In my project, I can have three. The trick though is you can have as many drafts as you like. You can just leave them in drafts. As a freelancer, that's maybe all you need. You just need to move them into the team projects right at the end to export them, to send them to developer. You can get quite far with the free account. The last thing was how many pages you're allowed. See this one here, we've got pages 1, two, and three so far. That's how many pages you can have on a design file. That's in a team project. There you go. One project, three files, and they can only have three pages. That makes sense. What do we do? We need to move we want to get the sharing going for this one here. Remember, it said, Hey, you need to move this from your drafts to your projects. We can do it from here. You just click on the move button, that'll do it. It knows where it needs to go. We'll just do it manually because I want to show you. I'm in drafts. Here's all my files. I don't need that to be in my project, because that was just some weird status bar thing I copied and pasted. I don't need that one. This one, though, I do. What I can do is can click and drag it. I can say, get into my projects. Can't do it because I can't see it. Used to be Abdu. Now what you do is you right click it and say move file. I want to move it to that team, please. It's gone from your drafts. If I go on projects, there it is here, my team Project. There's my little file in there. I've got this untitled one that I don't need. I'm going to move to trash I've only got three. I don't want to waste any. It's just a new home for it. But if I go back to that same file that I've still got open, I can go to Shear now and that little banner has gone from the top and I can say Doug can now edit it. He can move stuff around, change fonts, basically do everything that I can do. So that's one of the things that you might bump into. I want to show you early on, just to introduce projects and teams and where you might start bumping into some of the paid features. You can see now that my file is inside of my project, it says, Hey, you're only allowed three pages. You want more, you have to upgrade. Well, upgrade later in the course to show you some of the premium pro features. But for the moment, we're just going to ignore that. The weed caveat here is at the moment. Well, as long as Figma has existed, you can have more than one team. So let's rename this team because that's a funny name for a team. Okay, I'm going to go into here. So I've clicked on the team. Go up here and I'm going to rename it and my one's going to be called Scott wallets. That's the client that I'm working for. But what I can do is I can create a new team. This might be the Binger laptop company and I'm doing work for them. Don't need any collaborators. I'm going to choose the starter plan, and you can see up here, I've got two teams. Good thing about it is that the second team I made gets its own project and its own three files with its own three pages. Get quite far with a free account. All right, so I'm going to go back to Scott Wallets to see all of these projects. There it is there my eco, close that on down, tied everything up, and that is it. Was that helpful? I know. Feel like I might have made it more confusing than what it is. Maybe not. Hopefully, it was helpful. That is it. Let's get on to the next video. 30. How I Get Inspiration for UX Projects: One. In this video, we are going to be moving from our wireframe, okay, where it's just squares and plain text to our high fidelity model. And before we do it, we're going to look at getting ideas about how we might move from kind of like blank wireframes into how to put fonts and colors and styles and way things look. And it's kind of the fun part of the process where we look at getting inspiration from others. So let me show you the places that I go to to get inspired before I start making the kind of high resolution mockups and Figma. Okay, so there are a bunch of places you might have your own. These are the places that I normally hit first and something like dribble or Behance or any of these stock library sites, what you need to do is you're looking for the term is UI kit. User interface kit is generally cuts it down to more mobile stuff for websites instead of just generic design things. UIKits and you can just go through and you're like, oh, I like that, and you take a screenshot of it, and we'll start putting them together in a moodboard next. But just go through find stuff you like. Use the term UI kit. You can type in UX as well, just to cut it down and start screenshotting. Behance is another good one. It's focusing on web, which is good for us, start taking screenshots, things you like. You might pay for a kit from one of these sites. We're not stealing here, we are just getting ideas of things that we think will work using invado elements or say, Adobe stock, they have good ones as well, and then move on to some other ones. I like these. These are an awards. Okay, this is css design awards.com, and this one here is called Awards with threeWsT is really handy because these are just great designs that have been submitted for awards, so it's a really good place to start looking for things. Let's use either of these two. I like awards because if I type in wallet, it'll cut it down to things that have wallets in it, which is really cool. Whatever you're working on, type that out and it will cut it down. Hopefully, you'll find something you might not like mine. There's not a lot of actual wallets. There's an actual wallet. All of these seem to be digital crypto wallets. Okay. But regardless, it's just handy to go through and have a look. What's really good about this award site as well is that you can explore. I like to look at the nominees, not just the winners, and I like to go in here and say tags. There's loads of good tags in here. Let's say that you have to do a checkout, because you've never done them before and you want to see what other people's look like. So I've typed in checkout. There is no checkout. Okay, it's not working because there is no check out. I'm not doing a search. I'm looking for tags. You can scroll through the tags. I know there's footer in there, so Footer design awards. Who's been nominated? Okay, so you can go through and say, Alright let's look at this site. And it's going to the actual site itself. We're going to close down on the pop ups. Let's have a look at their footer. Even get to their footer. Anyway, you get the idea. You can go through and pick specific things. They might have changed their site since then. No, that's promoted. I clicked on an ad. Good work, Dan. Let's look at these people's Footer Award. I'm looking at the designs. Let's go to the actual website. How do you get to the actual website, Dan? That's it. You click Visit website. They changed this site quite often, so by the time you get here, it might look different. I'm going to go to this one and then have a look down at their footer. Let's have a look. Oh, yeah, it's pretty good footer, I guess. You get what I mean? Because sometimes you're redesigning a certain element in your UX design process, maybe not a whole website, so that's handy. Let's close that one down. Other ones that I like one page love.com. Then these last few here are just wallets. I just started searching for designer wallets online through Google and just came up with the Ridge wallet. I just want to see, their website and how they've done wallets. They've got this mechanical wallet that's pretty and let's have a look at some other ones. It's just a good way, you don't have to just look at design. You can look at the actual sites itself. Try and find some brands that you like, especially for wallets, I know what a wallet is. I bought wallets before. But if I had to do something like shampoo, which I'm not in the market for for a long time, I might have to go out to sites to check out what shampoo sites look like at the moment, what good ones, what brands are doing well, and just go through and start taking screenshots of things they like. You're like, oh, I like the way that they're doing this thing over here, you start gathering up little bits for your mood board. Get inspired. W I had to do a screenshot on your machine on my Mac's Command Chef four and you can drag a box around stuff. You can say, I like this little bit here, bit I'm going to borrow or at least get an idea from on a PC, I'm pretty sure it's print screen, but you'll have to just double check what it is on a PC. Take loads of screenshots. Let me know in the comments as well if you're like, we didn't mention this site for inspiration. Let me know in the comments if you've got ones that you like. I love this part of the process. Get inspired, find things, throw them all on a dock, which we'll do in the next video. I'll see you there. 31. How To Create a Moodboard in Figma: All right, everyone. In this video, we are going to look at putting our inspiration into a mood board. We'll do a fancy one and then we'll do the one that's just all over the place that I normally use. But we need both. One goes out to a client, one for our own reference. Let's make a moodboard now in Figma. Let's do the first messy way that you use just on your own. It's basically you could make it your own page and run out of pages. I can move this back to drafts and have more than one page. But I'm stuck with three pages, so I could make one that is a moodboard page that totally be fine. If you're on the professional account, it might be good. While I'm doing my design stuff, though, I quite often like my mood or screenshots just above the thing I'm working on. I don't have to switch between tabs. All I do is the long way is to bring in an image in case I've taken lots of screenshots, I can go this way. There's an option down here under the rectangle here, it says, bring image. Okay? And I can click that. I can go find in my exercise files. There's one called Mo Board. I've put all mine in here. Don't use my ones. I just put them in here as just go. Here's all my images. I can go through and say, actually, I want all of these. I click the first one, hold Shift, grab the last one, click Open, and I've got 21 images and click once for one, and I can just start plopping them in. Okay, so this is my inspiration all done. That's my mood board. Often, that's enough for me while I'm working. Keep clicking. Okay? I just need this above here while I'm designing and picking fonts, and I'm like, Oh, that's a cool color, and I might change this to see if I can match it. That is kind of enough. You can obviously move them around afterwards. You can drag the edge, with an image and just rescale. You could use the scale official tool, but image by itself, you can just grab the corner and you can go, that is cool, but the really one that I really like is this thing here for some reason, I'm making that nice and big. We'll do cropping and stuff later on, but that's often just enough for me to start working. What I might do though to tidy up the board is can you see down here before we had home features, checkout, very serene in its own little frames. I got this one here. What is all this stuff doing? You can see all these junky lays hanging out, all these screenshots just hanging out on my upwards, ruining my loving menu on the side here. What I'm going to do is you can add a frame afterwards. Watch this. Let's get that one to be a bit smaller. Mm please hold. What you can do is you can draw a frame around it all, so you can grab your frame tool. If you draw the frame all the way around the outside of all of this stuff, they will just plop inside of it. Can you see I've now close that down? You can see frame one I might just call this moodboard. Just so that it's on its own thing. I can move it over when I'm finished with it. You get what I mean, right? Let's do a more official fancy mood board because let's say we need to go back to our stakeholder. Okay? I use that word, I hate it, but it's common. Stakeholders anybody that has to do with this project, it could be as far as, I don't know, some of the investors or could be anybody that touches a project as a stakeholder, it would be common, especially if you're working on a new brand to go back to them with a moodboard before you start working. Work on the iframe. Then the move board, once they're signed off and the direction in terms of the theme and the style, then you go and start making some high fidelity mockups. A good way to do this is you could go through and line all these up and make them look good and add some labels and fancy it up a little bit. I find it's easier just to start with somebody else's template. So we're going to go to the home screen. We're going to go to templates and Tools, which I'm sure they've renamed by now. Find community, and I'm going to type in moodboard and see what other people have made. We're going to find one, pick one. You might have to go through a few to find the thing you want. What we're looking for, though, is see this little pencil icon and that one is different. Fig Jam is a different bit of software that Figma makes. It's like Merro or PowerPoint. It's a whiteboarding tool. It's pretty cool. But we want Figma files. I'm going to click on this one. Now remember, if I say open infig, this template or this community file is actually now part of my drafts for Scott Wallet. That's mine now. I could grab what I need from it and delete it or just keep it around. What I want to do is find one lots of stuff on this one. Check out, remember when you're using other people's work, look at the different pages. The grids. That's what I want. Yeah, let's look at the grids here. Which one do I want? Pesldk this one. The one thing though is like before I mentioned, if I copy this and I bring it back to my document they're working on, I can't put another page in because I'm limited by the free account at the moment. I'm just going to put mine over here and it is an instance of a component, which you don't know what it is. If it's got a little diamond for the moment until we learn how to work with them, just right click it and say, L is attached instance. Now it's just part of this document. See, it's a regular frame with frames inside of it, and what I want to do is bring in some images. Little shortcut for bringing in images is often what I like to do is open up in my finder, so I'm not Figma anymore. This is Mac or PC. Have your finder window open, find the file that you want, and just drag it in and I will just add it to the document. I find that's often easy ish. I do that anyway, just drag them in. Then you can go you want to go inside of this frame here. If it doesn't go inside the frame, you drag it around. See it went blue. Now it knows it needs to be inside. Now it's jumped out again. If it's not going inside the right grid, so this one here, frame zero. I want the screenshot to go inside of it. Now I'm going to move it around in front of it inside of it. I'm not trying to show the whole thing. I'm just giving a visual reference. This is the vibe the vibe of the thing. Another way you can do it is with its selected. You actually you don't need it selected, but you can go down here, go to Image and Video. You can find the one you want. Ray got that one. Do this one, click open, and then I can just click in where I want it to go. That might be the different ways of bringing in images. The goal here is I'm just trying to line them up so they're a bit nicer, so that I can send this to a client. That not so client friendly. Was this can be. You can make these bigger images are represented of things that you're more influenced by. It's like this, but a little bit of this. Do you get what I mean? I do this early on. Share the wireframe, get that signed off, give them moodboard, this is the direction I'm heading. They might not have a really clear idea, maybe one or two, so you might have to do a couple of different mood boards to go. What do you think? This direction, that direction before I spend loads of time designing something. Pretty version. Messy version that I use when I'm just working on my own. Again, it's not to copy, it's so that you can see this. You're like, Oh, I never thought about doing the background, this off white color. It's quite a gray color. And this combination teal is really cool. I like that. I'm going to start using that for some of my buttons and stuff. It just sparks creativity and a really fun important part of the design process, I think. That's it. It's how to make a move board. Dodgy version, fancy version. All right. Let's get into the next video. 32. Class Project 06 - Moodboard: Okay, it's time to make your own moodboard. This class project is to make a mood board for the company that you got from the random project generator. Mine's Scott's wallets. And I want you to search the Internet and get inspired and take lots of screenshots. Okay, so all the ones from the last video, look at those sites, but also look at your own. You might check out Pinters and Instagram. I didn't show those. There's one other that popped into my head is Mobinn. Okay, mobin.com. This one's really good for specifically app design, okay? There's just lots of cool stuff in here. And again, there's a free option and a paid option. You've got to sign in to use it. At the moment, this might change, but you can see you kind of search by UI elements, which is kind of nice. Okay, so that's another then just dump them all onto your Figma design file. You can do one of two things. You can do both if you want. You can do the big ugly version where it's just in a frame, just thrown around and lined up half heartedly. Or you can do the nice bit where you find a template. Practice using other people's templates, lay them out quite nicely. You can do one or both and just take a screenshot of it and upload it. Where's our class project file. You can do that or that or both. And one thing you might do is that, first of all, I colored my move board, the frame, you can actually color the frames. So you can add instead of a white, darken mine down to separate it out. The other thing you can do is if you want another page, you know how we're stuck with only having three pages now that it's in a team. If you want to go back to the good old days when you had the drafts and you had as many pages as you like, because you don't need the editing ability at the moment. What you can do is you can go to home, and I think I already did mine. I did. Mine was drafts. That's the one I'm working on. I can move file to my team projects, Scott Wallets. And there we've got the restrictions of only three pages. If you want to get that back to drafts, what you can do is go to your all projects and you can double click, not the actual file, but just in this white area on the outside to go into it and you can right click this guy and say, Hey, I want to move you back to somewhere where drafts. Thank you very much. The files still open. It doesn't really open and close. It's just been shifted, and what you'll find that it's in my drafts, the areas there, and I get on my pages back so you might create a moodboard version here. New page, moodboard, and create it here to keep it separate. Up to you and your OCD. I'm going to delete that page. I'm just going to keep mine on the same page just because I like to see it when I'm designing. Up to you. That's it. It's a pretty simple thing to go do. Put screenshots on a page and somehow turned it into a couple of minute video. Good work, Dan. All right, go off and find some inspiration. And make sure you upload it. Upload it to the class projects, the assignment section. I'll be interested to see what you make. Especially when we see your later ones, it's great to scroll back and see where the inspiration might have started. All right. Now that's the end. Goodbye. 33. How To Work With Columns & Grids in Figma: Hello. Welcome to the Epic video that is all about these 12 little columns here. Somehow, it's a long video because actually applying the columns is easy. Why we apply the columns, I hope you find useful, especially if you haven't worked much in web or app design. There are also some really handy tricks we cover throughout, so I don't know, don't skip it. There's some useful little tips and tricks outside of just making columns in here. It's a good one. Let's dig in. Let's get started. Even the intro is long. Alright, jump in. Right. First thing is, we need a few extra pages. If you are stuck in the like, Oh, I can only have three. We need to move this back into drafts. Okay, so to do that, go back to the home, and find in your drafts, find the guy you're working on. No, it is in projects. Okay? And this person here, I'm going to go into my team projects. So double clicking the outside part, not the actual file. Okay, I can right click this and I can say moveTo move file. Okay, two, drafts and click Move. Or you can click Hold and drag it into drafts. Okay? Then the file it's still open kind of opens up and you can have more pages. Let's go through and do some renaming. I will zoom I've just renamed the mobile ofi for my mobile and desktop. I'm going to add two new pages and call these. Mobile and desktop Hi Fi. These are my Y frame versions. You can call them Y frame, that's fine. I like to call them Lo fi. We're going to go to the desktop and I'm going to look at columns. Let's hit the F key on my keyboard. Let's click note. Let's go over here and say, I want a desktop. I want the really common desktop size, which is 14 40 by 1024. You need to say it like that. If you go to a meeting and saying you've got a website that is 1,440 pixels by 1024 pixels, they'll know you're new. For some reason, you got to say 14 40 by 1024. I'm not sure why. But go to our desktop. Let's add column. I'm going to do them out a little bit. They are over here called layout guide. Let's hit plus on the layout guide and you get given a grid. We want to switch it to columns and the column count by default is five for some reason, even though the really common amount of columns is 12. Let's have a little look. Well, first of all, what are they? They just here. If I grab the Fk for the frame, it allows me to do something like this where I grab my nav I'm going to give it a color. DalluP it color then. Okay. And I'm duplicating it. This is my hero box, which is the kind of often where the marketing message goes, Hey, come join us. Inspiring image goes here. Next, we want these cards down the bottom. I'm going to duplicate it again. Now, these cards are often the features, like, Hey, join us and get better benefits, earn more money. Save weight now, the features for the product obviously often are in these three or four little boxes. These are called cards, sometimes feature cards or UI cards, and that's a really basic structure for a website, that's why that grid is really handy. It allows you to snap to it so you can just go, Do and it also gives us a bit of flexibility if you wanted three, but actually what you really wanted, I'm going to delete these is you wanted four. 12 is easily divisible. By one, two, three, four, six. You can't do five. Just don't do five. Stop asking questions. So it depends on how many features you have. The other reason we do it is because it's just really common. And why that's important is because there's no real rule. You could have 13 columns, but your developer will find you and hurt you. Because the person building the website or if you're coding it or using Wordpress or webflow or figma sites, whatever it is, it's underlying code base to help you out often has a default column range of 12. It can be overridden, but it's just painful for no good reason. Good. The reason it's good, if you're a web designer, you'll have a really good understanding of breakpoints and responsiveness. For the people that don't, I want to give you a quick little demo just to explain why it's important to focus on this. So I've got this website here, HubSpot for no good reason other than it's really good and responsive. So when we're designing, we've got the site here. Let's have a look at their features box. They've got three. Happens when it gets down to, I'm a desktop, I'm a desktop, I'm a tablet. I'm a tablet there. What they do is a couple of things. They switch the menu out to a burger menu at the fancy one there. So they've decided to do that. But they also decided to break these on instead just keep squishing them because they're starting to get quite small, they go, Alright book, they go, add your own sound effect is to get down to the grid here. So what they've decided is, Alright, I've got tablet size. I'm going to duplicate this, and I'm going to design for tablet, so I'm going to go to frame here and I can change it to IPad Pro. Let's delete a few things and tidy this up. So first of all, on iPad Pro, we use the same navigation and hero box that's still there. But these are going to go from three across and two, that's what they're doing. That's the design that would have given the developer and saying, Hey, here's my desktop view. Here is my tablet view so that they know what to do. Do they just keep squeezing it down? If you don't tell them, they'll just keep squeezing it down. Okay? Okay, good developers will know that something needs to change, and you can leave it to them, or you can tell them and say, Look, when it gets down to this, I'm going to do this. Sometimes people go like this. I've done it before where I'm like, right, this last one is actually not that important and it really bugs me that there's this big gap here. Clearly doesn't bother Hubspot, but there's this big gap here. I'm like, you probably need this. What do we do? So you could turn it off like I just did, and what did I just do? I just turned the I just turn the eyeball off on the color, still there, hard to select. Okay, so you could turn it off or you might add a new one. A fourth one appears. Okay? Maybe not as important, so it's not on the desktop, but it appears here. We do have four, so it would work out fine. You see, I like four. Four is good. Okay? But it means it collapses down nicely here for tablet, but sometimes three is just more common, and you got to figure out something to do. And what they do with mobile, watch this. Ready for the So now it's a mobile website and they went, right, they get so big on mobile. Look at that they go from this size to a big giant size on mobile. They're like, right, mobile design, drag this out. I'm going to delete and and you. I'm going to make this. I'm just typing it in. You can see typing. You are going to be our iPhone 16. And what we've decided is this and this is just going to squish up. Then these, I'm just going to have full width, and I'm going to have one I'm going to make sure they're on the mobile frame. I can't see them, so I'm going to click on mobile, say clip contents, r. Show you how to scroll later on, but basically, these are going to have to scroll for mobile to make them fit. There you go. That's the mobile responsiveness and that's why we're bothering doing this grid here. Just gives us some things to snap to because what the developer will do is they'll say, this box here, this box here. When it's at this many pixels wide, 14 40, it has a bit of code to attach to this little card here to say, B three columns across. But if the width of the site is 800 pixels, B, what is this 16 across. So it's really easy. You can just kind of give it some reasoning to say, if it's this size, be this many columns, and when it's on, you know, 600 pixels wide, like a mobile device, it needs to be 12 columns wide. I don't know, Malusa usa. Let's have a look at the mobile one. Mobile's a little bit different. So I'm going to go to here, go a phone, go Dean, you can develop them all on their own page. I'm just separating them out for this course. Often, that's what I do. I design whatever is the most important for the website. Bringing a laptop, we're a desktop first website, we design desktop stuff first, and then figure out how it works on mobile. A lot of websites though will be mobile first, which means do their UI design stuff figment for mobile first and then work out a desktop version of it because it's a mainly mobile website. I've got an iPhone 16. I'm going to go to the grid and Dan said we should use columns of 12. That's not that useful. So when you're working with a mobile phone, the underlying technology will be 12, but it's just easier to design with six. Six is divisible by 12, so, you know, it's fine. It's just a lot easier doing it with six rather than 12. So I'm going to grab my frame from here. Okay? Actually, we don't need to do it. You get the idea. Just design with six for mobile and 12 for desktop. And probably 12 still for tablet. Should you design for tablet, it's up to you. It depends on the job. Is it a big job where you've got lots of time and resources to develop a tablet version as well? Maybe it's a high use for your website. Then definitely spend time developing what do you call it the tablet version. Sometimes, though, designers will skip tablet and just do desktop and mobile and just let the developer work out tablet. It's not right, but often you'll find just especially templates and stuff, they just have mobile and desktop. Why can I see these names here? It's like a pop quiz. Why can I see frame three, and this is all mixed up. It's cuz these aren't actually on or in my mobile frame. The names go away once they're inside. Other things I want to show you is I'm going to go to F, I'm going to go to U. If you're designing a mobile website, you use columns. If you're designing an app for IOS for Apple or for Android. It's really common to not use columns because it's not so flexible. There's not all this jumping around. An app only appears on a phone and it's really common to use that grid that appeared first. The grid size is really common to use 12. Okay, so this is a really common size or way of working when you're designing an app because you can be a bit more precise, on an app. You know the height and the width. Have you noticed on an app, you do less scrolling. It's kind of everything's kind of laid out in a kind of a forced use of the phone. Everything's kind of laid out and kind of really deliberate on a phone. So it'd be common to use an eight point grid for an app design. It's what the IOS developers will be using. They'll be using an eight point grid. So again, if you end up not using it kind of to space things out, it's going to cause them a problem. So stick to an eight point grid. Got a couple other things. Let's go to Disk top. Let's click on Disktop down here. Let's click on this little icon to open up the settings. Okay? So we've got 12. Let's look at these other ones. Let's look at Magin. So Magin is the edges. Okay? I could put a margin of eight and just puts a little gap on the edges here. Let's do something big. Let's do 80. Okay? It's just the edges here. When you are developing the edges of a website, or designing them, it's not super important what that exact number is because it's so flexible. Watch this. If we go to this Hubspot site, you'll notice that Disktop view. You see the actual site only appears in this middle bit. All this kind of stretches to the edge. Often people won't. Some websites do. They actually develop for really big kind of screens, like the big giant wraparound screens or the big IMAX and they'll have another breakpoint. Often, though, they'll just go, Alright we're developing for this middle chunk, and this bit over here is just going to be squidgy squdgy by just extending it off and adding this drop shadow extend off to infinity. Same with this color here. You see, there's nothing over here, but it feels like it is taking control of the whole site. That's just a really common thing to do as well. To have a margin, I'm going to use 100. It just means my site because it's 14 40 across. I've moved these in by 100 each side. Really, I'm designing a site in the middle here that is 12 40. Go on down, 12 40 in there. I'm going to be designing this for my herro box. I'm probably going to get the NAV to go all the way to the edge. But my herro box, my marketing messes are going to be here. I'm going to delete these and I'm going to say, you are there. And how many are we doing? I can't remember in our Y frame. What are we doing? We've got three feature boxes. So I'm going to go over here and say, Command D, or Control D to duplicate it again. That's going to be my basics. The other thing I need to do before I start designing the boxes, click on the parent frame. Let's look at the last thing in there, which is gutter. Gutter is the space between columns, and it's really common to use. Eight is a really important number in designing both websites and apps. A lot of spacing and font sizing is done with eight. So eight by itself is probably too small. Udder. Okay, but let's do 16. It's getting right. You'll probably see these numbers when you are working in web and UI design, you'll see 16. You'll see what's the next one, 24, and 32, or just multiples of eight. I'm going to use 32 as a gutter. It is another really common size for gutters. It's big enough that it gives us a bit of space between these boxes without being too big. And again, here, if I'm using what was it, 32, if I drag this down, can you see the spacing between these guys? Can you see it kind of jumps to move this up to bangs up against the top here, and I want to move it down a little bit. What do we got? Position. The y, which is the up and down. I'm going to say plus 32. I know it's exactly the same as this is down from there. You'll notice I did math in the fields. I do that a lot. I find numbers tricky. What I end up doing is, let's say, what's another good one? Oh when I was doing the column, so let's look at this. I do this quite a bit. I know it's multiples of eight, but I sometimes get confused, is it 32, 34? It 36. So I do things like this eight times four of them. So four eighths. You just use the asterix four the times and you can hit Enter, and it's 32. Or if you're like, what's the next one down, you can do minus eight and hit Enter, and it gives you 24. I like doing that for lots of all of these fields in here. Just do this whole group as well. We might as well get everything lined up, I got this, I'm going to move it. X and Y are mixed. I'm just going to say plus eight. Remember what mixed means? Do you remember? That's right. Just means it doesn't really know. I did plus eight. Undo. It's because we've got lots of things selected. It's like, Oh, I don't really know the y. I know the Y of this and this, but together, it's a bit weird. So I'm going to say plus 32 just to move it down. All right, so we've got some grids going a bit of consistency. Now, last thing is that these don't print or view. Watch this. If I go to preview, you'll notice that. They don't actually appear. The boxes do, but not the actual grid. You can turn them on and off by going down here and turn the I on and off. Now it's Shift G to turn on and off as a shortcut. It should be Control G on a PC. Oh, I'm not sure. They both work on Shift G on a Mac and Control G on a Mac work. One of those work for PC. Type them on, let me know the comments which one that is. I'm pretty sure it's one of those. They're really good for layout, but then they're ugly. So often I turn those on and off. But you can just use the eyeball, turn on and off. Ooh. All I know this one's getting really long. I want to introduce something now as well. So just a little interesting factoid, it's weird. We'll use it in the course. I want to introduce it now. Let's go to desktop. Let's go to this one. What you can do is, I've got this grid over here. Do I have to type it out again? Not if you've duplicated it, obviously, but if you've got a new page and you're like, why isn't this appearing on this one. What you can do is you can say. Actually, that's the wrong size in it Dist. Okay, is I can copy and paste it. Watch this. It's a little weird thing in figma, but it's super useful. If I click on the desktop of this one over here, I can go down to this one. I've got this. I can turn it into a style later on. But what you can do is watch this. I can click Row. It's No Man's Land over here. Watch I can do it for not everything. What can I do it for the fill? Yep. Is this area of no man's land that I can copy some things. Watch this. I've got this selected, I want you. I just go Command C on a Mac, Control C on a PC. Click on this got the frame and just paste and it will bring it along. That's interesting for a lot of things. I'll introduce it now. We'll do it a few other times in the course. Because probably at the moment, it's easier just to duplicate it. Then you've got the columns coming along. Holy smoke Dan, somehow you turned into drawing 12 lines into a whole epic saga. I hope you learn something. If you're a developer already, a lot of this will resonate with you, if you've never worked in web or UI before. Hopefully, this is useful. It is confusing. You're like, there's a lot to take in. That's totally okay. I wanted to give you a little behind the scenes of why we bother picking 12. But if you take nothing else from it, just pick 12 and move on. That is it. I will see you in the next video. 34. Tips, Tricks & Preferences in Figma: Hi, everyone. I'm going to make a video about the kind of shortcuts, where to find them, some of the tips and tricks of Figma. We've got some experience behind us now. It's time to add some workflow parts to kind of speed us up. So one of the first things I want to show you is this little question mark. We've all kind of learned that the help inside of software is never really good. Figma is really good. Click on the little question mark. The one that's quite interesting is under keyboard shortcuts. And this is all the keyboard shortcuts that aren't obvious. Obviously, you can hover above some stuff. You know, I know the pen tool is P because it says it there. But in here we'll show you all the other ones. So have a little squeeze through. Some of them blue. Blue ones we've used in this course already. I've probably used all of them. This is a new login for me for this course, some of them are still not blue. I don't know, it feels like a challenge. Use them all. But have a look through here and find ones that you're like, Oh, I wish it was a shortcut for strike through. Shift Command X. I'll show you the PC version as well if you're on PC. Let's have a look at one of my favorites. It's in there. I think it's selection. Deep select. I'll so when I am working, let's go to this features box here. So I'm on my mobile Lo Fi. Oh, another shortcut is if you select something, can you see I've got the selected down here? Instead of zooming in right into the middle of the screen, you can hit Shift two on MacNPC. What I'll do, it'll zoom in to the thing you have selected. We've done Shift one, which is show me everything on my document. What are you guys doing over here? Don't need you guys anymore. It's a shift one. But if I select something, let's say I click this text down here and hit Shift two, it zooms right in on that thing I have selected. That's a handy one. Zoom out a little bit. What do we got? The other shortcut is deep Select. This here I've grouped it. Inside of this group is another group. Inside of this group is another group. There's lots of groups. So you end up double clicking. Say, I want to click on this icon here. I select it once. Got the group. Double click it. Go inside that group, double click it again, go inside that group, double click it again to get inside and grab the icon. A lot of click. Deep select is you hold down the command key on a Mac, control key on a PC, and just click at once, and it just dives all the way through all of these groups or frames or components. Everything just grabs the thing you have your mouse over the top of. So that's deep select. And I just want to give you for instance of going through here, go through the keyboard shortcuts and just have a little look yourself and go, Oh, that one's a good one. I'm going to write that down. Remember, you've got a shortcut sheet in your exercise files with the main ones, but there's just ones that you'll find personally useful for your workflow. Now the other shortcut is the shortcut to rule all shortcuts. It's called the quick action? What's it called? It is called the Actions button. You can see it there. It is Command K on a Mac, Control K on a PC. This is another good point where sometimes there's keyboards that aren't the quity English keyboards that I use. If you're like, it doesn't work on my other style language, hover in here, you'll see all the shortcuts along the side as well. Not only do that shortcuts down in the question mark, but alongside them here. Have a look. If I'm through this course and I'm like, Use Command K and it's not right for. Have a look in here what it's listed here. All right, the one I want is the actions key. Command K. This is the most important shortcut. You can basically ask Figma to do anything you like. I love it. Watch this. Let's say I want this to be uppercase. I know I can go in here, I can scroll, I can go to the settings and I can find it's this one here. But there's lots of things we're like, it's either too long or you can't remember where it is. I can click on this, hit Command K and just type in upper. All right. So reason there's a warning. Stop my Command K. Anyway, so I've got the selected, let's go Command K, and then it appeared. Yours might do that and I can type upper. You see, goes through every menu and goes, do you mean this? You're like, Yeah, I mean that. Co. Let's say, I've got this color here and I want to select all the other colors. I know what I need to do and I know it's possible. So I'm going to go Command K. Instead of trying to find it, I'm going to go to select and I'm going to say, there it is there. Select with same fill. It's clicking everything that has the same fill color as these guys. I can say, right, I want you now to change. If you can remember what it's vaguely called, you can just go, Command K, type it in and get straight to it. Everything is in here. The other useful thing is that if you're not a right clicker, okay, there is so much useful stuff in here. Okay? If you right click things, it's contextually sensitive. So it's going to give you the list of things you can do with this. When you right click text, it gives you different stuff, and it gives you the shortcuts as well. But often this can be really useful. So if I click on this and I right click it, I want to go to select the layer. You see it's going and picking all the different things that were underneath my mouse? Do I want the group? Do you want the group inside the group? Do you want the image that is inside the group that's inside the features tab kind of gives you the breakdown of where you have your thing selected. So don't forget to right click. There is useful stuff in there. Preferences. There's not many. If I go to the little F for Figma and go down to preferences. There's these ones. Have you read through, find anything that you think is useful. Couple of that I like to change is keep tool selected after. I I grab the rectangle tool and draw it out, by default, it normally goes back to the selection tool, and you're like, No, now it's going to stay on the tool you have selected. Another useful one that I like is the scroll wheel to Zoom. The moment my scroll wheel on my mouse, you might not have one goes up and down on the page. That's totally cool. But you might come from a different program where you're like, man, that normally zooms in. I'm going to change that to scroll wheel to Zoom. One last one that I like okay is this all personal preference. The one that says keyboard zooms into selection. That's the one. Okay? Is that before when I zoomed in, it just goes to the middle of the screen. Now, if I have this selected and I hit Zoom, so I'm just using my Command plus on a Mac, Control plus on a PC, it kind of zooms into the thing you have selected. All right, so have a look through the preferences, change what you want. Oh, one last one is nudging. Let's have a look at that one. Let's going into here. Let's go to preferences, and let's go to nudge amount. The hell is this. Nudging is when I went, uh left and right with my rakes. I remember how shift, it nudges it in bigger chunks. When you're working on eight point grid, especially for an app, you want it to move over an eight point increments. Even if you're not working on an app, I prefer the nudge to be eight points. Let's go to preferences, go to nudge amount. Nudge for one is one pixel. That's fine. But I want the big nudge when you hold shift to be eight. Now when it moves across, I know it's moving eight pixels. Alright, so that's some of my tips. And the big one is Command K or Control C or PC and just type the thing you want. Just type in layout. So show Lou guys. The lout guides are hidden. Could we even see them before? We're on the wrong one. Let's go to this one here. Let's go to Command K. Even if you can't remember the shortcut, you can remember Command K, and then just type it in out. You can see I can turn those on and off. Every shortcut under Command K, Control C of PC. Alright, that's it. I will see you in the next video. 35. Color Inspiration & The Eyedropper in Figma: Hello. We're going to talk about color inspiration. We are studying our high fidelity mock up, so we need to pick colors. You might be given corporate colors and you might be stuck with colors, but our class project, we get to pick our own. Where do we start? Color inspiration can come from lots of places. There are lots of places online. There's a couple that I really like that I want to suggest coolers is a really nice one, and color hunt is another one that I use a lot. The good thing about them is that they just show you colors that work together. You might be like, Oh, this is it. What do I want? Don't scroll too much. I like these four together. They are really cool color combination. It's really easy to get them into Figma. I can just click on them. Okay, and click on that. He says it is copied or you can copy and paste it from down here. Then in Figma, I'm going to go to the Hi Fi one, zoom a little bit. I'm going to create a couple of rectangles. I'm going to these frames just because I'm holding Shift to make it go perfect square and with it selected, I'm going to get rid of FFF and just paste in that code, head enter, and that's that color over. I'm going to zoom in. I'm going to make a duplicate of it and then go back out to coolers and actually a color hunt, copy that one as well, and then just work your way through bringing in the colors. Another good one is color.adobe.com, and this has some interesting things under trends and under Explore. You can see here the images are driving the color schemes, which is really cool. Explore is just you can go over here and say, I want to see all of the color themes that are most used color themes that are popular this month. That people have been using. They have a big library of people using colors, it's quite interesting to see what's being used. Come on, load. It's not working right now, but it does work other times. Other great places to get color ideas. Especially if you're new to design in general. Color meanings. This is figma.com slash Colors and it has, let's say, want to use this color, but you need to talk to your client about it. I like red. It's not good enough. You need to say, what is Chili gives you some language to be able to direct the client with explaining why you've picked it, and just gives you yeah, some language to use. I find that really useful. Plus, it's giving me some colors that work with it. Another good one from Figma is figma.com slash Color Hyphen Wheel. Okay? And then you can pick your color, and it's going to pick a complimentary color to it. One that will work together. I like that one. I like that one more. Another useful one is a grabient. It's really good for gradients, and you can go through the gradients in a second, it'll allow you to find good gradient inspiration. The one that I use a lot is from my mood board. Let's say you're doing your mood board and you're searching for stuff and you're doing wallets, but you like this color. So I'm going to do a screenshot, I'm going to go. I like these color combinations. Even though there's not a wallet in it, it can still be part of my moodboard. I'm going to go into Figma. I'm going to go to my mood board. Where is my mood board? It's above my lo fi doc. It's just hanging out over here. I'm going to grab my screenshot and bring it in. Just drag it onto the page from my finder. The cool thing about this is I can say Zoom in is I can grab my rectangle tool or the frame tool, can draw out this, grab my eye drop a tool, which is the eye key on the keyboard and that one, that's cool. This one here, eye drop a tool, you can start working your way through and start appropriating colors. Okay, I find this actually just easier than copying and pasting all the higodecimal numbers. I do it for these as well. Say if I'm at say coolers and let's go for the generator. This one's a random one. You can hit space bar on this one, just to cycle through random ones. I don't know, it's cool. Let's say that I like this group, I can just do a screenshot of that big slice, throw it into Figma. There we go. I use the it's too big. Massive. Scale it down, zoom in, and I use the eyedropper tool again. I'm going to grab you make a copy of these guys here. What do I want? I want one, two, three, four, five, I can just use my eyedropper tool to pull these out rather than copying and pasting that hex number. Missed it. My last one. Now I've got my colors. The other thing you can do is you're like, I like these, but this one here, I need another version of it. I'm going to go. Here, you can start messing around with the sliders like we did earlier. I want one that's a bit more saturated maybe going into here, go into hex. I'm going to switch it to hue saturation brightness and I want it to be hue saturation brightness. Saturation is this one here? I'm just going to use my up arrow to find one that is more saturated. You see here? You can start breaking these out into alternatives for this primary color. Maybe a more desaturated one. There you go. That's way too desaturated. All right. That's kind of a way to get started using color, find inspiration, and just to go through and just go through and use Eyedropper tool to pull out colors that you might use in your design. 36. How To Create a Color Palette in Figma: Hi, everyone. In this video, we're going to make a color palette that we can work from for our design. We'll have a primary, secondary, and accent color. We'll build out some interface colors, and then we'll have some variations of our primary, secondary and accent colors. Alright. It's not the official only way to do it. It's the way I do it. I thought I'd share I find it really handy when I'm starting to build a concept to have some sort of color swatches ready to roll. Alright, let's get started. So let's build out a more usable col palette. You started half doing it. Let's do a bit more. Let's after the rectangle tone, draw a rectangle. I'm going to start with a color that I want to. I liked this purple here, actually like mainly because when I'm looking at the brown of the leather for my wallets, this just feels like a good color. Purple seems to go. It, I like it with it. You can get it from your color inspiration sites. You can pull it from your graphic. You might be given a color from the company. Okay, I'm down with something like that. Now I need a color to go with this. Either you've picked it or it's a company color you need to work with, what you can do is grab that color and go to something. You're looking for a color wheel. There's lots online. We'll use the Figma one, figma.com slash color wheel, slash color Hyphen wheel and you can post it in here. That's the purple that I want down the bottom here you can see. It's picked a complimentary color. Do I like it? I'm not sure I do. Complimentary, as you'll see here, it is completely opposite in the color wheel, often it's a great place to get started. Like what I'm looking for maybe a purple that is a bit more, less in the purple slash green, but more in the Is that still purple? Purple, blue pus mustard. Am I digging that? I can copy that and figure that might be a good secondary color to my primary color. This is the main brand color, and this is going to be a primary color. But it's not always you don't have to use it. Color signs is not so much a science. Often, you can just go and pick it. I like split as well because split, it'll go directly across, but you can see either side of directly across. Split. I like that one. That's more my jam. That's definitely green down. I like this purple and brown. Will I use this as well? I don't really like it. I'm not. But work your way through this and you might find, okay, there's different models for this. Oh, I really hate that. Square is quite nice. You can see these ones. Often when you're working, you need at least two colors, a primary and a secondary. Often, though, when I'm working, I like to have an accent color like a tertiary color, three of them. Is that it? Or is that it? Kind of working back and forth. On my Mc, I can hit Command Tab. I think you can do Control tab on a PC to flip between applications. I'm going between Chrome and Figma. And what do I want? Don't be afraid. Just go, I think I know what I want. I'm just going to hit the color wheel here and just go back, Oh D I like that? Is that good? I'm unsure. I'm just going to zig zag back past this for a little while and I don't know, I guess I want to show you that it's not a complete science. I probably want something brighter for my accent color. Do want this ready. I was going to fast forward a bit. Here we are. Maybe not. Maybe on this side of the red, maybe orange. All right. I'll be back in a second once I've picked a color. I spent ages changed all the colors. I'm still not even sure, but it's a good enough place to get started. What I like to do then, we've got our primary, secondary, and either tertiary or accent color. Use a lot, use a little bit, use sparingly, very exciting stuff. And what I like to do is you can't just use these colors. You need a little bit of extra. What you end up doing is grabbing this box, pulling it up this way and say, right, I like this one, but I need a darker version. So I'm going to click in here. I'm going to go to my HSB. I'm going to go to. You could just drag it down. I'm just going to grab my brightness, hold Shift, and hit down a few times. I've got a darker version. I'm going to do a lighter version. Okay. And I'm going to go up a little bit. Okay? So I want a lighter version. Now, you don't have to just go up and down on dark. Some colors do really well at just making them a bit darker and a bit lighter. Some of them get yucky. I don't know about this one. I feel like this is going to get yucky. So I'm going to get to brightness, go down a bit. No, that got all right. What you might do as well is get it darker, but also less saturated. There's no hard and fast rules of color, hopefully some of these tips will help you if you're new to kind of get a better sense. So that one getting brighter becomes this whole new color. So I want to get the saturation and go down on that as well. I might get the brightness down a little bit as well. Yeah, there we go. Same with this one. Let's go for this. I'll skip along with this one. All right. So there you go. Those are my colors. I'm going to use these mostly, but there will be times where I need a bit of contrast where I can use this or maybe this, just to have a clearer contrast between the two whilst sticking in the same kind of color zone. The next one is white and black. So white and black, you can use white and complete black. It's really common, though, to not just use white but use something. Can you seen the back of Figma, they've used this off white for this interface color? We're going to create our own interface color? And can we match the background? Basically oh, oh, got pretty close. Okay, so it's really common just to have a bit of white, just a little gray in it. Why we have an interface color that's not quite a white is so that we can do things like I'll leave that there. What I might do is grab all of these and move it down to this other background. I'm going to shrink it down holding shift so it scales nicely or use your scale tool, just so that it's easily seen, otherwise, it gets mixed up in the background. The reason we have this is let's say that I've got a frame and it's a white background. I want to have a pop up box that appears on top of it and I just have a little bit of contrast there to be able to separate it from the background, I might add a tiny stroke. That's only one pixel, that is really light color. Just to have let's add a drop shadow ex drop shadow. We haven't covered those yet, but you can end up having these models that pop up in your app that I can probably get rid of the stroke now. The dropshadow is doing the job for it and just see there's a nice bit of contrast between the two. You might do it the other way around and have off white at the background and have all your pop ups being white, it's up to you. Okay. And again, in terms of colors, you can pick any gray you like, but it's common to have just white and black, have five of them. You're off white all the way to your darkest black. Often with black as well, it's not as clear cut. Drag it down here and just use all black. You could do that. There's nothing wrong with that. What I like to do is find yeah, you can pick a cool or a warm black. You might decide that I need to see them all with Zoom a little bit. Warm black is down the bottom here, but in your hue slider, go to a yellowy color, a golden color and then pick a black but in there. It's not much. Let's compare it to the regular black. Regular black is here on its own, it's not much, but if you compare it to this guy, can you see there's just a warmth to this one here and we might go even warmer but darker, you end up with this kind you get a warm black rather than a cool black. Well, that's a plain black, warm black. Let's see the comparison. I'll do it on the slide here of a cool black. You can go in here and say, Alright, I want it to be a cool black so I'm going to go into the blue greens and pick a black that's really dark. But in here, can you see the difference between the two? On their own, they look pretty black. But with their buddies, you can see cool, warm, and it's up to you which way you want to go. Decide, do you want this kind of warm or this cool kind of black going with your colors. I'm going to go for the black. And you can have a blue kind of cool. You can also have a green kind of cool. It's up to you. I might go into a kind of a purply little bit edging into there. Okay. Yeah, that works for me. So you there. Now I'm going to grab this, grab the iba dropal and go like this and go, we need one, two, three, four, five stages. I need one in the middle. This one here, I'm going to steal the same color. I'm going to say, not that dark, so we need to be a lot brighter. You can just go to remember hue saturation brightness. That's this one and go up, hold shift, and you can see here, it's not gray. I want to be in here. I want it to be gray but have a warm using a bit of this blue. Can you see it here? It's a cool gray. This one here is going to be somewhere in between. So I'm going to go I drop at all and go, which is still in the blue zone, but more up here. Oh, no, it needs to be dark, somewhere in there. I like it. All right, we'll do our last one. It's going to be halfway between these two guys, and it's never just drag 20% or 50%. There is, I'm going to make it brighter, but it's looking too blue, so I'm going to come over here and have just the hint of blue. All right. I've got my colors that I can start building from. I've got a primary, secondary, accent color, and then these are my interface colors. Text, boxes, switches, that type of thing. Now, we're at the concept stage. This can be adjusted on the fly because you'll find out you'll use it and you'll be like, Oh, this doesn't work or this looks horrible, there's a combination and you can go and update them. But it's good to have a starting, especially when you're pulling from mood boards, and you're like, Oh, I like these ones? Oh like with the purple. Do we go swap? No, Dan. Focus. I really want this color now instead of this mustard color. All right. Come down. All right. That is how I pick colors. It's not the official only way. There are a lot of ways to do it. You can borrow from color websites, get some ideas from them. But have a playound with the color wheel if you haven't used it before to get a sense of what science says you should use, and then go do your own thing anyway. All that is it. I will see you in the next video. 37. How To Make Gradients in Figma: You. We are going to look at gradients inside of Figma. Hello gradients. We're going to make this subtle one. We'll make one with three colors. I'll show you how to make a gradient that has a transparency, so it looks like a fade. All that and more, actually just that inside of Figma. Let's jump in. All right, gradient time. Let's go and I've got all kind of messy. This is my inspiration. I'm going to grab these, copy them, and move them to my desktop Hi fi. That's one we're going to start building. Don't need you anymore. Don't need you guys. Delete it. Who remembers how to turn the columns off? Oh, you can't remember, but remember the super shortcut Command or Control K and type in layout. Lay out, and we can show guides. All right. I'm going to put these at the top here. The only trouble is over here my Layers panel, I got my desktop, but I've got all these just randomly in my layers panel. Let's select all of these. Let's go to Right Click and we can frame selection. They're in their own little group slash frame. I'm going to call this one color palette. Is this about color palette? Anyway. Hang on. I just need to check. Wait there. All right. I'm back, damn it, as two else. Spell good, mouse good. Draw pictures is good, though. And let's have a look. I've got this in this. One of the trouble is with this white background here. We looked at this before, is if I have nothing selected, I can change document, like the working document color to something darker. That sometimes is often useful. I can see these in a little bit more contrast. So just have nothing selected and you can change the page. The page doesn't print or go to the mobile website. It's just the UI for Figma. All right, so let's make a gradient. I'm going to copy one of these guys. And gradients are hiding under film and under we've got the solid. We've got gradient. We've got a few other ones, patterns, images, videos. So let's go to gradients, and it gives us default one, and what you can do is change in here. That's probably the easiest way. Let's say I want to pull gradients from. Well, let's just do a manual one. Let's just double click this. You can grab the slider, pick any old color. Then at the end here, click on this one, drag it around, pick any old color. Oh, that's horrible. So let's say I want to pick gradients from my actual colors. I grab the eyedropper tool and we're working on this last one here, so I don't know. I'm going to work this out and see how bad it gets. This first one, I want to grab the eyedroptol from my purple. I'm digging it. Often, what I like to do is instead of this really very complete gradient, weird. You see the bending on mine? Probably come through in the video. Not sure where that's from that won't come through. It's just weird. Well, it's kind of a difference on Zoom level. You might have that in yours. Weird. See, gone back. Ignore the line. So back to the gradient is what you can do. What I find a bit better about gradients is you can see the little white dot. You can drag it kind of past where it needs to be. So often I like gradients that are a bit more subtle like this. Zoom out. I find that often a nicer gradient. Even more, you can go even further and just go like, Alright I want this to be over here. And this is a linear gradient by default. You can go to radio. These are really good as well. I'm going to flip it over, what I want to do is grab this end and be there. Actually know what do I want. I'm going to flip it back. I like doing this where there's this more of a watch this. I can make it bigger. There's this more abstract gradient. Something's happening. I like it for buttons where it's not a real clear, look at me. I'm a gradient. It's a subtle gradient. I liked it better how we had it the radio one, so I'm going to go undo. Other things you can do in here. There's radio, there's other ones that you will never use angular. Looks cool, I guess. You like it? And the last one, which is diamond. Again, not one that I use. I'm going to use linear. You can make them transparent as well. So let's bring in an image. I've got something in the exercise file, so let's go down here. No, down to this one here and go to Image video. It's Command Shift K, Control Shift K on a PC, go to exercise files. There are some images in here. Pick anything. Let's pick this one here. Okay so Scott. Bring in that one, I'm going to click and drag it out. What I find really useful for gradients is, let's say we need to put some type at the top here. Let's grab the type tool, click once. Heading. The problem with this text here is that it's hard to read against the background. Okay? So, make sure you use the K for the scale tool to scale text. Okay? It's just really hard to read against this background. So what we're going to do is add a gradient. So let's make a new one. Let's grab the rectangle tool or a frame. Okay? And what I'm going to do is I'm going to go on this, go to gradient. I'm going to pick linear. The top one is going to be completely black or the black that I'm using where my black. That one there, so I'm going to go eyedrop a tool and grab that one. Okay. And this bottom one here, the second, instead of being a full color, which is this one here, you can grab this and make it zero. That's the transparency as this other one. You can do stuff like this where you can drag it down. I need to play with the layers. Remember who remembers the layers shortcut? You can just drag it here underneath underneath heading or it's the square brackets, which sends it all the way to the back. That's the square brackets next to the piki and then I might have to do the same for the background. Either way, I like doing this where you've got this nice transition between the background and the foreground and with it selected, you can decide on linear here once you've clicked it, decide how short it is as well. Can you see I can have this little fade out? I'm making it horrible now. The other thing to note about doing gradients when you're doing transparency, even though this is completely transparent, it said to zero, it matters what color it is. Can you see it gets light across there or make it more exaggerated. Let's use green. Even though green is completely transparent, it appears in this transition between the two. So sometimes you just want black and black and have the transition at zero so that it's just a real clear, simple gradient. No other colors mixed in. Last thing I want to show you is adding three colors. We looked at grabient earlier on was grabient. All right, they've got lots of interesting colors. Some horrible ones as well. So let's grab one that we like. Scroll, go scroll. Say this one here. This has three colors applied to it. All right, and the sites not working. Hopefully, when you go to it, there'll be three different colors here. They've adjusted this site. I used to look different. Now it's broken. Let's actually just do a screenshot and we'll do a workaround. We'll bring that into figment and pull the colors from it. Because you can see there is one color up here, let's make it a little smaller and maybe a different color in the middle to a third color to more of a blue. So let's do that. I'm going to leave that one there. Quite like it as one of my colors, and I'm going to grab. And add a third color. It's linear at the moment, it's got one and two. You can just click anywhere in here to add a third one. You can do it on this line here on the artboard as well. It doesn't really matter. Then this one here, we can say this third one can be this look, I got that middle color. This top one is going to be this purple, more blue color here, and then this one going to be this color here. And I might move it in a little bit. You can add as many colors as you like to your gradient. We've got three. There you go. That's how to do three colors, and that is how to do gradients in general inside of Figma. I'll either doing color gradients or something like this where it fades out to transparent. That's it. That's gradients in figma. 38. How To Create & Use Color Styles in Figma: Hello. We're going to turn our color palettes into color styles. Styles are reusable. We get to name them so that we can consistent colors. We can share them with people. We can share them with other documents. They're all the same. The powerful part of them is that, let's say that I want to adjust this color that I've made and use lots throughout my document, I can go through and they're all connected. Look, I can kind of make changes, and everything in this document will update the power of color styles. Plus, we'll cover some of the naming conventions that goes along when we are naming colors. Let's jump in. All right, to create some styles. Let's start with this one here. And that's what these little dots are for. You can have styles on any of these features. Can you see styles for effects, styles for strokes? They're just reusable, right? So let's do this first one. Let's go to styles. It's quite confusing all libraries. What you might do is create it in this file just to like, that's clear. And what we're going to do is add a new one. So this little plus. I've got mine selected, I hit Plus, or hit the dots, then hit plus. We can give it a name. Now, naming conventions for colors. There's some yeah. I'll give you the most common ones. There's lots of ways of doing it. The most common one is instead of calling it purple, call it primary. In case you change your primary color to something else, you don't want to have a whole bunch of colors called purple. So it's primary. If you're a freelancer, working for lots of companies, you might type in the brand name. I often just put in the initials. So this is Scott Wallets primary. Because if you're working for another company, you'll end up with lots and lots of primaries. So this is clear what this is cause we've got one, two, three versions of this. You might end up with five, ten, a good naming convention. You could just call this one number one, or maybe that number one, number two, number three. Okay, sometimes people will have this at 100 and then this one is say, it's more transparent. They'll put it as 50. It's like 50% of that main color. You see that quite a bit. Probably the most common one is using hundreds. It's from font days, weights of fonts. If you know weights of fonts, you'll know that 500 weight is the normal. 700 is bold, 900 is extra bold. We do a similar thing with color. You middle color. This is the middle use of it. You've got a scale of one to 900. 100 is going to be the lightest version of your color and 900 is going to be the darkest version. This is right in the middle, so we're going to call this 1500. I know it's weird. He's trying to be cool and breezy about it, but it's weird. I'm going to copy that, I'm going to create a style. We've got a style now. Let's apply the style and we'll come back to naming. I'm going to go Zoom mode and add a few different elements to my page. All right. Good work. All the bits that I've already made, I've added back. Now, let's say we want to add our primary color. What we can do is select it all. Instead of trying to copy and paste it, use the eyedrop atol which is fine. You can click on styles now and you can say, Look, there is my style. What's really cool about it is if you've got a really big large document and the clients like, Oh, what's wrong with the purple? Why isn't it a bit more I don't know, purply. What you can do is you can have nothing selected, find your style, go to edit and say, down here, this is my change. Can you see everything comes along for the ride? You can see the perk for that already, right? It's a great way of just adjusting it. The other cool thing is you can share styles. We'll look at that later on, but you can share it across companies, across documents, so we're all using the same purple. All right, let's build out a few more. Let's go to this one here, which is the darker version. Let's add it to my styles. Let's hit plus, and we're going to call this one, what are we going to call it? It's still a primary color, but instead of the 500, the darkest one you should probably have is 900. I want to leave myself space for a darker version, so I'm going to call this 1700. Let me do one more and undo. I added an extra. Let's do this last one. I'll do this in speed mode, you wait there. All right. Why this is quite good is that I've got 300, 700 and let's you can drag these around if I have nothing selected because I created them in different times, it's just stack them, but I want, let's say, 700 at the bottom, 300 at the top. Light medium dark. The reason this is quite handy is later on if you're like, Oh, man, I need to color in between these. What you can do is you can say, right, I want to color in between, and it needs to be a little bit lighter but not as dark as that. You've got room to name one, look, we've got a 300, a 500, and a 700. It's in between these. Uh huh. Yeah, we could call this 1600. So we have some scope to work. If you find other people's colors, they'll have one for everything. They'll have 100, 200, 300, they have all of these. It's a bit overkill for what we're doing. We're going to undo this though, but that's the way that naming works. It's a weird one, I know. See a lot and that's why it's there. If you've never come across this before, that's how they do fonts as well. Bold, regular, that is light. No, whatever the light one is. The thin one, there's room for a thinner one and a darker one. All right. Those are those colors. With nothing selected, you can see your styles over here, you can right click them and delete them or duplicate them, copy them. You can edit them. You can rearrange them as well by clicking and dragging them. Let's add our gradient as well. That's the one I want to add. Same thing, add this one. The naming convention for this one is going to be slightly different because am I going to have different versions of this one? Probably not. I'm going to say gradient. I'm just going to call this one gradient one. Now the cool thing about this, this is across the whole document. So we can go back to our mobile Lo fi and find our document. We're using this color here and double click it to go inside. Oh, no, I'm going to use my shortcut. Remember command click or Control click on a PC? This is this image color here. I'm not sure why it's called image, anyway. Oh, it did have an image in it, did it? Oh, we did and we deleted it, did we? I can't remember. The good thing about, though, is I've got this selected. I can go to my select all colors. We can go the long way. Where is it? Under Edit, we can select all. Oh, this is a weird one. Okay. Normally it has select all with the same fill, but because I did something weird and now it's called image, it's not working. Let's do it to this one here. What would I do now? I'd probably just delete that box. It thinks it's an image, it's not. But this one here has a regular old fill. Let's do it to this one. I can say Figma, edit, and you can see select all. All right, got myself lost. There it is, Dan. You're like, click on that one, Dan. Oh, there it is there. Okay. So nothing to do with that image. Select all with the same fill. Now, these ones are using a similar fill. This one here for some reason, I think I changed when I was talking to you guys. I'm going to try the same. I'm going to use my shortcut, though, Command K or Control C or PC, and I'm going to select all with the same fill, and it's going to grab none of them. Weird. I've broken that and I want to delete those and move on. But let's just do with this one here. Command K or Control C or PC, it remembers the last things you've done, so I can just click on that one. I've selected this, imagine it's selecting the whole document. I can go to fill now and I can say, I'm going to use my primary color and it will change them all. Same with the stroke. I can go into here and my colors are in this. I might decide that I'm going to use this one. You can see the perks. Sometimes though you don't want it to change, say you want them all to change, but this one needs to stay purple regardless. What you can do is select on this, let's click at once. There it is there. You can see also the difference in the way the fill looks. Something like over here, it is a rectangle, whereas this one here is a dot. A dot represents styles inside a figma. What you can do is you can just break it. It's back to that color here, that little square with the color, and it will not be connected to that style anymore. I I update my style, these will change. Last thing we're going to do is you can leave and go on to the next video now because what I'm going to do is just build out my other ones. Actually the naming conventions. It's going to be primary, secondary accent. I'm just going to go through and do that. I'm going to say. It's quite tedious. Add styles, plus button. This one here is going to be Scott wallets. This is going to be my secondary. This is my 500. I don't actually have to leave this. I'm going to do the rest of them. You are going to be a style as well. Plus All right. And one thing that I didn't mention was, what do we call these ones? If that's primary, secondary accent, I'm going to call these ones neutrals. Okay? So I'm going to say, I'm going to fill. Plus, this is going to be my neutral Nu Don't have a spinal neutral, please hold. Alright, now it. So I'm going to see you and just kind of work my way through 100. That's going to be 300, 500, 709 hundred. So we'll sped that together. All right. I've got my colors in. Next thing I want to do is range them up. 3057 ingredients probably just going to go down the bottom. I'm going to use that the least. 57, 300 is going to go above 700 doesn't really matter how you order these. Just make sure you got nothing selected in the background to get the color styles, there's one, all of these guys. Awesome. One thing you might have done is just to be careful. You go head here and then you hit plus. Sometimes you just want to hit plus here, and you end up with two fills. To get rid of two fills, you can close that down or hit the little minus button. All right. We've got a color palette. Look at us with fancy UX designers, and we've got a color palette to work from, and we've turned them into styles. Look at us. All right. Let's go start putting these things into action. I will see in the next video. 39. Class Project 07 - Colors & Columns: Hello. We haven't done a class project for a little while. It's time. I have grouped in colors and columns because the columns class project is boring and the colors one is exciting. Is the boring part. I want you to go through and add your columns. First of all, create a Hi Fi mobile and desktop. We created the wireframe version earlier on, you should be at a total of five, make sure that your document is in your draft so you can add more than one page or more than three pages. Okay, I showed you that in the previous videos. And then I want you to on those pages to add four frames, our four pages. Okay? So our homepage, product details, checkout page, and confirmation both for the desktop and mobile. Let me just quickly show you. So I've got these two pages, mobile and desktop, shift one to see them all. So cradle these pages. Should be four on each, and I want you to add the columns to both of them. Okay, on mobile and on desktop. Number six on mobile, 12 on desktop. And you can decide on the gutter and margin. It's totally up to you. Okay, then it's exciting bit colors. I want you to go through and draft up a color palette just like this one here, I'm going to select this, hit Shift two, bring that thing I've got selected to the front. I want you to create this. You've got a primary, secondary, and tertiary or accent color. Doesn't really matter what you name it. Remember, we want a medium, dark and light version of it, and I want you to turn them into styles. So here. You can use different numbering, could be one, two, three, I'm using the hundreds kind scale. Make sure when you're finished to drag them around so they make sense for you, some order. Do the grays as well. We're calling them neutrals and at least one gradient. When you're finished, what I want you to do is take a screenshot of all of this because I want to see your colors, but also your styles in there. Then upload that. I didn't grab it all. I want to grab all of this. Let's have a look in the class projects. There it is there. There's a deliverable example, something like that. Colors. Don't worry, though, if you're like, colors part. I don't know what I'm going to be doing. We can adjust these throughout the course. As we go, you can adjust them quite easily, member, because we've got styles. That's okay. You can get the colors from your move board or you can get it from the color inspiration site. I don't mind where you get your colors. Don't worry about sending me a screenshot of your columns. I'll trust that you've done it. But I do want to see this for your class project. All right, go make some colors. If you haven't already and get them all nice and tidy and make sure there's a gradient in there as well. I don't have mine there. Actually, I need to update this one. This is an old version of my colors. There you go. That's the right one. All right. Enjoy making colors and boring old columns. I will see in the next video. 40. Missing Fonts in the Browser of Figma: This short video is for anyone who's using Figma in the browser and not the desktop app. The desktop app does not need this video. If you are using the browser version, and you probably will eventually, sometimes fonts can be missing. And all you need to do, it's quite simple, you go to figma.com slash Downloads and install this. Restart the browser. Let me cover just a little bit more detail for those who are interested. Jump in. It's easy. Go to figma.com slash Downloads. Find the font installer that matches your operating system, install it, and then close down your browser, reopen it and it will appear. A little bit more detail is two versions of Figma you can use. There's this desktop one you can download. Hey, that's this one. It's something running on my desktop. It's very similar to the version here in the browser, which I'm running in Chrome. Okay? And they look the same. One small difference is remember I forgot this browser version doesn't have the little home button, which I mentioned a few times in the course swoops. So there it is there, the home button. This doesn't have it. You remember you go to Files and back to files get to the same place. But also the desktop version, this one here, has. Weird and has all the fonts from that I've installed onto my computer. This browser one doesn't. It only has select amount of fonts, nothing installed on your machine. All you need to do is go and install this and then close down your browser, reopen it up and any fonts that you might have downloaded or bought will appear inside of Figma. Easy, B easy. That is it. Carry on. 41. What Fonts Can I Use? Plus Font Pairing in Figma: In this video, we're going to look at what fonts I can use on my website and app. We'll look at Google Fonts and we'll also look at font pairing a way of combining two different fonts that look good together. Mr. Bin. All right. When you are in stuff is what I want. When you are typing inside of Figma, you get a bunch of fonts preloaded and you're like, Where did these come from? Basically, they're all from Google Fonts. Google has supplied the world and the Internet with a bunch of free to use commercial use fonts, and you will probably find something in there that will work for you. If you want to install your own font, you just got to be careful. Let's say you find a font somewhere else, and you install it on your machine. You just need to make sure you've got a commercial license to use it. Don't be afraid of buying fonts like there's one I bought the other day, Clem, I love this foundry. If the website as well. It's very cool. Let's say that American Grotesque is the one that I want. It's just perfect for the brand, something I want to use when it comes to buying it. This is one I did buy. I bought Geograph and I bought it originally just for desktop. Five users can use it and I can use it on my computer and do it for all sorts of print stuff. I was using it for a t shirt. What fonts that I want, I choose the fonts I wear, I want a thin and regular. You see you're actually paying for per font. You can buy them cheaper as a pack, but we're buying these ones. Don't be afraid to buy but there are lots of good free stuff online. Now, the thing to check though, is I couldn't go through it on my website. I need to use the web license, and I need to pay for this. I need to make sure that I'm being careful about what font I sell to my client. If they're like, Oh, yeah, it's great. Then you go and try and use it. Either going to get in trouble or it's going to cost, maybe it's in the budget. You got to make sure you've got the rights to use it on your web let's go back to the free stuff that's built into Google. Basically, fonts.google.com is where they all come from. They're all preloaded inside of Figma, and that's all you really need to know about that. But then you get to the what fonts do I pick? You might have a corporate fond already and you're looking for a font that goes with it. The term you're looking for is font pairing. If you're new to fonts, this can be super helpful term and you can search the Internet for Google pings. I'm in the figma.com slash Google Hyphen Fonts and Figma have done some font pairing and it's just going to show you two fonts together. Let's have a look at a font that I use quite a lot. Railway. Let's have a look into it, get the pairing. What they're going to do is like, right, you like Railway? Which fonts are going to go with it? Do you want a Serif font, which is the ones with little feet or Sand serif? Doesn't have the. Really like this page because it doesn't give me very good examples. You can eventually get there. Watch this. If I open up Railway plus, let's try Merryweather. It's opened inside of in my browser. Basically, I'm using Figma now. It's copied into my drafts and they've given you examples of A, this is a Merywther it's just got some basics in here. What I like to see is just search the Internet for interesting font pairings. I just clicked a bunch of Google results. One of them is from Google itself and it just shows you, Look, these two fonts going together might be for you. What fonts are those ones? It's not a very good site. Sites that I like fontpa.co. This is quite good. You can start to see, right. All right. Which ones do I like together? You might be at that concept stage or logo design stage, and be like, oh, I like these two together. I like it even more when there's examples. I just found this one. Just a random blog page. So this may or may not be here when you get back. But it gives me some more examples. You're like, oh, I like Playfair. Which one do I want to go with Playfair with a Sands here font? What's this? This is Playfair pass. What's this one? Source Sands Pro. Body copy for source Sands proro and maybe I'll do my titles. Fear. Can you just go around and go, I like that. I like that. Again, you just work your way through trying to find good pairings. You don't even need to install them. Let's say we do Oswald here. If I go into FIGMA, you will find that if I go into here and just type in Oz, there it is there Oswald. I can start using it. You'll have all the weights. There's only a few weights here, but you get the idea. All I'm back from the future. I just want to add this to the video. People are asking about fonts.adobe.com. You might already have an Adobe license and you're using Adobe fonts. Can you use them Figma? You need to download them and install them using the way you normally do it with Adobe fonts. If you've got the Creative Cloud app, you just double click them, and it will add to your computer. If you're using the browser version, like in the last video, you need to have the font installer installed for them to appear in the browser version of FIG. That's it. The only catch with FIGMa sorry, Adobe fonts is that you get use of them because you've got a paid Adobe license. So you need to maintain the license to keep using their fonts. That's the one caveat with them. And also, if you share it with another designer, they also need to have their own license for the font. You can't just give them the font. But it's really common to use Adobe fonts. Don't be scared of them, but you just need to make sure that you are actually an Adobe subscriber. All right. Back with the video. That's just a little note on how you make sure you got the right fonts to use. If you've got a paid font, make sure you get the license for it and if you're going to use a Google fonts, how to match them up so they look cool? I've been doing design for 20 plus years and I still go off when I'm looking for stuff. Especially if I get given a font from a company, I'll go off and try and find a font pairing with it so I can keep their font, but also have some extra font or fonts that I can use throughout the design, spice it up a little bit. I go and look at font pairing. I like Oswald. I don't really like Oswald, normally, because it's normally in a bold. I'm like, but extra light is really tasty. Look at that. All that is it. TastinessO. I'll see you in the next video. 42. What Common Font Sizes Should I Choose in Web Design?: Hello. Welcome. Hey, we're going to talk about font sizes. There are some really common sizes to use. You can use any size you like. But there are some common ones to do in web and app design, and I'm going to share those with you. Then we'll spend a little time just actually applying some text to the first parts of our design. We'll do our kind of hero box, and these cards down the bottom here with some text in it. Alright, let's jump in and get going. Right, so let's just stat some fonts. I'm going to click the Tiki, click in here and I'm going to type in hitting one and I'm going to put in a hyphen and then a sample. It doesn't really matter what you write in here. I'm going to hit escape to go back to the move tool so I can move it around. With it selected, I'm going to say, Alright, what font am I using? I've decided on something called Source Sans. I like it. Source Sans Pro, and for my headings, I'm using a bold size font. Now, what size should your heading be? So you want a range you can work with. Often, the biggest one is 72. That's quite big. Up to you. Often that's heading zero because I don't use it very often. The next best size and the big size for a lot of pages is going to be 48, that's going to be my heading one. Why am I naming them? Just so that we can have some rules, and we'll create some styles in the next video where we've got I'm going to be consistent with my font sizing. It's really common to have 72, 48, 32 is the next size for heading two. Then I've got a heading three. What size should that be? These can be any size you like. It's just really common to use these sizes. Once you get down to heading four, which is 18, often you don't go any lower than that. You could have a hitting five. It's up to you and we're going to go hitting four. Then the next one is a body copy. This one here often it's called paragraph. You can call it body copy, paragraph. Come on, Dan. This one here is normally always for a website, 16. That's a really good starting size. Some fonts seem bigger than others, so you might adjust this. You might have to use 17 or 14, whatever it is, and my body copy is going to be regular. That's what I'm going to be using. Often good just to have a sample like this so that when you're designing, you've got some consistency. I'm just lining mine up now because But having these on the side here just so you can pull from and just go I need a heading three, and then start changing it. I'm going to do that with my marketing text now. But you can skip along now. These are the common sizes. You can do whatever you want. One last thing is often they'll call them, I'm not going to use this one here. To big. I'm going to do I'll say an H one. That's the shorthand for a heading one. If you don't web for any time, you'll know what these are. If you haven't just shorthand for clearly heading three. And paragraph is called P. Those are my sizes. You might have another one for terms and conditions that's small, gets down to 14 or 12. The other thing to do is that make sure you're at 100% when you are looking at fonts for a browser because it's going to be representative of the screen when it actually publishes. If I'm zoomed out too far and go, Oh, yeah, I definitely need heading zero because it doesn't seem that big, you're quite far zoomed out on 50%. Just be at 100%, which is shift zero on my keyboard, goes to 100%. And if you're on a mobile device, remember you need to either zoom out to roughly the same size or do some testing on your mobile phone before you go in late. Come in to sizes. That's it. I'm going to do a little bit of production now, so you can move on if you just came for the font sizing and we're going to build out a little bit of pages because there's been a lot of theory. We need to actually do some stuff. I'm going to do is on my home page, I'm going to grab my frame tool. I'm going to put in a basic NAV and I'm going to pick one of my colors. My fill here, I'm going to go to my fill colors. I'm going to go to my little swatches here. Do we do that? Anyway, click on the four dots. I'm going to pick any of these. You can get to it either way, either go that and hit plus and then go into the colors on this page. You might have to switch this or you can with it selected, go to the little option here and say, actually, I'm going to use this primary color. Put it in a Nav. I'm going to turn on my columns. Who remembers what the shortcut was? You don't remember Shift G. That's right. I'm going to bring this in here for my hero box. This is the main marketing message part. It's going to have an image on it and a bit of text. I'm going to turn off my columns now, Shift G. I'm going to add my heading one in here, I'm going to put in my marketing. I'm going to have for mine, I'm going to say minimal. I'm going to go all caps. Actually, my caps lock on my keyboard is broken, but we know how to fix that. So we're going to go minimal design, maximum purpose. You're going to have to come up with your own marketing message when we do a class project to it, but that's what I'm going to use. Remember, I want to make these all caps. I'm going to select it all. Actually, in my shortcut to rule them all. Shift K is not going to work when I'm in my type tool. So I'm going to do is hit escape to come out of it. It's still selected, but it's not highlighted the text. Now I can do Shift K. It's not Shift K. My brain is gone. It's command K. Control K on a PC. And I'm going to say uppercase and make them all uppercase. What I'm going to do, you don't have to is I'm not going to go for a secondary font. What I'm going to do is just do a bold for titles and not bold for paragraph text. You could have a second font, that's totally fine. You might have a big kind of exaggerated one for the hitting and something a bit more simple for the body copy or vice versa. What I'm going to do is just go for a light version. That's how I'm going to get round of kind of having two fonts. I'm just going to us the same font at different weights. So I got my marketing message in there, and what I'm going to do is do my little feature boxes down here. What I'm going to do is turn a grid back on. I'm going to grab probably just copy and paste that, and I'm going to do the feature box. They call them cards or feature boxes. And in here, I'm going to change this to be a different heading. I'm going to say you are, what is this one? This is 24. That seems about right. 24, it's mixed. I'm just going to go to the bold, and I'm going to we're going to type in some feature box titles. We could use Placeholder text here, but we're in the high fidelity version. I've just got mine on another page here. I've typed them out. I'll get you to do it a little bit, but this is going to be my heading for this one. Heading. It's going to get down the bottom I'm going to put an image on the top here. Now I'm going to duplicate this. I'll go one, Command D, control the NRPC and I'm just going to type these out. I'll go in fast mode. I'm going to select all of mine. I'm just holding shift and double clicking them and I'm going to say you are centered in terms of the alignment of the text. When I add more text, instead of going out from the left, it's going to go out from the center. You know how centered worked and I'm going to say you and you are going to be this one here, this alignment. You were together. That didn't work. It's put it underneath here somewhere. It's by default. This is a good interesting thing. With these both selected, actually, no, with just the text selected inside of the frame, I should be able to center it. There you go. That's a good thing to know. If they're on top of each other, you can center them. But what I'm going to do is I'm going to say, I'm just clicking on the text, I'm going to center it and it will center it within the frame. All right. Is there anything else I want to do before we move on? That is going to be it. That is how to pick font sizes. We've built a little bit of our design project now. I'm going to go Shift G to turn off the columns. I need to play around with the spacing, but that's enough for this video. We'll see you in the next. 43. How to make Character Styles in Figma: I Hello. Hey, in this video, we are going to make these, the type styles. We've made our headings in the last video. Now we're going to turn them into reusable styles like the colors we did earlier, so that when we adjust one, let's do it and change the font. You'll see that all of the use cases here change. Brush script, ooh. Undo undo. Let's jump in and learn how to do text styles inside a Figma. All right, turn them into styles. Let's grab our first one here, KOH one, and we go over to typography and just like color S these little dots in the corner, these are the styles. I'm going to click on it, and I'm going to say, let's add one. What are these other ones down here? They are from have a look. Material three might be material four or five depending on how far in the future this is, and that is why Google does its fonts. They use this design system called material. Instead of calling it Android, they call it material. If you scroll down, you will find all the IOS ones. If you are doing app design, you can just skip and start using these ones. IOS, and it's probably it. Anybody else got any stuff in there? We're going to ignore these. We're going to create our own. Let's start again. This selected, we're going to go to the styles. We're going to say plus, like we did with the color and we're going to say this one here is going to be my heading one and you can add a description if you need to. It's clear what we've got and where to use it because it's just the heading, but I'm going to create the style. All right. Why is that good? It means you can come around and go, right this one needs to be the heading one style. I don't have to go figure out what the sizes and what the weight is. I can just go into my styles and say, you are heading one. There it is there. Boom, too big. Okay, but you get the idea. You can create styles. If you have nothing selected, you'll see all the styles appear with your color styles. Hey, guys, I'm going to do heading two as well, and I'll show you one of the perks. Let's create it plus, let's call this one heading two. Okay, I'm going to go and apply it down here, I'm going to hold my command key and shift. Remember, we looked at this before. If you hold the command key down or Control key on a PC, it'll dive into this frame that has this text inside of it rather than double clicking it. But if I hold shift as well, it means it will select more than one thing at a time. I just go click click, click, click. That's command shift on a mac, control shift on a PC. What I'm going to do is I'm going to say you are now the style of heading two. Oh. The style is not uppercase, there we go. I'm going to pretend that was part of the class. What we're going to do is we're going to say heading two, in fact, all my headings are in lowercase. Let's say that's going to be my rule, so I don't have to change it later on. To edit a style, the client comes back and says, needs to be uppercase and a different font. That was my original plan. What you can do is go ahead to your styles. I got nothing selected. Nothing selected, I can see my styles. I'm in design, not in prototype, and I can go to this one here heading two, and I can hit the little edit style button. There's not a lot there. I can click the little dots and say, right, I want these to all upper case. Can you see that change that change, that change. The client might come back and say, I don't like sauce Sands Pro or maybe it's just not heavy enough. We want it to be the black version and you can see they all come along for the right, or the client comes back and says, All right, it's time for Comic Sans. And you quit because you can't live with comic Sands on a purple background. Did you get the idea? Undo quickly. I'm going to it there. I'm not going to go through them all. Now, one thing I want to do before we go through and create them all is you might have two fonts. It'd be not common, but you might end up with two heading styles, one that is maybe more informational and one that's more marketing. You might have found a font, another great tip is, if it's got a heading applied to it, a style applied to it. Sorry. You can go over here and say, this heading one, I can change it. But also I can break it. It's still the right size in the same font. It's just not connected to that style now. If I go and change this style, let's go and change him. He looks the same, but if I go and change it, hitting style and I go and change it to light, you'll notice that that changed, but not this one because I broke that link. I'm going to undo that, go to the style. I've broken the link, and I'm going to can't remember what I'm doing. Please oh, yeah, that's right. We were creating a different font size. I'm going to type in here all fonts. Up here, I'm going to say popular fonts, Google fonts. I actually wish there was better filters in here. It's not. I'm just going to type in hand and hopefully find a hand drawn font. If I can type hand. Come on, Dan. All right, so I'm going to go for this one here, Figma hand, fast hand. Let's say that using fast and I don't like it. Please hold. That I like, another hand. That's cool. Let's say that you want you need a regular information font heading, and you need more descriptive advertising marketing style heading. What you can do is you can have an H one, and you can have H one you can name it anything you like, but we're going to call ours one H one Alt for alternative. When you make that style, you can do the same thing. I'm going to make a style hit plus, and I'm going to call this one heading one, Alt. Just so I've got two of them, so I can go up here and say, actually, this multiple purpose or maximum purpose can be the style of this heading one Alt. This one here is going to be heading one regular, which I need to make up a case. So I'll go through here and restyle all of these, I might as well. Starting to like this hand thing. I'm going to go do that and work our way through just making all of the styles. You should have five of them in total. I'm going to end up having six of them because I want this alternative heading style. Actually, before we do that, one thing that doesn't come along with the heading style is watch this. I do a couple of things. Let's go through, make sure it's heading one. I'm going to go and edit this heading. Actually, I can't here. That's another interesting, all sorts of interesting things popping up. Here, if I've got this one, which is not a style, I've got lots of type options. If I click on anything that's already a sample, can you see, I've only got things like alignment and some line adjustments. That's it because it's all tied in with the style. It does limit it down. You can break it and keep moving. What I'm going to do is first of all, update this one, nothing selected, I'm going to go to heading one, I'm going to say, you need to be all up aap. Nice. So I've got this one. Let's say I'm going to grab this and put it onto a different page, but I need to be a different color. Obviously, white is not good here. I'm going to make it red. And with nothing selected, if I go and adjust my heading one now, watch. I need to change the font size of it. Let's make it really small. I do that, you'll notice that that got really small, but it kept the color. So the color doesn't come along for the ride. It just adjusts the actual mechanics of the font size, canning, leading, that type of thing. I'm going to go through now in fast mode and create all of my I'm going to undo all of that. I'm going to create all of my styles and I'll see you in a sec. Wait there. All right, so I've created a bunch of them. One of the things that I'm going to I want to share is that this font at 100% gets really at the size. I'm not even going to create a style for it just in case the next person goes, oh, I'm allowed to use heading four. You're not allowed to. I've decided. Can you see how this font and here? They're the same size. They're both 48. This one here is harder to read at that size. It's the same height. It's a lot more narrower. I made a decision to not make it really small and I really don't want it used as a paragraph. M dings. If we look over here, I've got the heading for one, two, and three, but not anything else. Another thing is that these styles are made in the order that you create them or they're listed here. We need to drag them around. I want heading one, two, I want three up there, four up there. Then probably paragraph at the top because it's the one I use the most. One, two, three, four, and then I've got one, two, three for these alterna don't have to have an alternative type of font for your headings. You might have one for your paragraph or might be an italicized version of it. But now we've got a style and the cool thing about them as we use them through the document, if we need to make adjustments, we're going to adjust a really big file and actually, you'll find out later on is that we can do it across documents and share with other teammates. We can all share these styles, which is really cool. Thing you need to maybe make sure of is that you've actually applied them. Sometimes you make your style after and it's the same size, but it's not connected. I need to make sure that this bit here is connected to my heading one, that is, this one here is connected to my old heading. This one here is the right. These are all heading two, so I'm all good to go. This one here probably is as well, but I don't need you. That is it. We made some type styles or character styles inside of Figma. We are so professional. All right. I'll see you in the next video. 44. Lorem Ipsum & Placeholder Text in Figma: In this video, we're going to look at adding placeholder text. It's just used to hold the place. If we don't have the copy, it's just mixed up Latin words. I'll show you good places to get it. I'm going to show you a plugin. It's really cool it's called Content Real. It does this placeholder text, but it also allows you to go through and add a whole bunch of fake names or dates or what else we got? Email addresses? Where's that? I was here. Anyway, currencies, it's a really good random generator of content. Let's jump in and check out how it works. All right, so let's put in some placeholder text. I'm going to grab the T key and click and drag out because I want my marketing message then to have a bit of body copy. And depending on the last font you use, it might be set to probably heading one. One thing I didn't show you is you can actually just click in here and then click on this to change it. I'm going to set mine to paragraph. If it's not on this and it's broken, remember, you can go into here and say, I want this to be paragraph text. Mycosa flashing in there. Where do I get Laura Nipsm from? It's the rite of passageway that's this side here, lipsum.com, full of ads. It's ugly. But it's where a lot of people just get dummy text. You can go into here and say, All right, what do I want? I want five paragraphs. Actually, I just want one paragraph, generate, I just gives you a bunch of texts you can copy straight out of the browser, ignore the ads. And paste it into here. It's just Latin words all mixed up that don't mean anything. The trouble with using this sometimes is that when you send it to the client because you don't have the texts from the copyright yet, they go, What is this? It's broken. So you might have to explain it. But it is just really handy because you need to work on things like the line height and layout and give the copywriter some words to hit. If you've allowed space for 200 characters, then they can work to that. We use placeholder text just to fill the hole rather than I don't know, what did we do earlier? I think X one of the cool things though, is there is a plug in. There's always a plugin, there's a really good one. There's loads of them out there for a place order text. Let's say that I want the same down here, I want a bit of text. I'm going to hit my type tool. It's going to go down here. I don't need very much. I'm going to make sure I'm not eating two on paragraph, and I'm going to bring in a plugin. Plugins are hiding down here in your actions panel, I'm going to go to plug ins and I'm going to type in this one called Content Real, Content Real. If you type in uropsm or Place Auto ticks, type in Lam, you will get lots of them in here. Again, you looking by how many users have used it and liked it. That's easy way to know which one's most popular. But content real is super common and really awesome because it does a bunch of different stuff. Let's say here, I can go to text, and I can say, with my cursor flashing in here, I'm going to make it left aligned. I'm going to say give me some Lornopsm. It's in there. Don't need all of that. I just need that chunk, put a full stop at the end. And there you go. There's a plug in. This plug in is pretty cool because it does other things as well. I'm going to and double click him, make a copy by holding down my optional key. I'm going to type in just the word sample. I'm going to make the size of the box. We looked at this way earlier. Let's recap. The moment it's a fixed height box because it goes all the way down there, I want to change it to this auto where it just is the height of what I've got typed in there, get rid of that. Make a few copies of it, Escape to Get Out, drag one out, holding the key down, Command D DDDD or Control DD DDD. I'm going to select them all. What is he doing? What is he showing us? Under text here, there's this one full name. If you need a bunch of random names in your mockups, you can just get them in here. Or maybe you need US addresses or email addresses, or dates. It's really handy for lots of things other than just Lauren Ibson. I'm going to undo all that. I don't need any of these, but there you go. Placeholder text. Good while you're working, fills a gap, lets you continue designing, even if you don't have the text. Really great for your wireframes. Just use them for the mockups because you don't want to start adding text because it's not about that at the wireframe stage and we learn another plug in. I'm going to close that one down. All right. Onto the next video. 45. Using AI To Create Text in Figma: Here. Hey, I'm going to show you how to use Figmas AI to create texts for us. We gave it a prompt and it came up with some interesting texts for our leather wallets. It's easy to use. Super useful. Let me show how it works. First up. These features at the moment, are part of the paid Figma program, so I'm switching to my paid account here. We are probably going to stay in the paid account for the rest of the course. I'll try and point out anything that is paid and not free, but I don't want to avoid the paid features all the way through the course. If you do have the free account and you are going to stick to it, some of the videos you can just watch to get a sense of, like, this is good. This might be worth doing or it's good to know, but I'm not Okay, so I've switched my pay account. The difference really is, if you're on the free account, you see this icon here changes, you're like, what does that do? This is your Actions button. We've gone in there for plugins and shortcuts. This one here is the same thing, but it's magical. That's a screenshot I took of the free account. Just for instance, so we're going to use this now with the magic. Oh, it's got some AI built in. What we're going to do is text and copywriting. I'm going to select all of this, delete it. My curse is still flashing in there, to hit this magic button and I'm going to use the rewrite this option. It's a Beta. This will change. They'll rename it *****. But have a look for the writing option. I'm going to click rewrite this and I'm going to write in something. Actually I pre wrote it. You eat there. Here we go. Write a sentence for the hero box describing the minimal leather wallet design. That's the thing I'm working on. I need some copywritten done. I'm going to click rewrite, and it's going to make something. Oh. Nice. Okay? You can use it for copywriting, like hGBT or Gemini or Claude or whatever AI tool you might know. This is your first touch of AI. Pretty amazing. You can do things like, Alright, I want to make changes. In this case, I want to make it more casual, please. Click Rewrite. Yeah, it's more casual. You can do things like make changes and shorter, longer. So make this two sentences. Do I spell it wrong? Just two sentences. There you go. I'm going to undo I like the one I had before. Undo works. Cool. AI is built into figma in different parts. We'll cover a few of them. But this rewrite stuff is great for place order texts or even just copywriting, something that I'm not great at, and I need to put stuff in here. Also like it for just tidying up. I know my intent, no detail left unconsidered. I don't know. I just made that up and I was like, I wonder what AI will say just to tidy it up. Click on this and then you can just type in rewrite, and then type in tidy not writy. And then click Rewrite. It'll help me with my grammar and my spelling. I'll probably throw in some Mdashs in there. Seems to be its favorite thing to do. But yeah, I find that good for just tighting up my work as I work through. Love it. This box here needs to be auto height. What they actually call it. Yeah, auto height. The ones fixed size. Cool. All right. That's AI inside of Figma. You can use it instead of placeholder text. If you're looking to actually put content in, will be useful. But it will be different by the time you get here. It's new and fancy and let me know in the comments if it's completely different and I'll come back and rewrite this one. Hopefully, it shouldn't be too hard to find and get going. But every time I log into Figma, they've changed the way in the interface and the way it works. There you go. All right. I'll see you in the next video. 46. Useful Things To Know About Text in Figma: Hello. It is mildly advanced type tips and tricks. Stuff you're going to need for the course. We're going to go through and show you how to play with the letter spacing, line spacing, paragraph spacing. We're going to make a little mock up logo, lists, links. I'm going to show you how they work by clicking them. I work then. Yeah, just lots of little things that we're going to need for the course and just now that we've got some skills we can kind of get into. So let's jump in. All right. To get started, I'm on my hyidelityHme page. I'm going to select this bit of text in here. I've just copied and pasted it a few times. So we've got a few extra lines to work with. I'm also going to switch it out to this auto size box, auto height so that it gets bigger and smaller as my text. Let's look at a couple of mildly advanced features. A line height here is the space between my lines. So at Auto, if I click on Auto, it is a line height of 20. That is based on this font size being 16. The default is pretty good. You can go and change it. So basic rules is about half of what the font sizes generally looks good. If you've got 16, eight works. Sorry, a half plus the font. 16 plus eight. Okay gives you 24. It's not a complete science. Auto is actually really good. It's a little bit tighter, up to you, but that's some basic rules. The other thing is in here, you can use percentages, so I could use 150%. 150. If I just type in 150, it's assuming I'm using pixels. I got to type in percent, and that will give me the same measurement. It doesn't really matter. The cool thing about this though is if I increase this up to 20, it will increase the line height. Undo that. If you want to get rid of it and go back to Auto, just delete it out of here, delete everything and hit Enter, it'll go back to Auto. Let's look at the difference between line height and paragraph spacing. I'm going to put a return in. I put a return after this, you might be tempted to put a second return in bad. That's naughty. You're not allowed to do two returns. The best way to do it is boot one return, and I select all of my text. I can go into these advanced features, and there's an option here that says paragraph spacing. So this is the spaces, not between lines, but between your paragraphs. A paragraph of you have had a return. So again, I'm going to put in anything you like. The rule for paragraph spacing is about half of what are the font sizes. That's why I got confused 16/2 is eight. Good work, Dan. That ends up looking like a nice paragraph break. It's up to you whether you feel like that is good. If you keep it in multiples of eight, it can be smaller, so it can be four. Anything that's divisible by eight or times by eight is useful. That's just later on when we're lining things up. When we get super advanced, maybe in advanced figment course, we'll go through the eight point grid lining up stuff. It's a bit nerdy, but just as a rule, try and keep your paragraph spacing eights or 8.5, so 12. Something that works, again, you can delete it and hit Enter and. You can set it to zero to go back. You can't use percentages in here. You might be doing something as collapsible, watch this fi, go to this one here, and I go to fix height and I need to make it smaller. You can see it just goes out of the outside. I just flows out. What is even the point? It's so that you can go into here into topography and you can truncate it. If you see the dot dot dot there, you want to add probably a button out, says Read more to get it to open up. You can truncate the paragraphs. Other things that are useful, there are bullet points. I'm going to go back to auto size, and I'm going to put a return, I'm going to go into grab. List. Lists are hidden in here as well. They weren't in figment. Now they are. You've got bullets and numbers. You can do list spacing rather than line spacing. Is specifically four lists. Again, I can put in eight or maybe four in this case. Now I want this to have paragraph spacing and I want it to say it is, what do we decide eight? Nice. I want to show you letter spacing, so I'm going to grab my font, and I'm going to type in kind of a placeholder logo. You could go and design your logo in Figma or somewhere else, maybe later on when you get your skills a bit better. But if you have Illustrator skills or some other software affinity, Canva, you can go and make a logo. It's not typical to make logos in Figma, but it can do it. Okay? So what I'm going to do is I'm going to show you this. I'm going to pick my font. I like the Zen thing for my logo here, and I'm going to do another bit of type. Okay? Type two, and I'm going to put in watts. Walts is going to be that sauce sands that we used earlier. Sauce. Here it is Source Aspro. All right, escape, get you back to the move tool and I'm going to kind just line them up up here. I'm going to go and size it. Remember, how do I size fonts? I just want to drag it up because I don't want it to be a specific size. It's a logo. I'm trying to just drag it. That's right. The ketol just hit the K key on your keyboard and you can scale it up. I'm going to make mine about that big and my wallet is going to be a little bit smaller. Just not on the ketol Dan. All right. There we go. Alright, so this is my little mock up logo. What I want to do is play around with. Can you see this annoying gap between here? Happens a lot with my name, Scott. The two Ts end up getting separated out. What I can do is I can select this first one, and it will affect the space just after it. Over here, I've got letter spacing. Watch this. I can just click hold and drag it, up and down for the letter spacing. You see what I'm doing here? Oh, magic. You might decide the C could be just a little bit closer because it kind of wraps around in there. So fonts are better. Oh, do I like no, that's got I'm just messing around with the letter spacing, often referred to as canning or tracking, letter spacing here. Another thing you can do when you are customizing fonts is I'm going to keep a version of this, so I just copied it. This one here though, I'm going to say, right click, there's a way of outlining. Where is it it's outline stroke. What I mean. What's happened here is that this is now not a font. It is shapes that look like a font. The good thing about this though, is I can't change the text, but I can go inside of it. Double click a couple of times and I can actually start to see these little points here. I zoom in even further. And see this, I can grab Shift, both those little points. You have to be in quite close to mess with the points. Look, I can start messing around it. I can say, I want this to join there. I'm just going with the flow here. What am I doing? I'm not sure. Shift clicking both of those, moving those across. I'm going to use my arrow keys just to tap it along. You can see you can start breaking apart fonts. Member command click. We'll go straight into the thing that you're working on. Sometimes it's easier. That. So a little bit more. All right. That's cool. All right. Outlining fonts just turns it into a shape. I use it quite often as well down here. Let's say that I want a little plus, let's have a look. Sometimes you use fonts, that one there was meant to be a font, Scott, I just wanted to mess around with it. Let's grab the circle tool, click holding down, grab the ellipsTol, hold Shift to drag it out. I want no fill and I want a stroke. Let's drop shadow. Stroke it's going to be white, and I'm going to make it a weight of inside of this, I'm going to add the type tool. I'm going to click once just up here, I'm going to use the plus. I want this plus to be bold. But I don't want it to be a font anymore because it's really hard to line up. Can you see here, I'm going to grab my Ktol, scale it up and it works. The problem with it, though, is if I go and change my fonts, just some' like, I'm going to use comic sans, I'll go and change this one because it's a here can be a little hard to line up because it's in a big type box because I'm not using it as a font, I'm just going to right click it and say, create outline stroke. Now it's more just a shape. I can decide on, I'm going to go into it and decide that I'm not sure why, but adjust it, but more that I just like it as a shape. Because then it's easy to grab this and this and line it up in the center rather than a font. Let's try and do it with a font. Will it work? I better not. Okay, I grab this and this and I go that way, and that way, you can see it's a little bit off centered. So I'm going to go back to my lovely font. Was it off centered, Dan? Let's all pretend it was. Okay? So sometimes you just want the font to be shape. Y scented, centered. And let's group it. I'm gonna frame it, go inside of a frame. Alright, we'll use that later on as well. So when people click on this, it's gonna go to, like, the next page. Alright, other interesting things about fonts, while we hear nerd out. Watch this five got this text here, and I need a link. I'm going to put in a link with the square brackets for no good reason. I'm going to select this, and there's an option over here. Can you see next to text there's a little special thing that says, Hey, you want to create a link? Okay? Where is it going to go? We're going to go to bring our own laptop, Head Enter. I'm also going to make it blue just because I think fonts need to be links need to be blue. My case has to be slightly brighter than the normal blue because I'm not sure I'll see it against the purple. Actually, it's not really working, but I'm also going to select it and go. Oh, I added a fill. Did I had a fill? No, it didn't I select all of this and I can also go bold, so this is another shortcut. Instead of going and finding the bold version of it, that's totally fine. But most fonts, if they have a bold, you can select it and just go Command or Control B. Same with italic. If there's an italic in the font, if it's not, it won't B, I use underline, and I think come on shift X. That's it. Command Shift X or control shift six on a PC, we'll do strike through. Those are nerdy things that work across any thing on your computer. Word, Google Docs, emails, Command B, I, UX. You can find them in here. Remember, reminder you've got keyboard shortcuts. You can go to text and you will find the stuff where we got Underline. There's the create link that we just did. There's the shortcut for it. But bold and italic underline strike through. The cool thing about them, though, if you learn them, they're the same on all desktop publishing. All I'm going to go away from Underline away from italics. Let's give it a preview actually just to see how it works. I'm going to go, Oh, yeah, because people won't know how Link works, Dan. It's freaking out a little bit, like, Hey, you're leaving Figma. That's okay. There you go. Links work. Not sure where I had to prove that. One last one that I think is really useful as a shortcut, especially when you're not sure on the fonts. I've given you some kind of boundaries for fonts, what should it be? There's lots of times where you're just not sure. You can have the text selected and you can use command shift on a Mac, control shift on a PC. And can you see down your keyboard, you've got a greater than and less than. On my keyboard, they're mixed up with the period and the comma. You hold those two keys down, command shift or control shift on a PC. It just does the font size. I love that. Because I'm at 100%. I'm like, needs to be bigger. How much bigger? Just tip, tip, tip, tip, tip, do. And that again is one of those tools that works in pretty much all desktop publishing software. You can just grab that and make it bigger. That guy needs to be bigger. Now, this guy, I'm trying to use bigger, that only works with fonts, right? This is no longer a font, so I have to use my ketol and scale it up. You Nice Chef click. Should that be scented? I'm not sure. I'm going to use some rakes to nudge it around. I like that there. Wow. Cool. All right, my friends. That is it. That is advanced fonts and tricks and tips. Stuff we're going to need for the course. Let's move on to the next video. Before he shows us how to use Links again. Look, it clicks. I goes to our website. Uh. Alright next video. 47. Class Project 08 - Text: Alright, it's time to put some of what we've learned over the last few videos into action. Class Project Number eight, the text. Okay, so I want you to create a little logo. It doesn't have to be fancy unless you want it to be. You don't have to design it in Figma. Actually design Figma. I want you to practice with all the different type tools that we've learned. Maybe outline it, you don't have to. And we want something up in the top left hand corner. Doesn't have to be fancy. I've done a couple other easy lockups where you can just do with fonts just as examples. You might be a great designer and you can design something nice. If you're just looking for something simple, just the text with a weight difference and a color difference, something simple. Up to you, but I want it up on your homepage. On your homepage of your high fidelity, I want you to do this basics. You need your marketing message and some placeholder text, and some cards which we'll do in a sex. Basically, something like this. Navong the top your hero box, your main marketing message. Come up with something. It can be lame, it can be very thoughtful. You can use AI. I don't mind. Okay, and then some placeholder text. It can be urinopsumO again, you can type something, think of something, use AI. I don't mind, but I want you to use your styles. And what I want you to do with your styles and your color styles is I want you to make a style guide page. Figmaples can get super messy, we're going to create a page called style guide. I'm just going to copy a color palette over to it and our fonts. I want you to make up these, and I want you to make sure they are styles. You don't need to have two of them. You might just have one. That's totally fine. I want you to take a screenshot of this whole thing and your homepage. On your homepage, I want you to also make a card. I'm going to go back Ah, Do, Hi Fi. This card here. I've made this quite generic one. I want you to have a little research about what you might do. Actually, I want you up there. Copy it, go inside this one, paste it should go back in the right spot. Okay? So UI cards is a term if you're new to UI design is I've got some examples in your exercise files called UI card examples. Just some examples that I thought were kind of cool. I want you to go off and have a look yourself. Okay? So there's that website mob and that I showed you in the last one. It's pretty good for looking for UI cards. Go to dribble, go to Pentrs, go to Instagram, go to wherever you normally go for your looking for stuff and type in UICard examples or just UICard. Just see what other people have done. Really common part of web design and app design and figure something out. You can copy what I've done. That's fine. Or something that's in the examples here, but just something basic. It doesn't need images just yet, and I want you to lay them out and I want three of them. I'm not sure I like them. That doesn't look good there, does it? Back to where you were. There you go. And have three of them. You might have to turn your guides on. Don't hitman H on a Mac. It's gone. There you go, you back, and it's Command G then. No Shift G. I want three cards on the bottom here. You might play around with the spacing to get everything looking nice. Need the same one at the top. Down the bottom here as well, let's come up with three features that your product might have. Again, don't spend too long thinking about the perfect features. I've used Lauren Ipsum down the bottom, and we've just got an image here. Gag the image icon before we do images in a bit. A is that it? Let's check. Move your styles to a style goodePageRsearch, UI cards, have a little look. You can decide whether you want three or four feature cards up to you. Examples in the exercise files, deliverables. Take a screenshot of both your homepage and your style guide page or at least the chunk that's in it. Then I want you to share on the assignments, normal, projects and assignments, but I also want you to share on social media now. We're at a point now where you're like, It's not just all the same stuff. This is boring projects, boring. They're not unique to you and your product. Now we're at that point. I want you to share on social media as well. I love seeing what you've done, and it's a good public like, Hey, this is what I'm doing. I'm doing this Figma Essentials course by this really handsome kiwi dude from New Zealand. And this is what we're working on. Plus, ask for feedback and give feedback. It's the trade off. I've got people helping me, bring our laptop experts to do responses, but it is hard to get to it. We have we've crossed over 1 million students, so you can imagine there's quite a lot from us. So what we do now is we ask you. We make sure that if you ask for an opinion, you have to give two, it's more helpful for you. Being able to articulate yourself to other designers, getting started is a super important skill, especially when you have to start defending or explaining your design choices when you on the other side. Put yours up, ask for advice and make sure you find a couple of other people's one and give them advice. It might be really bad at the beginning. You will get better. The colors are good. But have a look at what other people are doing. Like, I like the contrast. I don't like the contrast. The legibility of that isn't great. Just make sure you do it with a bit of humility. Everyone's just getting started. What I like to do is, it's called the **** sandwich. I'm not sure we can use that. You start with a positive. I like what you've done for this particular bit. Then in the middle, the S part of the sandwich is, what I would do next, what you might do further, or I think there is going to be a legibility issue, but I think it's a great first step. Can you see the sandwich bit? Positive on the outside and critique in the middle. You know what you're doing. Anyway, that's the project. We're going to build out our homepage, put out our Star go page. Even if you're hating your fonts and hating your colors, don't worry. We can change these later on. We're really learning the tools here, so jump in, have a go, and I'll see you in the next video. 48. Text on a Path Curved Text in Figma: Hi, everyone. In this video, I'm going to show you how to do type on a path. Look, we're typing on a path in Figma. Let me show you how to do it. All right to start off with let's draw it on the edge here rather than inside the frames. It just makes it a little bit easier while we're working. And it's kind of a transition video where we go from type to a bit of the drawing, which is the next section. We need a bit of both because we need a curve. The best way to do a curve. Well, easiest way is we're going to switch to this drawing mode down the bottom here. We've been on design. Okay? We haven't been to Dev yet. Oh, what's in there? Don't click on that. Go to draw mode, which is this one here. Can we get some dry looking things. Now we're going to start with the pencil. Grab the pencil, pick a color. I've got to pick a white color because I can't see it on the background there. Up to you size wise. This is the width. Woo click on it again. This is how thick the line is. It doesn't really matter for what we're doing. What we're going to do is click hold and drag a wiggly line. Figma is not good at drawing smooth lines yet. I want there to be a smooth option. Oh. Just draw something. Draw fast. Ready? Draw fast. No. Draw fast. I had one that was good. That'll do. Okay, now we're going to grab the type tool, all we need to do is hover above it. Okay, can you see the little icon changes to the little bend thing, click once. And now we can type on a curve. It should end up in the right spot. If it doesn't, there is an option over here to flip the orientation to be on the other side. It's not what I want. Other useful things is, if I go back to my move tool, you see there little dot. This little white dot here is kind of where it starts. You can play around with if it's centered, okay? So the little dots in the middle. Okay? So when you start typing, more text, it'll go from the center. What I'm going to do now is you can do any curve, so we could use a line. Actually, a line is not very useful. We could use star. Click out and draw a star, grab the type tool. Don't need the pencil tool, you don't need to actually be in draw mode. We're going to grab back to design and we're going to grab the type tool. As long as you just hover over it, it will I'll turn it into a path. Hit escape to come out of it. You'll notice that the star disappeared. You might before you do it is to copy it so that when you turn it into a path, escape to come out, I can paste it in again. Paste from clipboard failed. Undo, undo, undo, undo, copy. I was going to paste it first. Oh, failed. All right doesn't like copying stars today. This, copy paste. Yeah, I got two of these. Weird. Doesn't like the star. That's a bug for me, probably only today. I'll leave it in there because things like that happen. But normally just copy and paste it, so you've got two versions of it. Let's do something a little nicer. So I'm going to, I'm going to do with this text here. I do this second one, copy it, and I'm going to double click this and paste it in. You can see it kind of got two bits of text in there now. Actually, I just copied and pasted it so I had two different lines. I didn't really replace one of them. They were just two stacked on top of each other. What I'm going to do is I'm going to do this and I'm going to do maximum purpose where I want it to be. Something like that. All right, it's not what I want. But that is type on a path. I am going to do spend ages drawing this. Oh, that was a good one. Copy this, grab my type tool and you see it's got a white stroke, that white stroke will go away when it turns into type on a path. I'm going to select it online, make it a little bit bigger. The shortcut for that is command shift and square bracket. We did do that, didn't we? Yeah, we did Control shift, not square bracket, the greater than and less than sins. I'm going to do that and had escaped come out of it, and I'm going to get rid of you. And I'm going to move this over. It was better in my head. I'm going to rotate it around. Rotating anything with it selected. You can hover not on the edges here, just on the outside. Can you see these little double arrows? Okay? A we liking this? Oh, I'll do. Oh, it's terrible. Okay, let's type on a path. We'll be able to do a smoother line, once we get into the next draw section when we start using the pin tool. But for the moment, it looks smooth enough. And that is it. I'll see you in the next video. 49. Text Around a Circle Badge in Figma: Hi, everyone. We're going to make this badge with text goes along the top and the bottom. The sneaky trick is that it's actually just two circles. You have two bits of text on the same path. So you just make two of them, flip them over and line them up so they look like they do. It's a few other things I want to share in here, like outline mode and a few other things. So let's jump in. Okay, for this one, is the same technique as type on a path from the last video, but we're going to do a few little extras to make it. We're going to start with we don't have to be in draw mode. We just need an ellipse, which is the Oki, which looks like an ellipse. There you go. Oh, Oki and I'm going to hold shift so that my circle is a perfect roundness and not oval, and I'm going to grab the Type tool and I'm going to click somewhere around the top and it turns into a path. No surprise, Dan. I go to do 30 day 30 day. It's easier when you're doing badges to do all caps. If you start doing upper and lower, they just look weird. And up to you. Is money back one word? It is today. I'm going to select a more appropriate font size. I'm going to disconnect it from my heading and I'm going to use my other one, which is sourcens SurinsP. You can see I can play around with things like letter spacing, which is important when you're working around this. I'm also going to use a more appropriate font size, something like that to my letter spacing. If you want to get rid of whatever you've typed in, just delete it and hit Enter, Oh, No, just type and zero. A couple of things I want to do is I'm going to hit or escape or go back to the move tool. You get the dot. What I want to do is I want it to be centered and I want it to be about there. Again, font size, I'm going to go a little bit smaller. Now, how do I get it on the bottom, okay? The thing to know is that you can't have more than one bit of type on a circle. So I need two circles. So I'm going to copy this and paste it, so I've got two of them. I'm going to separate them out, and I am going to flip this over and then I'm going to rotate it around. So I've got the bottom piece. Okay? You can hold Shift while you're rotating around. Okay? You can rotate it over here. You can see here it says rotation 180, and I'm going to say, I need guarantee ger and my caps lock stopped working, so I got a whole shift the whole time. The only trouble with this is that you can't at the moment with figma, play around with where it sits on the line. At least I haven't worked out how to do it. It's a new feature for this. It looks weird, so I'm going to have to increase the ellipse just a bit bigger and you just overlap them. I snaps. It's a little hard to see where they are now because they're completely see through. There is a shortcut, okay? Or Command Y or Control Y in a PC. Whoa. What happened? It's called outline mode, and it is like an invisibility. No, X rays that I want. You can start seeing things and it's fundamental outlines. You can't see the text, unfortunately, you can for some of them, but not for these circles here. What I'm going to do now is, if I wanted to be perfectly over the top, you can see here it's just a little easier in this mode, and you just toggle Command or Control Y to line things up. Then I'm going to play around with it. That's it for type on a path. I'm going to go and just make my nice. You can follow along if you want, up to you. I'm going to go for bold the letter spacing here needs to be increased. Just to fit around here a bit better. That one there looks all right. I'm going to grab some more circles, came the Oki. I can do one of two things. I'm going to hold shift. I can either do a center thing here, holding shift again, stick it in the middle. It should snap. It's pretty good at snapping. Then I can add a stroke to the outside. I'm picking anything at the moment and then just increase the weight to have that line around there. It's going to the inside position outside of the stroke, and I'm going to keep going bigger and bigger and bigger. Until it gets there, and then I'm going to use my shortcut, which is the send it back, you can right click, remember, sender back or the square brackets here. You could do this to get your little thing going or just two circles up to you. Let's go down the bottom here. It's just a little bit weird. Another little bonus if you've hung around is when I'm dragging this bigger, I hold shift so that it stays a circle, otherwise, it goes wonky. But if I hold down my shift plus the option counter mac on a PC, it'll drag from the center, which can be handy, especially lining this up. There you go. I'm going to pick some colors from my style. Instead of just picking the random stroke color, I'm going to go to my styles. I'm going to say the center one's going to be a gradient. Oh. I added that to the stroke. It's not what I wanted. Click on there. I want it to be which one do I want from the outside? Wait there thinking the dark color. In the center of this, the fill, I'm going to go and I'm going to pick the gradient. Fancy. All right. That's how to make it a badge where the texts on the top and the bottom. It's just a trick. They're just overlapped. It looks like they're on the same path, but they're not just two circles overlapped. Now we have a badge. Badges are awesome. All right. That's it. I'll see in the next video. 50. How To Use the Pencil & Brush Tools in Figma: Hi, everyone. We're going to draw lots of lines, and we're going to make them all brushy and wheely. Here's my wiggle line. It is the pencil tool and the brush tool and some of their settings inside a figma. Let's jump in. The pencil and brush tool. We covered the pencil tool a little bit. We're going to switch to our drawing tools, and it switches it down the bottom here. The pencil tool draws with the stroke. I'm going to pick a better color. Let's go for white. Okay, and clicking and dragging, we get a pencil tool. The brush tool by contrast, draws with these more stylistic type strokes. I'm going to leave it at heist and click and drag. Oh, got to pick a color. Let's do that. You can change them afterwards. But clicking and dragging, again, I'm waiting for the smoothing part that might be in here. Hopefully, there's an update that goes, right, can we draw smoother, or maybe the defold is just smoother. But it's pretty cool, huh? I like the brushes. The brushes kind of hide some of the problems with smoothness. But as this really cool effect, and you can cross them over. Watch this. We've got this drawing that we did with the pencil tool. You'll be better if you've got a Wacom or some other drawing tablet. These will be smoother. But what you can do is with them selected. You can go over here to the stroke, and there's an option in here. See this little settings option and you can say, actually, I want it to be dynamic. No, I want it to be brush. You switch this one out to brush. You can go through and pick the ones from the brush tool. That one there. You can't really see it. Can you see I need to crank up the thickness. You can also play around with a direction. The other thing you can do with the pencil tool, sorry, is you can draw something out. I'm going to make it a little bit bigger. Actually, I'm going to have to go my selection tool, grab it and make it a little bit bigger because I want to show you some of the other features in here. It's under dynamic. You can make it wiggly. You can turn the frequency down and make it really wiggly. A little bit wiggly. You have to play around with the stroke as well. So Ms maybe a bit thick. The frequency is how tight the wiggles are wiggly is the extent how tall they are. So how far apart they are, how tall they are. If we zoom in a little bit, you should see where it says smooth, or smooth in, you can make them sharp or super smooth. You can add endpoints like our arrows, and I'm not sure why we need them here, but it's there. All right. What I'm going to do is I'm going to I really hate this. I'm going to grab this and now we're just doing production stuff. That's it for the brush and the pencil tool. Follow along if you want to check this out. I'm going to get rid of that put that back. I'm just copying and pasting it out. What I want to do is put a space between these and I'm not sure what I want, whether it's the brush, so I'm going to grab the brush tool. Do something like this, like a little dividing line. That's pretty good. I like that. Or I might have an option where I'm going to move you over there. I might just do a straight line. Instead of using the pencil tool or the pen tool or anything else, I'm going to go to the sheeps, I'm going to grab a line, and I'm going to go, hold shift. It's white. I'm going to make a little bit thicker and I'm going to do that whole settings going to make a wiggly dynamic. Can't see mine down here. You can grab it if it ends up popping off screen. I think mine's doing that because I've got a second monitor down here you can't see. That looks cool, wiggly. Oh, I'm liking it. Kind of matches the hand drawn font, okay? I think it does, anyway. Okay, I'm going to go back to my move tool and I'm going to use this as a divider. Which one do we like? The stroky one, the brushy one or the wiggly one. Oh, I think I like the wiggly one, but for some reason, I feel like it needs a dot at the end. Well, one thing it's got it's got a really sharp end on it. Can we change that? Oh. Let's have a look. Rounded end cap. Cart for these. These options don't work, do they? Basic? No. Okay, so can you do an end in here? Rounded end? Oh, you can. All right, corcck the code. What I also wanted was the Oki and I wanted to draw a little circle at the end here that is the white color. Why? I don't know. It's cool with the dot? I think it does. All right. Brush tool, pencil tool inside of Figma. 51. How To Use the Pen Tool in Figma: One, in this video, we're going to learn how to use the Pentl. It is tricky. It is really out of the scope of this course, but I want to give you a once over so you can get started. If you do get to the end, you're frustrated and you're like, I hate the pentil. Okay, lots of people hate the pen tool. Sorry, pen tool. But I'm going to give you the ways it works in figment, some tips and tricks, and we're going to draw a mountain. It's a mountain. Those are meant to be clouds. And that I'm unsure. It's meant to be a flame, but it looks like a leaf now. Anyway, let's jump in and learn the pin tool in figma. All right, for the pen tool, let's draw something. We're going to draw on the top of an image that I've got. So when you exercise files, there is a Pentool 01. You can just drag it in or remember, you can go too. Can you be in draw mode? Probably. Yes, you can. Bring in an image and go find it. It is in your Exercise files is called Pentool 01. Bring it in. I'm going to click once, and I'm going to zoom into it. We're also going to do is we're going to lock it. You can right click stuff and you can say lock. It just means that I can't move it around. To unlock it, you can right click it and say unlock or in your Layers panel. Can you see there's a little locking icon here? I can unlock it, lock it. Either way, I need it locked because we're going to draw over the top. Let's go to our drawing tools. Let's grab this guy here, the pen tool. What color am I going to use? I'm going to use something very bright so you can see it undo very bright, so you can see it come on, Dan. He had escape to close that down. Pentil. Make sure you're on pentil. It's the piki and we'll start with the easy ones. We'll start with square. Pentol is click once, click again and you can do custom shapes. I'm going to increase my line weight so you can see it. I'm just clicking once, clicking once, clicking once. What you're looking for is when you come back around, it's snapping or it's not snapping to my drawing, it's snapping to this thing. Can you see there? It's going, Hey, look, we're lined up. That's cool for me. Then we've got to go back to the beginning. One you're looking for, see the pentil, it has that little circle that appears. That means I'm a complete shape. The cool thing about that is then I can go over here and say, you can have a fill. I'm actually going to use one of my I'm going to use. One of my what are they called? They are called styles. That's it. W brrain. I'm going to use that. Lines are easy. To adjust them afterwards. Let's say you've clicked off, you go to Double click to go inside, it should be defaulting to this tool. If it's not, go to the move tool. It's like a second move tool. It's like the move tool, but for these vectors, these pen tool lines, what you can do is click on them and you can wiggle them around, and line them up if you've got them badly. That is good. Let's look at doing curves. Let's them on. We're going to do a cloud. It's a cloud, by the way. Make sure on my pentil we're in draw Pentl stroke wise, it's going to be good. So we're going to do curves and some corners. So we're going to do is click once for a corner. If you want to curve, find the apex of the curve and click hold and drag. Let go. And if you want to corner again, click once. Click Hold and drag. You're looking for the apex of whatever curve you're doing. About there, click hold and dragged it out. Under that, click hold and drag. If you lose it, you're like, how do I get back noscpescape, you're like, how do I get back to it? You double click it to go inside. You can go back to your pentil and you can click on this and it will restart it. In this case, it's turned it into a corner. I'm going to click hold and drag that out. It is broken, that's all. I'll show you how to fix in a second. If you do lose it, you just click for where the end of the line is and what we're going to do is continue on. I'll show you how to fix that in a second. Click once for a corner, click and hold and drag for a curve. Click once for a corner, and then back down here, it's another click once. It's a nice sharp corner. I'm looking for that little circle and we have a whole shape. Look at us. H. If you've got things that are a bit broken but you want it to be a curve, you can go back to this tool here, or go to this tool here, bend. Click on this and then click and drag on this. I'm clicking, holding and dragging on that. It's called an anchor point, and I can drag it out. That's how to convert corners into curves. If you want it to go the other way, you want this curve to not be because at the moment it's a seesaw. I've gone back to my move tool and I can adjust they're called handles. That's called an anchor point. This handle I can drag out. But let's say I want it to be a pointy one. How do I break that? I'm on this tool here. I hold down my option countermac canopy, C, and pull one of the seesaws, and it breaks it. There you go. I've got a weird flaming mushmallow now. I'm going to go back, turn it into a curve and go, you Awesome. One of the other things you'll notice here is that I've got quite a thick stroke and it's very pronounced. Can you see this one's got a point? Why does that have a point? It's because there's something called the mitring. Is it mitring? I think so. What happens is this one's a more subtle point than this one, it allows it to do this. When they're really acute, like this one, can you see it's tucked right in there. It doesn't know what to do, so it just cuts it off. What we can do is watch this and go back to my move tool, click on this. You'll see the little handles appear in here. Watch this. If I open it up, you see, sometimes they're there, sometimes they're not. Because otherwise, can you see how big it would get? I ended up racing off the page, they just kill it. What you might do, though, is you're like, I don't like this inconsistency. What I'm going to do is I'm going to go to my stroke where is my stroke. Here it is here, I'm going to go to the settings here, and what kind of joins do I want? Mited is what it's on at the moment. You can play around with the mited angle as in let's just play around. Well, crank it up 290. It will mitre the edges. Can you see it cuts the edges off there? I could go to this one here and just say bevel them. Can see it bevel the edges or I could say round them. Probably more right for this particular drawing, it's doing it for these. The one thing to notice is that it's done it for this one as well, because it's doing it to the entire vector that I've drawn. If I want this to be separate, what I can do is double click it to go inside, drag a box around all of this, go to cut, I got rid of it. I'm going to come out of this vector as in double click on the background. He's now on his own, and I can paste this one, and there are two separate vectors. Now I can say you, my friend are no longer rounded, you are mited, so you got pointy edges. I know this is a bit complicated for I don't know. This is Figma. We're doing UI design, but the pentils really handy. It's a course on its own, but I want to give you a good overview of it. Let's do one more. Let's test, PentilPiki click once for a corner, click and drag for a curve. Click once for a corner, click and drag for a curve, click once for a corner, click and drag for a curve, once for a corner, and then back to the beginning again. If you miss it, you can just keep clicking in there until you find it, or I would undo it and do it again. There is an option in here if you get close. You can go Command J, I think. You can't. You can. You can use the selection tool, select all of these guys and hit Command J or Control J on a PC. That's ugly though. What I want to do is probably just delete that point to delete a point. That's a good point. I click on it, so it goes blue, hit Delete, grab my pen tool. Mm I can just hover over here to get started again, click once. Again, and we're back doing it. I'm going to steal the colors from this. What I want to do is double click it to come out of drawing mode. I want to select this. I'm going to go to. I can't remember where it is. It is under Edit Copy properties. I'm going to click on this and go Edit Pace properties. There is a shortcut. I can't remember what it was. What was it Pace properties there. Command Option V on a Mac Control O old V on a PC. Cool. But let's ignore that. All right, let's do something more complicated over here. Is it more complicated? Kind. I want to show you one more example before we move on. I'm going to grab the pentil. I'm actually going to make sure I'm clicked on the background so I'm not adding to these. I'm doing my own new one. Pentil? Is that a curve or a corner? That is a corner. Sharp one, so I'm going to click on. Over here, where does the curve go? Because it was easier over here because it was just in the middle. What we're looking for is the most the apex is where it turns the most, which is more over here. It's not in the middle. You see, that's the most bendy part. So I'm going to click hold hold hold hold and drag out. Okay, I go up here and I'm going to go, Oh, it's not matching. You have the tendency of clicking, holding, and dragging and doing this works. Trouble is we have this. Whoo. Either way, we need to fix it. We rough it in and then fix it afterwards. Let's carry on this way, and I'll show you how to fix it, and then we'll redraw it and show you a different way. Now I have two curves over here. What do I do? First of all, I can't deal with this. We looked at it before on my pentel. If you hold down the option key on a Mac, old key on a PC, when you hover above this handle here, can you see it changes from the pen tool to this little arrow that says, I'm going to grab this guy and because I'm holding down the lk key on a PC option key on a Mac, I can break it. Where does it go? This is the tricky bit when you are getting new for the pen tool. Some of you guys might be good with it. Some people might be scared of it. It's hard. That's out of the scope of this course, but I want to give you the ones through. I'm going to drag it over here only because I know that when I let go of it, can you see it's it's gravity pulls it that way. You can grab it again and say actually over here. Is just to rough it in and then fix it up afterwards. Where does my next curve go? I want one there and one there. This curve goes two ways. It goes in and out. What I'm going to do is I'm going to click hold and drag there. You're like, it's not working, Dan, I'm going to click hold and drag there. And then down here, click once for a corner. This one wiggles both ways. There's an apex there and a little apex there. I'm going to exaggerate mine, click hold and drag, click hold and drag. Then click once for a corner. This only has one bend, click hold and drag there. Back to the beginning, it's a corner. I'm going to click once. How do we fix this mess up? You might hover above some existing points. If you hold down the option Kona MacKenna PC, you can remove them and it's gone. If you've got too many of these handles, what I want to do is move to this tool and I'm going to do some stuff. I'm going to say you had this thing ruining my little line here. I'm going to drag it back up to its home. And you can get rid of it by dragging or completely into its home because this guy's doing all the work. There was just too many little handles trying to deform the line. Actually, it's looking good now. You can move the anchor points if they're in the wrong spot. If you're like, I want to be there, drag this up. How do I sort out this? It's a bit of both of these. That guy there, maybe this one. You notice that when it gets in closer, it's more of an acute turn and the further out it is, the more fluid the turn is. So there's a bit of like you and you go back and forth. With this one, what I want to do? That looks good. This one here is looking weird. Why is it looking weird? Don't be afraid to zoom in. I'm going to say you just need to be probably a little bit more like that. Further over, remember, don't be afraid to move the anchor points. I'm exaggerating mine because I like it better. This one here needs to twist this way. You'll notice these guys at the end here. If they're helpful for you, use them. They get added for you automatically. Use them if they aren't and you're like, wait, there's too many. Just remember drag them back to their home. Do I want this one? I like that one. I didn't use the top one, use the bottom one, and that's mine that's not very smooth, is it? If it's not very smooth, they need to be longer. How do I like this one? I've still got my copy and paste properties, so I can use my shortcut now I can click off in the background so it's not an editing mode. I've just got it selected and I should have paste properties, which is Command Option V on a Mac control Alt V on a PC. You can just keep copying and pasting them. Do I like that? Is it a leaf? Is it a flame? I really want the point there at the bottom, so I'm going to go in, double click, grab that we worked out earlier that it needs to be less of an acute angle for it to work. There it is there. Add your own sound effects. All right. It looked better in my head. Double click. Is this thing here. Something's not right here. Oh, yeah, that's more fluid. All right. That is the once over for the pen tool. It's tricky. It should be a whole section in a course, but FIG is really more about app building. But I want to include the Pentl and the pencil tool because Figma is getting used more as a general design tool. And when you need to make icons, even if you're doing logo design, there's no problem doing it in here. It's got some really powerful drawing tools, but the pentils a tricky one. I hope that was helpful. All right. That is it. I will see you in the next video. I can feel it for the people new to Pen til you saying, I'm never returning to this video ever. I'm just going to import icons, Dan. Yeah, that's fine, too. All right. Next video. 52. Class Project 09 - Pen Tool: Not going to make us do a class project using the Pentl, is he? He is. Here I am. I want you to practice using the pentle exercise that I showed in the last video. It's called pentlo one. It's in your exercise file, draw those out like we did. Practice with those. Then on your own, I want you to attempt to draw this a heart doesn't have to look like mine. Use your own colors. What I want you to do is experiment with the join options from the stroke. Maybe that's mitre bevelled and round. Let's have a look. Having a play around with these here. Whether you've got rounded edges or beveled edges, just have a play around. Also, I want you to experiment with what we did with the pencil tool and the brush tool, where we went into these settings here and we can actually without using the pencil tool, the brush tool, just apply things like dynamic or brush, have a playground with those like the one I had. There it is there. Now this is going to be hard. I've even written in here. This is hard, especially if you are new to the pen tool, give it a shot. If it's horrendous, that's okay. You can still be a UX designer without knowing the pen tool. It is a tricky tool to learn. Why it's here as an exercise. We're going to play around with it. When you're finished, take a screenshot of all of it together and upload it to the projects and assignments. You don't need to upload this one to social media mainly because everyone's going to look the same. We'll start putting some more of the unique stuff we make up on social media. But for now, just in the class projects, or in the assignment section, good luck with the Pen tool. Now, you can do more than I've done here. The more exciting the Pen tool, we'll see in the class projects, the better. If you're just getting started, just something simple. All right, have fun with the Pin tool. I will see you in the next video. 53. How To Use the Shapebuilder in Figma: Hi, everyone. We're going to use the Shape Builder tool. Inside of Figma to make these, we'll start with something easy to house. This, I don't know what this is, but it looks cool, and this is a shield with a tick in it. Success shield, we'll call it. We're going to learn the Shape Builder tool. Plus, we're going to combine some of the other techniques that we've learned earlier in the course so that we can make lots of stuff. It's a little bit tricky, but I don't want to skip stuff like this inside of Figma because Figma is getting used more and more as a general purpose graphic design tool. Let's learn the Shape Builder tool, which is awesome. All right, let's start. Let's find a clean bit of our pasteboard. Let's draw a house. I'm going to grab the rectangle tool. I'm going to draw out rectangle. I'm going to grab the polygon tool. I'm going to draw polygon or a triangle. We haven't covered this tool. Can you see here, I can change this to have as many sizes as I need. I only need three, but there you go. You need a Pentagon or a hexagon, I'm going to line it up. It's pretty good at lining things up. There you go. You could select both of them and say you two, perfectly lined up. All right Ms poking out a little bit. Let's draw the door, back to the rectangle tool and draw a door there. I'm going to drag it afterwards just to get it to line in the center. Does that look like a house? Looks like a house enough. What we're going to have to do is the magic trick here is to make sure that these are all smooshed. Can you see, they're all separate layers just on top of each other. What we need to do is say, you my friend are all flattened together. It means they're all squished into the same vector. It's like a group, but not a group. Means they're all together as a vector. Go down. I just got it selected and I want to go into this option here after it's flat. It's called Edit Object. We've done that before or you just double click it. And you get all of the stripy lines. Now we're going to switch to the Shape Builder tool, which is the key. Click on that and you can join stuff up. In this case, we want to remove stuff. Hold down the option counter Mac. Co PC, can you see, there's a little minus next to my cursor and things are red. What I can do is a click hold and drag across these two to get rid of it. Now, I could leave these as a bit of a mess. These are all color differently, so I can click and drag across, holding nothing down, and we'll add them together. I now have a house. We did it. Double click the background to come out and we have a lovely instead of VtorHuse icon. You can go and adjust it afterwards. If you've drawn yours and it's a bit too pointy or a bit too tall, you can double click to go inside. I can select all of these anchor points at the bottom, just using the default tool and I'm going to hold shift and use my arrow key to move it up to try and get something that feels more proportional might be just this point. Yours is too tall or not enough tall. That's the basics of the shape builder. Let's do something cool like you saw at the beginning there, and let's grab the oh for the circle tool and I'm going to draw out a holding shift so it's nice and perfectly round. I'm going to switch mine to have no fill and have a stroke of white so we can see it. And that's going to be my outer circle, copy and paste, I've got another one, and I'm going to shrink it down. Member, if you copy and paste, they end up on top of each other. Make a circle that is smaller, not too small, something like this. Then it's a matter of just lining them up, I want one to go there, copy paste, I want another one to go over here, copy paste, I want another one to go there and copy paste, another one to go to the bottom. All right, that's going to give me hopefully my little Spirograph. Anybody remember that hands up. Just like the house, I select them all. I've got a whole bunch of ellipses that are not connected. I need to flatten them, so they're all together in the same vector, then I can double click them or click on the Edit vector. Then we can grab this one here, M, the Shape Builder tool and say, well, actually before that, you could go in to use the fill tool and go in here and say, right I want you to be filled with what color? Go red. Okay, and just work your way around and fill this up. They're not joint, but they're all the same color, and maybe that's what you need to do. That's a good way of using this going to flatten and then edit object. I'm going to undo that because what I want to do is I want to join them all up. So for the Shape Builder, and I'm going to color it in and you're going to figure out, try and figure out which bloody ones I need to cover. I'm not doing anything. I'm just dragging across them using the default tool. Or is it this one? I think it's this one. And then this one here is what I'm looking for. I can't remember. Is that about right? No, too many. Undo undo. Maybe it's this one here. You that's it. Then to get rid of them, what key do I hold down? That's right, the option key, and I'm going to drag through all of these or Ok key on a PC. I ended up with that stripe. Here we go. I'm going to go back to my paint bucket tool and I'm going to pick a fill color. I'm going to get rid of the strokes and add a fill, and I'm going to pick from created in this file. It's going to give me my colors along here. This works. The behavior of this fill bucket is a bit weird at the moment. It's a new feature for figma. I imagine it'll get easier at the moment, what I'm doing is I'm clicking on one and then changing it. It's changing all Okay, so I kind of click on it, click off again or just kind of click it twice. Then if I go and pick a color from down here, it applies. So go into Edit. Don't click it too fast. Okay, it's a little bit wet. And on again. And hopefully, it's working a bit more seamlessly for you a little quirky. But we got there. Cool. And that is. I want to add gradients, actually. Do we do it? Or, we'll do it real quick. Then we move on to the next one. In here, I want to add a gradient. It's a second one in or when I already like it. Look at that. All right I'm going to do all four of them. You wait there. I'm gonna go super fast mode. All right. Do I like it more? I think I do. It's kind of cool. Alright, let's do the shield. Okay? So the shield is going to bring in. We're going to get ultra advanced here. We ultra advanced. It's going to be I don't know. We're going to throw lots into this one. Again, remember, it's not a drawing tool. It is a graphic design tool Figma. We're using it for UX here, so we're not getting too deep into the design tools or the drawing tools, but they are super handy. So let's start with rectangle. I'm going to draw a shield ish size rectangle. It's throwing some new stuff. So I want to go into Edit Object, because what I want to do is I want to grab my pentil and I want a new point down the bottom here. Okay, there wasn't one before. Now there is. Now I can go back to my move tool and drag this down for that pointy part. I'm going to hold shift while I'm dragging it down, so it goes down straight. Now I want it to be curved around these edges here. I need to convert a couple of these points. What I'm also going to do is I'm going to only really focus on one side and then flip it over at the end. I'm going to grab this to make it a curve, click at once, and you're like, what I'm going to do now is go back to this first tool here, the move tool. And what I'm going to do is I'm going to break this side here. Who remembers how to break it? Hold down the option key on a mickey on a PC and you can say, you've broken it off. I want to do with this one? I don't really want him so I'm just going to drag him back to his home and he goes away. Good thing about it though is if I click it still, I've still got this side and that's what I'm going to do. Because I want this curved side on this but pointy on this. I'm going to grab this guy, maybe move him down a little bit more. I'm just using my rake. I'm not worried too much about this side because I'm going to flip it over in a second. You could though. Next thing I'm going to do is get the little top of my shield. I'm going to grab the otol for the circle tool to drag out hit the otol again. It doesn't work. I'm going to go to the Ellipstol here. It's come out of that object editing mode. Okay. So I'm gonna have to flatten this in in a second. Draw some sort of circle. I'm going to actually switch the color just so I can see it. And I'm trying to get some sort of point. I need to cross the halfway line a little bit. That looks good. You can adjust this to get it to how you know what you're looking for, remember, is just what's left behind because we're going to use that She builder tool. How do I know if it's passed halfway? I'm just drawing a selection. Yeah. And what I'm going to do is, how do I get the Shape Builder? It's not down here. You've got these other things like union and minus front. We're going to ignore those ones. We're going to use the Shape Builder, which is just easier than all of these. We're going to have to use the flatten. Then we can go inside Object Edding mode, hit our M key for our Shape Builder, which is just this third icon. I can hold down the Alt key on a PC option on a Mac and just click across those. I've got half a shield. Now what I want to do is same thing again, I'm going to use a rectangle, which is the archy, go across this. All I'm looking to do is get it to go to that point there. I'm just going to use this like a cookie cutter. Again, select both of them. Let's flatten them down. Oh, I did some automatic flattening. Flatten them down. Oh, I didn't realize it did that. It works. Does it? It's automatically using one of these, which I think it's using exclude. There is some weirdness in Figma. I'll leave this in the course because it's never done that before, but now it has. Didn't ask it to. So if we can do it regardless. It's cut a hole in this L I can see through it. What I'm going to do now is go into it, grab my Shape Builder tool, and hopefully just be able to hold down my option key or key on a mac. Be able to slice half of it off. It's still worked. I've now got half of it. What am I going to do is I'm going to duplicate it. I'm going to go over to here. There's a flip horizontal and I'm going to try and line them up and they bush together. They should do it automatically. Sometimes I've had problems where it will leave a little gap in between them, so I zoom out. Sometimes there's one pixel gap in there. You can just click it and use your arrow key to move it across one. Now I could leave it like that, but I'm going to select them both. I'm going to flatten because remember, there are two separate shapes on my lays panel. I'm going to smush them together and you'll see there it is there. This is going to be my tick icon. That'll do. To sees. I'm going to go into object editing mode. I'm going to go to for my Shape Builder and go, and join them together. I just click and drag across both of them. Let's add the tick. I'll scrabe my pen tool, which we got the hang of. I'm going to click once for a corner once again once a third time. I'm going to grab my stroke ok to get an appropriate size stroke, has your own sound effects, and I'm going to do this one called Outline Stroke. We used this earlier on to break apart type. We can do the same thing for. I'm going to select on this. I'm going to write click it. Actually, it can't be an object editing mode for this to work. I'm going to close down object editing mode. Now I can write click. That same option here where it says outline stroke. This is more what it's meant to be used for. We used it earlier on to outline the type. This one here, outline stroke, which means at the moment this is a stroke. If I go to Command Y, Control Y on a PC. Can you see it is a line with an effect over the top of it to make it thick. What we want to do is make it a big thick rectangle that we can cut a hole in the background. Control or Command Y, I'm going to say now an outline. Watch what happens. Can you see if I go into outline mode again now, instead of a line with thickness on it, it's actually a shape, this big thick shape. I'm going to click on it, move it up a little bit, a little bit. Tap to tap, Command or Control, why? And what I want to do is cut a hole in it. Because the moment it's black. Let's make it a color, make it more obvious. I want to actually be a hole in it. You could leave it as a color. It's totally fine. I want to cut a hole in mine. So I'm going to slick both of these, smoosh them together, K for the Shape Builder, and I'm going to cut the hole in the middle of there. This happened to me before as well. You're like, there's some quirkiness to the Shape Builder tool in all the drawing tools in Figma at the moment. Some reason, it's leaving it in there, k. It should just cut a hole in it. It really wants to. But a little workaround for the moment. I ***** that'll work in the future. It's just some teething problems with the tool. I if you grab your paint bucket, if you hover above something that has already a paint, can you see this is a minus? It's just minus in same same no undo, you could select. Can you select this part? No, just use the fill bucket if yours is not working with the Shape Builder tool because now there is a hole in it. How can I approve it? Just to get above something. Hello, I can see through you. That is the Shape Builder tool. We threw in some extras in here, like the mirroring. We also looked at using our pen tool that we looked at earlier. There's a few little quirks for my version of Figma. Yours might be different. I've gone into objecting mode. I I feel like that needs to be lower. Oh, nice. All right. That is the Shape Builder tool in figma. It is super awesome. Draw things out, overlay them, and either join or subtract bits. Dino add some sweet gradients. All right. That is it. I will see you in the next video. 54. Squircle Buttons With iOS Rounded Courses in Figma: There. Hey, we're going to learn what a squirkl is inside of UX design and Figma. Squirkl is not quite a square, not quite a circle. See what they did there. Okay? It's called corner smoothing, as well, but squirls a way better name. Let me show you how to do it inside of Figma. Alright, let's do this on our homepage desktop Hi five. So shift one S everything on the name here and go Shift two. We'll zoom right in. So we need two buttons here. I'm going to o in even more. I'm using my skull wheel. Or you can use your Shift plus. Let's go and create two rectangles or frames, let's use frames. We're going to say, I want one button. It's going to be about this sort of size. We're going to have to go and test this at 100% because is it big? Yeah, that seems about right. Okay, so we are going to zoom a little bit more. Let's give this a fill color of one of our, this is an interesting one. Sit down the bottom here. On this page, Gate show me the ones that are being used and got credit in this file. Here's all my styles. You notice that for some reason, gradients not want to see gradient or just see the names, you can go to this one says Libraries. Here is my color library. This might be an easier way to pick colors. I'm going to pick my secondary color. I'm not sure I like the secondary color. Anyway, let's do two of them. We're going to have a By now button and a learn more button, and we are going to have them both selected. Shift, click both of them. Let's go and add some to them. I'm just going to type mine in rather than dragging it, I'm going to type in ten pixels. Okay, let's look at the difference between our regular rounded corners and squirkles. I got this one selected. We've got to go to this option here, individual corners, and then go down to the settings. We don't actually want individual corners. We want this thing called corner smoothing. That's the technical name. Squirkle is way better, though, right? Square circle. So let's have a look. So that is the big change. You're like, It looks the same. I'll get the editor zoom in on it before, after before, after, before, after. Can you even see it? Alright, let's make it bigger for the port editor. Okay? Before, after, before or after, it's just a different kind of rounded corner. So that's how I always does it. It's just got I don't know, an interesting feeling to it that I really love, and that's why it's got its own video. Okay? So, yeah. Up to you, you don't need squirkles. You can use regular rounded corners. I'm going to do both squirkles. Command click inside of it, or Control click just to jump inside to this button. Otherwise, you got the whole frame selected, I'm going to have two of these. I'm going to make this one have no fill but a stroke a nice big thick stroke of my secondary color, what size? Something like that. I'm going to add my text to it as well. That's it. That's squirkles. One last thing. You could abandon squirkles altogether and just go for a full rounded. Watch this. If I grab round it and just keep going past where it needs to be, because you can see it's trying to have 146 rounded corners, it can't do it. I just turns into a pill shape. That's something you might like as well. We looked at this earlier on. If I go down to, down to zero and just recap. If I zoom in close enough, I can see the little dots in the corners. C need to get it started. What you can do is you can say, they're not appearing. Wonder why. Normally there's a little point you can drag in the corners, not zoomed in enough. Hmm. Not appearing. Anyway, you can have different rounded corners, you might set one to zero. There you go. Squirreles inside a figma. I'll see you the next video. 55. Class Project 10 - Icons: Ah, it's more homework time. No, don't worry. It's super fun class project time. Very different. Hang around for this one. Even if you're not doing the class projects, you should be. But if you're not, there's some cool, interesting things that go on here. So I want you to draw a couple of things, buttons and icons. So the buttons are easy. Okay, you can decide if you want to squirkle or not. That's these guys here. By now, learn more, get it onto your homepage. And then I want you to draw some icons. So using the tools that we've learned so far, pen tool, Shape Builder tool, anything you like tool, I want you to draw some icons. How many can you draw? You need to draw three. Okay, you can pick any of these three. I've put them in an order of least hard to draw to most hard. So you can start with the first three. You might do all of them to keep practicing. A little tip when you are designing anything is to put them inside of frames that are 28 by 28. Okay, sorry, 28. I can't read 48 by 48, just to start with. Okay? So if I grab my frame tool, draw this out, and I'm going to say you are dimensions of 48 pixels by 48 pixels. The reason we do this is that when you end up combining them together, okay, you need to have them kind of proportionate. Often you can be designing something or maybe putting together other people's icons. It's not what I want from this video. I want you to draw your own, but there will be lots of times where you're just cobbling together other people's icons and you need to manipulate them. That's why you need the drawing skills. Okay? It might be that this one here has come through from somebody else's icon library, and it's just too big, compared to his buddies. The way to know if it's too big is to stick them inside of these 48 by 48 pixel frames and then stack them next to each other. It also gives you a way to space them, okay? And work out how much of this little space here they occupy. They don't have to have this big gap here. They could be bigger inside of it. I'm holding my shift and option Comac or shift and a PC to drag it up. If that one's that size, you're like, maybe this one needs to be bigger. I'm going to go the other way and make these smaller. Starting with a square of 48 by 48 pixels is just really common. I'm undoing till it got smaller. Go. They all seem like a good group. The other reason we like 48 pixels is, we're going to do this. You end up saying, All right, you. I've got a white background just while I'm designing them, but often you'll turn the fill off, you just use them like this, you'll say, Alright, this one here is going to go over here and you can see the kind of lineup and there's some consistent spacing. So what I've done is, can you see over here? There's this frame called icon account, and it's got the vector inside of it. Some of the drawings we've been doing is just being, say, this heart down here, where is he? There it is there is just a vector sitting on my panel. If I needed to put this inside the 48 by 48, either draw the box and drag it into it or I can say, I want to frame this selection and I want the frame around them to be Ts are way bigger than I need, 48 by 48. Where's my little frame. Now I'm going to say you need to get a lot smaller inside of this frame. One of those useful tips is member command or control Y to go into outline mode, especially if your frame doesn't have a color on it, so there's no fill. Now I can say for an icon would be appropriately, probably about that I might have to redesign my icon a little bit to get it to occupy the space nicely. I'll call this one now icon Hart. The reason I call them icons heart is that later on when I'm looking for icons, the stroke on this is a bit too thick now. Is over here in my Layers panel. Can you see there's a search at the top here? I can type in the word icon, hyphen it will give me everything on my document that is an icon. If you do it the other way around call heart icon or account icon, I don't know. For some reason, this looks nicer and easier to find. All right, come shift one. Zoom out. I am going to do one last thing I want to show you before we go is I've got these icons, perfect. I want these actually on my homepage. I want to change the colors of them. What you might have noticed is first of all, they're probably too big and they're not actually on. If you can see the names, remember, it's not actually on the right page. I'm going to close down my search. Make sure you close down the search afterwards. Otherwise, you can't see anything. I want all of these to be on my homepage. I might just drag them down. They're just shushed in there. Rather than trying to drag them around the Layers panel. So let's go 100%. I zoom out a little bit. They kind of the right size. I might go down to a slightly smaller size for these guys 32. Oh. That brings up another good point. Some of them scale, some of them don't Oh, there's all sorts of goodness in this video. So before we do that, the thing I was going to show you is if I change the fill of all of these, look what happens. It changes the frame fill. So I'm going to undo that. What you can do is you see down here? I got my fill, but it says selection colors. If I select all of this, I should get black and white, and one of my colors for the background here, my primary color. So I'm going to grab all of my icons, you and you. Actually it doesn't matter. I can grab all of these and you can say, right, everything that I've got selected, selection colors. Anything that is black, I want it to be, say, white, or you can go to your libraries and say, I want it to be my secondary color. That's where the selection colors can be handy. You've got lots selected, I'll say, Hey, here's all the colors you got selected. Change them if you want. Otherwise, you can just dive inside of every icon, select them and change them here as well. All right, size wise. We looked at this earlier. I think we did. Let's go and grab all of my icons. You I'm holding Shift, grabbing you, you. What's my last one there. Okay, I got my three icons, and you'll notice that when I changed them 32, only some of them adjusted the way I wanted. T one and this one need a little bit of work. I'm going to grab the house that I drew and let's look at the difference. Have a look over here between you and you. Nothing is different. If you go inside of it, I click it. This guy here is set to scale, and this guy inside of here is set to be center and top. I want him to scale, you scale and you. Same with this one, and you, I want to be scale. Top and scale bottom. Let's double check this guy, he set to scale. Within his frame, his little parent frame, they're all going to scale now rather than being stuck to left and the top right to the top and left. Rather than being stuck to the top and the left or whatever they were stuck to. Let's give it a go. Let's grab all of you guys. Grab this one, shift, shift, shift. Can be tricky to get inside some of these frames because you're inside this parent frame. Double click at once to grab this guy. Old shift. Or you can grab him in the Layers panel if that's easier. Hopefully now, talk a good game, Dan. They did. Nice. Okay, so 32, remember using multiples of eight, which is handy, 48, 32, amount to 100%. They seem like appropriately sized buttons. I know that's more for a mobile phone, this one here, but it's fine for the moment, what I'm going to do is shift click them all, and I'm going to use my columns, maybe Shift G, and I'm going to actually get mine there. Ran keys, there we go. All right. That is a long class project video, but we stumbled across some interesting parts that you'll probably run into or have already. The main goal here is to draw three icons and make some buttons and make sure you upload them to the class projects part of the website, and tag us on social media as well. I'd love to see which make. Alright, that is it. I will see you in the next video. All right, I'm back. I had one other thing I popped into my head once I've finished recording was you could instead of going through the hassle of like this. So they're not scaling. Well, this one doesn't scale. I say, you'd be 48, they're not doing exactly what I want. You can. Instead of going through and say, A, I need you to be this internal thing in here to be scale and scale, you can just use the scale tool. I should have started with that one. That's easier, Dan. You can just use scale, the scale tool, which is K, and you can do it this way. You might have to come out. It's hidden under here when you're in the draw mode. Go to scale. That will just do it the quick easy way rather than the way I showed you. But I guess I will leave the other way in because there's just loads of times where you need it to set to scale so that it's not causing you forever problems when you are trying to resize stuff. All right. Use the scale tool. Heaps easier. But anyway, that is now the official end, proper end. Bye. 56. Smart Selection & Tidy Up in Figma: Hello. You want to see something really cool? It's called Smart selection and tidy up inside a Figma. Ready? Look, I can just drag these around, play with the spacing of them all at the same time. It's called Smart selection. We're also going to use something called tidy up inside of Figma. Let's get going. Play along, draw rectangle, and I'm going to make one, two, three, four of them, and color them all differently. All right Magic. Now, I'm going to move them so they're all different spacings. And we're going to look at the first one called tidy up. I'm just going to select them all. And what you'll notice is, you might have noticed this before. If I have multiple things selected, you see over here, I've got this little stropy line. That's the tidy up button, it just tidies it up. You can go the long way and over here, there's an option to say tidy up. It's even cooler when you've got a few different ones. Let's go here. I'm just duplicating a few different ones. Here we go select them all, hover above. Look, it tidied them up. You won't see the tidy up if they're already nicely spaced. Let's put those down here. Already nicely spaced so it doesn't appear if it's already tidied up. Now that they're tidied up, get evenly spaced, you'll see, what is this other stuff? There is a pink line and a pink circle. What they're used for is the spacing in between. These little lines in between, click hold and drag one of them. Look at this. I love it. This is called smart selection. I can do smart things with selections. The other really cool thing about it is the dots. I can click hold and drag one of the dots. Watch what happens. They can trade places. You can be very just like, Yeah, it's really good for switching out. Let's do icons in a second. Now, these won't appear. If you only have one thing selected, you need to have at least two. Then you can switch even two of them around. You can also do something really cool where you go, All right, I want this one. Can you say it's highlight? Clicked on it. You can hit Command D or Control D on a PC like we did. Look, I made another one of them. Let's do it with this example down here. The cool thing about these guys, one, two, three, four, is because they're in that 48 by 48 pixel, actually we made ours 32, so they weren't evenly spaced out. I can say, some holding shift to grab them all. There's my tidy up. Nice, and the magic one is this. You can drag the dots and say, actually I need this one to be this way, this one to be actually, this one's going to go over here. I need another one. I need two of you. Actually, I don't need it for that. You get the idea, super handy. It's also really good for text. Here's some text boxes that I typed in super fast, and they need to be in separate type boxes. They can't just be returns between them. What you can do is if they're differently spaced, I can say, tidy them up for me if I want to adjust the spacing between them, watch this. Look at that. Handy. Same thing. You can move them about. Might need to zoom in a bit closer. I was too far out, that's a good point. If I'm too far out and can't really do the dot thing for some reason, you have to be zoomed in and the dots will get bigger and I can say, actually, I want you to be there, and I need a duplicate of that one and Mmber that's command or Control D. Let's pay with the spacing, super handy for lists. Might be that you want to line them up this way. Select them all, let's tidy them up. It on the spacing. I want the height as well, so I'm going to say, let's align these guys to the center. I can see the dots and I can say, I need you over there and I need the spacing between them, which I can't see. Why can't I see the spacing between them? Zoom in. Zoom out. If you can't see the lines between them, I'm just trying to think out loud. Now we need to distribute them horizontally. Nope, the lines don't appear. There you go. You got to zoom in, Dan. Oh, they're there, they're there, they're there. A certain level, those little lines in between goes away as well. That is a good point. I didn't realize that happened. All right. There you go. The other thing you might use this for is I say our cards. Make sure that everything is in the card. Member, I've got my card card two and this one here should be called card three. I with them all selected, you'll notice you get the same dots. This is super helpful because obviously rearranging all of this is real easy when they are in the Smart selection. Again, you can move around the centers. You just need to make sure that they're tidied up or arranged horizontally, vertically depending on which way you're stacking them. Oh, I do love it. Alright, that is smart selection and tidy up inside a Figma. I love it. Let me know the comments. Is this your favorite feature? What is your favorite feature so far? I like checking the comments to see what is, you're like, Oh, that is unique to Figma and awesome. For me, I do like Smart selection, but let me know what you think. Alright. That is going to be it. Oh, one last thing is, if you are drawing icons and you haven't put them in a frame like this, let's say I draw this icon. Circle tool, which is the ok and for the rectangle tool. So you design this. I'm not sure what it is. It's a very stocky man for the account page. I do that and I've got this other thing over here and you're like, I got these two things. What will end up happening is it'll tidy that up, great, and you're like, Okay, I want to switch these around. You're like, what's going on? It's because these guys are not grouped. I need to make sure that this thing here is either in a frame or a group. We not what I wanted. Frame selection. Now it's one unit. Now I can adjust them as I imagined. That is it. That is smart selection and tidy up inside a figma. Bye. 57. Tips & Tricks for Using Images in Figma: In this video, we're going to talk about images inside of Figma. We've done a little bit already, but there are lots of nuance to images, different ways to bring them in, and we'll look at some basics of image editing, we'll play with saturation and contrast and temperature. Let's jump in and learn everything to do with images. So there's lots of ways of bringing in images. We can go to this, go to File, and go to uh, place images. I use this one quite often. Shortcut you might learn depending on your workflow. In this case, Shift Command K, that'll be Shift Control K on a PC. You can use this way to bring an image, or you can come down here and instead of bringing in a rectangle, you can insert an image. Or you can just drag it from your desktop, drag it in, and it comes in. The only trouble with bringing in from your desktop, if they're really big files, they come in way too big. I'm going to use my Command Shift K in your exercise files. There are some images. They're all wallet based ones. The cool thing about it as well as you can drag in more than one. I want this first group here and I'm going to open it and you'll notice your cursor updates with you see, I got six images, and I can say I want it to that size, that size, and you get them in a more appropriate size. That can be helpful. There you go. When you're resizing an image, if you grab the corner and drag it out, you'll notice that it locks the height and width, but if you grab the sides, no, that's a new feature. It resized it. I just notice up here, this is on by default now. Lock aspect ratio. If I turn it off, I grab the side now, look what happens. What is it doing? It is changing the frame that it's in and it's making the image kind of fill it. So you can go this way as well, and it will resize it to try and best fill whatever shape you've decided because that's what I want. I want this other image here. I'm using Mcmand shift K shortcut. You can use Control Shift K on a PC or just use the longer ways. I'm going to bring this in, and what I want to do is drag it out some random size, and I'm going to put it in here. What I want to do is I'm going to go inside of this frame. What I want to do is I want to select all of this stuff and move it to the right without the purple box. You could go and click this and say, I want to grab everything inside of here, that we'll select it. I just clicked on the first one, held Shift and grabbed it. But what I tend to do, if you're not full of shortcuts already, remember you can hold down the command key on a Control key or PC to select something inside of it. You do it for a selection as well. I'm going to hold that same key down, Command or Control, Mac or PC and just drag a box around all of this and it grabs everything inside. I'm going to say you or over here. It will drag pretty nicely to the right as a straight line. I like to just hold down Shift and just force it to do it. So I'm going to say you are there and what I want is this to go in this top corner here. Do I want it to lock into the corners? There you go. A I'm just making sure it's inside of this frame. I'm going to rename this one called hero box. I know that this whole chunk is my hero box, and this is my hero image. The hero is the word generally given to this box. This is my hero image, my big product image. What I want to do is break the link for the aspect ratio so that I can drag it and get it to fill the space I want. I want it to be 50, 50 and you'll notice that resizes to best fit the frame that I dragged. Remember, I can drag it smaller, bigger, it tries its best to fill it. Is middle of my page. You notice I found the middle by doing nothing really, I just dragged it close to where the middle of the page is that middle of the page? It's not. Why isn't snapping to the middle. What I could do is click this outside frame and say, what are you? You're a width of 12 40, so I'm going to make sure this is 1240/2, and we are diffinitely half. Normally it snaps. Now, another way to bring in an image is to start with a shape. We might start with, let's start with any old shape, but we're going to pick an ellipse, because rectangles too easy. What you can do is well, basically what's happening with this one down here is a hit escape to go back to my move tool, hold command key to click on this. This image, or is it in my lays panel. It is there. This image is really a rectangle with a fill inside of an image. This circle is a fill but with a color inside. What you can say is, we don't have to delete it. We can just change it. Like changing it from solid to a gradient. But we can change it to an image, weirdly. I'm going to show you all the different ways of adjusting these images. Why? Mainly because you're going to get ahold of templates and be like, How the heck did they make this? Well, now you know. Well, after this video, you'll know. I'm going to click on this and say, instead of a solid or not a gradient. Ah. An image. You click on an image and say I'm going to upload from my computer and I'm going to pick this one and I'm going to jam it in. Cool doing the same thing instead of just dragging it out, you're filling it. You can also do something else. Let's grab another random shape, same process, just a different way of doing it. I've got a star. I'm holding shift so it's not a squishy star. How many sides am I going to put in eight? What I'm going to do is I'm going to grab this guy and drag him inside. Can I do that? I don't know if I could. I know I can import it and bring it in. Let's do it different wy. What I'm going to do is grab my oh, no, there's two ways. Let's bring in an image with the shortcut Command Shift K, Control Shift K, a PC. I'm going to find an image. This one here is good. I click open. Instead of just clicking and dragging like we did, I'm going to undo and have to do the whole thing again, is I can just click inside of a frame. Can you see what it it actually grabbed my star and added a fill to it of that image. That's another way of bringing in images. Why have one way when you can have 72. But now you know, you can file and port it. You can use the option down here to bring in an image, you can use a shortcut. You can drag it in from your desktop. When you do drag it in, you can stuff it straight into an existing shape or take an existing shape and change the fill from solid to image. Helpful. No, I want to cover some basics of photos. Rotating it. If you click on it, you can rotate by holding just the outside. There's this grab the edge, not what I want. If you hover just outside of there, you get the kind traditional rotate. If you hold Shift, it will lock it into what is it? Multiples of 15 degrees? Yeah, that's what it's doing. Or you might decide, actually, I'm just going to type in. It needs to be 180 degrees, upside down. Up to you, you can flip it. Rotate it. Boop. Add your own sound effects. Just do one last thing and I want to show you some basic image editing. It's not a full photo editor, but it does the basics pretty well. Let's say that I want an image on our background. Actually, just do it on basic one first. Let's look at this one. I'm using this one here. It's one of the images from the files and what I want to do is you can go over to here, click on image. Over here, you've got the basics. You've got exposure, contrast, saturation temperature, tint highlights and shadow just in case you couldn't read, and you can just drag them. Exposure, you want to lower it down, drag it to the left. Raise it up. There you go. This is I don't know, really basic type photoshop stuff, so there's not a lot to it. Black and white, drag saguration down. If you want to make it more warmer, drag it to the right. If you want to make it more cooler, drag it to the left. Change the temperature of the whole image. When you're working with stock library images, they are perfectly fine and you don't need to do a lot to them. When you are dealing with images that maybe you've shot or from a photographer that haven't been retouched yet, you might need to play around with these a bit more. I drag that back. I'll let you experiment with the tints and temperature and highlights. One thing I do want to show you is often for, let's say, graphics, I'll pick a graphic that I want to use. Let's say it's this one here. I like it. I want it to be a background image. The problem with it, though, is if I grab this text and stick it on top, move it to the front using my square brackets. Can you see it gets a bit lost in that background there? Can you see it gets a bit hard to read? This one's quite dark. It's better down here actually. Contact becomes tricky to read. What you can do is I'm going to have that there. You can click on the background, click on fill and click on Image. There's two things. Exposure will just darken it. I find if I want to wash something out into the background, keep it rich but just dark so I can read stuff. I'll drop that down a little bit for exposure and then play with things like the highlights. Dragging the highlights down, can you see takes out the really sharp bits that often get lost with text. You can bump shadows. I find just those two. Exposure down a little bit highlights down as much as the image could take. This one can go all the way down and I don't think it detracts from the image, you might bump up the shadows, get a bit more contrast back in there. Might make them a little warmer and richer because their wallets and warm leathery stuff. Saturation might come up a little bit as well. You can play around with these. I find exposure and highlights just to push them into the background. I don't like what I've done. It's going to go back there, saturation is going to go back. Now the text is a lot more legible. Now, one last thing is, let's say I've got this image here, and I want to maybe add it to the background here. I could just drag it and go, I'm going to go, drag it. It's across there. Is it inside my homepage, it is? I'm going to send it to the back using my square brackets next to my PK on my keyboard, and you can do that. Perfect. There's nothing wrong with this, but I want to show you another way, just because you will get other documents where you'll be baffled to find the image. We've done it already. The moment this is quite clear, I've got my homepage and inside of my homepage, there's an image right at the back. That makes sense. But if I delete that, I can actually add the image to the homepage frame. We did it too. Which one did we do it to? This one here. We had a circle, remember, and we changed the fill to an image. We're doing the same thing, but it feels weird doing it to the homepage, even though it's just a frame, but we can do it. We're going to click on the homepage. Zoom in Shift two my selection. I'm going to say, I don't want to fill of solid, I want to fill of image. I'm going to go and upload from my computer and I'm going to go find that one that was quite cool for a background. On a Mac, if you're like, how's he previewing the images? On a Mac, you can hit Space Bar. I don't think you can do it on a PC, maybe you can, but you can have space butters to preview them or you might have bigger thumbnails than me. I'm using this one here, this Julius Trost open and you'll notice that it's on the background. Now I can mess with the exposure a little bit. Can you see how it's maybe a bit weirder, it's not too bad. But I want to make it more subtle. I'm going to lower the exposure a bit and drag this up a little bit, find my highlights and drag them down. You just takes the sharpness out of those and you might decide saturation needs to come down. Maybe exposure a bit more. You want it to be quite the subtle thing in the background. All I said there was a last thing. One last, last, last thing is you might decide that actually, I like this image. Maybe you got duplicates of it and you're like, A, I've got two of this. I want the same circle, but I need a different image. You can just go into here, click on image, and you can say upload from computer and just pick another one, which 1:00 A.M. I for getting this one here and replace it. All right. That is a lot about images all in one video. I hope that was helpful. I mainly do this because there's so many different ways of tackling images in figma, and I remember when I was learning, I'm like, images are weird, sometimes, sometimes they're okay. It's because sometimes they're just dragged in as an image, which makes sense. Then sometimes they are images inside of a fill in a frame. All right. I'll stop talking about images. Well, on to the next video. We'll do more images. But we'll do that in the next video, I will see you there. 58. Masking & Cropping Images in Figma: A All right. This should be called How to make a really big mess of your Figma design file. But really, it's all about masking. We're going to use shapes to mask images and there's three different ways. I want to show you all of them just in case you bump into them with other people's files. There's pros and cons for all three. Plus, we'll do text as well. We'll get text. You can pick a better image to go in your text. That looks horrible. But that's where we ended up. So let's jump in. Start doing it. Let's look at the three different masking techniques. We'll start with the vanilla mask. I have named these. Nobody else has named these just me. Just to give them a differentiation for us learning. We're going to start with the vanilla and what we're going to do is we're going to import an image. Let's say we've imported this one. The vanilla crop is basically just bring in the image and then switch it over here from image. It just defaults to fill, you can switch it to crop and you're like, nothing happens. What you can do then is grab the frame and drag it around. We have, double click on the background, cropped it. Here you go. I use the word crop and mask interchangeably, Figma calls it masking. Same thing. To get back into it, you click on it and you can click on image over here and it springs back to life. Fill by default. Let's click on fill. It will, if I resize it as long as aspec ratios off. I can resize it and it will always try and fill whatever shape that I've drawn or left with. I'm going to switch it to crop that is the vanilla crop. You can decide on the weird thing about it is see the edge here. The frame is really easy to grab because it's got very clear handles. You can drag it around. You can rotate the frame. The image though, doesn't seem to have the blue lines around the outside. It has the equivalent. You just can't see them. So watch this, I can drag the edge here, hold shift, that scales proportionately. I can do the same thing with the rotating. Remember hovering just a little bit further out here. There's this magic rotation area, and you can rotate it around as well. Click and drag it to move it. I'm going to have to make mine bigger to fit, so you can adjust the image, step it from the frame. Asking. That's the vanilla mask. Bring the image, switch it to crop, mess around with it. There's the two shape method. Actually, first of all, at the vanilla one, have a look in the Layers panel here. Can you see this? It's really simple. It's just an image with the image name. There's nothing to it in the layers panel. Quite clear. You just have to remember to go into here to adjust it. That's cool. So the two object method is when you have an image or sorry, a shape and an image. I'm going to put mine on the front. If I want to mask these two, all I need to do is have them on top of each other, select both of them. You need to have them both selected and over here, a little icon appears says, use as mask. You're like, that didn't work. The weird thing about this mask is that the shape has to be on the bottom. I've got just the shape selected. I use my square brackets next to my PKey to push it to the back or you can right click and say send to back. I still need to select them both, so I need to try and grab them both now, which is pretty easy and now I need to go to mask. It is the back object that will mask the image on the top. That's the way it works, though. You can see to edit it, you can select on it and you can either double click it to go inside of it, or probably easier, especially when you're learning is to click it once. Over here, you see the difference. This other object, which was this one, which one will work on that one there. I'll move it up in my lays panel just so it's easier to compare. That was the vanilla method, where we just brought an image and cropped it. This one here works differently. We end up with the same part, we've still got a mask, but in this case, it's a mask group with two things inside of it, my vector, which is at the bottom and my image along the top. This makes it a little easier when you're like, I want to adjust the image swing a little bit. Okay? I can select on the image, and then I got these nice little handles that appear and I can hold shift and rearrange it, drag it around. If I want to work on the frame, I can click on the frame and say, I want to make you a little bit bigger and maybe rotate you around. You can work on them a little bit more pragmatically. I don't know. It's easier to work on, but it's a little bit more confusing here in the layers panel. Easy looking, hard looking, but probably easier to work with. He said there was three masking options. There are. The third way is the shape first mask. That is you just draw a shape, any shape. I'm going to drawing an ellipse. It could be this, you could have drawn a flame, doesn't really matter. But instead of having the image on top and doing a mask, you have it selected and you say, actually, I want to change this to an image. What kind of image you? I'm going to say I'm going to pick one here, and I do it. It's just a slightly different way of that first one, the vanilla, where you start with the image and then trim up the edges. This one, you start with the shape and fill it with an image. If I switch it from fill to crop, I get to do basically the same thing. I get to play around with the background. You don't get the handles, but you get to do the same. As the vanilla one, different ways of approaching it. You will find other tutorials where you're like, I thought you had to bring in the image and then crop it or do you bring in a shape and add it, then crop it? Or do you have two shapes, stick them on top of each other and then mask them? They're all the same. Because watch this. Do I have another copy of that? I do. I'm going to grab this and I can do the exact same thing as the ellipse I can say you. You don't have a fill anymore. Actually, you're going to have a fill, but it's going to be a solid. No, I'm going to switch to image. I'm going to pick an image. I'm going to pick that Scott image. I'm going to get rid of the stroke, and we end up at the exact same place. I can still adjust it, but I have here in the layers, can you see it looks different. That's what I want to show you is that I'd be working on this. I'd be like, What the heck is that? Or you'll be looking at this going, How where's the image? How do I get to it? Just a different way of working. I click on this, I go to Crop and now I can work on it. Same sort of way. Same end result, just a couple of different ways of doing it. Vanilla, start with the image. The two shape method where we just overlay two things and we make a mask. Then the last one where you start with a shape and you add a fill that is an image and so it to crop. Was it helpful? Let's go further. Let's do type. If I'm going to type tool, I'm going to type in my name. I'm going to hit escape. I'm going to use my Ktol to do the sizing just so that the font gets nice and big. I'm going to grab my type tool, have it selected, find a nice black font, nice and thick, and I can do the same. Watch this. It's got a fill of white. Look, imagine what I could do. Hmm, I click on this and just go, image. You're already there. You're like, that's not hard. It's not. Here we go. We've got an image in the background. Before, if we want to adjust it because the moment it said to fill, which means if I change go to the type tool, change the text. The text is still editable, which is cool. I'm going to type in all of my name. You can call me Dan and can you see it expanded based on the letters that are available? So it is filling. You can switch it to crop, and then go, Alright can't be on my type tool. I have to be on my move tool. Oh that didn't work. Let's go here. Oh, the type. How do I You wait there. I'm not sure. Oh, it's on Phil still. Got a crop. There we go. Not sure what I did there. I swear I had crop before, but clearly, I didn't. Okay, so I can drag out my image, holding shift, okay, position it where I want to, okay? And if I want to change the type afterwards, okay, I got to use the type tool. And because we're buddies, you can call me Dan. There is a terrible image for what we're doing because you can't really see my text. That's okay. I want to get back into it. Click on the fill like before, and I can adjust this one to try and find some more. I might have to do the opposite of what I did earlier, holding shift and trying to get all the leathery bits into the background. I might have to play around with the contrast and bump it up a little bit. No exposure, bump it up a little bit. Okay? Is the highlights, bring them down, I might have to bring them up. Or in this case, the shadows. I want them to be lighter. Okay? It's still not working as ugly. You get the idea. So that's four ways of cropping if we include the text there at the end. Yeah, I really want this in here because I remember it being really confusing. If you do nothing else, probably the easiest way is just to use the two shape method where you put the image and the shape together, make sure the image is on top, select them both and hit the mask button. But you'll bump into these and you'd be like, do? How do I change it? You just need to remember to click on the image to change the crop and if you hover over here like we did in the last video, we can upload a new image to replace it. That is it. Masking slash Cropping Done. See you in the next video. 59. Free Images & Plugins for Figma: There, in this video, we're going to look at how to get free images that you can use commercially inside of your Figma projects, and I'll show you what websites to go to and show you how to use some of the plugins. They're really easy. Let's jump in and do it. Waiting for this one to load. There you go. It's loaded. Let me show you where I get them from. All right. So when it comes to looking for images to use in your documents, you're probably looking for ones that you can use commercially. So if the client goes, Yeah, I love it, and then you got to go off and find a different one, that's not fun. You're looking for ones that are commercially licensable, there's two really good places for free ones. Unsplash.com. And another one is pixels. You might have your own one. Let me know the comments. If you've got another one that you might use that you like that others might enjoy as well. The cool thing about them is that let's say Unsplash, the one I use the most, they have a bunch of free ones. The ones that have little plus at the moment are their premium ones. They call them Unsplash plus. I'm avoiding those, and let's say that I want let's do a search. Let's go for what are we doing what? Okay? And you will find a bunch of stuff, and let's say I want this one, you just download them and you can use them. You can have a look inside and to see what the commercial rights are for them, but you'll find everything on this site is free to use under the Unsplash license. It's quite clear. You can download for free. You can use the commercially, and you don't need permission. Although attribution is appreciated. You could leave a link or whoever the photographer is, give them a shoutout. You can't go and then sell them. Double check if you are using them for something a little strange, but for normal use, pixels Unsplash are great. Downloading from the site is one thing you can actually cut to the chase and install a plug. Okay, so down here, yours will look different if you're on the free account, but this little Actions panel. You can go to Plugins, and I'm going to type in free images. Again, you're looking for the ones that have had lots of downloads, lots of them. I'm going to go and just type in Unsplash because I know there's a plugin. And you can just click over here, I'm going to run. Give it a second to load, and there we go. I can just click on these and they just appear. I'm going to undo that. You can click on a shape already and click on them and it will just stick it inside. Now that we know how to use cropping, we know how to go in here and say switch to crop and we can see the edges, we can start adjusting it. Yeah, that is it. That is free images inside of Canva. You can either use the websites or you can use the plugin. Super easy. All right. I'll see you in the next video. 60. Making AI Images in Figma: There, we're going to use artificial intelligences to make images from scratch the commercially usable. These did not exist. We just typed them in and the machines made them. Thank you, machines. Let me show you the tips and tricks on making them, getting the lighting right, and composition right. All right. Let's jump in. All right. I'm going to select the homepage, shift two to zoom in. I'm going to replace this image here. If you don't going to keep this one, actually, I'm going to put them over there, and I'm going to draw a rectangle and I'm going to draw a frame actually. You don't have to start with a frame. I do want to. Because I want it to be a specific size. Whatever size you draw it will be what AI fills it with. Okay, now down here, this is one of those features where you do need the paid account. I'm pretty sure heck if you're on the free account, pretty sure you need it, and you're going to use this one that says make an image. It isn't beat us. Yours is going to look different and probably work different. Every time I load up Figma, this is a little different. That is one of the frustrating things of a UX design tool is they always adjusting the UX. Anyway. I'm going to do is type in leather wallet on expensive wooden desk. You're going to have to work out what kind of prompting you want to use. That's what I have in my head. I'm going to click Make. We are going to wait for it all to happen. It happens in the cloud and just downloads it, so it can take a little bit of time. I'm stalling. I really don't like this animation. All right. I'll jump to it being done. It's working on. All right, so they took probably another minute to finish. Oh, I like it. Then it's like, all right, what changes do you want to make? Let's make changes here. Let's say I want a bird's eye view or top down view. You can make adjustments to this thing, like, All I want it to be not a wooden desk, but maybe a birch desk or I don't know. I don't know many wood types. But you can make adjustments as you go. I'm playing with the camera angles here, let's skip to it being done. All right, which best described? That's the one that I want. That was the original. This is the new one. You can click between them and keep which one you want you might decide, bright. What did I click on? I'm going to go back. That's a good point. I'm going to use my move tool, click on this image, click on side of it again. I've got it selected here. I'm going to go back to my make an image. Okay. Okay, so I've just worked out that once you're going to leave that flow, I don't think you can get it back into it. So I'm going to have to start again. I think. If you do find out, you can do it. Let me know. It might be something that they update. It's an AI beta. So do I have to do this all again? What I'm going to do is do this Birds Eye view, and I'm going to say Bright lighting. You might be doing different. You might say, you know, moody or you might be better at film and television than me or photography and come up with different lighting angles, maybe outside, natural light, top left lighting. You can tell it what you want. All right. That's better, maybe. Okay? So yeah, AI, it's pretty powerful that didn't exist in the world. Okay? It's a little hard Scott wallets we're going to actually have physical products. But for placeholders or supporting images, oh, brilliant. Now, I might go through and make a series of these and say, make it with close up on the stitching and kind of different angles, different lighting, but you get the idea. This will change this interface. But I don't know, LA's getting real good. So the world's your oyster. One of the things, though, that is interesting about it is, watch this. If I go and make a frame that's like this sort of shaped letterbox, and I do the exact same thing, but I'm going to let's add a little bit of extra. Oh. Added with a desk lamp. I'm going to draw another one, and we'll jump to it being finished. All right. I've got my desk lamp. Oh, I like it. Is that you'd be like, it's cropped off here. What it's actually done is if we go over here and let's say we want to crop it, we know that actually we don't need this white fill. It's just there for fun. This one here, this image. If I go into it and I say, I want it to crop, can you see? It's actually made a bigger image, it hasn't actually cropped it off. It's just made this standard aspect ratio and just clipped it to whatever you've made. There might be more that you can't see. That's just something to be aware of at the moment. Go and change this AI interface. I *****. But there you go. That is building images that are commercially usable using AI straighten figma, the results get good. All right, yours will be in the future. The results will be even better. I ***** the interface and more controls will be there. If it changes a lot, I'll come and redo it. But hopefully, it's not too different, and good luck with the AI. I'll see you in the next video. 61. Class Project 11 - Images: All right, class project time. I want you to work your images into your design. Okay, so go back to your brief and make sure that you're not doing wallets. Figure out your images. You can get them from either Unsplash or you can use the AI tool if you have access to that, if you're in the Pro version, and then start filling out your home page on your desktop Hi Fi. Now, your cards will look different from me. Okay, so where's yours? You might have done different examples. You might have used circles instead of rectangles like me, or like this one here where there's more of an interesting crop to the images. Up to you, but I want you to go through, get the images. I want you to experiment with using the plug in as well for either pixels or unsplash or anything else. I don't mind. I want you to experiment with it. Again, AI, if you have access to it, don't forget your persona and brief, making sure you're picking images that relate who your persona is, and take a screenshot. Upload it to the project slash Assignments and take us on social media as well, because it's interesting now to see everyone's projects starting to fill out, with actual images and fonts and stuff. It's the exciting time. All right, so go add some images, and I'll see you in the next video. 62. What is Autolayout & Expanding Buttons in Figma?: Hi, everyone. In this video, we are going to learn what an auto out is. And we're going to hug. Oh, yes, we are. Look, he's going to do all sorts of hugging. Why is hugging good with Auto outs? It is because it's awesome. I can't type. Come on, typing. That'll do. Okay, you'll notice that the button resized the text, and I can do cool squogy things. Look, squdgy squidgy and the text stays in the middle. It's all good and responsive. That is Autouts and why we love to hug. Alright, let's jump in. All right. Before we get started, just not a warning. Warnings bad. Pm prom. It is Aouts are the trickiest things you're going to do so far. And they are tricky. But don't worry. I've remade this video lots of times to try and make it more and more easy to understand. So this is going to be easy, I promise. What we're going to do is make sure if you're not already. I'm on draw from earlier. I'm going to go to design. All right. First up, let's zoom in on blank page, or you can do it in the artboard. Describe the frame tools, the FK. Draw out a button sized thing, and let's give it a fill. I'm going to use one of my style so that you can see it. Okay? So we've got a frame. Nothing really happening. I'm going to name it BTN, and this one's going to be my small button. All right, what do we do now? What we've done in the past? This doesn't work for the rectangle tool. You know, earlier on, I said, Hey, frames have special powers. This is one of them. It's the auto layout. So don't be doing this with a rectangle tool. Make sure you do it with a frame tool. Grab my type tool, click in here and I'm going to type in By now. Now, this is what happens by default, right? I'm going to grab my move tool, click on the outside and it just kind of sits in there, right? Like, that's fun. What I wanted to do is resize. So all I need to do is have the frame selected, not the text on the inside, but the parent. The parent is the thing a on the outside. This is the child. Grab the parent, and over here, there's a button says Autout. It's really common to use the shift a. And bam, I kind of works. Let's change the text from B now to Oh, look, it's expanding. My capsoc button is broken, so I'm having to hold down Shift and hard. Earn more. Oh, it's expanding. Let's look a bit more because it's not quite the size that I want. What I'm going to do is click on the parent and let's have a little look. See this icon here? If I remove the O out, you see, that's what we normally see. That is the frame icon. Undo, redo, undo, redo. You can see the icon, hash, and then this new icon, which indicates an auto out. It does the magic automatic stuff. We've also got some hugging going on. If you can't see the words hug, you might have to zoom in a little bit. But what's happening is the parent is hugging everything on the inside. That's what does its thing. What we want to do is if you hover above it, you see these little hashes appearing? That is the padding, that's around is in the middle and it's been hugged by the parent being kept away from the edges by padding. The default will be just whatever you drew the size as. So what we're going to do is over here, it says padding. You'll also notice the layout panel. The auto layout panel was new in your property side here, it wasn't there before. It gives you some options. What we're going to do is we're going to say the padding for the left and the right. That's the first one. I'm going to make that 24 and this 18, the top and bottom. It's a really common size. Maybe using multiples of eight is good. There you go. We can go and change it. Let's go back to buy now. By now, and the button will resize. The best bit is it just floats in the middle. That is a button that will resize to the text on the inside. If you need to change the size of the button, if I click hold and drag it, what happens is it breaks the hugging. It's got a hugging for the left and the right and the top and the bottom. If I drag it this way, you'll notice that it has a fixed size and hugs still top and bottom, but the left and the right are now fixed size. I've decided all my buttons are going to be the same size because they need a stack. Might decide they're going to be 200 pixels. That's the way you might do it. The good thing about it is that the button, you can see the text stretched inside. If you need it to go back, what you can do over here is see it says resizing. You'll notice this one has hug there. Look, I can drop this down and say actually go back, not fix with which it automatically switched to. Let's go hug contents again. It will try and squeeze itself all the way around as tightly as it can to the text. If I remove the padding, it'll be a bit clearer. I'll try and squeeze itself completely around it. But if we add a little bit of padding, like 24 and eight, it will try and hug, but it will respect the padding. Other things that might throw you off is this text and the inside here. Because I clicked once, I automatically got a resizing of auto width. If I say, let's say, fixed size when I'm drawing it and I do this, it'll work, you'll be looking at this going, Why is the text so high? I've said it to be this parent here. Look, it's set to hug, hug, but it's not hugging the edge. I've only got 24 pixels of padding, but it's bigger than that. It's because the text box. If I double click it is set to this fixed width, or auto height. Let's go to this first one here, which is autowidth. The textbox itself is automatically the right size and the parent hugging because he likes his children. That is auto out. It does lots of other things. But for the moment, I think that's a good little intro into Audi outs. And if you need to switch it to be a specific size, just drag it. Okay, and if you needed to go back, switch it back to hugging. Alright. Hopefully, that wasn't too bad. Auto lauts are super powerful inside of Figma. I'm now going to go and make mine have a corner radius of eight, and I want to overhear, go to corner smoothing, just to make it I don't know, more IOS. That's it. That is an auto layout button inside of Figma. Actually, one more thing, if you use the rectangle tool, you won't even get the option to convert it into an auto layout. Doesn't want to do it, so you need to start with a frame. Alright, that is it again. The final final. I'll see you in the next video. 63. Class Project 12 - Buttons: Alright, it's class project time. I want you to bind the buttons that you created earlier, that you might have done with the frame or rectangle and start afresh and make auto layout button. I want you to make three of them. There's going to be two on the homepage. I want those to be the hugging buttons. The ones that when you type will stretch out. And then on the checkout page, I want you to create a purchase button. And I want this to be a fixed width button. Okay? That means that it doesn't hug or expand. It is specifically 250 by 50 pixels. I'll show you. So these two buttons here, okay, that type and expand out and this one here on our confirmation page is a specific height and width. We'll use this later on in the course. Now Figma has changed to be a lot easier by default. Things you might run into in terms of problems is first of all, remember, you can't use a rectangle, you can't find way to turn it into an auto layout. Okay. If I do a frame, it's easier I can make an autout. It's got a color, but that's okay. I can see this auto out frame. The things that might cause you problems is over here. You might have adjusted it needs to be hug contents, both the top and the bottom for that hugging button that expands, and the other one is the alignment. You might end up with an alignment in the top left on my type tool now. Actually, let's color it. Let's go fill of color. Let's grab my type tool for the Tiki. I'm going to type into it, type into it. The other thing is that you won't find the Autout options if you're working with the type. Not the child, you need to be working with a parent frame. If it's not there as well, have a look over here. Is it converted to this Autu icon or is it still a frame? If it is still a frame, click it to auto out, and then you should get these options. Hug, hug, in terms of alignment, especially for your fixed width one, you might end up with something that is maybe top left. You can see this alignment here. Defaults to center now, never used to. That's one thing that might throw you. The other one is the padding on the left and the right. It doesn't really matter for a stretched button like this one I want to do here, the fixed width one, but it does matter when you want it to hug. If I hug it and I hug it, and the padding is set to zero and zero, obviously does that. When I do it for this button, that is a fixed width. Remember it's just set to fixed. I set it to 250. If I make the padding on the left and right down to eight, you notice it doesn't really change anything? The padding does change, but because I've got a fixed width, it doesn't really matter. If I make it 120, Oh's make it 250. It doesn't do anything. Pang doesn't matter. On a fixed box. There you go. So make your buttons, and I want you to send me a screenshot of just this group here. So it is in your exercise files. Send me the group of it in here. I'm not going to be able to check with your buttons working or not. Let us know in the comments if you are running into trouble and if you do fix it, and see if you can answer other people's questions, well let us know any problems you ran into. They do change the way auto layouts work to make them easier. This used to be a really complicated video learning this. I'm sure there's still some quirks and I'll be checking the comments. All right. Make some buttons. I'll see you in the next video. Oh, one last thing. Don't need to see this one on social media because everyone's going to have the same buttons. I was just going to say by now and more in different colors. Not very exciting. Upload them to the project section for sure, and we'll see your buttons a little bit later on in a fuller, more complete, awesome design. That's it. I'll see you in the next video. 64. Auto Layout for Spacing Navigation in Figma: One. In this video, we're going to use Auts. Same sort of features as the last video, but we're going to use multiple things inside of a louts because it does cool enough like this. I can move things around. This has padding around the outside that I can adjust like our button. You can see the top and the bottom is now 50. It's massive. Everything adjusts. I can play with a padding. I can play with a gap in between. I can make it two pixels, really tight. I can say, Alright, don't need this stack. I want it to be right, and I'm going to increase the gap again. We're going to do it with this button as well where we say, All right, it's a button that expands, but it's also got an icon in there. The icon can be either side and it expands and does cool Arooudy stuff. I love auto outs. They are complicated if you are new to it all. Don't worry, we're going to do it a few times throughout this course, but they are too handy. All right, let's jump in and do auto outs for spacing in our navigation. Infigm. Oh. All right. To get started, I've drawn a few text boxes with texts in it. This is just a line using the line tool, and I've got these. It doesn't really matter where they are. I'm going to move them around just for fun. They have to be separate boxes for all the autolou goodness to work. What we've done in the past is we put a frame in first, then put text in, then converted it into an Autout. You can cut to the chase, and you can select all of this. And if I say be an autolout you might have to scroll up and down, this is getting quite a big at the moment. Look out for the layout panel. So I got them all selected. If I click on this button here, it will wrap it up in a frame for us automatically and turn that frame into Auto. Watch out in the layers panel here. I'm going to click the button I don't know why I make those noises. It's put it into a frame. It's called frame 19. I'm going to call it Nav and converted that frame into an auto loud. You can still do it the other way. You could draw a frame and add this text inside of it, then convert it to an auto out. It doesn't matter. What it tries to do is it might have all you guys centered inside of it. Mine's on the left, just automatically tries to do it. Don't worry about that for the moment. Let's look at some of the perks for the auto out. One of the things because it's a frame, I can select the parent and say, I want the parent, scroll, scroll scroll to have a fill color of one of my secondary color. It's just like the button. The button here, we've done the same thing except we've got loads of things in it. One of the perks for that button is we get to add padding. Let's find the padding scroll, scroll, scroll. There it is there, I'm going to put 16 and eight. Now, you might have seen me in another video. I forgot to mention. I just tab. Can you see if I tab just tabs along the menu? I very often do this 24 tab 16 to save time. You're like, What happened to it? It was working. Now it's not. There's a couple of things we need to do. Let's check through the things that might be causing us problems. First of all, the parent, the Nav, is it set to hugging? Is it hugging everything inside? It's not set to a fixed width. You see this one's hugging, this one's not. I'm going to say, you hug everything inside, please, and that might fix everything. Normally it does. Might have another problem of how you created the textboxes. If I create a textbox and I drag it and type in home, you might just be in the habit of doing that from other programs and you duplicate that. It is fixed width or it might be an auto height. For this to be all responsive and good, you have to set it to this first one, which is auto width, there you go. That just means it's not a fixed width. I'll expand and contract as well. That's something you might have to go through and check this one. Here is set to fixed height. Let's go this one. This guy here I want to be auto width as well. This fella here, and this fella here. Is not text, so we don't have to worry about that one. It's just a line. We've made a box, with padding. Excellent. Some of the other perks for an auto layout is reordering. Like smart selections and tidy up. What we can do is we can say, I want you to be at the top there. I didn't have to select at all to make a group like smart selection. I can just move it around. I can use my rake to go down, down. I can duplicate it like I did before. Command or Control D. Okay? Going to add an extra one, and the auto out expands and contracts. So great for menus and lists. You can change the spacing by either hovering above it. You can just drag it or over here, you can be a bit more specific. This is the gap here. The gap appeared when we were doing the button, but nothing there was no gaps. So I'm going to make my multiples of eight and I'm going to go 24. Nice. Let's flip it around to do it. Another perk for the Auto out. Let's say we've got this one for our mobile design, but we want this one, I'm going to make a duplicate of it for our homepage. Up the top here, can you see the flow? It defaulted a vertical because it new. I wanted to go horizontal. Ah. At that. And what I might do here is delete this one, and let's add in a bar that's kind of up and down. So let's grab the line tool. I'm going to draw this one. I'm going to make sure it's one pixels. It's probably a bit tall. So I'm going to make mine 24. It escape back to the move tool. And what I can do is just dump it in there. Look, awesome eh. I really love that. Just throwing it into auto out and it will kind of adjust. I've made minus specific width. I'm going to decide, actually, I don't want it to be a fixed width. Sorry, I want it to be hug. So now it hugs, and it gives me this flexibility now to change the text and everything realigns. You start to see the perks of Auto outs, you could just line this up on top. You don't have to use an Auto out. I could just be a rectangle with type on the top and you get the links to work, it'll still work perfectly for a portfolio, but you're going to get lots of other people's templates and they're going to be set to order out and you're going to freak out after a while, you'll start using Auto outs as well because you're like, it's just easier to quickly turn into an order out. Cool thing about this is the exact same principle applies when I say, I'm going to copy this out, so I'm going to go here, I copied and pasted it and ended back in this. I'm going to pull it out. What I want to do is grab that. I'm going to bring in an icon. Let's go to here. Let's go to icons, conify, let's grab a home button. Someone home. I won. Which one? Pick one down, pick one that one, roundy one. I don't mind all of those sizes. Did it just appear? I didn't going to drag it out. Here it is there. What size is it 24 by 24? Sounds good. I'm going to line these up. Actually, I don't have to. Let's close it down. Let's grab these two. I'm going to convert it into an auto out, which throws it into a frame and also makes an auto. You're like, oh, it's doing the Huggy thing. Again, I can now go down to my fill so you can see what I'm doing. Let's go to my actual swatches. Let's go. This is handy. Can you see I've changed the fill to the parent. Let's call this one home button. Okay, let's call it BTN home. We're going off on a bit of a tangent here. I didn't plan on this, but I think this is another good example. Okay? I've got this selected, the parent. It's out. It's got a couple of things in it. The things I have selected has a primary color and there's some black in there. I'm going to say everything that is black inside of my selection is going to be white now. Cool. You're starting to see you're like, oh, we're making a button. Let's go and add some padding to our button, so a bit of padding, 16 and eight. Let's add rounded corners because I'm in love with them. You're like, Oh, I like that. The gap in between. Let's make that eight as well. Can you see it shrink down? That. It's a home button with an icon. Watch this. If I click the home icon here, I can say, ok. It moves around. I'm going to undo that. And if I change this to something else. The button expands, the icon plays along. We're basically done the exact same thing here. This is an auto out that we're using for a menu. The button is the same thing we did in the last one. But because we've got multiple stuff in there, we get this niceness where we can move things around. It's a bit more flexible. It expands and contracts. We can play around with the spacing nicely. We don't have to line it up and drag it across a few pixels and then measure it. Everything is done through the Auto layu. Break an audit out, just click the button again and now it is back to being a frame that happens to have an icon in it with text, and I can do stuff, but it's just lost all its auto layout goodness. I can set it now, make an auto out. I want to change my padding back to eight, and we're back in business again. I hope you're starting to see the perks of autolouts. One thing that did give some people problems the last time I made this video is they copied it and pasted it and it ended up outside of here. You you know, it's not going in. It's pretty easy to drag it in. But sometimes over here, QC, there's my features, and there's the Nav that I'm working on. You can just drag it into it. You can do this for reordering as well. If you want features to be below price, change it here and it updates in the menu here. Either way. All right. I hope that was helpful. What outs for doing spacing and navigation stuff. All right. I'll see you in the next video. 65. How To Use Constraints in Figma: Hi, everyone. In this video, we're going to look at something called constraints. Basically, we're going to make this in the end. You see the navigation stays in the top right, the logo stays there, can move you around. Everything is what we call responsive. They're called constraints inside of Figma. I'm going to do a few different levels. It's going to be easy mode. That's all I really want you to do. This is the essentials. Medium hard and super mega hard towards the end there just for the people that are able and so that we can do it early and we'll do it a few more times later on in the course if you don't get some of the more complicated parts. But let's do it all now. Let's jump in. All right. Let's set it to easy mode to start with. I've just moved everything down to the bottom. I have drawn an ellipse and I've brought in the logo from the other page. Constraints already applied. You didn't even have to ask. This is representing our navigation in the top right. Is a little dot, just keeping you see the little dots here? These dots are the constraints. It is constrained to the top and to this magic land on the left here. Not all the way across, just random size. Actually, it's the top size just over here. Can you see left and top? When I resize it, just tries to use the left hand side. What I want to say is, Hey, buddy, I want you to stick to the right hand side. You can either use the drop down or this menu here. Can you see it changes both. I want you to use the top and the right as your reference point. That way, I can say features box, which what happens to the dot. Look, he stays. He's sticky, and he will be that same distance. It's really useful. Undo that. Great for top navs. Let's have a look at this guy over here as well. You might not have done yours the same, but this is just a good example I want to show you. If I resize this parent frame, this card, watch what happens. Zuk but if I say you, little plus button. You constraint is not left because that's not working for me, on's right. Then I grab the parent frame again. It's called card one, and I redo it. Juju. Aha. You're like, who? Actually, that's pretty cool. All right, that's level one. We're ready to go to level two. It's not too much harder. It's like medium. Yours might not be doing it, but have a look. I want to give you a broken, for instance because it will happen. Can you see my logos doing weird stuff? This wallet here has its own top and it's left and it goes to here. The word Scott goes a little bit further inside of here. You see this guy has his own left. Same with this guy goes a bit further. That's why they're all doing different things. The easy way to around this is to say, Hey, guys, I want to make you a unit and get you all to do the same thing. The moment they're separate pieces. I can say you, my friend. I'm going to right click. I'm going to say you could group it or frame it doesn't really matter, but frames have more magic. Let's go with the magic is default to the top and the left. At the moment, it's going to here. If you get it closer to the edge, it will go, do you mean the left hand side? That's what we want for our logo. I'm going to say's have a look. There, you're there ready, Juuchu if I go this side, look, uji jug. I'm not sure why that noise comes from. Jug. Anyway, those are constraints. You can get it constraint to the bottom let's do it for this button here. I'm going to copy this. I'm going to go over here and I'm going to go a frame tool, I'm going to pick a phone iPhone 16, get it lined up, paste this guy in, and I'm going to say, see the default for him is top and bottom. But let's say you want this always to be in the spot here. It's not going to work. Different size phone, gone. What I can say is you, my friend, bottom and left. Now, watch this? Chuk chuk. He's stuck to the bottom. Andy? Watch this. Left and right. It's still not in the middle. It's sticking left. Imagine if there was one in here that weren't just left or right, but left and right. Watch this. You now are fixed at the bottom there. Look at us. We're doing it. Those are constraints, and that's the medium version. Ready for the hard one? We're going to add an auto out to this whole mess. Switch off if you're already full up. What'm going to do is I'm going to grab, I got some more buttons down here, place you up here. I've got multiple objects up here for my navigation. And by default, let's have a look, jug jug. The purple ones working. The other guys are doing all sorts of madness. Just like the logo, I can say you. I'm going to tidy them up first. Maybe align them. I'm going to add them to a frame. I'm going to say frame that selection. By default, it's going top and left, but I say, I want you to be the right, buddy. Now we've got this navigation that's got lots of things in it that moves around and will connect to the top. We're doing navigation now, but you will find lots of instances like this plus button, where there are times where you need groups to stick to an area. All right. Maximum hard level. Are you ready? I'm going to grab my frame tool and we're going to make a navigation at the top. This is getting hard. Probably shouldn't include it. I'll include it for the few of you that I like it. This is doing good. If mind is melted, that is good. Constraints will cause you problems if you don't know they're there, especially when you're new using other people's work, you might just have to go through and go, Alright, what's going on? Constraints, even if you don't know which way they go, just start smashing these and I'll try left. I'll try right. I'll try a scale. They might give you the result you need because maybe the designer before you and the template has gone a mess with them to be helpful, but it's not helping you. I've drawn a navigation by default, because I drew it over my logo. I'm going to name things, my logo, and my, circles. There's frame here, they're all inside. You might have to drag yours in if you don't work, I'm going to give it a fill. I'm going to go. Actually, I'm going to go to my colors. I'm going to use that one. No, that's ugly. I'm going to go that one. My logo can't be seen, so I'm going to click on the logo. This is not the hard bit. This is messing around. Purple can't be red. So with its selected. Everything in that frame, there's all the selected colors I've got. I want to change the purple, please, to white. I'm going to move it around so it fits better. I want you guys to be over a little bit. Let's have a look. By default, this navigation is really cool. If I grab it and I make what do we got got a phone, let's make a tablet version. Let's say UR iPad Mini. If I paste this and I need to make it smaller now for this other job, can you see, look at us. We did stuff. We made a navigation that can go on different pages and scale. Everything gets into the right position, super handy. That's maximum hard level. No, it's not. There's one extra hard level. I we learn auto outs. Will they work? Oh, no, there's two extra hard levels. One is this might as well be an auto out. It's not going to change it much except that I can do cool stuff where I can go inside of it, and move them around. Okay, so order layouts are handy that way. I can play around with the padding a lot easier, click off, double click back on to get just this group of these guys and I can say, you guys are a gap of eight. They tidy in. The super maximum level is this. What happens when I grab the outside of this? Can you see Juke? You're like, didn't we just make that responsive? We made this and everything inside of it responsive, as in we put the right constraints on it, so this thing works. But the outside we didn't mess with. What we're going to do is tie it together. You ready? Brain melting time. We've learned what we've learned, right, right, we've learned top. We've learned over here, we've learned left and right. Okay? Where this strains to both sides. There's the last one, which is this guy. Instead of being top left, which is by default and not working, top is fine. I want left and right to be scale. That means this navigation is going to scale to the parent, which is my features page. Let's give it a gook chuck. This is like inception where my circles, they are sticking to the top and right of the parent frame, which is the NAV. The nav to its paraframe is scaling. We've done a couple of different things here. I know it's confusing, man. I'm trying to Uh, it's going to be a little practice. We'll do it again in the course. I want to get all the constraints into one video. If the only thing you take away is that constraints exist and that you can mess around with them. Sometimes that's all you need. I do that sometimes. I've opened somebody's document, I'm like, Oh, what is wrong with this thing? I just click on stuff, figure out, start changing the constraints, and try and get a sense for, like, Alright, that makes sense. Alright. It was wrong, and now I've fixed it. Was this helpful? I hope so. I will see you in the next video. Let's make things easier. Actually, maybe another example would be useful. Yes. Let's do another example. 66. Combining Nested Frames & Auto Layout Constraints in Figma: Hello. Hey, we're going to make another example of constraints just to kind of get it in there and I'll show you a different use case. Also, we'll throw in an auto layout so that we can practice that as well. We with these. The cool thing about these is look, they shuffle and move. I can grab one of these guys, go to my mobile device, paste it in and decide, Alright, it needs to be a different size here, and the text can be changed. Here you go. Like we did in the last example. But now just another example. Let's go practice. Let's jump in. All right. Let's rebuild an easy version of these. These are a little bit more complicated to get responsive. So let's do something simple, just as a good example. I'm going to go Shift G to turn on my grids. You can scroll down and you should find if I click on features, you should find your grids down there. You can turn the eyeball on and off. I'm going to grab my frame tool instead of a rectangle because originally these guys were what were they? Oh. Were frames. It's always better when you're creating something purposefully with auto layouts and nesting constraints, is that you just build them from scratch. Trying to reuse something always ends up biting me in the butt. I'm going to create a frame. It's going to be four columns across. I'm going to give it a fill color from my swatches. Let's pick this one. No, let's pick something lighter. I'm going to turn my grids off Shift G. Okay, so what I want to do is I want to add my text down the bottom right like you saw at the beginning. I'm going to grab my frame tool. I'm going to put a frame inside of a frame. They call it nesting. You don't need to remember it, but this frame is inside of this one. I'm going to give it a fill color black. I'm going to. I want to line down the bottom. There. We know that if we resize this one for our mobile device, it doesn't really work because if I select on this frame, it is saying top and left. I don't want it to be top and left. I want it to be to the right and it's going to work. Grab the parent frame, and it works, but it doesn't do the bottom. Oh, I click on that guy. I can say bottom and right. There you go. Now I can resize this thing. I've got my little text box in here or a little bar that I'm going to put my text inside of. Let's do that. Let's put the text inside of it. Grab the Type two, and let's click inside of this guy and let's go to. Can't remember the words were, what words that I use. This going to copy it RFID and I'm going to put it in my textbox that has probably disappeared. If you don't use your textbox, it goes away, which is handy. Type two, click Paste, I'm going to make my font smaller. Mine 16, and I'm going to grab my move tool, move it around. No, click off, grab the whole box, and I'm going to put it in a bullet point. There's a shortcut putting a bullet points. If you put it in a hyphen in a space, it just automatically makes a bullet, or you could select it and go into your typography extra options and say, I want it to be a bullet. I've got that. I want it to be about this far from this site, I'm going to use my arrow. This is where you're like, All right, should we be doing lining it up like this? Can I just get it to jump into the center? That's where an auto out is super useful. That button exercise member made the box around it. The button expand and contract and we can play with padding. Let's do that. The parent of this textbox, let's give it a name. Let's call this one text block. Okay. There's my text inside of it. This thing here is black, and I want to just switch it to an auto frame. It wraps around my text. It's got padding. Just make sure it keeps working. Just keep checking as you go. Does it still work? If it hasn't just double check. I've got the frame, not the text selected. I want the frame selected. I want to make sure in this case, I want it to be right and bottom. That's perfect. The cool thing about it is because it's an auto frame, it's devolting to hug. Okay, If I change this to my other one, let's zoom out. Let's grab another one, Shift G from my frames, grab you. I got a second one. I don't want to change this one, too. What's our other text? I can't remember. I'll fix that up in a bit. My caflock is still broken. You go, it resizes because it's an auto frame and it's said to hug. If it doesn't do it. If it's just changing and it might be said to fix, so that when I change it, it doesn't change. That might be what you want. You be fixed. You know you've got a certain character size and you want them all to look the same. That's what you want. This brings up a good point. This now is in the center of this. The center. I want to write a aligns find what I wanted over here. What I want to say is this parent here, everything inside of it, remember alignment, it's defaulting to center. I can go right. Sometimes it does default to the right one right as in correct one because it's leaning to one side. I tries to do automatic stuff. I'm going to say this parent, everything inside of them is aligned to this site here. It won't matter if you've said it to hug. If I go to hug, it's on the right, but it doesn't really matter because it's hugging No spacing around it. So I'm going to say center, and I want it to be a fixed width. How wit is this one? This one is 215. So I'm going to say, Oh, no, that wasn't. I get confused sometimes with the positioning and the width. Does that happen to everybody? There's the width there, 177. So I'm going to say are 177. Is it 177? I'm going to line it up. And we should be good to go except I want it to be aligned. One thing you might find tricky is that if you do have a font, it tries to put it in the actual middle. If you've got a weird font or a weird bullet point, sometimes the bullet points can be a bit strange. Some fonts end up having a really big gap on below this X height and above these ascenders, these uppercase letters, you might have to play around with the padding of the parent. You might have to say, actually, at the moment, it's doing top and bottom 11. You might have to go in here and say, right, this splits it apart and say, right, top is only ten and the bottom is 15 because you have to do some fancy padding to make the font look like it's in the. I noticed that in some of the class projects. People were worried about that. All right. Last thing I'm going to do is I'm going to see you, I'm going to make another one. I'm going to super fast grab all of this stuff. Oh, I'm going to pause it there because this is advanced shortcut, just a cool shortcut. I'm copying this over here and if I copy all of this, what happens? Paste it comes through as the style from that original one. You got to go change the size it's a bit of a paint. Instead of just doing your regular paste, it works in every program, not just figma, Word Docs, Google Docs. If you hit Command Shift paste or Control Shift paste, it will paste it as just this raw stuff and will match that kind style that you have. I've also worked out that having a fixed width is causing me problems here. I'm just going to say traceable. There we go. Fixed. Last thing I'm going to do is add some images to these frames. I'm going to click on the color here and I'm going to go to custom. If it's got a what do you call it style in here, it doesn't want you to do stuff. So I click on this, you're like, where's my switch to image? I can just go to custom and then go to image. So I'm going to do that. I'm going to upload for computer. I'm going to pick pick one of these guys. That's the one I want. I'm going to add them. There you go. Adding images. Let's do speed mode for these two. So I got my images in and where this gets super awesome is if I grab them, go over to my mobile device and say, I'm going to paste them in here, get them into the frame, and I'm going to say, Alright, here we go. I've got them in. I can resize them for this different device, everything resizes. The images are set to fill by default. These guys have their constraints to the bottom right, and I did some fancy stuff where I went and said, Alright, this whole frame here is set to auto layout. I know this can be a bit confusing. The cool thing about auto layout is that I can adjust the font size. Let's go font size down or bigger for the mobile, and the parent frame around I'll try and hug it because auto layout likes to hug. It's a hugger. I hope that was useful to see some other use cases of using constraints and we combined in there an auto layout, just so we can do the text. Even if that's auto out stuff is maybe combining this is too much, just use the constraints. You just have a fixed width box. We won't stretch and get bigger. Just use the auto layouts for maybe the buttons where it makes maybe a bit more sense and separate. But anyway, I hope that was helpful. Let's get on to the next video. 67. Class Project 13 - Responsive Design: Class project number 131010. Dum dum, dum. This is a tricky one. Auto laustrits are quite tricky. So there's a class project so you can practice. Basically, what we've already covered in the class already is desktop navigation and some feature cards I want you to build. For the desktop navigation, I want you to build a new Nav that has these features in it. Let's have a look. I want you to let's go to desktop Hi Fi. What I've done is I've duplicated the original homepage and I just called it old. Then I went and built a new Navel on the top and some new feature cards. Just I don't know, we put some work into that. I'm going to leave that there. I want your top navigation. The main thing is to make sure that it does this, that it squiges and adjusts. Also be great. I haven't defined this and I can't really check it anyway is that this is an tout, so you can do these nice things. You'll also see that one of the icons or one of the text is actually an icon. That's the card. I've written this in the class projects, create Text list for our Nav, home features card and account and just make sure that the card is an icon. You can draw it. You can get it from a free icon site. You can get it from a plugin, I don't mind. I want you to create Nav for the mobile as well. This is going to be a little bit different and quite easy because we're going to go to mobile hi fi, and we're going to recreate a nav that's quite different. Just throw in the stropy lines, the burger menu, the Nav sandwich because we can't fit all the texts. That's why we have these little guys. Just put the logo and the stropy nav in there along the top in a box. It needs to be responsive as well. Mine's not. But yours needs to be. That little stroby line needs to stick the top and the right. Then the feature cards. They're just a copy and paste from one another so that you can resize them. I want the mobile ones to do this. Where you can change the size of them, move them around, and they adjust the same on the desktop here. Make new ones. They don't have to look exactly like mine. I want something in the bottom right here so that it does this nice squishy stuff. One thing you might have problems with is if I copy this because design on mobile or desktop first, I don't mind, copy it and if I go to Wi Fi Hi Fi and I actually go to mobile Hi Fi and I just paste it on this page here. You're like, A, I'm going to get this to move. It's not moving. Why not? I see the name that's a giveaway. It's not actually inside checkout. I can try and drag it in. Did that work? Went in. Sometimes it doesn't. What you can do is cut it, click on checkout and then paste it and it gives figma a hint of, he wants it in here. Then you can start messing around with it. Sometimes that can catch you out trying to get into the right place. Cutting it, pasting it is probably the easy way to do it. You can drag it in the layers, but these layers are getting pretty massive now, so it's a little bit harder. So that is it, and then once you're finished, take a screenshot, upload it both of your homepage on your desktop and of your mobile and upload it to the project section and also share on social media. We're at the stage where everyone's starting to look a little different. I'll be interested to see what you've made. You can get feedback from others. I can give feedback. There you go. Make navigation and a feature card. Make it all responsive and good. All right. It's a tricky one. That's okay. You might have to go back and rewatch the videos, check out the comments. If there's other students, they might be able to help you or might run into the same problem and have answers. So yeah, enjoy the practice. That's Class Project 13. I'll see you in the next video. After you've done your homework, not homework, 68. Nice Drop Shadow & Inner Drop Shadow Effects in Figma: Hello. It's drop shadow time. We're going to add drop shadows to the buttons, and I'm going to show you how to kind of add double shadows. I'm going to show you how to turn into styles, and I'm going to show you the super awesome, my favorite way of doing shadows. It's kind of a personal preference. You can do it to type A, obviously, to push it off when you're over the top of images. We'll do inner shadows as well for these kind of interface type options to give them a bit of depth. All right. Let's talk about drop shadows. All right. So my mobile Hi fi. If you haven't already, I've moved the purchase button from the desktop just over here. If you haven't copy it over, we made it earlier. I'm going to go shift two to zoom in on that selected thing and back off a little bit. And I'm going to go down to effects are easy, scroll, scroll, scroll, have the things selected, and find the effect panel. Let's plus and drop shadow is a default. There's a bunch of other ones. We're going to start with drop shadow and a really nice looking drop shadow. This is personal preference, but I've made a lot of drop shadows. I like X at zero. X is how far left it goes and Y is how far down it goes. I'm going to go X zero and two ends up looking nice and then playing around with a blur, often two is nice as well. You got to look at a zoomed out view as well. If people notice your drop shadow, you've got too much drop shadow. You want it to be subtle, I find those quite nice. The cool thing about drop shadows though, or any effects is with the selected, I'm going to zoom a little bit. Is you can add more than one. The effects here, I can hit plus again, often what I like is one that's quite tight like the first one we did, and then this other one further out and more blurry. Crank up the blurriness. Can you see it's like a combination one with it selected here. Let's turn one of them off. Can you see that fill blur. It really depends on the size of the object as well, this is not a hard and fast rule, but start with 02 and then add a blurry one. That's my favorite dropsh. Other settings in Drop shadows just in case you're interested. Blur is obviously how blurry it is. Spread is an interesting one. Let's just drag it up. You can grab the icon, drag it up. It's still a blur of two, but it starts further out. This can get cool when you've got this and got quite a far distance on it, it looks like it's further off the page, and we're going to have to make it a lot blurrier and probably grab the colors at 25%. You can drag the percentage as well just to make it feel like it's floating. Really like it. I don't use spread very much. There you go. Another cool thing about effects is you can copy them. There's this weird area here. Can you see if Hova just in this weird area, see, there's a little lines. I can click that once, hold shift, and grab him, copy it and go, All I'm going to use it for this other button over on my desktop Hi Fi, and I'm going to use it for this guy here as well. I'm going to select on this button, double click, go inside, and I'm just going to hit paste on my keyboard. You see I can bring it along. You can also set it to a style, which is lick, this guy. Here's my effects. I can say style. I can say plus, and it will pull through that effect that I've made, and I'm going to name my style. Now, it's a style. If I have nothing selected, click in the background. Can you see I've got my fonts, I've got my colors and look down the bottom here, super awesome style. You can adjust it. The cool thing about it is everything that it's applied to, you can go and change it here. Let's go apply it to. It's not going to work with this one, it's got no fill. But let's go apply it anyway. I'm going to go to my styles here. I'm going to say super awesome style. Uh, it'll work nice. There go. Obviously, Aussie drop shadows are great when you've got text. I'm gonna copy this above an image. Okay? This actually works right, but I ***** it would look better with an effect. I'm gonna go to. No, I'm gonna go to my styles and go go super awesome style. Again, minimal, but really makes it stand off from the background. Let's look at inner shadows. Inner shadows can be really awesome, especially with UI items, okay? Let's make a little switch. So I'm going to grab my frame tool. I'm going to make a little pill one. I'll make mine a bit big so everyone can see it. I'm going to give it a fill of my swatches. I'm going to give I call them swatches, but our styles. Going to use my accent 300, I'm going to grab brand of corners, and of corners. This one here, if you grab it and drag it and drag it away past, you need it. Do we do this early? I think we did. Just keep going until it's maxed out. You can go to 1,000 and it will eventually make completely round around the corners. That's one. I want to circle. Going to use the O tool for the ellipse. Draw out a little option here, like a little toggle switch. Pick a better color. Excellent. And here this pill that I've got selected, I can say you have an effect of where is it inner shadow. Inner shadows are cool to add a bit of depth to these things, and like before, the default here is all right. The blur is probably a bit high. You can use your arrows, remember, in these fields down, up. This one here, probably not as far, and you can double up, add another one, and we're going to do the same thing in a shadow. But we're going to go it's interesting to know you can go negative. Plus four, we can go negative for it to get it to come down to the bottom. I might have a slightly smaller one down the bottom there. Is it looking cool? I don't know, Dan. This one here, I'm going to apply my super awesome style too. Can you see you can add some depth to these things. Giant button. You get the idea in the shadows. Not hard, but now you can go negative and you can add more than one and you can turn them into styles. Or you can copy and paste them. Remember, it's kind of weird copying and pasting them. There's this kind of like no man's land there you can select and you can just hit Command C, Command B. All right, so that is Dan's super mega awesome drop shadow tutorial. Let's get on to the next video. 69. Blur Layer, Background Blur & Image Blur in Figma: Hi, everyone. In this video, we're going to blur stuff. We're going to do this glass effect where things behind this pop up model is all blurry. Can you see blurry? We'll also do it for layers as well, where this image here starts off quite sharp and potentially distracting. I'm going to blur it, move it into the background, darken it up so that I can put stuff over the top and it's non distracting. Blue stuff. To get started, let's look at the background blue. This is the funnest one, the best one. I'm on my confirmation page on my mobile Hi Fi. I've got the frame selected, I'm going to add an image to it, so I'm going to get rid of the fill, and I'm going to add and I'm going to add the fill back in and change it to image. I'm going to upload an image from my computer, and I've got one called map. So it's going on confirmation page just going to show Hi, this is your address, and this is where we're delivering or this is where we're based. This is my local area, and I'm going to put it in. Perfect. We are going to blur bits of it and we do it with the object on top. I'm going to grab my frame tool. This is going to be our pop up model that appears above, it's going to have writing on it, so we want to blow the background so we can read it. I'm going to give it a fill. And we're going to add the effect. It's called background blur, and it's going to blur everything behind it. The problem is, is that you can't really see what's behind it yet. So you're going to lower the opacity of this. This is the tricky bit to remember is that there's two ways of lowering the opacity. You can lower the opacity in this appearance for the entire thing, it works. Watch this. If I drag it down, I can see through it. But the weird thing about that is that'll lower the opacity of the fill and the stroke and everything in it, including the effect. That's not what I want. What I want to do is just lower the opacity of the fill color. I've picked white, but if I lower this down, can you it is blurr through it. You got to decide how opaque or transparent you want this to be. Okay? Basically, we want it to be it's just the cool effect kind of a glass effect where you can see through it. We can add text at the top. Let me jump cut adding my text. There you go. To make it look more like a pop up model, it probably needs rounded corners, you don't have to rounded corners, I'm going to put in eight, and it can be nice with a little drop shadow, so we can combine our effect. So we've got effect background. Let's add a little drop shadow as well. Remember the super special rule two by two and maybe adding another one for the more wafty version. Let's go to eight. We like it? It's probably a bit strong at the moment, but you get the idea, you can blur stuff behind it, it's cool glass effect. Let's turn off that show. All right, my first one. That works. Next one I want to show is layer blue. You can blur anything. You can grab this image and say effect and just say, I want the layer that I've got selected to be blurry. I don't find that particularly useful, and what I do find useful for using it is I want to blur a background image that might be a bit strong. We did it earlier by knocking the blacks down or knocking the lights down, sorry. Now, it's going to be for this background. I could put this image in and I could say, Al's my film. I want to switch it to an image. I'm going to show you how to do it wrong first. It's the natural way of doing. You're like, Alright, I got image. I want to make it blurry. You know, I want this to be more abstract. It's quite geometric and I want to remove some of the sharpness of it. So I'm gonna go to effect. I'm going to go to lab and you're like, Oh, cool. I'm going to grab that up, okay? And the only trouble with this is if I say, Alright, I'm going to get my menu now, it's going to go inside this frame that has an image that has an effect applied to it. Rubber. Okay? It does it do everything in the frame. So what we're going to do is do it kind of maybe a different way, not a wrong way, not a right way, just a different way. I'm going to bring in image. So Command Shift K, I use you a little drop down down here in that shapes panel, and I'm going to say you come in. I'm going to click and drag it, so I don't want to click on the background because it'll apply it to this frame. All I'm going to do is make it really big. It's going to jump off the page, didn't going to probably jump off the page for you. What you need to do is make sure that it's in the right page. I've got my features page there. I want you to be in there, which can be tricky, not going to lie. We are in fill. I'm going to go to crop because I want it to be in a certain place. I want this like that, I want this. There we go. Now that's an image inside of the frame, I can select on the image and I can say, I want effect just apply to that. You are going to be a label and I can crank it up as much as I want. Now when I grab my menu, copy, paste, I'm copying it from here and remember I'm clicking on the name of the frame to go into so it knows where to put it. Look at us. Other things I like to do with this layer blur is well, things that I don't do that I should show you. With the image selected, there's the image. Sometimes I find it easier just to select things in the layers. Yeah, double clicking. You might find the same thing. It can be a little bit weird or holding that command or control key down to click on the image. That works too. Okay, in my layer blur, there is a progressive one. It just means the progressive is where? Because my image is so big, the progression is over here for some reason. I can drag it over here to make it a bit more visually useful. What you'll notice is that can you see the bottom here let's crank up is blurry and the top is set two, zero, so that you can decide on how much you want it to be blurry. This is a cool effect. I haven't found really good use for it. I'm sure there is lots of them and you can flip it around. Can you see what I'm doing? Do I like it? Maybe. Go back to uniform. I'm going to lower it down a little bit. It's a bit strong. What I also like to do, we did this in an earlier video, just a little bonus recap. Is this image here? I want to darken it down a little bit. Mine's pretty dark, text will appear on top of it. It's not going to be too distracting. But remember, you can select on this image. I'm going to go into it and you could lower the exposure. Of this image, just to darken it down again. And remember playing around with the highlights, dragging those out, mine doesn't have many or any highlights at all, so I'm not worried about that. Another way of doing it, though, you'll see it. I use it a lot. I'm going to set that back to zero and that back to zero and come out of this. What you can do is you can have more than one fill on a layer. We did more than one effect. You can do more than one fill. I have my image and I'm going to say have two fills by default, it actually does what I want. It adds a black fill, but it also lowers the transparency or the opacity of it down to 20%. I can raise it Obviously, if it's 100%, it's full black, but you can just do this. It's almost exactly like using the exposure. The reason I'd like doing this way sometimes is that if I'm doing multiple images, I can be consistent, whereas playing with the exposure is looking at it, tongue out, head, **** sideways. That's what I do anyway. I'm like, yeah, what was in it? Yeah. Okay, where is this, I can just copy this and make it 30%, so they're all consistent. But it doesn't really matter. I like that for backgrounds. Blow them out a little bit. Now when we start adding our objects, it's kind of this cool background, but it's not taking away from the front or my content. Alright, those are a couple of blurs. We've got what were they? They were layer blue, this one, and then we had the probably more cooler background blue, the kind of glass effect. Right. That is it. Oh, that's almost it. There is a new feature in here. I wasn't going to cover it, but I'm like, Oh, that would be cool for this. There are other effects in here. I've given you the basics, you can explore. Any other ones that appear? The one that's just appeared is this one here, noise. By default, it's a bit hard, but can you see how if I get that down, density, the density up, and maybe not so black, lighter. I'm going for the glass effect, that kind of frosted toilet window effect. So there's a little bit of playing around. I haven't got a magic number for it yet. It's just dragging, tongue out, head coocked and deciding kind of does this add to it? Does it not? It look more like glass? It doesn't. But now you know how to use noise. You can obviously do that for images as well. But for the moment, that is it. Blurring done. I'll see you in the next video. 70. Class Project 14 - Effects: Team, Class Project time. Easy fun one. I just want you to practice the effects that we've learned over the last few videos. Drop shadow in a shadow layer blur and background blur. I don't mind how you implement them. What I've done is the ones we did in the tutorial, that is the background blur. I did mine to my homepage on my Hi Fi. I went through and did kind of fuzzy background layer blur for this abstract thing. I still wanted it quite light. That's what I did, and I did my drop shadows. And here I just threw my interface in a shadow thing here. Up to you where it goes. I did it on the text as well, and I want you to take a screenshot of that includes it all. I've ended up with two screenshots for mine. You might combine all of yours in one. So there's mine and there's mine. I'd love to see it on social media as well. Upload it to the projects, obviously, but also share it and tag Mass on social media or on our Facebook group, LinkedIn group. Love to see what you make. All right. Enjoy making effects infigma. I'll see you in the next video. 71. What Are Components & Instances in Figma: One. Let's talk about components and instances. Basically, they allow you to create one master component that controls lots of other ones. Watch this. I can say I want more padding in the top and the bottom or less, and they all go and change. The nice thing about them is that you can see you can keep your instances of that main component unique. This one is its own color, has its own text, but I can control things like let's go the font weight and make these changes. These update, but keep their uniqueness. Really cool. Let's jump in. Let's talk about components and instances. All right. Let's first make a main component. We're going to start with our button. You can use anything. I'm just going to copy and paste it over here. Just keep it separate. Okay, so what we want to do is this button we spend ages kind of getting it how we want, we want to reuse it. But we want the control, like you saw in the intro of being able to adjust this main component and everything else adjust. So first of all, we need to turn it in to a component. You do it by up the top of your properties panel here. Can you see this little four diamonds here or the shortcut, that is Command Option K on a Mac. Control Holt K on a PC. That was hard to come out. But you click on this, nothing happens. You're like, happened. One thing that happened is in your Laos panel, I'm going to see here undo that was when it was an auto layout or a frame, whatever it is. Once you've changed it, it gets this little diamond feature. You're like, All right, what do you do now? Well, we can make a duplicate of it. I can say, I want another one. What happens is can you see the icon on this one? It's a copy of it, but it gets a single diamond. That is the main component, that is the instance of that main component, parent child. Now, why is this helpful? I'm going to have one, two, three versions. Actually let's have three versions. Min and three instances of it. The cool thing about it is, watch this. When I change the main one, they all change. That's super helpful. I might decide that the padding needs to be 32 and 16. You'll notice that the 32 didn't do a whole lot because who remembers? That's right. It's not hugging. I'm going to change this to hug the cool thing about it because I changed that one that I might have forgotten about like I did there, all of the children or the instances of this main component change as well. What's really cool is that these instances can have uniqueness to them. Say this one wants to be a different color. So I'm going to say you are no longer. Oh, there's a fill behind that. No, that's selected colors. There's the fill. Showing me the white text. Here's my fill. I can say, actually, I want this guy to be my primary color, this one here to be my accent color, and I'm going to leave that one normal. I'll leave that my secondary color. The cool thing about them, they're unique, but look, they all still have that main control. They can be quite unique. Same with the text. We got to buy now. We'll get our purchase button. Stupid cats lock still broken. These are unique, but still have this main control. You can go into here and say, right, this guy here for some reason because he's on a different page and he's to look different. He can have no corner radius. Again, we can still control it with the parent. You might decide that this one here, actually, let's do a more kind of global change. So I want to change this from heading one. I'm going to break it because I want to use a light version, and they all become light. That is the power of using a main component and having instances. Another perk is that this is quite messy, right? Everything is in here. Okay? I can go into my Assets panel, which we haven't looked at yet, and it should have my button in the library. It's not here. Where is it? Components get added to the library. Sometimes there is a bug. Hopefully this goes away. I'm have to close figment and open it back up. You wait there. It's not. They're just changed the UI. What it's saying is on this library here, there it is there. There's my button. I don't like this new way of working. I just like the more listed here. It's for when you get really big projects, you need to say in my library for this file, Okay, that's the first page on this document, where is it here? That's my first page, so that's why it's showing that. In that page or in that design document, here's all of my assets. You can drag out. I'm going to go back to this page here that we're working on and go back to my assets. I can drag out an instance this way. It doesn't matter if you copy and paste it or drag it out from here, you are creating an instance of that main component. This gets handy when you start creating libraries and sharing with people. They can go, Alright I want all the assets from this dock and they will be listed here. What should be a component? Basically, at your design stage when everything's a bit conceptual, you don't need components in instances. As soon as you locked anything in, yeah. They should be components. Like this logo here, we're happy with it. I'm going to say you, my friend, are going to be a component and it ends up as a logo here. It's got a white background so you can't really see it. But it just means if I go to another page now and I go, right, I'm on my Hi Fi mobile, instead of having to go back to the document, copy and paste it over and have no connection now, I can go to my confirmation page, go to my assets, and just grab the logo and drag it out. It's consistent. I'm going to add an effect. I'm going to add actually my style that I made before. Super awesome. Still doesn't quite work. I can change the color of this one here to my library color. We've done some modifications to my main component. But if I go back to that main component, that's a good trick. How do I go back to the main? I know on my Layers panel that I'm working on this instance. It's the small diamond. How do I go and find it? You can right click it and say, main component, go to main component. I jumps back to my page that has it, and I can say, actually, I am missing with the size of these. Got to use the K tool. I'm going to make it bigger. You probably won't be able to tell that, Let's do something else. Let's destroy it. No, I told shift. Let's make it bigger, way bigger. What we do if we go back to mobile Hi Fi, you see, I got really big. Awesome. Another trick for these is that let's say you have done some adjustments and you want to go back to the original, I want to use this again, but I don't want to have all of the stuff that I've done the purple and the drop can go to reset instance, it goes back to whatever the main component is. You also might decide that actually on this page here, you spent ages getting it right and you like it like this. It's the right size. You can go the other way. You can say, actually, I want this to be the main component now, not main component, but I want to send all the changes to that main component. Can you see it here says push the changes to the main component. If I go back to desktop Hi Fi, it has got those new settings. I got new color, it's got the new size, still too big, still wrong color, but you get the idea. I'm going to undo that before I rect my logo. Leave it there. Let's chick it. It's still got its overrides. So I'm going to say, actually, go back to where is it reset instance? All right components. You'll start with one or two and then you'll start to find that you've got lots of them. And you will find other people's templates that you're working from. You will be grabbing them, copying and pasting them for their document or working from their template, and they'll be using a lot of instances throughout the document. And if you want to change them all, all you need to do because you have no idea where the main component is? You're like, this is definitely an instance, or this one here, definitely an instance. Where is the main component? I could say right click and go and take me to it. Go to it, please. Now is just there. Oh, and last thing is we did this earlier on when we're copying and pasting from somebody else's document, you can actually go and break it. You'll end up with instances that you've copied and pasted, and you're like, I don't want it connected to the main component because it is. It can link across documents. Let's say you don't want that, I can just say, actually, I want to detach this instance. We did this earlier not knowing why, now we know why because we don't want this main component that's connected to it. We might break it and make our own. We can right click it or go up to here and say make component or create component. Now we've got this main component that's now Ls that we can use, and it's not connected to somebody else's document from a long time ago. Right, that is it. That is components and instances, main component and instances of that main component. Do I explain that good? It's complicated. Hopefully, it makes sense now or at least a little bit more sense. We'll practice more of it. All right. That is it. I'll see you in the next video. 72. Where Should You Keep Your Main Components in Figma?: Hello, there. We are going to organize our main components because we are very organized. A lot of designers have this OCD issue where everything would be nice and organize on another page. That's what we're going to do. It's good UX etiquette and for those messy people out there, you. I'll show you some tricks on how to kind of leave it messy and your main components everywhere and actually find them. Right let's jump in. Let's get organized. Let's start tidying it up. We have got our main component here. Remember, if you can't find your main component, you can right click and say, where is it? Main component, go to main component, so you know where it is. I'm going to cut him, and I'm going to go to where am I going to go to. I'm going to make a new page. This one's going to be called C po Let's. I'm going to drag it so it's at the top here and I'm going to be on that page, which I see. I'm just going to paste it. Very big. It's best just to keep your main components on a components page so they're easy to find. We've only been doing this course for a little bit, HiFi. Look at it. It's methias. Whereas now it's just really good habit to keep them on a components page or keep them separate so that you know where they are, especially when you're working with somebody else, you don't want to them to have to go through and try and find out where that mystery main component is. I'm going to make another component. I'll show you another way of getting it there. I've got this whole thing. It's going to be my main Nav. I'm going to the moments just a frame. I'm going to turn it into a component. Click the button, or use your shortcut Command Option K or you can right click. All right. It's not going to make it a main component. Let's do this one, right click and go to create component. And I don't really want this on this because if I end up messing around this, I'm going to affect all the other pages. So it's best to now go, right, you my friend are going to move to page, or you can copy and paste it and I'm going to move it to my components page. What I'm going to do is go to my assets, and I'm going to go back and I'm going to go back again. This file here under my components panel, I'm going to just have everything in here and then it's just all in one place rather than spread across, what it does here is on this page and if I have another component, I want to show you where it's messy. If I do it this one and I create, this is going to be my card, so I'm going to go shortcut Command Option K or Control Alt K on a PC. I've got my component, I'm going to give it a better name. Card A, I'm sure I'll create another one. You can see it's definitely a component because it's got the four diamonds. Now if I go back to Assets panel, you can start to see I end up with components on every single page. But if I move them all off, watch Mobile's here. If I go to this one here and say, A, you are now going to be moved to my components page. Can you see it tidies it up? Same with my Hi fi. I've got the logo here somewhere. I can right click it and say, go to main component. There it is there and I'm going to say, and now move to. Come on, move to page components. You'll just see that in this document, I just have these components. Tidies them up. Otherwise, it shows you all the pages that they're on. They understand, Dan, they do. I'm going to add that in perfect. Now you could just leave it all messy and lying around. You do at the beginning and then quickly, you end up like, just going to move them to another page. If you do decide to be the messy person and just leave them lying around your document, that's totally fine. In the Assets panel, if it is really hard to figure it out, you can just search. If I need that card that I just made, I can type in card and it's just going to give me the card. This is really handy when you're working with, say, a larger document, when there's just loads and loads and loads of different things. Loads of different buttons are mixed in with everything else and you just want to search for buttons. Good point, Let's go back to my components page and let's do some naming. Button small, I already did that one. Now, I am Good. I've already named these things, card one. I'm a genius and logo. There you go. I don't need to rename anything. You're here, though, I'll show you a cool way of going through all of these and renaming them. Let's say it wasn't called Logo, I can hit tab to go down to name this one because often you end up with just frame 47, frame 52. Hands up if that's you already. Yeah, I knew it would be you. You can just tab down, rename them, tab down. Is that useful? I find it useful. Searching, make sure they're on our own page and another trick as well to find the main component. You can right click it. I've got this instance here now. You see over here, I can say, go to main component, does that. You'll also see when they're not on a frame, you can see the name, but you can also see the icon. You see when it's on a frame, you won't see the name or that little icon. Now it's just a matter of lining these up. I might have a button section down here for the OCD people in the course, you can start lining things up, labeling them, grouping them, and have them in special places. You have a second button, you group them together, make them easy to find, get your feng going. That's it. It's how to tidy up your components. You don't have to. But as your projects get bigger and when you're handing them off to other people, you probably will. At least for the illusion of being organized. That is it. I'll see you in the next video. 73. Class Project 15 - Components: It's class project time, and if you're skipping class projects, don't there. There is a little bit more to this one. I want to add a little bit of interesting stuff before we do the class project. Okay, let's talk about what we need to do, and then I'll show you the stuff. I want you to make components page, and I want you to create two logo versions, one button, one Nav. Let me show you. I've got my Nav the two logos. I've got one that goes on a dark background and one that goes on a light. So you can't really see it there. It's a darker version of the logo. So when you're naming it, it's hard to know. That's the actual light logo, and that's the dark logo, but this one's called Light mode, dark mode. It's really common in UX to give it the name of where it's going on the background that it's going. Light mode, dark mode, you've probably bumped into before. This is being used in light mode as in there's a white background, this would be more appropriate. On a dark background, that's more appropriate. Use light mode and dark mode. So the two separate main components, rather than an instance that you've changed. If you're having trouble seeing some of your elements, you could put a frame around this. There's no problem having a frame makes this a little messier, unless you can see your dark mode, or you might just change the background. So have nothing selected over here, you might find a background that's kind of like a happy middle ground on this particular page so that everyone can see all the different elements. The other thing that I want to share with you if you're not doing the class projects, you should, is this one here nested instance of a logo. So we've got our Nav up here. Inside of it, we've got our navigation, which is this thing on the right here. Okay. And I probably never really name that one. Let's call this one Nav hyphen buttons. I've also got this logo in here. It is not an instance of this. This just the logo that we made earlier. You can see, it's still a frame. What I should do? Because the problem is now if I make a change to this, you can see, if I make this bigger, this doesn't come along for the ride. This is called a nested instance, means that I've got my main component and I want an instance inside of it. Explaining it didn't help, did it? So main component. I made an instance of it that I'm going to use in this navigation. I'm going to get rid of this guy and I'm going to put this guy in. It's not the main component. It's just the instance of it so that I can work on this separately, that needs to be down. But the cool thing is that when I mess around with this, because this is a main and that's the instance of it, that comes along for the ride. I've got this bigger control. I've got this whole Nav bit inside of it is an instance. No reason why you couldn't have the main one in here as well, so that maybe would be easier, but it's not. It's just nice to have the logo all by itself rather than baked into this because you'll use a logo in lots of different places, not just the NAV. Let's just have an instance in there. All right. If you're not doing the class projects, which you should be, you can go now. For the rest of us, make a page, make two logos, one dark, one light, a button component, and the NAV, which has the nested logo. Deliverables, take a screenshot like that of everything on your page and upload it to the projects. We don't need to share this one on social it's not particularly interesting. We'll share more later on, but make sure you upload it to the projects, slash Assignments, and that's it. I'll see you in the next video. 74. How To Make Component Variants in Figma: Hello. Welcome. We're going to look at what a component variant is. We've done components in the last video, just something reusable that's in our assets library, but we're going to take it a step further and combine two components so that later on, we can say, A, you, you can actually have two different variants of the same thing. It's nice. It keeps things nice and simple. I've got one button that can be many things rather than trying to drag out lots and lots of different ones. Same with this one here, we made this variant. Smoosh them into this thing. I can say actually I want the Hova state or the disabled state. I called variance and we're going to do that now. Let's jump in. Right. Button variance. I'm going to create mine on my components page. They can go on any page you like, and I have drawn this. It's just a simple frame with some text in it. Nothing else. I turned it into an Auto lout so I can get the cool spacing, but that's it. What I'm going to do is I'm going to duplicate it. I'm going to have two versions of it, and this one here, I'm going to call secondary. I want a button that I can reuse that is just ready to go with my secondary color. That is the secondary color. All right. This one is going to be the primary. I got my primary and secondary buttons. I'm going to turn them into components. So I'm going to say you, my friend button primary are going to be a component, scroll to the top, hit that button, you as well, both components like we did. This is basically all we're up to from the last video. See my assets panel, there's two of them, two of them is fine. But when you've got three of them with your third color and then you've got another one with outlines and different font sizes and bigger buttons, smaller buttons, you can imagine this asset panel getting really big. What we can do is I've got my two components. I can select them both. What happens when you select two components at once, see the top here, says, Hey, would you like to combine these as variance? You're like, Yeah, that'd be awesome. What's happened? Not a lot. Got a dotted line around the outside. What happened to my Assets panel, can you see goes from two, redo to one. That one now contains lots of stuff. Wow, lots of stuff. More than one thing. With it selected, I can go over here and say, look, I can say you're the secondary button. Ah. Oh, you can smush different versions or variants into one component. That's what variants are. Let's do another one. This one here again is let's have a look at the frame. It is just Auto lot with some text in it. Not a component, no nothing. This one, though, I want to do a button more typical on websites where I can say, I've got one, two, three. This one's going to be not my outline, this is going to be my primary button. This one here is going to be my hover, when you hover over it, and then we're going to have an option for this button that is disabled. Let's change them when you hover above it with your mouse, I'm going to change the color of the stroke to be darker, same with the text. The text is going to be the darker color when you hover over it and the disabled option, I'm just going to knock down the opacity of everything inside of it to make it see through. Can you see what I'm doing here? Just like you've seen disabled buttons before. Now we need to turn them all into components. There's a trick to do that little faster. You can select them all. Instead of just doing one at a time, you can say, see this little drop down here. When you've got multiple frames selected, it says, Hey, do you want to make a component? No, I want to create multiple components. Can you see just did them all in one go. Happy days. Now, though, if I select them can combine them into a variant. Again, I got a variant and if I go to my Assets panel, I've gone I'm going to undo undo from one, two, three things messing up my Assets panel to one. There he is there. Drag him out and I can say, AT one has to be the hover option. No, this is going to be the disabled option. That is a component variant, just like a component, but with some variances. Let's tidy these up a little bit. Instead of calling component two, it's a bad name, this is going to be called my BTN outline, just so I know what that is in my Assets panel. You can name it over here or up the top. The other thing we might do is with the main component selected, not the instance that we dragged out. This guy here. We can go over to this and say, go to the settings here and say, actually, what property am I selecting? Because that's what we do. We go over here and say, what property do you want? Ha primary? I want to go over here and say, be a bit more descriptive and say, not the property. I want to put the button state. Then you can pick from disabled hover and primary. You can drag these around, depending on which way you want the order of the drop down to appear. So now over here, this one here, what button state do you want? You can say, I want primary, the top one. There you go. You made an ultra complicated component variant to make it more complicated, just give you the language while we're going along. That is now was called a main component, and it still is, they call it a component set now. That's what the little dotted lines around the edge mean. It's just the way of saying this guy here has special abilities, all smooshed together in a variant. So drag out an instance of it, or you can drag it straight from the main component like before. You can drag out a copy of this. It doesn't matter. This guy here, I want to change the button state. Name. You can't have to do it to the main component. Then I can go into here and say button state that can be changed. Same over here, you can say, all right, I want to change the word hover in here. You can't do it on the instance, but you can go back to the main component or the component set and go to the settings and go into here and say this is not primary, this is something else. So do your editing on the component set or the main component. They use both of those words for these things, and the instances, you just go through and make the changes that you want to see. I want to pick this variant. Was that helpful? Hopefully, it was. Again, this is in the essentials course, it's reasonably advanced, mainly because you will find somebody's button, you'll be like, Awesome. I've copied this button. Ah, I wish there was other versions of it, and you might just have to go over here and check it and go, somebody's done all the work for me, and you'll get to a point where you're like, Man, I just need to combine a few of these guys, and you can make your own variants. Alright, look at us. Hardcore Figma users. All right, that is going to be it. I will see you in the next video. 75. Another Way To Make Variants in Figma: Hello, we're going to practice making variants again. I'm going to show you another way of making them. Basically, you can just make them within the component set rather than making them all first, and I'll show you a cool trick where you can turn these into little toggle switches. Oh, I love a toggle switch. Alright, good practice. Let's make another variant. I'll show you some other cool tricks. And of course, the toggle button. How does he make that? Right, let's jump in. Okay. To get started, I have made, actually I just stole this from an earlier tutorial where we learned drop shadows. So this is nothing but rounded corner frame, with a little circle in it. Nothing going on. I'm going to convert it into a component, just like we did before. It's a shortcut Command, Option K, Control Alt K on a PC. Okay, I've got one of these. And if you scroll to the top up here, okay, I've named it Toggle Switch myself. Okay? And can you see this little option? Okay? Instead of just signing two of them, you just click this. And look, I'm going to add a variant. And it just kind of like does all that work for us instead of, like, making two different components and selecting them both and then turning it into a variant. Make a component and say, I want a variant of this component. Does it work for you. The second one here now, I'm going to double collect to go inside. I want that switch to be over here, maybe the background color to change to one of my neutrals, so the switches off. Like before in our assets panel, we can just drag it out. We end up at the same place. It doesn't matter if it looks like this or if it looks like that, we've ended up with an instance that has different variants. Our naming is all very badly, but it's the same. You can add another one again. You see this I've got it selected. Can you see this little plus appears at the bottom, you can add another one. Not sure what button this is going to do. Stuck in the middle button. I can grab it as well, and I can hit my maybe Command D or Control D on a PC to duplicate stuff. It doesn't matter how you make your variance. You can copy and paste them, duplicate them, hit the little plus button. It doesn't matter. Whichever works for you. What I'm going to do is I'll show you a couple of other things. I I'm deleting these buttons, can you notice the little dotted line doesn't rejig to wrap around. You can grab the outside and you can make this any size. This is just a visual cue for you to know that, hey, this is the important thing. Component set, the main component, and you can adjust it as you need. The interesting thing is, this is just more of a fun trick, is our naming, right? If I click on the main component. Over here, you'll notice that there's two settings. This little universal properties icon is everywhere. This one of the top here is a generic one. What I want to do is down here, there's this other option here so I can jump in and do my naming. This one is going to be I can't think. I'm going to call it. The editor would have cut that out, but I was sitting there squinting my eyes, trying to think what it's going to be called. I call it the position for this button because we didn't name anything. It's called default in variant two. You'll end up with lots of these. Okay? We could give them other names, but if we give it the secret name, re if a secret name? On. And if this other ones called off, look what happens. Okay? If I hit Enter now, get rid of that. If I click on my instance, that dragged out either from the library or copied from here. I'm holding my option key on a Mac. Oh, counter PC, doesn't matter, they're all the same. All instances of this main component. Look what happens. There's a toggle switch. To, click, do add your own sound effects. I don't know why that's awesome, but if you use the word when you're naming your variance on and off, it will make that happen. You can call them true and false, yes and no. I don't know why this makes me happy. Okay? I love a toggle switch. All right, so it is quite complicated. Let's do another one, a super simple one. If for the frame tool, I'm going to draw out a simple rectangle, and I'm going to say you, my friend are going to be a component, and I'm going to make a variant of you. This other variant is going to be a different color. It's going to be a different size. And now over here on my properties panel, there it is. And he has two variants. Why don't you do that at the beginning, Dan? I probably should have. But you get in the hang of it. We made the complicated one first, and then this super simple one later on. You can use it really quickly, really simply and it just keeps your library nice and tight. Make sure you name your stuff. Otherwise you've got to frame one that's hard to understand what it's for. What's really good about it is later on, when you're copying and pasting other people's work, other designers in your office or maybe you're using a library from somebody else. On the Internet, you can click on things and you might just find there might be some other options all hidden in there. All right, I'm back. You didn't know I left. I finished up and I was like, Oh, we should do one more because another really good use case and just help us practice is the light and dark logo. We've got those already. We made them already. We've already shortcut it, right? We've got these two versions. They don't have to be on top of each other. I don't know why I'm stacking them, but I can select both of these now. Oh, go straight into being a variant. And now it's tidied up our library. Instead of these two things, we've got just one thing. We can drag it out and we can say, Alright I want logo light mode or dark mode. Go. I might change the naming now. I might say, instead of called component two, I might just call this one logo, and inside of it, I'm going to go into these properties, and I'm going to say the property is mode, and instead of called logo dark mode, oh, where do we go? I got lost. Back to you. Instead of logo dark mode, I'm just going to put can't type. Dark mode, tab down light mode. There you go. Another really good use case, a lot better than the toggle switch or this guy. As glorious as he is. All right, that is the end end. I'll see you in the next video. 76. Class Project 16 - Variants: Hello, it's time to practice what we've been practicing. I want you to make some of your own variants. Okay, so we're going to make four of them. Three of them we've already done in the class. You can just kind of do those if you haven't already. And then the last one wants you to add a checkbox down the bottom here. Even if you're not doing the class project, you should. I'm going to give you a little tip about where you might go wrong. So have a look what you're gonna make. I want to make a button that has two variants. One is the secondary and one is the primary. I want you to make a toggle switch with a little toggle option. Same with the logo, there's going to be a light and a dark mode of these guys that you can switch between, then I want you to make this checkbox, what you might bump into, and it's something that I very rarely bump into, but it happened while I was making this. I was like, Oh, here. What ends up happening is See this, I got my checkbox. It looks right. I've got one without the tech, one with the tech over here. I'm like, A, I'm just going to switch it to I can't switch it to anything. I turned it on, but then it won't turn off. It's weird. It's because here, this component set has two variants in it. The side by side instead of on top of each other, it doesn't matter. What does matter is the naming. This guy here is called default and this guy here is called default. I can see over here in my layers panel, default and default. This guy doesn't know what to show because they're both called default. We can rename it, we can grab the check box. We can go into the properties here. Actually, we can't only one of them there. Got to do it over here. I've got one. This is the empty. There's a better name for it. I can't think of it. Inactive, that's probably it. This one is going to be checked. Because they are different, now this thing knows what to do. It can say, right, I've got two options, not just default, you can turn them on and off. Either of these, if I called, let's do it to this one as well to break it. I'm going to go into here and I'm going to call both of them dark mode, dark mode. Gets rid of one, but they're both called dark mode. So this thing here, don't know what to do. Dark mode, dark mode. So make sure both of your variants have its own unique name. That often happens by default. Component one, component two, component three, component four. I don't know how I got mine to both be called default, but I did it and you might too. There you go. I want you to create these four and I want you to take a screenshot of them lined up like this where I can see the set and the example of it and upload it to the project section. Enjoy making variance. I'll see you in the next video. 77. How To Add a Popup Overlay Modal in Figma: Hi there. Are you ready? We're going to do this. Three, two, one, one, Go. I love this. It's a prototype where this modal here pops up over the top of everything. I can close it, it automatically pops up over the top of an existing frame. Let me show you how to do that in figma. For this to work, you need to have the thing you want to pop up on its own frame on the background. It can't be on any other frames on this page here, you have it just off to the side. I've drawn just a little frame with some icons and a button in there. I can just be a regular frame. It doesn't matter. I've styled mine to look like a newsletter pop up. What we do is we switch to prototype mode, which is shifty, or you can click on Prototype up here. What we say is homepage here, I want you to go to there. We don't want it to have a Navigate two. We want the action to say to open an overlay. That's basically it. Let's have a look to see what that does. Let's prototype the homepage. Let's go to Prototype. Wait for a load. And it's set to on click, so I click at once. The newsletter appears. I don't know. Something awesome about this. Doesn't close, but I don't know, Sms so what we need to do is let's click on the Y here or the noodle, say, not on click, we want it to say after a delay. I'm going to say after about say 4 seconds, 4,000 milliseconds. Let's give that a go. Again, I'm going to preview this guy, say play. Okay. And after 4 seconds, 4 seconds. There it is. Hey. It appeared. It doesn't go away. We'll leave the preview open. Let's look at a few other things. With it selected here, after delay 4 seconds, I want it to be scentered. I want it to close when clicking on the outside. That's pretty common and I want the background to have just a fade over the top. I like 50%. Looks quite right. And the animation, let's get it to dissolve in. And let's give that a preview now. H here. Let's hit Reset. Remember, it's key, 4 seconds. Go. Go. Oh, it almost worked. Faded in, which is good. Now if I click on the outside, it goes away. Why didn't the black background appear? Let's have a look. Background. So I turn that off. Did you see that? Anyway, I lame figma. It's probably me. After a reset, three, two, one. Go. Fades out of the background. I can subscribe to go to my subscription page. I don't have that button set up yet, but if I click off in the background, it goes away. All right, so we've done email newsletter. You can have that for an alert, let's say, instead of a button. So I'm going to say, when this By now buttons clicked, I'm on prototype on By now, it's going to go to this other frame. Do I have another frame over here? Frame. Those are all images. That's a frame. I don't want it to go there. Let's just draw a rectangle and it's going to be red. Say it's an error message. We'd have to design that. But for now, I'm going to click on the button and I'm going to go to prototype shifty and I'm going to say go to there, but I want to be on click. I want to not navigate too, remember, I wanted to open the overlay and I want it to go to frame 29. I've called this pop up model. That's just what I named it. Modal is the generic term for a unit that's not another page, I appears, like a little group. It's a model. Centered, close when clicking, background let's do it all. That's all good. All right, let's give that a go. Home page. And let's preview. Actually, we just go back to here, hit reset. If I click the B now button, I get my little warning dialog box it appears, or it might be like, are you sure? You sure you sure? Or it might be you haven't filled out this field or whatever the pop up model might be. Another thing you might research is just some of the terminology. I've used model. If you might have heard that before, my accents a bit maybe hard. Not model, model with an A. There is also things like pop ups, dialog boxes. They'll call them as well. Warnings they'll call them snack bar is interesting. Google snack bar. That's interesting. It's what happens on mobile phones. It's right down at the bottom. It's a little pop up. They call them snack bar. There you go. It's a cool little prototyping technique for pop ups and that is it. I'll see in the next video. 78. How To Make & Prototype a Tool Tip in Figma: Hello, we're going to do another overlay, basically the exact same features with one other change, and it is this tool tip where the overlay doesn't land right in the middle of the page like we did for the email newsletter. Watch this. When I click this. It appears just above the thing that we're working on. Now this is quite a long video only because I just make it, we make it together. If you came here just for this tool tip and how you get it to appear where you want, I'll cut to the chase. Basically, all you need to do is like we did before, we're going to do on click. We're going to go open overlay. The only thing we change is the positioning. It defaulted to center, which is right in the middle of the screen, which is not what we Okay, we want to say manual. Then manual, you can move it anywhere you like. Still needs to start life off screen and you can change it to manual and then just move it where you need it to appear. The same technique on click Olay, it's going to this frame called Olay CC up here, and I switch it to manual, then I can drag it around. But for the rest of us who want to build it all together, it's hang out and make. We're going to build this I and this pop up tot up here. I won't do this. I've made my checkout page more full, put an image in the background, and then I drew some rectangles in text. You know how to do that, you can do that on your own. I have got just a white rectangle with some text, with some rectangles with rounded corners that kind look like fields you might type your credit card into. So we'll skip that bit and we'll get into building these more unique parts. Let's jump in. All right, so the long boring way of doing it is let's dot together. I'm going to go, Oh for my circatol, draw out a circle. I'm going to go to the design. I'm going to give it a fill color of my accent color. We might have more of an informational color often information is green Success is green. Actually, information is blue. You need to work out what you're going to be for information colors for your website. Er is always red. Conformation is normally always green. Information is blue or gray. Let's put our I in the middle of this. Let's go the I tool. Actually, I want to put it a letter I, I'm going to use the type tool, which is T, type in an I. And for some reason, I needs to be. I'm going to break the link to the style. It needs to be a serapont. I don't know why, does. Feels like it does. I'm going to move my no. I anally use my rakes. Okay, hold a shift to tap it over. That looks good to me. If things aren't lining up, it's hard sometimes to line these things up. If you skipped over it earlier under preferences, up here on the F preferences, there is a snapped pixel grid. You can turn it off so that it's a little easier to align in the center of this. What you can also do is click on this I, hold Shift, grab the circle, and you could use this horizontal. The shortcut is option H or Alt H on a PC. Vertical is the same option or Alt, but V. I use that one quite a bit. I'm going to make that white, and this is going to be my little group here. Are both of them clickable. I'm going to shift click them both. You can see them here. They're there. I'm going to turn them into a frame. I'm going to say right click, I'm going to say frame that selection there one little unit that I can move around. It's like grouping. That's that part. Now we need the bit that we're going to get to overlay. The big thing to remember is that you can design it down here, but it needs to end up out of the frame, otherwise it won't work. I might get the basics in here. I'm going to group the frame tool and go, I want it to be about this big. Awesome. Now I'm going to grab it and drag it up here and for some reason, didn't have a fill. Not sure why. I'm going to grab this frame. And realize I can't use a frame for what I'm doing. Frames have to be rectangular. You'll notice even the circle that we put a frame around ended up with a box. This is one of those ins where they still need the rectangle tool. Half of the rectangle tool are roughly about that size. The cool thing about the rectangle tool is that you can go into it and break it apart with the pen tool, which is what I want to do. I want to go to some rounded corners first. Let's go eight. No, it's too much, four, I'm going to make it white. I'm going to grab my pen tool. Actually, we're going to go to draw mode first. Let's do that. Let's go to draw Mode. Let's go inside the drawing mode, which is Edit object. I went to here, draw mode. I've got the selected, I go inside it. You can either double click it or click on that button there, which was called. Come on, Dan, you can do it. That one here, Edit Object. I win. Now I can grab my pen tool and say, I want an extra there. I want one there, I want one in the middle, and then I'm going to grab my move tool. And just drag that down so I've got some extra points. Oh, it's rounded, even. I like it. Nice. You could just use a triangle and smosh them together using the shape builder tool, but that's going to work for me. I want to move mine across probably. I'm going to hold shift gravels, drag them to this side, it's going to be my little modor. Gonna grab my type toe, put it in here. I'm going to get heipTO I'm not sure what they're using as the backbone for their rewrite this. I'm going to email like an email to my boss. I want CVP x. I I wrong? There you go. Oh. Make changes. Make it no more than how many words? One, two, three, four, five, About eight. Oh, let's do seven. Amazing what you can tell it to do. C. It's white text, which is not good. I don't think you can do it to do that. You can't use AI at the moment to change colors, but there we go. It's not very good either. I probably need it to say things like, it's on the back of the card. But anyway, that'll do. So I'm going to stick these together. I'm going to make sure they're in a frame. That's one of the rules. The overlay can't load a rectangle onto it, but it can load a frame. So I can just select all of this and say you, my friend frame selection. I'm going to give it a better name than frame 30. This is going to be overlay, CVB. I like to put the kind of generic word first that if you've got lots of them in your Assets panel, which we don't at the moment, all the overlays are grouped together. Anyway. I think we're nearly ready to go. Let's give it a whirl. Shift E, go to prototype mode. Shift E. ShiftE doesn't work when you're in draw mode at the moment. Should. But it's not. I was in draw mode, Shift E doesn't work. I got to go back to design. And then go to Shift D. Gates, I'm going to say, you, my friend, are going to go to there. I don't want to navigate there. I want to go to OnClick. I would like it to open overlay like we did before, and by default, it's going to load in the center. Let's just give that a quick world to show you. I like to preview it at all steps because if you break it, you don't know where along the last 20 steps you did so just keep previewing it as you go along and that works. It's right in the middle. It's not what I. Okay, first of all, I want to add under the design, shifty. I want to add drop shadow because that looked a bit weird. I've got my style from earlier, super awesome style. Can you see how styles start becoming useful once you're getting into the meat and potatoes of the design you need consistency. I want that to be the same as that drop shadow that got applied there. Alright, so let's now go to this. Go back to shifty. Prototype mode. I'm going to click on the noodle or the wire, and I'm going to say on click open overlay position, not centered or top left. There's some defaults. You can click on manual. A manual's cool. Let's move that other way. You can just move it wherever you want. It has to start life and live up there. But once you've clicked manual, you can drag this around to say, I want it to appear there when the overlay interaction happens. Instant, let's do a dissolve. Let's close when clicking the outside. That makes sense. Preview again, hit Reset, which is the Archie I click on this. Oh. Look at us. Pop up overlay. Now, click is useful, especially when you're doing mobile. When you're on a desktop version, it can be nicer just to go to. Click on the noodle and I can say Instead of onclick, I could say on hover while hovering. The reason that won't work on mobile phones is you know why because you can't hover, but you can hover on a desktop. This is quite nice for a desktop. Just make sure when you are doing this for mobile, it is set to maybe on click. Us. It's another pop up overlay. We've done it more as a tool tip here, but the term is the overlay and the rules are just make sure that the frame that you're going to get to do the overlay or the pop up or in this case, a tool tip is outside the parent frame. One of the things that catches people out when they're working is they might do one and they might be like, they've got that wrong, and what they do is they go, actually, I want to go to this other thing. They've got two applied. What ends up happening is can you see over here it's freaking out. It's like, you can't have two. Got an on hover and an on click and what you might find is let's try and change this one to on click. Can you see it's grade out? It's like, uh, I do it? I've spent ages trying to figure out why I can't on click. And I just didn't realize there's actually two applied to this. Because sometimes you're working over here. Clicking on it, you're like, Alright. It's going to switch this to on click. I can't like, Oh, why not? Because you're not really looking over here. Just be careful. If it is grade out, it's probably means you got two of them. Okay? I want to get rid of. I'm going to keep my on click. You just minus them. Now, all is well in the overlay world. Right. That is a little tool tip pop up modal overlay. Throwing all the terminology. You've probably heard of them all already. But anyway, that is it. I will see you in the next video. 79. What Are Flows in Figma?: All right. In this video, we're going to talk about flows. That's these things. You've seen them around. What do they do? Let me show you. All right. So what do flows do? Basically, they're just the place where prototypes start. You can't see them, remember B on prototype, Shift E. We know Dan, we know, and you might see them. You might not. If you don't see one, it's because you don't have any of your prototyping setup. This one has no flow. Watch. Nothing around here, but if I connect it to something, watch what happens. If I connect it to this, flow three appears. That's why you end up with multiple ones because this has no way of getting to this. This is a new flow. This one only goes to up to there. This one here, goes to up there. Let's have a look at our earlier one. Let's go to mobile ifo Lo Fi even. We've got one flow because that goes to there, goes to there, goes to there. That is continuous flow. If I have another page down here, a frame and a frame, I'm prototype mode, so I'm going to do I get another frame? I didn't. You go to here. I get flow to because these do not connect up. The reason you'd have two is that you can actually share with people and say, Hey, on the same page, I want you to check out the home page, but also this other flow that I've created. Let's do a more interesting example. I have got this from the template library. It's called Onboarding Logging and Signup Where did I find it? Is this one here? I don't know. I just search for signup flows. I found this one. It's a good example. There's a registration, you've got an email verification, forgot password. There's all these different task flows that do not connect to each other. There's no way of going from the register page to the forgot password page. We've got our first one. I've connected these up. Just a real basic flow for the register. I go down here and say, forgot password is going to go from here. As soon as I do it, flow two starts because it goes, all right, this is a completely different flow. And what's cool about it is that I can preview straight from here, so I can go, Alright flow one, hit play, and I can preview this register flow. Then I can go to this one here and preview this one. Flow two, forgot password. Which is not loading. Come on. It's not working. Why is you working? Hm. I don't know why it's not working. Let me think about that. Let's have a look at another way of getting to the flow. If you just hit present or you go to this other tab, you will see. It's a handy way of sharing with people. You can say, Look, you can go to flow one or Flow two. This one or that one works in here. I don't know why. So there's no way of getting from this first one. To the second one. So you can use the navigation over here. If it's not up, you can click on this. The little sidebar icon here, and that's what flows are for. Let's go and name our flows. You might have got flows by accident. You might be like, actually, I don't want that to be a flow. What you can do is you can click on it or actually, you can click in the background with nothing selected, can you see, there's my flows? I don't need you. I'm going to say you are dead. I don't want anybody to get to get access to this other frame. It's not a starting point, it's just something that I'm working on. What you can also do is with nothing selected. Over here, it says flow one. You can double click it and say this is my purchase flow, purchase flow. If I go and preview it over here, actually I only have one flow, don't I? If you only have one flow, it won't show this by default, you can turn it on. Purchase flow. Let's have a look at this one. Actually, you get the idea. You can name them. Description can be useful as well. Purchase flow here. I got nothing selected. Purchase flow, I can go into here and and I was staring at the screen for a while going, Where the heck is the description? I figured it out. You click on it here, the actual tag that's hanging off that first frame. Then there's this little paper looking icon and you can add a description. This might be these include the changes from D. Okay? So that when I preview it, there you go. Includes the changes for Doug. You can change where the flow starts by dragging it. Say you need it to start here and these are maybe back pages. You can drag them around. Undo that. Another useful thing is with nothing selected over here, you'll notice that next to this flow, let's create another flow. We didn't do that, did we? If there's no flow to start with, you can add a flow, flow starting point. Bop going to call this my testing flow. Okay. Now with nothing selected, I just clicking the background and we'll get our two flows, there's these options here. This one here is really helpful. Let's say we got lots of flows on our document, and we want to link directly to this one. It's copied to the clipboard. I can go into my email and paces and say, this link here, Doug, this will take you to my purchase flow. Then you might just separate these out because sometimes sending the preview to somebody that you got to explain, you got to click on this little icon and go through these ones can be a bit tricky. If you just want to have them in documentation or email them to somebody, sometimes nicer just to go and paste them in separate links. And we open up in a browser. It's loading in Chrome, and it goes straight to that flow there. If you want to go to the testing flow, you just copy the other link. You know how to copy links. Let's just do it anyway. So I got nothing selected, I'm going to go to my flows. Oh, it's not working. I'm on my type tool. Go back to your move tool, and then have nothing selected, and then I can say I want to link to this one. And when they open the link, it'll default to starting here. Do it, Dan. Okay? All right, click on the link, and there you go. It jumps straight to my weird white page task flow. That's what flows are for. Just where everything starts, you'll start to see them appearing. You would have already wondered what they do. Now you know. All right. Onto the next video. 80. Slide In Mobile Nav Menu Overlay in Figma: I Hi, everyone. We're going to make this. It's a mobile nav menu that's going to slide in. Okay? Let's give it a preview. I go to click on my little burger menu. The menu slides in, then I can close it and it slides out. Something very fun and tactile about this one. It's using skills we already learned, which is cool, putting together in a different way. Alright, let's jump in and make a mobile nav in Figma. Alright, I'm going to start with this mobile nav already made. If you want to see how I made it, I'll do it at the end of this video, but for now, just rectangle with text in it. Let's get it working. So what I want to do is I want to make sure that this frame is not on top of this yet. We're going to use that overlay feature. Okay, so Shift E to move to potter I want the home page. Actually, no, I want this burger menu here to go to this mobile nav here. Obviously, we're on the mobile Hi Fi page. Okay? So when that is tapped, I don't want it to navigate to. I want it to open an overlay, and I want it to be positioned, not centered, but top left. Let's give that a go. Let's preview it. Let's preview this guy. Well, sometimes it's hard to click the flow because that wire was in the way. There we go. Let's click on the Nav. It appeared. Kind of. And then it won't go away. So let's have a look. I'm going to click on the wire. I'm going to say on tap, that's good. Open overlay, top left. I don't want it to dissolve. I want to move in. From which direction we'll get it to move in from the right. And let's make the easing nice. I like the ease in and back. Okay? Well, actually, no, I like in and out, but let's see what that looks like. Let's get to play, have a look. Zuko. It's a bit fast. It is getting mixed up in the letter box at the top here in case what we're going to do is do a couple of things. I'm going to have to adjust my nav because I want you and you to go underneath that. That means you and you are going to come down. And I want to click on this wire here and go easing. I just want ease in and out. And let's make it a little bit longer. 0.4 seconds. Anything else you want to change? Yeah, that is it. So let's go to preview again. Yep yep nicer. I still need to move that down. We could go and add all of the other parts to the navigation with the battery and the Wi Fi and stuff like that. I don't want to do that now. Now it works, I need to close it down because it won't close. There's a couple of easy things we can do. Let's click on this wire again. We can say win clicking outside, close it and add a background blur. But mine up to 50 and that'll do one part of it. The other part that I want to do is I want to make this work. I want to say, my friend, what I want to you. This is a weird one. I don't drag it anywhere. What I can do is I can add an interaction to this button that doesn't direct somewhere. With it selected, I can say, actually, just add a interaction. This is the same as dragging. If I go and drag here, I've added interaction and it just prefilled in these things. But if I say, going to get rid of that one. With it selected, I can say I want an interaction, but instead of on tap, yes, I want it to be on tap. The action is going to be close overlay. You can see it doesn't go anywhere, has that little now let's give this a preview, Let's go Zouk and then go Jug Look at us. Not sure why I like it. Something very tactile about a menu coming in and closing it. Nice. The other things I need to do is wire up my buttons. When you click Home, it's going to go to this page here. When it goes to features, it's going to go to this page here, and Cart is going to go to this page here. The thing is it's remembered the last interaction that I did, it's probably going to do some weird stuff. Let's go and let's go to features and it slid in from the right. Just remembered it. What I'm probably going to do is go through all of these and instead of moving, I'm just going to go to Instant or dissolve. Instant moving, and on tap is good. It's moving down. Come on. Instant. All right. Give that a preview, and there's one last thing I think we're going to need to do, and I can get to features, and then I click the menu, click the menu. So that's not working. So what I can do is just rig this one up. Okay? I can say, when you clicked, go to this, get it to overlay, get it slide in, do all that stuff. But it's probably, well, I know it is easier. I'm going to undo that is to grab this menu here, the one that I've already made, copy it, delete this one here, and go paste and go to this one and go to paste and go to this one and go past. Logo underneath this one I'm going to get rid of. Okay? And I'm going to grab this one, go there. And that is it. Hopefully, that's going to work. Just check. I'm gonna check one of these guys. Yep. So all of the interactions came along. Let's give it another preview. Yep, let's go to the features page. Go back to the menu, get a cart, and go back here. Nothing on my cart. Look at us. I got a mobile nav that works. Basically, we use overlay for this. We used it for our pop up menu. We use it for our tool tip, handy little feature, and you can go now. You're dismissed. If you want to hang around I'll show you how I made a box with text in it, it can be handy because I've made these a little bit different with some spacing around them, or using tools you already know already. So hang around if you do want to see it. Otherwise, I'll see you in the next video. Carry on. See how then made. Right let's get building. All right, so the working part of this is let's just build it. I'm going to draw out something that looks like a navigation. I'm going to put it on my page just quickly just to kind of get it the right size. I want a little bit of area on the right hand side here because I have space and I want to let people know we haven't gone to a new page and so they can click the background to close it. Once I'm done, I'm just going to move it off, we'll build it over here. Let's give it a good name. Let's call this one mobile. Okay. And let's add the logo from our Assets panel. So logo, there it is there, J ****** and we're going to go light mode or look at us using variance. Okay? And I want to grab the type tool. I'm going to have a home button. What I want to do is make the home button a bit easily clickable at the moment it's quite small. So what I'm going to do is make a kind of padding around the outside. The way I do that is I need to add it to an autoframe because it's easy to add padding, right? But you can't add an auto layout to just text. This has to be inside of a frame. Frame selection, and I'm going to say, now you're Auto out only because I want this. You don't have to do it this way. You can just drag the frame out and move the text inside of it like a button, but I'm just doing it a different way. Showing you different ways. I'm going to go eight by eight so that it's a nice big easy thing to click with your finger. Alright, because I want these to be separate buttons, I'm going to have them in separate textboxes. So how many do I want? I can't remember. Let's go. Oh, we should make this. Let's do it properly, Dan. Let's make this now a component. Okay? So we're going to go Come on option. Okay, now it's a component. I want to have, do I keep this main component here? Often not. I like to just have it on my actual other page. Actually, this is just on the No, that's all good. It should be cut and paste onto my page for components. Okay? And let's go for mobile Nav button. Okay, let's go back to that same page. Where are we Mobile Hi Fi, and we're gonna drag out an asset from that. You go. Alright. Now I'm going to drag out an instance, one, two, three, four. Alright, so we've got home. Remember we can change these instances to be unique. We've got home features. I'm going to call this one cart now cart. Actually, so I need three of these, your website would end up with more, right? You gone. You with these all selected, if I zoom in far enough, I can see these little lines here. You can do it manually over here under spacing. We're just using the smart guides here. All right. Now we need a little cross in the corner. I often cheat and just use the same font that I'm using, hit a plus. Some reason Xs don't do well. They never look like a cross, and I'm going to make it bigger. No, I'm going to use my catoFescale, make it bigger, and I am going to outline it, so it's not a font. It's going to outline stroke. Now sissa shape, and I'm going to rotate it around. And now we've got our cross. Is it big enough to click? Again, I might have to stick it in a frame. Just to give it more clickable area, that's probably enough. But again, I could go and turn it into an auto frame at padding, or just go through and drag the frame a bit bigger. You grid the thing inside of it, move it along. There we go. Mostly in the middle. Good enough. There you go. And that is where we kind of started the video. I want this to kind of line up a little bit, there. And just because I like to add drop shadow, I'm gonna add my kind of where we go effet. I'm going to add my super awesome style. I'm gonna break it, okay? Because I probably need it to push cause at the moment, it's pushing down. Okay? It's all pairing off the bottom there. I'm gonna go four and zero, which pushes it four pixels to the X axis, which is right, and the same with this one here. Oh, I didn't realize it showed you that. Can you see there? It's showing you which way it's actually pointing? Oh, it's fancy. Two and zero. Nice. Alright. And that's where we began our tutorial. That probably wasn't that helpful. We added some text, but sometimes it's good to see it. Good to use a variant, which is cool. Alright, onwards and upwards. I'll see you in the next video. 81. Class Project 17 - Prototyping: Alright, time to make your own prototype. Okay, I want you to make three things. So the pop up model, we did the email newsletter in the tutorials, the tool tip for the CVV and the mobile navigation, which we just did. So we've done them all before. I want you to make sure you've done yours. Take a screenshot and show them to me. When you are taking screenshots of them, be in prototype mode so that you can see all the lines, okay that connect them all up. Okay? So take a screenshot of this whole thing. Yours doesn't have to be a newsletter. Okay? I've given you some other options, but you can pick anything you like, some sort of delayed time pop up, okay? Email sign at the cart confirmation. I've given you a few other ones there. The tool tip doesn't have to be for the CVV, it might be something else. And when you are doing that, you're going to have to put together some kind of, you know, card input data and go check out other templates, see what other people have done, what makes it look like a good, trustworthy form that you might put in. But I don't mind what the tool tip is. It can be for something else. Same with the mobile Nav. Have it slide in on mobile Hi Fi, but it doesn't have to look like mine. It can slide in different directions. It's more about the mechanics of getting it working. Alright, so enjoy making prototypes using a lot of overlays. I will see you in the next video. 82. How To Pin Navigation to the Top in Figma: Hello. In this video, we're going to make a navigation that sticks to the top where things slide under. I'll do a quick version because the actual technique is pretty simple. And then I'll do a longer version where we look at a bit of transparency and we'll do a little sandwich bar at the back. All right, let's jump in. All right, the quick way is you grab the thing you do not want to scroll. You want to fix it to the top. And you got to switch to prototype. That's the thing I keep forgetting. I know my students forget, so you might forget is you got to go to prototype, and you say, this thing here selected. I want the position. You want to scroll with the parent? That's just scrolling and it moves along. I want to say no, I want it to be fixed. The other thing you need to do is you need something to scroll to. At the moment, my content finishes before the end of my page, the thing won't scroll because there's nothing to scroll to. I'm going to duplicate this, okay? And it's over the edge here, and I just need to double check that it's still in the homepage. I can tell because it's clipped off. You can see over here my homepage layers, card, the new card that I've made, card four that I'm just going to drag down because I don't know, OCD. Go there. Okay, one, two, three, four is hanging off the edge, but it's still part of homepage. Twil that up. I know that it's in there. There's one last thing is you need to have the parent frame selected and say, What do you want me to do with this overflow under scroll behavior? I want to scroll vertically, please. Now let's give this preview, have a look. Hopefully now oo, we've got stuff to scroll in. The big thing to remember here is there's three steps. You need to have the thing fixed. You need to be into prototype, okay? Do it fixed. And then overflow needs to be vertical. Okay? But you don't do it on this particular object. That's all caches me out. Sometimes. I'm like, Oh, yeah, do the vertical scrolling. Perfect. Okay? It's the actual parent frame, not that. You want this overflow set to vertical. And you need something to scroll too. Three things, you're golden. All right, let's do the long way now. Bit of transparency, and I want to show you just my workings and there's a few little interesting things that you'll bump into. I want to go back to Design View, so Shift E to get rid of the wires mainly. It's hard to have lots of scrolling, what you do is you click on this homepage and you say, I don't want to clip contents. You don't have to have that on. That's more like a visual stuff. You can have something really long, I'm going to duplicate these. Actually, I'm going to go back to my Assets panel. Did I create a card? No, we didn't should have created a card. Did we do it on the homepage? We don't right, should, I should grab this first one now, turn it into component so that I can control it globally. But just for this video, I'm going to ignore my own advice and just carry on with a few of these. This one here has this one ended up outside of home? Have a look. So no, he's still in there. Cool. So you don't need to move this back up. This can be as long as it likes. Okay, I'm going to go to here. And when I preview it, okay, the preview, I'm going to use shift space to preview it. Okay? And I'm going to scroll now, and you can see it scrolls down. It's still contained within the phone. Get what I mean? Even though you've made the frame longer. Obviously, you need this while you're working. When it's published, it gets trapped inside the phone. Whether you have clipping on or off, it doesn't matter. Next thing I want to do is I want to add a little bit of transparency to my NAV. What I'm going to do is I don't have a navigation for my mobile as in a component. I've got these all as separate frames. What I'm going to do is turn this into a component, Command option K on a MAC, Control Alt K on a PC. Now it's a main component. I'm going to copy it or cut it, move it to my components panel because we're being super awesome. I've got the Nav here. Let's give this one a bitter name. Call this one NAV. Mobile. Cool. Let's go back to our page. We're doing mobile Hi Fi. I'm going to say, it's penal where are you? That you up?'s bring him out. Get him in there, make sure he's in the right page. This is just double check. Sometimes, yeah, he's in homepage, which is good. I'm going to delete him, delete him. Delete. What I don't want to do is drag out the Nav from the Assets panel every time, so I'm going to copy it. And if you copy an instance, you just get another instance. Paste. Again, if you click on the name, it kind of knows where to put it. And let's go make this purple part a little bit transparent. Let's right click it. I accidentally go to Maine there somehow. Or you can just go to components panel, and I'm going to grab my purple here and I'm going to have to break the link because it's not transparent. If I do the appearance to this, it'll do the whole thing. I want to break the link to this, and I'm going to say this is going to be 80%. Have to do some back and forth from this other page. Let's go to mobile Hi Fi washes out a little bit. Looks good against that background. Let's just give it a preview. Anyway, shift space bar and you can see, it's not pinned anymore. Let's turn all that back on. You, my friend, remember under prorototype. Scroll parent? No, fixed to the top. I've already set the whole page to be vertical scrolling so that should work. Shift spacebar I do like it when it goes up underneath there. Like the color there. What I might do is pick the darker color. I'm going to do it the proper way this time, go to mean component, and I'm going to go to design, shifty. Look at us with shortcuts. I'm going to pick our library. I'm going to pick the darker color to start with and then break it and turn this down to 80%. All right. And all of my mobile Hi Fi should have updated. Remember, that's why components are really handy because they update all of them at once. Let's go to our preview. I'm going to hit a reset. I already done. Yeah, I like that color better. Don't like Scott squished in the corner. I have to work on that. But there you go. Scrolling stuff. You can do it to the bottom as well. It's just one other step. If you have what they're called snack bars that pop up down the bottom. Sometimes people will have a navigation at the bottom pretty common. Let's just do it with a rectangle. What I need to do is I need to say, let's do it to this one here. Just get the position right and then I'll move it over because this one's quite long, I'm going to say you like a little mobile nav down here and I'm going to have a fill color of. Let's go for this one. I'm going to break it and make it tiny bit transparent. Just a little bit 90%. I don't really want it there. I want it over on this one, paste. It's in the right position, if you know what I mean, knows where the bottom of the phone is because I started on this one. What we need to do is with it selected. Remember in prototype mode, we need to say you have what is it? Scroll parent fixed. Stay where you are. Again, the home page or the whole frame needs to be set over vertical. Already done that. Let's give it a go. Ship spacebar, scroll up and down. There you go. H. One thing you might have to do. I don't have to do it on this instance is sometimes that under design, the constraints, top left works for me because if I resize my page, let's grab my parent frame. It is attached to the top, so it's not moving. Sometimes it will default to.This guy here might default to the bottom. Then when I resize my page, it's stuck to that part. So it was fine for mine. That's something you might run into depending on your design. There you go. We made. Sticky nav. Pen to the top. Remind you one more time. You need to be in prototype for this to work. You need to click on the thing. You want to be fixed. Then position. Scroll parent gets changed to fix. The parent frame that you want it to fix inside of needs to allow vertical scrolling and you need to have something to scroll too. That should work. All right, sticky nav over. I'll see you in the next video. 83. What Are Teams vs Projects vs Files in Figma?: Hi, everyone. Quick video. I want to just to recap. I can get a little confusing here on your homepage. You've got teams. Inside of those teams, you've got projects. Inside of those projects, you've got design files. You've also got drafts. Let's just cover those now, tidy it up in our heads. Let's jump in. All right. First up, let's go back to the home, use the home icon at the top, or if you're in a browser, you can go to the F at the top here and go back to files. Doesn't matter which one. Then you've got three kinds of files, or three kinds of things. You've got files, design files that we've been working on. You've got projects that they live in, and they all are under this umbrella team. Has projects. Inside of those projects has design files. These design files. Let's have a look. I've got my team here, my bring laptop team. I have many projects that I work on and inside of all those different projects are design files. Now, these projects here, I can make a new project. Let's say we're working on an email campaign. Who do I want to share it with? I'm just not going to share with anybody, and then I can put my files in here. I can go to my drafts that I might be working on something and it's drafts is nobody else your team can see. It is hidden for you unless you share it. If you then go, Alright I'm ready for sharing with the team. I can move this file to this email project here. Okay, it's just a way of organizing everything. Let's have a look at my projects now, it's come out of drafts. It's into my project called Email and everybody that has access to my team, everybody I'm working with can see it now. Makes sense? The perks of moving it out of drafts and into projects is obviously everybody can see it, but also your team can collaborate with it. They can actually start working on this file. If it's in drafts, they can't can view it, comment like Doug did, but they can't work on it. One of the limitations for the free account is that you can only have one project, and inside of that project, you can only have three design files. The web loophole is that you can have as many teams as you want. So I'm going to say, all right, I'm in the free account. I've used up my one project and three files. I'm going to create a new team. Then I get another project and three files. When you start thinking about the Pro account is if you're using Figma a lot and let's say I'm working with a client and I have to then share them with two separate teams and figure out where the files are and those two separate teams that have joined, I just gets messy. Doable. If you're only working on a couple of projects for a bunch of different clients, that works perfectly. It's when you're working for one main client and you've got loads of projects, loads of files, then you might have to look at upgrading. You can change between teams. You can see I've got this other team here. It was created by somebody with a free account. You can see it says it's free. I wasn't created by me, I was created by somebody else. I just wanted to show you what it looks like. I've got a paid account, but the person who created the team doesn't are the boss, they're controlling it, and they're only allowed one project and only three files in here. More helpful? Hopefully, it does. It can get a little confusing on the side here, All right, what am I doing here? Teams are like the client. Inside of the team has projects, different things you're working on. You can see here some of the bring our laptop stuff, some of the campaigns we're working on, landing pages. They're all in separate projects and we can dump as many files as we like in there. You can see we're not a huge business, but you can start to see there is a lot of projects going. So we need the Pro account. There you go. You have a team. The team has projects, and inside of those projects are your design files. You also have those design files can live inside projects, but they can also live in drafts, but drafts are a little bit limited in terms of what you can do. Mainly around sharing. All right. Hopefully that was helpful. I'll see you in the next video. 84. Interactive Component Variant for Hover Checkbox in Figma: Hold on to your hats, everyone. We got to make a checkbox. Look, that somebody in our prototype can interact with and we're going to do a hover. Look, you can hover above it and it changes color. All right, they're called interactive component variants. That is a really bad name. They're not that hard. We've done components, we've done variance. We're just going to add a little bit of interactivity between our variants. It's Ha time. Let's get in there. All right, so I'm going to start with a plain old button. It's not a component. It's nothing special. This one here happens to be an auto layout because I want to the padding, but that is it. You can start with just a fresh rectangle if you don't want to mess up anything you've worked on and give it a color. Make it look like a button. Doesn't need text at this. So I'm going to do with this. First of all, I'm going to create this into a component, Command Shift, K or beyond design. Did that work? I did work. The shortcut works even if you're in prototype. That's cool. Otherwise, design and hit this option up the top here that says, make a component. Now, like we did earlier on, we're going to make a variant of this button. In this case, I'm just going to make it darker. I'm going to select on this and I'm going to go down to my color and I'm going to switch this one out for the darker version. So we've done this before, right? I'm going to drag out an instance of this or I could grab it from my Assets panel, and just drag it out from there. Where is it called? It's called. It's not on the components page. It is on this new desktop Hi Fi page. There it is there. You can drag out that as well. It doesn't matter. Now, what we did before is we could only go to this guy and go, All right, there's two variants of this, and I can switch between it. I've got it selected and I can scroll to the top and I've got these two different badly named variants. But now we can add the interaction between the two. We do it up in here in the main component. There's variance in here. I just want to click on this. I'm going to go to my prototype section and I'm going to say, I want you to go to there. Up until now, we've just been dragging it to other pages to navigate. Whereas now what we can do is we drag it between these two variants, and we could say on a hover, hover hover. While hovering. We want to change to this variant too, which is my poorly named second version. And instant we're not. Let's get it to dissolve. Now, let's give it a preview. Shift Spacebar. It's a little bit small, and watch this. We're doing hovering stuff. My mouse is really weird today. There you go. You get it. That. It's adding a bit of interactivity to components. That's what's got the crazy name interactive because it's interactive. It's a component because we turned it into a component and we made variables of that component. Not variables, variants. I say that quite often. I miss those two terms up. But if you a a little bit of animation between them, you can do cool stuff like this. The trick is not this, this needs to be somewhere else. We need this guy. Actually, I want to grab the whole outside. I'm going to cut him and I'm going to put him onto the right page. I'm going to go to files, components, and I'm going to build this one here. And you're like, we made this one earlier. Can we just rig up this one? We totally can. As long as we're in prototype mode, I can say this goes to here. Actually, I wanted to go to just this one here, the darker version. On click. Now I'm going to go on Hover again while hovering, sorry, and I'm going to say change to this one, dissolve, ease in and out. All right, let's grab this and put it onto one of our pages. Let's go on to We can't put hover on a mobile one because we've worked out you can't hover on a mobile. Let's get these two going. Let's give it a preview, Shift Spacebar. You can see. You can't really see because it's too small, but it does hover. There we go. Darker version on Hover. All right, so the H is exciting. Let's do something a little bit more mundane. Let's do chick Mark. Someone's going to build one real quick. You can watch me do it in fast mode. There you go. It's just the pentil and ellipse. I'm going to select both of them because what I want to do is I want where they ended up in the features page. Sometimes it's easier just building it out of this page, but I'm going to live with it. These two here. What I'd like to do is turn them into a frame, then a component. I don't have to do a frame first. If I make it a component, it would automatically stick it in a frame, so it's a little shortcut. Down here, I can convert it into a component. It's because I'm in the draw mode. When you're in design mode, it doesn't have that option and you've either got to use your shortcut or up the top here, there is an option that says, gone away. I use the shortcut loads, which is option command K or Control Alt K. All right, you've got that. Let's give it a name. Let's call this. Checkmark. Let's make a variant of this component. Two of them. This one down here, I'm going to call. Let's give it some good names. First of all, that one needs to be the top. This is going to be not default, but on this one down here is going to be called. Off. It doesn't matter if you name in the layers or up here. This one here is going to be off. What I'm going to do is grab this tick. I just double clicking to get inside of it. I am going to go over here and just turn the eyeball off on it. You could delete it. Like before, we need to add that interactivity inside of our component that has variance. I love these terms. We're going to switch to prototype mode, shifty. I'm going to say, I'm going to go to this one using the on click, which is actually really good now. We want to click it and we want to actually want it the other way around, didn't we? If I was doing it again, I'd turn the tick off on the first. Okay, let's change it to that one. Instantly, let's give it a go. So let's drag out an instance of it. I got to click on the actual object and drag out an instance or drag it from your library. Let's give this a preview. Shift Spacebar now click click, click, click, oh. It only went one way. So it worked. And what we need to do now is back in here inside of my component that has variance, we need to add interaction to it go back that way, and it should just remember the last thing you did. All right? Now let's give it another go and ready. Click, click, click, click, click. It's a lot of work, Dan, for a checkmark. That's what we're doing. And it's just handy to kind of see the powerfulness of both components, okay? Because I can reuse this loads and loads through my document. I can borrow other people's ones, okay? But now I've just got this one little unit that can switch between, but can do it automatically, okay? There's an interaction with it now. Rather than before, we drag it out, and I'd say, under design, I would switch out the property here. And manually pick it. Now, people testing my website or my app can actually interact with it. That is a lot of terms. It is a component that has a variant and now we've added some interactivitiness to it. That's why they're called interactive component variants. All that is it. We made a checkbox. I will see you in the next video. 85. Micro Interaction Toggle Switch in Figma: Hello, we're going to make a micro interaction. Out of this toggle switch. You're like, already made a toggle switch, but watch this. When I click it. Look at that goes green. And look at that lovely interaction. I love to learn this thing. We're going to learn micro interaction. So basically, a micro interaction is similar to what we did in the last video when we had a checkbox, but a micro interaction adds a little bit of animation to help communicate what's going on. A adds a little bit of joy to the operation. It's called a micro interaction. Let's make it happen. We're going to use all the tools that we've already learned. It's really easy to do. Stop clicking it down. All right. Get going. All right. I'm going to start with this toggle switch we made earlier in the drop shadow exercise. I'm going to make mine just a little smaller. It's just an ellipse with another ellipse on top with a drop shadow. Okay? Go back to the drop shadow exercise. If you haven't done that, it doesn't need a drop shadow. I'm going to change mine to have not this. I'm going to have a fill of just kind of like a gray because it's off. That circle needs to be a little bit this way. And just like before, I'm going to have this needs to be a component. Come on. Option K, control option K on a PC. So it's a component. This component needs two variants. In this bottom variant, I'm going to have the circle on this side. Okay, that then we need to go to prototype like before. I'm using Shifty I'm going to say this one goes down to this. What is it going to do? When I tap it? Great, it's going to change to it. But the difference here is set it instance or dissolve, we're going to use smart animate. While we're here, we might as well get this one to go back up to here when it's clicked. It should do all the defaults. Let's give it a go. Remember, you can't preview the component set. You need to drag out an instance of it, not the whole thing, one of these parts. Double click to get inside and I just held down option and dragged out another version or hold down Alt or you can drag it from Now I've got this rather large toggle switch. Let's give it a preview, Shift space bar, and it's going to start on the right page. Hopefully it will. It does. And ready. Click. Nice. I need to play around with the easing because it's a bit weird. Let's change the color as well, we're in here. We can keep this open. You stay over there, and I'm going to say this bottom one here is going to be back in design view. It's going to switch to a gooey on button. Color which is green because I am on now. Excellent. And because Smart animates on, it should work. Let's give it a go. Toggle, toggle. You can see how helpful it is having this open the whole time or like me, I'd have it open on this other desktop window I've got open, but you can't see that one. It's got my dad jokes listed. Alright, that is a cool toggle switch. Let's mess with the easing real quick because that's a bit weird. Okay? So we're going to go back to prototype mode, and I'm going to click on this one, and I'm going to say ease out. I'm going to go ease in and out. Let me make it just a little bit quicker and same for the other ones. You got to click both wires. Okay? This one's going to be ease in and out, and it's going to be 0.2 of a second. Alright, let's give this a go now. Ok. Better. What about ease in and out? Back. Let's do it for both of them. Now do it. There's one excited button. All right. That is using the exact same exercises as last project. I just want to show you a few different instances, and we've thrown in a smart animate and a color change. I wrote it color change. But smart animate looks cool. I can't stop clicking it. It's a little fidget toy. All right. That is it. We've done another interactive component variant, and this animation here would be considered remember a micro interaction, just a little bit of something that is a little bit more exciting and a little bit of joy, helps communicate what we're doing. Color is good. The balance is really clear. Micro interaction. All right. That is it. I'll see you in the next video. 86. Class Project 18 - Micro interaction: Class project time. We're going to make some micro interactions or some interactive component variants. Micro interactions is nicer. Make the three that we've done in the class, so a checkmark. I want you to turn it into an email newsletter permission type thing, doesn't have to be exactly that, but you can see here I've turned it into join our mailing list, little checkmark. I want you to also make the Hover button and the toggle switch. Make sure when you've made your component sets, they end up not just lying on all of your pages that they're actually in your components page and keep them all separate nice. Actual instance of the component needs to be on their respective pages. The Google Switch find something creative to do with that. But really, what I want to do is see this take a screenshot of this group, and upload it to the project section. Now, if you do know how to record your screen, I'd love to see a video of it, using Vmeo or YouTube link. You know how to do that? That's not essential and share it on social media, what you've made. Love to see it working, especially. All right, happy Micro Interaction Building. 87. How To Change the Thumbnail for Figma Files: Every one. A simple one. We're going to update the thumbnail for our design files because by default, it just picks whatever the first pages, and sometimes you probably already looking in your drafts going, What does this one even do? What is this one? What's going on here? We're going to update this, especially on our project so that it looks like something in the projects representative of the project, and it's at angle, which makes it cool. I'm so uncool. Let's get in there and show you to update these thumbnails just to make life finding files a little easier. All right, so I'm in my team project. I'm going to go to Scott Wallet and you can see the thumbnail, not very representative. You can go into that file and say, basically it's just showing you whatever the top pages, whatever is on here. You can just change what's on that first page. Or you can go to one of your pages that say desktop i Fi and to say homepage, you can right click the name and to say set as thumb now. It's more representative, right? I go back to the home here. It doesn't update. You got to close Figma, open it back up, and now that's your thumb now. That's a good way of doing it. Another way is to go to what a lot of people. Is they'll go into the document, they'll create a new page, they'll call it cover, stick it to the top. There's nothing on this at the moment. But what we can do is say, I want to frame. I want a frame of if you go down to this list, there's one called Figma community, and this plug in cover file. Cover file is what we want. This is your standard 1920 by 1080 pixels wide, and we can stick an image in it. I'm going to go find something. Let's use mobile, mobile Hi fi, and I'm going to do a screenshot of all of these. Look. Okay, and go back to my cover, find my screenshot. There it is there, dump it into this image, and use an image. Rather than copying and pasting frames and stuff from other pages, you could do that, but you end up with duplicates of stuff. You also miss out on the very real. Everything has to be on its side. I don't know why. But I don't know the UX design industry when you're displaying anything, it needs to be turned on the side, like a gun in movies, cocked a little bit. All right, I'm going to use this fill color. I'm going to use the same as this. Okay. Oh, it's going to be great. I'm going to just double check that this is set as the thumbnail. That's where you open lots of templates. And this first page that you check does nothing. Try and click on stuff, often it's just a screenshot of things. There's an element of marketing when it comes to finding templates. But for you, you just want it to be helpful, you don't have to have it on the angle, but I don't know, it feels like UX design rules. I got to quit Figma and be right back. Hey, Presto, look at us. All moody on the angle. Either set a frame as the thumbnail just to make it easier or make a cover page, the page has to be at the top, and it has to be on an angle. There you go. Okay? Just to get around the painfulness of, I'll show you some of my drafts, you're like, What is this? What is this? This one here doesn't even have a page because you might have been working on the second page. This one here, not that useful. This one here, what even is that? This one here? Again, it's hard to know what these things are creating, can you see what they've done? Let's actually open this one, see what they've done. I have no idea, by the way. So they've created a first page moodboard, that is, they've created this at a text. They actually designed their specifically for this. Rather than just a screenshot. You can tell they'll put some effort into designing it. If you look at one more example, look at this one, please be JB. I just told everybody to do a JP. Oh, there's a cover image. Oh, perfect. So this cover, they've even used the right word, and you can see this is actually just if I have a look at it, it is. If you click on it, it's just an image. So they've designed this either in figma or in something else and just plopped it in as an image. On the top. There you go. Just a nice little way at the end there to tidy up your files. All right. That is it. How to make a thumb now. Oh, great video, Dan. All right. Let's jump into the next video. 88. Quick Overview of Figma Sites: Everyone. Welcome to the super quick overview of something called Figma sites. We've designed our site. Now we want to actually build it. There's a couple of options you've got. You can go out to a developer, you could rebuild it in something like WordPress or you could use they call it a dragon drop or Wizzywig. What you see is what you get editor, where you use a more visual approach rather than a coding approach to web design. Figma sites is new. It is a direct competitor to something like Webflow. Designed it infigma, now we need to build it. Infigma sites is a way to go do that. It's an entire course on its own, but I wanted to give you a quick run through now to give you a sense of what it is and why it might be right for you. Throw him something, Dan. All right, so this is the design file that we made. I started rebuilding it infigma sites, what we'll do in this tutorial. And you can see here desktop, tablet, mobile. I'll preview it and you can see that on desktop, it looks like this, but you can see when it breaks down to tablet Okay, I change my cards. When I get down to mobile, it changes again. It's all very lovely and responsive. It's very cool. It's called Figma sites. Let me give you a quick run through now. Remember, just a quick overview, don't freak out. It's not hard, but it's different. More than a module in this course. But I want to show you anyway, let's jump in. All right, Figma sites. I'm going to go you can either hit the new button and go to Figma site or home you can go to create and you can pick a site. Either way, we've got a new site. The cool thing about it is that it is using a lot of the same tools as Figma. There's Figma design, the thing we're learning how to design websites. Then there's the building part, which is Figma sites. We're going to start with a blank site. You could start with a template, and it's giving you both a desktop and mobile version. Couple of things we need to do if we want to move stuff across. We can copy and paste it. I totally works. We're going to get started by going, right, we've built our site around this 14 40 site. The default here is 12 80. Let's just adjust that. There's a lot of copying and pasting because it's not as easy as make website. Fortunately, our mobile is what's our mobile? Our mobile size is mobile Hi fi is going to be. We picked one of the iPhone sizes. It's this 393. Let's just make sure that the mobile is 393. You might do is we might do a desktop view as well. Sorry, a tablet view. What we're going to do is head plus and say, I want to design my tablet on as well. We need to build a website that's going to look good both on desktop, tablet and mobile. You could do that in figma as well while you're going. We just keep this course a little tighter by removing tablet, but you need to consider it. All right, other things we're going to need. Let's just do something simple. Let's just draw something. Let's grab. We're going to draw a hero box FK for the frame tool. All those shortcuts you've learned, and beat into you during the course, you still have them. I'm going to drag this out and I'm going to stick it to the sides here like this. I'm going to give it a fill color of anything. The cool thing about it is every time you design on something on desktop, it shows you what it looks like on tablet and mobile, unfortunately, actually this is working. You can see this one here has got this little gap here. It's because there's a little gap over here. It hasn't stuck to the side. I've left a little gap, so I'm going to make sure it's dragged there. Hopefully on this side, I'm going to say you are drag I want to snap to the edges, and then this side. Let's say I want it to be this distance from the edges. Which in this case is 27 just by chance. What I can do now is I can go and preview it. You can hit the preview button, or I end up hitting this one a lot. It's going to preview the desktop view, the tablet view, and the mobile view. Go. This is called Responsive Design, and this is where we spend most of our time when we're building a website. We need to design it in figma, get clients sign off, and they're like, Yep, love it. You got to go build it to do all this stretchiness. Because if I look at this, I can drag this around, so I can say, Well, your laptop is this size, my laptop is that size. You need it to respond for all the different sizes. Let's do a little bit of responsiveness. Keep going back to that tab. You hit a little back button there. Inside of this frame, let's go for a bit of type. I've had all sorts of shortcuts there. What did I draw? Not sure. I've heard a bunch of stuff. What we're going to do is grab the type tool, click inside here and I'm going to type. I'm just going to bump up the font. The cool thing about it is let's pick a really giant font is it appears here. Back to my move tool, it appears here and appears here. You can't really see it on this one. The Layers panel here, I've got desktop, tablet and mobile. If I add anything to the desktop, it applies to all of them. It is here on my mobile. If I click on it, over here, where is he just hanging off here. What I need to do for mobile is I might decide, actually, I need this to be onto two lines. The three lines, and I want the font to be smaller, something appropriate for my mobile device. Here we go there. What Figma is doing or Figma sites is doing is saying that, Alright on this page here, I'm going to move it up the top for no good reason. Let's preview it. On desktop, it's big and in the middle on tablet it's up the top down here and down here on mobile, it's a smaller font, and it's broken into two lines. That is the fun for designing for web. You've got to think of all these different sizes and then ignore the bits in between, you're like, what are you doing over here, you, okay? It's just a quick overview. Let's build something, something. Let's get rid of this Hera message. If I delete it off my homepage or my desktop, it's gone off all of them. What I want to do now is let's look at doing those cards from this one. First of all, our cards, we'll use the desktop one. We've built it around our columns. The cool thing about it is at the moment, I can't copy and paste it. The columns remember Command G. But I know the basics. Let's go over here and let's say desktop hairs, S layout guide still here? Awesome. Learning two tools for one, which is really cool. I want it to be columns. I would like them to be a counter of 12 member. I want to go to have a margin on the edges of 100 and I think the gap was 32. So now that matches. On these ones, they don't apply. They don't work very well. This one here, what I might do on a tablet, I might just go down to six because it's just easier to deal with. Margins of 50, and I'll put the gap down to 24 on mobile, I'm going to go down to six and I'm going to have zero margins on the edges, and the gap is going to be 16. You can customize all of the stuff for the different. They call them breakpoints. That just means when this size gets down to this, anything below 1,400, break and do this new thing, which our case is just the columns. Let's grab some stuff. This is where it's fun. I can copy this and I can come over here and paste it. Or if you just paste it willy nilly, it might end up if I have nothing selected, and I paste it, I chose to put it through as a new page and you can't just easily drag it in. I'm going to undo that. I'm going to go inside my desktop, hit paste. You'll notice that it appears on all my different pages. Let's grab the other two, and you. Copy over to this design, make sure on my desktop, hit paste, and they should appear on all of them. What we'll do is we'll go, R, they're all lined up nicely. Perfect. All right, so I've designed that for desktop. That looks great. And what you end up doing is making it work on desktop first and then doing these other ones a little bit later. Because what I want to do is, let's just preview it. Let's go what it looks like on home. It's kind of working. It's doing some weird stuff with the gaps, can you see? So what I can say is back to here, I can say, we went This one's just using left. So it's going to be 100 pixels from the left regardless of what I do. What I might say is go left and right. Now if we preview Okay. Can you see him there? He's a lot bigger? Can you see he stretches because he's using the left and the right for its dimensions rather than just the left. These are the things that are useful when you learn them in figment you like, yeah, I understand. But when it comes to the making of the website, it's a lot more important. I'm going to do the same here. I'm going to say you and you are going to be left and right, and hopefully do a test. There's a lot of testing. You do something, test it, do something, test it, never skip it. But on this desktop view, it's quite good. It's 100 pixels from the edge, and it's responsive. It's all squishy. When it gets down to tablet, it goes, Boop it's still working. So now we can go back to tablet and fix this one. Six, get desktop working, then go to tablet and go, Alright, I want you to be there. I want you to cover. Can you see, I need these to be smaller. Be we made them responsive, remember earlier on, you're like, we made this down the bottom left and you're like, we made it responsive. Like, why do we bother doing that? It's because now we've learned it. This little object down the bottom here is stuck down the bottom. Remember, we learned bottom and we got it to stick to the right. It's so that we can do this later on, we can go, perfect. Easily resized. Made sense when we're doing Figma, makes a whole lot more sense when you're actually designing the website or building it. The funny thing here is that there is one, two, with the third one go? Like mobile, you might have to go over to your tablet view. I've got some badly named cards. Let's close these all up. I've got 18, which I can see, 19, which I can see and 20. Somehow is over there. This is a beta version of it, so there are going to be things that will get better over time, that might not happen to you. Now, what am I going to do here? This is the conundrum, like, Oh, here, no. What you can do is say on tablet, I'm going to go to appearance and I'm going to say, you go away. You're there, still there, be just not seen. On mobile, this one here, I might decide that instead of this one being first, I'm going to rearrange it. I'm going to say you are first, you're going to go to the edges. Now, in figmacytes if you drag it to the edge and it snaps, it'll switch it to left and right. You'll see this one set to right. But if I say you are here and you are there, you see it did it. You can manually change it obviously, but it will automatically do it. On my mobile device, I want to make this thing longer. Okay, longer longer longer. You'll see that this one is attaching to the bottom because it thinks that's what you want. No, I want it to be the top, so it doesn't resize and move to the bottom. You use the top as you like anchor point and what I might do is mature a little bit longer. Actually, the columns here aren't that useful, on mobile, I'm going to go to the eyeball and turn them off, and I'm going to find the missing card. Where did he go? He was frame 20. He's somehow over there. So we've even played around with the order, okay? And the beautiful thing is that it's using the same tools. Like Webflow does this, Framer does this. There's lots of other tools that are this like Figma sites. It's like a direct copy of those, but it uses the same language and the same terminology. You can copy and paste from Figma. And when you are designing, once you've built a few websites, when you're building this thing, you might as well put the effort in now to get this thing to be, you know, fixed to the bottom and right because you know it's going to save you time later on when you're building the site. Alright, let's go and preview it. Preview all the time. And if you don't preview for a while and you break it, you don't sure what broke that broke. Okay, so you're fine. Oh, you're working good, and you're working good, as well. Okay? The cool thing about it is can you see tablet? Got rid of that one, turned it off, but it comes back on on mobile, and I changed the order of it. Awesome. There is this weird thing in sites where they've got this bar, the slide bar which I don't like, kind of covers in. The actual website we'll publish with this little chunk here, but this little slide bars in the way. Hopefully, something that goes away as. Have a little look at in between because, it looks good here. What happens when I, it's doing that thing again, that it did on desktop. Desktop works, but on tablet it doesn't. I need to go to Tablet. Wrong file. Go back from this. I want to go to Tablet where are you? Basically what we did for the homepage, we said, let's get you to be not left, but left and right, left and right. Preview it again. Hopefully now, sometimes you got to go 21, another breakpoint. Okay? Oh, much better. It's got this kind of like, can you see now how we've kind of designed for a phone that's this big, but also this big, but also this big. And a tablet that happens to be this big, but a little bit bigger, I know that's tablet now. That's giant phonand this one here, tablet. But when it gets bigger bigger bigger big bigger. Then eventually when it gets to the desktop size, it says, right, desktop you can have as many break points as you like. You can go for the I keep going back there habit. You could have a super big desktop that is bigger than 14 40. What do you do with that? Maybe you got a fourth one. Now, I've picked something that was making sense to you now at your pace. This needs to be its entire own course Figma sites because web design is a bigger than I can just do a little module here. If you are keen, I'll leave a link in the exercise files for a Figma sites course. I haven't made one yet, but if you're interested, you can pre register for it and if I get enough interest, I'll make it. For now, though, something like Webflow will work. That's a course that I've got. You can go check it out where you got this didn't want to do is leave you high and dry in this course of, like, what do I do next? Often, it's going to a developer to build your site for you and they won't use Figma sites. They'll be coding the site, using some other framework, maybe word prayer, something else and they'll just use your designs as not inspiration, but they'll be pull the images from it, the text, the sizes, all of that stuff can come out. But now with something like Figma sites or web flow, you can build it now on your own. You can publish, let's publish it. It's published our site, okay? It's not publishing it to a proper domain just yet. You can put that in. Okay, I'm going to go to let's go to this one here, see the published. Let's have a look. I'm opening up on my browser. That is actually on the Internet. I could send that to somebody now, okay? And it's not doing a whole lot. Watch, except that it's got sweep breakpoints that we just worked out. Let's do a couple of last little things just to give you another little bit more sense of how this works. We've designed just the homepage. What we can do is like before, we can duplicate this thing. This one's going to be called My features page. On this features page, I'm going to get rid of these boxes on my features page, I'm going to make this really big, I'm going to put some type in it. I'm just going to adjust it for the different breakpoints. I'm doing some really bad stuff. Let's do this. All the features that we learned about interactions where I can say, let's switch to Command E, which is awesome. Same shortcut as Figal design. I can say when somebody clicks this, it's going to go down to the features page. Now when I preview this, doing my website, go on my buttons, I've turned that into a button and I click it and I go to my features page, which I've designed based on my FIGMA design file. You can do all the other things as well, regular website stuff. If I go to settings. I can say, here's my site title, I can add all my SEO stuff. I can add Google analytics. There's lots of things you can do. You can hook up an actual domain. So it might be bring your laptop.com, design the site for the client, test it because it's quick. We talked at the beginning, why we bother using Figma, not just build a website because it's super quick to build a concept, build a wireframe, get it tested, build a design, get it signed off by all of the stakeholders, and then go and build. Because then when you go and build, you've got to spend ages or not ages. You've got to spend a lot of time. Let's go out of here. Deciding this on this needs to be left and right. Does it go into a box? How does it flow? Whereas in your Figma design file, you can just drag a button to say you're there. Okay. But when you're designing a site, what happens in all the sizes, you've got to think about it, A. Is that attached to the top is attached to the left? What size is it on mobile? How does it adjust on those in between sizes? Takes a lot longer, but when you have the sign off of the Figma file, the design file, then you can just go into Build mode. I really like build mode. Everything's okay. You start making it. It's like solving a puzzle. All right. That is the quick run through of sites. You're not going to be good at sites after watching that tutorial, but I wanted to give you a sense of what sites is and also why we bother doing all the things in Figma that maybe especially this one here, maybe we did this. It's cool. We lent the feature, but now we know why we do these features is that we have to make these things responsive at some stage, even in our designs, it's handy just to be able to copy and paste it, stick it on mobile, resize it, but it gets extra special awesome when you've done that work, that could be published over our website. All right, my friends, that is the one through Figma sites, remember? Use the link in the class files. I'll put it up the top now. If there is a course, that link will go directly to the actual Figma sites course, I'll just gauge interests from you guys. All right. Figma sites, done. There's a lot of waffling. I'm sorry. Let's get into some more succinct videos. I'll see you in the next one. 89. How To Export Images out of Figma: One, we're going to look at image export settings out of Figma. You need to get an image out of Figma, send it to someone. We're going to go through the different formats. Okay? We will talk about the different sizings and when to use each. Alright, let's jump in and export images from Figma. Alright, let's talk about kind of like a general purpose exporting images. So let's talk about some file formats and do that. So I want to export an image. Let's start with just this image here. Okay? I want to export it. You don't use file export like you do on a lot of programs. There's actually this unit here I want to selected, add an export. Okay? What kind of export? Oh, added Effex. Reden Export. Then it'll give you some options on what kind of export settings you want to use. These are the main food groups, PNG, JPEG, Fici PDF. When it comes to images, it's generally more useful to use JPG, more JPIG. Great for images, gets the file size really small. The drawback is that it doesn't have transparency, but it keeps the file sizes really small. You'll see a lot of JPIGs around online and part of web design. Hit export and it's going to put it somewhere. I'm going to stick mine on my desktop in an images folder that I just made. All right let's go with the other formats. When would PNG be good? Is when you've got anything that needs transparency, have a look that something's masked. Let's say this one here. So if I export this as a JPEG, but also you can add another one to say, I want a PNG as well at the one X. We'll talk about Xs in a second, but they're just the size that I made it. In this case, this one is 314 pixels square. If I export, you'll notice that it picks the name from whatever the group or the frame you've got selected. Can you see this one's just an image? I'm going to call this one IMG Star wallet. So if you name it in your layers panel as you go, it will make it easier when you're exporting. I'm just going to pick there, go a look. Okay, you'll see I've got two images. One is a JPEG. The trouble with this one is a JPEG doesn't have transparency. You can't see through it, whereas the PNG nicely has transparency. You can see through to the background. So if I need this to go on a website and you need to see the background color, you need a PNG, even though it's an image, but because you need transparency, we're doing PNG. The other one in there is SVG. SVG are good for anything that is vectors. It stands for scalable vector graphic. What they mean by that is that let's find something scalable. Let's go to our components page. Want to find a logo there is there. We know if I use my K tool and scale it this thing will scale forever. It is made of vector graphics, little anchor points and stuff so that it is super handy to be an SVG because it can be scaled on lots of different browsers. Remember figma sites, we can scale things up and down. That's why this is good and the file size is tiny, and it has transparency. In this case, we'd say, I'm going to get back to my move tool. I'm going to say not affect. I'm going to find export and I'm going to say U are best as SVG. It's exported, and that's why the X goes away. Don't need it at any other size because it can be scaled to infinity. I'm going to save it, export it, and I've got this SVG. A lot of logos. Mine's white on a white background. Good work do. Let's switch it to light mode. It's exported again. We'll replace that one. Now, SVG sometimes they preview word like here, but that there is now scalable. Super tiny, 15 kilobytes Whereas say I wanted a really large PNG because I need to be big because it needs to scale up and down, whereas my SVG does that without asking. I say, I want a PNG. I'm going to export this one and let's compare the sizes. Here. I got two PNG, which is 12 pixels, smaller than my SVG, but it's fixed at that size. I can't make it any bigger than that. Otherwise the quality will get bad. Let's bring them into Figma. Here's my two files. You can see the PNG already. It's got little pixels. It's a pixel based format, whereas the SVG here that I just brought in can scale for infinity. That's why I use it for a lot of icons and logos, that type of thing. I'm going to undo before I writ all my designs, you can use a PDF as well. That's fine. A PDF might be useful if you're doing this. Let's go to my pages, and I want to export this whole thing. I'm going to export this entire frame. I'm going to say, get off my scale tool, go back to my MO tool and I'm going to say, let's export this one as not a big image, but a PDF. They're easy, they're sharable. PDFs are great because they include both pixel images, but also the vector that is scalable. It's a mix of JPEGs and SVGs. It's awesome. Export that guy. It's going to take the name of the frame, let's have a little look, and we've got a PDF that we can share with people. Awesome. Oh. Why do I want to have a menu? Let's have a look why I don't have a menu. This here, oh, it's not on my needs to be on. Can I get it in? It's not stuck there. I went in, jiggled around, ended up on my homepage. Now we'll export. Let's talk about the Xs. So let's say I've got this image here. I want to export it. I want to do it as a JPEG at one X. I just means that any bigger than 620 across, it's going to start getting pixelated. What you might do is you might decide that I'm going to export twice the size I need, so it's going to come out at Come on maths 12 40. I did. A, you might actually export two versions of it, one at a JPEG of one X and one at two X. You need to talk to your developer on what they want. Do they want two versions? Do they want a little one and a big one? And what they'll do is encode. When this image is shown on a low quality screen, it will load the small size. I loads nice and fast because there's no point having this big mama jammer version, which is twice the size on a really small screen. Whereas on a big high rear screen, it will switch it out to be that. Let's have a little look at how it exports it. Replace it. Mine's called let's have a look. I've got these two here. One is the wallet and this one here is the smaller one. That's the size I had in Figma. This is the export of the second one. You need to make sure that your original image is high quality to make sure it can export at twice the size. Talk to developer, see what size they want. It might be that you just export twice the sizes. Because remember when we had a look at the sites and also when we're doing either Figma sites or this one. Actually, which one is it? This one here. Because of this, you see, it'll appear this size on one screen, but on this size on another or this size on another. Can you see it's a lot that's why we often export twice the size when we're exporting images for our website. Sometimes though, you need something to export at a specific size. Let's say that you've got this and it needs to go out at a specific size, you can get rid of this and just say, see this drop down here, there is width down the bottom here. This is just for instance. If I click on this, 512 W just means the width. I can say, I want this one to be 100 pixels wide because I need it for something for my website. I'll give it another name. Let's call this one. 100 pixels. I just assumes pixels. When you say W, let's hit. Let's have a little look. We've got our wallet that is super tiny. There you go. All right. Let's say you make some changes, you need to export everything again. You're like, do I have to go and click every single one? You don't can just go up to the F here, go to File, and go to Export, what it'll do is it'll remember all of the things that you've added little export option two. You can see here's my four things, you might decide that I don't need you and you. I just need these two update. I'll export all of those images again, the same place. I'm going to override them. Anything you need exported, just grab it and say down the bottom here, click Export, pick whatever you want it to be. In this case, I want it to be JPEG. I don't actually have to export now, I can just go to my overall export settings and it will include it in that list. Let's go. There is their home page. Boom. And we're done. All right, that's a quick overview of getting images out of Figma. Just kind of general purpose image file formats. We'll dig into a little bit more in the next videos. All right, let's jump in. All right, I'm back. I said jump in. I meant I'll see you the next video. It's been a long course. We both know it. Oh. All right, I'll see you in the next video. 90. How To Share Your Document With Clients & Stakeholders: Hi there. In this video, we're going to export our Figma files ready for our clients. So our customers, maybe stakeholders, not other designers, developers, quite specifically, people that aren't really Figma users or UX designers. So let me show you the different options for them. Alright, so we looked at earlier on going to share and we can copy the link or send them an email. The only trouble with it is that they end up in this kind of, like, world of, like, FGM land, which some customers, you know that's just going to cause them trouble. Okay? Plus, it's called your junk and you have to tidy and we looked at earlier as well. You can go through it and select these guys and say, All right, I want you Export as a PDF. That's another way of doing it. There is an option up here that says, All right, under this FK here, you can say, I would like you to file export frames to PDF. This doesn't work very well because you end up with this, where it exploited every single frame on my document, regardless of what I've chosen. I exported all of this. That is a frame, this is a frame, so it's exported them all. You can go and tidy those up afterwards using, I don't know, acrobat reader or whatever you use for PDF, but not very handy. One that is handy obviously is screenshot, but there is another tool down here. So we look under the slice tool. I can drag a box around this group here, say I want this bit to be exported. I'm going to move Okay, anything else that's tucked in there. Get it nice and tidy. The slice option here. This little dotted line ends up over here in your layers panel. If I scroll to the top, there's a thing called slice one. I'm going to call it. Task flow, and what is it? Ecom. The cool thing about it is that this little line around the outside here will only export everything inside of that box. It's not an actual object. It's just like an export window. If I go to Export now, if I have it selected, I can click it over here on my LAS panel. I can say, I want you to export as Ch Pi. I'm going to export that. There's my task flow, and it's exported just everything in there. It's got rid of the names along the top. It's just a bit tidier. If you are like, Hey, why didn't you show earlier on, especially if you're a Windows person and screenshot is a little harder. I'm sorry. Mainly because it just causes there's this box here, it gets in the way. Now you're a really good user of Figma, you can start using these. You can adjust them afterwards. You can delete them. Click on this, delete them. You can draw boxes around lots of different things and just export everything inside of them. It's the slice tool down here. I'm going to go back to now another cool way to share your files with a client that's more of a presentation is, I'm going to grab this homepage here and copy it. I'm going to go to plus or you can go back home. You're looking for the slides. Like sites and these other ones. These are all different from the tool that we've been learning, which is Figma design, used by UX designers. You can use Figma for slides as well, like a PowerPoint presentation. I'm going to start with just a slide, and I'm going to start with a template. It's going to pick one random one. Let's view this one. What do we want to start with? Let's add all of the slides. Cool thing about this is that it is a different bit of software, but now that you have good skills in Figma design, you'll be able to use Figma slides super easily. Let's go and grab. I just copied it member. I can paste my design, I can use my scale tool and I can add this to a presentation to my client. I might decide that and start using this template. The cool thing about these templates is if I click off in the background, I can start playing around with the template style. They've got all this hierarchy going. I might click off. There is this mix it up button. S remix template, just click on it and find one that you quite like. None of these I like. Keep clicking forever. Oh, I like that one. Can you go back, Undo? You can. You can go through and say, actually, I want all of my What is this one highlighting this. It's my H two, so I'm going to click off in the background. I'm going to say H twos now though aren't saucer. They're going to be spicy rice. I will go through your whole document and everything gets updated. They've created styles. You can get quite far, quite fast. Not going to go through a whole tutorial on Figma slides, but it is a great way to be professional very quickly. Without leaving Figma, you can copy and paste stuff across from your design file and you don't have to use PowerPoint. I hate PowerPoint. I don't hate PowerPoint. PowerPoint hates me. This here might be a better way to go off and start sharing. You can share this presentation rather than the Figma file on its own. You might just share the link to your Figma design file, which can be confusing for some. You might use just the plain old Export PDF, or you might use that slice to draw a box around them, or you might investigate the Figma slides and go for more of a presentation. All that is sharing for customers, clients, not other designers, not developers. We'll do that next. I'll see you the next video. 91. Talking to Your Developer Early in the Figma Design Process: Hi, everyone. I thought I'd jump outside of the screen. We'll do this live. Working with your developer. There's no, official way of working with a developer, some sort of like official handoff process, okay? Basically, what ends up happening is it will depend on the developer and your relationship with them. Like, the goal and where it is all amazing is where you have got the developer in earlier in the process, okay? Surprising anybody with a finished design is no fun. The developer will feel resentment is probably too strong a word, but, like, they've had no input. So, okay, this designer has given me this thing to build, and I'm going to go build it because they said I had to. Like, what you want is them to be part of the wireframes to give you advice, part of the kind of first few frames that you do to give you advice so that there's not just buy in, but they feel like they are part of the process and so that especially when you're new, getting feedback earlier on just means you are not going to design yourself into a disaster. So many times have I got, like, just like the language can be really simple. It doesn't have to be official meetings. It can be like, Hey, Sandy, would you mind, you know, can I quickly show you my wife frames? This is where I'm thinking of going with the project? Just want your feedback. You know, would you mind giving me 5 minutes, okay? Or, Hey, these is the first few frames. What do you think? Because there are so many jobs where I have assumed something was too hard to do so not done it, only to find out in that first conversation, they're like, Oh, I was going to do that, but I think we'll push that to phase two, because it seems like hard work. What do you think? And they're like, No, we've got that other thing that's very similar. We've already built that, you know, that sort of framework that's already built for this other thing. We just put that in there, and I'll change it. And you're like, I'm not a engineer or a developer, so there are just lots of things where I think are really hard, but turns out they aren't and the opposite. Okay? There's things I'm designing and it's kind of like a core piece of the thing that I want. Like, it might be just like a valued. I'm like, Oh, let's be awesome. And then you talk to the developer early on, and they're like, that is going to take double the project time or add all this extra complexity. Do you really need it? And when it's early, you're like, No, you're just like, we'll do that in phase two, phase two is a good way to say, we'll do this later, but probably never, you know, to shuffle it along so we can get this project done. And that all happens in that first kind of dialogue. So yes, there's a hand off process when it's all signed off, but that should not be the first time your developer should be seeing your project. So work in the open, ask them to comment, get them involved, and find out why and how they like to work. You know, what kinds of things they want to see at the handoff so that you're not going to like, I hope they like it and sending an email off with all your links and images, and they're going to all want something. They're going to want to see mockups, prototypes, and a bunch of images, probably. They'll use your mockups to work out spacing and padding and those sorts of things, if it's a new job, okay? But they won't be using your rectangles, okay? They'll just be looking at the spacing, and, um, yeah, rebuilding everything, mostly in code, okay, except for things like images. So yeah, there are some consistencies between the handoff. We'll do a little bit more in a second, but talk to your developer and find out who they are. Be proactive. Don't just wait till, like, magic engineering department, go do it. Ask. You might have a You know, you might have a product lead or a product manager or you might be working on your own and going to outsource it, or maybe the client's going to do that for you. Find out who it is. Talk to them. Make the developer your friend. If you are the developer, it makes things easier. But, right, that is how to work with your developer. Let's jump in and I'll show you some more tactile things we can do in Figma. 92. Dev Mode and Handing Off to a Developer: One in this video, we're going to look at something called Dev mode inside of Figma. It's aimed at developers. We can as designers, we can mark things up ready for the developer to look at, and what they can see is things like, right, this is my font. This is a CSS code that makes it work so they can make it exactly how you've designed it. Let's say up here for this logo here. It allows them to go through and say, right, logo here. They can download their own SVG and give them the power to be able to download their own files rather than you exporting everything ready. All right let's jump into Dev Mode. All right. First up, Dev Mode is a paid feature in Figma to access it. You've got an option down here. You can just switch to it. We've done design, which we spent most of this course in. We did a little bit of draw which changes the tools, and same with Dev mode. Changes the tools and you get a new set of tools down here. What you can do in design mode is you can decide, Alright let's go to mobile Hi Fi. Let's say that homepage is done, it's all signed off, ready for our developer. You can. This little option up here that we've been ignoring for the course, you can say Mark is ready for Dev. Click on this one and hit this or you can just say this frame is ready for development. It's been signed off, ready to go, even though there's nothing on this page, and then we can go and share and we can go into here and share this Dev mode link. I've copied that and let's say I send this to my developer. This is what they see. For the developer, they need their own license, so they need to sign and they can view it like this and they can see that this one here is marked as developer, this one's DV ready, but they can't do a lot unless they have a paid account. Cheaper than the regular FIGMA account. Okay? So it'll depend on where you're working. And if you're using this flow a lot, it's really useful for them to get Dev account so that they can do something called inspect the elements. Let's have a look. This is what your developer will see when they are looking at your file. If they've got a paid account, they can see all of my columns that I'm using, which will be really useful for them to know kind of what column sizes you've used. What's really cool about it is they can go through and say, Alright, see this Nab that Dan's made. It tells them they are the important parts of it. You can see I've used 12 and 12 on the top, in terms of pixel padding and 16 on the sides. Over here on this side, it starts giving them useful developer sizes. Not so much design sizes, plus, it'll give them the CSS or whatever other framework they might be using Android OOS, depending if it's a or website along with other CSS properties that might help them build it quicker, colors, scroll down. Even the icons that I've used in here. There's the logo. They can click on it and say, by themselves, you can send them the SVGs, tell them the sizes. They can work it out from the visuals. But this gives them specific widths and heights and padding sizes and allows them to go through and say, right, they can download their own SVGs, gives them control to download what they want rather than uh, you having to export everything. Let's say this little unit we built here member, it's kind of resizable, sticks to the bottom right. It gives them the option like flex end. You don't need to really know what that is. It's handy if you know a little bit of kind of coding. It's not essential. You can check out my web essentials course. If you do want to do that, to get a head start on how to code it yourself. Even if you don't want to code it yourself, it can be handy just to get a basic understanding of, I don't know, language, especially this flex option. It's called Flexbox. You don't, this will make sense to your developer and give them a little bit more of a head start in terms of, they want to use this font, what font is it? It's Source Sans Pro. What weight is it? Normal, which is our 700. Remember, we learned that earlier, font weights in code are often referred to in the hundreds. They can copy and paste the text out of it. They can add comments, that'll go straight back into your design file where they can ask Hey, what are you doing here? Why is this like this? Do you mind if it's like this? Talk to your developer, see if they've used Figma before and whether this is handy. Sometimes developers just want a JPEG mockup and all of the icons and logos and images exported and they will build it on their own because maybe that's the way they work. What you probably need to do is I'm going to go back to my design view, not the developer is you probably need to give them a page. It's really common to say, ready? For DIV. What I do is I have my working files, but I also have this file at the top here. Maybe it's right at the top so they can find it easily. I just go and copy because my desktop one, just to Hi fi is really messy. I might grab these ones that I know are ready and just copy these out, copy them, put them on their own page, ready for DIV. Paste them in, mark them as ready just because but let them know that this is the page, they should be pulling from the final final final. Because for you, it's handy to have all the working files down here. You can see this one here has this little indicator saying something on this page is ready for Dev. You can see it here on the mobile Hi fi that we did earlier. If you as a designer, you might be just marking these ready for Dev and that's it. You can yourself. If you are the developer, you can switch this Dev mode here and start pulling useful information, pulling the text out, the font weights, the colors, the styles, the job shadows that you spent ages find it there, you'll see there's my tick shadow. That's the CSS code to make that happen. Exactly how you've got it. And it's even got the name. Gold Mines super awesome style. That's DevMde inside of Figma. Once you are finishing here, you can go back to design mode. If they've got a dev only account, they'll only have Dvmode they won't be able to go into design mode. But for me, who does a little bit of coding, I can toggle between the two. Note, once you've got your page ready, you can decide, all right, homepage here, actually, I'm going to go back to design view is that this homepage here got selected, I'm going to share it, and I'm going to share it for copy Dev Modink. You can see the link is actually going to start here on this homepage. Gives them in the right spot to start with. All right, so that's a quick run through Dvmode. It will depend on how you're working with a developer, whether they just want visual mockups and a bunch of images that you can export. We did that. We can select on this and say, I want to export this image as probably a JPEG in this case, give them a file with everything in it, and let them loose with just a mockup of maybe a PD or JPEG of your design. All right. That's Dev mode. I'll see you in the next video. 93. Class Project 19 - Finish Your Design: Alright, it is last class project time. I hope you found them useful. And what we're going to do here is just finish up our designs, okay? We've left some holes mainly around this feature page. Kind of use it as a testing ground. I want you to expand out your features that we've got from this homepage into their own kind of like cards here, these blocks. I don't mind what they look like. If you're looking for inspiration, like I just hit something like dribble, okay and I just actually typed in UI features and just kind of went through and had a look and I was like, Oh, this looks kind of cool over here. And that's kind of where I use the inspiration for. You can see my lockup here. Your desktop Hi Fi flow, I want you to have four full pages. So anything that you've missed or left behind, I want you to finish. You can see here I've got my home page done, my features, my checkout, and my confirmation page on my desktop version. Anything else you're missing as well. Be sure to use your type and color styles. I want you to practice around with masking, one or more effects, and you can use placeholder text for the text in especially your features page or have a practice with the AI options inside of Figma. If you don't have the paid account, you can go out to something like GBT, which is free and it'll do the same. Asked it to give me a paragraph or a marketing page around RFID protection for a wallet, and this is what it gave me. I asked for bullet points, and this is what it gave me, and I did it for all three of them. I even died a little foot down there. So I want you to finish it off and then take a screenshot or you can use your slice tool or export JPEGs. It's up to you, but I want to see those four frames. Upload it to the project section, and I'd love love, love, love. If you haven't done it yet, share it on social media. If you want to, you can say where you. Uh, you're doing this course with Dan. And here's the link. That would be useful too. Share it on any of these or all of them. You get optional bonus Comer points if you do the mobile Hi Fi as well. Getting this down to a mobile version is going to be fun and interesting. Give it a go if you've got time. But for everyone else, I just want you to finish those four pages. They don't have to be perfect or beautiful. I just want you to fill out the four pages. I'd love to see them. Alright, that is it. Have fun with the last class project. Phew, we're done. You go do that and I'll see you in the next video. 94. What's Next?: Oh, no, it is the end. Don't go. Uh, we've been hanging out for so long, but this is the end. Uh, guess what? We get to hang out more, if you like. You can do another course. I got plenty more that might be interest for where you are at Figma. There's a Figma Advanced. That's probably the next step. I've got courses on Photoshop, Illustrator in design, after effects Premiere Pro. Blender is another good one. I co taught that with Robin so check that out. That's another good next step. But I just wanted to say, congratulations to you and to me, we both made it, okay? These courses aren't easy to make, and they're not easy to do. Okay? What other people are doing scrobbling, you're over here getting more good at Figma. So yourself on the back. Good work. I'd like to quickly thank the editors, Taylor, Jason, and Edgar, okay, for their work on this course. I don't do it all myself. So also let me know what you thought of the whole experience, okay, my part, what I could do better. Let me know the comments. I do read them. I do like to check in and see how the course is going, see the ratio of happy to not happy people, what could be better in the next course, what you enjoyed about this course. And just generally, yeah. Do you think of it? Let me know in the comments. Alright. This is the end end. And what I'd like to do and wrap up with is just to give you permission to call yourself a UX designer. You are now. Some people ask me, like, how do I know when I am? You know, how do I get it accredited? There is no accreditation, okay? It is a state of mind, and it can be hard going out in the world if you're a baker or a graphic designer or a mechanic and then go, when do I become a UX designer? Like, you are a UX designer now. Congratulations. You're not very good one. You're just getting started. But that's kind of how it works. Okay? Don't shy. The next part you go to when somebody asks what you do, tell them you're a UX designer, okay? Just getting started. You're new, okay? But you are. You might be an experienced UX designer just learning Figma, so you get to say it proudly. But I'd like to give you permission to say, you're a UX designer. It is hard to know when that is appropriate. Now's time. You did a big long course. You learned lots. Go forth, be a UX designer. Okay, end end, end. This is it. I'll see you again another course, hopefully. Sad. Bye. Fat black. Gonna spin.