Figma UI UX Design Essentials

1. Introduction to Figma Essentials training course: Everyone, my name is Dan Scott, and welcome to Figma Essentials. Together you and me, are going to learn everything we need to know to get started as a UX designer in Figma. We'll use this UI UX design tool to create beautiful interfaces. We'll also create some engaging prototypes and also we will look at some of the real-world expectations of you as a new UX designer. Now this course is aimed at people who are new to design, new to user experience design, even if you're not even that entirely sure what UX design actually is, don't worry, we're going to start right at the beginning and work our way through step-by-step. First, we'll describe the brief and how to work with a UX persona, then you'll learn how to create really simple wire-frames. From there, we'll learn how to implement colors and images properly in your high-fidelity mock-ups. You'll learn the do's and don'ts for choosing fonts for web and mobile apps, you'll learn how to create icons, buttons, and all sorts of UI components. You'll learn all the scary terms like components, constraints, and multidimensional variance. They're all very easy once you get to know them. But also make our lives easier by using free UI kits and plug-ins for Figma to speed up our workflow, we'll build a simple style guide ready for colleague or client hand-off. You'll know how to make both simple and advanced micro-interactions, page transitions, and animations. Before the end of this course, you'll have fully interactive prototypes ready for user testing all the way through to collaborating with other team members, and exporting the right files ready for hand-off to your developer or software engineer. You've got assignments that I set throughout the course so that you can practice and develop your skills plus you'll have something unique for your portfolio at the end. It is time to upgrade yourself and goes from Figma zero to Figma hero. Sign up and I'll see you in class. This shirt made a whole lot of sense. It makes a whole lot of senses later on when you know Figma a little bit more, but at the moment, I've realized it's going to cross probably just creepy, but it's made now and we're going to have to live with it, so sign up to the course. I'll see you in there. 2. Getting started with Figma training: Hello. You made it in. Congratulations. Welcome to the course. First things first is you need to download the exercise files. There'll be a link on this page here. Download those. In those exercise files, will be the files we use for the course. But also there will be a shortcut sheet. Okay. We won't go too deep into Md shortcuts here, but there are just some super useful ones that you'll need to know by the end of the course. So print that sheet out and you can circle the ones you really like. Hang on, just pausing myself there. I forgot to mention that you need to sign up for Figma. Whoops. You can use this link on the screen here. And if you use my link, Figma gives me a little credit. Nothing different for you, and it helps me keep doing what I do. All right. Taylor, you can unpause the video. Taylor is our amazing video editor, and he thinks I don't know he pauses my face in these awkward positions. On purpose. I know you do. Either use the browser version. So sign up, use the browser version or download the desktop version. There is absolutely nothing, you know, no difference between the two. I'm going to use the desktop version. And because I'm old and I like things being on my desktop for no good reason because they're exactly the same. So it doesn't matter. You'll also know from only watching a tiny bit of my video that I talk fast. I've had a lot of coffee. It's early. I do slow down. Okay? But if you find that I speak very fast, k or maybe English isn't your first language, and you find my accent a little tough, there will be on all the videos, is like a little cog, or is it down there, and you'll be able to click that and slow me down to a slower version. I sound a little weird, but It's might make it easier for you. And that is it free version, paid version. We are going to use the free version for most of the course, mainly because it's amazing. It's amazing what Figma have decided to allow it to be free versus what is paid. Towards the end of the course, I will show you why you might want to jump up to the paid. But you can get quite far as like a professional designer using the free version, but I will show the perks for paid later on. Also, Figma is always updating, which is amazing. To me, as a designer, means new features come out all the time. They rejig things to make it simpler and easier and include more advanced features. It is really painful for me as an instructor, because basically, I know this. As soon as I finish recording this course, they're going to go and shuffle some bits around. So keep an eye out for that. If it's fundamental stuff, I'll re record the videos. If it's just small stuff, just take a look. Often it could be just a name change. It's in the same place, it's the same job, but maybe they've called it something else or clarified it a little bit. Also check the comments below. Either I'll leave a comment if it's just a small change or other students will as well. So just keep an eye out on that. Hey, there. A quick little note. If you find that your Figma does not look like mine, you might be seeing the new design UY that Figma has just released. You can get it back to looking like mine. If you down the bottom there, you can click on the Black question mark in the bottom right of the screen, and then go to the option that says, go back to previous UI, and you will get Figma looking exactly like mine. They both work the same. They've just done some UI changes. You go. Carry on. Y, for lots of updates. Boo for lots of updates. Alright, let's get on to the next video. 3. What is Figma for & does it do the coding?: All right, let's talk about what Figma is for, and what it's not for. It is amazing at rapid prototyping of things like websites and apps. It does do other things, which we'll cover a little bit... but it is the main tool of a UX or UI designer... and their role in the creation of either wireframes... which we'll do in this course, really quick... kind of look and feel for an app or website through, to kind of like, really... like it looks exactly like a website, high fidelity mockups of this website... with interactivity as well... and this kind of leads me to what it doesn't do. You can make something that looks very like a website ... enough so that you can go out to testing... and that's probably the best bit about Figma and UX in general... is that we'll create something... and then we'll actually be able to get in the hands of the client... the intended audience, our customers, and they can-- it's not going to be complete... but they'll be able to use it enough... that we can make some observations and actually test some theories... about what they think, and what the users want... and if things need to be changed... we can change them really quickly in Figma... and then get them back to like why they're sitting there. So it is about rapid prototyping, quick, you know, changes... and get to a point where you're like satisfied with the website or the app... and you're like, this has gone through a bit of user testing... client's happy with it... now this is where Figma doesn't do anything else. It's just the prototype, it's not going to code the website for you, or the app... it hands over little pieces to the developer to use... CSS and SVGs, and graphics and stuff... but not a lot that the developer can use. They'll end up kind of starting from scratch using your mock-ups... and they'll use a lot of things, like spacing... and they'll make it look like your app... but that's what Figma doesn't do, it doesn't do the coding side. So what you do is you get it kind of signed off, with a client... and then you either work with a developer... if you're a developer yourself, you start coding it... or you might start, like if you're-- you might get into HTML and CSS... I've got a course on that, if you want to start doing your own stuff... or you might be using something like WordPress or Web Flow... I've got courses on the horizon for both of those two... or Wix, or something more drag and drop... you then have to build it, based on your Figma mockup that you've-- it's a lot faster to do, then go and build it... either in one of those tools or code it. So that's what it is, rapid prototyping, and what it's not is... you're not going to have a complete site at the end... that's a question I get asked a lot... so next video. Actually, I forgot one thing, don't go away, editor, don't cut it. What else is it getting used for? Figma is getting used a lot for, like just regular graphic design... mainly in the digital space, so, like social media campaigns... there's some amazing things you'll... you'll see it as you go through the course... you'll be like, this would be really handy for doing... Instagram story posts, or carousels... or a bunch of different sizes for ads. It is getting really good at it, it doesn't do a very good print stuff... you can put a normal page into it, you can say A4 or US Letter. So our people are using it as an alternative for something... like maybe Illustrator, and a bit of Photoshop... Photoshop's still required, but you'll see... it's made for designing websites and apps... but people are using it for all sorts of other stuff, now, it's coming... not a general design tool... but know that you will find some people using it a lot more... for things that it's not meant to, but it does it just perfect. All right, so that's what it is, that's what it isn't... now this is the end, cut. 4. Whats the difference between UI and UX in Figma: All right, let's talk about what UI versus UX is... if you already know you're allowed to skip this video, it's okay. This is not going to be a very, like detailed... just give you an understanding of like the differences between the two... because it comes up a lot. So UI design, the simple way, this is all very simple... the UI, User Interface versus UX, the User eXperience. UI is the way something looks, and the UX is how it works... how somebody uses it... so often, the way it looks, how it's used. Now in terms of being a UI designer, like UI designer is in charge... like up until UX became part of my life, and a lot of us, it's kind of newish... and I did a lot of UI design... I designed a website that was based a lot on my intuition, like... "Oh, button should be this big, and it should be over here"... and traditionally things go over here in the Nav. So there was a lot of that, and I'd give it to the client... they'd like it, great, but there was a big element missing, the UX... there was very little testing. I had a, I had an idea of what would work, but it was totally an idea... it was like a hypothesis of how it should work... and the UX part of being a UX designer is... the taking that kind of UI, that layout... and getting it in the hands of clients and testing it. That part of it turns you from just a UI designer into... you know, the beginnings of a UX designer... is getting it out there and actually testing that... did it work, did it do exactly, you know, what I hoped it would do... is the client, when they click this button... do they go where they expected, or were they surprised? Is the language like, let's say, UI designer designs the button... and the rounded corners, and the beautiful gradient, or the... and the text in the middle. the UX designer says that's great, let's go and test that... and says, you know, is it big enough... can they click on it, is there enough contrast, is it accessible for people... maybe that have, that are visually impaired... it is, you know, is the hierarchy of buttons, is this one too big... because it feels like it should be doing something else. There's a lot of that side of thing, is the UX... Now in all honesty, this course is based mostly around UI design... because we're learning Figma. Figma is the creation of these things... the testing side of stuff, I'll give you a... you know, some ex-- some insights as we go along... about what I would do at different testing phases... but it is broader than what can be covered in this course... but we'll do UI with a little bit of UX... but Figma basically is, we're learning software... that's why you signed up, probably. So it doesn't make you instantly a UX designer... the UX part is the, you know, taking it further than... just moving pixels around on the screen... is like giving it out there and getting it tested... and changing things, and testing things, that's UX. My little example, that I'm kind of... running through at the moment, example, it's a... yeah, my bank updated its website and its app, and it looks beautiful... the UI, amazing, the UX is terrible... I'm sure it went through some testing... I imagine it went through lots of testing... not right at the end though because there's just... it's just simple things like, let's say that I'm typing in my password... type, type, hit 'Enter'... 'Enter', 'Enter'... nope, you got to get the mouse and click the 'Enter' button. So I'm like, "Why?" You know, there's a, in code, it's not hard... that kind of, I can't remember what it's called... when you get to the end it will know that when you press 'Enter'... you mean this button here. So that's just one thing, another thing, you go into, like updating... I want to update a... person in my standing orders... like a Direct Debit, or, not sure what you call it in your country... but a regular payment that I'm making... so I went to find how to edit it, I'm like, "Huh.." I have to delete it because I couldn't find anywhere... and I'm tech savvy, I know how to use computers... and I couldn't find it, so I was like... oh, well, maybe we have to delete it... I've been doing this a few time, I'm like, I'm going to email them, they're like... I just got to click the name of the person to edit it... I'm like, huh... oh, it seems simple, go and have a look... and you do, if you click the name of the person... it does go in to edit it but it's missing a couple of things... any sort of indication that that's possible... underline, arrow, big sign, tool tip. The other weird thing about it is... you know, when your mouse, your mouse is kind of moving along... and when you go over something clickable... it turns into the little hand... it doesn't do that, you just click it with the arrow, and hopefully... it's like, start clicking everything. That must be hard to turn that thing off, somehow it's off. There is a million in one of those little things... it's just come out, but I do have a problem with it. Anyway, I'm burbling... and red, why is it red again? This feels very ominous, my little colored... like I just bought the colored light... you're going to see it all the way through this course, until I get sick of it... but yeah, that's my UX story at the moment. You'll have them as well, and that's the kind of thing, if you're new to UX... is keep those ideas open, like... they're terrible, and they're a pain in the butt... but it's kind of language and stuff that you're gathering as a designer... so that when you're working you can avoid some of those things... or at least, you know, when it comes back from testing... you're not surprised, you're like... "Oh yeah, it's that thing that I hate as well, is in this thing." So UI, UX, that's my explanation for the moment... all right, next video. 5. What we are making in this Figma course: Hi everyone, in this video we're going to look at what we're making. We are going to start making some wireframes initially... then we will make some high fidelity versions... that look a little prettier, that one's actually pretty messy... let's look at this one here. See the screens down the bottom... so we're going to work on these... we're going to build Styles, Components, all sorts of goodness... let's have a look at one of the mock-up version. So yeah, it's, this is going to be what we make... we'll design it, we'll add some interactivity, we'll make a form... people can purchase stuff. It's going to follow our brief, both our persona and our Task Flow... so let's talk about what those things are. So we are going to focus on the software Figma... but I will throw in some kind of general UX design advice... for people that are quite new. So what are we working to? We got a company called Scott Headphones... that wants us to design a few pages for this Task Flow. The Task Flow here, in this case is... they want a Home page that goes to some features about the product... those, that product can be added to a Checkout... and then once the credit card details are filled in... Confirmations, that's what they've asked us to build. They've given us a persona, so let's quickly talk about what our persona is. So this is just a bare bones kind of persona... they can run to one whole page, two whole pages... but this is going to be enough for this particular course. What is it for? So I'll read it out, you can read... but our ideal customer is a woman named Sarah. Sarah's in her 20s, she has a Bachelor's degree... she works for herself, she's married with kids, and she lives in Ireland. She has never bought anything like this before... and some of her concerns is that she is... very Eco-environmentally, and waste conscious. So why do we have a persona? It's to allow us to be specific... not specifically to Sarah herself... Sarah is representative of a type of person... a group of people that are going to be using this website. It helps me distance myself... otherwise I end up building things that I would like... based on my own history, and the way I know the product. So this gives me boundaries, otherwise you end up... either designing for yourself or for everybody, and then nobody wins... because you end up with this generic thing... that doesn't actually work for the target audience. So our persona helps us to find that audience... it also helps when you are dealing with the client or stakeholders as well... because you can detach your own kind of personal preferences... like I want Brush Script, they want Times New Roman... but what does Sarah want? Like we need to have empathy for her, in her situation... and her experience with the product... and it does, it helps with those conversations... to be separated from what Dan likes as the designer... what the client likes as her or himself... and let's talk about what's right for Sarah... and that's through to like color, fonts... language types of imagery organization of information... like what features should be shown earlier... based on some of the preferences she has... and some of the knowledge of the product. Now this is just like a super quick overview of persona, it's a... we're kind of learning UX design here in Figma. A UX researcher, we'll spend a lot more time... and potentially produce a lot more documentation around... and understand Sarah a lot more than kind of what we've done here. So I guess that's a kind of a broad overview, if you're new. If you are new, my advice to you is... to spend some time now or after this course... researching personas, what they're for, to get a better understanding... and just know that this is a very simplified version of it... but good for what we need for this course. Now Task Flow, if you haven't heard of it before... Task Flow here, we've been given... instead of designing all of the mobile website... we've been asked to design a certain kind of important critical feature. So we have to design this Home page... it shows the Products, or the Product Features... a Checkout page and a Confirmation page. So this is a nice simple Task Flow... they can be a bit more complicated, they can be less complicated... it might be like, you know, Task Flows could include things... like how, you know, how does a person cancel this product... what is the process there? You might be designing the cancellation process... maybe it's the sign up process, maybe it's how to change your password... how to download or upload a document. It might be a specific thing that needs to be done... on your particular app or website. So let's consider it, a Task Flow... and also actually let's throw in this other term, kind of his buddy. So Task Flow versus User Flows comes up quite a bit. There's this great article here by Erica Harano... I'll put a link on the screen here... but after this video, or after this course... do spend a bit more time understanding these... but I'll give you the brief rundown. So basically, Task Flows, have a look... they've got the Pancake Task Flow... so I'm going to look at this, finding a recipe version, very simple... kind of like what we're doing in our course... Home page, search for pancakes, search results... find the Super Banana Pancake recipe, simple Task Flow. It's step by step, but sequential, kind of linear... whereas a Task Flow is a lot more complex, let's have a look at this one. So this one here, can you see... we end up with, it's the same kind of process... so you start at the Home page... and you end up with Super Banana Pancake... but there's a lot more ways of getting there. There's more than one option... which we know is always the case... like this option is like the big one here... the first one is-- are they going to use the search bar at all? The Task Flow up above said, assumed, using the search option... but there is going to be... your persona might not be a search bar kind of person... again, they're going to go this way. So know they're not going to use the search bar... so then we're going to have to build out and mock up... the browsing the categories... and there's a Breakfast category, and then there's a Breakfast page... and they're finding pancakes within that breakfast page... and then they click on the recipe that they want... and they've ended up, back at the same place... but it's a different way of getting there, there is... you can see the key up here, there's Decision nodes... the different shapes for different actions... these are our pages, these are interactions... between the user and the interface, and these are decisions. They've got the start and stop there... so User Flows are more complex, show different options... so you've got to make sure that you are designing for the right thing. If you're designing your User Flow, it's going to have more to it... in a bigger job, whereas a Task Flow can be quite a simple boundaried option. Now you will have Task Flows within this User Flow... you can still see our Home page, search results... banana, is still there, it's just kind of baked into this... more complex, or different pathway that the user might follow. A User Flow will help you find more things, like any sort of dead ends... or people get stuck in a loop... or don't know where to go anymore... so yeah, that's the brief User Flow versus Task Flow. Another thing to mention... is that we've been asked to design... a mobile website version of this, not an app... so an app, you just have the one mobile size screen... because it's a mobile website... It means you're probably going to have to design out... not only the mobile version but maybe a tablet... and a desktop version as well. So that can often catch you out when you're new, and you're like... if somebody asks you to design a desktop website... you're going to have to-- the developer is going to want to see what, you know... how the site breaks down to a mobile version, or up into a desktop version. So take that into account, but our focus here is the mobile version... and lastly, this is a pretty bare bones in terms of... you know, we've got a persona... we've got a company name and a Task Flow... and often a brief can be a lot bigger than this... like designing a whole website... and sometimes you can get a lot of details around it. So for me as a designer, what would be hard with this particular one... is how much do I know about Scott Headphones? Not very much at this stage... I would like to see... I'd like to talk to them or have my Product Manager talk to them... or you know, whoever's in charge, talk to them about... what they're about, what are their values, what is their mission... to help me kind of help with this persona... to kind of build another level on there. Sometimes you won't get that information, and sometimes you will. If you get given something from a bigger company... they're probably going to have values and mission statement... so you can go off and find that and add that to your kind of tool set... when you are designing this thing... to have better conversations with the stakeholders... when you are referencing what you're doing... versus where they're going as a company... equally, you're going to get jobs where there is no values... and there is no mission, and they haven't really thought about it... and you're going to have to do your best with what you've got... and as you get more experienced push back for those types of things. It's probably conversations that I want to have more and more... the more experienced I get, like, not just a persona... but like why are we doing this, where is the direction we're going... who am I helping, why are we helping... to really influence my design work, but anyway... this is a good starting point for this course, let's... let's move on. 6. Class project 01- Create your own brief: Hi everyone, it is time for your very first bit of home... we're not going to call it homework, we're going to call it class projects. They're here to-- you can ignore them, you totally can... but it will really help you solidify what we've learned... and my goal is, so that you can create something through this course... that is unique from the course material that I'm making... that is great for your own portfolio. The first one is to create your own Brief... so we saw in the last video that... I made a Brief, where is my Brief? So that's my one, what I want you to do is... go to this website that we've just created here... so randomprojectgenerator.com... I want you to enter your last name, or your pet's name... or a friend's last name, somebody's name, for the company... and enter your location... in Rio, it was where I was born. You can put in, you know, Ireland as a country... if you're in a big country put in your state or town, whatever it is... and then click 'Generate My Project'. Make sure you're on the 'UX/UI' tab there, and click 'Generate My Project'... and you should get something unique for you. So I've got shadow surfboards, oh, it's kind of cool... so this gets randomly generated, do not hit 'Retry'... the red button is red, I just want you to pick the first one you got... even if you're like, "Hmm." Some of the more tricky objects, and tricky personas... is one of those things that will really help build you as a designer... don't hit it... and yeah, have a little read through. So you're going to get something unique... and it's going to be unique in some ways... as in the company name and the product... but the actual thing we'll build together will all be the same kind of structure. So we'll follow the same task flow... you're going to use Home page, Product Features, Checkout... and Confirmation, whatever the product is... and it just means though that when you do start following along... we're still going to draw a button, and it's still going to say, Learn More... but you're going to be using colors, that are good for your persona... and when I say bring in an image, instead of bringing headphones... you're going to bring in surfboards, or whatever your product is. You're still going to have an image in a circle... so they're going to have the same structure... but at least at the end, you're going to have something... kind of unique for your own portfolio... plus it's going to get you thinking about your own persona... and how you might kind of design for them, you get the idea? So follow along in this course... but using your own company name... - which I'll get you to make a little bit later on. - and picking your own images and colors for that brand. So once you've done it you either take a screenshot of it... or copy it to clipboard, or download it as a png... and just store it away on your computer or your phone... ready for later in the course. We're going to put them together... on a kind of a 'Brief & Taskflow' page later on. Another thing I want you to do... so we've got our kind of company name and persona... so you've downloaded it, copy to clipboard, something... you've got it somewhere stored away... and let's bring in the task flow as well... because we're all using the same one. So it's going to allow me to show you something strange, weird... I don't know, interesting for Figma. Figma really wants everything to be in the cloud, online... so go back to your kind of Home page... or if you're on a PC, go to the little Figma icon... go to the one that says, it's about here... it says, go to files or something similar... be on your drafts... and if you want to import a Figma file... rather than it being shared with you... you see this little icon up here, Import, look for that icon... it has moved around in the past, give it a click... and in your Exercise Files there's one called taskflow.fig... load that in there, and we'll use that later on as well. You can open it, have a look... basically, it is just... our task flow. We'll copy and paste that, and combine it later in the course... but you've got your task flow... you have got your own brief release, persona and name... and you're ready to carry on. So go do that as homework, and I will see you in the next video. 7. What is Lo Fi Wireframe vs High Fidelity in Figma: Hi everyone, in this video we're going to talk about... the difference between Wireframes and High Fidelity... well, it's pretty easy, you can see. Wireframes are pretty budget, and High Fidelity mockups look really nice... and they'll call them Hi-Fi, Lo-Fi ... generally though, they'll call them Wireframes, and Hi-Fi is High Fidelity. This one's going to be really quick and easy to make, and test... and do not try and skip, if you're new to UX... skipping the Wireframe section... of your kind of design process, at your peril. You can probably knock up a Wireframe in a few minutes... always high fidelity, you can end up kind of... like playing with a tracking, and leading for hours and hours... and you will not get a better, you know... test out of your potential kind of audience... you know, we're being assigned a task flow... we can really easily create a Wireframe... and test that task flow even on the app. I'll show you how to do that, like on a phone or on a website... super quick, super easy, and no distracting... like, "Oh, is that the right image, is that the right font?" "I'm not sure about the colors," you're talking about the task flow... like the actual mechanics of how this is built underneath... and we can test it quickly with Wireframes. Wireframes don't have to look like this... that's my Wireframe. Another Wireframe that I downloaded... a lot prettier, buttons got color in them, ooh... pick one color only, gray... and a color if you want, or stick to gray... you want to take away the design elements here... you spending time doing it, or at least, you know... the client going, "Oh, I don't like pink, or this blue is not the right blue"... you want to take all of that out of the equation... when you're designing Wireframes. Keep it simple, pick a boring font and a boring color. Another Wireframe, slightly nicer... yeah, somebody spent some time on lots of kind of headings and stuff... and yeah, you can, there's no reason you can't take your... you know, Wireframes further than what we do in this course... a really simple one, that's kind of removed all the text... another sketchy one, ooh, kind of sketchy. I think that's too close to Comic Sans for me... but I like the sketchy lines around the outside. So they're all Lo-Fi Wireframes... Hi-Fi, it's in the same document... this one looks a lot prettier though... this one here, another Hi-Fi... a lot more time and effort going into this one... but for testing you only need the basics. So that's why we're doing Wireframes... and you have to do it because that's the beginning of the course... we're going to learn lots about how to use Figma... building the Wireframes, before we start building our super beautiful things... a little bit later in the course. All right, let's actually get started with Figma, and do something. 8. Creating our design file & introducing frames in Figma: So let's make our first design file... so can be a little confusing for this first screen... yours is going to look different from mine, because they change this quite often. If you have nothing like mine you might go up to the top left hand here... and click on the little drop down. If you're somewhere else you might have to... click on the 'Home' button first, and then this little drop down... and what you're looking to do is to click on your 'Name'... mine would be a bit blurry here... because it's got my email addresses as well... but click on your 'Name', not Community, click here... and you should get to something resembling my screen. What we want to do is a new design file... that only appeared the other day. So what I've normally done in the past... is I go to-- we're going to create drafts... and hit this little '+', it's kind of next to it. So either way we're making a new design file... and there we go. If you're brand new, I've kind of reset my Figma... so all these little pop-ups... you can show stuff, I'm here to show you... so I'm going to cancel that. You end up with this big nothing screen. We've got our design file, now we need to introduce frames... frames of these guys here, this little icon here, third one in, click on it... and you can draw out any size frame. Think of a frame as a page, so if we're drawing an app... we're going to draw something kind of like... oh, go back to this tool here, draw out something that looks okay. You can have multiple frames, all sorts of different sizes... desktop one, tablet one. So frames have many uses, but at this early stage of the course... think of them as a page or an artboard... if you're from Adobe land. What we need to do is delete them because those are random sizes... click anywhere on the inside of them, hit 'Delete', click them, delete them. So go to your 'Frame' tool, and actually let's be... a little bit more specific with our sizes. Over here you'll have some pre-made sizes... you are going to be in the future... so you might be at iPhone 52... I'm going to use iPhone 8... it's a nice generic size for both Android and Apple... some of these big ones get a bit big and strange sized. Now the goal here is to pick a size that is generic... we're not going to design every different iPhone, in different size... we're going to design something close enough... to the general purpose phone... and our developer will build something that is a bit more responsive... and we'll adjust for the kind of small changes in different pixels. So pick a phone size that is quite generic... it's easiest just to Google, like, "most common phone size"... and you will get something, or "most common desktop size"... and you will get something in here, and pick it. If you're designing a watch, if you're doing... kind of just regular old, old school paper, the wood stuff... there's all sorts of things in here, so yours will be different. Now I'm going to start with phone, and I'm going to start with iPhone 8... even though it's really old, I don't know why it's still in here... here it is, but it's a good generic size, 375 pixels, I like. You can adjust it afterwards, here's your frame... and you can see, actually the new size is not even listed there. I'm going to use 400 and just type over the top... I'm going to undo that because iPhone 8 is perfect for what I need... and again, if you're watching in the future... and there's no, like iPhone 8, you can type in this... 375, 667... to get the same dimensions... but hey, go with whatever is common for you right now. The other thing I tend to do is... I try and, at the meeting, figure out what kind of phone my client has... because they're going to be potentially testing it on their phone. So I want to make sure, like if they've got some sort of phone... I might use that just so that the mock-up works really great on their phone. So we're going to end up with naming loads of these frames... because iPhone 8, 1, 2, 3, 4, 5, 6, 7, 8 is not going to help us. So we're going to double click on the word up here... or you can double click over here in your 'Layers' panel. If you can't see the Layers you might be on Assets... double click it, either one, and let's call this one... remember our task flow we've got... we're going to have our Marketing page... we'll call it the Home page, Home page/Marketing page. We want another one, so you can go back to your 'Frame' tool... click on 'iPhone 8' again, you'll get another one... and just keep going the way through. We're not going to do huge amounts of shortcuts in this course... but we're going to have to learn a few. The first one's going to be space bar, so hold down space bar... it's pretty common in lots of design programs, right? Click, hold, and drag, and I'm going to name it in this one. So remember, our task flow is Marketing page, then Product Details. Another shortcut that we use quite a lot... is you can just copy and paste these frames... so just click the name, 'Command C' on a Mac, or 'Ctrl C' on a PC... then 'V', so 'Command 'V'. We've got another one, 'Ctrl V' on a PC, up to you... I say no shortcuts, and then I start with lots of shortcuts. Let's put in our four pages, so our task flow said... we did the Product Details, what else was there? So Check Out... and copy paste, spacebar, click and drag... we're going to do our Confirmation. So in the same document, there's no reason... why you can't then go, actually, now, I want my Desktop version... so I'm going to click on 'Frame', I'm going to say 'Tablet'... and I'm going to say, we're going to be designing for the iPad Pro 12... because that's the one I own... and over here, Landscape, Portrait, hit space bar across... Landscape, Portrait, you can remove them. I'm going to click the name, you drag the name, spacebar around... drag the name around, you might say copy paste, paste... and do the same thing. We're going to have Home page, Product Details... same with like the Desktop versions... I'm just going fast here, because we're going to delete them... so you don't need to, maybe practice playing around with it. If you, see this one's iPad Pro at the moment... you can click on this frame and say, actually... now you are a normal kind of standard Desktop... that's a really good Desktop size, really common and generic. Now zooming in and out, 'Command' on a Mac, 'Ctrl' on a PC... and it's the plus and minus keys. There's a million different ways of doing lots of things here in Figma... I'm going to give you one way that I think is probably... the easiest at your level, or just the generic best way. If you do find another way, and you're horrified... I'm not using the hold option, hold the 'Command' key down... and use my scroll wheel, that's what I can do, to zoom in and out... you can do that, that's fine. What I want you to do is, for this course... is I'm going to select all of these... and I'm just using this tool... it defaults to it every time. So you don't really need to pick it that much... I'm just going to delete it, this is where I want you to be, at the end of this. If you end up in the middle of nowhere... I zoomed in into the middle of nowhere, I'm going to zoom out... use my spacebar, get it right in the middle, and then zoom in. So this is what I want you to get to... I want just four boring old frames, and I want you to name them all. The last thing I want to show you, kind of kicking off this... getting used to Figma, is naming your file. Just so you know, you're going to end up with lots of untitled documents... it just happens, I don't know, this program loves untitled documents. So we're going to be really specific, and actually name them. if we click off in the background here, can you see, it appears up there... if you've got something selected, it goes away... have nothing selected, click in no man's land... and you can click up here, and you can say, give it a name... and you've already got your brief, right? So mine is Scott, yours is going to be something different... but we're all going to call ours "Ecom v1" So you pick your, the name of your company... and put Ecom v1, our e-commerce is version 1. So the v1, just something, A, B, C, 1,2,3, it doesn't matter. As long as you're not like a Final person, Final 01, Final Revisited... Final final. If you're laughing, it's, you know what I'm talking about... I'm talking to you, give it some version numbers. There are some sweet features later on... for like versioning within the document but that's later on. Another thing is, if you have got a bunch of Untitled... you can, let's go back to, I want to explore this little house... or go back to, yeah, go back to the little house. Remember, make sure you're at your little Name here, and not Community... and what you'll notice is... look, there he is down there, Ecom v1. If you've got lots of Untitled already... I've cleaned mine out, you can right click them and go to 'Rename'... and just do it there or open them up... and do what we just did, back to this tab, back to 'Home'. Keep practicing that, home base into our work, kind of like a browser. All right, that is our basic setup, these are frames... the whole thing is called a design file. Frames have other sneaky settings that we'll talk about later in the course... but for the moment consider them pages or artboards... but they call them frames... onwards to the next video. 9. The basics of type & fonts in Figma: Hi everyone, we're actually going to start making things in Figma now... and what I'm going to do over the next couple of videos is... I'm going to introduce things like Type, in this one... and the next one's going to be like circles and buttons, and colors... and just the stuff that we need to get going. We're not going to, I'm just going to touch on them... and throughout the course we'll get deeper and deeper into them... rather than trying to, like, I don't know, click every button to do with Type. In this video we're going to get all the basics in... and when appropriate, throughout the course... we'll dive a bit deeper into them, so let's get started. In this video we're going to look at Type, and the various quirks in Figma. All right, so let's start off with the Type tool, it's this letter T here. If you hover above stuff, can you see, it says, Text... and the shortcut is T on my keyboard, so I can tap 'T' on my keyboard. I'm not going to go through all the shortcuts... but if there's one that you're using quite a lot, hover above it... and it should tell you what it is, you see, 'C' for adding a comment. So we've got two kinds of text boxes... you click once and you can type forever... that is this one here... it is called Auto Width Box, because, I know that off by heart... and the other type of box you're going to create is a click and drag box. So grab the 'Type' tool, click and drag it out... instead of clicking once click and drag it... we get this option here, which is the fixed size box... and this one is, just means that when I get to the end it will break... and we'll use both of these in this course, especially for those Wireframes. So I'm going to undo, if you don't know, there's 'Edit', 'Undo'. If you're on the browser version it is in here, 'Edit', 'Undo'. Again, you'll see the shortcut for it there, undo, redo. So we're going to do two things, we're going to do Auto Width... so 'Type' tool, click once and just type in your brand name. So mine is "Scott Headphones"... when you finish you can just kind of click out in this no man's land... and you can move it around, and stuff, grab the Type tool again... and let's do a box about this sort of size... and we're going to type in our marketing message. So just type in something like, "This is our marketing message..." you've got to be at this stage, with things... it depends on who you're working for. It's best to keep everything very generic, try not to use language... you know, marketing speak here... because you might send off to testing... and instead of people testing, like the flow... they might end up testing, you know... coming back with spelling mistakes, or like... it might be controversy about the marketing message... "That's not right, let's get it to copywriting." So at the moment we're just going to keep everything as simple as we can... to take out any sort of variables for our testing just so that we're focused. Now you can switch these later on... let's say that this one here, we want to actually make it that auto width... so we can click it here, same with this one, we can make it a fixed box. The difference now is, watch this... when I start typing, kind of blows out of the box... and it's got a fixed width, so you can change them later on. I'm going to hit undo a couple of times... I'm using my shortcut 'Command Z' on a Mac, 'Ctrl Z' on a PC... to get back to-- undos aren't as consistent as you would imagine... from other programs... undos, can you see, the undo didn't put my rectangle back to the big size... it's undoing my Type... but it's not doing that big rectangle... this is pretty common throughout Figma. Sometimes, you can, like draw an arrow, change the arrow head, hit 'undo'... and that leaves the arrow head there. This may change over time, but it's just one of those quirks about Figma. Sometimes if you hit undo it decides not to always do what you ask... it does bits of it, so, what I've got is... I've got it selected with my Selection tool... I've made sure it's a kind of fixed size, I'm going to drag it out... so it's a bit bigger, because what I'd like it to do is... I'm going to play around with just the basics here. Let's look at font size... the basics over here, I'm not going to cover them all... because you know how to go, font size, there's a little drop down, look at that... go to something nice and big. You might have to select your text first, so double click it, highlight it... and say, over here, I'm going to make it nice and big... and because it's a fixed box it's going to kind of break on the sides here. Left align, Centered, you know all that sort of stuff. One thing I will show you is that, let's say things... if you hover above them, that little icon there is the Line Height... but you can click and drag them, any of the icons... so I'm going to undo that, undo again, there it goes. If you-- see the little icon, so over here, not draggable... over here, on any of these little icons you can click, hold, and drag them. So I tend to do this quite a lot when I'm working... and you'll see me throughout the course... dragging line height and tracking, letter spacing, and that sort of stuff... so that's one little trick. The other one I do quite a bit is... let's say this is not draggable, I wish it was... but if you click in here, and see, my little cursor flashing... if I hit the arrow key on my keyboard... just the plain old up, down, left, right, use the up and the down... if you hold Shift it goes up in big chunks, in tens, units of ten. So that's true of, like every box in here... if I want the width to be a bit wider, up and down... or hold Shift, go up in big chunks... and I'm making the width of this text box bigger, undo, undo... wrecking my boxes... but for the fonts I use it quite a bit... just kind of going up and down... I'm looking at my desktop, I'm not really looking over here... I'm just kind of checking, is this a good font size, not a good font size. Now when it comes to fonts here, you-- there's a couple of things we are picking, font sizes now... and you've got to really be at 100%... at the moment we're at 86, you might be at 100... but if you're picking a font size, you're like, "Oh, that's too small"... you've got to try and pick a font size at 100%. You don't want to be, you know, trying to pick a font size... when you zoom right out, because you can make it too big... and this, because this is going to be on a mobile device... it's a mobile website, it's not an app... but it's only going to be viewed through a mobile website... at this kind of, kind of ratio, this height... it's best to be actually picking font sizes on your phone. I'll show you a little bit later in the course, not too far... we can actually preview everything on a device... so don't be spending too much time on... deciding who was it, 12, should it be 16, 14? Actually get it onto the device and start looking. The last thing I want to share with you, when you are kind of... at this font picking stage, especially for a Wireframe... is I want you to pick a nought font, a font that has 0 character... I feel bad because this is Roboto... sorry Roboto, you have 0 character. I don't want-- let's not go all Brush Script... even if it's a beautiful font, and it's exciting... we want really plain fonts here... because when we do do our testing, we want feedback not on... like, "Hey, I don't like that font," or "that's not communicating right." We don't want to bring that into the conversation... we want to keep it all separate, and just have it very, very simple... so it'd be really common to use something like Roboto or Open Sans... let's have a look. Roboto, Open Sans what's another one? Source Sans, Source. You can tell, these guys are not the guys you invite to the party... they've got no, they've got little personality... they're clear and they are professional, and great for a Wireframe... but they're no Brush Script. So whatever you decide, pick one... we're going to use Roboto for this because it's... I don't know, the most generic of them all... plus it has a lot of weights that you can play around with often. If you don't have Roboto you can find it online, download it... and it is, yeah, it is pretty common around the place, and it is free. You can use Arial or Calibri, or whatever you want to use... actually, not allowed to use Arial, Calibri, it's too Microsofty. All right, so we've picked a non-font... we're going to throw in a few different things for our mock-up... so we've got our-- for our logo as well... we're just going to keep it super simple. Even if you have, if your company already has a brand... it's probably appropriate, throw it in, in black and white, just keep it simple... because the brand isn't being developed yet for this company... we're just going to keep it super simple. I'm going to play around with fonts... now this is where I break all my own rules... like, "Hey, don't pick a font that has character, stay away from..." I think you can't help yourself, you're like, "Man, that layering's truly big." If you want layering to go back to 0, just delete it and hit 'Enter'... and it goes back to Auto, and even then you're like... "Oh, I'm just going to..." oh, wrong one, this one here, just take it off a little bit. I can't help myself, you, yeah, do as I say, don't do as I do... don't be playing around with letter spacing and stuff... and making it, your wireframe looks good... making your wireframe look really good, it's hard to stop that. You can do a little bit of design, so we need a couple of things... we're going to keep that, we're going to copy and paste... and use this again, wow, that went weird. When you do copy and paste, did you notice that... so there's only one of them there now... if I copy and paste in Figma, it goes back over the top... so there's two of them right over the top... so that's a, it's a weirdness, but hey, it works. We're going to have a Buy Now button... "Buy Now." Now I end up duplicating, instead of copying and pasting... you may or may not do this... on a Mac hold down the 'Option' key, you see a little arrow... it's a little double arrow there... on a PC it is your 'Alt' key... so if you do that before you start dragging... so Selection tool, hold down that key, 'Option', or 'Alt', drag it out... you get a second one. Figma is really good at lining things up, can you see, oh, so handy. We've got a Buy Now, and Learn More. We are going to go 'Centered' for that one... I need another one up here, that's going to be my 'Product Shot'. I think that's all the text we're going to do for this particular mock-up. So we will go into a little bit more text detail later on... but it, see this little dotted line down here... this is where you get into the-- it's pretty amazing how deep it does go. If you're a designer who loves a bit of... loves a bit of ligatures, and all sorts of amazing things... you can see, Alignment, not that exciting... Decoration, Underlines, Strike throughs, nothing. So there's a lot, Bullet Points are in here... you can start doing Uppercase, Lowercase, I won't cover them all... we will look at little bits throughout the course... but here's all the-- if you really want to get into stylistic sets... and man, it gets deep. So it is, most of it's just sitting here in your kind of right menu... they call it the Right panel, sometimes they call it the Properties Inspector. This thing here on the right, you can get most of it just here... this little dotted line gets you a bunch more. All right, we've actually made something, kind of, a bunch of boring text... let's get into the next video... and make some boring rectangles and buttons... I'll see you in the next video. 10. Rectangles, Circles Buttons & Rounded corners in Figma: Hey everyone, this video we're going to draw some rectangles... and some circles, and some rounded corners... very exciting, let's jump in. All right, let's first of all put in our kind of product shot... we're going to put in a placeholder image for that... I'm going to use my Selection tool... just click and drag over a bunch of them, and then I can drag it down... so I've got a bit of space. Let's grab the 'Rectangle' tool... it's one of those ones that you'll probably learn the shortcut for... and they're all hiding in here... see, rectangle, lines, all the kind of basic shapes. So as for the Rectangle tool, which makes sense... so I'm going to click, hold, and drag it out... and you get the big gray box, and you'll notice our text disappeared. So this brings us to layering... so over here, if you can't see it you might be on Assets, go to 'Layers'... you'll see, there's my Homepage frame... and inside of that is all these different things... all the different texts we've added. Now we've got a rectangle, but it's on top... so we can do a couple of things... right click, say, 'Send to Back' please, and it's just that shortcut. You'll learn that one quite a bit as well. Learn the different shortcuts at your level... you might be ready for shortcuts, you might be not... you might be freaking out, so just right click and say... actually, 'Send to Back', or I want you to practice-- I've undone that, can you see here, I can drag this... kind of like, more like Photoshop... I'm holding it, holding it, dragging it. Now it's at the bottom of all those guys... and I can see it, easy, I'm going to undo it... and show you just one more painful way... mainly because there is a ton of ways of doing everything in Figma... and I'm going to show you the way that I think makes most sense for your level... and what's really common and useful... but if you find a different way, and you're like... "Hey, why didn't he show us that way, that's heaps better"... if you find it, and you like it, you can do it... but let's say this one here, this little Figma menu here... if you're on a Mac you've got this top bit along the top here... which is exactly the same as Edit, where is it ... 'Arrange", you can see how... no, I don't want to arrange, 'Object', there it is there... you can see how much I use this menu, not very often... so you can, on a Mac you'll see these along the top... and they will correspond, see, File, there's File, Edit, there's Edit. So often I use these ones along the top here... but I know, if I'm using the browser version... these aren't there, on a PC, these aren't there, these are exactly the same. So I'll try to remember through this course... that I'm going to go to 'Object', 'Send to Back'... but you might find in this course that... Dan's going up to arrange up the top here... and you're like, "Hey, I don't have that," there it is there, look. So I'm going to go 'Object', 'Send to Back'... yeah, loads of ways of doing the same thing. Let's kind of get that in the middle there... you'll notice that a Figma is just... really naturally wanting to go to the center of things... center of boxes, center of artboards... you just drag it around, you don't have to do a lot... there are the full-on ranges along the top here... kind of, Arrange Center, Arrange to the Left... but often just dragging it around, does perfectly well. All right, let's do our buttons down the bottom here... so I'm going to zoom in, 'Command +', or 'Ctrl +' on a PC... and I'll hold my spacebar key down and click and drag. 'R' for the Rectangle tool, or just go up there, drag it around. We know that it is on top, you can drag it over here... what's the shortcut? It's a test... what's the shortcut to go all the way to the back? It's that square bracket, next to P on your keyboard... there it is, down, up, the other one, down, up, down. So I've got that button, I'm going to hold down my 'Option' key... and drag out another one. You might have to resize this... I want to move on to rounded corners... because when I say, "Do not, whatever you do, don't design this thing... it's hard because, you're like, "I want rounded corners"... you're not bossing me, Dan." I'm going to make some little design choices... so with the Rectangle selected, you you might notice... these little dots, if you don't see these little dots... if I zoom right out, minus, ' - ', you see, they go away. So those little dots in the corners help with rounded corners... if you can't see them just keep zooming in, look... still can't see them, oh, are they there? Yeah, they're there. Zoom out, there's a level, look at that, they're not there, zoom one more in. I can grab them and drag them, and you're like, "Oh"... there you go, nice round of corners. You can do it-- I'm going to go zoom all the way out to 100%. The shortcut is, where is that? So this is the long way, 100%... see this, Shift, that little arrow key is Shift... I was like, "What is that one?" Especially on a Mac, I'm like, "What the hang is that guy?" I have to look at my keyboard, luckily it's written on it... you think I'd know. So 'Shift 0' along the top there, goes to 100%... because that's probably a better place... to be designing around the corners... because you're like, "That's the way it's going to look." So if I'm doing it here, I can actually just do it here... in my kind of Property Inspector here, this right panel... I can say, actually, let's try it using my arrow keys... remember, the sweet shortcut, up one... oh, how does it look up another one... smashing it up, down. So I'm going to just put in somewhere across 5. It's handy because you can get consistency. Select this other one, go '5', click on this one... they're all going to have five rounded corners, look at that... because we are doing rounded corners... it's not appropriate right now, but if I click on this, zoom in enough... so I can see this radius. You can actually hold down the 'Option' key on a Mac, 'Alt' key on PC... and actually just click one of them and go like that... undo it, because we don't need it right now... but you probably had that question... like, can I do one by itself? You can... just hold down the 'Option' key on a Mac, 'Alt' key on a PC... and click it, and drag it, there you go. Now before we go let's add a little circle down the bottom here... so the Circle tool, it, the Ellipse is the 'O'... I'm going to drag it out. Another thing that I haven't quite covered yet... if you want it to be completely circular or square... you hold down the 'Shift' key while you're dragging. So watch this, I'm going to go back to my Circle tool... and before I start dragging, hold down the 'Shift' key, drag it out... and you see, perfect circle, if I let go of it... ellipse or oval... back to holding 'Shift', I'm going to get about that. For the moment I'm going to put it down here... I'm going to grab my 'Type' tool and click once, I'm going to hit my '+'... and I'm going to pick an appropriate font size. Now with Type, I want to move it... it's just going to kind of select it, so click off in the background... and then kind of just drag it to where you want. Font size, in here, I'm using my up arrow... to get it to a kind of a size that I want. Bold's kind of weird for that, there we go. All right, that is going to be good enough for this video... circles, exciting, rectangles... oh, one little bonus thing for circles, I was going to do this later... but look at this, see the circle, what's that thing do? You probably already dragged it, you ready? Absolutely useless, never used it. I can see, I'm like, yeah, that does a Bar graph... I have not mocked up a Bar graph before, so... sorry, Pie chart is what I want, so you can... that's what that thing does. Anyway, let's get on to the next video. 11. How to use color in Figma: I hope you're sitting down. This video, we're going to look at color. You're ready? Steady? Boom. It's green and black. It's not very exciting I know. I'm going to try and convince you that you don't need a lot of colors when it comes to your wire-frames, you should probably leave it gray, but hey, we're learning about color in this video. Let's jump in and I'll show you what you need to know. To work with color and select on something. We're going to use this big rectangle here as the default color for Figma, were you just click on it. Now fill, click on it once and you get this little guy. If you've never used a color picker before, this little dot where our color is, you can click in and drag him around. At the moment, you can only pick red. To change it, this little hue slider here, drag it along to the zone that you want it to be. I'm going to pick some thing and then move this around to get that full saturation, no saturation light doc somewhere in there. Other things you should know about in here if you want full white, just click, drag, and drag it like past, just keep going and it'll be full white. Either of these dark ones down the bottom, I'm going to be the same. White, black, that one is black, it doesn't matter and I'm going to pick some sort greeny color. You could pick it from the brand or just pick light blue is probably the most common wire-frame color. It's the default and [inaudible] a few other ones so you end up seeing this steely blue thing throughout. I'm going to pick a slightly greener vision. You pick anything you like. Other things to know about color is transparency down at the bottom here, you can make things slightly transparent, which makes no sense, unless I bring this all the way to the front, I'm using my square bracket. You can see it's covering things with a bit of transparency. Actually, I'm going to change that they're at a 100 percent. It doesn't matter whether you do it here. You can see that the a 100 percent or you just type it in here and you say I want it to be 50, well same again, you can use your up and down arrows to go through it all. I want mine to be a 100, perfect. If you are a bit more of a color nerd, then you might be like me. Hexadecimal numbers. That's the of wib version of a color. You might not like that, you might like the RGB visions, there you go, that's RGBA so you could see a transparency at the end, red, green, blue. You might be mixing colors from maybe a corporate speak manual or something else and other colorways, CSS. If you're a developer, you might be working this way. RGBA colors and type them in here. Hue saturation luminance, I use this quite a bit. Hue saturation brightness. Actually do I do it in this one? Probably not in this program very often. I do a lot in things like Premiere and Illustrator, but not here in Figma. I'm going to stick to the hexadecimal number. Other things I want to point out is the eyedropper. So we've got this here. I want to steal this color so I select on it, go to my fill color, click on the little eyedropper. Can you see up here? There's like a zoomed in version and watch this, I can move it around. You see just zooms in on things, that was pretty easy because we can pick this big rectangle, but sometimes you just want to pick a teeny tiny bit of color from that bit. It's going to be that weired-like gray. Eyedropper, I'm going to click on this one. Same with this fella. You, eyedropper, you. Now to get to the eye, very often, I won't be going into the color picker to do it so I'm going to undo to get my grays back. I select on it. There is the shortcut for eyedropper, like I, not E-Y-E, the letter I. It's a shortcut. Select that, hit the eyedropper, click on that. There's a lot of that going on. However you want, get that this all the same color for me and be resilient. Don't try and add a bunch of colors. Keep it really just black, grays, whites, and colleges to six it up a tiny bit. When you start adding color palettes to it, you again start entering different parts to the conversation about, "Is this the right color? Is it right brand color?" Just keep it generic, keep it gray and nobody's going to complain. Down here, can you see document colors? You're like, "Great, these are the colors that I've used already." This though gets mad big and over useful. It's fine for the moment because you're like, "Okay, I want to go back to that gray that we had before." There it is there, something that's being used or "There's that green, was that the green? It's the same green." Later on, we're going to look at this and we're gonna look at Team library colors. It's quite later in the document, plus we're going to look at something called color styles in the not-too-distant future, where we tidy it all up and get a bit more consistent. But document colors will share everything that are being used in this document so it gets a bit mad, but that's what they are. That's the basics of colors. Let's jump into the next video. Actually, we go nowhere. It's driving you mad, It's driving me mad. You can't do that then. We're going to do some responsive buttons later on. But for the moment, I can't live with this, needs to be bigger and this needs to be more in the center. One of the things I want to show you, a little shortcut might be handy is because you want to make it bigger on both sides, you can hold down the "Option" key on a Mac, "Alt" key on a PC. When you're scanning things instead of just dragging the edges and then trying to move it around. If you hold down the "Option" key on a Mac, "Alt" key on a PC, and does it from both sides and you're like, "That's better." Now we can move on to the next video. Is that even in the middle then? Yeah. Arrange look, that is better. Let's do the same thing for this one. I got to replace it with that one. Some of you you're like, "Why does he care so much?" Then some of you will be like, "My goodness, finally. He fixed the button and will he ever get rid of the full stop?" It's not lining up properly, is it? Anyway, Let's get onto the next video now. 12. Strokes plus updating color defaults in Figma: Hi everyone, in this video we're going to look at Strokes... strokes around the outside, that's the line around the outside here. We'll look at Burger menus, which is just a group of lines... but we'll also look at the ends here... can you see, they've got nice little rounded lines... instead of this kind of like big flat end on the edge. We'll look at setting some of the defaults... that every time we draw something, like a rectangle... it is kind of set to the rounded corners... and the Stroke, we like, and the color, we like. There's a few things we cover in this video, all right, let's jump in. So let's do our Stroke, we're going to click on the rectangle... the Stroke is this one here. By default you get a Fill, you don't get a Stroke. To add a Stroke, hit the little '+' button... and we've got a black Stroke around the outside. The Stroke Width, we can drag... I'm going to put in just two for mine. Do you have to have a Stroke around stuff, you don't... but we're learning stuff. The one thing you will get annoyed about later on... is if you do have like a Style... you know, you've decided that this green, with that Stroke around the outside... and you're like, "Okay," I'm going to draw another one... on this Product Details here." 'R' for my Rectangle tool... you're like, "Ah, it's gray"... it's gray again, it's got no Stroke... and no rounded corners and you're like, "Okay." So I'm going to go over here, and I'm going to change it to 5... and go slightly mad, trying to get the Eyedropper tool. So what you can do is, you can get to a point, you're like... "Actually, I like that, I like my rounded corners... I like my green, I like my Stroke"... and I can go change it as the default. So let's go to our little 'Figma' icon here, and go to 'Edit'... and there's this one here, it says 'Set Default Properties'... nothing really happens... except, that word appears... but now if I click off, grab my Rectangle tool, draw something out... look at that, I've got a sweet green rectangle... with black line around the outside... and yeah, rounded corners. So that is how you set the defaults, I'm going to leave that. Another thing you can do is... because these are already drawn in the past... I can't go, like, I don't know, I want it to now look like this. So we don't have Style set up, which we'll do later in the course... what you can do is you can click on this guy and say... 'Edit', 'Copy his Properties', these are his properties over here... and we're going to copy them, and we click on him. Doesn't matter what color he was, if we go to 'Edit', 'Paste Properties'... it comes along. We can click more than one, I've got the two rectangles... and let's go 'Edit', 'Paste Properties', there we go. So that's Stroke, let's look at a bit more Stroke... we're going on a bit of a tangent there, with setting the defaults... let's look at doing our little Burger menu at the top. So I'm going to zoom in... remember, 'Command +' on a Mac, 'Ctrl +' on a PC... and kind of get up here-ish to get started at least... and let's look at, let's drop down the rectangle. So you just kind of click and hold it, will show you other things. I'm going to use the Line tool... and I'm going to use my Line tool to click, hold, and drag... that didn't work, I don't know why... Click, hold, and drag, it will try and be straight... if it's kind of not straight enough for you... hold down the 'Shift' key, Shift key will do something with the Line tool... remember, it did with the Circle tool, it made a perfect circle. With the Line tool, it just makes it go in kind of some... you know 45º, 90º, and straight... So I want something kind of that long... don't worry about how long it is just yet... we'll make it, then we'll go out to 100%... and kind of make it the right size. So we're going to grab this guy, we're going to have three of them... so we're going to either copy and paste... remember, copy and paste has that weird option... where it's, well, it's not weird but it's over the top of it. So remember, I tend to just use the Selection tool... hold down my 'Option' key on a Mac, 'Alt' key on a PC... and just drag another version out... and it really wants to go underneath it, which is great. I'm going to introduce one more shortcut, if you're like... "If this guy introduces another shortcut here I'm going to scream"... close your eyes, or your ears. I'm going to introduce you to the 'Command D' or 'Ctrl D'... really common in Figma, it just means, do it again... okay, duplicate, do it again, whatever you want to call it. So 'Command D', will just do the last thing I did... so I can go 'Command D', 'D D D'. It's great when you're doing like lists and images... and you've got four of them... you just want to kind of like make a new one... it doesn't matter what you're doing it with. So let's say I want some Type, and I'm making a list... drag it out, holding my 'Option' key on a Mac, 'Alt' key on a PC... 'Command D', 'D D D D', or 'Ctrl D', 'D D D D' on a PC. You can open your ears now, people that are screaming about my shortcuts. So with these lines here, you're like, "How big should the Nav be?" The best way is to copy an existing template... so I'll show you kind of some of the templates that Figma's got... but if you are building stuff on your own, especially things like icons... it's best to be, remember, at Shift 0, or at 100% up here... so that you've got a good sense of the size... because if you have them like this, they're going to be very hard to click... or if they're going to be big jumbo ones it's just not that fun... well, they don't look like they should. I got lucky with mine, I think mine are appropriately sized here. So what you can do is just drag a box around them all... grab the corner and scale them to what you think they should feel like... that feels good to me. I'm going to put them in a kind of appropriate position for navigation... it's called the Burger menu or the Nav sandwich... that thing you click, that gives you all the sort of options... really common, in the top right, but can appear in the top left as well. So let's look at a bit more strokey goodness... so I'm going to zoom in on it... because I want the little bubble ends. Now over here, my Stroke, the Stroke Weight, we've talked about... so Start and End point, they do two things, click on the first one... you can put an arrow at the end, that's great. If I hit undo it doesn't go away... maybe this is just on my machine, I don't know why... undo, undo... that's one of those quirks. I'll leave it in this course because it's a weird quirk... is it just on my computer, no, I think it's universal... but it's probably going to be gone in the future... it's one of those updates where it's on somebody's... some developer's bug fix list... it's not super important because I can go back to None... but my undo doesn't turn those off. We've gone off on a tangent, let's stay on point... because I want to show you these, there's three options. So your Stroke at the moment just finishes right at the end... can you see there, the second one... I'm going to go, this Stroke has a rounded end... and that is the pretty one that I want. So the Stroke still ends there, but there's this like little round... that's a Butt cap, that is a Round cap, and this is going to be a Square cap. So this one here, look at the difference... between this top one and the bottom one. The Stroke is the same size, underneath... but this has got like a big square cap on the end... this has got an unfortunately named Butt cap... and that has got a nice round cap, that's what I want. I want all you guys, you'll see mixed quite a lot... if you've selected stuff, and it doesn't know what to say... instead of going, question mark, I'm confused, it says, Mixed... which means one of them... there are all sorts of different things, I'm going to say, you're all round... which only partially worked... oh yeah, why not do it at the end as well... there we go. So what have we learned, there are some quirks to Figma... like the undo with the arrows... we've learned about Strokes... actually, the last thing I want to do is, with images... we've written, Product Shot... but it's actually more common to just... draw a big cross through the middle, as a placeholder for an image. So I'll just great grab my Line tool... and I'm going to go from this corner over to here... and this corner... got to go back to the tool every time... cool. So it'd be really common to have that as like... that's kind of a visual cue that there's an image to come here... but it's not available right now. The other thing you might do, just while we're on the topic... is, instead of those lines - I'm going get rid of them for a second, and bring them back. - is we can put in a, like an icon that shows an image. So a really common one for this is an icon, I'll show you... so it's in your Exercise Files... so how do you bring in an image or an icon? You can go up to, there's couple of ways, there's this way here... so it's weird, under your Rectangle tool is where you bring in images as well. So I can place an image, there's the shortcut... the other way, is under 'Figma' you can go to 'Edit'... no, 'File', 'Place Image', use the shortcut quite a bit... but I'm going to bring in an image, under your 'Exercise Files'... under 'Icons', bring in the one that says 'Icon Image'... and click 'Open'... and within them-- with this... if you bring in an image, you click once, it'll come through... gigantic size, or whatever size that it was. I'm going to undo, go back to my 'Import Image'... find him again... is you can click and drag, and it gives you a more appropriate size... and what you'll notice is that it's squishing it, which is... killing me inside. Never leave your icon like that... and hold down the 'Shift' key, if you want to drag it out... remember, same thing with like the lines making them go straight... and the rectangle being perfectly square. That would be very common as well for placeholder image... we are going to not do that for the moment... I don't mind, I don't really care. Lines, actually no, keep the lines there because we're going to look at... something in the next video that is kind of reliant... on having a couple of diagonal lines there. All right, that is Strokes 101, let's get into the next video. 13. Object editing and how to escape in Figma: Hi everyone, I'm going to briefly introduce Object Editing mode... this kind of stripy lines where you're stuck... currently you might be trapped in here right now... and you don't know how to escape... let me show you how to escape and what it's actually used for. So I want to introduce this early in the course... because if you're a double clicker... you've probably already been in there by accident... and I'll show you how to get out. So I'm going to grab my Rectangle tool... I'm just going to draw something out... and normally you can just kind of grab the edges, and you're like... okay, let's imagine how I want it... but if you want to like, say break the edge and distort this, you double-- well there's the official way of getting in there. So I've got it selected, look, there's the official way... 'Edit Object', click on that, and nothing really happens... except this top menu changes, watch it again, click on that... you get these extra features. We'll go over them in more detail... when we start drawing our own icons... but I want to, yeah, I want to get you escaped now, early in the course. So the official way to get into it, click that... and what you can do is you can grab a corner and drag it... and you're like, "Yay, destroyed it," or, you know, manipulated it. You can also click the center and delete the center of your rectangle... click on this edge here... delete the top part. So that's what Object Editing mode is... it kind of breaks it from that kind of... you know, that rectangle, that does only rectangle stuff... and I'll show you here, because, maybe a lot of people get lost... or stuck in here, so I'm going to undo that. Now the official way to get out is to click 'Done'... but the normal way, the way most people do is... just to double click on the background. So official way, have it selected, in, out... unofficial way, double click it... double click the background to get out. I'm going to delete that, I don't need it... I just wanted to show you what Object Editing mode was... and how to get out if you got trapped. All right, on to the next video. 14. Scale vs Selection Tool in Figma: Okay, let's look at Scaling versus the Selection tool... because you're going to need both of them... and they're a bit quirky from other programs that I've used... and yeah, caught me out at the beginning, so let's do it together. So with my Selection tool I'm just going to click on the rectangle... I'm not in Object Editing mode, remember... and all I want to do is, I've got this tool here, the default tool... and I can click the edge, and I can drag it around... that's kind of how you imagined it... and that's most of the time what you want to do. What you'll notice is that the Stroke stays at 2 the whole time... and if I do something else... let's say that I select both the text and the rectangle... and I'm like, I want it to be bigger, and I drag it out... huh, that's weird, maybe if I hold Shift, hold 'Shift'... still doesn't work... that's where the Scale tool comes in. So there's times where you actually want to just make everything bigger... Stroke, Type, everything, and it's this tool here... hiding underneath the Selection tool... click, hold, drag, don't hold and drag, just click and hold... and there it is there, the Scale tool, click on that... I've got both of these selected... and I can just click and drag this, the corner there... and if I hold nothing down... it does it kind of proportionately, scales it up, both the Stroke... can you see, the Stroke got bigger, and the font, and the rectangle. So there's times when you need both. Let's say, in this case I've drawn this too big for what I need it to be. So I'm going to go to my Scale tool... and I'm going to make it a bit smaller, and both the font... because I use that as the rectangle, and my little stroke gets smaller. I'm going to bring it to the front using my square bracket. Even if you group stuff first you still got to use the Scale tool... what I mean by that is, let's say that we do-- what have we got? These two, select them both... I'm going to right click it, I'm going to say, you have grouped that selection... and I'm going to use my normal old Selection tool... it still does the same thing even though you think I've grouped it... still does the weird stuff. So you've got to switch to the Scale tool, and you do it so often... that there's a shortcut, and you're like, "Excellent, that's easy to remember." It's probably S, because it's the Scale tool.. nope, it's K... I don't know why... but don't worry, the S tool, if I hit 'S', it's the Slice tool that nobody uses. There's people out there, probably use it, but I never do... it's a big waste of a good shortcut... so we have to use K, that's just the way it is. So V is the shortcut for the Selection tool... and K, you end up toggling, I go ... again, I'm trying not to do too many shortcuts... just the ones that are really helpful, and I'm going to... I'm going to beat them into you throughout this course... so you're going to go to the end, and be like... "I know it's K, I know it's V," because they're helpful... and it's hard to remember them sometimes, so you need some beating. All right, so K, and you can scale them up, perfect. So back to the Selection tool, and off to the next video. 15. Frames vs Groups in Figma: Hi everyone, this video we're going to look at... the differences between Groups and Frames. Up until now in this course it's been pretty basic, right... like the Type tool does what you imagine... the Rectangle tool does what you imagine, like, it's not rocket science... ready for this video, to be rocket science-ey. I introduced it earlier in the course because it was probably... the hardest thing I had to get used to, coming to Figma... so I'll introduce a little bit now and a little bit later on... a little bit more, and towards the end you will become master of Frames... but if you get to the end of this video, and you're like... "I kind of get it, but I don't kind of get it," don't worry... I'm introducing it early so that we can revisit it a few times. All right, first let's understand Groups, let's draw a bunch of shapes up here. So we're going to grab, we'll do Rectangle tool... we'll do three shapes, let's look at the Polygon tool... give them roughly, you don't need to be the right size... they can be three circles... I'm doing these because, I don't know, it looks good. So make three of something, and what you'll see here... on this Product Details frame is my Ellipse, my Polygon, and my Rectangle. I can select them all, and I can right click them and group them... or the really common, 'Command G' on a Mac, 'Ctrl G' on a PC... now grouped, you're like, "Great." What happens? Over here, can you see, the icon has changed... it's called Group 2, where's the group... must be a group somewhere else, I made a group earlier, didn't I? There it is, it's that button, so Group 2, I can rename... so this could be my 'Icons', great. This little icon here is not important, but you'll get used to these shapes... so that there, the dotted line is a group, so I can look around... look, there's another group. I can look inside the group of my layers... see this little turned down arrow here... So yeah, you can see stuff inside of it, you can say... "All right, I want to move," like, grouping is useful... because we know what grouping is... you can grab them and they move together... but I can go into them individually by either... clicking them here in the Layers panel, and going... okay, this needs to be a bit further this way... or we can kind of go into that object editing mode. So let's double click on the background, click on it once, double click... we kind of go inside of it, inside of the group... and we can opera-- you know, work on it, double click it to come out... and it's still a nice helpful group. You can ungroup by right clicking it and going to 'Ungroup'... and then it kind of comes out of that dotted group... and it's back to being single units. I'm going to go back, 'Command G', or 'Ctrl G' on a PC, and group it. So what's the difference? Let's make two versions... so I'm going to duplicate this fella... and I'm going to right click it, and say 'Ungroup'... so I've got this grouped one, you can see here, it's called Group 2. These guys here, just hanging out by themselves in this frame... so what we're going to do is, very similar... I'm going to select them all, and instead of... right clicking and saying, Group, we're going to 'Frame Selection'... and it's basically exactly the same as a group, except the icon is different... can you see over here, there's my top one... let's move the layer order so it makes more sense. There's my group, that's them there, there's my frame... the icon's different, you get this, like little... what do you call it, pound symbol, hash symbol, grid, whatever it is... but they do a lot of the same things. So you can still see them in there... they're all still trapped inside of this nice frame. "So what's the difference, Dan?" The difference is, that frame can survive on his own... the group, if I go into this group and say... you are gone and you are gone... remember, double clicking it to go inside the group... the group disappears, by group... if I undo that, because I want them back... the frame on the other hand, if I go in, this guy, this one... you're left with a frame, which can be weird when you're new... you're like, "What are these empty frames everywhere?"... because the frame can exist without the group... "Why is this useful, Dan?" It is useful because - I'm undoing - is because I can do things... like let's say I want to cut that off, I can drag my frame in... can you see it, it's operating differently... drag the edge of this, look what happens, squidgy. If I drag the edge of this in, I can do things like this, 'Clip Content'. So I can use the frame as kind of like a mask to kind of hide things... which is one thing, and actually, let me show you quickly... so this is why that's useful, you created a nice big list... you can grab your frame, make it a bit smaller... I know we're jumping ahead in the course... but I guess I want to introduce frames a couple of times... so that's why it's good. You got this list, and you can set this to scroll... so that it kind of clips it off. Same with this, you got the stuff hanging over the edges here... I can say where you frame? You can be over there... and I can say, 'Clip Contents'. So I can use a scroll, so people can scroll left and right... but clip off the edges... that's one of the things, let's jump back. So Clip Contents is one of the reasons, there are other ones... and the reason I show it to you here... is that you're going to download somebody's free UI template... and you're going to be like, "Why is everything framed?" "It's all a bit weird, I don't understand," that's... that was my position anyway. So the reason people do do it, they get to an intermediate level... or an advanced level in Figma, and they just stop using groups, never... because Figma, sorry, frames is just like groups... but with bonus extra features, and clipping contents is one of them. Let's look at one of the other main ones, just to introduce it now... and we'll work on it at a bit more in depth later on. So what we can do is, I'm going to actually ungroup this... weird thing about a frame is that you group it... so you group this top one and then you ungroup it... your frame, you frame it, then you ungroup it, does that make sense? Ungroup works for both of these... so I'm going to ungroup it, and you'll notice, these guys just come out. I'm going to put these kind of over here... I'm going to grab my name here... and I'm going to select all of these, and turn them into a frame, not a group... because I want to see the bonus. The bonus is, watch this, I can click on-- double click to go... inside our kind of object editing mode... I'm inside my frame, and I'm going to say... you, stick to the top left of this frame that it's in. This frame is the thing around the outside... these guys though, I'm going to click on you... and I'm going to say, actually, you are going to go to the top, top right. Same with you, you can go to the top right, same with you, top right... you're like, "What does that do?" Watch this, if I go now, and I'm going to make a copy of it... and watch this, when I drag it... hey, it sticks to the top right of the frame... groups can't do that, they call them constraints. We'll do them properly later on, but when it gets to things like... okay, I need another version, it needs to be Tablet... so I'm going to click on my 'Frame' tool... I'm going to say, "Oh, it's going to be a Tablet Mini"... it's going to be in portrait, I'm going to stick it over here... I'm starting to design... so instead of trying to drag it all out, and try and make it all line up... you can click on this guy and go... you go over here, and I can get in the top and I can drag this over... and I can stick it to that side... can you see the perk? It gets more and more in depth... when you start kind of stacking things up... and it means, when you start adding text things, start reflowing... it gets, not complicated, gets more awesome, that's what it does... but that awesomeness comes at a kind of confusing stage... because remember, at the beginning of this course... we dragged out frames, remember the frame... that was our mobile phone, we just did it, now again with the tablet. So frames get used for the big thing around the outside... but also, the little things inside of it, these little nested frames... so I've got a frame inside of a frame, weird. If I bring in say, maybe that icon we brought in earlier... you probably didn't notice, but if I go to our 'Place Image'... I bring in the same one or a different one... watch what happens, if I drag this out... you'll notice that, actually, can you see, I brought it in as a frame... it's a frame, inside of it is our little vector thing, but it's inside of a frame. So that's why we can't leave it to the end of the course... because there'll be frames everywhere, you're like... in this case it doesn't matter, we're not using... any sort of this goodness with constraints and variants... and all sorts of cool stuff, we're going to do later on. It's just kind of like a group, that's all we're going to use it for... for this guy, but know that later on, there's some fancy stuff we can do. "So what you're trying to tell me, Dan, is group's bad"... nope, groups are great, and they work just fine... they just don't have all the extra fancy features. So that is my whole point of this video... we're going to use frames from now on instead of groups... because they have features that we're going to learn later on... and they just appear lots in Figma, and I wondered why. The weird thing is, when you've got frames inside of another frame... weird, why have you got frames inside of frames? The one last thing is that this frame... why does this one have a name, how did you get that name there... and this one doesn't have a name? Basically, if a frame is not nested it has a name... what I mean by that is, see this frame here, got it selected... if I drag him over here, watch... his name appears, inside, his name goes away. So that's kind of why you might sometimes see a frame name... and sometimes the frame is just used as like a group... and it's inside of another frame... "Wow, what a confusing video, Dan." Anyway let's, I hope it got us closer... to understanding Frames versus Groups. What we don't need is, we don't need... these particular examples that we made... we're going to create some specific icons in a little bit... but yeah, we're moving towards understanding Frames versus Groups... so delete those, and I will see you in the next video. 16. Class project 02- Wireframe: Hi everyone, it is class project time. I want you to create something like this... You might be following along so far, and you might be... kind of at a similar sort of stage here... if you're not, I want you to build, get all your frames in... I want you to build this first page plus these other three... basically just other kind of versions of this first page... rectangles, lines, some text. I want you to keep it reasonably similar to my layout... even if you're like, even if you disagree, and you're like... "No, they shouldn't be there." Keep it kind of similar because, I don't know... I want you to be able to follow along with your example throughout this course... and these kind of units help me show you... all the different features in Figma, so keep it close to that. The actual requirements... for the different class projects are in your Exercise files... you'll see something in there called Class Projects, open that up... and it will look something like this. We've done this first one, so ignore that... now if you haven't, this website url will change... kind of building it at the moment... but remember, you're going to go to that website... and you're going to create your own brief and persona. So we've done that one already, potentially, and then we're up to here. So use the skills you've learnt so far, it should look something like that. If you're looking for a larger version of it... you should be able to zoom in, in this PDF... but if you can't, in your Exercise Files there is the png, Wireframe Example... just a nice big version of it you can look at. There is a Figma file in there as well... remember, if you can't remember how to do the Figma file stuff... when you go 'Home', go to your 'Drafts', and hit that... and you can import that Figma file, up to you. All right, what else needs to be done? Here are the requirements, so four pages... those are the four pages from our Task Flow... pick your own color, it doesn't have to be green... and your own font. You lose points if you use... Papyrus, Trajan, BrushScript, or Comic Sans, all terrible fonts... pick a plain simple font that I don't hate, it's part of the requirements. I'm looking at you, Papyrus, and then what I want you to do is... just take a screenshot... I'll show you how to export frames and stuff properly later on... but it's actually just easier at the moment to go into Figma... and open up your project, and just take a screenshot. On a Mac it's 'Command-Shift-4', you can just drag a box around it... and on your desktop you probably have a screenshot. On a PC it's slightly different, you do use Print Screen... and then you paste it somewhere. I'm not big on PC, exactly how to do it for the different versions... so just Google, "how to take a screenshot." You're allowed to take a photo with your phone... either way, do that and then upload it to either... the projects or assignments, it depends on the website you're on... you'll have a look, there'll be a way to kind of submit it... either as an assignment or a discussion, or a project. Once you've done that, I will see you in the next video. Is that big homework? I don't know, it doesn't take too long... but it's good, we're going to practice our tools, our techniques... and we're going to get better together, but we need our wireframe. All right, I'll see you in the next video. 17. Where to get Free icons for Figma: Hi everyone. Let's talk about where to get free icons. I'm not going to talk specifically about websites, even though I'll give you a couple. It's more about what you're looking for when you are downloading icons for our Figma file. I'm using iconfinder.com I like it, there's lots of free stuff on here. Good paid stuff as well. But if this website is not here, when you go visit the Internet, there's plenty of free icons. Okay, so what you're looking for is, let's say I want the shopping cart icon. Okay, that's what I need for my mock up here. What you're looking for is a particular file format. It's GordonG, I'm stalling that thing to gauges the load anyway. So there's a couple of things on most of the sites. The main thing is all to do with how free it is. Okay? Because there's free and then there's properly free. Free or licenses, I'm going to use the one that's for commercial use. Okay? And this one here requires you though, to use it for commercially, but you have to link back to them, which is totally fine. You might find good free stuff in there. This one here requires commercial use, but doesn't require a back link. So I don't actually have to acknowledge the people that made it. So in here, pick anything I say, Pick anything. I'm going to find a shopping cart that looks like a shopping cart. Here is one. Pick something quickly, Dan, people are watching Al right. This one. All right. So this one here. I'm going to open it up and what you'll find in most of these sites is there's a G version and an SpG version. Let's look at both of the. Ping is probably the one you already know. Spg, you may or may not know already. So I'm going just going to pick a smaller icon version of this G, and I'll show you the difference. I'm gonna download both of them, stick them on my desktop and this G, let's compare both of them and how Figma deals with both of them. Is there a right one and a wrong one? Yes, Fg is better, but more complicated. But now that we know what frames are and groups are, it's actually not that bad. Okay, let's bring in a file. I'm going to do this way, place image, okay? And let's bring in both of them. You can bring in more than one image at a time per holding shift and clicking both of them. Let's click open. Can you see I got a number, a little two there. You can even see my little icon look a little trolley. Okay, so I'm going to click hold shift so that when I drag them out they are not going all wonky like that. Okay, hold shift on your keyboard. That's the reason we have SVG rather than a PNG. I acknowledge that I downloaded a very small version. Okay, here in here, you can download like the really big version. Let's download that and it will look fine. Let's bring in another one. Come on, shift K. Okay, we've got this other PNG, the difference is, can you see that size of that one? Okay, so I can get a good quality PNG, but my SPG is 1 kilobyte. This is 112 kilobytes. That's the reason we don't, We prefer to use G. It looks good but it's ginormous. I can't use PNG. It's transparent, which is awesome. This Fg is transparent. You're like, wow, that's not transparent. It's got a white background. Fg is into figma. What they do is we looked at this earlier, can you see? They came in as our frame. Okay, Inside of that frame is a group. Inside of that group is a vector. That's all we really want, so I'm just going to copy it. Okay, come out of that frame and hit Paste. I didn't actually come out of that frame. You can drag it out of the frame, So it's just sitting there. No man's land. So I'm going to click on this thing. I kind of like that's what I do. I don't want it in a frame at the moment. I just want to kind of yank it out and delete that original frame just so I've got the vector sitting lying around happy days, now it's transparent, it is colored, okay. So I can go through using my Eyedropper tool and actually start using these now. Whereas the PNG we can't change the color. We could, we can get a Photoshop, change it, okay. But obviously SG is scalable. That's what the S and SpG is. Wo, okay, Yeah, we can go into object editing mode, which you know about already, okay. If you're like, I love this, but I really want double click start going in. I really want a spiky handled in. Okay. Looks like a digger. Anyway you get the idea, BD's are better. So whenever you are looking for icons free or not free, make sure you get the SVG. All right. Another great place to get free stuff is part of the Figma community. So if you go back to your like a little house along the top here, there'll be an option somewhere around here called Figma Community. It's kind of new. It's better at mine. Everyone, quick little update. You would have worked it out. They've moved the community tab, so we're going to get the Home button. And it's not there where I show you in the video, but it's down here. Not hard to find explore community. They'll probably move it again just as I make this update, But there you go. Carry on with the video. We'll pause and see what Dan's been working on. Hmm, nothing incriminating. We'll leave it there depending on how long in the future it'll get more and more robust. There is just amazing stuff in here and most of it's free. Okay, so in here you can do things like icons, okay. And you will find loads of great icon sets created by people that we're allowed to use. It's not as searchable as something like icon finder if you just want to like, hey, I need a Sharing icon or social media icon. You have to kind of do a little bit more searching through this. But there is great stuff and it's kind of already in Figma. Okay, so let's have a, let's have a look at the Fig pick. Okay, Fig pick just means Figma has decided this is awesome and everyone should look at it. So what we can do is when we are dealing with the community for Figma, you end up downloading things. Okay, so let's have a little look. Let you can go into it to preview it. But eventually at some stage to get all the stuff out of it, you need to do something called duplicating. Okay, so let's click on Duplicate. And basically you get your own copy saved to your Figma kind of flow. So now let's have a look, have a look around here. There's two different pages. Ooh, lots of good icons. Okay, and before we actually copy and paste them out, let me show you what happens to these community files, or at least anything you've duplicated. Let's go back to home. What you'll notice now in my home, I'm kind of lost. Okay. So I'm going to go to my little drop down here, my blurry E mail address, and I'm going to say pick my name. Let me get back to kind of home base where we were before. That took a while. Yours might do the same, so I'll leave it in there. Okay. I was like, have I done something wrong It eventually loaded. Okay. What happens is it duplicates into your drafts. You'll notice that now I have unicorns. I'm like, you kind of opened it just to grow, swing out of it, but now it's part of your flow. Okay, You can right click it and delete it. Okay? But everything you open or duplicate in Figma ends in this. It's part of your world. Now that's the kind of benefit, I guess, of working in the cloud, which Figma does. Okay? It's not safety, your hard drive, it's part of your cloud kind of online login stuff. It also means that after a little while, you're going to have a ton of things open in here and it's going to be hard to know which is yours. So we'll look at searching and finding the files you want later on, and you might be really tidy and actually go delete the ones you don't want anymore. Okay, so we've got a couple of files open. We've got the one we're working on plus our little Unicorns Union cons. So unicorns. Anyway, so let's go over look now. It will depend on how these things are being created. These things are being created as what's going to be called a component later in this course. So this can be a little bit tricky for us at this level. Okay, So let's just do it anyway. Let's get a copy. I really need this. I like it from my wire frame. I'm going to go back to this document and I'm going to paste it. And what will end up happening is this Wed file turns up with the Wed icon. It ends up in our Assets folder. Okay? Used in this file. There it is, there. It's a special thing that we're going to learn later on. For the moment though, what we're going to do is select it, right Click it and say detached instance like I don't know wh I'm doing that, Don't worry, we'll learn about it later on. But it means you can just say it's kind of like ungrouping. Okay? We're going to see detach the instance, you can see it kind of goes back to that frame. And you might decide actually like we did before, you can keep the frame. That works fine. Or you might go like we did before and get it out of that frame, drag it out, it's just hanging out by himself or is he there? Let's rename it, let's call it file. In my case, where is it on? It's ended up on a weird page, let's say that I want it on the checkout page. It's currently not on the checkout page. There we go. And that is the community. I introduced it earlier on. Okay. Getting into the community because there's so much good stuff in there. You can find good wire frames and good layouts and lock ups and cards and icons. And we're going to get used to copying and pasting them and sticking into our document and seeing what happens. They come through as components, sometimes sometimes as frames, sometimes they're just groups, and they're real easy. But for the moment, I'm just going to tidy up. I don't need these guys a kind of an example of what to go get and find. And I will see you in the next video. Now we know what we need when we're getting these free icons. Let's get some icons onto the page ready for our wire frame. 18. Matching the stroke of our icons: Hi everyone, in this video we're going to bring in some icons... that I've got in our Exercise Files. We're going to try and match them so that they look... the Stroke widths kind of match this first one... and I'll show you how to replicate them across all our artboards... so yeah, let's dig in. All right, let's bring in some icons and get them all tidied up... so that we can use them. So we're going to use the long way still for the moment... using the little arrow there, 'Place Image'... I want one, two, and three, so I want 'Icon-Share, 'User', and 'Home'. I'm just holding down the 'Command' key on a Mac... and just clicking them individually... on a PC it's 'Ctrl', I'm going to open them up. Now what's the key I hold down to make sure... they don't go all squiggly, 'Shift', that's it. So I'm going to get mine to our size... don't worry about the size at the moment, am going to drag these in. Now what will end up happening is... the size here will depend on... the last kind of Stroke size that you're working with. So sometimes you might drag them, and they might be thick like this... or might be super thin, one thing we need to do though is... get them all to be very similar. I've got them kind of a similar-ish sort of size... what I want to do though is scale them down... and you've got to decide here... whether you're just going to use the normal Selection tool... or our fancy Scale tool... it'll depend on what you want to do. So in my case, can you see, the Strokes are kind of staying at that 2 point... so it's kind of getting-- if I get them down to about there... they're kind of close... or you can use the Scale tool and just scale them down, they all go down... and we can adjust them afterwards. I want them down to about a, size-ish, and get them into that position. So import them, get them down to kind of this position... and we're going to try and match these now. Now you've got to decide whether-- I'm twirling all these up... these are frames, just like groups with stuff in them... if you're happy to work like this now, we'll just leave them there... you can pull these out and delete the frames. What I'm going to do is leave them, so my Share icon in here... with that selected, you can see in here... I need to go inside of it because I want to click on this thing... came in with a group inside of it... but with it selected, actually, I can go in here, and I can see the Stroke color. In my case I don't need to change it... because it's matching what else I've got... but the Stroke width is about 2... that's what I used here, and I want to try and match these all. So same with this one... sometimes I can't see the Stroke yet, so I need to go inside the frame... and click on both of these. I'm holding 'Shift' to select both of them... and it's scaled down to like 0.5... you can see there, so let me just type in "2". This one here, this is not a terrible thing... but the way this has been drawn is that... it's not a nice little Stroke, it's actually a Fill. If I double click it and go to editing mode... it's not like lines that are on top of each other. If you're an Illustrator person from way back, you'll know what I'm talking about... if you're not, and kind of new to this vector world... you will just find some of them that are made of Strokes... and this one is actually made up of a Fill... it makes a little bit harder to adjust. So for this one, to make it thinner... I literally have to go and do stuff like this, which is no fun at all. So you might just download a different one, or just draw one. We're going to draw, you could easily redo that with the Line tool... so I'm going to undo... double click to get out... and Scale wise, these probably need to come down a little bit... and this is where I don't want to be using my Scale. If I use Scale now, and scale it down to the right size... it might look like this one here... but if I go inside of it, double click, you can see... it's no longer 2, it's 1.8, that can catch you out... probably nobody's going to notice, but I notice, you'll notice. So we're just going to use the Selection tool to do the scaling... and it means that, holding Shift... it means it'll retain being a two-point stroke... you get what I mean? Oh, broke that, I'm going to leave it... it's broken forever, I can't live with it. All right, I'm back... so what we're going to do now is... get those three in, get them kind of looking the same... I feel like this one maybe is not looking exactly the same... "Don't spend too long in there, Dan," this is just a wireframe. What I want to do is, I want to show you another... not trick, but a useful thing in Figma is... I'm going to delete these... because what I want to do is have that on all of them. So what I'm going to do is copy it... so from this first one, click on the name of Product Details, and just hit paste. So I'm using 'Ctrl C' and 'V'... on a Mac you'll use con-- oh, that's a PC, so PC uses Control C and V... and a Mac uses Command C and a V. So you just 'Command V' on all of these... and gets it back exactly where it got it off that first frame, which is cool. So do that, I'm not going to spend too long... getting all the spacing perfect on this... because we're going to have to go and test this on a phone because like... are they too big on a phone, probably... are they far enough apart, probably not... my big old fat fingers is going to end up touching more than one icon. So we'll do that when we actually test on our phone... but we've found our icons, we've got them in there... we've got them looking kind of the same... that'll be good for now, let's get into the next video. 19. How to use Plugins in Figma for icons: Hi everyone. In this video, we're going to look at some of the secret source, what makes Figma amazing. And it is the plugins that are run in parallel with Figma. Plug ins are made by other people, not Figma. Okay, basically you install them. Okay. And in this case, I've installed a little icon plug in. And let's say we search for a house. I can grab my icon and just drag it out. It is a way of, he's a bit teeny tiny there, but you get the idea. This is a way of extending Figma. There are lots of plug ins and they are amazing. We'll focus on the icon one at the moment, but they all work roughly the same sort of way they extend what figma can do. Let's jump in and look at at least one of them to install our first plug in. If you this little drop down next to the Figma icon, you can go to Plug Ins. Hi everyone, our little UI update from Figma. Again, plug ins, I'm going to get you to click on Browse, Plug Ins and Community. You don't do it that way anymore. The way you do it is you go to this shiny new button here called Resources Beyond Plug Ins. And then you can go to this option here called the Community tab. That's how you get into it. Or go to the home page, go to Explore Community. Down the bottom here, you can switch it to all resources. No thanks. Just show me the plugins. And you'll get, if I scroll down again, all of this detail about the plug ins. But probably what you'll do from now on, I like using that way. That's the way I still do it because it gives me lots of information about how many times it's downloaded, what's popular, if you already know the name of the plug in. Okay, if Dan gives you one or you find one on our website, you can type it in. Just going resources, go to plug ins and just type it here. We're going to learn unsplashing of it, okay? Instead of going through that community tab, you can see it's right there if you know the name of it. All right, that is what I'd like you to do is plug ins are just so an amazing part of Figma that just spend like take a break, you take 5 minutes and just have a breathe through all the amazing plug ins. Okay, there's just so much in here that can get you so far and kind of enable you to be fast and efficient and like visually, really compelling. Okay, so have a look through all the different plug ins, we're going to look at icons for the moment. What you need to do is, well, the way that I used to gauge whether this plug in is good is mainly bound to installs. There's no like star rating yet, which I wish there was. But like unsplash, which is a way of getting kind of commercial free images, is a really cool plug in, really common, probably the first one everybody installs, we'll do it later in the course. But you can see 630,000 other UX designers decided it was useful. So there must be some big in here. We're going to use Iconify. Okay? If this one is not in here or has it been updated for the last three years? Okay, you'll find another version that will work similar. This video is not actually how to use Conify, but just like how to install, plug in and get it working. So we're going to click install. Yes, please remember, these aren't made by Fugma. No responsibility taken. Okay, let's go and have a look now how to actually operate a plug in. We'll do a few through this course. Let's have a look. You have to turn the plug in on. You can only have one running at a time. You're going to say, I want plug in called Iconify to start working. Now this is where they all vary. Most of them have some sort of Y. They all look different. None of them look the same. This one here, it's big. I put mine on the other screen, but I'm just going to move it over here. Let's have a look. So let's have a look at that shopping one we're looking for. Let's go another house. Maybe that house was broken, it was hard to change it in here. Let's have a look at the houses. Is that going to be a stroke? None of them are going to be strokes. I bet you maybe that guy, maybe that guy will be. Probably not. I'm going to use this one. Figures crossed. So you can just click and drag them out. Look at that, I've got a giant SVG icon and really that's it. That is that plug in, you can just drag stuff out. Obviously there's other options in here. Okay, You can search icons and there's lots of tagging and stuff going on. So plug ins all work a similar sort of way. There's some sort of UI and you'll be able to click and drag things out. We'll do a few more throughout the course, but yeah, that is the plug in specifically for icons. I don't need this guy now, so we just going to delete them. Now, when you are deleting bits and pieces, it's probably because you're always going to be left with a frame. So try to like you can, you can just delete it up. With this frame, it's best to go into your actual layers and say, that's it, I'm going to delete and everything inside of it. And then just make sure your layers are kept nice and tidy to hang. Is that what are you doing down there? I have no idea how I got that one anyway, keep it clean. Select that guy too. All right. That is, yeah, a really simple plug in Plug ins are amazing in Figma. We're going to learn a few more throughout the course. Let's get into the next video. 20. Class project 03 - Icons: Hi everyone, it is class project time, not homework. We are going to be doing something around icons... so if you haven't already, I want you to go and make sure... that you add the three icons along the top... that we've kind of done in the class... and then on your own, I want you to add this section down the bottom here... on the Confirmation page, just a, like a prompt... to ask people to share their purchase... and when they click on this it'll pre-fill out their Facebook page... or their Twitter tweet about... "Hey, I just bought these great headphones... check them out here, at this link." When you are doing this you're going to kind of start... dabbling with our persona, so in my case, Sarah here... she's in her late 20s, so I feel like I can be a little bit... not as explicit with my language ... because if somebody else maybe is a little less technologically savvy... born in a different decade, they might need a bit more explicit... "Click this button, to upload to your social media"... and to share with your friends your, what you have purchased... it might have to be a bit more deliberate. So my persona, she's not like 20, so she... she gets the gag or the joke, or the inference without being too explicit... also she-- these are the social media icons that I feel... I'm not going to put them all there... don't you hate sites that just have like... here's the 40 different social media platforms that you might share on it. I've excluded a bunch because I feel like her age group... what else, like, she's working for herself... so probably has a LinkedIn profile, and it's not going to be corporate. So she's probably going to be okay sharing her new headphones purchase... and everyone's using Facebook still. So, like use these sorts of what should I have here... go back to persona, decide what's going to be in there. It might be wrong, like I might have got these totally wrong... and my client's going to come back and go... "Why isn't there Reddit there," or some other thing that's new... and TikTok-ey thing, but this is something that I feel like it's worth testing. We might add more to these later on... and hopefully in our user testing... there will be some feedback, like, "Hey, where is that thing"... - that I don't even know about - "why isn't that there?" All right, so that is it, so the top Navs... I want you to find icons from, I don't want you to draw them... I want you to find existing ones from either a free site... just to practice the svg stuff and, or plug-in ... install your plug-in, get it working so you can get stuff out. There's a little bit of text there that goes on there... choose the appropriate icons, we've talked about that... add them to the Confirmation page, take a screenshot... and upload it to the Assignments, Projects, Comments... and that's an example. Actually, before you go, if you are using plugins... which I think you should, get it installed... have a go with it, it doesn't have to be Iconify, use something else. Sometimes when you are dragging things from plugins... let's say, it depends on the size of them... like let's say I drag in this Facebook one... sometimes you're like giant F, and it just makes everything really tough... in terms of your layers when you're new... so I'm going to undo that. Often it can be - undo - it's just easier just to find... an empty part of your artboard and just drag it off there... because then they're on their own, in their own little kind of frame... and I can drag off a bunch of these, where are they... and what else we got? I can drag up a bunch of these, and I can scale them down and get them appropriate... and then bring them in rather than trying to push them around in there... and they ended up inside of groups or frames... that they shouldn't be, that's my advice. When you're finished with the plugin, close it down, you guys are gone... and yeah, I'll see you in the next video. 21. How to use Pages in Figma: Hiya, in this video we're going to look at pages... that sounds boring, it is, and it isn't. Over here, at the moment we're going to end up creating a page... we've currently got a Page 1, we're going to rename it "Mobile"... we're going to create a second page... that's going to have our Desktop frames on it... and then we're going to create another page... that has our brief and our persona, and also our task flow... all in one kind of nice Figma document... but these pages are going to be nice and separated out... so let's jump in and learn how to make them. All right, so to start off, you've already got a Page 1... it's lurking there, it's kind of probably closed up... you're on your Layers panel, you've got Page 1, there it is. You can get quite far in Figma, and never have more than Page 1... on Page 1 is all of the stuff we've made so far... so we've got, I'm going to use these little chevrons here... to close them down, just to make everything look tidier. So we've got our Confirmation page, Checkout, Product Details... you can rearrange these because that doesn't make sense, does it? Confirmation at the end, ah, I don't know... ah, that feels better, anyway. So we've got our frames... which you could argue, pages, they come more like artboards... but we call them frames because that's what Figma calls them. Pages are a way of separating this kind of artboard here... so Page 1, you can have more than one page, a Page 2... and basically you get to here, and you go... "Okay, I'm going to start making something different." Why would you have two pages? In our case what we might do, Page 1 might be-- I'm going to double click it, and call it "Mobile"... and this other one is going to be "Desktop". So I want you to do that... because we will design a mobile version... and a desktop version in this course... there should be a tablet version as well. We're not going to design it because-- we're not... it's just a small bit in between. So we've got our mobile and desktop... let me show you some other examples of it. Well, you've got a desktop, let's, before we go... go to our Frame tool, now your Frame tool... again, I'm not trying to get too many shortcuts... but the F key is a pretty common one. Over here, I'm going to say, I want desktop... and depending on when in the future you're watching this... this is a really good generic size, 1440 x 1024. We're going to have one, two, three, four of these. So I'm going to drag one out... don't do that, go to your Move tool, grab the 'Name'... hold down the 'Option' key on a Mac, 'Alt' key on a PC... hold 'Shift as well if it's not locking into place, totally is... and then 'Command D', or 'Ctrl D' a couple of times... I love that Command D, so satisfying. So we've got three of them, okay, go through, I'll speed this up. I'm going to name them all exactly like my mobile one... I totally can't remember, so I'm going to flick back and forth, please hold... yep, that was a painful copy and paste. So that's a good use of pages, there's no reason why you can't... just have them underneath here... but you will see, before you get too far... they end up looking like this, let's have a look. That is my mobile one, later in this course... just stuff ends up everywhere, and... it's not pretty... but it's truthful, or honest, it's an honest file, that's what that is. So other use cases is, we're going to do in this version as well... is often you put another page with things... like your task flow and persona, we'll do that in a second. Also, let's have a look, I'll show you now... because you'll have opened up some of the stuff from the Community... remember, we looked at these un icons... uni icons, whatever they are... over here, maybe I flicked through it, maybe I didn't, I can't remember... but you might have noticed that I kind of, might have gone to Layers... and I might have popped that down... because I'm like, oh, there's pages, and there's cover... and there's unicorns, I want to say unicorn, so bad... and that's how I found it. These are different pages within this one... this one here is just acting as a cover or a thumbnail... and there's where all the good stuff is. It gets even more hardcore, let's look at something a bit more big. I'm at the Home, I'm over here, at 'Community', and I'm going to 'Explore'. I'm going to find the, find anyone, let's try this one. So Microsoft teams is liable to be massive, let's open it up. It's going to be big, if you've got a slow internet connection... and it's a big kit, or a big Figma file... it might take a long time to download, mine's... I've got kind of rural broadband... it goes okay, it's on a mobile device... that's, that's okay. What you'll find is, can you see, in this one... is you might get to here and go... "That's not that useful, where's all the rest of it?" It's in here, all the pages are... and you'll notice that there's a cover page, great. General Information... they've created a page with nothing on it, just to make it easy over here... can you see, this one doesn't do anything... this one here is where we get started. There's a bit of documentation on it, resources, what else? Things I download, so you can see... there's quite a complex one, the Change Log, let's have a look at-- I bet you, there's more here... look how many pages this one has, loads. Let's peek at a bit of them... the layouts, the avatars, the icons... so, you know, at the end of this course, we're not going to be creating a full... this would be called a design system, it's called a UI Kit. UI Kit's understating what this thing does... this is a system for how to think about everything, about Microsoft Teams. So somebody's made this, somebody at Microsoft... and they've separated out, so that, me as a designer, if I'm a junior designer... I come in here and I go, all right, I've got to make this... pop-up window that communicates... that I've lost all your files, and I'm really sorry. You can go through here, find, read the guidelines... understand fonts, how they're communicating... with different fonts on different platforms... spacing, what colors they are allowed to use... what the colors communicate. So this is a full design system... later on in the course we'll make a teeny tiny design system... normally called, like a Style Guide... but this is a pretty big use case... but I guess I wanted just two pages... because you're going to have to file through these. I'm going to make mine up again, every page... see, in this case has a bunch of frames in it... inside these frames a bunch of other frames... and artboards and all sorts of good stuff... so that's what pages are for. Other use cases might be that you have... like, say you've got mobile, there might be an option one... it might have a specific kind of task flow... and you do another mobile, option 2... with a different task flow or different colors... or a different look and feel, concept one, concept two, you get the idea. You can use pages to separate it out. I'm going to get rid of that... what I want you to do though is have a third page... and this one's going to be our Brief and Task Flow. So it's great to have all the stuff together... it's going to be at the top... and in here I want you to bring in the screenshot or the jpeg... or however you got your persona earlier on in the course. I got mine here, so I'm going to copy and paste this... yours will be slightly different. I'm kind of building this functionality for you... but earlier in the course I would have shown you... how to create your own persona... and I want you to grab it, the screenshot or the jpeg... that you've downloaded and put it onto your brief and task flow. So we'll put it in here, yours is probably just a big jpeg... I'm not going to resize mine... and I'm going to bring in that task flow. If you remember from earlier, if you've opened up the task flow... it should be under your little Home button, under your Name... and where is that task flow, there it is there... task flow, if you haven't opened it, remember, go back there... go to your Name, go to Drafts... go to Import, and the task flow is in your Exercise Files. There it is there, open that up... and I just want you to copy and paste it in here. It's just handy to have all your documents, copy... I'm going to close it down, go back to our initial... the one we're working on together... and I'll put that over there... so my task flow and my brief, all in one place... so that I can refer back to it easily... and we learn what pages do... simple. All right, do those things, and I will see you in the next video. 22. How to prototype in Figma: Hi everyone. In this video we're going to prototype. We're going to put it in a phone and when we click stuff, it moves through to the next frame. I'm also going to get a little bit lost a little bit into this video. Something goes wrong, we're going to fix it together so we all learn, Let's get started. Okay, It's exciting time. How do we prototype? It will do some basic stuff first, what we need to do, first of all, is go from design, which we've been at for a long time now, go to prototype. Okay, And what we're gonna do is have the homepage selected, okay, we'll start with this one. And what you'll notice is that this little dot is little dots important. We're going to click, hold and drag, drag, drag our book, stick them on there. Give it a play. You can just click it and then let go. Now, that's it. It's going to do some basic stuff to start with. We'll do the other pages. It's the same with this one. Click on the name at the top and say you got the name at the top of this one. And they go, alright, let's prototype it. Hi everyone. It is Future Dan, I'm just going to pause the video here real quick and share an update to Figma. I'm about to click on this button over here, that little arrow. And that is the present option. That was the only option when I made this course. The latest update is added, an extra option Preview. So present is what we're going to use for the rest of this video. It opens up our design in a new tab. The difference between present, which we use in this course and preview is preview opens up into a little window on its own. It's still does our interactions. There's no real difference, except one is a small little window that you can kinda keep open all the time. And the other one is a separate tab. You go nice little update from Figma, which is better. I still use the tab option. This one here is fine, but it's always in the way, but it is new, so I might get used to it. You can decide which one you prefer. There's no real difference from prototyping other than one's open and ones in a separate tab. I'm going to close this down and let you get back to the video. Why is his that orange color? I don't know. I tried to recreate the video, but hey, it's close enough. You get back to the video prototyping it. It's called present. Can you see it here? The little play button. Click on that and it will open up. You'll notice another tab. There's our original. We've gone off to this other tab. Okay. And what happens is it will present from whatever page you are on. So that's not what I want. I want to go back here. And if I go to this homepage here, just click on the word Homepage and then present. It will basically jump back to that same tab, but at least we are at the homepage now. Look at that. It's a sweet homepage. So what we're gonna do is just click anywhere, just click once, and moved on to again checkout page. What is that? Confirmation pages had a bad day. What is on there that is doing that shouldn't do that. Let's close it down so that again, what is on there? Nothing. Some things we did happening. I'll even the cause in case it happens to you, homepage present. Yours is probably gonna have this little load screen as well. Let me go. Ew, Ew, Ew, giant, something in the way. I'll figure that out later on. But it's kinda working all the time. Black box, like a UA there and I'll figure it out so you all know why. Alright, I'm back. I have no idea as the answer. Did you already saw it in fast mode? Basically, what I normally do in a situation like that is I will start, I'll start going through and deleting stuff. I figured it with some SVG doing some weird stuff, so I delete that and I tested it and it still is broken. Let's double-check. It's still working. No, it's fixed. Weird. I don't know then. So all I did was deleted and then undo it and it came back to life. So just in case something else happens and it's not as easily fixed like that took me ages and it took me about 05:10 minutes to figure out what was going on. What I normally do is actually go through and I just delete stuff and then test it delete stuff, then test it, delete stuff and test it. And to see eventually something that I've deleted kind of shows that it was causing the problems. There's normally how I do it and then I gave up on them, so I just made another version of it. And that worked. In this case. I just deleted it and then did it and it came back probably closing the program, opening it backup, resetting machine. Anyway. Alright, that was a little bit And tangent, but these things happen. So it kind of worked. Let's go to well present now forget, this is back in the zone. Dan Beck in the zone. Okay, So we're going to preview it and we've done some basic prototyping where you click anywhere and it moves along. It gets to the end and it's kind of stuck. So what you can do if you wiggle around, you'll notice that after a while, some other little options appear. Restart, which is R, It's a really common one. Get back to the beginning. So you can kinda work through your prototype again. You can manually get through it. Can you see down here page 1234? Other things that might be useful is under these options here, you might want to go 100% or full-screen to get rid of all the kind of Chrome around the outside. What else will you wanna do? That's kind of it. One thing you need to know is that you don't need to close this every time. You feel like when you're finished, you close this down and then come back over here, but you don't have to leave it open and just always go back to it. Because what happens is it updates. See this if I go in here and I decide to change the color of this, oh, good point. This happens quite a bit when you're new and you're like, why did it all go? Because you're in prototype. Remember to go back to the design, these three at the top here, we'll look at Inspect either in the course, but whenever you're missing your colors or fonts, it's because you're stuck on prototype design. I'm gonna go in here and I'm going to say you are now going to be another color. Okay, Now I'm gonna jump out to this tab that's still open. And you'll notice if I go back to my pages, it updates. If you're using the browser version, it's handy to get this tab, pull it out and put it on another desktop. On the desktop version, it's kind of stuck in here at the moment. I can't pull it apart. So just toggle back between the two. If you do want to toggle back between the two. The shortcut is there's no shortcut. That is a bit of a pain. They might be in the future. Check. You want to Google the thing that says Figma present was it called? Yeah, present shortcut doesn't exist at the moment. What we do is we use the command on a Mac, Control on a PC. And Command one is back to your little home screen. Okay, we've been clicking on that command to is whatever the second tab is that's considered the first 123. So in my case, I'm going to be going back between command two, command 3123. Go on to make a change around three updates instantly. So you can keep that open. Now the thing to note is you can't prototype across pages. So I've got my homepage. I go to prototype and I'm like I want to go to page something over here. That's not possible. Okay, So it's only between frames on a page. What you'll notice in mind as well is that I have this nice chrome around the outside of an iPhone eight. They might look Ancient when you're watching this, but you can change that. And let's, let me show you how. So let's be on prototype. Let's go to show prototype settings or have nothing selected. You end up at the same place, okay, So having something selected, Prototype, click this button or just clicking no-man's land. And you can say, alright, I don't want an iPhone six. I want, I don't know what Google Pixel like. I own a four at the moment. Why we can't we have a four. You have to look at a really old too. And you can pick through the different colors that they changed much on an iPhone, but obviously on our iPhone eight, okay, instead of the gold one, you can pick the space gray one or the silver one. It's basically the backs of the phone, so not a whole lot changes. If you change the background color, you can go from portrait to landscape. And when I go into preview now, let's have a look. Hey, doesn't quite work on landscape, but you get the idea. If you can't see any of these, is because when you started, remember way back in the beginning, alright, make our first frame and we pick one of these defaults. They're attached to this. Okay, so even if you've just typed out, you started with a desktop version and you've typed it out and made it a phone size. It doesn't connect up anymore. So you might have to make phone sizes and copy and paste them on if you want that Chrome there. It doesn't help the tasting very much other than it looks cool. You'll also notice that our desktop versions. So let's have a look desktop. Click on this one even though there's nothing on this. So I'll click on Homepage, on the frame tool, and I click on the homepage. You'll notice in prototype, prototype settings, there's nothing in here. So I can go and say that I want it to be a desktop or a laptop and it's not there. Okay, So there's only a few things you can actually wrap that Chrome around at the moment. Alright, one last thing before we go is if you have been following me, what I want you to do is go back to mobile. And I want you to break all of these prototypes here because I don't want to just click anywhere. I want it to go to product details only when I click the Learn More button. And I want to go straight from by now all the way to the checkout page. When that button is clicked, at the moment it's using the entire frame. So to get rid of it, you can do two things. What I tend to do is just click on the layer, hit Delete. Or you can click on your frame here and say under prototype, can you see it says, we've applied this indirection called Tap checkout. Okay, just have minus. It's the same thing with you want to delete it by selecting and deleting it, or selecting the frame and then just minusing and any interactions you've got Edit. Alright, so what? We've gotten nowhere. We added them, but we deleted them. Let's jump into the next video and we will bring up the buttons, but we'll also add some animations without transitions. Alright, I'll see you there. 23. Prototype animation and easing in Figma: Hey everyone, in this video we are going to rig up this prototype... so the buttons go to places, not just clicking the frame... plus we'll look at the different animation techniques, in between the frames. Actually, I'll show you, bye now, there's a cool pushy thing... this one does a slide-y thing... so I'm going to show you those. I'll also show you, remember that problem we had on this last frame... the big giant black boxes... that came back, and we fix it right at the beginning here. So I'll leave that in there, so we can all learn... we'll learn about Easing as well... it's a teeny bit of a long one, but we cover a lot. All right, let's jump in... all right, to change the animations we're going to do a couple of things... we are going to-- make sure on Prototype here, in the top right... and we're going to delete these. If you haven't already, click on the names at the top... and delete these transitions, oh, where did he come from? Ha ha. Do you remember, in an early video you were like... I was like, what were those big black boxes... I've turned Figma off, open it back up... and I totally figured out what those big squares were. There's something in here, yeah... that's what they were... big giant letters, Facebook... and there we go... oh well, problem solved. I think I was demo-ing it with you guys... showing you how to drag it in, and they all ended up there... but they disappeared, and now they're back... oh, we fixed that problem, let's look at the animation. So we've deleted the connections between them all... and let's do it for actual specific buttons... rather than the whole entire frame. So what we can do is, we're going to say... the Buy Now gets its own little dot, every little unit has a dot... so you can make everything clickable. So I want this Buy Now button to go to... it's going to skip our Product Details... and go all the way over to this one... can you see, I'm just dragging it around, and you can connect it up. I want to go to straight Checkout... that's for the keen buyers to go straight there, no fuss, no mess. Now the animation is this... it is instant at the moment, just moves across... let's look at Dissolve... and let's just go and test it. Remember, you don't have to reload this... but you might... if you've closed it, just go to this little Play button... and go to present, it will open it up. All right, so a little button, going to click it... look at that, Dissolve, very exciting. Remember, R is the refresh button, and you can practice through it. So we won't cover every single one... because some of them are pretty self-explanatory. We're going to, Instant is easy, Dissolve, as you just saw... Smart Animate, we'll leave for this video... because it's a little bit more complicated for later in the course. It is amazing, but we're going to do it later on... you need to set it up a bit more. Let's play with, Move In, let's have a look... 'R' for reset... Move In, can you see, it slides in from the side, that's pretty cool. That gets really nice when you're doing kind of like mobile navigation... you want to kind of like Move In from the side... or maybe images flying across. Instead of testing every single one what you can do is... like, Move Out, and can you see down the bottom here... you hover above it, it kind of gives you a visual cue... of what it's going to do, so Push... can you see, instead of moving, which is one-- kind of sliding in on top... Push will push one out, to move one in. So this is kind of an easy way to-- slide's really good when we do get to those mobile apps... where it just kind of like pushes it to the side, not all the way in. I'm going to stick to Move In, and can you see here... the directions, you can decide whether you want it... from the left, or come in from the right... down from the bottom, down from the top, and up from the bottom. So those are all pretty easy, let's look at... one of the other interesting things is Easing. So Easing is on by default... and it just means that... Ease Out means it's going to start fast, and go slow on the out... it's going to ease out that little curve there. I'll exaggerate it here, so this is another term we need to learn... ms, which is milliseconds, 300 milliseconds is... there's a thousand milliseconds in a second... so that is one second... so 300 is... I don't know, a small part of it, third-ish. I'm going to turn it up to a second... just so that I can preview it, and have a look. So let's go over here... 'R' for refresh, bye now... can you see, nice and slow... but it starts fast and then gets nice and slow at the end, so that's Ease Out. What's very often nice is, both Ease In and Out... you can ease it in, so it goes slow at the beginning, watch the little... can you see, this actually shows it even better in this little icon here. So it starts slow, slow, slow, slows out and gets faster... it just always looks good with that Ease In and Ease Out. So I'm going to crank it right up to exaggerate it, to 200 milliseconds... oh, I can do that, that's one-fifth of a second. All right, so let's preview it, let's have a look... for a reset, bye now, that is too fast... so let's try three, try 400... reset, click it. Still probably a little fast, but you get the idea, right? It's, Easing is to play with the animation... Ease In and Out, it's pretty cool... it's kind of like a bounce, so let's have a little look. It's probably still going a bit faster, look... yeah, too fast, but cool, let's make it go to... Push In, yeah, that's it, Push In, I'm going to ease it in and out... and I'm going to turn it to 600. There's a lot of playing with this, it depends on how long it is... and what kind of easing you're doing... what kind of direction it has to move, kind of how far it has to move. So half a reset... so that kind of 'e', what was it called? Ease In and Out is that kind of bounce option. Before we go we're going to kind of rig it up a little bit... you do this on your example as well. I'm not going to do it as a class exercise, because I can't really check it... so what I'm going to do is-- just follow me... we want to go from Learn More... you could do it from the text, it's better to do it from the button... you could group it and do it from both. So I'm just going to do it from the button around the outside... and I'm going to say, Learn More is-- going to our Product Details... so you can learn more about it... and we're going to do the text over here. So when you often click a heading on a website... it'll go back to the Home page, this is my Home page. So what I'm going to do is, I'm going to say, you go to this one... this, go to this one. Now what animation is it using? It's going to use whatever the last thing you used... so I'm using a lot of pushes, so if you don't like Push... we're going to have to go and change them all. So pick it first, before you start clicking on them... so it'll just remember the last one. So I'm sticking to Push. The other thing to note about animation... and just the interactions in general, in prototyping... if I copy this and delete this one, click on there, hit 'Paste'... can you see, it brought along with it. So as long as you're in Prototype mode... you can copy and paste to different ones. So it means you can rig up the entire navigation on one of them... and just copy and paste it along. So let's say it's this one here, I want it to go to the Home page... no, I make this go to the Home page... I don't have a Share and Account button yet... or even a Mobile Nav yet, but I could just copy them all... and paste them on, and everything, just to save some time. So by now you end up with a spaghetti... it gets more and more spaghetti-ish... depending on how detailed you want your kind of prototype to be. What I want to do is, make sure that this Purchase button... goes to here, boop... and my Home button's going, Home button's going. You don't have to drag it, after a while... like it's really easy, with only four of them... because you can just kind of like zoom out... and just quickly drag this one, get it over here, it's do-able. After a while it's not... you saw that, like Microsoft Materials one, uh no, Microsoft Teams one... there's no chance of rigging that up with dragging and dropping. So what you can do is, you can click on these... actually, don't click on them, you select it in Prototype mode... click in directions, hit '+', and it's going to say Tap. What happens, when you tap this one... it's going to go to Navigate to the Home page. So you can do it that way, and play around with your Dissolve. So instead of dragging it, you can just kind of like... select it, add this in direction, and do it this way. I'm going to Dissolve back, fancy. I think that's it... that's it, that's it, that's it... hang on, let me think, I'll pause it, hang on. It's hard to get it right anyway when you're in the desktop view... in our upcoming video we will test it on our actual phone... then you'll know instantly, you'll be like... "I'm stuck, and I can't get back"... so you can update your prototype... oh, updating them, we didn't do that. So if I want to update this one from... you know, Push, you can click on this line, and it will pop that out... otherwise, click on it, and then you can click on Home page... and it just pops that thing back out again. To delete one you can drag it off back into itself, so it disappears... or you can click on the line, like we did before, and delete it. All right, we're starting to get prototype-y. Let's have a look at our prototype, what can we do, let's go back to Home... and did you notice that if I click on somewhere that doesn't work... these little blue dots appear. It's just to help people that are testing, even yourself, what to actually click... because we are doing, let's say a task flow... and it's very simple, there's only four slides in it... I only want to test that, I don't want people going-- I'd probably remove that plus button for my test... just because it's going to confuse the test itself... but maybe it goes to the Product details page... but if you click anywhere it should highlight the one... so Buy now, Purchase, hey, Congratulations. The Push and the Bounce is a bit weird, but you get the idea. All right, that is animation, what you probably are thinking... you're thinking is... I'm not sure I can use Figma... because it doesn't have the best... most amazing animation transition in the world, let's have a look. It doesn't have Dissolve, where's my Page Peel and my Barn Doors? I know, they're actually illegal in most countries now... because they're so terrible. So for your viewing pleasure... editor, can we wrap up with a Page Peel. 24. Testing on your phone with Figma Mirror: Hello, this is the other side of my office... you're normally looking from that way, across this way... this is, that way looks like, my junk and my sound boards... to try and make it sound nice... and it's night time, it's not kind of moody... it's just actually dark, it's about 11 o'clock at night... and we're making courses for us. 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, or an app. There's no point spending all your time on there... you need to be testing it on the device, that thing. 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. You sign in with your Figma username and password... then somehow, magically, just starts happening... you don't have to be on the same network, it's magic. 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 better, it's actually live and interacting. So will this work? Maybe. So click on my 'Home' button... what can you see, Home button... Home button is too small, because I can barely click on it... and you can't see what I'm doing, Buy Now button, look at that... 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 Buy Now button, is too small, the text look fine on desktop... but it's teeny tiny in there. The Purchase button looks all good, when I go to Buy Now... 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. Logo is too small... text on the Purchase page is good, the Checkout page... and I do get stuck on the Learn More page... I don't have any sort of like prototyping of the... more deep Product Details page. I forgot to add it, you probably saw it in the last video... but it's when you get to this kind of stage... and you're like testing it on your own, you're like, ah, forgot that bit. Well, that's way too small, or that's a hideous color, green. Actually, that's probably pretty good... oh, one-- let's do a live update, because, that's pretty cool. I'll adjust the zoom so we can... do it a little bit better, you wait there, I'm going to change the camera. All right, probably should have done this at the beginning... watch this, it 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 you-- when I'm working, especially at this initial stage... getting font sizes and stuff ready... I just kind of, like I don't have it propped up... I just have my phone lying down on the ground... 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... that's what I'm looking at, I'm like, "Is that an approachable for our size?" What you'll find is, pretty much always, 16 is good... you can't see it because it's on this side of my desktop... but I've gone to 16 points... that generally is a no-brainer good one, 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 12s and 13 points... it becomes quite a tricky thing to-- 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... move them across... center them together... over there. I'm going to 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... it's pretty much instantaneous, I'm, 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... because you can just do it on your desktop... a mobile phone, or an app, or a mobile first website, like we're doing. Desktop is part of our plan, but it's secondary... most of our audience is going to be coming from paid ads... because I talk 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 going to 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're going to get into as a UX designer... what do we design for first? All right, 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. All right, that is Figma Mirror... and testing your prototype on your phone. See you in a bit. 25. Class project 04 - Testing on your phone: All right, it is class project time. I want you to download the Figma Mirror app... from Google Play or the App Store... I both named those wrong in the last, the last video... so go in there and look for Figma Mirror. If that's not working for you for any reason... you can actually, on your mobile phone, not on the desktop... go to figma.com/mirror, it works mostly the same way. So log in with your account, your Figma account, and test your phone. What I want you to do is just have a bit of a big critique of your own work... are the fonts large enough and legible enough... are the colors easily contrasting? So I can actually see some of the text... that is like over the top of these... I know it's wireframes, there's not much going on... but are these fonts for the description big enough... they don't all have to be 16 and massive... but you know, some parts, that do need to be bigger... like this one here, this like smaller part down here... does it have to be bigger? I don't know. I'm going to test it on my phone... also make sure that your buttons are all wired up... you go to 'Prototype', and just make sure... they're all connected, when you're testing... and also, are they easily clickable, are the buttons big enough... and the last one, going to go back to Design mode. I have problems with these, they just didn't feel clickable... they're not-- they weren't very nice, just a bit awkward to click. So what I don't want to do is, can you kind of see them there... I can see that, like this one here just needs to be bigger... like not the actual icon, I kind of like it, that size... it's the frame around the outside. Unlike a group, remember, a group... we can't deal with the frame independently... but because we're doing with these sweet cool frames... with the little hash symbol, it means that, let's have a look... that this thing inside, and this outside kind of wrapper... which is the frame, can be different sizes. We're going to get a teeny tiny bit advanced here, but hey, let's do it. So I don't want to just grab the edge... because what I want to do is... I want to go inside of that group, hello, group... or any of these things, go inside of them all... and I want to say, actually, I don't want you to scale... it's trying to match the size of the frame, which is cool... but actually, I don't want that, I want to say... actually, just stay in the center, don't scale... means, when I grab my frame, which is this one on the outside... can I grab it, look, hey, I can make it bigger... it stays in the middle, which is cool... but I can start making my buttons a whole lot more clickable... without actually distorting the image, or trying to make the icon bigger. Same with this one here, I can go inside of it, there's two vectors, I'm going to... Shift-click both of them, don't scale, please, just stay in the center... awesome. Go back to the frame around the outside... I'm going to say, actually, just be a bit bigger... nice. So there, I haven't changed the size... I just made the clickable area easier to get to... and that's the only one I've actually rigged up, isn't it? You get the idea. So that is it, go and test your wireframe... and check in your, where's it? Class projects... I just want you to take it, can you take a photo of your phone... not everyone can, if you've got another person's phone... take a photo of it. I just want to see it on the screen, kind of proof that you did it... and a nice little, I don't know, cool graphic of your... first wireframe up on the screen, how do you feel now... like I remember, when I first did my ever, first wireframe... I still get that buzz of like, oh, the thing I made, it's on a device... it's on my computer, and it's exciting, it's interacting... I'm clicking buttons, I feel like a professional... I don't know, is that you too? Anyway, take a photo, if it doesn't work, and you can't-- you've got nobody else around to take a photo... of your sweet new wireframe app... just take a screenshot from your phone... and upload it to the Assignments part of this website. All right, that is it, I will see you in the next video. 26. What is Smart Animation & delays in Figma: Hi everyone, in this video we're going to look at animation in Figma. Up until now we've been doing kind of more page transitions... with the whole thing sliding out, but now... you ready for it, wait for it... eh, hey... cool, huh. That is the arrow sliding in, just the arrow, rather than the whole thing. To do that we need to learn something called Smart Animate... and we need to add a delay on our pages, so let's jump in... and I'll show you how to make it. So to animate in Figma, just like one element... we've just been animating like a transition between the entire thing... we just want this arrow to move in, like you saw at the beginning there. So what I want to do is, basically you have two of the same frame... so we're going to have Confirmation, this first one... we're going to duplicate it... let's hold down the 'Option' key on a Mac, 'Alt' key on a PC... we've got two of them, and on this first one I want it to be off screen... kind of over here. One of the tips is, when you are doing animation... is - I'm undoing that - is just have a bit of space. So I'm going to move it over here, just so I've got space for my arrow. So we're going to have this first confirmation... where the arrow is going to be off... and the second one where it's going to be on... and to make the magic happen, is we need to connect these two. So I'm going to click on this frame, and I want to say 'Prototype'... and I want to say, go there... and when you go there... I want you to use Smart Animate, that's the one we ignored earlier. Basically this works when there are objects of the same name... on two separate frames, and it will animate them. You can see them on this first one... and you can see them on the second one... and it can see, like, hey, they're in different positions. I'm smart, I'm going to animate them... and I'm using the Ease In and Out back, because it looked nice. So yeah, let's give that a go... 'Confirmation', let's hit 'Preview'... and it's not going to work, I know it's not going to work. This is going to be the big thing that catches you out... especially with these kind of slide in animations... so go, click once... it faded in. What's happening is, is that this arrow is actually not part of this frame yet... or not part of this frame anymore. There was a time it was, look, I'm part of this frame... so have a look over here in my Layers panel. I've got this line 13 on the Confirmation page... but watch what happens, look, watch it in the Layers panel. If I drag it out, it's still part of it, still part of it, still part of it. At some stage it goes, boop, can you see? I'm not sure where that noise came from... but there you go, it is line 13, and it is, now like... not in this frame, or this frame, so it doesn't know what to do. So basically it says there's no arrow, now there's an arrow... that's why it just fades in. So it's really important to make sure that it is part of this frame... you can have it over here, you just got to make sure it is inside the frame... and you do it by dragging it in. Now we've got a little, a little tip is... we've got two Confirmations, and that is pain... it's hard to know which one is which in the Layers panel. So I'm going to do Confirmation A and Confirmation B... just to be helpful over here... and my OCD says, A needs to be below B... A, B, there you go. Now, Confirmation A doesn't have my little line in there... so all I'm going to do is drag it in, there you go. It doesn't matter where it is as long as it's in this frame... and there's one that corresponds in this frame. So there's line 13, there... there's one there, it's going to work. So let's go and give it a test... so I'm going to use my back arrow once... I'm just using the arrow, you can click these down here if you want. I'm on page 4, click once... hey, a little animation. So yeah, that's the basics of Smart Animate... as long as there's, there is something on both frames... that has the same names, and it does something different, it'll work. It could be even-- let's share a couple of things... one of the things with stuff off screen on Confirmation A... we know it's there... like we can see it there, but we can't see it over here... so what we might do is turn the-- remember, one of the perks of a frame... is under 'Design, with the 'Frame' selected... you could say 'Clip Contents', so it kind of clips it off. So you can actually see it and work on it. It's still part of the right-- layer order, nothing's changed... except, you can see it now while you're working... but there are times you want to kind of turn it off, so it's all tidy. So now I can see it, I can-- we did animation of movement... it will actually smart animate anything. So let's say we want to start it here, so it's still in the right... we're still in the right frame... it's still a different movement... but here, we're going to turn the opacity down to 10%... just so I can still see it. Let's go test that now... so back arrow, click once, it fades in and does that. So there is a lot you can do... we're just going to keep it simple for the moment. Let's talk about some of the quirks... so one of the quirks is that if you rename it... so we've got line 13, and line 13... if you're like, oh, I'm going to be very careful, and good... and rename at least one of my layers... because it's got a different name now, it's not going to work. Let's go back, back arrow, click once... just kind of like fudged it. So if you got to name one, that's fine... just make sure you name the other one, Arrow... back one, click. What else do I want to do? I don't like the Fade In... I'm going to go back up to 100%. The other thing I want to do is... I'm doing it on click, basically what I want to happen is... I want to go to Checkout page, and when I click this... I want the arrow to start kind of like moving in... automatically... because at the moment I've got to click it and bring it in. You'll also notice, if I go back one, when I click on this... because of the transition between... the Checkout page and the Confirmation page... because it does this back and forth, you actually see the arrow, look... that's weird, huh? So we're going to do a couple of things... when the Checkout is open in Prototype... I don't want it to do the crazy, what are we doing... we're going to get it to do 'On Tap'... navigate to our Confirmation, perfect... but I don't want to do the Move In, I'm going to go to 'Instant'... and I'm going to turn that clipping back on. So back to 'Design', remember, we clipped it off before, or turned it off... so we could work on it. It's great while you're working, but if you start seeing weird things... you might have to turn the Clip Contents back on, so let's give that a go. I actually want this off screen... make sure that it's inside Confirmation A... ready? So I'm going to go back, let's click this, instant... and I want it to automatically go across... not have to click somewhere and go across. So we're going to introduce another kind of transition between frames. So basically what I want to happen is... when it gets to here and we go to Prototype... at the moment what happens is... we say, on Tap, navigate to this other Confirmation B... I don't want it to be on Tap... I just want to use this one that says, After a Delay... so I want it to get here, and then, after a delay of, however long... I'm going to turn it down to one millisecond. You can't have zero for some reason... you have to have one millisecond, which is one thousandth of a second. So it's going to be instantaneous, it's going to get here... and then automatically move to this... and it's going to still use our smart animation, so that's the only change. Let's give it a go, let's go back to our Purchase page, give it a click... see, it got to there, and it automatically moved on. If that's a bit confusing let's change it to 2 seconds... so 2000 milliseconds, and let's go, back. So we click this, it gets here, waits for 2 seconds... and then moves to the other one, and the smart animation moves it in. You're with me? If you're not with me, don't worry... we've got a few more of these to do, it is a little bit weird... especially if you're from another kind of animation tool... where you've got a timeline, and keyframes, and Figma does it... but if you're thinking, "This seems a little bit clunky"... it is, don't tell anyone... it is Figma trying its best to be all things to all people. So the rules are, make sure that the names... of the things you want to animate, like our arrow here... are the same on both frames... you have duplicates of the same frame... don't move the stuff you don't want to, move the stuff you do want to animate... you need to make sure that the smart animate... is transitioning between the two, that's what makes the magic happen. The other big thing is that everything needs to be within the frames... what I mean by that is, remember... our little arrow over here can't be hanging out in no man's land... it actually has to be on this frame, and this frame... even if it's out in the artboard... it needs to be kind of grouped together inside that frame. Those are the rules of animation in Figma. All right, that is it, I will see you in the next video. 27. Class project 05 - My first animation: Okay, it's class project time, your first animation. So just get that arrow to move... and if you're kind of like new to animation... and you're like, "Man, this is going to be tough"... just do the arrow that we did, get it to work on yours... change the arrow up a little bit, you know, get exciting... get a, like a line arrow or reversed arrow... do something a little bit different... but do that and then send me a screenshot... so just kind of like screenshot, these two frames or three frames... if you end up doing more, but yeah, if you're new to it... just do that, nice simple one, we'll get into more animation later on. If you are like a little bit keen, and savvy, and brave... I'm happy for you to go a little bit further. So in here it says, you might try something, keep it simple still... don't get things to bounce in and bounce off stuff... multiple keyframes like that is tricky in Figma... but maybe it comes in from the top... maybe using a ball, a square, a tick that comes in... something different, up to you. If you did want to do more than one kind of animation... you can have multiple frames... that all kind of have delays, and lead into each other... but again that is for the people who, I don't know... at this stage I come from an animation background-ish... so I'd be like tackling that, but if you're new... just do this simple arrow, and we'll do more later on. The other thing is, is that we're just taking screenshots... and uploading them as assignments. I'd love to see your animations, but in Figma... just so you know, there is no like built-in recording part, when you get to here. Be great if this button says, record my stuff, check, it might be there now... but there's not at the moment. So I would love to see what your animations are... if you do know how to like record your screen, like I do... I'd love to see either a video uploaded... to something like YouTube or Vimeo, that would be great... or an animated gif, but it can get a little bit tricky... if you haven't done it before... so screenshot is totally fine. All right, that is the class project, do your first little animation... be excited, even if it is just a boring old arrow sliding in. All right, into the next video. 28. Sharing & Commenting on Figma file with Stakeholders: Hi everyone, in this video we are going to be sharing our design... with our client, or one of our stakeholders. So we're going to share it first of all with Doug. who is Doug? Doug is fictional... I'm using Doug as a representative of a level of person... you're going to be sending it to. Doug is a simple creature, he hates computers... and logging in, and passwords... but we still need to get, you know, he's our client... I want to get him this prototype, this wireframe, at this stage... just to see if I'm on the right track... keep them involved rather than surprising him at the end. So it's really easy to share stuff in Figma... I'm going to use the Share button along the top, click on that... and we're going to start with a simple version... because what I'm going to do is just send Doug a link via email... that's all I'm going to do, I'm going to copy it, I'm going to close it down... I'm going to open up a browser, and I'm going to pretend to be Doug. So this is Doug, I emailed him a link... he clicked it in his email address and this is what he sees. The nice thing about it is that... Doug doesn't have to sign up or get passwords... or get a free trial, or all of that jazz, it just works, which is really cool... and he can kind of move around. He can't do a whole lot without logging in... but he can look at it, he can't comment at this stage... we'll do that in the next part, but he can look at it and go... "Oh yeah, that's cool, I like that," or, "Hey, what's this going on?"... and give me some feedback at this early stage of my wireframe... just to make sure I'm on track. The other thing you can do is... this little Play button still appears here, so we can click on this... you might have to tell them exactly where it is... and you can go through and actually prototype it... without having to log in, he can see it, you can click on 'Learn More'... he can realize you can't get from Learn More to the purchasing... so back to Home page. All right, so he can see all of this, which is cool. One thing that might confuse Doug... which it does for some of my clients is it's opened up a separate tab... you can't close this down and get back to it... you're like, you can click everything... but you actually just-- it's got a separate tab... that opens up when you hit this Play button, see along the top there... yeah, yeah. So yes, where this gets even cooler... like this might freak Doug out, it might freak you out. So he's working on this, what you'll notice is... I'm going to make Doug go over the side... so pretend this side is Doug, and this side is my regular old Figma... so let's put a gap in between. So this is him on his computer, at his house... and this is me on, you know, this is me working, like I did before... and what you'll notice is, he can see my arrow. Figma is a really amazing collaborative design tool... so it's probably, for Doug, he's not going to appreciate that... he's going to be weirded out that I'm following him around with my little hand. I can even see Doug, look, there is his hand... so if I move him over to, and click on this, anyway... you can see each other, that's the point. Let's say Doug's like, "Oh man, it's good, but what is that green?" I'm like, "Oh quick, before Doug sees it," I can be-- select all same color, go, and he's like... "I hate green, man, green's the worst color in the world"... I'm like, "Ha, ha, what about pink?" He's like, "I hate pink more," what about red or orange? So what's happening is it's, this is live collaboration... so, it is amazing when you're working... with other designers and other creatives... because you're just doing something, and you can all work on it together... but at this stage you're just working with Doug... and yeah, he doesn't have to do anything else, he can just look... we don't have to be updating it in front of him... but it's a cool little bonus extra. Now let's bring Doug back, come on Doug... if Doug wants to use commenting... which is probably one of the really nice features... he can sign up free with either Google or sign up with his email address... and he'll be able to start commenting. So there's one thing that I might convince Doug to do... so you can actually use a little pin and actually start commenting on it. Let's show you a couple other things before we do commenting. So I'm going to go back to Figma... so forget about Doug, bye, Doug. A couple of things that you can do as a designer... is you can go into here, when you do go to 'Share'... you can say, "I want a link to a specific frame"... so let's say that we-- the homepage is wrapped up... there's just problems with the Product Details page... because there's no clickable button. Let's do this terribly, let's make that clickable, we can go to the Checkout. So what is it doing, instant, that'll do... so what I can do now is, I can select the frame first... and then go to Share, and then that option will work. It'll say, when I send this link, it'll actually link to the specific frame. This one here, it'll start there... if it's grayed out it means you've got nothing selected... and I go to Share, you can't tick anything, so that's one thing. Let me show you what commenting does... so let me upgrade Doug, wait there... so upgraded Doug, this is Doug now... before he could only do very limited stuff... now with his free login he gets... probably a little bit too many details for our poor old Doug... and he's like, "Why can't I see the CSS code?"... but the difference now is, he's got commenting... so Doug over here is like, "I like this"... you know... can't see my comment. So Doug's going to write... "Why are we not using real images?"... signed Doug. "Doug, it's a wireframe, that's why." So he posts on his one, on my side I can see Doug now, there he is... and I can start seeing comments coming through... and I can see it there and I can see it's pinned... and I can see it's going there, and I can reply to Doug and say... "Doug, I've told you a million times... this is just a wire frame for testing." Send it off to Doug, I should put a smiley face in there. You can see, we can have this collaboration between my client and me... they can pin stuff... all the client needs is a free login, or they can just do it by email... I don't have to log in at all. So commenting is great, there's a couple of things... and for me, on my side, let's forget about Doug now... let's go, can you see up here, there's two D's... I should have called him Fred or something... but here's two Dougs now, so there he is there... he's the yellow guy, you can have loads of them along the top here... of different people looking at it... lots of different clients, lots of different testers. I'm going to go from my-- I don't want to be on comments anymore... because I can make comments myself... I want to go back to my tools that I know and love... and actually I can go back to Comments, and I can say... actually, this one here, I can click on it, and I can say, see it here, resolved. So it's one of those things that we are finished with now... I've kind of made the adjustments based on it... or at least I've replied to his, and I'm kind of finished that... and I can work as a designer, through the different notes... from my client, or tester, or Product Manager. So commenting is pretty nice and fluid, and in real time. All right, we'll wrap this video up... we'll do in the next one, how to kind of share for editing... it's going to introduce a different part of the Figma experience... which is Figma teams. All right, I'll see you over there, bye, Doug, bye, Dan... I'm Dan. 29. Share editing with other UX designers in Figma: All right, in this video we are going to take it another step along... we send our file off to be shared with our client, and that worked great... but let's say we're going to be sharing this with other colleagues... working in a UX design team, at a company... and there's more than one of you working on documents. So I need to share this with somebody... that can actually start working on the project, kind of work together. To do that we need to introduce something called Teams and Team Projects. So we got so far with just the drafts, and using our sharing... so we look in here, kind of gave us an indication, right? If I want to share I can send it to say, Doug... and I want him to be an editor, but it says... "Hey, first, to be an editor you need to move it to a team project." I'm going to click 'Close', up here it says it as well... "Do you want to move this file?" A lot of things are indicating, needs to be in a team... so let's go and look at that the manual way. We can move it and it will automatically happen... but let's have a look the long way, just so you can understand it better. So back at my little Home house here, we've been working in drafts... you can have unlimited drafts, a bazillion drafts... eventually though, if you want to be sharing it with other people... and working on it, you need to move it into one of your projects. You also be named differently, depending on how you set up Figma... but this is called a team, think of a team as like a project... like Scott Headphones, as a freelance UX designer... you probably have about 20 teams or 30 teams, for different companies. Some companies only need one team with lots of projects inside of it... and the projects might be things like... hey, there's the mobile website, the desktop website... it might be some social media stuff we're working on... it might be some flyers that we've made... or the redesign of that web page, and then redesign again... lots of different projects. So you share the kind of company-wide team with the different people... so I can go to 'Members' and say... I want to invite you, you, you, and you to this team... and inside of this project we're going to have Desktop, Mobile... January Sale, all that sort of stuff. Anyway, those are what, that's the basic overview... of what teams and the projects are, so let's go back to this. So we've been given-- yours will be different... the name will be different, but you've been given... inside your team there's already a team project... it's this thing here, you can view it that way or this way, it's the same thing. We're going to delete it for the moment, create our own... they've given you like a pre-made team project with stuff in it... we can open it, have a look. This is the default one for Figma at the moment... and there's just a bunch of styles, lots of things going on in here... different assets, it is, yeah, it's kind of useful. I find it's jumping in probably way too much for a newbie... so we're going to close it down, and you can keep it if you want... you don't have to-- back to 'Home', I'm going to... get rid of this project... right click it, delete it, sorry, team project. I'm going to create my own, '+', create my own project... and this one is going to be the eCommerce... it has to be lowercase "e" for some reason... 'eCommerce website'... let's 'Create'. Now all we need to do is, this draft in here... the one we're working on, called, mine's called Scott eCom1... I can just drag it into this project, and that will unlock the editing... and you're like, why, what's the difference between drafts... and this kind of like team, with a team project... with a file inside that team project? This unlocks some of the features... so that I can actually collaborate with that person... I've still got that file open, nothing's really changed... except, can you see, it's not in drafts anymore, it's in that project... and now, when I go into 'Share', I can do more... I can allow people to edit, so I can say... "Doug, we don't really want to edit"... but let's say, Victoria... um, Victoria, somebody I work with... another UX designer, I could send her email address in here... and she could start editing this thing. So why do I show you all of this? Because it pops up quite a bit... and it's one of those break points where you go from free to paid... because, let's have a look, let me show you. So back at 'Home'... remember, drafts, you can have as many files in your drafts as you like... but if you want to share it with another collaborator... it has to be moved out to here... and I've got a team... that team can only have one team project... inside of that team project you can only have three files. So that's where they kind of, you know... that's where you move from going, "I need to pay for this"... because it's great having one project... but I need two of them, eCommerce website and this other app... that I'm building for them... or this other kind of subsection that I want to break apart... rather than just jamming them in the same project. Now in terms of the files... yeah, you're going to need more than three pretty quickly. Now this changes, go to figma.com/pricing... and they will show you what you get. Actually I'll bring it up here, this is what it looks like at the moment... it will change, it says, Free, you're allowed unlimited drafts... but you're only allowed one team project... and you're only allowed three files within that project. There's a few other things as well... but this is where you might bump up to a paid... the paid product, there are ways around it, and a lot of people do... you're weirdly allowed, at the moment, unlimited teams. So I could have a zillion different teams... with one project and three files in it... and you can see how that works... and you can see how it might be a bit cumbersome as well... but it is pretty amazing what you get for free out of this Figma. Again, these rules will change, go and check figma.com/pricing... to see what is available and what's not. So to reiterate, I've got this, I can share it when it's in drafts... I can move it back to drafts, I can say, you... actually I'm finished with this project now... and I'm going to be sneaky and move it back to drafts, so they don't have to pay. The trouble with it though is... anybody that was an editor can't see it anymore... it comes out of their Figma and goes into drafts... and I have to kind of share it this way, there we go. Kind of like Doug, he can view it, he can comment on it... but he can't be a co-collaborator on it, so pros, and cons. There are a few other things that, you know, a paid version gives you... that we'll throw in throughout the course... but that's one of the big ones. One team, one team project, and three files only. All right, that's it, I hope that helped... that really confused me at the beginning of... like this screen here... confused, kind of drafts... this thing, this thing, I can create more teams, what goes in here. I hope that helps, I'm going to leave mine back in drafts for the moment... so if you have dragged it out, put it back into drafts... you can just drag it, click, hold... drag it from one to the other... and we'll resume our regular scheduled... free version of Figma in the next video. All right, I'll see you there. 30. How I get inspiration for UX projects: Hi everyone. In this video, I'm going to show you where I get inspired for my projects. Everyone's going to have their own places, I figured I'd show you where I go. Before we do that though, let's quickly talk about the transition we're making. We're transitioning from wireframe, low fidelity to high-fidelity, something more like this. This is where we're going to end up. It is Hi-Fi, high fidelity, looks like it's going to work. It's a closer prototype to the finished thing. All fonts, all colors, all images and yes, you also get this messy too. Well, it depends. Mine always end up looking this messy. I tidy them up when I send them to clients or colleagues, but hey, I just end up spilling off the frames and I break all my own rules. Look, nothing is in a frame. Do as I say, not as I do but there's no point pretending, it can get a little messy. Wireframe is being finished, it's being tested and now we're ready for going out to this Hi-Fi. Now how do I get inspiration? There's the usual suspects, Dribble, Behance. Go to these places, type in like UI kit. That's a good term and just see what appears. You can be very specific like you saw before. I typed in headphones. What you're doing is, you're not looking to copy, that's not what we're doing here. We're looking to get ideas of like, "Ooh, I never thought of that," or "Ooh I didn't even know we had to have that kind of UI component," and just start taking screenshots. Same with Behance to search for UI kits and you will get lots of ideas. It's also useful even if you're not going to go and buy a premium kit from something like Envato Elements or Adobe Stock, it's good to go and do a search, UI kits, and just have a little look. Take screenshots, be inspired by color and fonts, and just get a bit more into it and just take lots of screenshots. Don't forget to actually go out to the actual products as well like I have left my mood board and the screenshots that I took to get me inspired for this course material, they're all in here. Some of these last ones here are just actual companies that are selling headphones on their own. I just took screenshots from my phone and uploaded them here and that's how I've got some idea. Sometimes in those UI kits they can be a little bit like, "Hey, there's no chance I can use that because A, it's not accessible or B, with all the terms and conditions and all the boring ugly stuff that you need." Sometimes they simplify them to look really pretty, but maybe not that practically. Go out, check out competitors and even parallel businesses to what you're doing especially if you're new to the area. Headphones is not terribly new to me but if I had to do something in the construction or shampoo, something I haven't used for a very long time since my twenties, I'd have to go and explore the shampoo advertising. Anyway, I made myself. The other thing you can do when you are getting into this inspiration is you can get quite deep. It's getting better and better to find quite specific unique thing. Let's say that in this project we are doing like it's pretty, it's fun because we've got a big project. We've got a full e-commerce website to build. Often those as a designer you're like, "Hey, can you redesign my sign-up page?" You're like, "Of course, I can." It's exciting from a UX perspective because you probably already got existing conversion rates and you can make changes, do AB tests, get to going to see, can you make it better? Have you made it worse? What language works? Those are exciting in different ways, but in terms of a design way, let's redesign the sign-up page. You can go to places like this is a one that I use. There might be better ones out there and this might be gone. It's full of ads, that's my problem with this one and the images aren't high-res, they're a little bit low. Anyway, this spelling of Pttrns. What they've done is they've got a really cool thing where you can say actually, I've been asked to do calendar. You can click on calendars and time, and there's a bunch of UI screenshots from apps which gives me my web design as well. Just a different sites and how they approach calendars because you're like, "Are they all going to look like the traditional one like that." Or look at that one, they've got days of the week stuff. Let's have a look at maybe you just got to do a simple notifications as part of your team project. You're in charge of this and it's just interesting how to deal with notifications and different kind of instances. Charts is another one in here. If you're in charge of doing some data representation, some infographic going on, there's some cool stuff. Another good one for that type of thing and getting into the ways is Awwwards with three W's. You can, let's say in Awwwards go to menu. I want to look for nominees because it gives you not the winners, I want to look at all the people nominated for the category of e-commerce, perfect. Using the tags of footer design because that's what I have been put in charge off. You have to redesign the footer then you're like, "Okie dokie, I'll do that, no problem." What you'll have to do is, you have to dig in and have a look. You can open it up, have a view, you can see, click on that button there. They do change their site as well so have a little look around, you'll be able to open it up, go have a look and check out what they've done. I don't think they have even updated their website since they were nominated in this award. You can dive in there screenshots. Where as this amazing footer. Have a look. Have they changed it? That's cool. Let's have a look at the footer. Yeah, it's pretty good. Look at that. I don't know how they're doing that and I wouldn't sell this into my client because my developer might kill me. Yes. Other good places that I look at from time to time, CSSDesign Awards and onepagelove.com. They can be broken down into different things as well, but yes, that's where I get my inspiration, lots of screenshots and then I'll show you what I do with all these screenshots in our mood board in the next video. Little note, leave in the comments. If you've found other gooder, better like this one where you can get quite in a nitty-gritty of apps and websites, let me know. Let us know in the comments, share it with everybody. If you've got a good site that breaks it down to this very granular level of weird stuff of like, "I need a login screen." Look all the logins. That's it. I'll see you in the next video. 31. How to create a mood board in Figma: Hi everyone, in this video we're going to take our inspiration screenshots... put them into something that looks half decent as a Mood Board... and I'm going to show you how to do the quick and dirty version... depending on the Mood Board's use case. All right, let me show you how to do it. To create a Mood Board, you've got kind of two Mood Boards... you've got the Mood Board for yourself, as a designer... and then the Mood Board that you're going to send to the stakeholders. Now I hate the word stakeholders as much as you do... maybe you don't, it's management speak... but UX world, everybody's a stakeholder... that's, people like the client is one of the stakeholders... it might be the people financing it, it might be... it might be the user at the end. It's kind of like a nice round all term for everybody, but I hate it... it's like, thinking outside the box is another one I hate. Moving forward and maybe giving 110%... all of those management things, I'm allergic to, I hate them... but hey, stakeholders. So the one that you are doing, remember, for yourself... can be really rough and ready... all I tend to do is I just zoom out, go find my Mood Board screenshots... and just go up and just dump them all on... and Mood Board made. Maybe I'll stack them up a little bit closer to here... and I just use it to like get ideas for fonts, and colors, and layouts... and that is Mood Board, simple number one. Now it can get a bit messy... can you see they're not in a frame. So just to make life a little easier... what I tend to do, you could see the example before, I totally didn't... but I'm going to make this... I'm going to lay it out so it's at least a little bit manageable, give me a sec. Now you saw that I just dragged them onto my desktop... from my kind of Finder window, you can do that... or you can use the normal find, 'File', 'Place Image'. What I should do though is put them in a frame... so that I can kind of tidy up this... so I can say 'Frame Tool', drag one out... and it just, because I dragged it over everything they all fell into place... I can call this my Mood Board. You can get fancier and create a page that's called Mood Board... and copy all into it. I don't want that, I'm going to undo that... because I want to be able to see it while I'm working... but depending on your workflow. Now a fancy one that I'm going to have to send to a client... I'm going to make, I'm going to-- the weird thing about a Mood Board is... for a client it's not going to be a bunch of UI stuff and colors... it's going to have to, because they're going to come back to me and say... "Why is there a shoe there? Why is this here?" I'm going to have to be a lot more deliberate with my Mood Board... and know who it's going to. For myself I can dump any old junk on here, and be happy. For my client, I need to make it look better... and it needs to be a little bit more clear about my direction... because this thing, plus that thing over there are not a clear direction... they're not going to go, "Yeah, that's a great idea, let's use... I like the direction that you're heading with your Mood Board"... because there is no direction. So to design a fancy one you could just do exactly what I'm doing here... add strokes around the outside, fancy it up with colors... lay it all out nicely, scale it all around using our K tool for Scale... and get them all nicely laid out... or you could use one of the templates. There is a bunch of templates in our community... so back to 'Home', make sure you're on 'Community'... there's a little option here, and you can see... let's go to our 'Community', you type in "Mood Board"... cool. There's just lots of pre-laid out ones for you... you might decide that you like this one... so I'm going to click on it, I'm going to click 'Duplicate'... remember, duplicating means it's now part of my Figma file... and you can see a bunch of layers. Now, if you can't see them here, there's an example Mood Board... so it's going to end up looking something like that. You can tell how much nicer that is, I can't tell where I'm going. One little shortcut while we're here is 'Shift 1'... Shift 1 kind of zooms out to show you everything that's on the document... and that can be really handy. Put that in the middle and then smash 'Command +', or 'Ctrl +' on a PC... and you can see they've created this on. On this, they've created some Mood Board structures... you might just copy that, paste it, and start adding your images. Now we're going to cover images a lot better later on... but let's say you like Layout D... you can double click it to go inside this component... click on this rectangle and just go to our 'File'... the F, 'Figma F', 'File', 'Place Image'... and pick one of these, and go, there you go... or do none of that and just click on it... and you can see, it's gone inside, double click it, move it around. We're going to cover cropping and images later on... but just wanted to give a sense now, at this point of my design... Mood Boards are getting created... and you can either just do the one for yourself... dump it in a frame, don't really care... or a lot more considered Mood Board... that I'm going to go to my client with and say, "Hey, this is the direction... before I start designing and moving... picking colors and choosing fonts... this is the style that I'm heading towards, what do you think?"... and they can give you feedback like... "No, I want to look like the Apple website"... or, "No, I want it to be a lot more urban and hip"... I think you are instantly not urban and hip if you say it... like I just did there... I don't claim to be urban and hip... but you get what I mean, right? Like they're going to give them a sense of where you're going... before you start doing it... because it's-- that dialogue is really important... because you can spend ages making a UI that they just don't like. All right, that is it for Mood Boards... let's move on to our next video. 32. Class Project 06 - Moodboard: Hi everyone, it is class project time... you're going to create a Mood Board for your company... not the one that I'm doing, okay, so not headphones... whatever your brief said, your brief might be Bob... and it might be selling, I can't remember all the lists... but, you know, it might be microphones, or it might be honey... or, trying to remember what I had on the list... but go off, find just beautiful stuff... UI components, colors that you like... that you might want to use in your design... as well as look at the industry that your product lives in... in kind of parallel industries... so that you get an idea of, like what's going on at the moment... where you might be positioned. Take lots of screenshots, and then you can do one of two things. You can just dump them all on the page, like I did, lazy old Dan... or you could make them a little fancier... by using one of those Figma community examples that we did... I showed you before, you know, all nicely laid out... I don't mind, but just keep it on another page, called Mood Board. At the moment mine's kind of hanging out in my LoFi Mobile... and it's just kind of lost in here. It's hard to find later on, in the year... when I need to try and find it, it's going to be hard to figure out... so just create a new page up here, make a Mood Board... put them all on, and then take a screenshot... kind of like this example here... and just upload it to the kind of assignments, projects... comments of this website. All right, that is it, go make a Mood Board... I'll see you in the next video. 33. How to work with Columns & Grid in Figma: Hi everyone, in this video we are going to create our Hi-Fi frames. We're going to add our columns, that's these red things here... to both desktop and mobile... and we'll look at the grid that goes into the app design. Now I do get a little bit into the weeds here... to help explaining why we're doing, if your brain melts... the only thing you need to remember is, 12 is good, just make 12 columns... all right, let's jump in. To get started with this one... we're going to do some renaming of pages... I'll fast forward this. All right, wasn't much fast forward... but I just put mobile Lo-Fi, or our wireframe... and I'm going to add two more pages, two more pages... and we're going to have mobile, I'll fast forward this as well. So I've got, these are the ones we worked on earlier... I'm going to start on a separate document for the Hi-Fi... I often do this, I don't want to bring along... any baggage of random junk in this one. So I'm just going to start again for mobile and desktop... we're going to shift to doing desktop for a little bit... no other reason, just to mix up this course. So I'm on my 'Desktop Hi-Fi', my high-fidelity version... I'm going to go to my 'Frame Tool'... I'm going to pick a 'Desktop' size... and this is a really common desktop kind of size to design for... it's pretty in the middle of lots of things. It will change, over time, that'll probably change as well... you can Google, like, "most common desktop size in your region"... if you're working with a country that doesn't have... big technological adoptions, or the opposite... you might have really big screens... in your city, or country, or industry, you design for that. So let's talk about our columns, so I'm going to zoom out a little bit. So to do the columns, click on the 'Frame Name'... and I'm going to actually call this one, name it as I go, 'Home page'... and over here there's something called the Layout Grid. We're going to hit the little '+' button... and we're going to get a grid, that's what we don't want... we want to click on this little 'Grid Layout Settings'... and go from Grid to 'Columns'... and we've got the count that we don't want, we want 12. So we're going to do 12 to start with... and explain why we're using 12. Some of you will know, some of you won't, but why are we using 12? Because everyone else does, and because you'd be really weird... if you use 11 or 13, and we want to be... I guess, following the industry standards. There's no real rule that says you can't use 13... your developer though might hunt you down... and have strong words with you... because 12, there's a lot of frameworks that they're going to use... that use 12 as a default, and why we like it is that... it's easily divisible as a designer, so we can go in this and say... all right, this is my Nav, and this is going to be my... say, Hero Box, with my big image and my big marketing message in it... and then I'm going to have some feature boxes... and I'm going to have four of them. The cool thing about 12 is that... everything is kind of easily divisible... there's enough detail to separate these four into it... but we also could go, actually I want to have three... kind of feature boxes, or... cards, or things... and it's still easily divisible... so we like 12. We do a similar thing for mobile, so 'Mobile', 'Frame'... I'm going to go 'Phone, 'iPhone 8'... I'm going to go 'Layout Grid'... hit the little '+'... I don't want a grid, I would like a column of 12, because Dan said so... and I'm going to change the, say, the margin, no, the gutter. The gutter is the space between columns... the red things in my columns, those are too small... so I'm going to make it 6. So I've got 12 here, and I can do the same thing. I could say, actually, I want a Mobile Nav along the top... I want my Hero Box, and as a designer I know that... here, I've got this extra space on desktop. So I've kind of pushed my Hero Box in from the edges... but on Mobile, I don't have that luxury, it's too small. So I'm going to go, my Hero Box is going all the way across here... and when I get to my 'Features', which is these three boxes here... I'm going to say, actually, 3 across is going to make them too small... so what I'm going to do is...' I'm going to either stack them up on top of each other or maybe, let's say that... over here on Desktop... I'm actually going to have four of them... and there we go... there we go, I'm going to have four of them... so that when I'm working on mobile... I can have Rectangle 2... I might just have 2 across... make two of these... selecting them all, I'm doing my kind of... holding 'Option' on a Mac, 'Alt' on PC, and you can see... I've got that exact same content, my four feature boxes... but laid out nicely on Mobile, that's maybe a bit more-- I have to test it to see how big the text is, and the images are, I can-- that's why 12 is useful, it's kind of divisible across mobile... you might be designing for tablet as well, and desktop... and we haven't covered this specifically... but I wanted to show you just something here... this website here, I just picked a random website... Hubspot is just a, if you're searching... for stuff about UX and UI, and testing... you probably end up at Hubspot eventually... it's some really good resources in here, I like it... but let's say you are the designer for this website... you've designed a website version... but watch what happens when I make it smaller. So this is kind of like the big, big screen... when I get down to a smaller screen, can you see what happens? So some changes happen, in this case, just the illustration... when I get down even smaller, let's say, to tablet... they get rid of the menu, and go to this kind of... more traditional Nav sandwich or Burger menu... and then when I get even smaller, things change again... and kind of layout for a mobile phone. So this is what you're doing here, you are designing a desktop version... you should be designing a tablet version as well, and a mobile version... what all these things look like across the different devices... and the developer, the person doing the coding will go... I'm making a Hero Box, and on desktop... it's going to be tucked in two rows, only on 10. When it gets to mobile it's actually going to be full, 12... it's called Responsive Design. There's all sorts of fun things with breakpoints in CSS... and some of you are going to have some information and knowledge about it... and when I say breakpoints in CSS you're going to be nodding sagely... and some of you are going to be... it's going to be really foreign to you. My advice is, you don't have to be a coder to be a UX designer... but it's really helpful if you understand a little bit... of what the developer or web designer is going to do afterwards... are they using a framework, what is the framework? Does he use a 12 column grid, what is the default spacing? What is a break point? What's a Media Query? All those sorts of things are quite useful... you don't have to, but I know that are-- they're really helpful... when I'm designing something, I give it to the developer... and they don't hit me with their shoe... because I've designed something terribly hard to make. So if you do want to go into something like that... even if you don't get into it full time, check out... you might check out anybody's course... YouTube, whatever you want to do... but if you did want to check out one of my courses... probably Responsive Web Design is a really good one, go check that out. It'll get you up to speed with a lot of this responsive design, anyway. Let's talk about some of the bits I skipped over quite quickly. So 'Desktop', 'Home Page', went to the 'Columns' here, '12'. We know why we're using that, the other parts, the margin... what does the margin do? It's the sides, so if I go 80... what's going to happen is there's 80 from the outside, the margin... I'm going to delete these guys, I'll cut them. So obviously, you need to put in your margins and columns first... before you start designing. So I've put in some edges here... let's say that I'm designing a website... and I want to actually design it for a really big size... hold down 'Option' on a Mac, 'Alt' on a PC... to get both sides to squidge out. So I'm designing a lot wider site... what I can do is put in nice big margins, say like 300... because what you'll notice is... on most websites, like this hubspot one's a good example... when it gets to my giant 4K LG monitor screen... what they don't want is, they don't want the logo all the way over here... and this About and Sign Up page, all the way over here... like it just gets too wide... those big wrap around surround screens, it would just get ridiculous. So what we do is we put in margins from the outside... so that we-- you can see the actual website is actually just in this chunk, in the middle here... this stuff here is just placeholder stuff. So that's what you can do here, you can put it in margin... and it could just be background color... but you start your logo here, keep the website within this... and these bits stretch depending on how big the screen is. So I'm going to undo that, because that's not what I want... so I'm going to stay with 14. When I say 14 I mean the 1440 width, there it is there. Let's talk about the Gutter, the Gutter is the space between columns... how big should those be? There's no official police requirement rule... but it's really common to use 24. 24 is a common thing in development as well, it's easily divisible by 8. 8 is a really good kind of baseline grid number... we'll look at that when we kind of mock up an app in a sec... or at least do the grid, but you could pick 30, you could pick 13. Again, 13 is not an easily divisible number... and that becomes quite important later on... when we're kind of coding the website, so 24 is a nice spacing. Anything else I want to share with you before we do the grid? One last thing is, even though I said 12 is great... both mobile and desktop, it's a bit weird here... there's just too many columns, and the spacing is not big enough... it'd be really common... even though the underlying technology... or code will be using kind of 12 columns, potentially... it's often, just click on the actual frame... and say, actually, 12 columns is too much... I'm going to use 6... it's divisible by 8, and it just gives me a bit more spacing. In terms of the Gutter, I'm probably going to use... something like 16 to space it out... which is one em if you're a web designer... it's a common one to use on mobile devices... and I'm going to use this for my layout. Even though I said, use 12, when I'm designing... it's just easier to use 6 and assume 12 is going to happen later on... but it's easy, 6 goes into 12 twice. Now the other thing I want to show you before your brain melts... it's probably already melted... I'm going to add like an app version, we're not designing an app... we're designing a mobile website... but let's say you are designing an app... it'd be very common to not use columns anymore... so I'm going to use iPhone 8. It'd be very common to say, I want a Layout Grid... oh, click on the '+' there it is, not of 10... it's really common to use 8. That is a framework that somebody like Android and iOS use for spacing... again, it's easy, and divisible, and it spaces things out nicely... that would be very common, talk to the developer... who's making it first, they might say otherwise... but 8's a really good grid size, and you don't use columns in this case... because it's not going to respond, it's always going to be on a phone. Okay, we don't need the app right now, goodbye. I'm going to go back to my 'Desktop-Hi-Fi', and I guess I just want-- if you get nothing else out of this video... just know that it's good to have 12 columns to design for... I guess I throw this in there... because there's going to be a few of you out there... that have a lot of knowledge... and some with a little bit of knowledge of... the other part of this process, is the web development process... and some of those numbers will ring a bell. Last thing before we go, shortcut, it'll be in your shortcut sheet... because it's a weird one, on Mac, to turn this on and off... because like, when I preview this, look, it doesn't actually appear... it's just there in working mode to help me... but it doesn't actually get produced at the end. So you end up toggling it on and off quite a bit... so 'Ctrl G' on a Mac, now, not 'Command G', it's 'Ctrl G'... which is a weird shortcut, right? It gets even weirder for PC, it's 'Ctrl-Shift-4', completely different... those will be in your shortcut sheet anyway. Oh, did that feel like the end? It was the end... I've come back to re-record something, let's... I want you to actually create four pages... and I want to show you a little trick or tip... I'm throwing them with columns. So if I've got, let's say that I've got a couple of different frames... I'm going to add another desktop version... and how do I-- I've spent some time getting all the columns right on this. There's a weird thing you can do in Figma, so let's click on this... a lot of these things can be selected by clicking... the gray kind of area next to them, look, just kind of there, not there... because that opens that, but this kind of area, no man's land... there's some, there's some places where you can click... same with this one, oh, can I get that one? Maybe the Fill... not all of them are clickable, but this one here... click on that little gap there. I've kind of got it selected, so I can copy it, go to there... and just, I'm using my 'Command C', 'Command V' on a Mac... that's 'Ctrl C', 'Ctrl V' on a PC... so just click on that, and going paste, and you can paste a lot of that stuff. So that's one way of doing it... or you can just go through and start duplicating it, like this... 'Command D', 'Ctrl D' on a PC... I've got three of them, I'm going to fast forward, name these. So I want you to do that same thing, have four of them... do the same thing for mobile... and I will see you in the next video, we don't need this. All right, do fast forward mode, so you know what I'm doing. All right, so that-- who remembers how to get it all in the screen in one go? You remember, 'Shift 1', there you go... that's what I want you to build, both for mobile and desktop... and I will see you in the next video. 34. Tips, Tricks, Preferences and Weirdness in Figma: Okay, it's time for a little interlude of exciting tips and tricks and preferences and weirdness. That's kind of the name of this video. We're going to do it just, we're going to go back to our low fire because we've got more stuff to do tips and tricks with. Okay, So I feel you're at a point now where actually some workflow stuff will actually not freak you out but actually help you out. So let's go through a few of them. Now, in terms of all the shortcuts, you can kind of find them by hovering above some of them. Lots of them are hidden though. See this, a little question mark down here. I hope it's still here. Okay. If you click on this like help and resources, we've all been conditioned by early software that built in help and resources is like useless. It should be avoided. But figments really good. Let's click on here. And I'm going to go to the shortcuts one. Okay? They've got great stuff. Okay? But the shortcut one is really useful and nicely laid out. So the essentials, there we go. Okay. I'm not going to run through them all. I just want to show you. Just have a little look through and go, okay, there's that one. Okay, there's that one view, okay? All these ones. How to access the layers. Panel jumping from assets, design prototype, we've been doing that a bit. Going between here and here. You might go, okay, that's me, that's Alt or option nine. Okay, so it does work through. There's some really good ones. I'll cover the main ones throughout this course, but there are some nice ones in there. So let's go option nine or mine in option eight. Design, prototype. Design, prototype. Okay, it's a little helpful thing down there. Going to go back to the design. Another really useful shortcut is the shortcut that rules them all. Okay, hold down command on a Mac, Control on a PC, and hit your forward slash. Look at two slashes. One of them goes forward, one of them goes backwards. So the ford slash brings up this, You're like, oh, what is that? Right? Little clarification here. I just used the quick actions and I said, hey, it's command forward slash on a Mac. Control forward slash on a PC. And that works on a lot of like English quirti keyboards, but if you're using a different language keyboard, you might not have the forward slash. So figma is clever and we'll pick a different character. So just have a look up here. So go up to here and hover above Quick Actions. And you will see whatever the shortcut is for your kind of operating system and your keyboard, it'll be different. It might be this plus apostrophe or some of the weird characters. There you go, Carry on. Basically, it's going to look through everything Figma can do, if you can type it and spell it. Okay, so remember before I was changing the color, well, I wanted to select all the same fill. So if I selected that, I kind of did that flippantly when we were doing commenting. Right. Like where is that again, what you do is I don't go and find I know where most of them. Okay. But this is, I'm doing this for your benefit because this is a really awkward way of doing it. It's all about the shortcuts, at least for me anyway. So I can click on this and go command forward slash, and I can say select. I've just typed in S E, L E. I don't even have to spell very well. And I can see Select all with same, Phil. Then go and change the color. I find that super useful. Okay. Instead of having to figure out where is it, is it under edit? Is it under edit? What is it under select? Is under you. Okay. So just type it out. If I want this all to be upper case, I'm just going to go command for slash and I'm going to go upper. There you go, Upper case, boom. I don't have to do anything. I don't have to go find it. It's in there. It's over here somewhere as well. But I use that command Ford slat all of the time. All right. Another handy thing which we haven't really covered is right clicking. Okay. So if you go into here, right clicking will actually show you stuff relative to what you've got selected. You can see this will change depending on what you've got selected. Okay? And there's just helpful bits and pieces that relate to what you're doing. Bring forward. Instead of all the way front, you can see the shortcut, but you just click it here. You can move it to another page. So right clicking stuff will give you lots of interesting things related to the object you've clicked. Okay, Right clicking, You know how right clicking, hey, it's on my list here, preferences. There's only a couple that I would change up to you. Okay, So I'm going to go to, I have no idea. Preferences are, so we're going to use our command forward slash and type in preferences. Of course, it's not the one in there. Jeez, Okay, where are your preferences? I bet you they're under edit. No, they're under file. Please hold there they are. Down the bottom here. There's not many in this program. Okay. The one that I change is keep tool selected after use. I turn that on, It's off my default. Okay? It just means that whenever I grabbed my rectangle tool before and I dragged it, it went back to the selection tool and I had to go back to my rectangle tool to pick a tool and it to stay around up to you. The only other thing I go and mess with in here is under preferences and the nod mount. Okay? So small nudge just means a nudge is this. When I grab that rectangle and let's say I'm working on this, I'm going to use my sweet shortcut. Shift two. Shift two is we did shift one. Everything that is on this entire frame or page, sorry. And if I've got something selected, shift two zooms right into it. Okay. I'm gonna back out a little bit because it's a bit too intimate. Anyway, why are we here? Nudging. So I've got these two in a group. Nudging just means it's going to go one pixel at a time. That's probably fine. Okay. Unless I'm dealing with my eight member. We did our app design and we're dealing with our eight point grid. You remember that add, Okay, And we did eight points. Okay, We were doing app design, it could be really nice and go into here and say preferences nudge, amount. Actually, the big nudge is not ten, it's eight. That's useful because it means that I can get it here and be nudging in points of eight. Only useful when you're developing apps. All right. A little bit. Not super exciting that one, but let's have a look at, we've got these groups. I know that that is inside of there. I know I can double click them to get inside. A nice short cut K is to be holding down the man Katro PC and just click on at once. And you see it just dive straight in rather than having to go click. Click. Okay. And when you've got lots of things, kind of groups, let's say that you decide to this using normal old group, then I'm going to group it with that. With groups. With groups, okay. You have to double click. Double click. Okay. You can just hold down the command key I have. Trying to figure out all of this. I can grab this line by just holding down command and clicking. Once I've got straight in there, it's control in a PC's. Under all of that, I totally erected it. Those are my shortcuts that I use. There's a few more I'll introduce in the class, but really that command forward slash and then just typing things in. Even got the ones that have used last, which is nice. And this little help thing down here and ticking on the shortcuts is, I'm teaching you how to fish. That's what I'm trying to do, that's what I'm trying to say. Instead of teaching each individual one, let's also cover a few weird things in Figma, just so they might be catching you out already or maybe in the future. Let's say if you do have a frame, is this weird? No, this is just regular, this is a group. You can go up here and say, actually I want all the extra stuff for a frame, okay? If you have got groups everywhere and you want to move to using frame features, you can just switch it over here. Things that are weird is if your name appears above a frame, okay, It's called frame one. If I end up putting it up here, where am I going to put it? I'm going to put it just outside everything. Can I get it there? Let's get it above everything. There you go. If you end up with names everywhere, it's because this frame, even though it looks like it's in a home page, it's not. It's hanging out by himself. You got to make sure he goes in there. All right, So that is it for my tips tricks, preferences, and a little bit of weirdness there at the end. All right, I'll see in the next video. 35. Color Inspiration & the eyedropper in Figma: Hi everyone, in this video I'm going to show you... the places I go to for color inspiration. A bunch of different ones... and I will show you then how to kind of get them into Figma... using both the Eyedropper tool, copy and pasting codes... plus we'll install a plugin that will make me look bad... you'll see why in a bit. I eventually worked out how to use it... all right, let's get started. To get inspiration for color... you can just type it into Google, "color inspiration websites"... there are loads of them... I'll just show you the ones that I use, is colorhunt.co. It's nice, the colors are great, they are... there's four of them that work well together. Same with color.adobe.com, if you go to here... they're both free, and I like this one... where you can go to 'Explore', and type in things in here, it's quite nice. You can say, remember, Sarah is Eco-conscious... I realize it's a bit-- it doesn't have to be green to make it Eco-friendly... but you might be using kind of words from the company's kind of values... it might be that it is about brightness and equality, or travel... or I'm trying to think of things that would have a good color... unique color, color palette to them. it might be corporate, you might put in corporate... because that's the feeling that you have, that this thing needs... and like a lot of these, find one, you like, oh, it's hard from this lot. I'm in this zone... what you can do is, click on them... and you can see, if I don't hover over... see that hexadecimal number, that hash number... that's what you can copy and paste into Figma. Same with here, you can see the codes, if I click them... let's click on that code there, it's copied... it's the same thing from here, you can copy them and then in Figma you just go... all right, Sarah's Eco-friendly, so she's going to like green. Let's go to our desktop version... I'm going to draw a rectangle... and I'm going to fill it with, that's it there. You can paste it in with the hash, and I figure, more sorted out... there you go, is that green? You can copy and paste some colors in from these... kind of more official color inspiration places, there's loads of them. Now another one for gradients, I use Grabient quite a lot... there are lots of these around as well... in terms of gradient color, size, sort of gradients... in probably the next video... but you can just start to see really nice kind of gradient colors... and down here you can see the hexadecimal numbers. You can copy, paste these in for your gradients. So color inspiration is not something we're short of. Now these things in isolation are fine... often, what you end up doing, or what I end up doing... is going to things, remember, our inspiration Mood Board earlier on... I'm going to be using screenshots from Dribbble, and even, it's just colors... it might not be the right content, but the colors are good. What you can do in Figma... is, I'm going to go to my 'Mobile LoFi'... this is up here, remember my dodgy Mood Board... do the same thing, rectangle, grab this... and we're going to grab the Eyedropper tool... and just grab anything out of here. You can see, I might be using this... I'm going to draw another rectangle, you, Eyedropper... something lighter, is there a lighter version of it? Yep... and just do something like this... pull the colors from that group. You can see hints of where I got my colors for my final one... you've kind of seen the final one already... that I mocked up, kind of getting ready. I kind of pulled some of this colors out, and then designed my own. You kind of start with other people's, and then you start using it... you're like, actually, too bright, not bright enough... not enough contrast... out of the scope of this class. Accessibility, in terms of color, in terms of contrast, is quite important. It depends on where you're going, and how much it's enforced. You should, as a UX designer, really be concerned with accessibility... you know, people, not everyone is, some people are colorblind... some people a little bit colorblind... a lot of men my age are color blind a bit... and the visually impaired need a really kind of high contrast ratio... so Adobe Color is kind of helpful for that. You might have a read of this, kind of outside of here... but here's an example, this one and this one... has a contrast radio of 3.331, put in your two colors... and you can see, 17 point or below with that color... or the regular text on that green background... fails the accessibility kind of test here. The contrast between these two, with this 18 point, and it's bold... those colors work, again, it's probably... just we're, yeah, we're creeping into doing too much in this course. So accessibility is outside of the scope of here... but just know that it's part, that it should be part of your process... and add that to the list of things to learn as a UX designer. One last thing is, there's bound to be a plugin for it... so I'm going to go to 'Browser Community'... or we can go over here, 'Community', I can say 'Plugins'... I'm going to say "color", I'm using the American spelling here... I look at the ones that have the most downloads... that seems to have lots of downloads. I've never used this one so let's figure it out together... so it's installed, which is great, back to this one here... I'm going to go 'Plugins', 'Color Palettes', and I imagine... there we go, color palettes, and it's just, I guess, built in... rather than going out to those websites, so you, you... looks like, oh, it looks amazing. I think I've just liked it... I don't know how to use this, nice choice... pretty good choice, looks amazing. What has happened? I have no idea, I have to read the documentation. Did it appear down here? It did not... I've added it, there we go... worked that out eventually. Those are just regular old rectangles that are grouped... we can start picking colors from. So all plugins work slightly different, thank you, color palettes... you made me look like, I don't know what I'm doing... there you go, you get the idea. Colors are everywhere, you should be pulling colors from... your discovery kind of sessions with the clients... you know what they're looking to do... they might already have corporate colors... and you're kind of stuck using those... but sometimes we get all the freedom... and we can go look for color inspiration... and use that Eyedropper tool to steal colors from images. All right, that's it, color inspiration... Eyedropper tool, learned and done. 36. How to create a color palette in Figma: Hi everyone, in this video we're going to make a kind of a color palette... that we're going to start building our High Fidelity mock-up with. I'll just show you my technique for grabbing... primary, secondary, accent colors... getting a few shades of them, what to do with blacks and whites... at least my process, let's get into it. My colors, where did they come from? I can't remember... I kind of prepared this class a couple of weeks ago, got everything ready... I can't remember how I got my first one at least. So, I know what it is, because I've got my kind of practice exercise files... but what I'm going to do is, going to grab my Rectangle tool... and draw out like a nice small rectangle here... and over here I'm going to paste in that color I got. So you might have got yours from Color Hunt or Adobe Color... or from somebody else's mock-up. That was the color I started with, and I remember... I got my secondary color from this. So that's, I'm going to use a lot of that... I'm going to probably use a little bit of this next one ... now with this concept stage, man, you end up changing it so much. So we're not going to get too official with... like, the color police aren't going to come and get you... you're allowed to do whatever you like... but I felt like those kind of went together. There's a couple of different shades in there, can you see, lighter, darker... you can kind of see it up here. I'm finding one that I like... something like that... and then I wanted another color, an accent color. It's really common to have a primary, secondary, and an accent color... so the accent color often can be very loud or distinct... because it's a special little color that you use every now and again. So I just went like this, I went through this and found something... that I liked with it all, and I ended up... with something pinky, rougey... reddy, mandariney... something like that. You can end up getting it close, with down here... and then you can move this around... depending on how, like saturated it is, how dark it is, how bright it is... probably... something in there... we can change this later on, we're at just concept stage. Now often, when you get to this sort of stage... you need some variations in those colors... I'm moving it out of here, and... actually, I'm going to cut it and move it into my Desktop Hi-Fi. I'm not sure why these are there... who remembers the shortcut to turn the columns off? 'Ctrl G' on a Mac, and I can't remember, on a PC... hang on, please hold, there it is, 'Ctrl-Shift-4'... never to be remembered, anyway. So I'm going to paste this in here... and I'm going to just have it up here... and it'd be really common to do this. I've got these ones, I'm going to go... all of these three, slightly darker version. So you are going to be moved down a bit... I want to keep it in the same kind of zone. So what you might do is switch it to Hue Saturation Brightness... and Hue changes the color, Saturation, how saturated it is... and there's brightness... you can kind of move up and down. I'm using my arrow key to go up and down... the old 'Shift', goes in big chunks. So there's, no-- again, you know it shouldn't go up like 10% or 2, or-- We're going to end up having to play with this in the mock-up... and adjusting it as we go, depending on its use cases... and we'll end up with kind of just... we don't want to have a million different colors... but let's start with some we can work through. So slightly darker version... and same with you... clicking on 'B', holding 'Shift', pressing down arrow somewhere in there. I'm going to do the same thing for our lighter ones... and I'm going to say, you, want a lighter one now. Do I want brightness just up? Yes, and probably a little bit richer as well... so more saturation, kind of like this way. So up is straight up, whiter... whereas I want it kind of up a little bit, a little bit this way... same with this one. I want it to be a little bit brighter, it's pretty close to brightness now. Does it need to be richer? Probably not, I like it there... probably, actually, back a little bit this way... somewhere in there. All right, I guess what I'm trying to emphasize here is... there is science to color, there's like, you know... there's the color wheel, and you can pick particular colors... and contrast and analogous... and sometimes though there is a little bit of just like... I'm a creative person doing creative stuff with my colors. Also, what we're going to do is... let's look at doing black and white. So with white, white's an easy one, you don't need to mix it up... I tend to not use a full white, I use a little bit of an off-white... just a teeny tiny off... I find it's, I can use it for like a panel... let's say that we've got a big white app, and it's white... I'll often use this white kind of off-white thing. If I bring it to the front, square brackets... it's probably not enough, just a teeny tiny bit more. So on its own it looks like near enough white... but here I'm going to use this off-white kind of, for interface stuff... things that are, kind of need to be white... but when we add things like a Drop Shadow... they kind of work later on. How do we do a Drop Shadow? It's too soon, too soon for effects. Now let me look at my list, oh yeah, we get into effects soon... so that's going to be good. Now when I get up to say a black, so maybe I'm going to have five... five is a good kind of staging. So I'm going to have one, two, three, four... remember, 'Command D', 'Ctrl D' on a PC... black, I'm not going to have full on black... I'm going to have what's called a rich black. So I want it to be a tiny bit green... because I'm going to use a lot of this green in places... and I don't want just a flat black, I want to get into the greens... and I want to-- actually, let's get that first color. So let's grab my Eyedropper tool, grab you... we're in the same hue, but I'm going to bring it down and over here... can you see, it's pretty much black... but there's a hint of green in there, just a teeny tiniest bit... that's what I like to do. Same with you, I'm going to go Eyedropper tool... but I'm going to use my Saturation, and go upper chunk... oh, see, up and over... because I don't want it to be too green... I want to be lighter, and have a hint of green, but not too much. Same, again with you... up and over... we're getting there, still a hint of green in there... but not too much. If you're a color theorist... or a way better designer than I am, you're totally allowed to disagree with me. When I get closer and closer to white... having a little bit of green in there, just looks a bit weird. So I'm going to get basically nothing towards the end there... but in this darker parts, these parts over here... I do like them to be darker, what did I do? I think I accidentally clicked on the background... 'I' for the Eyedropper, you... I'm going to go somewhere in here, not too green. All right, those are my colors... you can go the other way, we've gone green... if you're going for a warmer group of colors you can do the same thing... like have a black, that is just in the kind of like... red and warm spaces... and in this case it's probably way too rich. So I'm going to bring it back over here... so it's still kind of warm, chocolatey... but it's kind of black as well. Now I'm saying that, now that I saw that in contrast... I think these are all too green. So give me a second, I'll fast forward it... there we go, I feel like they're a dark, kind of a cool grays... that's what I'm doing. All right, that's my final decision for at least this first concept... it's a good range of colors, that I can start picking for my UI. Now if you do have like a corporate color you have to stick to... but you've only got like a primary color in the logo, maybe two of them... and you need some other bits... I find Adobe, or color.adobe.com... they do change this around again... so have a look around, try and find the color wheel. What you can do is you can pick one... I'm picking the one that has a little arrow, it's my base color... and I'm going to put in that green... I know, the Fuchsia... and what you can do is you can say... actually, I want to find complementary colors to that, wow. The color wheel is not always right, it's technically complementary... but hey, it's not doing it for me. I find Split Complementary a really good one... oh, there's my greenish, I'm not sure about these guys... but it's a way of kind of maybe being a little bit more scientific... Double Split Complimentary, we got Triad, Square, Compound. You might just find yourself exploring colors... that you might not have before... and you can find some of those secondary and accent colors... that you might be needing for your UI... can't all be one color unless you want it to be. All right, that is it for this one... we've got a color palette, let's move on. 37. How to make gradients in Figma: Hi everyone, I'm gonna show you how to make gradients. In Figma, we're going to do nice, subtle gradients, in my opinion. We're gonna build a time machine, go back in time to the '80s and make this gradient, and then we'll make round ones that are really, really bad. I'll also show you how to change the background color. You're like the background's dark. How do you do that? Alright, let's jump in gradient time. Okay? To make a gradient, draw a rectangle. I'm gonna do it on my mobile Hi fi product details page 'cause I need it for later. Okay, And I'm going to drag out a rectangle any old size, and to change it to have a gradient from a fill, click on this part. Okay? Actually click on the little square there and go from solid to either one of these. Everyone, just a quick little update. The UI has changed a tiny bit. So I've got my rectangle selected. I still click on this little cube, but instead of the drop down like I just showed you, they've kind of pulled the dropdown out and become solid hav gradient image video. Okay, they're all just down there as icons. And what they've done is they've grouped all the ingredient ones together. So if I click on Ingredient Okay, you have to have the object selected. You can see I got this new kind of like feature at the top. And now within here there's linear radio, Angular, okay. Which I'm going to cover in the course. But yeah, they just changed it a little bit. I knew you'd find it, but I'm here doing updates and I figured I'd do it. All right on with the video. Okay, a linear is going to be that radio is a round one, angular. I don't use any of them except for linear or radial. We're going to use linear in this case. Let's talk about how to adjust it. You click on either one of these, okay? To adjust the beginning or the end, and drag this around, drag the hue slider, find something you like, Click on this side. This one by default is a color, but the transparency is down at zero, okay? Can you see the difference? Okay, This one can be see through. I don't want the transparency all the way up. Click on it and I can drag it around and pick the world's worst gradient. Is the world's worst. Actually, I've done worse, better. Anyway. That's it. You can adjust it by dragging these points. Okay, the beginning and end, depending on what kind of gradient in the direction you want. Saying with radial, grab this, you can have your beginning and end point and see that dot there. It doesn't make a lot of difference when you are doing the linear one. But the radial one, you can make it circular. Look at that circle gradient and maybe make it nice and big so that it's circular, more wafty. Anyway, that's how to make a gradient. To carry on with this course though, I want to make a gradient based on, yeah, some of my color palettes that I had before. If you just came for gradients, that's enough. If you want to carry on with the course, I'm going to show a few little extra bits. Note as well, you can add a gradient to rectangles and to our actual. Let's come out of that. Let's cook on home page. Let's say you want a background ingredient in your frame. You don't have to draw a rectangle and put it at the back. You can actually, I will do it to this one because it's already got something in it. Watch this. If I click the background details, even though it's above rectangle, watch this. I can change the fill to linear and it's still behind it. Okay. In this case I'm going to want to like I'm going to use my interface color. Remember that white or off white I made? Okay, The top here, it's full white. It might go to something like this. And down the bottom transparency up, I'm going to pick something that's just a little bit more so it's not good. Okay, when you are dealing with light colored backgrounds, you can change the background of the actual application. In Figma. Figma, you can just have nothing selected. Click off in the background, you can see the background here. It won't change anything to do with your mock up. Okay, But it's just like a way of going. Okay. I want this to be darker so I can see the contrast and here, but it does nothing to the kind of presentation. You won't see the background. We yeah, there's nothing on this page. Here's my other page. There it is there. That background color is just for your own viewing pleasure. What I'm going to do now is I'm going to bring in my color palette. What did I do with it? I did it on the desktop because I said, we're going to work on desktop, change my mind, we're going to copy this. And I'm going to bring it over to, actually going to cut it and bring it over to my mobile Hi fi A zoom out. I'm going to paste it up here and I'm going to put it up there. Now the problem with it up here, eight, it's too big, It's nice and small. It is just sitting in the root directory. Okay, Ruining my lovely layers panel. So what I'm going to do with them all selected, right, Click any of them and say frame that selection. And now they're all just tidy. They're in there still. But now they're all nice and tidy. I'm going to call this one color pellet. Is that color pellet? I think there's too many else. Ah, I don't care enough. So yes, there is, my color pallet and I'm going to pick a gradient probably based on some of this. I have no idea how this is going to go, let's ever go at it. So let's go in here. It'll show you how I can go. This color I want to get from there. Then this color, I want to get from the eye dropper tool. From there. It's horrible. Horrible. Yeah, it gets muddy in the middle of there. A okay. Let's try one more. I'm okay with that. What I'm probably going to do is probably grab that and go. It's there, There's hints of it, but it's not there. And I'm going to add this to my color space. I duplicated it. I want it to be the same size as this. What is it? 52 by 52. You can manually type these things in. 52 by 52, zoom in. I'm going to use that my gradient. I might create a couple more gradients that I'll use for buttons and stuff, but I don't know. I feel like gradients. It might be coming out of me put gradients in everything for the last ten years. The other thing you can do is if you're using something like I showed you that and you might be like, oh, I love wow. Who uses that? Anyway, let's find one that has three colors that are good. Okay, the '80s wants to know where its gradient is. Here it is, 98, that crossover. Maybe you can copy and paste these, and I want to show you how you add more than one color. Let's say that you do love that. Okay, and I'm going to use one more gradient. I feel like these need to be separated. I'm, I'm going to go linear. I'm going to drag it back to something normal as in just straight up and down. What I want to do at the top here is just paste in my hex code. Okay, in there there's that first one. I'm going to put the end one in. And then you're going to ask, how do I put a third one in? Oh, good. Glad you asked. Okay, click this one here, paste it into X then. Just did it for us, but it gets a bit muddy in here. The designer has gone and picked a nice intermediatory color. All you need to do is just click once. You can have as many of these points as you like. I'm going to have three. There it is. But you can add more. Okay, up to you. So that is gradients. That is enough. I will see you in the next video. 38. How to create & use Color Styles in Figma: Hi everyone, this video we're going to look at Color Styles. Color Styles is a way of saving your colors to reuse... we can, over here you can see, we can give them cool names... and it means that later on if I want to update it... I can go through, update this style... and you can see, all the uses of it have been updated... plus we can share it with other projects, and other team members... so we've all got consistent colors throughout our project... let me jump in now and show you how to make them. All right, let's look at creating our first style... styles are great because-- at the moment I'm just using... the Eyedropper tool, I'm like Eyedropper tool, 'I' on the keyboard... and I'm picking colors, that's great... but this thing here, you drag this around to every document... it's a bit of a pain, and you can get away with that for quite a long time... but there's going to be a time where you're like... actually, I just need them in a specific spot, my styles... and I want to be able to share these styles... both with myself and other documents... and share them with other people in the team... and when I update the style, all the uses of it... throughout, all my documents change, that's the handy thing. So you understand what a style is, how to make it? So what we're going to do is we're going to say... you are going to be a style, and you do it, see this, like four dots here... that's the little bit, everyone has a style. So we can make a Stroke Style, we'll do later in the course... Effects Styles, there's Text Styles, it's this four little squares... so you click on that, and you hit '+'. Say I want to add a new color style to my group... you might have some styles down here that came as defaults from Figma... but ignore those for the moment... we're going to do styles for this document. So when it comes to naming, this... actually, what I'm going to do for this one, you wait there. All right, I've decided this is my primary color, and that's my secondary. I'm going to use this a lot more. So with this one selected I'm going to go to my four dots... and I'm going to go '+', and in terms of the naming... this is my primary color... you know, as a freelancer you work on lots of different projects... I'll put the initials of the company... just, you end up having like way too many primaries. If you are working in a company... working specifically internally in a company... you might only need to call it primary... because, where you work-- so we've got this... and then when it comes to the naming conventions... there's a couple of different ways. I'm just going to go 1, 2, 3, for the different primary colors... all the different kind of tones for it... could be A, B, C, doesn't really matter... there are some kind of general kind of industry standards... but it doesn't really change anything... it's just something personal, so 1, 2, 3 works really well... Other people use percentages, so they'll use a kind of fixed color... and instead of like mixing new colors, kind of what I did... they'll just knock it back, they'll just say the tone is like... this first one is like 50% of the original color, you'll see that quite a bit... you'll see 10, 30, 70, you know what percentages are. The other way to do it is a bit more... it kind of pulls from CSS, which pulls from old Lino Type kind of fonts. So basically people use hundreds, so that is... that would be 100% this color is 1000... a teeny tiny version of this color... like the lowest it can go is 100, it's a bit weird... I know, it's just really common, you'll see it... you'll see it mainly in fonts, have you come across that... especially with web design, the Bold won't be called Bold... it'll be called, like 700, that's the code version for Bold. So we can do that for colors as well... let's say, if we were doing this, I'd call this maybe 100... I call that one, maybe I call that 300... giving myself some room to go a little bit lighter... at 200 and 100 later on, if I need to. So that's really common as well... but let's just do 1, 2, 3... so I'm going to copy you, save it, you, you... plus you, and 2, very exciting. I'm going to speed this up, and I will see you in a sec. If you accidentally hit the button... it's not because-- this one here needs to be called secondary... how to edit your style? So once it's made and you need to change it... either the color or the name... you can-- you can't right click it here... because I just tried, click it once, and down here... you can right click it and go to 'Edit', 'Style'. Yours is probably set like that... with some, maybe some other ones in there.... from some other document Figma gave you... but here you can right click it and say 'Edit', 'Styles'... and then go into here, and this is going to be my 'Secondary'. You can adjust the color here as well... but I'm just adjusting the name... give it a description as well, you might be the first person. Actually, I like, big design systems might give descriptions to colors... to let people know what and where to use them. I'm going to keep going through this, we'll go back to fast forward mode. We're getting to the grays, it would be very hard now... to do 1, 2, 3, 4, 5, nothing wrong with it... but I feel like, even just looking at these colors... I'm going to probably need another one in here... because it's too big a gap in here. There's going to be some sort of user interface thing... that I'm going to need to have something in between. So I'm going to leave myself some room to move... I'm going to mix up my naming. So for the grays I'm going to use that kind of 100s naming... so I'm going to start here, and I'm going to say, you are "Gray'... and this one's going to be my '100'... and what I'll do is, this next one, I won't call it 200... I'll give myself kind of space in between to say, you are-- so this one is 300, just in case later on... I can squeeze, I can say, oh man, I really need a 200... and it's not going to mess up my numbering... I can just put a 200 in here and go on my merry way. So let's carry on. I'm back, I forgot gradients... so this one here, you can apply the same sort of way... so you can make it a style... so this one here, I'm going to say, you are a Style... and this one's going to be called 'SH Gradient'... and this is going to be A 1, let's do '1'... and something slightly different... is we-- I've made that one just for fun... so we've got our styles, it'll appear in our styles. The one thing it won't appear in is... if I go, you, and I say, you, and remember, down here, local colors... it doesn't appear down here, it might do later on... but at the moment you have to go the official way... which is good, there you go. I'm going to lock it into my SH Gradient... oh, another bonus thing for the people that hung around... is you can drag these things... if you click off in no man's land, you can say... actually, I want these ones to be up here... does nothing except gets your kind of like Feng Shui all nice. If you get them, you add one later on, you're like... actually I use that all the time... so it's going there, amongst the colors instead of the grays. All right, thanks for hanging around to the end... thanks, brain, for reminding me about gradients before I moved on. All right now, on to the next video. 39. Class Project - Colors & Columns: All right, class project time... we're going to combine two of them here... mainly because columns was boring... and I didn't want to set it as its own class project. So I've tied it in with colors... we're going to do both of these, the two Cs, the boring C... boring columns, and exciting colors. Columns is, I want you to create your... you probably haven't yet, is we've got our Lo-Fi wireframes... create the two pages for our Hi-Fi for mobile and desktop... and in those I want you to add the columns. So remember, 12 for desktop, 6 for mobile... and each of those new pages needs to have four frames. So this is what I mean, we'll create... you've only got this page at the moment, and this page... create these two, name them, and make sure that there are... 'Shift 1'... see everything on your page, there's these four frames... 1, 2, 3, 4, same with desktop... make sure there are columns. More exciting? Pick colors, don't be-- this can be a bit freaky... depending on how experienced you are as a designer. Don't worry about it, we can adjust these later on, they can be terrible... we will start sharing stuff with the group a little bit later on... and you'll be able to get advice from people, which would be great... like, I'm never a good color picker... like, I don't know, that looks all right. So pick your own colors, do the same sort of thing. So draw like a little grid, like this... pick out primary, secondary, and accent color, plus all the grays... and where do you get these colors from? You can get them from your Mood Board... you might find some colors in there that you like... you want to appropriate or steal... or you might go to one of those color inspiration sites... that we looked at before, and kind of get your colors from there. Do the grid and then create styles... because what I want you to do when you're finished... is to hand up-- is to send me a screenshot... of all the named files here, or the named colors... just to show that you can do it, and you've done it. Don't worry about sending me a screenshot of the columns... boring old columns, I'll trust that you've done them... so that's the class project. One thing I want to show you while we're in here... is, I kind of made a mistake earlier in the course, well, not a mistake... just, I want to show you something. So the columns here, on my mobile... is, I didn't put any padding on the outside... I like having padding on the outside, you don't have to have it... but let's do this one first. So I'm going to say, let's have a little looky-look at the columns... and I'm going to click on them here... is we've done a gutter of 16 in between the columns... but I actually want a margin of 16 as well from either side... so that when I am drawing things like this... we're actually kind of like lining up... and there is, it depends on your design... if you don't want to go straight to the edges here... you cannot have this margin, but I need it, I like it. So I'm going to copy and paste it across all of them. Who remembers how, it's a weird thing, right? Click on the name, go over here, click in this random area, not there... not there, there, copy it, I'm going to say, you... I'm holding 'Shift', clicking you, and you are going to go and just paste... oh, now I've got two of them... didn't realize that happened. So now I've got two of them, on each of them, great, Dan. Which one do I delete? Is it the bottom one? It is, there you go. All right, we learned something... you can place more than one set of grids. I know that when I'm doing horizontal and vertical... later on, when you're a bit more advanced... you might start doing grids, columns... you can do, I want you to do rows... you can start doing rows as well as columns... gets a bit hardcore fancy... there. We've got our columns, so do that, columns on this, columns on desktop... make up some colors... we can change it later on, and because... remember, it's a style, your color style, we can adjust it easily later on. Make some tweaks based on client feedback... and maybe student feedback, when we start sharing it all together. All right, that is it, class project over, go do it... I will see you in the next video, in a minute. 40. Font on Desktop vs Browser Figma: Hi everyone, this is a special little video... for those of you who have decided to use Figma... on the browser, rather than the desktop. I said there's not many differences, this is one of them... even if you are a desktop only version user... there's loads of times where you end up jumping in the browser... and fonts is going to be one of the things that are a little strange. What I mean by that is, let me show you... I've got the desktop version open on my computer... and I've got the browser version, they look very similar... except for, there's this little house button... remember that earlier in the video... where I jumped back in, it was this video, that I realized... ah, there's a little house here, and it's not on the browser version... remember, it's over there, anyway. So the other difference is that fonts that are-- when I'm working in the browser, let me explain it better... and I go, my Type Tool, and I start typing... what you'll notice is that the fonts in the browser version... is less than the amount that you have on your desktop version. So to fix that problem, to make sure that... all the fonts on your system end up inside the browser here... all you need to do is go to Figma, the website... and do a search for, at the moment it's in Downloads, this one here... but have a look for the Font Installer... and just install the version for your operating system... and it will then suck up all of your fonts from your desktop... or your computer, or laptop... and put them into the browser version, and all will be well. All right, that's it, short video... I'll see you in the next one. 41. What fonts can I use plus font pairing in Figma: Hi ya, in this video we're going to look at... what fonts am I allowed to use in Figma... which ones are really common to use... and then we're going to look at a bit of font pairing... kind of sticking free examples together, that look really nice, here we go. That's a good pairing there, just to help you out... if you are unsure about what fonts to pick, and which ones match... all right, let's jump in. So what fonts can I use? You can use kind of anything these days... you want to make sure that there is-- whatever font you use, there's a web version of it. Most commonly people will just use Google Fonts... Google Fonts or fonts.Google.com... just is full of free fonts that we can use commercially... and they're available to be used online, and inside of apps. So this is a great place to kind of get fonts. Why can't you just use all the fonts on your machine? It's mainly because you need to make sure that they are available... that's a different kind of font that ends up inside of apps and websites. So let's say there's a font that I bought the other day... so let's type in "Scott"... I'm going to use capitals, "Scott Headphones"... it's this one here, Geograph, I bought it, it's great, I love it... and when I was buying it though, it was here... I was like, "Great, I love this font"... I was using it for t-shirt design for one of my last courses... and I went, "All right, I'm going to buy this one because it's a paid font." Don't be afraid to pay for fonts, this one here... and I decided that I wanted to use it for desktop version... and I just bought, instead of the whole thing for 300... I just bought the sizes that I want only for desktop... but if I needed to use this for an app or for a website... I need to pay for a different license. So you can-- it will depend on kind of how many page views... so know that you can actually put a lot of fonts online... but that is a bit of a hurdle... a lot of people avoid by using something like Google Fonts... because we don't have to pay for these. Google have really kind of, I don't know... beautified the web with their fonts... so you can go through and pick fonts from here and download them. Let's say that, like I've already had a little look through... how I got my fonts, you know... there was one called Crimson Text that I liked... I wanted a Serifed font along with a matching Sans Serif font... so I like this one, I was like, "Great." It's cool, you can type in here... so you can put in my marketing message, "Marketing Message"... so you can kind of check what it looks like... and then you can either download parts of them... or download the whole family. What's nice about this is, you download them... you put them somewhere, open them up, and install them... you just double click on them, they install, pretty easy. What's really nice about that though is that... your developer or whoever's making your website... will be able to have access to the same fonts... they'll install them slightly different... they'll probably use a content something, network... something called a CDN, and they... they have different ways of making it happen... but it's the same font, which is nice... so, very common to use Google Fonts. There's a lot of alternatives for Google Fonts... if you've got an Adobe License, there's Adobe Fonts... you can use those, kind of free as part of your license... you can go to other sites where you buy them... like this is just an independent foundry that I bought stuff from... beautiful stuff here, but-- this one's called Klim... but you can also go to fonts.com or Envato... we looked at Envato Elements earlier? They have lots of cool fonts in there, Creative Market... there's a million places you can buy fonts... but just know that you might have to buy a specific license... and there are just some fonts that nobody's bothered... to make a web version of it yet, so don't get yourself into trouble. Another little bit of a tip is, font pairing... what I find is, like let's say that you do decide that you like... this semi-bold version, look, 600, there you go... there's that kind of like weird numbering again in the 100s, that we did for color... and let's say you do like the 600 version... you select the style, actually, let's not do it that way... let's have a look down the bottom here... what you'll see is, often they'll have popular pairings... with Crimson Text, there you go. So Montserrat, is a really common one... you're like, "Yeah, that's a good combo"... or maybe Open Sans, these are all other fonts... that you can download from Google Fonts. Now this is not like a typography class, but a nice simple kind of... quite a common way of working... is that if you've picked a font that has a Serif for your... like say, hero text, or your kind of heading text... see these little serifs, these little feet on it... it'd be common to use a Sans Serif as the body copy and vice versa... not, it's not the 100% rule, it's just a really common rule. Now if you are new to the font game or design game... you might find something, this term, quite useful, font pairings. So if we're going to use Google Fonts or Adobe Fonts... or whatever it is, the word font pairings is useful... and the results here, let's have a look. I'm going to open up a few of these. Anyway, a bunch of them, and what you'll see is... there is font pairing, somebody else before you... has gone and decided to pair stuff up... this, there we go, there's some examples, finally... Abril with Lato, what do you think? There you go, not, gone that one... this is pretty cool, Art Deco going on. Yeah, so lots of examples of Google Fonts that you can-- oh, so many pop-ups, anyway, let's have a look... some more examples, Montserrat Oswald... you don't have to agree, I don't like that pairing... let's have a look, yeah... but these are all downloadable from Google Fonts... and you might just see, like, ah... man, that's it, April Fat Face, Abril Fatface with Roboto... is where I'm going, and just have a little work through all the different ones. You can go into the Figma community... there is some font pairing files in there as well... but it can just be a little bit of a leg up... when you are trying to pick fonts for an app or a website... a bit of font pairing. So that's it for what fonts can I use in my Figma files... let's get on to the next video. 42. What common font sizes should I choose in web design: Hi everyone, in this video we're going to talk about sizing fonts in Figma. The short answer is, you can pick any old size you like... but there are some kind of like defaults or common things... that, I don't know, I've been agreed upon... amongst a lot of the web community... but you can totally break the rules... you can use any size you like, but I'll show you the defaults... and then we'll do some basic stuff... and mock up some of the kind of feature cards... that we're going to use in this course... all right, let's jump in. So sizes for text, you can pick any size you like... there are some general rules that are helpful when you're new... I'm going to be working on my Home page... I'm going to clear off any junk that I had from the previous tutorials... and we're going to go to, hold down the 'Shift' key, and go 'Shift 0'... you can go to Shift, remember 1... it shows you the whole page. 'Shift 2' is, makes the thing you've got selected full screen... but that's too close. Mine's at 133... I want it to be at Shift 0, which is 100%... it's a better way to be deciding on fonts. Again, you need to be testing on your device... especially if you're going out to like a smart watch... or maybe a television, or something else... but the defaults, yeah, let's add our main marketing message... on this Home page. I'm going to grab my 'T' on my keyboard, for the Type tool, click once... I'm going to call this one "The music of our people"... and I'm going to pick my font. I'm using that Crimson, Crimson Pro, that's what I'm using... I liked it, I saw an example, there was an italics... and how big should I make it? So what we're going to do is... I'll show you the kind of basic one... so I'm going to start, you over there... and I'm going to make it white, so I can see it out here. The main stack is this, let's put in some sample text, put... "Heading 1- Sample"... and for me... I'm going to work through... the biggest size to ever roam the earth, is about 72... never use it, but it's... seems to be part of everybody's kind of like sample list. Then I'm going to come down one... and I'm going to change it down to the next jump, and it's 48... next jump... 32... 24... 18... and then often you'll switch to your Body copy for 16. So that's a really kind of normal sizing scale... you can have all sorts in between, but that'd be really common for... just lots of sites will have this kind of, like, it's a hierarchy, right? So you might have, Heading 1, Heading 2... often that's called Heading 0, because nobody uses it, because it's so big. So Heading 1, 2, 3... you can have a 5... we've just got these ones, that's kind of a really typical one. Let's spread them out nicely, so over here, our line... we are going to use the-- here, we'll distribute vertically spacing, there we go... oh, there... and you can use that for your spacing. So if you're like, "I'm not sure what that should be"... "Music for our people", actually, I'll bin that, and I'll say... I'm going to do a Heading, so I'm going to bring this one in... I'm going to make it, actually, one of my colors. So I'm going to use my 'Secondary 3'... nice and dark contrast to the background... and I'm going to use that marketing message... "The music of our people." You're going to have to come up with your own marketing message... for your persona or your client... I'm going to put a 'Return' in there, and I'm going to make it centered... and then I'm going to grab my selection to click off... put it in the middle, and that's going to work for me... that is my main marketing message... so you get to be Heading 1, because you're really important. Depending on how you're going to use the font... you might have the exact same group as well, but it's not italic... but it is in, maybe semi bold, or... actually, that's too big for me... Regular, Medium... there might be another use case for your headings... this might be like the colloquial marketing version... and this might be more information. When you get down to your Body copy, it is normally always 16. Anything lower than that runs into trouble on both apps and websites... where being too small, and accessibility is an issue... where people can read it, especially Google websites... they don't like it when you put teeny tiny fonts everywhere... it goes, "Hey, you've broken some rules"... and your search rankings might be affected, anyway. So my matching font is called Dosis, never used it before, look, cool. I saw it in an example, and I'm going to use it in Regular, and 16... that is going to be my Paragraph. So instead of Heading 4, it's going to be my... either Body Copy... or you might call it Paragraph. What you'll also probably notice on the lines... is they'll call it H 1 or H O, H 0, sorry... Heading 1... Heading 2. Your web designer brain might be like, "I totally know what that is"... if you don't, your web designer and web developer's brain will know what it is... it's just a shorthand version of it... and when it gets to here, sometimes there's a P1 and a P2. If you've got a second kind of paragraph... you might have one that needs to be, you know, it's a special case... it goes on something like a mixed model background... and that light version is too light... it might need to be this heavier version. So those are kind of basic sample sizes... you can leave it there, I'm going to move that over there... and look at an example of kind of working. I'm going to get rid of this background... I'm going to go back to-- I'm just going to have no Fill... oh, you need a Fill, even if it's just white. I'm going to start building some cards... that we're going to build later on with our features... and I want to draw some boxes... but I want to snap it to our columns. This is a bit of a production thing, like-- we've learned all we're going to learn about sizes... again there's no reason why you can't have 35. The reason some of these numbers exist... there's a couple of different rules, but like, let's say that, 16... 16 is the default on the web, something called ems... and one em is the default size for all fonts online... if you don't change it, so we use that as a base. We talked about that 8 pixel grid earlier on... 8 is divisible by 16, so that is handy as well. There's things to do with line heights and grids, and there's... there's a, you can go pretty deep on it... but that's a good starting sample... actually, give me a sec, I'll write them here... so that you can take a screenshot, or have it for yourself. All right, so the sizes are there... also, don't hold me to this, like this is just general rules... you can break them all you like. All right, let's go and do the thing... I'm going to draw something over here... and what I want it to do is, I want to snap to the columns. I'm going to create what's called a card... it's our little feature reusable box... we're going to have three of them... you kind of saw them at the beginning there. So what I'm going to do is click on this... turn the Eyeball on my grid... there it is there... and I'm going to draw, 'R' for the Rectangle tool... and I'm going to draw something that looks like that. Color wise, I'm going to pick one of my styles... I'm going to go to the secondary color... I'm going to go to my Circle tool... Circle tool is the O key, because it looks like a circle, if you want a shortcut. I'm going to drag it out, holding 'Shift'... I'm going to use these as images later on... I've got plans to use them for images. In terms of consistency, I-- you don't have to follow all the grids... but it's going to be handy, so I'm going to do that... and my plan is to use a couple of-- and my plan is to use them alternately, so the image is going to be in here... the feature text is going to be this way... I want to flip this one over... so we're going to use our super amazing shortcut... 'Command /', or 'Ctrl /', and we're going to go-- I wonder if there's a flip, not a slip, a flip... there is, Flip Horizontal, there you go... I'm going to do the same thing. So this is my kind of plan for the moment... and I'm going to show you... just kind of a use case for the text... and we need to actually make something in this course. There's a lot of theory, I want to actually do something. So 'Type' tool, click once... and I'm going to have, like my features are going to be-- we're going to have three of them. One of my headings for it is, probably "Recycled Plastics"... is going to be one of the features that my product has, plastics... select it all, I'm going to go down to my-- what headings do we have, 32? Do I jump down to 24? 24 is going to work for me... because it fits... and then my Body copy, I'm going to click and drag... because I want it to kind of break across here. Remember, clicking once gives you that forever expanding box... clicking and dragging is going to give you a fixed width. So I am going to go over to my-- I wish I had a Style... we're going to do that in a second. So I'm going to go, manually changed it to 'Dosis'... and I'm going to be using 16. I'm going to start typing... so I'll do this for the moment... here we go, cool. Remember, back to 0, back to 100%, so 'Shift 0'... just to kind of see what-- oh, that didn't work... if you hit Shift 0 while you're in the Type tool... and right snap, who knew? 'Shift 0'... yeah, it's looking good... it's hard without proper text in there... but that's kind of something that I'm looking for... probably some spacing... probably some rounded corners... maybe, maybe that's what I'm doing. Line height... probably needs to come out a little bit... in my opinion... and I'm going to make sure the copywriter only writes one sentence... thank you, very much. All right, and that's my plan for one, two... oh, three of these. They didn't line up, did it? It's pretty good though, can you see the red lines... I had it kind of a bit over here, and instantly I was like, wrong blacks. You can see there, oh, look at that, lined up. It's not perfect yet, but I guess that we need to start making some things... I want to show you kind of an instance of... that heading versus that heading. Is it too close? It could be... do I jump up to the 32? Maybe I need a 28... because this particular font-- some fonts look bigger than other ones, anyway. Don't spend too long on your actual laptop... unless it's a website, check on your phone... like, we need to do-- go to that Figma mirror... and actually just check it, is it readable... does this need to be actually Regular, or does it need to be Medium? All right, that's it, font size is over... I'll see you in the next video. 43. How to make Character Styles in Figma: Hi everyone. In this video, we're going to look at textiles. We're going to make all these good-looking ones. They're useful because we can be consistent. We can go in here and make quick updates and really polish their design. Let's get into it. To create a style, it's the exact same process as doing colors, except the fonts. You don't have to have this fancy. You don't have them listed out this way. You can just use this font here. I could say you, my friend, are going to be my heading style one. I'm going to go over to text. Remember those four little dots when we were doing color? It's the same here. Except this style is going to inform our font or our text. We're going hit to this little Plus button like before, and you can call it Heading 1, or I'm just going to call H1. Whatever you want to call it. I'm going to call mine heading 1. Great. I can go over here and say actually, I need you to be now heading, it's the same place, but down the bottom here like we had colors. These are there. Look at that. I've applied to this one. This one is the same thing. What you'll notice is that the font will come, but the color won't. Let's type something else. I'm going to go you type, and I'm going to say, let's say this is the wrong font. I'm going to break it, and I'm going to say Roboto, and it is small 16. I'm going to break that and say you are just the color of bright yellow or whatever that color is. [inaudible] away and you're like, I need him to be my style. Awesome. I get to use my sweet style. I'm going to select the text. Where are my styles? Text. There it is. I'm going to say, "You, my friend, are down here." Notice that the text currently is lime. It's a yellowy greeny color. You'll notice it got the right size, got the right font. It's italicized, all the letter spacing, and kerning, and leading are all going to be part of the style. But you see the color wasn't. That's something that doesn't come along with the font style. One thing I quickly skipped over there is let's say that I do want to change this. What you'll notice is when it's a style, this kind of text box here gets really small. You're like, "I can do left align, right align. I can play around with some little parts of it, but I can't do a lot." I want to change this. Why is it stuck? You can break text. This header style, apply to it by clicking the little breaky link icon thing there, and all of this appears back on. Before, after, and it's detached from that style. I can go ahead and do anything I like to it. What I'm going to do, and I'll get you to do as well, is work through. I'm going to say that this one here is my text. It's going to be a style. I'm going to use heading zero and just keep adding it to them. Now, if I click on the background, can you see? These are more of my styles. Later on, I'm going to show you how to share all these styles with other members of your team, which makes them even more exciting. Now, work your way through. Actually, before we go through, one of the big pecks for styles that I just haven't told you about is the updating. These two are exactly the same except for the different colors. If I apply a style of heading one to them, nothing changes. Let's say that the client comes back and says, "Actually, Dan, we're not feeling the Crimson text. I have got a font for you. I'm going to send that through. Can you use that?" And you're like, "No problem. I can update it. Can't wait." With it selected, I'm going to go into here, and I'm not going to break the link here. What I want to do is have nothing selected. Go over here and say heading one needs to be updated and remember, I've applied it there and there. If I update this one, they should all update, and I can go into here and say, cool, check the email, pass out from shock, and it's Brush Script, and that beautiful design you've been working on has now been Brush Script. You might like Brush Script. I hate it so bad. But anyway, so that's how to update your textile. You can see if it's being used across a lot of different pages, different frames. It's all going to update. Really hard. Undo. Here we go. Keep working your way through, make a style for each of them, and I'm going to do this fast-forward mode. What I should really mention is I have picked two styles. I shouldn't. I should keep this class simple and just go like ignore that one. We're never going to use it. But you might have a marketing heading, and then an information heading, or there might be versions of your website that is back end, front end. You can have two kinds of heading. How do you split them up? It's up to you. I am going to have this as Alt H1 or heading one. Just so I know the difference between the two, and in my specifications, or my design spec, or my design system, I can explain to other designers when to use the italics, when to use this. Maybe this is a colloquial for quotes, or maybe jargon, all casual marketing messages. Whereas this is really for information headings for menus and things. I could explain that there, which one to use and where. I'm going to work my way through. I'll see you in a sec. I'm back. I've added them all. Two things I want to remind you. One is if I go into here and I'm like, "I want you to be one of the styles." You'll notice that in my styles they're not in alphabetical order. They're in the order that I made them. This is going, "What are you doing there? Why is one above zero?" We kind of did this before. Have nothing selected and go, alright zero is above one, and Alt one. I've got two heading ones. I had one other thing. Can't remember what it is. You wait there. I've sat here for five minutes. I can't figure it out. Let's just move on to the next video, being important. 44. Lorem ipsum & Placeholder text in Figma: Hi everyone, in this video we're going to... introduce some placeholder text... instead of using the word placeholder text, or xxx... which we learned earlier on. I'm going to share a website to get it from... and I'm going to show you a sweet plugin called Content Reel... and we will update our paragraph style, just because... all that and more, actually, no more, just that in this video, let's get started. So we need some placeholder text... because that, writing that, or writing... I think earlier on we did xxx, that's not going to fly... we're going to use something called Lorem Ipsum... some people don't like using it, that's fine. You saw at the beginning there, it just is Latin mixed up words... that kind of look like English... there is Lauren Ipsum for all different languages... but let's have a look, there's an easy way... well, easy way, this is like, I don't know... it's a right of passage to go to lipsum.com... full of ads, horribly designed, but I don't know, everybody uses it. So if you only see it just this once, know that... there you go, that is it, I need one paragraph, generate Lorem Ipsum... and you can copy this out and paste it into your document... and it just kind of holds the place, the placeholder, that's about it... until we get the text from the copywriter. It just means we're not, yeah, it's a little bit easier to design... and it gives us an idea of kind of... like line height and different words, and the font size... but, like a lot of things in Figma, there is a plugin for that. So I'm going to go back to my 'Home'... or, remember, go back to 'Files', however you get back here... find the 'Community' part, and we're going to go to 'Plugins'... and I want to search for "content reel", r-e-e-l. This one here is super awesome, we're going to use it for this... plus a lot of other things on the course. There might be a better one now... Google "best alternative for content reel"... or "best placeholder text plugin for Figma"... I'm going to install it, and-- plugins are so good, install real quickly, go to the tab, open the plugin... there it is there, Content Reel... and what I'm going to do is... I'm going to grab my Type Tool, 'T' key, drag this out... and actually turn on my... columns, there we go. So I'm going to grab my Type Tool... and I'm going to drag up a Type Box... that's kind of fitting within here... and with the cursor flashing I'm going to say, "Lorem Ipsum". You can kind of break it down, we'll look at some of these other ones later on... but I want Lorem Ipsum to go in, it's too big. Imagine if I had a shortcut to get it to-- to get it down to like body copy text. So I'm going to select it all, and I'm going to go over here and say... actually you, my friend, going to be paragraph... and I've also noticed here, is that my line spacing. So my line spacing for paragraph isn't good, it's really tight... and I like it better over here. So what I'm going to do is, I'm going to click on this... what is this set to? Set it to 115%, I don't like that weird number... but over here it is set to-- how do I go and update this one? Who remembers, it's a good test, pop quiz... you remember, have nothing selected... and there they all are here. I can go into this, what I'm going to do is... finish with you, Content Reel, thank you very much... that was the Lorem Ipsum thing, we're finished with him... so here we are, it remembered that from the last time I was working. So if you delete it all and kind of just click out, it'll go to Auto... Auto is quite handy, it's pretty good. You can force it by typing stuff in... but I'm just going to leave it at 100% or auto... actually, it's not 100%, it's a little bit bigger. So the default here is 20.2, and I like that better. The cool thing about it is, now if I apply it over here... and I say, you are going to be the style of paragraph... it's going to keep the white, but it's going to use that new line spacing. So if you get style set up... even though they feel a bit early for them... especially with body copy... it means that you can update things quickly... across a really large document. I'm going to go, you, my friends, are... paragraph, look at that. All right, that is Lorem Ipsum placeholder text in Figma for your mockups. Oh, one note that, if you are working, you're like... say your client is like my dad, love my dad... if I send him this though he would complain that it was broken... and you might-- I'll have to explain it to him in an email... that it's placeholder text, and it's, you know, it's mixed up Latin words... just to give the impression, because we don't have the text written yet... just, just so you know, it'll happen once to you... all right, next video. 45. Useful things to know about text in Figma: Hi everyone, in this video, I'm going to run through some slightly more advanced features for text, just the ones that I use a lot and I imagine you'll use. I'm not going to cover every single use case for fonts, but I'm going to show you where to find them. We're going to add links. I'm going to show you how to do things like strokethroughs, destroy the ticks. We're going to do proper paragraph spacing, letter spacing, plus some other ones. Let's go and jump in. The first one is making sure that you're aware, I've got a style applied to this I'm going to break it, is all or not all of it, but lots of good stuffs here in the advanced three little dots. We'll cover up bits and pieces of it, just the useful stuff. Main ones that I like to use is leading or the line height here, obviously we've looked at, and the other one is space between paragraphs. If I put a return between these two, I get, is it a widow? [inaudible] widow or an orphan. I'm going to open that up. [inaudible] turn there, but all I want to do is open up the spacing. Don't be one of those people that do that. It works, or do this seam less when you select the text, can you do that and make the font size smaller? You're laughing if you've done it. I'm going to select it all and I'm going to go to this one here, when I use quite a bit space between paragraphs, it would be very common to divide your font size in half. You don't have to. Whatever it is, divide it in half or at least [inaudible] some easily divisible by your font size makes it life easier later on when you're trying to line things up when you get at a bit more advanced. But anyway, mine height and this one space [inaudible], what do we call it? Call it space after, paragraph spacing, it's got the right name. Let's look at letter spacing, I'm going to say you guys goal later on to create a logo based on the fonts that you're using. We're going to do Scott Headphones. I'm going to pick a bold one, and with my Scott very often I will grab these two. Is it this one this one, well that too. Anyway, the space between letters often those two, and I'm going to drag them down. If it comes up mixed, it doesn't know what to do when you're dragging it. I'm going to delete that and then drag it this way. What a debacle, zero. These things happen to the best of us. This is what I want to do. I've selected them all, I got to back to zero and I'm just going to tidy this up. You might decide here, that is a big space on this font, I don't like it, so I'm going to say you too, I'm going to go smaller. Just this one smaller, it is that one. Cool. If I'm honest, I end up doing a lot more design work in Illustrator. I'm just copying and pasting it into here. I will show you Illustrator connections later on, but letter spacing, or tracking or kerning variations of a theme. I'm going to have Scott Headphones. You'll be doing your own one. We're going to make a little logo lockup up the top here. I might do this afterwards. This cuts to one of the other things I'm going to show in this video is sizing up. You are like, where is the size up. Remember the K tool or Scale or actually just do things where we don't actually want to hit any of those like 72, 48. We just want to make it bigger. I'm going to do that. This is going to be my logo for the moment. That will do walking title. Shift zero zoom 100 percent. It's big enough. It's not all lining up the way I like but, let's get on to the more advanced font stuff. The next one is selecting all of the same. Let's say I've got this thing, these three here don't have the style applied to them. What other side I think hitting three. I'm going to go through. It's like this first one, it might be causing lots of different frames. We've got them all pretty tightly here. I couldn't select all fills. We can stumble around in here and go to "Edit", "Select all text to fix", is it a shortcut? I think it is. With that selected "Command Forward Slash" or "Control Forward Slash" on a PC and type in "Select Same With Text Properties" there you go. It's gone through and selected them all and now I can say actually you're all Heading 3. Actually it's my Alt Heading 3 is going to break it, go back. Here's my "Alt Heading 3", here we go. You can work your way through and update things, change them. You don't have to change it to a style, but that little, select the same text properties is a handy thing. A newest thing for Figma is now we've got bullets and numbering. Not very exciting, are they? They are actually, really handy. But they're in there just so you know. Another useful thing I want to show you is, you might have a link in here. I'm going to select it all and [inaudible] up here, we'd place for. You can click on this and say when that is clicked, we're going to go to www. in this case is going to figma.com. We're going to style it with the traditional click me because I'm a link color, check out what that actually is, but I'm going to make it bold. Another shortcut that I'm throwing in as a bonus is, if you have anything selected, you can use some basic formatting, like "Command B" or "Control B" on a PC and I just makes it bold. Same with italics "Command I", if your Phone has an I, it doesn't have an italics. But if it did, "Command B", this one here go to "Regular" I selected "Command I", will go to italics. I'm saying command, [inaudible] So if you hearing command, think "Control" on a PC so "Command U", is underline strike-through "Command S" it doesn't. Strike through is in there under your advanced or is there, can't remember the shortcut for that is, is it "X" "Command X" nope, it closes. Those are some basic formatting. The link will work in your prototype so, I'm going to go plate and there you go. It's going to jump out to a website. It's jumped out here. It's asking you, would you like to leave to ensure again, it's going to do it, it's going to Figma. You get the idea for that one. What else? Last one is when you're outlining the font. Let's say that you are [inaudible] and you want to do something fancy with it. I'm going to duplicate it because I'm going to wreck this thing [inaudible]. Zoom in, "Shift 2" for my selection, zoom in on it and I'm going hit "Command Minus 1" to come back a little bit, always zooms in too much. Come on, Figma just zoom in enough but not too close so, that's "Command Minus", to zoom out a little bit or "Control Minus". This is editable text, what I can do say you want to do something special to it. Wreck it, take ownership of it we're going to customize this font. What we can do is we can outline the stroke. Basically now this is not a font. You can't edit the type, but they're editable shapes so I can double-click it, to go into editing mode or member with it selected, go to the fancy way, or the long way. I can go in here and say actually what I going do? I'm going to do is, select all these and I'm going to make it. What am I going to do? I'll try and grab all those. I had to zoom in to grab all of those. There's one of them, [inaudible] here you go. You have to zoom in to get a bit detailed. Scott Headphones, what am I doing? Wrecking that joint, that's what I'm doing. I can't even do it. That's what happens when you don't really plan the video very well. It's like a sound wave? I could see myself fixing this. Let's do one more. It's like a sonic sound waves look at that, beautiful. You can outline text, no longer editable, always make sure there is a backup. All that. I wrapped up, but I'm back now because I've got one other little tip. I was actually just using it as like I should show people that. I'm going to use this text over here, and with it selected, if you're not in this like very regimented size-wise [inaudible] at the playing around phase, you can select text and hold down "Command Shift" on a Mac, and that's "Control Shift" on a PC, and you are looking for the keyboard shortcut is, it's either the period or the greater than, less than I'm not sure. You're going to have to experiment. I don't know which one is which. But you can go up and down with text just by eyeball rather than using the numbers over here or trying to stick to some predefined number. That's handy and I'm using the one next to it. So the look for the period and the comma, or the greater than and less than on the keyboard. Down by the M key and hold down the Shift and Command key on a Mac. Well, the Shift and Control key on a PC. All right, that is going to be it. It's not every single feature in Figma for text, but it's the headlines in the stuff I think you're going to use the most, but be sure to play around with the rest of it. You might find stuff in it that you enjoy using. All right, onto the next video. 46. How fix missing fonts in Figma: Hi everyone, this video we are going to look at... what to do when you've got a missing font... you can see it here, question mark, with an A... or an A with a question mark here, what do you do? Well, basically you just click it and replace it... there's a teeny tiny bit more to it... it's a short video, stick around, hang out... and I'll show you all the different ways of replacing missing fonts. All right, replacing fonts that you don't have, there's a couple of ways... I was using this kit here, I wanted to use the fields... they've got some really cool, thank you, Machiel. I duplicated it, opened it up, and I was like, "Great"... and I went to copy out all the fields... and I liked the text that was in it as well, for my project... and there was a missing font. You can kind of see it up here in this original document... it doesn't really matter if it happens here... or let's say I copy it and I move it into my document... I paste it in, it will come along for the ride... it's like, "Hey, you're missing..." So what to do? The first thing to do is, just see if... if you like the font, this one's called Helvetica Now Display... you might go and download it, it might be a free font, that's what I did for these. I have this font on my machine now... because it was called Inter, and I liked it... it was a really nice, simple-- I'm clicking in, I'm breaking his style, and going, ah, 'Enter'... I just went and downloaded it, I can't remember where I got it from... it was free, it was like great... and then that little, this little thing went away, this one here... I didn't want to use, so I just left it... but let's use that as an example. Let's say that we do want this, you might check... you might actually have it on your machine... it might be called something else, so Helvetica... I don't have Helvetica now, but I've got Helvetica Bold, is that good enough? It's not the same but might be close enough. Let's say I don't want to do that... let's say that I want to switch it out for something... because I like the lock up of this, but I want to use my fonts. So you can either select the text here, and click it over here... and just change it... or there's a kind of a fancier way... at the top here, where you could say... "That is missing, go throughout the entire document and replace it with..." I'm using Crimson Pro, does Crimson Pro have a black? It does. This other one here, I'm going to use the Dosis... I'm using Regular for my body copy, hit 'Replace', look at that. So you can do it up here for kind of everything... and if I undo this one here... you can do it specifically for that particular font... here in the text, in this kind of like right panel here. All right, that is missing fonts... go and download them, if they are free, and you want to use them. Check that your machine has them... and they're not called something else... or switch them out using either the little icon up here... or in your little text, right hand panel thing. All right, that's missing fonts, I'll see you in the next video. 47. Class project 08 - Text: Hi everyone, it is class project time. We're going to kind of wrap up a lot of the text stuff we've been doing... and push your design that you're working on... the one that you got the brief earlier on. It's got your own name, your own object, and you're going to work on that one. So create a logo, it can be simple, just do something... like all I did for this course was... like stack different weighted fonts on top of each other... or something like that where it's just kind of separate weights. If you are keen, you can spend a lot longer on your logo, up to you... but I'm not expecting anything fancy. On the Home page I want you to add... your marketing message and placeholder body copy... and then kind of work through, finding a font. So we kind of did it in this class... so go off, look at Google Fonts, Adobe Fonts, whatever you want... find some good font pairings... and I want you to have, like this big marketing message, and this body copy. The marketing message, come up with, by yourself... mine is super cheese, look at that... "The music of our people"... so you, come up with your own one. If your, I don't know, if your product ends up being handbags... I don't know, you could borrow from some other company as well... we're just practicing here. So something actually in here, style it, get it nice... make it one of your headings... and in here I want you to install the plugin for content real... just to practice installing a plugin... and throw in some body copy, and kind of style it. I put mine on some background colors... we're going to probably throw an image in the background later on, but yeah. Once you've done that, and you kind of got a sense of the fonts you want to use... I want you to build that styles, those text styles. I've moved mine to here, so this thing... you don't need an alternative one, just the first one. So create these, you can pick any fonts you like... turn them into the styles, like here... and what I want you to do is grab these, plus your color palettes... remember, they used to be over here, on mobile... just copy and paste them, move them to their own page. So you're going to learn, well, you know how to make a new page now. Create a page, create a style guide, dump both of these in there. I tied them up in their own little frames, oh, fancy... otherwise you end up with stuff like this, where is it? This... if you don't end up kind of moving... mood board to mood boards, and styles to styles... and man, there's so much junk... so let's do as I say, but not as I do. To create the styles, move them to their own page... and this one here is an interesting one, this is our research project... so if you're an experienced designer... and you're already kind of like... you know, you're just learning Figma, you can skip the research part... and just build some cards. So UI cards is a term you need to know, and it's... I don't know, I can't go through all design principles in this one... so if you are new, go research, "What is a UI card?" I've given you some examples... of the kinds of ones I want you to build in this. This is what I've done, it is not fantastic, but this is my little card... the short version is, a card is like a reusable unit. I could have 100 of these, it's a nice, easy, reusable... these are going to be images. So I want you to make an image card... I've done this weird circle on the side with a text over here... I know it's going to come back to bite me... when somebody wants more text... but hey, it's a course, I get away with some things here. So go and research, what is a UI card... and just have a look through the first few articles. Doesn't have to be long, spend 10 minutes, read about them... get your skills up, know what a card is. I've given you some examples of the kinds of ones... that I think would be appropriate for this. You can use whatever you want... under your 'Exercise Files', under 'UI Card Examples'... and they're just ones that use images and text... that's what I was kind of looking for. See these things here, there's a card, it's got... this one's quite an in-depth one, right? There's a heading and body copy... kind of like what we've got in an image, very different from the card... that I'm trying to make here. So have a look, sizes, ways they're laying it about... there's a few examples in there... go find your own, Google images or Dribbble... and look at "card," or "ui card design" would be the easiest term to use. What then? Now we're going to start... up until now we've been doing stuff... and kind of just keeping it to yourselves... or uploading it to the assignments... what I'd like to do is share some of this stuff for feedback now from the group. So we've got a friendly group on Instagram, Twitter... Facebook group and LinkedIn, whatever your home base is... whatever you like the most... take a screenshot of two things... take a screenshot of this, these two bits, and your style guide. So upload them to the assignments part as well, in the class projects... but also take screenshots and upload both of those... just so I can see what you've done. You can ask for feedback, I'm on Facebook... I'm on all the places as well, I get a little bit overwhelmed... so I've got help from teaching assistants, creative friends of mine... that help out and kind of review and give feedback... and it might just be like, "Hey, good work"... that might be what you're looking for, or if you're like... "Hey, I don't know what I'm doing, what am I doing wrong?"... just let us know in the comments... when you do post stuff, we're a friendly bunch, go check them out. All right, that is it, I will see you in the next video... a little bit of work there, not too much... and again, we're not really looking for design, like if you... if you hate your colors and you hate your fonts, that's okay... this is not what this is about, this is a software course... let's get the skills up, let's get practicing... and don't worry if you're not super proud of where you're at just yet... be proud that you started. All right, next video. 48. Drawing tips and tricks in Figma: This is what we make in this video. You're turning it off, skipping, don't skip it. We do some simple stuff. Figma is not a full-time drawing tool. It does simple things great and you're going to use it probably a lot for building UI and icons. I'm going to go through not every feature, but all the useful stuff when you are a UI designer. You do need to make switches and icons and bits and pieces. I'm going to go through those tips and tricks right now. It's so bad. Let's not do that one. Now I'll get started. To get started, I'm just going to use the checkout page because it's empty. You can use anything you like. "Shift" 2 to zoom in on the thing you have selected. I'm just going to briefly go over the pencil tool because I don't really like it. You can change basic settings over here. If you hold "Shift", you can draw straight sticks. I don't use it. You might love it. There's not much to it. The Pencil tool is one, the Pen tool is a weired one. If you've never used it, this is not the video to learn it. I'm just going to give you the real basics. But as a UI designer or a UX designer, it's really handy to learn the Pen tool. I've got an illustrator course that spends a lot of time with the Pen tool. That might be right for you. But the super basics are, if you click once, you get a corner. I'm going to get you, you, you. Not doing anything, just really wants to snap and go straight, which is cool and this is my house or an arrow. Whatever you want to do. When you get back to the beginning here, watch this. If I click it back to the beginning, I can close it up and then over here I can give it a fill. That's the basics of straight lines with the Pen tool. Spacebar, drag, fall it's any the moon because it's an easy example. Remember clicking once gives you a corner, and if you want a curve, you click, hold and drag. Click once for a corner, click, hold and drag for a curve. Click once for a corner. That's the basic rules of this. Now, I've got those two, and because we've been drawing in object editing mode, they're not two separate shapes. Can you see I'm still inside here, I'm trapped in object editing mode. I get caught in this all the time because I'm used to other programs. This vectors together. What I'm going to do is, select you, cut. Who remembers how to get out of this? There is the official way. Done. The other way is just double-click the background with the Selection tool. I'm out now, I can hit "Paste". I've got them separate. I've got my house and my moon. When you are drawing, you try to do a bit of symmetry and symmetrical. If you zoom right in, you can start to see the pixels. It's a little hard to see on screen, probably on the recording, but can you see and it will try and snap to them. You can do some stuff like this, where it is actually probably snapping to these pixels here. Drawing a house because who else will love sided house? I'm using my arrow key just to move it across one. I selected it once. I'm in an object editing mode, selected it, moved it across once. Who else was driving them nuts? This one here. Remember our original one, just kind of ignored it and they were like, "You are the wrong width." The way it was designed, I couldn't change it. We can do it now with our sweet Pen tool. To get it to stop looking like an arrow, I need to have drawn it with a door. My Pen tool, I'm going to go inside of this thing by actually back to Selection tool, double-click it to go inside, Pen tool, I need probably 1, 2, 3, 4. Back to my Selection tool, I need these two guys to come up here. Here we go, beautiful end. Better? Slightly better. Zooming into pixels can give you a bit of consistency. Another thing to do with this is the stroke. You get out of the way, you come over here. The stroke we looked at earlier, and with it selected the stroke, you can go to this advanced stroke option, click on that and we had looked at the endpoints. We don't have any endpoints because it's complete shape. Remember they're rounded and stubby ins. The one I'm looking for now is actually this one first, center. Can you see over here, the blue line is the line I drew, and then my stroke, which is one pixel, is straddling it. But you can go from inside and outside. This is going to make a bigger difference to this. Can you see the difference in the house now? That's the same kind of original stroke. What you might find is you'll download a bunch of icons and it'll be the same height and width, but your like why does this one seems smaller and this one seem bigger? It's just the way that this is being processed. Does the stroke run on the inside or the outside? The other thing is the edges here, you might have a bunch of icons that don't have these really sharp edges. Back into advanced there, this is a metering. That's a little sharp one by default, you can slice them off, a little stubby ins or you can round them, which is quite nice. Fancy. It's no fancy. That one's a bit longer than that one. I'm giving up. You get the idea. Another couple of things is there's dash lines. They're in here, stroke style, solid, it's got dashed. There you go. That's where that is. Undo that. Other things that are useful and I haven't covered yet, there is a star. We'll click it once. I want to click, hold, and drag and let go. That doesn't seem to work. I'm going to click once and then click, if you run into the same problem. I can drag out a star if I want it to be perfectly height and width is constraint, hold "Shift". I get a star. I'll go back to my Selection tool now. I can play with things like over here is the star number. I can do more of like a little star based thing, and these two here you can play around with. They're pretty self-explanatory. This one here and randy corners. Same with the triangle. You can make a triangle. Well Polygon here. I keep doing it. Polygon, draw it out and then go like this. Look over here to all your shapes. Can you see this one here? I said polygon, remember, not triangle. You can four, makes it a square, but let's go five, and we'll go to six. You get the idea. Octagon, let's do it. Round the corners. Then here, the count is there as well. It's a bit of a weird one. There you go. You do get a square. Other thing that I need to show you is the rotation. Now with the selected tool, you can actually just hover here and rotate things. If you rotate them, I'm just hovering outside here, hold "Shift" and rotate it. It will block it into logic units. You can type it in over here. I think it was what I was getting up in something like 15 degree increments. You could decide that actually I just want to rotate this one 180 and you just type it in. Also know that there is a bunch of options under here, under little f, under Object. Can you see rotate? We've already looked at these flip horizontal, flip vertical. There's a bunch of stuff in here. Last but not least, is something called Outline Mode. It even uses, if you've heard of Outline View, from Adobe Illustrator, it's the same in here. It's even the same shortcut. Go try it. If you know the shortcut, it's "Command Y" on a Mac, "Control Y" on a PC. It was in there if you want the long way. If it's new to you, it's just this option in here. It's under view and there it is, the Outlines. What is it? It's viewing your document, if I zoom right out, let's zoom to everything. It's right, "Shift one", everything on my whole page. Can you see it breaks it down to this really simplistic view. This is really handy especially when stuff is clipped off. Look at this guy. I was using this off camera when I was, what command is it? "Command Y" or "Control Y". I was just trying to get these to line up. I just went "Command Y" or "Control Y" on a PC, so I can start working on these and actually see them. You can work exactly how you were doing before. It's just kind of an outline view, hence the name Outline View. Really good when you are drawing, getting things to line up, see-through things like an x-ray. Let's turn it back on "Command Y" on a Mac, "Control Y" on a PC. The one thing that I always get stuck in is, you're in here and you don't realize it and you're trying to do something over here and you are stuck inside editing mode. I mentioned a couple of times because I just feel like, why can't I move this? Because you've zoomed in over here and you don't know what you're doing and you're stuck in object editing mode. Done, or just double-click the background with the selection tool. That is my tips and tricks for drawing in Figma without getting too deep into it. We do do drawing in here. It's not it's best feature, but it does all the good stuff, all the basic stuff perfectly. Thank you Figma. Thank you for watching. I'll see you in another video. 49. Squircle buttons with ios rounded courses in Figma: Hi everyone, in this video we're going to look at squircles... which is, this is a squircley one, and that one is non-squircley. So it is a great word, it kind of... can you see the roundness difference on here... this is kind of an iOS, smooth rounded edges... this is just a regular old geometric rounded corners. We'll learn how to do that in this video... we'll also do kind of like individual rounded corners as well... plus a few shortcuts, all right, let's get squircling. So let's start with squircles, because it has the best name... we're going to start with a couple of buttons down here on my Home page. I'm going to grab the Rectangle tool, which is the R key... I'm going to drag out some sort of button... I'm going to pick a color style... a good enough contrast, I think it's all right. We'll have two of them, and what we'll do is... we'll do both of them with a rounded corner of say 10. Now the squircle thing is, actually called something called Corner Smoothing in here. So what we're going to do is we need to click on this, it says... transition these from all connected corners to independent corners. Now we can see all this, and here, it is in here... they call it Corner Smoothing, and what you can do is just drag it right up. Can you kind of see it there... that, I'll keep dragging it, and I'll get the editor to zoom in... can you see, it kind of like flexes... so that is squircle... not squircle, squircle, not squircle. So it is kind of a square, kind of a circle... what do you think in comparison to this one? It's a very Apple iOS thing... is where it's from,you can use it anywhere, but it's borrowed from them... they did some, yeah, they did it... and it's cool. I found this to kind of give you a bit more of a better visual example... it's from Figma, if you Google "Figma squircle"... if you can spell it, and it'll bring it to something like this... so yeah, you don't have to do squircles... what you might do is, you might do independent rounded corners though. So remember, you can go independent rounded corner... you could say, actually, I want, can you see over here... if I click, you see those icons, it tells you which one. So up the top, I might go, you go back to 0... see this little kind of tab thing on it, I might do it over here... so you can do that manually by typing it, or you can do it over here. I've got my rectangle here, if I hold down... the 'Option' key on a Mac, 'Alt' key on a PC... and I just click and drag one of them... you can kind of just work on this. All right, that's going to be it, corner smoothing or not... let me know in the comments... is it worth it, are you-- can you see the difference? I like it... it's got so much more personality for a button, anyway. All right, on to the next video. 50. Boolean Union Subtract Intersect Exclude Pathfinder in Figma: Hi everyone, are you ready for a mildly better drawing tutorial? We're going to explore Boolean operations... Union, Subtract, Intersect, Exclude... it's very like the Pathfinder in Adobe Illustrator... but here, in Figma, has some really cool perks... let me show you what they do, and what the perks are. Yes, we make a house on fire icon... anyway, it shows all the different Boolean operations... it seems like a good idea, that's why it's there. So in the last couple of videos we did some actual drawing... using Shapes, Pen tool, and that's one way of drawing your icons... and, I know, UI components, Page Furniture... is another good word for them... things that are on the page. We're going to use what's called a Boolean operation... it's a bad name, I don't like that name... but basically these are the way these Booleans work. So let's create a couple of things... I'm going to go to the 'Rectangle' tool... I'll draw the base of my house... I'm going to use the 'Polygon' tool to draw the top of it... and select both of them, and say, center them... and make them like that... good enough for me. I'm going to select both of them... and I need to pick them to be... a nice color, just because. So Union, what does it do... because if I made this, and that was my house icon... I'd be like, "Yep, there's my house," that's all I need to do. Problem is, when I export this it'll export two shapes... so I'll send this off to my developer, and he'll be like... "Why have you sent me a triangle and a square?" We'll do exporting later in the course, but that's a problem... so what you need to do to combine these, or to union them... is to select both of them, you can select-- you can have a bunch of different shapes... it doesn't have to be just two, and this thing appears. So without it, not there, one of them, not there, two of them... this thing appears, our Booleans. So drop this down, and we're going to start with Union... you're like, "Look at that." Kind of smooshed it together, it got rid of the... you know, the two shapes, and now it's one, it's called Union. Now we can call this one, I'll call it "Union"... because we're using-- we're trying to get used to the names... this is my house icon, and when I export it, it's going to be one unit. The cool thing about it though... is that it's always editable, it's magic. So I can double click it to go inside, and look, it's separate... but when it exports, it's one unit, so that's really handy. You've still got things, like I can play around with the Border Radius... that's my smurf house... come back out, and that's the thing that gets exported... so that's what Union does. I'm going to undo, actually, I'm going to copy it, undo it, until this goes away... because what I should have done... is made a few different copies... so there we go, this one... this one, 'Command D', 'Ctrl-D'... and I'm going to paste my next one back in. So Subtract, let's just go through them real quick... so Subtract does that, whoever's on the top subtracts the bottom. So I drew this thing last, so it's on top... I can kind of see, there it is, Rectangle, where is it, Rectangle bottom... and the top of it. So that is on top of my rectangle... if I switch it around... if I say, you, rectangle, are on top... I'm going to use my square bracket, over by the P key... so I know it's on top of everything... and I select them both, the exact same thing... 'Subtract'... get a different operation... so whoever's on top will slice out the one behind. Intersect, let's do that one... 'Intersect', it's kind of whatever's left over, where they overlap... that's why you got left, 'Exclude'... this one's going to leave a big hole where they overlap... so you end up, they're kind of their opposites, Intersect, Exclude. All right, that's all very fancy, but you're like, "How does it work?" Just going to give you a bit more of a practical exercise... I thought this was clever, you might not. So you can keep adding to it... so let's add a 'Rectangle' tool... draw out, chimney, it's a different color, look what happens if I go to Union... you can actually, that's the default one, you just click the icon... whatever the top one is, it'll still smoosh down, but it'll use the top color. So Union, you can keep unioning things, let's move it across now. So Subtract, so what I'm going to do is... I'm going to grab my 'Rectangle' tool... I'm going to drag it out here for my door... and because I can go back to my Selection tool, and zoom in a little bit... so I can see my dots... I can go like this, and then... go to these two and use that exact same thing, Subtract... cool, huh... look how fancy I am. This one here, I want a house... this one, I want the house to be on fire, because I do. This exercise... it was kind of clever... so I've got an Ellipse, draw out an Ellipse... I'm going to have two of them... and I want to use this one here, the Intersect... it's a little bit hard to see them. So I'm going to go, how do I see Outline view, do you remember that... you remember, 'Command Y' on a Mac, 'Ctrl Y' on a PC... or you can use that other shortcut... the one shortcut throughout them all... 'Command /', just type "outline," there it is, 'Show Outlines'. What I'm looking for is the bit in between to look kind of like a flame... I'm looking for this bit, so I want to grab both of these... and go back out of Outline view and use that 'Intersect'... this is my little flamey thing, look at that... it shouldn't just be coming out of here... I'm not sure why the whole thing had to be on fire. All right, the last one, like how could this get any cleverer? Well, we're going to need some windows, aren't we? So the O key for the Circle tool, hold down 'Shift'... I'm going to have to, like terrible windows... I can't really see them, they're there, go to 'Outline' view again... oh, it's getting messy. Outline view is not that helpful this way. Why all these circles here? We'll deal with that in a second actually... let's finish doing all this cleverness. I'm going to select all of these... you could change the colors just to be good... but select them both and go up to here, and use the last one. Let's go 'Exclude', hey, we've got our house with holes in it... I can stick them all together, and I can say 'Union'. So now there is one little unit... that will get exported for our terrible house by the seaside... there's a nautical, that is on fire... great icon. Now the big thing, I kind of explained at the beginning... that they were still separate, but all of these are still separate as well... that's why if I move him just down over here and go to 'Outline' view... you can see, there's still lots of stuff in here... you might go, actually that, that door there... I'm going to actually come out of this... this door here needs to be different, the rounded corners are terrible... so you can go into it, I can say, where is it, the Exclude one? It's a little bit deep in here, but I can say, that rectangle there... has rounded corners of like 2 now, so it's not so weird. Here, they totally fixed it, but you can double click stuff... keep double clicking and go, oh, look at that... it's still excluded, still a hole in it, but it's all still editable... that's why these Boolean things are really cool... it's like the Pathfinder, if you are from Illustrator land... or maybe the Shape Builder, that's quite useful as well. All right, that is going to be it for these ones... yeah, let's get on to the next video... it was good in my notes, flaming house icon... anyway, next video. 51. What is the difference Union vs Flatten Figma: Hi everyone, in this video we're going to look at the difference between... Union, at the top here, between Union and Flatten... the non-destructive option, and the Terminal... very destructive, but sometimes useful option... all right, let's jump in. Let's talk about Union versus Flatten... I'm going to use this example here, onto a new page... and if I go to Outline mode, 'Command Y', 'Ctrl Y' on a PC... you can see, all of the stuff at the top here is cool, that it's still editable... but it makes a really messy document... and, you know, it's-- can you see in here as well... if I go into this, Union, let's call this my "Firehouse"... there's a lot going on in here, and while it be final export, just fine... what I want to do is actually just smoosh it down into... like a single drawing, and that's where Flatten comes in. So we're going to take this example first... let's make a copy of it over here, let's go to 'Outline' view. So I've got this thing, and it's fully editable, which is nice... but actually, I'm just going to go, you, 'Flatten'... and it just gets it back to there, it is, Destructive. Non-destructive is the Union that we did... or in this case, maybe we did Intersect, to get this one. So often, you use Flatten after you use one of these. So we used Intersect to make this one... and then just to tidy it up we went Flatten. It's also good when, let's say that... I'm going to grab my 'O' for the Circle tool... I'm going to grab my 'Rectangle' tool... and I'm going to draw myself a little man. So I've done what, 12... I think they're different... but 12 point, he's very stocky... this is meant to be my account man, very stocky... he's the bouncer/account icon, let's line him up. Now if I've got this guy, I don't want to export him this way... because it'll be two shapes... if I say 'File', 'Export', now we're going to do... Inspect and Exporting, and stuff later on... but if I want to export this fella... he's going to export two separate shapes to my developer... and he's going to go, "Why is there two shapes?" So normally you'd go Union, and that you could export... you could group it and export, no difference... but let's say I do-- I'm going to undo that first... I'm going to have two versions. So this one's going to be unioned and this one's going to be flattened... and they look the same, you're like, "What's the difference here?" It comes to things like scaling, watch this... if I grab both of these, holding 'Shift' down, scale them down... watch this one, who's been-- radius has been set to 12-ish... can you see, it tries to retain that 12, whereas this one is flattened. It's like smooshed a bit, so I can go in here and say... the smooshed bits, it doesn't know that it's a rounded corner anymore... it just knows that this is the shape, I'm always going to be. I can go and customize it... I can say, click on this Anchor Point here... there you go... here's my moon face bouncer. So Flatten kind of destroys it, which is sometimes helpful... and Union though would be more common, just leave it editable... you can scale it-- like if I undo that... there is a way of getting around that whole problem... with the Stroke on the outside, or at least the radius. You just use the Scale tool instead of the Selection tool... hold 'Shift' still, can you see, it scales the radius, and that. All right, Flatten is for tidying up messy things... that you want to then go and edit on top of... Union, like all the other Boolean operators are non-destructive... you can edit them afterwards, which is probably more common... you'll do more of that, anyway... that is it for this video, I'll see you in the next one. 52. Class Project 09 - Making stuff: Oh man, another class project... ah, you're enjoying it, I hope you are. So this one here is kind of filling in for a chunk we've done, a lot of drawing stuff. Basically this stuff here, the icons and the buttons... click the frame, 'Shift 2' zooms it right in, there you go. These three along the top of these two buttons... so what do you have to do? Make buttons with text in it, just like the ones I did... you don't have to, you can decide on your buttons... you don't have to do the squiggle edges or-- I've done an outline version, you might use different colors... might be square edged, but get those going... and I want you to create three icons. I've picked these three boring ones... that we've been kind of making in the class... but you can pick any three... actually, make sure one of them is the Nav... which is an easy one to make, but hey ho. So make three of them, and you've got to draw them yourself... you can't go off and find them from icon places... I'll know, I've seen them all, every single one of them. So pick three, any three you like... what I'd like you to do though is... hey, if you've got a little bit more time do five of them... pick any five, and if you're super keen I want to see you do them all. See if you can crack all of these guys. Now I've put them in what I think is the most easiest to draw down... so, hardest one, shopping cart, easiest one, burger menus. So you're going to pick only three... go for the hard ones if you feel like you can... but anyway, all I really need is three, but do as many as you can. Now one little note is, when you are drawing icons... icons aren't easy, so don't worry, if you're drawing them... and they all don't quite match, and look a bit horrible... that's not what the goal of this here is, it's... the goal is to practice drawing. So I'd like to see the ones you've done... both with the projects and assignments section... plus on social media as well. You're not going to be judged based on like how amazing they are... it's about showing where you're at right now... and getting some maybe feedback from other people. Now a good start for drawing icons is to start with a square... it can be any size, but it can be quite nice to start with 'R' tool... draw this out... and make it a width and height of about 48... it's a really common kind of icon designing size... and it just means, when you're drawing in that... draw your icon inside, and kind of use the edges. You don't have to go with complete edges... but just know that these little units... you're going to stack these icons next to each other... so it can be handy to draw them inside squares... just to give yourself some boundaries... and know, like when I drew this one... it does feel a bit, not quite wide enough... so I tried filling it out and ended up making like a short squat person. You'll notice as well that I have rounded the shoulders... I feel like he's not much of a bouncer anymore, anyway. So three icons, make some buttons... and I want you to give it a test, test it on your phone... just to see, are the buttons easily clickable, can they be seen... is the font big enough on your buttons, can it be smaller, can it be bigger... just to give it a little test of what you make. The deliverables here are screenshot of what icons you've created... three, five, all of them... and take a screenshot of your Home page kind of laid up like that... this guy, 'Shift 2'... don't need this. Upload it to the assignment/project section... and I'd also love to see what you make on social media as well. So screenshots, icons, screenshot, home page... off you go, enjoy the drawing... I'm interested to see what you actually create... all right, next video. 53. Smart Selection & Tidy up in Figma: Hi everyone, in this video we're going to look at... something called Tidy up, super awesome... grab stuff that are not kind of tidy, watch this, oh, look how tidy. Gets better because you're like... actually, I need this guy over here, and look, they swap... oh ho, it gets better. I've got some cards, I need to select them all... tidy you guys up, but also, you know what I need... I need another one of these. Click on it... 'Command D', 'Ctrl D', there's another one... I need another one, ah, so good. All right, I'll get a little excited, in this one... you're going to enjoy it, let's jump in and look at... something called Tidy up and Smart Selection. All right, let's start with Tidy up... if you select a few things, you might notice that... this little line has been appearing, what does it do? Let's click it, give it a click, it tidies it up... that's what it's called, Tidy up. If I undo it, tidy up won't appear... if you've only got like two things selected... it needs three to kind of do the spacing between them... and also it won't appear if you're already really clever... and you've got great spacing. So if I got all these guys, 7 apart, it doesn't appear... because it's like, I don't need to tidy this up. Works as well if I've got, let's say this, this... three stripey lines, change into a grid... when there's kind of a grid... there's more than one row of stuff, or more than two columns... let's click it, and it kind of lines everything up. Now it's not like trying to make a complete grid... it just kind of puts this row's even spacing... same with that one, you can see... this is a little bit off, it's not exactly how I thought it would work... but great for kind of doing individual rows. There is a long way, if I select on this, up here, Tidy up... the icon should appear... if it's greater over here, one of those two rules... that I mentioned a second ago are broken. They're already evenly spaced... well, you've only got two things selected, so forget tidy it up now. We've got to a point where Smart Selection... this is the favorite, my favorite part of all of Figma. So it doesn't matter if you use Tidy up... or you've just spaced them nicely... or you've used the kind of like, Distribute Horizontal Spacing... as long as they're evenly spaced... you'll get these pink lines and these pink dots. What's good about them, the spaces here in between... watch this, click, drag, whoa! So you've got a lot of control over a big group of things... horizontally or vertically. So I've got these, they're different shapes... I do rectangles in different shapes, anyway... let's get the spacing right on them... and maybe we'll even center them up, just because... and maybe we'll even kind of like align them on one side. So it doesn't matter, horizontally, vertically... we can drag these, or we can type it in here... say using 16 as your spacing, like awesome... let's go down to 8. They don't have to be exactly the same shape, clearly, I haven't done that... but that's not even the best bit... you're like, is there better bits? There is better bits... these pink dots are the better bits, watch this... if I click on him once, I'll click on the green one... I'm like, "What am I going to do with you?" I need you to be over here... so watch this... click, hold, and drag, look, he moves wherever I want him to go, so good. Imagine this with cards, and lists, and icons... we're doing it with rectangles just to go fast, and get the idea. It gets even better, you're like, "No way," yes, way, watch this. Let's say that I have got these, they're all evenly spaced... because all that stuff appears, called Smart Selection... be like, actually, I need another one of these... click it, and hit 'Command D', this makes another one... you're like, "What if I need another kind of yellow one here?" 'Command D', 'Ctrl D' on a PC, and it just adds another one. Imagine your big list of things and cards, and... lists and cards, I can't think of anything else. You can just 'Command D' or 'Ctrl D' them and it will make a new one... and kind of separate everything else out. So Tidy up, kind of separate, but they get lumped together... it's just a way of kind of tidying them up. It doesn't really matter whether you use Tidy up... or Horizontal, Vertical Spacing... as long as they're evenly spaced these things appear... with them out, you can see, they're not there. Let's do a couple of other, like real life examples... and things that might catch you out... is I've got this icon, this one, and this one... this one here, if I do smart lining up, it's kind of worked... it actually worked okay for mine... it's when you have, let's say we add a circle to our chimney... that's my smoke coming out of it... because these guys are not grouped, and then I go to tidy up... it kind of does weird stuff. So if you are having problems... and your icon's made of a couple of parts... just make sure it is either kind of a Boolean, like we learned... or it's a group, or it's a frame, just something to tie it together. These are all tied together, and this one here, are three lines... I'm going to turn it into a frame... I'm going to call this one "Mobile Nav"... and now I can use the smart, kind of spacing out, and then I get these. You can imagine, like, especially if you're doing like the kind of testing for... the touch area... and I'm like, actually, I want to move this around, oh. Now you're seeing, you're like, "Yeah, now I get it"... good as me. I get really excited by that one, so good. Next thing I'm going to do is, I'll show you... it's just good for Type as well, for like menus... I'm going to type in "Home"... and instead of doing them in one text box... I'm going to go, you... actually, I'll do three of them, four of them... so duplicate... duplicate, let's have a look... so Home, I'll speed this up. I'm just going to pretend there's more... that's the only one I've got for my Nav, but-- say you got a bunch of lines, they're all in separate little text boxes... and you're like, "Oh, tidy them up." Actually, once they're tidied, can I change the spacing? You can... and then can I click one of them, select them all. The pink dots, and these are quite small, there they are, hello... and then you can move them around. Add more of them, click one, 'Command D' or 'Ctrl D', oh, so nice... order for something more complicated real quick. All right, I'll bring you back real quick for another little bonus tip... can you see me naming those, probably didn't, was pretty fast... but I find, like a-- name the first one... let's change it to "A", I select it all, I copy... and I can hit 'Tab' on my keyboard to get down to the next one... 'Tab' again, so you don't have to like double click with your mouse... go in, 'Paste', I don't know, is that helpful, anyway. So I've created these, they need to be groups, like our icons... kind of combine them. I've turned them into frames, because frames are awesome... but if I select all of these, I thought they were close... you can see, their spacing is close, but it's not... click on this, oh, perfect. Now I get these, like great... and if I decide, actually, they're all recycled, but wait there. So they're all in frames, I kind of made them different... so I can select them all, they've all been spaced nicely... and I can say, actually, I need another one of... what do I need? I need another one of this one. So 'Command D', 'Ctrl D', probably need... need to have them all selected, you, 'Command D'... and I could say, actually, you go there, look at that, cool. What it does do, it does push off the frame... you can see the outside frame, one of the quirks. There's probably a way of fixing that, I can't figure it out... what is the size of my page... the width of this, is a width of 375. So I'm going to say, you go back to 375 for me, thank you. All right, there'll be no problem if yours, like my design... pushes out to the outside of the frame, so it kind of freaks out a little bit... I don't know, what do you think? Let me know in the comments, is this your favorite thing... what is your favorite thing so far? Let me know in the comments below... I just, I'm going to check back, I'm going to see... this is like as good as it gets... or is there other things that you're like, "Sorry, Dan"... this other thing, the flaming, the flaming house. All right, so that is Tidy up, which is nice and simple... and then, Smart Selection, which is a little bit... not complicated, but they have to be evenly spaced first, and probably grouped... or stuck in a frame or a component, which we'll do in a bit. All right, I hope you enjoyed it... I will see you in the next video. 54. Do I need to know Illustrator with Figma: What are we doing in here, this isn't Figma, this is Illustrator... do I need to know Illustrator to work in Figma? The answer is, no. You can get quite far with Figma... drawing things, drawing icons, drawing logos, illustrations... it's got all the basics in there... but there will be a time where actually you need to do some custom stuff. We'll demo it a little bit in this video... just to kind of show you, and then show you... how easy it is to kind of flick back and forth... between Figma and Illustrator. So no, to be UX designer you do not need to know Illustrator... but it's a handy tool, let me show you why. So I'm going to show you a little bit of Illustrator... to show you the, where, kind of like Figma stops... you can get by with Figma to do a lot of what Illustrator does... but it's not made for it. So Illustrator does pick up quite quickly... and you're like, actually, maybe I do need to learn Illustrator. If you already have the skills, they're not wasted... if you don't have the skills... you might join my Illustrator Essentials or Illustrator Advanced courses... check those out. anyway, I'm just going to draw this, I'm going to, I guess just show you... a couple of the things that make Illustrator... why I come back to it, especially for logo or icon design. So I'm just going to, I don't know, I'll zoom through this... but I'm just going to, like this is a drawing that I've done... it's one of the things we do in one of the courses. So I've drawn it, I'm just going to build it out with circles, you wait there. So I'm just kind of like making a bunch of circles... let's carry on again. So I've just got a bunch of circles, let me turn-- let me show you the-- background layer off... and it's just handy because you can select them all... and one of the kind of, my most favorite tools... is the Shape Builder tool. In one of the previous videos we use kind of Boolean... kind of like Pathfinder in here, and it's fine... but oh, Shape Builder, you're ready? So let's hold down the 'Option' key on a Mac, 'Alt' key on a PC... just kind of like drag through the stuff we don't want... woohoo, look how fast and good this is. All right, and now that I want to color it... actually yeah, I want to color it... I'm going to go through and just pick some random colors for this one... start with the light one... and this ear in here... instead of holding down Option, hold down nothing... and you can join things up, look at that. Work my way through the colors... just the defaults... kind of good for a fox, though. You're kind of impressed, oh, it's fun, I love Illustrator. The reason why, as a UX designer... it's still often part of the kind of tools you need. Select it all, and have... no Stroke. The cool thing about it is, watch this... working within Figma, or like... kind of transitioning back and forth is super simple. So I've selected it all, copied it... and I'm going to jump into Figma. I'm just going to paste it, it's a bit big, move over here... but you can see, comes through as a frame, which is awesome... and it's even more awesome... because I can go inside that frame, and it's all still editable... I can make adjustments in here. So you might do your drawing work in there, but in here... you can still make adjustments... but I can also go through and actually start picking... my kind of corporate colors. So you wait there, I'm going to color it... and remember, if we've got colors... I need one, like another color, to go darker. So I can click on this one, and actually, just break the link... and go, actually, let's just go a smudgy bit darker for this one. Cool, so working between Illustrator and Figma is super easy... just copy and paste, you don't have to export... and it remains editable and scalable, and good. We have no reason for this fox-- I just, it's in here. All right, that's it... maybe after this course, whether it's my training, or somebody else's... go check out Illustrator if you haven't already. If you are a master of Illustrator, or at least... maybe you're self-taught, check out my Illustrator Advanced course. All right, on to the next video. 55. Tips & tricks for using images in Figma: Hi everyone, this video is all about images... we're going to look at the various ways to import them... how to adjust them, multiple images... and how to kind of play around with things like exposure... kind of like basic Photoshop stuff... so we can kind of push this in the background... some of it is a little bit unintuitive... so stick around and let me show you what to do. So we've covered a little bit of images earlier... let's go through it all, all the kind of good useful stuff to know. So bringing in images, you've probably seen, there is about a zillion ways. So earlier on, I'm not sure how we did it... but there is a 'Place Image', or you can go to here... and go to 'Place Image', they're the same thing... or the shortcut, that's what I use the most. So let's bring in an image, just one, when you bring in an image... you can click once and it comes in at its full size... which is too big, in our case... yours might be fine, you want-- and you might want to see it at its full size. I'm going to use my shortcut... that's 'Command Shift K' on a Mac, and that's 'Ctrl Shift K' on a PC. So what I tend to do is, when you bring in an image, is to drag it out... so I'm going to drag it out here, you get it the right size... be careful though... hold down 'Shift' to get it to kind of... proportionately height and width... all right, let's bring in multiple images. So I'm going to use my shortcut again... 'Command Shift K', 'Ctrl Shift K' on a PC... and I bring in all of them, come on, guys. What you'll notice is that your little cursor will update... eventually, there's seven images... and hold 'Shift' down, and just bring them in the right sizes... the things appropriate to this. All right, rotating, we've talked about before... but let's just reiterate, if you have your Selection tool selected... and just hover in this magical corner, you can click and drag... hold 'Shift', it will snap it around... you can type it in over here... you can be 180º, thank you, very much. Now although this isn't Photoshop... you can do some basic stuff in here... they give you enough to get by-- because what I want to do is, I want to... let's say that I like this image here, but I want to lighten it up... so when I select it, over here, under 'Fill'... that's where 'Image' ends up. I can click on it, and I get rid of all the color swatches... and I get image related adjustments... so I can play around with the exposure. So I want to bring the exposure up a little bit... you can do basic stuff, we're not going to cover it all... but Saturation, oh, black and white, there you go... change the Temperature if it's, maybe bit too blue, bit too yellow... have a play around with these. Again, not Photoshop... but some of the good basics in here, to update an image... another way to bring in an image is to have a shape already. So let's say that I've got this circle here... could be a rectangle, with it selected... I can say-- actually, I don't want you to have a Fill of this primary color. I'm going to break that link, and we saw before... images are Fills, so I can just go... I want to change the color of this Fill... from solid, not to linear or radial, gradients, as great as those are... I can go to 'Image', you get this, like little checkerboard thing... you see, it's just like a placeholder, you can say, 'Choose Image'... and we kind of go this way. It's great if you've already got shapes on your document, like I do... kind of mocked up, click out, I'm going to delete these things now... we're starting to move along. So there's a couple of places, just to click the button... there's a shortcut, you can drag it on from your desktop... did I cover that one? I didn't. If I do this, problem is it comes in a giant size... so if yours are appropriately sized... you can just drag them in from your Finder window... and that last one there, where we just clicked on a shape... and went into the Fill, and said, you are an 'Image' now. All right, I'll do one more... I'm randomly picking these. The last thing I want to do before we go... is I'm going to use-- I'm going to get rid of this colored background... and I'm going to kind of combine the things... we just learned a little bit, because I want a background image. It might be a hero box, I'm using it for the full website... so I'm going to grab-- you've got two options here. So I want to use, say this image, and this is not the bad way... but I'll-- it's a way, it's kind of natural way you might do it. So I'm going to put this on here, and I'm going to make it bigger. If you hold 'Shift', it will do it proportionately, which is normally good... but what I want to do is I want to hold nothing down... because, can you see what it does? It naturally wants to be responsive... so I can just drag it out to the size of this window... anything, all right, just move it to the back ... where is it? There it is there. So I'm just going to right click it and say... 'Move to Back', or use that sweet shortcut... and then you start working that way. Now there's an image here at the back, that's fine... but it's an object that can be moved around... it's a bit of a, there's nothing wrong with it... but it's actually easier to just switch out... the Fill of the actual frame itself, you don't have to... but the cool thing about it is... over here, Home page, I've got selected ... again I'm going to break the link to that Style... because actually I want that fill to be an image. You need to play with both... because you'll get lots of stuff from the community, that is set up this way... and it's not intuitive, but it's useful. So let's go choose image, and I'm going to find that one... which one is it? That one there, cool. So it works the same sort of way... we already had a shape, and it's filled it... but the cool thing about it is... there's nothing in my layers, it's tidy... and even though we've applied it to this kind of like top level Home page... is actually right at the bottom... and I'm going to go back to where I did it before... my Image settings, I'm going to say, actually... exposure is a good way to kind of lower it down... it's the most obvious one. What I find useful though is... often get exposure down a little bit, but it's not so much... everything being down... it's mainly the highlights lowering to kind of remove... some of that strong contrast... so you can just play around with these... decide where you want this to be. I'm going to pull the saturation out as well, not all of it... I wanted to do this, like background-ey thing... you're like, I can't see the text... yeah, that's what I'm going to do in between videos... I'm going to grab all this and make it white... just so it stands out in the background. All right, that was my quick... going through all image-y stuff in one video. All right, let's get on to more image stuff in the next video. 56. Masking Cropping images in Figma: Hi everyone, as you can see by this messy artboard... we're going to look at Masking/Cropping... this way, we're going to mask it in text, inside of shapes. There's a couple of different ways that Figma can do it for you... let me show you the ways. All right, first up I use the word Mask and Crop... interchangeably here in Figma... because they mean the same thing to Figma. Figma calls it Crop, you might call it Masking, same here. So the first thing to notice is the difference... between Cropping and using Fill. So these images we bought in the last video, nothing to them... just dump them in here, and by default... if we go to the 'Fill', and go to 'Images'... this is the option, 'Fill', we're going to look at Crop in a second... but Fill does a kind of cropping, so this might be enough for you. If I have nothing selected, I've got my Selection tool... I can just grab the outsides of these... and that might be enough of a crop for you. The problem is, I can't kind of move it up and down... I kind of can, it's a bit responsive... but that might be enough. So we're going to switch now to Crop, what does this mean? Basically, it kind of shows you the extras... so now I can work on the, like crop edge... interchangeably from the image edge. Now, grabbing the image edge... you need to hold down 'Shift', otherwise you get a bit squidgy. Now it's not clear, it took me a while to... like when I first got this I was like, "Oh yeah, it makes sense." How do I-- double click, double click, I was trying to like adjust the image. You just need to, like magically-- Figma needs to add... they might do already, some sort of handles out here... to know that you can click and drag it, that's my advice anyway... but you can click, hold, and drag it, hold 'Shift'... you can rotate it out here as well, can you see? So that's cropping, now there's a couple of ways of doing cropping... let me kind of break them down, because, yeah... you're going to stumble across all of them. There's kind of three ways to mask... so a way that often happens is... you will do it with a shape, I call this the two shape mask method... I made up these names... you're not going to be able to find these anyway. So I'm going to grab the 'Polygon' tool, draw out, hold 'Shift'. Now most programs, you'd have the shape on top... you'd select the background image, and I got both of them selected... and you'd hit this option, see that there, he's new, he's not there... he's there when you've got two things selected... that is the Make Mask button, boom, not what I want. So you have to be-- the image has to be on front... who remembers the shortcut to bring things to the front? You can right click it, yep, or you can use that square bracket... it's the kind of second square bracket, there you go. So they're both there, just hiding underneath... so image on top, select both of these, thin mask, hey. So that's one way of doing it, and it's really good... you can still get in there, I can double click, it's kind of different... it's two separate objects, over here, in the Layers panel... there's a Mask Group, there's my image, and there's my shape... that's why I call it the two shape mask. You need two, you need an image, and some sort of shape to mask it... and you can still adjust them separately, there you go... click over here, click on my image... so that's my two shape method. The other way of doing it is... my kind of shape first mask, another name that I made up. So you draw the shape, and kind of, like we did before... we click on this, we've done this a little bit, click on the 'Fill'... we don't want it to be gray, no. We see that gray, we're going to go to 'Images', click on there... pick one of my images... and we've masked into there, kind of... but we're using that Fill one, you can switch it out now, and go to Crop... you're like, "This, how is that different from this?" It's mainly to do with, over here, that... see this big kind of construction here... that's my two shape method, this one here is my shape first. So we drew the shape and we just added a Fill to it... it's just tidier over here, and it's, just works slightly differently... they do the same thing, watch this, if I double click on it... actually I don't want to double click, I want to go over here... open up my little image thing... and you can see, I can see the edge of both my shape... and remember the magical-- you just meant to know-- grab the edges here, hold 'Shift'... you get to the same place, can you see, one, two shapes. Probably the easier way to kind of get your head around this way... is every shape can have a Fill, and if you change that Fill... from Fill... there's two Fills, excellent... to Crop... then you can adjust them separately, rotate them, that type of thing. The third way is the way we did at the beginning... and that is what I call the Vanilla Crop... I'm giving these names, it's probably not helpful... but the Vanilla Crop is, bring in image, let's do it together... we did at the beginning there. I'm going to bring in this one... drag it out, hold 'Shift'... and instead of drawing the shape first, like we did here... and then fill it, we've already got it... we've got a shape, that's a rectangle, it's got a fill... it's set to Fill, we set it to 'Crop'... and then we can adjust the shape and the image. So three ways of doing this similar sort of thing, you get me... two shapes, start with the shape... start with just the image, and switch it to Crop. These two require you changing the Fill to Crop... this one here is more like a traditional kind of mask... where you've got something masking the thing underneath... but in this case the thing's on top, weird Figma, weird. Another thing is, using those techniques... you can do it with text, so... my text, Roboto, how did I get to Roboto? Oh well, Roboto, it is. Font size, upgrades... 'Command Shift' and the full stop, '.' key... did I do that earlier? I'm pretty sure I did. 'Command Shift' on a Mac, 'Ctrl Shift' on PC... and you can do this either way. I'm going to have two of them... you can either do it the two shape method, so I can say, you... now there's an image on top or on bottom? Let's do it with another one, let's do this guy. Image on top, on bottom, that's right... image on top, using square bracket, select both of them... do the same thing, Mask, boom. I can still get in there, double click it... got my shape, my, the inside one... I can still edit the text, it's probably easier to do it over here. Is the text editable? Turns out it's not. I assumed it would be, "Wait up there, Dan." In that original video I was like... "You can't change the text," you totally can. So I've come back from the future... and I'm going to show you how, thank you, Victoria Burrowdale... who's reviewing the course, and said... "You can totally change the text, Dan," so there we go, we all learn something. So like I did before, this kind of two-part method... where there's an image, and the text... to make sure the image is on the top. So selecting it, I'm going to use my square bracket... to bring it to the front, select both of them... and then click on the mask icon, and we've got this. Now to edit the text you need to be on this part of your layer... it's got the letters that I need to adjust... just switch to the 'Type' tool, that's what I missed... and now I can go in here and say, now it is "Ben." So that's how you adjust the text. Updating the image part is to click on this bit ... that's the image that I brought in... grab my 'Selection' tool, and I can kind of move it around... by just clicking anywhere inside the bounding box... and I can adjust the size of it in here as well. So that's how I adjust the text and the image. Now there's another way, the kind of, that's the two-part method... you've got an image and text separately... and you join them by using that masking icon along the top. The other way, kind of more vanilla way... is grab the 'Type' tool, and it's just, click off on the side here... and let's type in it. Now, instead of having two separate things and combining them... what we can do is... I'm back on my 'Selection' tool, I've got it selected... we can go into 'Fill', and go and click on the color... and I'm going to say, from a solid I'm going to go to image... and I'm going to click on 'Choose Image'... and then I'm going to go pick an image, we can do it that way... yeah, there it goes. The same thing as before... is it's actually a little bit easier to adjust the type... because you can just double click on it... yeah, and adjust it, there we go. So it's just a different way of doing it... the difference here is, watch this, do you see how it adjusted... watch this, so I type in 'O'... can you see, the image kind of expands to fill it... whereas this method over here, the image stays where it is... it doesn't matter how big the text gets, let's delete it. So you can adjust the image in this one... so let's click on it with the 'Selection' tool... because I want to see the fill, and instead of... where it says Image, under Fill, it's kind of expanding. Fill means it's going to expand and contract, depending on the type size. We're going to go to 'Crop', and now... you get a bit more control, like we had in this option here. So there's no right or wrong way... but I can adjust the text, I can adjust the background image. The background image here, like the other masks. Again, remember it's a bit weird... there's no bounding box around the outside... you just kind of click, hold 'Shift'... there you go. So that is masking with text... a tiny little update to my knowledge as well... so there you go, on to the next video. 57. Free image & plugin for Figma: Hi everyone, in this video I'm going to show you... a couple of great places to get commercially usable free images... and I'll also show you the corresponding plug-in... so that we can just kind of click on shapes here... and go, you know what, this one, oh, too good... all right let me show you how it all works. All right, free images... the big place to go is unsplash.com, they're commercially usable... can be used both professionally, commercially, for education... they're pretty amazing, what you can get these days. I don't know how this works, well, I know how it works, they get paid via ads... in kind of upselling to paid ones, but it's pretty spectacular. So Unsplash, and Pexels is another one... if you can't find what you need in Unsplash... if you're working for a big company, do get them to check the details properly... but you'll see here, the Unsplash license... it's pretty clear what you can and can't do with them... and you can do quite a bit. They appreciate attribution, so it might be... somewhere that you say, "Hey, this was the photographer... thanks for the free image." So let's say that, there's plenty other places... but let's say these two are really good at the moment. It would be even handier if there was a plug-in that connected them up... because, like downloading them... we're not going to cover, right, you go into it, hit download... but imagine if there was a plug-in right into it, "free images." We're going to sort by plugins, I'm in the Community part... there it is, Unsplash, and you can see, well, there's lots of downloads... I've already installed it... man, it's easy to uninstall and install these things... click it once and it's gone, give it a sec. Actually, let's install this one as well... I don't know if it's installed or uninstalled, let's go check it out. "It's so easy, Dan." We've got our plugins, and yes, one's gone... and that one's back, Pexels, I'm hoping it works the same. I've used Unsplash loads, let's have a look... do they work the same way, yeah. Click once, they install. If you've got a shape first though-- let's delete that one... it can take a little while... don't keep smashing on these, because it takes a little while... sometimes to kind of appear over here. So let's say I've got this selection, and I type in "headphones"... it'll go into it, here we go, click once... and it should go inside there, so good. All right, that is free images, look for the plugin... there's probably one for just about everything. All right, that's it for this video... I'll see you in the next one. 58. Do you need Photoshop for UX design in Figma: Hi everyone. In this video we're going to talk about do I need Photoshop as a UX Designer? Spoiler, I think you do. But let's talk about how they work together. What's good about Figma and what you could do in Photoshop. We're going to cover things like scaling down images ready for Figma. We will look at clay cutting images. Boom. Throwing them into Figma. Here is my little headphones here, cutting out people and probably some of the monotony and let Photoshop take a lot of the work away for like extending backgrounds. You've got places for text and logos and filling hero image boards. All of that and more in this tutorial. Let's jump in. To get started, let's answer the biggest question, do I need Photoshop skills to become a UX designer or UI designer? My humble opinion is yes. It's just my opinion. It's just too hard to get away from. Figma does some basic stuff. We've done like, click on an image, go into here and you can do like saturation and exposure and stuff. That's what Photoshop does as well. But it's the masking. We can do basic masking, which we've done in this course, but it just doesn't go very far. The other thing for Photoshop is resizing really large images. We've been bringing in these genomes images and just shrinking them down. The file size is really big, so the prototypes start running bad. If you've got a really big mock-up, then all those images do slow things down. The other part is that when you're going to get hired if you aren't already hired and you looking for a job, often there will be advertising like, hey, UX designer role must have, and Figma might be the UX tool or it might be XD or Sketch. They're all very similar. I've got an XD course if you want to do that as well. They'll also have probably Photoshop skills. There is free alternatives to Photoshop. Gimp is a badly named one. The other thing to consider is how do you work with Photoshop? The thing it doesn't do is you can't import Photoshop files. I can't go to My Drafts and go Import and go PSD and click "Open" because it doesn't work at the moment. Check your version. Because what a lot of times happens, this might be you right now. People are using Photoshop to do what we've been doing in this course and it does it okay and lots of people do. Then they hand it over to somebody like me or the new you and they go, "Here you go. I've done it." You're like to prototype this thing, there's no like, Open Photoshop file ED prototyping. You've got to rebuild it, which is no fun. That doesn't work at the moment. Check if there's a plugin, there's not at the moment. PSD to Figma, keep an eye on that one if you do run into it. There might be a solution at some stage. What we end up doing is in Photoshop, just making stuff and then exporting it for Figma. What I want to do is run through a few exercises of what would be awesome. Some of the unique good things about using Photoshop to get into Figma. Now this going to be a bit whirlwind. It's not a Photoshop course. I just want to throw in some stuff because I want to show you how you get files back and forth for the people that are experienced and the people that aren't I want to try and sell you my Photoshop course. I've got a Photoshop essentials and advanced. If you've got some self-taught experience, even the essentials are still pretty good for our self-taught people. If you are pretty advanced, check out my advanced course. Let's do some basics. The first one is just resizing images because they're coming through too big. If we grab that one, it's 1.4 megabytes. I'm going to edit into Photoshop. Again, I'm not going to give you a full tutorial. If you're like, "Hey, he went too fast." I don't want to get into too much tutorial here. The basics are if you go to File and you're looking for this Export As. This is the amazing one for getting file size smaller in the right format. Actually, I want it to be like 500 pixels across because it's going into one of those thumbnails. It's going to be a JPEG and maybe it's going to be 60 percent. Then you export it. I'm going to stick mine on my desktop. You may save that up. Been trying to keep it nice and then you can just import that file. Let's compare the two. Let's grab another one. Where is my desktop? There it is. That same file. Perfectly fine size-wise. It's 38 kilobytes, which is 0.038 megabytes, [inaudible] that is 1.4. You do it that a lot, just tidying up images, getting them smaller. Probably the biggest thing is when you're trying to do masking. It just does it so well in Photoshop. I'm going to use this one here. I'm going to dump it into Photoshop. I'm going to rename the background layer to layer 0. There's this sweet one, look, Remove Background. How good is that? I love showing people who've used Photoshop for a while that button. There is a lots of that stuff creeping around in Photoshop now. If you haven't given yourself some professional development in Photoshop or if you've done, my cool, it's high-five you, you might have already. Ready, high-five. There you go. But if not, even if it's not my courses, go through the what's new in Photoshop. It's on the Adobe site, it'll give you a skim-down version of what's come out since 2004 when you last updated yourself. How do I get this into Figma now? Couple of ways. The way we just did, it's probably a good way because this has transparency. All we really need to do here is go, actually, the size can get smaller, not 100, it's too small. The format just needs to be a PNG. This one will bring through the transparency and that's really what we want. Size-wise doesn't really matter. I'm going to export it, save it onto my desktop. Messy that desktop up and then in Figma, I'm going to go Command Shift K or Control Shift K, and where are we? Just stop. Where was that guy? Come on in. [inaudible] not sure what I did there. Click once, there we go even 1000 pixels is pretty big. Use the K for scaling. Why, you see it. It's already there. I'll do a little demo just to run through it and before. It's a little bit more fluid than the ums and the odds, but anyway, I stuck it in between some stuff here to go, and up. Just try to look cool. That doesn't work on every single one unlike, I found this one is that at night shopping pages to try and impress you, it doesn't work on all of them as well as that. Another one, let's go for people. We're going to be, where is it? Let's cut out this guy. One of the amazing features for Photoshop is the Select Subject. You haven't clicked it, you should, look at that. Again, doesn't work on all people all the time, but I'm going to do it and layer mask, so good. I could go back to my, these things to touch up. I could work on that mask more button. What we could do is we could go back to our File Explore As and do a PNG. If you just mocking things up quickly and not as official, you can say right-click this, the Mask and to say, let's apply that Layer Mask. It's gone, it's destructive editing. That's okay. I can just use my marquee tool. Select around, missed his boot, and just copy, just using Command C or Control C on a PC and I'm just going to paste it. Let's paste it somewhere over here. How good is it? Look at the edges. Didn't look that good in Photoshop. It is amazing. I can't believe how good it is. You get the idea. One last thing that is super handy for people who are using Photoshop that might not know about it, it's like the content away scale stuff, I want to get him back out of here, is you might have an image that just needs to be bigger. I'm going to flip this one around because that's the image that I've decided to use because it was in this list. Let's do this one. I'm going to add this one to Photoshop. The problem with this image is I need more background, happens all the time. When you put text on it, you need to up the top there. There is a couple of ways you can do it in Photoshop. I'm going to use the crop tool, which is the C shortcut. I'm going to turn on the Content-Aware. Content-Aware is amazing in Photoshop. Do it a lot of time looking at the various Content-Aware. There is about four or five of them. If I do that and hit "Enter", you're ready? [inaudible]. It's not great. But it's going to do fine for putting texts over the top. It's really amazing that way. There is another way of doing it, if that doesn't quite work or you get some weird stuff, I'm going to use that crop tool again. I'm going to turn off Content-Aware. I'm just going to make it bigger. Because let's say you want a really big weed banner at the top of our hero image, along the top of your hero image. I'm going to use that rectangle Marquee tool and just grab a chunk of it and then go to Edit. I'm going to use Content-Aware, but this one's Content-Aware Fill. No, not the one I want. I'm going to hit "Escape". I want hit it, "Content-Aware Scale", that one there. I said, Fill. There we go. Scale. Look at that. Hold Shift, while you're dragging that corner. You need to just to like make stuff bigger. It has to be background, the blurry stuff, doesn't work on everything, but that is good. Again, I could just copy and paste this now because I haven't really done any transparency. Copy into Figma, maybe on my desktop version. I've got this nice big hero image. I'm messing things up. Let's go shift to, you get the idea. Let's drag it out, must be weird shape. I'm going to go paste and we'll go in straight and it does. Look how good we are. Some sweet photoshop skills combined with some sweet Figma skills, professional UX designer's Menu. That was a long one. I just wanted to touch on some of the Photoshop things that might be useful if you are already UI user. I know a lot of you already are and I picked some super exciting ones that differently worked in this tutorial main just to see if, come do the course. It's exciting. Cross that over. That is Figma and Photoshop. I'll see you in the next video. 59. Class Project - Images: Hi everyone, it is class project time. Basically, I just want you to add some images... to your mobile Hi-Fi mock-up, and send me a screenshot. So obviously, you're not going to use headphones... unless you're lucky enough to also get headphones, for your brief... whatever your brief said, keep in mind the person, the persona... that you are working for. So appropriate images for them, so here it is... add images to the Hi-Fi, experiment with the plugin as well. So just try any of those plugins about installing images... and keep in mind your brief and persona... when you are choosing images. Take a screenshot of all the pages that have images, and upload it... also share on social media... especially now that we're starting to fill out our website. What you might want to do here... is actually take a screenshot of your brief, and persona as well... when you are uploading it... especially if you're looking for feedback, because - I don't know why I'm turning that off. - but you need to be, you know... this stuff might be helpful, probably not your task flow... but this kind of, yours is going to look different from mine... but where it has your company name... and what it is, especially if you're looking for feedback... because then other people can read it... and know how they're judging your images. That is it, I'll see you in the next video. 60. What is Autolayout & expanding buttons in Figma : Okay. Hi, everyone. In this video, we're going to look at auto layout and expanded buttons. What do they do? This. Okay. Ah, so cool. We can get our button shaped there to wrap around our text. It's called an auto Lut. We'll go a bit further. We'll make this button that's super stretchy and responsive. Ah. Auto louts. So much fun. Alright. Let's jump in. Quickly before we get started, you'll notice that the UI is different, which means this is an update video. I've tried to match the kind of flow of the course as much as I could. There might be some slight differences. But the content is the same. Let's get started. Alright, to get started. I've grabbed this button and put it over here. And just a reminder both my paself and to you is that it's a bit of text sitting on top of a rectangle. Rectangles are fine, but they don't have auto loud. That's what we came for. So to make something an auto loud, I'm going to select both of these two, and there's a button over here that's going to convert it into a frame that has auto loud. That's one of those special powers that Frames has that I mentioned earlier. Click plus. Nothing changed except. Now it's more awesome. Okay. And stretchy. Co. Arolauts are awesome. Now, the interesting thing to be mindful of. I'm going to click off from the background here is check out my layers panel. It's changed. Instead of there being just text happens to be over top of a rectangle, where the rectangle go. Okay? What's happened now is text inside this thing called a frame. Hung in a renamed by double clicking. Let's call this one BTN. Let's call it small, and the icon change as well. That's a new one. So, the rectangle goes away, and it's just text inside of this parent. This parent. Okay, 'cause he's inside of there. It's ways the parent. Okay? He's the boss. He does a lot of things to this text. Like wrapping around it. Also gives it its color. Can you see over here? Is color is in the parent frame. Even though it's on top, it's kind of like a background to the button. What else is in this button? The text. There you go. The next is how to control the padding, 'cause before we just kind of, like, physically moved it around. But now, it's kind of all joined together. So the padding happens when you select our auto layout frame, and it's over here. There's the left and right and the top and bottom. So left and right. Uh, it's actually perfect. But you can change it. Let's change it 32 and 16. I'm going to undo that I liked how it was, but there you can change the padding. A note for the rest of the course that this all the padding here was hidden away. So the rest of the course, if I do show you where it is, it was hidden in an icon here. I'll quickly show you. So the rest of the course, I'm going to say, This is past me. Okay, clicked on this little icon. So I'm going to do that, the rest of the course, because I didn't know any better. But Future Dan does, and he knows that, Hey, let's pull it out. Cause in the original course, I like, why did they hide it in here? And they listened. I doubt they listened to me, but the many users, padding is just on the outside there. If you want to go to individual padding for unique sides, you can just click on that option. Now, the weird thing about padding is that it's actually controlled by the parent, the auto layout frame. Not the text. If I click on the text, no padding. Click on the parent, all the padding. Sure the editor is hating this because it's one side of the video to the other. Okay, but you get the idea. I'm going to click over it. Look. The parent does a lot of the work. The other thing to be mindful of is when you're converting a text box, sometimes it might not expand and contract. It'll depend on this option over here. So you have to actually click on your text. The easiest way is either click on in the layers panel or just double click it to go inside of my auto layout frame, and I've got the text selected, no padding. But I can do things like this. This is the one you want to just double check. If you've stuck to an auto height, which is going to have a fixed width, it just means when you get to the end, it's going to kind of half work, but not fully. It's even worse when it's on this fixed height and width. It's going to go off and it's white text, and it's kind of hanging out down the bottom there. So to fix that. First of all, you need not so much text, and then you need to make sure your text box is this one called auto width. Awesome me. Let's go back let's change this one two per chess. All right. The next thing I want to want to show you is the button that actually stretches when you move it 'cause at the moment, this one doesn't. It's kind of T one, you'll do the most, but if you want a responsive button, that kind of moves on the inside, either just horizontally or vertically, we're going to look at something called resizing, and we're going to look at something called hugging. You can see by the default. If I click on this one, sees hug hug. That is the reason I'm wearing that shirt. It's a bit of a dad joke. Can you see the little icons over here? Okay. It's a UX Design dad joke. There you go. That's where it's from. Hugging and the parent is hugging the contents. Alright, they get the joke. So what I want to do is if I drag it out, it instantly changes to this one called fixed, 'cause I'm saying you be exactly that width, but we still want the button in the middle. So what we need to do is we need to go over to Ard out and there's options here. Where would you like the stuff inside to go? Going to go Center. And now, oh Squidgy There you go. SquigyGiant button. Let's make it yellow. All that color. And the last button is going to be cutting to the chase button. Okay? So we drew a rectangle, put some texts on top of it, select it at all, make it an auto layout. What you'll end up doing is cut to the chase. Now that we know how that works. I'm going to grab the type tool, I'm going to click once, and I'm going to say, button, bottom. Hit escape to come out of it. What I want to do is making this an auto lout. Right click Add auto lout. You'll end up learning that shortcut eventually. Shift D. It's a really good one. Draw some text, hit Shift D on MCL PC, and you're like, it doesn't look like it's worked. Basically, it's created this thing over here, where we've got this parent, and inside of it some text. This one here, we started with text, but as soon as we convert it to auto Lut, can you see the same sort of structure. All that's missing is the parent. Remember, not the actual text. I want to give it a field color of whatever my color is. Okay. Begin the one. There you go. It's just a quicker way of doing it than drawing out the button, especially if you know you want it to be an auto out. We can still go and add our rounded corners. Okay. Too much. And we know we can go and adjust our padding over here. So I might go 24 by eight. Looks good. There you go. So in the future, when you do make buttons, just type out some text. Shift A it or right click it and click auto layout. Add a background color and your rectangle. Actually, what you'll end up doing is draw one button once in this course, and then forever, duplicate it and just use that. Everything is done. And remember, if you need it to be a fixed width. Over here, we need it to be let's say a 130 pixels. That's the size for our buttons. We can either drag it. Can you see, and it switches it from hug to fixed. Or I can undo and just manually say you're fixed, and then I can type it in there. It's going to be one 30. How do I get in the middle? Do you remember? It's like this one. Stays in the middle. How do I do that? Uh huh. You remember the constraints, this is little option here. Ooh. There we go. It's one 30 pixels wide. The hugging the top and the bottom. I've left that. I don't need a fixed height. You might need it. What it means later on if I make a button, and it needs to be, I don't know. 200. It'll shuffle to the middle. There you go. Getting kind of advanced in the essentials course, but feel like we're ready for it. And just to recap the changes. So hugging has moved up here to the frame section. Auto lay it now has padding visible. You don't have to go and click in an icon. And same with constraints that looks a little bit different. Yeah, mostly the same. One other thing is that in the past, before the update is often, I'd get the rectangle tool. And I get my text tool. And what I do is convert it to a frame first. So I go right click, convert it to a frame, and then click Auto Lt. That's fine. You can jump straight to that. You don't need to convert it to a frame first. Go straight to Auto Lut, and it does both of those jobs for us. Nice. Anything else? No. That is the update. I'll update the next video as well. And just so you know, future Dan is doing good. He has no regrets about the Dorky shirt he made. I kind of do hug contents. Anyway, let's get onto another video. 61. Class project 11 - Buttons: Hi everyone, class project time. Just a simple one. You're going to draw three buttons for me, for your own project that you're working on. Two of the expanding buttons. Which is the ones that when you type they expand. Two of those and one of the stretchy ones. Make it a purchase button, because we're going to use this later on on our checkout page just to practice those skills. I like totally this is some of the trickiest stuff we're going to do in Figma. If you do find it difficult and you find tips and tricks that help to maybe work better or can explain it to somebody else better, let me know in the comments. Let others know in the comments because I find that hard one to explain. Drop your own notes below if you do find a better way of explaining it, make those three buttons. For this one, you don't need to upload it to social media. It's not that exciting. What I want to do though is a curveball for the little more. Make an outline one that doesn't have a fill, even if you don't like it. That's when you do the practice. Go, just upload it to the assignments, but not any other social media. Go make three buttons, and I'll see you in the next video. 62. Auto Layout for spacing: Hey everyone. In this video we're going to look at auto layout and take it a bit further than the last video. The last video we just use it for a stretchy button. But in this one we're going to look at grouping lots of items together and stretching that big group, which this finding another, another option in my navigation. See it reshuffled, made the box bigger. I can delete it, gets it smaller. So it's kinda like combining those smart selection features we looked at earlier, along with some fancy new add auto-layout features. So let's jump in and use auto layout for spacing. Hi everyone. Hey, are you will notice the interface in this video is a little different because this is an update video. The order layouts changed quite a bit. You noticed in the last video we use audio layout and you did hugging okay, For the button. And I noticed that everyone found hugging where it had moved to good work. But in this video, auto-layout has just changed so much that I'm going to re-record it. That's why things look different and why i sound different, more, older, more mature. Anyway, get on with the video, dan. Alright, so first thing is you're going to watch me type some stuff. We'll do it in fast mode. Go. Alright, I type some stuff and I'm going to left align it. And the only thing for what we're gonna do is you need to make sure that the type is in separate text boxes. Don't just draw one text box that has it all in the input returns and it's not going to work for the auto-layout tricks we wanna do. Okay, so just have separate text boxes. I just duplicated them by holding Alt and drag and then hit Command D to get another one, and then just change the text. Here we go. Okay, so let's talk about auto layout. I've got these bits and pieces now and we've used smart selection before. If I line these up, I can do things like drag them around and they adjust. So smart, so looks cool. I can do the padding, can be used in a very similar way with a few extra perks. So I'm going to convert it into an order layout, a little plus there. And you'll notice that over here, I've got now a parent frame, okay, on auto layout frame, that's this little icon here with the little lines, okay, and inside it are these guys. And basically I can do what I did with Smart select. I can go features, move around. I can hit Command D to get another one of them and it adjusts super easy. But I have a lot more control over here. So you notice over here I just have text features. Okay, What I wanna do is click the parent case, click the frame 12. Poorly named. I'm going to call this one nav. Okay, And over here, auto-layout has all these extra features. That's why we had to update this video is that this changed quite a bit. So we can say I want them all stacked vertically or horizontally. You can wrap them, but that's kinda more in advanced feature. We'll do that later on in the advanced course. But we can do the nice things like the gap between. So we still have this full control. You can type it in eight, or you can drag this icon and this icon here, click hold drag. You can still do it onscreen like we do with Smart select. One of the other perks of using auto layout like this is that we can do padding. So let's give the background of this auto layout. So I've got the parents selected, see nav. I'm going to say I'll give it a fill. Defaults to white, which is not helpful. I'm going to pick one of the colors. And now they go from the background. Click on this, I got, I've got some padding. So I'm going to horizontal and vertical padding. So you can see there's a lot of similarities between Smart select, but orderly has some perks and it's persistent means we can they stay around. I can add padding. And the other nice thing about the persistent of oral outs. Let's say I make a new item or new menu or something. But we want the same features. We want the padding and a background color and the spacing. What it can do is say you are not allowed. Okay, then I can select this one, right-click it and say Copy Paste as copy the properties like these, right-click again, copy paste as paste. And it grabs all of those features there and you can get things consistent. Now, you can do more and more with auto layouts. We go really deepen the advanced course with auto layout. But for the moment, a lot of the use cases are buttons and these kinda like little nav features here, consistent. And we get to control the spacing at the padding, at the margins at the spacing. And we can add and remove items really easily and it all contracts and expands. It's awesome. Now, some of the things in the previous video that I made, the original one that people had problems with, that you might have a problem with is sometimes people do this. They'll go copy and paste. And it's ended up outside of here. Now like why I wanted to go in there trying to do it and it's kind of outside of it. There's couple of things. The easiest way to duplicate something in here is you can select it, okay, not the text. If I double-click too many times, I copy and paste and I just get more text. Obviously, if I hit Escape once kinda comes out of that ticks editing mode. Now if I copy and paste it, it'll do the whole unit. Or what I do the most is I go once to click the whole thing, double-click to get the bit that I want inside of here and just hit command D, Control D on a PC and just duplicates it, then go and change it. If it does for some reason get out, you can actually just drag it back. Can you see the lines there? Okay, here it goes. If it's still not working, have a look at your layers panel over here. So I've got this frame, which is my outside frame for my phone. Okay. Inside of here, I've got this badly named frame 12 and my nav sometimes home can end up like out here. And he ended up in there. It was weird. Okay. Can you see it's way out here, my Layers panel if I want it to be inside of this, okay, inside a nav, what I can do is say you, my friend, are between cotton caught. There he is. He's in the right spot. You go. Order layouts are awesome. Alright, that is it. Onto the next video. 63. How to use constraints in figma: Hi everyone. In this video, we're going to look at something called constraints. Constraints allow us to do somethings like this. Can you see the navigation along the top? It allows us to say, stick to the top left, you stick to the top right. That's backwards, but you get the idea. We'll throw in a little bit of Auto Layout at the end of this course as well as a combination, to make your brain explode, join me in this constraints extravaganza. Let's start off with some basic stuff. Let's just do a couple of shapes, I'll fast forward this. I've got some shapes and let's say that I want to make an iPad version of this. I'm going to duplicate this just because I'm going to wreck it. I\ll call this band my iPad version and by default, if I grab the edge of this and stretch it out, it does some stuff. You're like, Why didn't they just stay there? It's trying to be responsive and it's evenly spreading and you're like, it's not what I want, I just want you to stick in the top right-hand corner like Dan showed us. We're going to look at constraints. Constraints are always there, we've got them already. Let's say this, the word Scott, you can see is constrained to the top left. These guys here, also top-left, that's not what I want. Let's start with this triangle here. I'm going to say you're constrained to the top right of the top right. Now if I drag it, look what happens, that guy sticks right to the edge. What I might do is group these guys but I'm going to use framing instead. Command option G or control alt G. To make it a frame, let's call this my icons and I'm going to say instead of constraining to the top-left, constrain to the top right so they're all together, and I drag them out, look at that, they constrain. That's the constraints. You can get it to stick to the bottom, let's do it for this guy. We can say you are constrained to the bottom left, which is not going to work. It's what I want, let's turn it off first. Let's go back to the top. If I go into here and I drag it out, you're like, No, I want you to be constrained to the bottom left and it's going to work, watch this. Hey, stuck to the bottom but I want it to actually stretch across all of them. You can say you're not just stuck to the left or the right, you can do both. It's hard to click these things, you can do them in here, but you can go left and right. Both of them together and the bottom, now watch. Click on this, constraint in the bottom. That's what constraints are. We're going to use them for navigation, that's a really good use case. I use them a lot for our cards, which we'll do some nice use cases in a little bit, but that's the basics. The things to note here is, let me zoom in, can you see the little dotted lines there? It is going from this to the right. It should go all the way to the edge, a little bug. It's showing that, if I go to the left, you can see it over there. You can see the beginning of it there. It's constrained to the outside frame, you won't see constraints if this guy, copy and paste, is outside of a frame. He's in no man's land, look, no constraints, he's gone. When I move him back on, he's got constraints. He needs a parent frame, full constraints to work. That's one thing. At the moment we're going all the way out to this beginning frame. Often what will happen is you'll put all of this stuff in its own frame, maybe call it nav, in it's own parent frame. Maybe call it nav so that these guys are all jammed inside of this nice little group. Let's do that, my icons are joined. I might actually join these two guys together first. Instead of grouping member, we're going to sit it into a frame. These two units here are going to go inside their own frame. Let me just name things, it makes it a little bit clearer, logo. These two guys, inside of a frame place. Maybe we'll draw the frame fist. Let's do it the other way because I'm going to grab my frame tool. We've been converting lots of things into frames. You can start with the frame, that's going to be my navigation and give this frame a background color. It's going to be black in this case, that'll do. I'll use my dark gray, they'll look, which I've realized A isn't that dark, and B is just green. You might have seen earlier on in the course ad you're like, He's just making green, can he tell? I didn't when it was small but when it's big, it needs to be adjusted. We're going to leave that for the moment. I'm going to break it and make it a whole lot less green. Hindu green, then, not all the green. We've got this frame that these logos are inside. The reason they went inside is because I had them selected first then drew a frame, they nestled inside. If they don't, you can just drag them inside. This is going to be my nav. I think about this as instead of using the outside of the entire thing, because now watch this. If I adjust the whole frame, it doesn't work, but it means I can use this as a nice copy and paste unit and move it around. But what I need to do is adjust it again so that these guys are in the top right of this frame. Let's give it a go. I'm going to undo, go back to this one. We've got our nav, which has got these two things inside of it. The logo is defaulting to the top-left, that's fine. The icons though go top right. Now, when I just you, bigger or smaller, that's what constraints are for. That's how you end up with these mad things that you've borrowed off other people and you like, It's so confusing. It is, it is a little bit. The thing to remember is that they need to be inside of a frame. Remember when we had them out here? Couldn't see the constraints. You can use the outside, like the whole frame that we're using, what we're calling the iPad or the mobile, it's up to you but in this case, I've made a frame that says nav, and those guys are inside. Now I want you to take a pause, did you get it? Was that okay? If you were like, Men, I didn't follow much of that. I want you to maybe skip to the next video now. If you were like, I'm following it, keep going, we're going to go one level deeper, more Inception. We're going to combine a couple of things, we're going to combine the constraints which we just learned with something else we learned. Remember the auto layout? Auto layout was that navigation there and we use auto layout for these buttons here. Let's use auto layout for these guys. I'm going to go inside, find my icons, there they are, and instead of this being a frame, I'm going to make an auto layout. Remember one of the cool things about auto layout, it's a smart selection. Click on that, now I can go into here and I can adjust this really easily, I can play with the order. I can add another one, command D. Look at that and because it's constrained to the top right, it's pushed it that way. Combining stuff, auto layout's separate from constraints but if you combine them, you can get some fancy stuff and you will get some fancy stuff from other people and now you know how it's constructed maybe. Are you thinking what I'm thinking? This one, if I grab the iPad size and I make it iPaddy size but this doesn't go and I can go on there and I can do that and it's perfect. Could we just do what we did down the bottom here? Say for the navigation, you are top-left. What if I said you were top left and right? Then we grab this whole frame and it does what this one did and goes left and right. This is too much. Forget I said that, I will see you on the next video. We'll do a few more examples together of real-world auto layout mixing with constraints and all that goodness because it's good stuff, but it's good to know under the next video. 64. Combining Nested frames Auto Layout & Constraints in Figma: Hi everyone. In this video we are going to combine a few features that we've already learned. Okay, We are going to look at nesting frames within frames. We're going to look at auto out constraints. We're going to make something like this, where it is a nice little card, you can see it here. But it's scalable and reasonable, okay? And I can change the text, okay? So we're going to combine the auto out stuff. Remember we did buttons, so the box adjusts and get bigger and smaller, plus the constraints which locks it in down the bottom. Just another use case to hopefully deepen our understanding of some of these things we've been learning. It gets really cool as well once you've done that. If I go and copy and paste it, say to our mobile version, let's say that I really don't like my features in this one. Okay, I'm going to change them up. I'm going to use a different one. Okay? But you can see look, getting a rear for mobile. Okay. Text adjusts, everything's the same, it's reusable and it's good to see kind of another use case of some of those things we've been learning. All right, let's jump in. I'll show you how to do it all. Al right, to make that combination, we are going to do it on our lonely old desktop. Okay. We haven't done much on this one. And I'm going to use leave this here just so we can recreate it so you know where I'm heading. Okay, we'll change that color box out with an image. So first up, turn on the grid. It's easy. On a Mac, it's control J, G, sorry. Okay. Pc, I can never remember what it is because it's way too hard. But we all remember that other shortcut, Okay, command ford slash, okay? And you can type in grid. And just look at here, right at the top. All right, so I want to draw rectangle and we're learning that rectangles are just like frames, but with extra benefits. Instead of using the rectangle tool, I often will start with a frame. Okay? So I'm going to start with this frame. I'm going to go up maybe four of these. Give it a background film, Use one of my styles. Okay, we'll start with that one. Now I'm going to turn cons off. Okay, you noticed there that the shortcut was already kind of pre loaded when I went to a command for slash control forward slash because it remembers the last thing. So you can actually kind of toggle between these things. I just had enter on my keyboard. It doesn't work for every single shortcut, but a lot of them do just toggle on and off. All right, so we've got this, it's a frame, Let's call it, I'm going to call it card feature. Okay? Now I want to put that rectangle in the inside. Okay, That one there. Let's move across, grab me frame again. I could use a rectangle tool as Just use a frame. Okay. I'm going to track this out roughly like this. Give it a fill. Actually pick a color and I'm going to break it and switch it to black. I'm going to use my sweet shortcut of just five along the top. You see it changes the layer to 50% Now, inside of this thing, we're going to call this text block. I don't know, Let's grab the text. I'm putting it inside this thing and on top only to save time. Because remember if we made a rectangle in a text block and then we try and add things like constraints and auto layout, which I want, okay, because I want it to be stretchy. Remember we can update that text. And it gets bigger and smaller. It will do it anyway. It'll convert it to a frame, so I might as well start with a frame and put the text inside of it, so I got to selected. If I click there, you'll notice that it's gone inside that frame. You can drag it in afterwards. Let's go comfort. Now, a couple of things. That bullet point just appeared because I used the hyphen, that one there and it assumes that you mean a bullet point. So it's gone and automatically changed it. If yours does change and you don't want it to, you can go turn bullets off under the text thing. Now, a problem with using that sweet shortcut of 50% we've kind of learned this before, That this frame, parent frame 50% does everything inside of it. 50% That's not what I want, okay? Because it's the Texas getting washed out. So I'm going to go back to 100% Who remembers how to go back to 100% and zero on your keyboard? Okay. And actually just this part of it, just the fill, not the stroke, just the fill down to 50%. Okay, we're being a bit more specific. We've got this frame, if I re order it, it's not quite working. Let's get the first bit going, let's get this frame to stick to this side, okay? And that is when we're looking at constraints. There's like three big topics here, right? There's nested frames, which we've already done. So I've got this outer frame rectangle with this inner frame, more rectangles with text inside of it. That bit done. We're also talking about constraints, and so I want this parent thing to actually stick to the right. Now, grab the parent frame, squirg it around. Way, in my case, probably I want it to be the bottom because not the top. Okay. Because I'm going to resize some different, different layouts. So I'm going to say text block, you are stuck to the bottom. Now, when you are new, you will find that it's very hard to know which of these you'll end up just going. This one and playing around with it, testing it, this one. Testing it inside one. Okay. So don't worry if you are that person. That's what everyone is. After a while, you get used to it. All right? So that's doing that part. Next bit I want to do is I want to say, you know, I want two of these and the next one's going to be, you know, recycling. Okay, so I want it to adjust. So that is nothing to do with constraints, it is to do with the auto layout. Now that's kind of confusing because we've used auto layout to do that fun stuff in the last videos. Okay, Were added things and replaced things. But remember we also used auto layout for that button that just got bigger and smaller. Same feature, a couple of different uses. So let's add a auto layout. And it's shrunk it up, which I'll fix in a second. But hopefully now it's going to work and it's pushing out from that way because the parent is stuck on the right. Okay, let's get that bit of spacing right again. Now, I'm going to undo it until can you notice that like basically what it wants to do is put even spacing either side. I'm going to do. There you go. So say you want to retain this. I don't really like it that long, but I wanted to show you an extra little feature in here while we're here. Okay, it is the inspect we're going to use inspect later on in the course. More everyone little update to Figma, they have gone and changed things. It used to say design, prototype, and inspect. I was going to show you inspect, but they've moved it to this thing here now called Dev mode. Dev mode, we're not going to go into right now, we'll go into later in the course. It's a bit more advanced and it requires paid access to Figma. I'm going to show you an alternative for that that does exactly what we needed to do without all the extras. If you do want to go down this route, you've got to move this from drafts, okay. We're in drafts currently. Move it into one of your paid teams and then demode will be enabled and you'll be able to see inspect. I'm pretty sure I haven't mentioned this anywhere else in the course going to inspect, but if you do see me clicking on Inspect here, it's a Dev mode only option. Now that is paid plan, how do we get around it? What I want to do is show you how we can see the differences. Remade this real quick. Because you can see, because it's purple. Now I want to see the distance between the top and the bottom here, the margins. Okay? To do that, let's click on the thing we want to find the information for. Let's click on side of frame, there's the word comfort. I want to hold down the option key on a Mac OlkaPC and watch this. If I just move my mouse, I'm not clicking anything, I'm just holding that key down. You're on a PC, hold down Alt. If you're on a Mac hold down option, just move your way around. You can see, look, the word comfort from the top and the bottom is 15 and it's 16 left and right from the top of the frame. This outer frame, you can see it's 142. Just hold that key down to get the measurements. That's what we wanted and that's what we used to go in to inspect for. But there's a handy easy option like this. The only trick with it is you need to click on the thing you want measurements for. If I want to click on this outside frame here, can get measurements for it. Okay, that's holding down option key Now. Now I'll get the measurements from the top to the frame. Click on the text, which sometimes is easier in the layers panel, and hold the optional key. I'll get the measurements from the top of the frame to the text. Just make sure you're very purposeful about the thing you select. If I click this frame, watch this. If I hold down that same key, okay, 64 pixels from the side, 51 on that side. There you go. That's the work around. But again, we'll do demo later in the course. The other thing is I'm giving you shortcuts like that option Alt. Just double check. I haven't seen a problem with this, but a few keyboard shortcut that try to internationalized Figma a lot more. Instead of just using like I do a Western art keyboard, they're changing some shortcuts. So they're not as universal as they should be because some people don't have some of the keys. What you can do is click on the question mark. Go to keyboard shortcuts for this particular one, whereas I think it's under cursor. You can see here measure two selection. That's the thing we just did. You can see the look that's the old option key. Okay, so check yours if feels like mind don't work. I don't have an option key. You should have an option key. But if you don't for any future stuff, just have a look in here and like, yeah, go to the keyboard shortcuts and see if you can find the one you're looking for that Dan mentioned. Okay, And you might find the difference, okay, for your Mac Px or for your different keyboard. All right, one last thing is just a reminder. I'm going to go in here now and say, we're going to enter the padding for this here, okay? And it used to be all hidden in here, but now it's expanded, right? I think I've mentioned this before in an update. Okay, But it's just not hidden there. The individual padding is if we want different from the left and the right k, there's still in there. But the version that kind of, that I recorded this course with kind of had it all tied in these little dots here. But now it's all expanded. Look horizontal padding. Vertical padding. Just a small change. And I just thought I'd remind you 'cause I'm already in here updating the video. All right, carry on with the yellow square in the other video, enjoy. Auto can only be applied to frames. Let's go to what are we doing? I can't remember. Oh yeah. Auto. There we go. And it just jumped it in there and you're like, don't worry, I can find the padding. Where's that padding? Whoa, it's hiding in here. You kind of can do it on mixed. Okay, that's all of the padding. This one here shows you the individual ones. So what was it? 56. Let's just do 50, 16. Come on. All right, so hopefully now let's give it a go. It adjusts, we can make more than one version. To turn my columns back on. Look at that. Let's make one command D control on a PC and this one here is going to be recycling and the other one is going to be base. Okay, reusable, Awesome, adjustable. Then then when I go, I can need these guys to go to my mobile version. Okay. Go over to this. I'm making an say I'm making an alternative product details page because I've decided that I don't like that layout. Okay, I'm going to go into here actually just paste one of them. Got too many a go away. Let's turn on the grids for this one. Same shortcut, I'm using command forward slash, or control forward slash. Let's turn them all off. Good work. None of them are coming on for this one, I don't know why. So now I can go you and I can say, actually I want this one to be on mobile maybe like that. Do you get the point? I guess it's a lot of work. It's not a lot of work. Once you've got a bit of experience, that's, you know, that'll be your journey. There'll be a time where you actually will spend half a day getting this thing to actually work. And you're like, it's not worth it. It took me half a day. I could just draw some rectangles then. And then there'll be a point where you're like, actually I need to reuse this across a bunch of different things. It's worth spending the time. Okay. Yeah, let's, there we go, let's switch out images and tidy that part up because I want it to be like at the beginning of this image inside, I'm going to show you something. That problem, not really a problem, the outside card feature frame. Okay, I'm going to say I don't want to fill in here. I want a image great to go a bit fast with some of the things. I don't know, we're starting to get a bit better. Aren't we getting a little bit faster? Okay. I've got my thing, my image in here, it's stretchy, which is awesome. The problem is the framing is not right. Okay. So, I'm going to have to switch it from Phil to crop. Okay? And I'm just going to drag this downholding shift. Okay? So it goes in a straight line. Great. The trouble is, my stretchiness is broken a bit. The text is still good, but the image doesn't adjust. It's just one of the drawbacks of switching it to crop. Okay. If I do decide to go all right, like this, I have to select the outside frame. Click on my image and go, Phil Crop, drag it down. There's a bit of that going on. There might be a nicer solution later on in Figma in the future, but that's the kind of solution at the moment. So I'm going to switch out these images. All right, so I switched out the images and one of the other perks is, wow, another perks. Just throwing another level on there is if I select all of these, I could turn into an auto out. It's not what I need right now, you know, could restack them, play with the adjustments. But we're going to go back to just plain old smart selection. So selecting them all, they all happen to be the right spacing apart. You could use the tidy up if they're not, but we can adjust the spacings and probably the funniest part is adjusting these around. So remember just click the dot once and then drag it around. Need a new one command D, control D on a PC. Super good. Alright, that is it. So I hope it was useful to see Club another working version of some of the stuff we've already learned. To maybe hope, deepen our understanding of things like nested frames and constraints and auto lout. Al right? That it's going to be it. I will see you in the next video, friends. 65. Adding Text Box Autoheight to Autolayout in Figma: Hi everyone. In this video, we are going to cover something that we already know, called an auto layout. We're going to do something called a double auto layout. That's a name I made up. But we're also going to look at something that I didn't make up, something called auto height for text boxes. The auto layout part is the stuff we already know. It means we can reorder these things. We can duplicate them. We can play around with the spacing of them. That's one of the pixel order layout. We're going to double down on the auto layout so that when we adjust things like text, add more stuff. Can you see it? Look, it expands out and pushes the rest of them out. That is something called auto height on a text box. Let's jump in, and I'll show you how to make it. To get started for this one, I'm going to duplicate this frame, make a reviews page and just get the working parts together. I'm going to do it in speed mode. I'll see you in a sec. We're paused here, and we just got started. I'm like, can't hang the gray. Adjusting your presets, you can go in here, and you can say actually way too green then, and I probably want it to be darker or so. Here we go. Here to green. Now it's adjusted there and anywhere else I've used it. Wherever else have I used it. Here we go doesn't mean you there. Now, speed designing. We're back in. This [inaudible] looks so good. Back on. You're back. That is my little review thing. What I want to do, like at the beginning there, I want this to be able to stretch up and down and play with the spacing. We're going to do a double auto layout. To do the double auto layout, actually we're going to start with auto height. We ignored this and the earlier one. You might be like, "Hey, you didn't tell us what that one did." This one here, Auto Width, we know that goes on forever that way. This one here, it's like a fixed size. That means that when I draw it out, it's got a height. The text can expand out of it, but that's the height, there is a fixed height on that. What we're going to do, is do an option. There is this one here. It's a fixed width, but an automatic height. You see the cool thing about it, it sucked that up to the bottom there and just means the height is going to get bigger. See the height gets bigger? That's going to be handy because that blue box is going to be what pushes the outside frame out. Basically, it's exactly like we did with these things. This one pushes left and right so it's pinned. We've used the constraints to the right and the bottom. This one's going to do something slightly different. We need this parent frame to be auto height, let's call this one Reviews. We need this parent like we did before, with the light transparent black box, we said make it auto height and it worked. It works, it is going to work. Actually see if it works without anything else, this guy is hugging contents. My auto height box, can you get bigger? It gets, it works, job done except with this stuff. What it's saying is, when you've got more than one object, we're back to that list. Remember that nav list we made? I'm zooming out. Where is that nav list? It is there. Remember we had a couple of different things. When we do one thing, it just works like that. When we have a couple of things, it ends up trying to stack them or we can go left or right and we're great. We went up and down for this one, but all of these objects need to be one group, so I'm going to undo. Lot's of undoing. This all the way up. Basically, what I wanted to do is stack just this part and all of this top stuff. I'm going to grab a u and all of that and just make it a unit. I could group it. I could turn it into a frame. Let's turn it into a frame. Let's go, you are a frame. A slightly different way I'm doing it over here in the Layers panel, or you can right-click it here, or use your shortcut. Now there's actually only two things in this list. It's going to go now parent frame. Let's make you Auto Layout, suck that in from that side there. Remember it's to hug the contents like my t-shirt. This text box here just needs to help push this out if you need it to be a certain width. It's still the flexible height or Auto Height. Now if I have somebody that has a really long review, it adjusts, nicer. That one there is really handy, especially for this type of big boxy texty stuff. Let's get it to be more than one. We've done an auto layout already and we used it mainly to stack these two things inside. Now, we're going to do some more stacking, so we're back to our double auto layout. We've got this thing here, it's frame, but it's being converted into this auto layout, which is going up and down. What we're going to do is explain that this parent container, auto layouts the things inside of it. What we're going to need is a parent container for two of these. These two, the inside guys, we need a frame around the outside and we can do that by saying, let's create an auto layout. This is the double auto layout that I was mentioning. This review just here, let's say this one, uses auto layout to stack these things inside of this. This outside auto layout stacks, these guys who happen to be also auto layouts but don't have to be. I've got this one, I need another one. I'm going to go, you, select him, Command D. When you're using auto layout, the little pink dot appears which it did, it's useful. But Command D, Command D. Look how good we are and the nice things about it, again, we can apply it with the spacing. We can drag it, here we go. Type it in using 24. When I adjust, copy and paste a couple of them. I don't know what it's doing. Select the text. I don't know why it's not selecting text. Nothing's working. I think it might be frozen. It does happen people, yours might freeze a lot more than mine. This is like the first time mine's frozen. I'm going to close it and open it back up. I'll be back in a sec. We're back. Let's see if it fixed it. Paste, paste, paste. It's working again. We went a bit deeper on this one, hopefully again to help explain some of the fancy stuff you see about Figma around in this like, oh my goodness imagine if you could do that, we know how now. We combine two things, there is new order height for text box, and plus, we've gone two layers deep auto layout. There's an auto layout operating inside of this frame but there's also one operating on the total outside. I'm going to call this one our Review Stack. That is going to be it for this video. I will see you in the next one. 66. Class Project 12 - Responsive Design: Hi everyone, it is time for your class project. I'm calling it responsive design. I just want you to build the three things that we've built. You might have already done it. There's a mobile menu, a feature card, and the review cards. Basically, what we've done so far. If you've been just watching, we need to start doing the doing. The mobile mean use this one here. Remember we can adjust these things and they move around. We can duplicate them and they adjust size. Make something like that with the home cat features and account. It doesn't have to look exactly like mine, but just the same mechanics, that auto-layout. The feature cards, do this for your desktop view. Have a look. These ones here, remember they stick down the bottom and move around. Now it's up to you. The design doesn't have to look like mine, but I want that mechanics where there's some lockup bottom unit down here. Stick to mine closely if you're feeling a little under confident, because you can follow along, but if you're feeling brave, get fancy. The last thing is the reviews. These things here. I want you to see if you can make this. Make one and see if you can make multiple ones. Now with this one one, there is an optional. I don't have to do it, but I want you to see if you can because at the moment these ones here are responsive-ish. At the bottom is responsive, but this text-box doesn't come along for the ride. I want you to see, and see if you can do that. That's your bonus extra. You don't have to do it, because I haven't really explicitly shown you, but hey, hopefully there's a little bit of teaching you to fish and you might be able to work it out. Click everything. What I want you to do is if you do figure it out, let people know in the comments for the people that either run into problems, all the problems that you run into, and how you got over them. Helping others is often the best way to remember this stuff yourself, so give it a crack and just screenshot them all. We still can't or Figma doesn't allow recordings of it. I'm just going to have to assume that the screenshots are responsive, but take a screenshot of them all, and upload them to the project's assignments comments. Also share them on social media as well. I love to see what you're doing and maybe get some feedback from others. All right, class project. Go do that and I'll see you in the next video. 67. Nice drop shadow & Inner drop shadow effects in Figma: Hi everyone, in this video we're going to start looking at effects in Figma. Now, let's just skip drop shadow. Where's drop shadow, there you go, drop shadow on text, very exciting. Stands off from the image there. I'm going to try and add a little bit more value. This one here has two drop shadows applied to it. We're going to look at some inner shadow stuff with two of them on there for some interfacey stuff, see here, there's a little bit of extra value in here, so jump in with me, let's get started. Let's talk about drop shadows first. Anything selected: fonts, buttons, rectangles, frames, and just down here the effects. Hit "Plus" defaults to Drop shadow, and we have a drop shadow. What I find with drop shadows is, I guess I'm trying to add a little bit more than just, there's the drop shadow, to adjust it, click the little "Icon" next to it. Can you get a bit more? You can play around with obviously the transparency, like how dark it is, can we go back. Now, I find these good to be scrubbed rather than typed in swatches, X, Y, Blur, Spread, you can just hover above them and can you see, you can drag them around. A nice drop shadow looks good at zero and a little bit of Y. This is my opinion. I'm using the up and down arrow holding shift as well. Just something subtle, not so subtle in, just to get it to stain off from the background. Now, don't be afraid, you can add more than one drop shadow. Let's say that you have a fill drop shadow which is just a bit bigger, can you see that? But more wafty. I've got this one. I'm going to get it to stick down a bit further. I'm going to lower the opacity using my down arrow. I'll have one that lifts it off in general from the background, but then a nice little sharp one on top so you can add more than one. Cool. It's going to here, and this one, it's a duplicate of the original, so I'm actually going to turn it down to two, blur, get it down nice and small, drag, something like that. Crank it up a little bit, this bit will look good then, maybe down to one. Now, the actual numbers here will change depending on the size of your objects. You know it's really big, you have to put more on, if it's pretty small, you put less on. But know that you can't add more than one, so let's turn that on and off. What do you think? Eyeball on. That's just on with it, that's the big wafty one, and this is just that little extra key light or little extra thing around the outside. Obviously, it's great for takes, my takes stands off the background. Actually, let's switch it out. Let's get you, my friend, background image, say the exposure and the contrast isn't enough, and you have to use it for the text. The text, you can do a double on that as well, I guess the effect you're looking for generally is that nobody notices. If someone notices your drop shadow, you've gone too far. Sharp, lower it down and lower that down. Now, one thing I didn't cover was the spread, so I've got this. Let's go to the blur right up. The spread is how far it starts, it's still got, earth and six, blur, which is this little bit, but it starts way out here. That's the spread. I don't often touch the spread, you can. Am I liking this more? I'm not. Let's look at the drop shadow's other cousin, the inner shadow. Now, you're like, when the heck are you going to use the inner shadow like fear from Photoshop land you're like, I never use inner shadow. But when it gets to UI options, you start at the beginning. I've given it away, and I'm going to crank that up to a maximum. Maybe you can go as high as you like and I'll get rounded corners. It's only me. On your keyboard, for a circle hold shift to get it to be perfect, go back to my selection tool, which is V, Pac-Man for no reason. Let's go into picking my light color. This one here, inner shadow, plus drop it down, you haven't got many, less than two videos in this whole course about effects. Inner shadow, they might be more in the future. I got the inner shadow. I'm going to leave it as the default because it wish-wax. I'm going to add another one, change it to inner shadow. It's good for interface things like this. You can spend ages working on these and nobody's going to notice, but I'll notice, you'll notice. What you also do is we've been going left, you can see I can drag it down and left. You can actually get a negative, watch this, if I drag it this way, can you see instead of pushing from the right, it pushes from the left or the opposite of that. I can do something like that just to fill it in. Maybe this one here, I'll get it to go just a bit further that way, just to go further that way, make it look deeper with that slightly differently blur. This one maybe with a drop shadow. Fix drop shadow, do I like it? Maybe needs to go like that.Two, two. You can work on, it's not great. Is too much inner shadow going on. You get the idea? We're going to look at new morphism in a separate video a little bit because it's quite popular and I get asked about it all the time. But inner shadow, drop shadows, know that you can add more than one. They can apply to just about anything in here. Let's jump into the next video. 68. Blur Layer & Background Blur & Image Blur in Figma: Hi everyone, we're going to look at a couple more things. In Figma, we're going to look at blur image, we're going to use it just to fake a bit of depth of field. We will also look at blur background. We're going to make this little thing that hovers above, can you see through it? That blurs the background to help our model pop out and be a bit more with distinct from the background. All right, let's jump in and learn how to do those. We'll start with blur layer and it's useful. Select on this one, I'm going to say Effects and I'm going to use the blur layer. It blurs layers. I'll show you a couple of use cases, let's go. What I'm going to do, let's switch to our desktop view, and you saw at the beginning and we're going to grab these 1,2,3, I'm going to duplicate them. I'm just going rearrange them. You wait there. Just resize them, remember if you use your selection tool to resize them, let's say I make it bigger, this doesn't get bigger. If you use your "K", or switch it over here to scale and make it big and everything comes along for the ride. I've done that and just reorder them. This is like a marketing page, maybe the homepage alternative, anyway. You can select this whole unit, or this whole frame, and then go Effects, I'm going to add a layer blur. That one is going to be slightly out of focus and this one is going to be even more out of focus, you get the idea. Let's got a bit further. Here we go. Add drop shadows. If you're going to add drop shadows, you've got to do them in addition to layer blur. I need to add a drop shadow, and drop shadow, and drop shadow. I can select them all. Can I do them all? No. These two, because they have multiple things selected on them, I can't adjust them altogether. You can if there's a bunch of them and they all have the same thing, watch, these all have the same drop shadow on them. You see, you can adjust them all on the go. Because these guys have multiple things applied to it, that doesn't work. If you do get to it and your like actually I want to copy and paste that across lets of different ones, let's give that a go. Let's get a drop shadow that's not really bad. Still bad. Maybe there's that trick where we playing no man's land you know, when you click, weird place, just go "Copy" on your keyboard and go to "U" and you can paste this one. We've ended up with two of them. That's okay. Paste that one. Which one I'm I deleting? Here we go. They've all got some of the drop shadows, all nice and blurry go. Next let's look at background blur. There's a couple of things that need to happen. You need a background. I'm using the confirmation page, I am putting in an image from the exercise files called map. Which is a map of my local area. I just screenshot that from Google Maps. There is a plug-in for Google Maps, put it in there and be able to adjust it, but it's what I need for the moment, and now we need something on the top. So, I'm going to use a rectangle instead of a frame, to mix things up, confuse everyone. Could be a frame. I'm going to give it a fill of white. This has to be partly transparent. That's part of the deal, not a 100 percent, but partly it could be any color. Let's apply the effect down here. Not the drop shadow I want, background blur and nothing happens. This thing needs to be partially transparent and I can even remember which one it is. I've got a background blur on and I'm pretty sure it's the fill. If I do 50 percent, it's 50 percent, but the background is not blurry, so not that one. It is the fill 50 percent. There we go. I can see halfway through this thing, 50 percent through, and the background is blurred by that amount. You can bring it up or down, just allows you to do things like these pop-up models that just are a little bit clearer and separates itself from the background. They look good in black or white. This is going to be my animation confirmation page remember we did earlier. That's background blur. Let's say this model also has a drop shadow, and you've spent long and hard trying to get that perfect, not 24 just two blur, it's looking all right. Maybe another one that's a bit more waffty. It's going to spread up a little bit, spread, blur. This can be zero, as it's coming out from all directions and the opacity is going to be down to 10 percent. You've got a bunch of stuff going on. We're going to look at creating a style from this so I can show you, I'm going to make it, it's like everything else. It's these little dots, add the plus to add one, it's is going to be called my blur model. Here we go. Look, so that later on when you creating something rectangular to drawing something over the top of everything else, maybe go across this. We can go, it's not going to do everything, but we're going to go to my style background model. As long as I lower the opacity of the fill, 50 percent, you can see it works, actually I want to be white or black. Those are the effects, there's only four. It's all you need, actually that's not all you need. We need lens flare, Figma where's my lens flare? Lens flare, complete. Let's get on to the next video. 69. How to make Neumorphic ui buttons in Figma: Hi, everyone. In this video, we're going to look at these buttons down here. They're neumorphic, it's the term used to describe this pushed out UI style. It's really easy to make in Figma. They look pretty. They have some accessibility problems, but let's jump in and talk about it now in Figma. Before we get started, what is neumorphism or neumorphic design? It's this look. It looks beautiful, it looks like the button's pushed through fabric or gel. It looks beautiful. I rushed out and edited it to lots of designs when I first discovered it. It's basically just a bunch of drop shadows, and I'll show you how to make it in a second. The trouble is that there is a lot of people who hate on it, and I'm one of them now as well. Why? Its accessibility. It's people that are using your device in low light or a bad screen or they've got visual impediments, they're not going to see your button. See that one near the sign up? It's very hard to see, very low contrast. It's outside of the scope of this course, but as a UX designer, you should be looking at accessibility, and especially for this UI design of Figma, looking at something like contrast ratios. Write that down and be that something that you go and look into after this Figma course. Basically, what I do is, it's pretty easy after a while to know what is going to work and what's not. If I squint my eyes at these buttons, look through my eyelashes, they disappear, I can't even tell where they are. They just melt. That's my rudimentary accessibility test. It's not valuable, but squinting your eyes, that is weird, all of that interface disappeared. You need some really strong, maybe just strong enough difference between things, buttons and text. You can do it. I'm going to show you a balanced approach in here in Figma. There is a lots of different flavors of that neumorphism. You can go and google neumorphism and look in Google images and find people's tutorials on them. I'll give you the basic way, because basically all it is I've got this from lift over from another tutorial, I got this button. It can be anything, it can be text button, UI, we're going to use this thing. I've gotten nothing applied to it. All I want to do, is basically it's a bunch of drop shadows. Under Effects, we know that we can add more than one drop shadow. I got my first one here, and basically, there's two to the bottom right and two to the top left. These two to the bottom right are black and these two to the top left are white. Now, the trouble with using white on the top left, is that it matches the background color. Whatever you do, whether it's a dark mode version or a light mode like we're doing, the background can't be solid black or white. The bigger the contrast that bit, if you just do a little hint, let's see how this goes. Let's wing that lens. The background is a bit darker, so I'm going to do two drop shadows down here. I'm going to go off, maybe I'll do two big ones. These numbers will have to adjust depending on what you doing. I'm going to drag that one out to maybe here and the other one to may be about there, blurred. It's nice and blurry. There's one big waft, blurry black one. I'm going to add another one. So there's my big waft black one down there. This one here is going to be a title 1, so maybe one and one, and the blur is going to be maybe two. You can see it adds that depth to it. We did that before, two drop shadows. Now, we need to add two more. That one, it adds it to the top. It's hard to know, you can't rename these ones, so it gets a little tricky, this you need it to be white and you need it to be negative. So we need to go up to that way, you go away. We've already got a sense for it. I'm going to do just a little one. So what? Minus 2, minus 2, turn the blur down to two. We're getting there, right? We'll add another one. It's at the top, go to white. It's going to white 100 percent by default. We're going to tone that down in a second, and this one here is going to be up to the left again, up to the top, and maybe I'll turn the blur up quite a bit. It's cool. That's it. Here's my tutorial, and I'm going to maybe lower the opacity of this, and it's about that back on contrast as well. So let's go a little bit darker. Now it looks worse, so it's a balance. Let me lower the opacity of these ones, 20 percent. This one here, get it down to maybe 40 percent. I'm guessing at these just looking at the document there. I think that top big wafty one, which is the wafty one. I don't know why I use the word wafty one. I got that from Sarah Parkinson, she used to say wafty lads. Look at that, does it look neumorphic? Anyway, I like it because there's still the contrast. I've still got the contrast enough, but I've also added a little bit of that. Now, let me quickly show you, it looks different on different ones. Those settings that I just showed you, it's still like one big shadow, one small shadow that you've done here, black, the two up there, white. But if I change the background color, let's go. Let's do a bad one. It's going to look cool, but the contrast ratio is not going to be probably high enough. So let's do that. You are going to be the same color as the background, here you go, and it shows up, this doesn't work. We can have to go a lot lower on this, so maybe 5, 10, 5. You see, it will depend on what you're doing, what colors. It's not a specific setting. If you following somebody's tutorial and yours is not looking as amazing and neumorphic, you might have to adjust things to fit. I don't know. What do you think? If you are interested in this, google neumorphic design Figma. There's a bunch of stuff in the community that you will be able to just go and download and start using. It's neumorphic, and you can just copy and paste, and start using them and just have a little look. If you're like, "Oh, that looks cool, see how Dan done it. They ain't going to hack his way through it. You saw there. Where is another good one? I don't know. There's a bunch of different ones. Find the look that you like. Make a note of what ethics were applied and how big and how long they are extended, but just be careful. There are times where it is just nice to make nice stuff. But if you want this to be usable and in a practical real-world sense, that button there is not going to pass any accessibility test and just make it hard for your users. But if you are still excited by it like I was when I first saw it, go nuts. Put neumorphism everywhere. Get ready the system, like learning the lens flare when you first learn photoshop, put on everything, but eventually you realize everything needs a lens flare. That is it. I will see you in the next video. 70. Class project - Effects: It's class project time. This is the effects project. I want you to go through and apply at least one of the four different effects to different parts of your InDesign then take a screenshot and upload it. Both the assignments/projects and also on social media. I'd love to see what you made. Even if you decide that you're not going to use background blur or layer blur in your final design, just apply it here now, practice it, use it. Go off and find other tutorials on how to do layer blurs and background blurs to see if you might find some more interesting use cases for it. Experiment. In that same vein, I want you to do one of the Neumorphic designs. It might be a button, it might be some interface just to practice mainly of using Figma's effects. Even if you decide I'm against it, I am one of the people on the picket line, say no to Neumorphic design, that's okay. I just want you to practice it because it can be pretty. Come on. If you're doing it as well, don't just use my settings with two shadows left and right, top and bottom, one is white, one is black, go off and have a look at other tutorials, other people's versions of it, come up with your own, it might be a stroke. Have a look through like, "I want to try and copy that one or this one." Find tutorials, give it a go, take a screenshot, upload it. I'd love to see what you make. If you do follow somebody else's tutorial, when you are sharing it like say on social media, make sure you share the link to the tutorial as well to help other people out there. They might be like, "Man, that is awesome. How did you do it?" Because you're going to get it and explain if you did it yourself, maybe explain the settings, maybe screenshot it. If you started with somebody else's and made adjustments, maybe a link to the tutorial would be helpful as well. I'm not sure why we're back here, but we are. Effects, go off, practice them. I can't wait to see what you make. 71. How to save locally & save history in Figma: Hi everyone. In this video, we're going to look at saving locally on your machine and the save history that is built into Figma. What you've probably realized is Figma doesn't really need to be saved. It's Cloud-based. What is Cloud-based? It means even though I'm using my desktop version, it's saving to the Cloud, saving online case, and it's doing all the time. We didn't need to actually do a proper File Save. There's no like regular Save. There is a Save a local copy. Local copy just means instead of this lovely online version, I'm going to save a file on my desktop, which sometimes is just I feel like I need to do that, email it to someone, archive it. But you'd normally just share it with somebody. But let's just save a local copy. All it does is give you something you can, basically a downloadable version and it's a dot fig. Save it to your desktop, email it to people, it will be all included. When I open it up in Figma, it'll convert it and put it on their Cloud documents and part of their Figma workspace. That's how to do it locally. The other one is version history. Let's say that you get to a point now because basically if you're on the free plan, you get 30 days of rollback of history. It's always recording it. You can find it a couple of ways. Let's have a look at this long way. Saved division history, let's just show the version history. Appears over here, and it shows you all the things that you've done. For free, it'll save up to 30 days with the things. You can see there's been two autosaves in there. Let's go back a few of them, let's go back to, this autosaves. Let's click on this one. How far back was this? Keep an eye on it. Wow, the burning house pot. I can go back to that and see it. Look, it is a huge undo ish, well these histories are saved. For the free version of Figma at the moment, it's 30 days. You can get unlimited if you go to paid. That's one of the parks. Let's say you do want to go back to him you like, man, I've hated everything I've done so far. I want to go back to this. You can click this little dotted line here and say restore this version, and it will go all the way back. But be careful because you're getting rid of all this future stuff. Actually, one thing before we move on, it is a little unclear what to do now because it's got view only, you have to hit this "Done" button to go back out to where you were. I'll show you the version history. Let's say I break this thing. Here we go. I break it and I'm like, man, wish I could go back. I can. Let's go back to one of our versions. I don't use that method. It's easy to have nothing selected and see this little arrow here and it's your version history. Is it quicker? I don't know. Still where I go. I go here and I can roll back to our version. I can hit "Undo" as well. That totally works. Hit "Undo". We'll Command Z. I think it's under here on PC undo. You can do that, but these autosaves are like bigger chunks, big things have happened. If I roll back and I say you and now restore this version, doesn't save a different language, reads exit. Then again you have to hit "Done." Now I'm back to where I was in that history and I'm overriding any future stuff I've done, that's fine. What I like to do is actually name them. What you would have seen in mind that you don't have in yours, is all of these CLEs' names. This is for me and my tutorials, but you could use them for your work as well. Basically, when I've finished something, I like to name it. Let's say that I'm finishing this video here. This video is called how to save locally. So I go plus and I want to name this one. You can add more description in here, but it just saves as later on, I can go, that's where I am at, rather than guessing, was it three hours ago, was it three days ago? That's why. You might use it slightly differently. You might be a minute from Doug or changes to UI or something else significant to yourself and you can roll back there if you need to. Another thing you might do is to duplicate it because if I roll back and start working, I erase the things that I might have done already. That doesn't make sense, does it, Dan? Let's go into version history. Let's say, all right, I am at here and I want to go back to this, but I want to keep this version as well. I don't want to override it. What you can do is you can go to right-click. Let's find one that's a bit earlier, masking and cropping images. Remember back then, that's duplicated. All it's doing is, can you see it's duplicated it into your files? Let's open it. It's made a copy of it at that point in time. Let's have a look at what we're doing. Yeah, remember this part of the course? Now if I go back to my home or you might have to go back into here and go back to files and drops, look, I got another version. I'll have to rename it because that's going to be really confusing. This is my masking images video. It's a separate Figma document at that stage. Does that all make sense? It's growing on me, this working online stuff, cloud-based working because it means I can jump on any computer and all my files are there, log in to Figma, use the browser version. You've got to remember when you are using it that when you get to your point when you're finished, great, why can't I do anything? Click "Done". That's it. Saving histories or great stuff in Figma. 72. What are components in Figma: Hi, everyone. In this video, we're going to look at a component. What is it? Why is it useful? The short version is you've got a master and an instance, this master can control all of his little children which are called instances, but the little children can do stuff that's different. You can see it is green, it's got different text. We can create a master component, do some little overrides, they all feel unique, but when we make a change bold, they all go bold, super helpful. Let's jump in and look at how to make a component. Let's talk components. What are components? They are reusable things. I've got loads of perks, let's start with a nice simple example. I've got this button here, it can be a rectangle, you can do anything into a component. I'm going to use this button because I want to use it more than once. Because the moment I have to go and find it and copy and paste it, so I'm going to create it into what's called a master component. Select on it. It's over here, it's called button, click on this button here. It says Create component, boom. What's changed? Very little except that the icon has changed like undo, redo. It's changed into this little thing. You will see components everywhere, and we'll start using them a little bit now, and then we'll use them, you'll find yourself everything's a component. Why you say? It's because it adds in to my assets panel which is helpful, so we'd been doing exclusively with layers. Let's go to Assets, and have a look on our checkout page there's my little button there. Makes them easy to be reused. Down here, I'm actually, I don't want this one, I want that button over here so I can click hold and drag it out. This is considered an instance of my master component. My master is that original one here. This guy is the ruler of all instances. Let's say that I make this one and I don't want to delete these. They took me ages to drag out. I've got this one, copy paste. I've got three of them. These instances from that original one. Why? This is CO, is this monster here? If I am in this one, if I go inside of it, so I'm going to go back to my layers panel, double-click it to go inside. What I'm looking to do is maybe change some stuff. Maybe I need to make it a different size. Look, they're all connected. That is the power of having components, the master and the instance, or the parent and child. This is called the mass, the main, and early versions of Figma. You'll hear me call it main quite a bit by accident, and it's now called master. Same different name. Cool. That is one perk. Another perk is that you can actually do some variations on these. You can say actually this one here, I'm going to change to this color. The cool thing about it is I can make some slight amines to my instances, some variations on it. But watch this, it's still controlled so I can make everything a little bit individual but control some of the big things like the sizes and this scale. I can go into the font here and change it to be light. You see they all go light. You're like, "Oh, that's cool." What if I need this button to say not purchase but delete? Instances can have some unique parts to them. Color, I've changed the text, but there's some parts that the master will control. It's pretty well implemented here in Figma. Let's say that you've got here in your and actually I need to reset it back. I want to go back to be like the master, I can right-click it and say, let's go to reset all overrides. Overrides what we doing to these instances, we're overriding some of them like we made a pink fuchsia color pink, but you can reset it. Often, you'll lose control of like well, placement with the heading is a master. I can right-click it and say, "Actually, Main Component, go to that one for me." Well, there it is, that's the main one, and now I can make my adjustments. I need to get rid of that, round the corners, 0, 0, 0, 0. You can see they all come along for the ride, but this one here, actually I want this one to have some corners, 10, 10, 10. Typing the wrong one, hang on, 10. I've added around the corners, so I had some overrides applied to this. Cool. We'll cover a bit more in a bit, but basically everything becomes a component like it's a frame. You start with a frame. Well, the frame goodness, and then eventually becomes a component. Like this logo here, be great, it is a frame, I'm going to turn it into a component. Why? Because I want this logo to go into my assets panel. On the checkout page, it is there. I can go to my new document and I'm, "Okay. Let's go to our pages. Let's open up my desktop," and I'm like, "I need that logo. Where could it be?" The assets, there it is there. Look at that. In this case, I might not ever change it, but I might. Means it can go back to the original. What will happen is, watch this, because I'm on a different page, I'm going to see layers here, one on a different page. I'm going to right-click and say go back to my main component, and it will jump back to that mobile page that we've got back to that original. The other thing that I haven't mentioned is the master component looks like that. It's the four diamond shaped doc fully anything's. If I go back to my desktop version, you see it's the same name but it's got this single not a diamond square on its side but it's hollow, those are the instances. The other way to tell is to have a look. Let's go back to our mobile view. Now, at the moment, we've got ours on a page, but if I drag it off into the no man's land, you'll see that icon again. You'll see that quite a bit. That is my master, and let's drag an instance. Before we drag an instance from here, it doesn't have all that fancy stuff on it with the diamonds, you can actually just duplicate this, and what you've done is you've not made to masters, you actually made an instance. You can tell my layers panel, you see there, just little diamond. Original, the master, the main, the parent, and then the instance based off of that. You might end up with 100 instances in just one master. Let's go through some more perks for components. 73. Updating & Changing & Resetting your components: Hi everyone. In this video we are going to look at updating, changing, resetting, pushing overrides. Yeah, all the good stuff to do with components and their instances, plus the sweet shortcut. Ready? Light mode, dark mode. Let's jump in. Let's look at, we've got this thing here we made earlier. I want to turn it into a component, because I want to use it in different things, and I want it to be a master. Select that, make it a component. Great. He can come down and just so it could be there. Now we need an instance from it. We can either Alt drag one off, or go to my assets panel, find out where it is, there it is, drag it out. We know it's an instance, we remember that, because in the last panel instance has that little kind of single diamond, multiple filled in diamonds for the master. We know that we can select on this and say actually find me the main component. I can go to it and make an adjustment. Let's say this needs to be bold now. Bold. The instances is update. We know how to update that. That's easy. We know that we can go into this particular one, this particular instance. I can go into it and say where is that frame? This one here is called Stephen Butler. You've probably run into him already. He's amazing. Shout out Stephen. We can have our instances doing kind of little things. They're called overrides from the master, but we can also push back. Let's say that we forget we're working on this. We're like, yeah, that was on some other page and some other document. I'm done here. I'm like, can I adjust this, can I go into it, and we've decided that all of these styles, we don't like the rounded corners. I'm holding shift to select them all. I'm going to say, the stakeholders come back and said, no rounded corners. We're going to go to zero. I have to have six pointy bits, great. Actually, I want that. You realize you drag out another one, you're like I'm going to go into my things there is another one you like, wait those are updated. You can push back to the original. Let's leave that other instances. There's my master hiding up there. This guy I'm like actually, can we push the overrides back to them master? You can. Let's select it. We can go to our main component and say push the overrides to the main component. You notice that one's updated and all the other instances does so if you are working on a particular thing you don't have to go and find the master potentially, you can just adjust the instance and push back. Another thing if you do decide to go through, we've kind of covered this, I'm putting them all in one video for prosperity. You do decide to do some overrides, and you're like, is that the right color? You can right-click and say actually let's go to clear overrides. I can't see it. It's reset all overrides. There's another way of doing it up here. Can you see this little icon, reset all overrides. It'll kind of go back to that original design. Let's make a couple of arrows on this page here, I want to show you something else. I'm just going to use the arrow. Give it a color for no reason, can't see it. We're going to narrow it's my right arrow. I go to right arrow, I'm going to make an instance. Now the shortcut is, so I want two of them. I want a left and a right arrow for my UI design about two of these things, and there's going to be instances where I need it to pointing to the right, left you might have up and down, might be on or off, whatever it is. You can actually select more than one thing and go up to here and say, not just make component, if you've got more than one selected, this option up here makes multiple components like that. So in my assets, you can see I've got two of them all in one go. If you've drawn a bunch of buttons, and you want them all to be, you don't have to do them individually, just select them all and say make multiple components. I've got these two, and let's say in this design here for whatever reason I need an arrow, you're like great working, working, working, working. It's the wrong arrow. I can do two things. I can say you my friend actually can go over here, and I don't want you to be arrow one, I want you to be arrow two. There you go and you just switch them out. You can see that'll be good for icons. You might be using the home icon and you want to switch it out to the other icon, the share icon. There is a faster way you can, so I've got our left arrow here. You can drag this out holding the Option key on a Mac, alt key on a PC, you just dump it close to being on top and it will switch it automatically. We might have two versions of this. Good point. I want two versions of this so this is like a light version of the logo, I want to make it a dark version. This at the moment is an instance, I want to break the instance. I want to make a new component like a dark version. I don't want it to be an instance that just kind of like overrides it. Actually I want to completely fresh component so I can right-click it and say detach this instance. So it's back to just the regular old logo. It's kind of way of like breaking it even if that's what you want to do, you just broken. It's no longer a component. There's nothing like connected to anything else. Happy days. But let's say now though we want to go in actually and change it all to, that's the background frame. Let's do it to the text. We want to change it to a dark version. I've detached it. Now I'm going to make it a component as its panel. I've got a light and a dark version. I've got my light and dark versions there. Let's make a new page. Let's do that, for instance, I want to grab my frame tool and then just click once I got to go to frame tool, let's go find iPhone eight. We've got a design. We've used the dark version of our logo. Looks good, perfect. Then we make another version and the background is using a kind of dark color. I can go in here and say you and hold down my Option key on a Mac, alt key on a PC, and I'll just switch those two around. You can switch it with anything. If you need narrow there now, It'll work. Also you can switch them over here. Remember logo. Now, this thing here, it's a bit tricky like sushi, if you haven't named your different things right. Often it's easy, especially if you've named your layers right just to do a search. Logo, and it's going to cut it down to just the essays that I've named logo. Undo. All right, That is how to update, change, reset your components. One thing actually before I go is that that switching thing doesn't work with the main components. This one's a main component. How do I know? It's got that little star thing there, and I know because if I go all right, I'm going to switch you for the light version and hold down my sweet key, it doesn't work. The masters are special, they have a few extra things over here. Let's make an instance of it. The instance has very little. You can do some stuff in here, but this one you see has things like I want to add a description. This is my dark mode logo. You can add a document link when you're getting a bit more advanced, and let's say it's this thing here. With a bit more to it, you might actually have to create like a web page document or a design spec, or maybe some design system documentation to explain like this is this padding, don't change this when you're doing in this case, like a lot more details, you can add a URL into, where is it, there. Just copy and paste the URL. Now that's the end. I'll see you in the next video. 74. You can’t kill main components in Figma: Hi there. In this video, we're going to look at why you can't kill a main components in Figma. Well, it's hard to do anyway, let me show you what I mean. We'll stop calling it, killing it and let's call it deleting. I'm going to create this top nav as a component. Not multiple components, just one big whole component. I'm going to call this one Top Nav. So that is the master. Let's put him over there and lets make an instance of him back onto this. But let's say later on I forget, I'm like, what is this thing, don't need that. Delete it. Actually, it's showing me the assets panel, so there is my main component in the assets panel but let's say I click on it and I delete it. Can see it deleted from over here as well? Watch delete. You're like, Oh no, it's gone, but you can't delete a master component, it's hard. What you can do is, as long as you've got at least one instance of it, you can right-click that instances. Normally this says go to main component, but now it says I can't find them, can I restore them? He said, "Yes please." He pops back. There is a just back where he was. Delete him forever, if you delete him and his instance. There, you've actually, he's probably gone. But as long as you've got at least one instance looking around, you can re-get to that main component back. Now another level to this is we are using a master within the same design file. Let's say that we grab a master or an instance from another design file. I'm going to go find something from my drafts. It could be from the community, something somebody shared from you. I'm going to use this, is something we used earlier in the course. It's from the community and I am going to go to the assets, which are over components, and what I want to do is I want, they're all over the place. I want the search thing. Let's say I want this little search guy. I've dragged out an instance and I copy it. I don't want to use this on mine. Normally you're not doing it on purpose. You accidentally copy you like, I'm going to grab all of this and appropriate it, steal it, because it's good and a nicely laid out and it's going to say some time. That's one of the lovely things about this UWiX industry and Figma in particular, there's lots in that community that we can use. But let's say we do it on purpose, we copy that and instance, it has to be an instance for this thing to work because what I want to show you is, what's happened to our assets panel. A second ago if I undo, we only had local components. That means that the masters are in this document somewhere, but if I paste an instance from somebody else's, we get this new thing. Great, Nice. We get this thing used in this file. It's an instance, how do I know the layers? Or is it their little diamond? This has come along which is cool but where is the original? Where is the master? Actually, we can go back to it like we did before. Go to main component. It's slightly different language than the other one, but it's going to be the same thing. It exists, not in this document. Even if I have this document closed, then I forgot a garnered from that. If I go right-click and say, go to main component, boom, it's going to open the file. It's going to try and find it for me. You're there, you can select it. That's sometimes useful, and a lot of the time just a pain in the butt. If I go to assets and you like, that's why that is there. What you can do is, I right-clicked it, you can go to main component as well. Actually what we're going to do is right-click it and say detach instance. It's no longer a component anymore. That's why it's disappeared and he's going to make it a component and at least now it's a component on this file. It's not going to reach back into this other file now it's disconnected. Does that make sense? Now at the moment, the way that I'm going to undo it. It's still connected to that original file. At the moment, it doesn't, if I go and update this, go to the main component and I updated here, it doesn't flow through. It's not the ideal way, or at least the way that Figma want you to control large files. If I go in here now and say destroy, save this, click "Done", There's no real save. I still do it though, Command this or Control this. It doesn't help. Let's close that down. Can you see it doesn't flow through this way. The weight update and do like, get it to flow through is something called a library, a team library. We'll do that a little bit later in the course. It's one of the paid things we need to use and if you really want to know now you can go check the part of the course, It's called libraries. For the moment, let's stick to components and let's do one other thing about not killing components. You can go over there. Main components don't die. The other thing that can't die. This is an instance of my main component. Remember, I know because in the layers, this my original, but let's say I've got a couple of them. I've got this one and I copy it. You paste that one there and try and drag all this down. Whenever we're trying to select everything on board, I trying to drag a box around all, there you go. I've got this one and this one. In this case, I don't need a home button. We're already home, so I'm going to go in here, double-click it and hit delete, and it's gone. Not really. It's weird. Nothing is related. You can't kill it, remember? Let's have a little look at what happened. I'm going to move it so you can see that. We can zoom in nicely with the camera angle. I'm going to undo. There's my instance Top Nav. Instance main. If I go into this double-click to go inside my instance and I say, I'm just using the Delete key on my keyboard. Watch what happens to this thing called Subtract. It should be called Home button, but hey, bad naming. You see it doesn't actually disappear. It doesn't actually go away. The eyeball just closes. You don't actually kill things in an instance, it just hides it. It means that we can turn it back on later on and it doesn't break the connection between these two. If I did want to get rid of it forever, I've got to go into my main and it will delete out of this and this. Does that make sense? You might find things that have a bunch of thing I will turn it off on it. That is why you can't kill components, even little bits of them and what to do when you're working with what feels like other people's files, but actually just designed files that are part of your Figma world that you didn't make. Actually, that's something I didn't mention. I'm going to open up that thing again. Let's go back to that local one. If you actually bring the Master in instead of the instance, all that goes away. Let's say I'll need to bring in this, which one, exclamation point. If I bring in the Master, I know that's the master. Copy it and I bring it in. Let's look at our assets, paste it. There it is, can you see it's just part of my local components, not used in this file. If I want to use in this file, right-click, detach, make a component again, it's back. I hope that was helpful. Components can get a little mysterious sometimes. Lets dumped into the next video about components now. 75. Where should you keep your main components in Figma: Hey gang. This video we're going to talk about where you should keep your main components. At the moment we're just throwing them everywhere. There is a best practice, let me show you how. This is my best practice and a lot of other designers' best practice. You can pick your own way. At the moment, our Assets panel here isn't too bad. It's got local components and these ones here aren't on a frame, so that it's hanging out here outside of stuff. This one here is on a frame lets say iTune, I want to use this thing. The best practice is, you're going to be a component. I go Command option key on a Mac, and that is Control Alt K on a PC and what you do is you leave the main over there and then you use instance in this, that guy's separate. Just so that we can put our master on another page. Lets do a few of them on pages. Let's copy that one over here. I will turn this into our component. This can get super messy. What we like to do, speaking for all of the UX designers in the world, is I want to grab this with my master there. This master here, I want to move it to a new page, just keep everything on. I can go to my pages here. I can say you, I got to be a whole page dedicated to my components. I'm going to put it towards the top so that if somebody else is using my file, they can find them all. They're just in one place. I can find them there in one place and when we move them there, let's go to our HiFi. We can go right-click, move to page components. That one one well, let's move him there as well components just keeps this tidy and once they're all there, you'll see that I've got this page called components, and they're all just in here rather than spread across this document. There's a few components on the desktop, let's add a component here. Let's say that's a component, Command Shift K. You can see Assets spread across a couple of pages. They might be a 100 pages that you're working on. It's just nice to say, I'm going to leave that version of it there, but the master is going to go to the components page. You can say everything's just in components, making it easy. Now going to go back and move all of these on there. There is you and now going to be moved to our components page. Now it doesn't jump to them, which you could click on them and it just jumped to them. It'll jump to the page that they're on. Hopefully there's a go to master or show master. Maybe I can't find it, but I get confused sometimes between XD and this. XD has it, K-Figma doesn't. I don't think. Leave in the notes, if you do know how to jump to the master from him. Where is that one? Don't know, got something that looks like him, is that the master? Yeah. I'm right-clicking to see whether they have got the go-to master option. I spotted him. You're also going to go to that one, you can just tidy it up, just make sure that your components all on one page and that page doesn't need a frame let's have a look it at. I'm going to go Shift 1. The moment. It's got stuff everywhere, we're going to tidy it up when we get a little bit later on, we'll do a design spic, design system page but they can just hang out by themselves like this. You can make all that popup modals altogether, you can make all the cards together, all the different logos to get the stretched out looking nice. Now, if you don't want to be that nice or that organized, you can just use the search. If you've naming, at least naming them something, you can go into your messy Assets folder and actually just type in logo and it will just cut it down to those ones. That might be enough for you. You can switch it to list mode, just make sure you clear that, hangs around the Assets that search. You can work for quite awhile and actually go, another little trick. I'm not sure if you can always do this but if you just put in a space, like you're searching for everything and just list them out nicely. Doesn't matter if it's ListView, or That View, breaks them into the different frames but if I put a space bar in there, that seems weak. Doesn't feel very official though. That might disappear. Will become a sweet button that you can click. That is a way of doing it. If you just have yours scattered across your document, that's okay too. It can be everywhere and you just use the search, but you will find as soon as you get past one document, maybe a couple of documents studying, sharing with somebody else, you're going to have to stop being a little bit more careful with your naming and where you keep your main components. I hope that was helpful. That was a messy video. After that let's get onto the next video. 76. Intro to the forward slash / naming convention in Figma: Hi, everyone. In this video, we're going to understand what this naming convention is. You've seen me use it, you've seen others use it, why are all these forward slashes everywhere? The short answer is that it helps you organize your components, but let me give you some examples, and we'll make some together. Let's start with the first reason that's useful, that naming convention. I'm going to put mine on my Components page, because I'm being fancy, and use the triangle tool. I'll draw something. I'll speed this up. I've got one of these and one of these; this is going left, one's going right. I'm going to turn them both into components at the same time. Make multiple components. It's just called polygon 2 and polygon 1. That's fine. But naming is going to help us. Let's look at this. Polygon 1, I'm going to call this one arrow, but I'm going to use that forward slash. It's all about that. I'm just adding the forward slash between that. You don't have to have spaces. If you're a developer, you probably won't have spaces. Designers, in my teaching experience, put in spaces because it looks nice. This is Arrow Right. I'm using Shift Tab to go up to the next one. Just a little bonus shortcut there for naming. For some reason, that needs to be there. If I use this naming convention, look what happens to my components. I'm going to go to my Assets panel. I'm looking at not the stuff, but at components. Can you see what it's done is, it's grouped arrows together. Can you can see? In one little group, whereas everything else is just lumped together. They are put together because of that forward slash. It says, look, there's a component, but it's also an arrow, so I'm grouping all these arrows. Let's say I make a couple more. I should have made them before I turned them into components. Let's take this guy out, let's detach from component. In my Layers panel, this one is called Down. No, I'm going to turn it to a component first. Actually, it doesn't matter if you name it before or afterwards. Now it's a component, and hopefully I'll have an extra one in my Assets panel, all grouped together as arrows. Let's make a button as well. I'm going to start with a frame. I'm going to use our good practice. I'm going to fill it with my thing, and I'm going to add some text inside of the frame. This is a giant. This is going to be my Click Me button. I think my button is quite big. These arrows in comparison, let's zoom out, how big are these things? Pretty big. They didn't need to be that big, anyway. I've got a button. I'm going to make the text ginormous as well. Holding Shift and using the Up arrow, I'll move that text around. Let's click the outside and turn it into an auto layout, just so that when it adjusts. We know how to make a button now. I've got this button. I've got another one that's a smaller version. I'm using my key for shrinking things down. There is a small version, let's say, and a big version. Lets select both of them. Let's select this frame and say component. This frame, component, and let's name them over here, so my Layers panel. Instead of frame 4, I'm going to call this one Button. It's like the root. It's easy to find all the buttons, but they don't want to find the large ones. Same with this one. This is still a button, so I'm going to join that gang, but this is the small one. In my Assets panel, I've got this lovely group called Button. There, they all are, all nicely together. Button large, button small. You can go list mode, thumbnail mode. That's reasonably easy. It can get even deeper. You're ready? We're going to go one more down. I've got these two buttons, but let's say that I need light and dark modes as well. Those are great on a dark background. Those are my dark mode ones. These two down here, I'm going to detach. They're no longer components. I'm going to change them up. This thing here is going to be my dark version. It's going to have light text. Actually, I'll fast-forward this. They're different. I'm going to select this guy, turn them into a component. This one into a component and rename them. You can do it in your Layers panel, like we have been, but you can actually just double-click them up here. This is going to be button large, but this is going to be my light mode. Same with this one. It's still small, but it's now light mode. This one here, this one is going to be small, but it's going to be dark mode. You get a sense of what's going to happen? Hopefully. As long as the naming is the same, dark mode, I'm going to have buttons grouped into one group, then hopefully break down down into large and small, and then dark mode and light mode. Let's have a little look at my assets. I've got buttons. Inside of buttons, there is large and small ones. All I want one are those large ones. Here they are. There's a light and dark mode one. Here we go. Do you get the idea? That seemed really sensible when I wrote down the class plane for this one. Maybe though, this one needs to be button dark large, do you think? It's hard to know with this particular one. Now, things can go way deeper than this, as well. Let me show you some examples of other people. We do this because it's good for ourselves, to group these things, plus you're going to get them from other people's documents, or you use this material. Material design is the term or the name that Google uses for its design system. The one that it shares across loads of different teams and companies so that they're all consistent. We're going to look at just a simple one to start with. This one is just called Material Design Icons from the community that I found, and I'll show you how they've used the naming convention. In this document, there is a bunch of pages, there's icons that are filled. These ones have a solid fill. There's ones here that have just the outlined. Can you see? They're the same icons, just different styles. What they've done is, they've broken them up differently. We've broken ours into buttons/dark or light mode, big or small, and then dark. What they've done in their assets panel, is they've gone; we've broken ours down into, let's say the filled ones, and the filled ones that are action items. These are the actions that you might use the icon for. Let's look at hardware icons. They're are all the filled ones that have something to do with hardware. You can see how much easier this would be rather than all filled icons everywhere. They've broken them into nice, little groups. They've named them nicely. That's that naming convention. Let's go and see a bit more extreme version. Let's say we are designing something for the Android device. Material is their kit that they use or their design system. This particular Figma file, let's have a look what they've done. Let's go to Assets. They're broken into components. We just had buttons. They've got their buttons, but you can also see they've got buttons with ticks in them, ones with outlined, ones that have containers in them. Let's have a look in that one. It's a way of organizing lots of different components so that they can be found. There is a bonus later on when we do variables, which we're going to do very soon, and this naming convention becomes even more important. But for the moment, let's say that I am designing something. I'm going to zoom out. I need to make a phone. Let's go over here. Let's pick Pixel, because we're using Material Design. Let's say I need a little snack bar at the bottom. It's a great name. There it is, Snackbars. Let's say I need a snack bar. What kind of snack bar? A one-line or a two-line one. It's already designed. Look at that. I can say actually I need a snack bar that is this one. It means it's still a component that's ready to go. I can start doing it. I can start updating it. I can start building stuff super quickly. There's that little temporary snack bar that appears for a little bit and then disappears. It's all organized nicely with these forward slashes. That's the naming convention. It's useful for breaking up assets. It's gets even better for variables, in an upcoming video very soon. Actually, I think it's the next one. That is it, naming conventions, forward slash everything. You're dismissed. See you in a bit. 77. Class Project - Components: Hi everyone, it is class project time. We're going to build a component. I want you to first create a page, if you haven't already, cool components on your Figma file. Then you're going to make two components, basically the same component, a light and a dark mode. I want you to practice using that naming convention, so that you've got two components, but they end up grouped inside your Figma file, and take a screenshot of it to prove that you did it. There it is. This is where I want you to end up. Take a screenshot of that, nice and simple, upload it to the assignments or the project part, don't worry about sharing that one on social media because it's not that exciting. Yeah, that is the class project. I'll see you in the next video. 78. How to make component variants in Figma: Hi everyone. We're going to learn what a variable is. Fear rules are easy, ish. Basically we've got three separate components doing three different things. We're going to smash them together so that we can drag out one unit, one component with variables of these three different colors. We've got light mode, dark mode, mid mode, K. That's what a variable is. You grab separate components like these three, mash them together. Just to make things Tidy air easier, you can switch between them. We make this one too. Okay, This one here is these three smashed together. Can eight different states for our button active have a disabled? That is a variant. Let's jump in and actually make it pause, pause, pause, pause, pause. Hey, I'm just before we go on, there's been an update to Figma. I want to just, it's just a language change. In this video, I'm going to use the term Variant and variable interchangeably because that's what I did. And recently though, and Figma have made some changes. And they have used the word variable for something completely different than what we're doing here. So I'm going to use the word variable that you think Variant the whole way through. So instead of believing it out, Doing it over the top, just think, whenever he says variable, he's talking about Variants. Variables is something different that we'll cover. It's kinda like a Cody kind of thing that we do in the advanced course. But yeah, when I was originally making this, there wasn't that. So I just kinda use them willy nilly. Variables are Variants. Got it. Carry out, oh, and have a good time. Alright, what is the Variant? I've made two buttons. Okay, and I'm going to name them because I'm good. I'm going to use that naming convention we learned before. So this is my button for duck Interfaces, dark mode. This is my light mode. So they don't have to be buttons to be a variable that and-a-half to have this naming convention. It's just helpful, but I've got two things. I want it to be a component on both of these to be Components. Actually, what I might do is have another couple down here, just duplicating them for later on. I've got these two, I'm gonna go make them multiple components for me, which is cool. They're just separate components. They are here in my library and a button. There they are. The two things hanging out in my assets panel imagined if you combine them as variables, okay, he's select both of them and say, Hey, these guys are just variants at the same thing, go into something called a Components set, which is this little dotted line here. And you leave them like a main component. Okay, it's a main components set. He's leave those alone. And what you'll notice is look that disappeared. Can you see those two have been combined into one called one button, just the one that you drag this out. Look over here, it has a dark mode and light mode. That's what variants do. You take two or more components, you smush them into a variable and then you can go through and adjust them. You can have more than one variant. Okay, Let's say that. Let's undo. I'm gonna go back until we're back here. You might have a third version. Okay? I want a third version that's already component. If you do want another version, because right now I'm dragging out an instance of that one. How do I know it's an instance? Because that's what happens when you Alt drag or Option drag out. And it's an instance I want to break it apart. It's mushy Jewish where we go. We wanted to say detached from instance. Great. So it's just a regular old kind of frame. Now, this is gonna be mid mode. I don't know I'm doing. Okay. I'm gonna go through and change the color of it to pink. So that's a component, that's component, this guy needs to be a component. All three of them can be variables. Now that's components. It most people just call that a components. Still, even though it's technically a Components set with a dotted lines and overhear my assets panel. I've still only got one little thing. There's not three of them or two dozen of them depending on how big your app gets or your design system is. But I can drag out one now and say actually this is mid mode, like mood Doc Mode. The moment just is property one. Property ones on a great name. So if you selected here, you can say, I don't want to be property one, I want it to be mowed. They want to go over here. I can say don't put a colon and there's two of them. Okay, But It's a bit more descriptive. It doesn't change anything. You can just means that, alright, How did you find that variables? Now that we understand components, it's not so bad and that naming convention. So while we do that a little bit earlier on, just tidies up our component list. You don't have to use variables, but you can see how useful they are. One thing to do, all sorts of stuff. Let's do one more together. Just to show you, I'll be doing too much light mode, dark mode. And let's do something else, kind of practical. So this is not a component yet. This is going to be a button for the different states of a buttons. This is gonna be like an active button. That's gonna be like hover. This one here. It can be like disabled to see ruled. And let me just change the colors of these. Okay, so those are different states for my web design. K, active when somebody hovers over, it gets a bit darker and this is gonna be my disabled button. So we need to make them all components. So let's do that. Select them all. One big fell swoop. So I've got three separate components that are all kinda the same. Where are they all in here? My components or are they are in? This one has three of them, will watch them all become one, boom. One button to rule them all. Active, disabled, other strange things. Dotted line means it's components set. Remember, you can actually change like the one that it will default to. Change the order of them. We can name it in here. And my cases, the Buttons state. If I drag out another one, it'll be this and the order has changed. Did it? I'm pretty sure it did. Alright, that is it for our introduction to variables that Let's do a little bit more variables so we can get to know them a bit better. I'll see you in the next video. 79. Another way to make variants in Figma: Hey everyone, there is more than one way to make a variable. In this video, I'll show you a slightly different way. Essentially, you know that the same part, but there's just a slightly different method for creating them. And also we're gonna look at the sweet toggle switch. Look over here, it says toggle, look at that little switch there. We'll make a little multicolored logo as well. Okay, it's still a variable, basically the same, slightly different method of construction. Let me show you, alright, in the last video, I showed you how to make a component OK, Command Option key on a Mac, it's Control Alt key on a PC. So we made two of them, the two different options and we combine them, has variance. Okay? I'm gonna do it differently in this video. We're going to start with this little toggle switch. It's nothing, it's just a circle in a rounded rectangle. But if I convert it into a component, I can actually jumped straight to making it a virulent. Hi everyone. Just a quick little update to this video. You'll notice that the word Variant isn't overheated anymore. Figma has changed it slightly. K over here, it's actually under Properties and you hit the plus. There is Variant on that. And what you need to do, the second step is you need to add a second variant. That was all one step before, but now it is two steps. Okay, so the ego, that is the update, you can continue on with the video. The other thing to remember though, is that remember I'm going to call a lots of things variables. That is the wrong word. I'm gonna do all through this video. What are they mean to be called variance? That's right. Got it. Alright, Karen, with a video. Okay, and the same thing happens. We get this kind of components set. And afterwards, I can go into here and say that is my toggle for that way. Okay. You just double-click them to go inside of it. And I'm going to switch that to that in my assets panel here. I've now got my little switch and I've got an option that says Variant. You go, if you name them badly, you end up with property one and Variant to naming, renaming them afterwards isn't particularly hard. You gotta rename them on the component or in your Layers panel, you kinda see that when they is called Variant to the ones default in the metro V here. So you can either name them by double-clicking this. Okay, We're doing it over here or be a bit better when you first made that toggle switch. Okay, if we make that toggle switch and we call it maybe switch and call it slash off. It will help us automatically do this naming. But we went at Clever, so we're gonna go do it afterwards. So first of all, the whole thing is called component one, which is not what I want. This is my switch inside that I got to Variants. I'm going to rename them over here to the property is whether it is toggled on or off. Now, this is going to do something fancy if I use, doesn't really matter what I call this, but if I have my first one which is default, okay, and that's gonna be off if I've used the words off and on, notice how this will change over here. Let's go. Let's grab an asset. It's grabbed the toggle switch out. And because I use the word on and off, can you see, it's got this little cool thing is awesome. There's I toggle switch. It does nothing. It's just because I use the words on and off. You can use the words true or false. Or what else can use yes or no. Okay. It might be a checkbox as long as you use those kind of those actual words. In other words, toggle that on and off. You get this like little switch. And it makes us look fancy. Let's do one more. We'll do the logo and have we done I feel like we've done the logo already. So I'm going to pretend we haven't. I'm going to have this version. Okay? This is an instance of my component. I'm going to break that instance and forget we attach it. Okay, so it's just a frame now. It's have a look what it looks like. Yeah, it's just a frame now with my logo in it. So I am going to change the colors of the texts on the inside. Okay? So the same thing, instead of like, as long as it's a component to start with. And let's use our naming convention. So let's call it a good name. Let's call it primary. Primary color. Convert it into a component Command Option K Mac and Control Option KPC. Men, you getting sick of it? Do you remember it? That's the trick. Or we just click the button at the top. I've got this. What am I doing? I've given it a name, which is great. I've converted it to a component. And instead of, and we're going to add all Variant. There we go. Once you've got this Variant, you can actually add another one. So actually let's go into this and let's change the color of it to another one. Secondary. This one, he is gonna be cool, not Variant tooth is going to be called secondary color. You can add more to this by clicking this little plus here. Okay, We've got another version and add your own sound effect. Okay, and this one's gonna be our accent color. There is another way you can click on it, hit Command D on a Mac, control D on a PC. So there are lots of ways of making Variants. Just find the one that you're comfortable making. This one's gonna be here. My logo is going to be this one here is gonna be the color. You can choose. Edit to see what it does does. Here we go there and I can go through and say, which color do I want color? Let's pick secondary accent color. Let us make variables. So we've gone from lots of components, kinda filling up our assets panel to combining things like the three versions into one little unit. What we can see here as well though, is that there's actually three buttons. So this might still get out of control unless we make multi-dimensional variables, which we're doing the next video. Alright, I'll see you there. 80. How to make a Multi Dimensional Variant in Figma: Hi everyone. In this video we are going to discuss multi-dimensional variants. They sound fancy. Really what they are is we've made our know Dimensional, or at least one Dimensional Variant already. This one here, it just on or off. One-dimension can do anything else. This one look, It's got a small version and a large version pass two different colors. This is what we're going to make. We're going to make a button that says, Oh, I want it to be actually the large version, that is the secondary color. It's got multi-dimensions. Same with this person. Okay. He's got the positive or negative, but also got a color. He's got an extra dimension, multi-dimensional. So I am, I'm probably going to always say multi-dimensional in that weird voice. You need to, to part of the figma rules multi-dimensional. Alright, I'll try and try and turn it down. Let's get into the video. Alright, to make a Multi Dimensional Variant, you need to start with something. Okay? It doesn't matter what it is. I've I'm starting with a button. Okay, it needs to be a component like before. We're gonna do the version of creating variants where we just start with one and make an new unused in this little plus. Hi everyone. Quick pause here just to remind you about the interface change. In the video here I go to Variants and hit plus, there is no variance anymore. You gotta go to Properties, go to plus and go to virion. But you knew that already. Just a reminder. And also you need to go up to the top here and add a new variant or select it and hit Command or Control D up to you. And the naming is quite similar. Okay, I've got this first one here that I can name. The second variant here that I can go and name. And if I want to change the overall property, I double-click it there. So very similar, small changes. You got that. Alright, on with the video. What I'll do is with this variant here is going to be, we're not going to use light and dark mode. I should probably be calling these primary and secondary colors, dairy colours. So this one here is secondary. This one here is not dark mode. It is primary. Change the color of this one to my secondary color. So that's variants as we know it. Alright, let's even give that Variant and clicking the component frame to say actually this component is called color. But now like the beginning, we want another bigger size. And that's all a multi-dimensional. And Variant is that we've got one property that say to Color everyone just one more update for this video. They've changed it. It's kinda similar to what we've already done, but I want to really highlight it because it was getting people a little lost. Okay, so under the video is his Variants. Click on this dots and go to edX new property. Now what we do a similar sort of place is we go to properties, so we've got to select it. We go to Properties, we go to create new property Variant. Okay, similar, similar. And we're going to call our one size and a second and create property, you end up with two properties. Multi-dimensional Diego, small change, kinda confusing. I can see there's the update. Carry on. Let's make another new property that is gonna be called size. It creates one called default. And what you'll notice over here is that in my layers here, Let's undo that. So I only had one, okay, just had secondary and primary. If I add another another property and call it color, size again, watch what happens over all the way over here, which went ahead into calmer slash this other multi-dimensions, you've got two-dimensions. It can be secondary N, it can be different sizes. So what I'm gonna do is actually say that this fellow here is the size of small. He's the primary color. Any small? This guy is the secondary color, and he's also small. So I need two more. I need add another guy there. You can, just for giggles, OK, we can click on the set. You can actually add another Variant this way as well. There's lots of ways of adding variants. You can click on it and Command D, Control D. You can stick on it, copy and paste it. I know that doesn't work. Command. Okay, so I've got this other one. This fella is going to duplicate this one just because I want to start with the right color. So he is primary and he's going to be large. He's not large yet, so I'm just going to add some padding to him. So got the components selected, where is it? They're just there. I'm going to say you are what I'm gonna do 24 top and bottom. And I'll do 72 side. So it's a bigger button. You can see it's been cut off. You just click on this and you can drag this actually any way. We're going to do quite simple multi-dimensional variants. But you might end up with like hundreds of different variants. You do all of these different sizes, different colors, and then do all that kind of hover active, inactive as well. So they can get quite complicated. You can make this as big as you'd like. I'm going to make another one next to you could just duplicate that one. Okay. I don't know. It sounds come from. And let's, this is a secondary color. This guy is going to be, where is my variable? This can get quite long now because we're variables. So he's primary color, know, he's secondary color and he's large. Look at that. The way it works is let's go to Assets panel. That's fine. Our little button And now he has two variables, okay? He has to kind of properties to his variables, color and size that makes a multi-dimensional. So I can say actually, I need the, I need the primary, the secondary one, but I need the large version. That is multi-dimensional. Let's do one more, okay, because doing the naming over here is not hard, right? It can be easier. Remember our naming conventions, the forward slashes, that can get quite nice. So let's do that. I'm going to speed through this. I'll see you in a sick. Okay, so I made these little buttons, these little circular buttons. And again, nothing to them. I'm going to first of all make them individual components. Now at the moment, I think they're all separate. If I make all of these separate components because these are not grouped or framed in any way. Watch this, you're going to end up with four separate components. So I'm just going to select this and I can either convert it to a frame, group it, or I can actually just convert it into a component itself. It's kind of another way of grouping is making it a component. Alright, so I've got two of them now naming conventions. So this one is gonna be my round button, slash, positive, positive slash accent color. So basically we're adding properties, these multi-dimensions with these slashes here, and do the same down here. But this one is going to be negative nega Tiv. If I create Variants now, Multi Dimensional. Okay, so you can kinda cut to the chase if you are willing to use the forward slash. And over here I can say this is my no idea what to call us. If you're unsure, just call it value. Okay, and this is gonna be my color. I can make two more of these. Actually, I'm going to select both of them, make two more of them. And all I'm gonna do is change that to secondary color with this one. And now with it selected, I can say you are positive but you're not accent color. You are going to be add new. You are going to be my secondary color. Secondary. You I don't need to type it in because it's already in there. Now. Forgot to assets. I got you. And I've got you all multi-dimensional. I need the negative in the secondary color. If you're thinking, could I just keep naming them instead of duplicating them? You totally can. So let's do that last example I'm going undo and before it was our variable. Okay, I could do it now. Okay, so there's no reason why I can't break these apart. Touch instances. And this one here is going to be, what does it round button positive. But I'm going to change that to my secondary color. You are going to be secondary color. And it's going to change the names. So this is now secondary. So you can do all of this before. We did it afterwards there you can do it all before if you'd like. Secondary. Have to be components still. Component, component, not component. That didn't work. Okay, So as long as the naming conventions are there, if I zoom in, you'll be able to see the naming. And you could do a fourth. We're not gonna do a fourth here. This little be Essentials course, but there's no reason why you can't make a large and small version of all of these as well. But because I've named them all right. Combined variants were away. Look at that. Okay. Remember thing I'm not sure what to call. I'm sure there's a good name. You can probably think of a good name. I can't hear it is there? And same sort of thing. Secondary, negative. Alright? How you feeling, how you feeling about variables and how you feeling about multi-dimensional. I was really scared about variables to skied. Let's get I didn't want to get involved when they came out because I kinda knew for it. I'm like, Man, that seem complicated. But once you get your head around them, actually you can start to see the tidiness in here. And then you start doing multi-dimensional. I avoided that as well because that seemed all those slashes and getting confusing. If you are finding that maybe multi-dimensional confusing to stick to normal all variants and just have a couple of versions in here for awhile. It is relatively advanced stuff we're doing here. One last thing you might do is if you've got this, Let's say that maybe we did our naming conventions and we did. What was this one? I can't remember what we did have a look. We did like round button, positive, secondary. If you get that wrong, don't worry. If you're like, which order does it go? You can adjust that later on once it's actually multi-dimensional component, you can say actually I want that to be first, see this, you actually click on the scent. Remember the components set, you see that little teen line there. You can actually say it's more appropriate to pick the size first of them. So let's drag out this guy. That guy. I don't know what you're from. Which did I do have a look, that guy, I drag him now, he's gonna go size first. And then Premiere doesn't really matter, it doesn't. Alright, my friends, that is multi-dimensional variants in Figma. I'll see you in the next video. 81. Class Project 15 - Variants: Hi, everyone. It is class project time. We're going to make some variance. We're going to make three of them, a star, a checkbox, and a button. Have a look at them. I want you to make variant that has three options. We can do empty star, full-star, half-star, we're going to use it for those reviews. You get bonus points if you can get them in this order, empty, half, and full. By default, depending on how you make it, they can get mixed up. Basically, they get put in alphanumeric order. You get extra points if you can put them in that order. The other project, k is the checkbox. On this Checkbox, to turn on and off. Easy. But you get bonus marks if you can make it use this little toggle switch thing here. The big one, multidimensional button. I want you to create a button in your own style, your own font, your own primary colors. and I want you to have a big and a small version and more than one color. You can go nuts and have more than just these four options, up to you. But I want the minimum of two different properties, in our case, size and color. This is the toughest part of all of Figma, variable. If you're finding it tough, drop a question on the page, me or one of the TAs will help you out, or one of the other students. If you see a question, then you're like, hey, I know how to answer that. Jump in. Once you're all done, take a screenshot of it all and upload it to the assignments part of this page with a project part to have a look. That's what I want. That's it. Go off, make some variance. Be proud of yourself if you get even one of them going because it is tricky stuff. I'll see you in the next video. 82. How to make a form using variants in Figma: Hi everyone. In this video we're going to make our form basically rectangles with text, but we're going to be fancy and say, actually this thing here, we want to, we're going to make it a variable so we can make it active or we can make it error message. So this video really is all the skills you already know, just in a different format to help us practice what we've learned. Plus, show us how important and useful variables are. All right, let's get form making. Okay, so let's make our form. I've select the outside frame, shift two to kind of zoom in on it. I'm going to turn my columns on as well. We can use my command forward slash, and turn on grid. Grid. Okay, so we're going to start with a frame. We could use a rectangle. Wait, wait, wait, wait, wait. Where I just said you could use a frame or use a rectangle, it doesn't matter. I I know because I cause lots of people some problems when you are doing this. When we go and resize it in a second and we're going to resize it. It won't resize if you started with a rectangle, even if you convert it to a frame afterwards. At this point, especially for these forms, just use frames instead of the rectangle, because frames have special powers. I didn't even realize until I made this video and a few people got lost. Okay, so make sure you use frames, not rectangles. All right. Carry on. Frames feel weird, but we know frames are useful, so I'm going to draw it out roughly that sort of size. I'm going to give it a stroke. We're just building, I don't know the bits for it first. Okay, We'll start with some lonely old components and then I'll show you how to kind of upgrade them as we go through. So I got this rounded corners. Yes something. Okay. Text is going to go inside. If you have a frame selected over here and you just click inside of it, it will actually dive inside of it. It's not important for this one. We'll put in sample text. I want it to be left aligned. It's defaulting to my, the font that I was using. Right. And when you ever, you're doing a form, don't try and brand it would be. My advice is, especially for credit card details, you want to kind of stick to like roboto or open sands or Inter, or there's a lots of them. The more boring, the better I'm going to use open sands. I want people to trust this form. I want to feel like it's not, I don't know, Mickey Mouse Show. Okay, Light is not what I want. Regular open sands, it's going to be easy to read at 16, I'm going to knock back the color a little bit. I'll try and remember that 990 repeated. Okay, I'm going to use this text, copy it, paste it out of my frame just because I want it above it. And this is going to be my label. I'm going to call it a label rather than name or anything, just so I can reuse it for different things. All right. I'm going to turn my grids of command, automatic control on a PC and just enter. Don't have to change anything. I love that. All right. So I've got my first chunk and I think I want this as black. Okay? Because I want to use it over and over. I'm going to turn it into a component. Okay. If you do nothing else other than use a component, that's totally fine. We'll do a variable in a second. Because components, remember this is my master component Often now I'll move my master off here and start building with the instance of it so that I can do things like this and change that name. If I changed it on that first one, it will change it for all of them. I want to be changing the instance. Actually, this is going to be e mail. Okay? My sample text is going to have like some pre filled in. There we go. Okay, let's duplicate it out because there's an instance. I get to change it, I get to say this is maybe the name on card. I'm just going to leave that maybe call that name, maybe another one. I'm going to go Command D while I'm there. Another one. This is going to be card number. All right. You get the idea that you can make one component, you use it again and again and again. Cool thing you can do about with components as well is that you might have learned, she might not have I shown you obviously you can change the text and you can change the color of things without destroying that connection to that original main or master component. I'm going to undo that. You can actually do some physical things like wish I can't move this text separately from that label and I'm like move up. It won't. Some physical things won't change with this, but some of them do. So I'm going to turn my columns back on. And watch this. If I grab the whole entire frame, the whole fire component, and go like this, can you see that? Will change. Okay. This like stretching of this box. Some things can still remain connected and change and some of them can't. An exhaustive list. I don't know, I stumble across new ones all the time. If it won't move, it can't. If it does, it can. Hi everyone. I just want to jump in here and extend this video just because if yours isn't resizing nicely. Okay, watch through the video, you might be fine. Okay, but there are quite a few people in the comments who are having trouble with, you know, it's my fault of kind of not explain something quite right. And there's a couple of things that might have gone wrong if you're resizing it and it doesn't resize, either this thing sticks out the side or the label moves around. I'm going to show you the fixes for that. Okay. The first one is, I kind of mentioned that earlier on, is that to use a frame not a rectangle, you can't even use a rectangle and convert it like you can't frame section or convert it into a frame. There's something baked into a rectangle and it's handy to know that just frames are better for lots of things. Just use a frame from the start, so you'll have to delete the rectangle and rebuild it again with a frame that should fix all your problems. I'm just going to work through it again and make it one more time and show point out some of the bits that might have gone wrong. I've got this structure here. I've kept it nice and clean here so you can check out yours. Okay, I'm going to select this, I'm going to say you are a component. I put my main component over there. I'm going to hold down my option key, PC. That's going to be my instance, okay? And it should resize, except sometimes this guy, he never used to. Of course when I first made it, that never used to happen, but it's happening. Now one of the things we can do, first of all, it should resize. Let me know in the comments if you're still doesn't resize, if your text in the middle or in here are resizing. The one thing to look at is I've double clicked it, so I've got my label selected over here. Under constraints, it's defaulted to scale. Okay, so it's scaling the box down. Sometimes the text, let me show you the text, is actually like, that one's doing fine. The text can break onto two lines. That was another issue that I saw people have. Okay. I'm going to click on my label and I'm going to change it from scale. I can't change it from scale. Why not? Okay, it's because I'm working on my instance. Remember, there's some things you can do inside of an instance, like resizing this box. But I can't move the label around. I've got to go back to my main component in here. If I click on label, I can say you are not scale, it's not what I wanted. I want you to be left aligned or at least attached to that left hand side. In terms of the height, I guess we can get it to stick to the top. I don't think I need that because I'm only resizing from this side. You can see now it's not going to adjust. You might have to do the same for the internal text. I don't have to, in this case see what it's Defoldedo, it's going to top left. They do change whatever the defaults are in Figma. I thought I'd add this video just so that if we do get lost in the future, you might have a better chance of fixing it. Let me know in the comments if you've still got other problems and I'll jump back in for another update. Hopefully this got us closer to where we need to be. Hopefully, yours is re sizing in this instance here. All right, so that's it. A few changes to Fig. I'm blaming Figma, not my teaching. Okay, it's definitely Figma, not me. But I like these little add ons as well. I hope you do too some of these problem solving solutions rather than just everything going right in the video. All right, we'll carry on with the video. There's more to do, enjoy, okay? And this is going to be my month, month year. This's going to be my CSV. All right? The other nice thing about using, well, other thing I want to throw into this course is command of control for enter. Get rid of my columns is if I select all of these, we've got our smart selection, okay? And obviously I can go through and go, actually, that needs to be there. That needs to be this, okay? One thing that will cause it some drama is can you see? I have these, it's working right. I've got these spaces and I can adjust the spacing with it. But let's say that I go Ok, want to duplicate this one underneath like this one Go command D sticks it out to the side. It push my frame out as well. Can you see that? To compensate for it sometimes with these guys because they're doing weird stuff, I can group them or stick them in a frame. I'm going to go command option or control alt G on a PC just to stick them so that they're the same sort of unit. Then it goes, all right, I can deal with that, okay, And I can move them up and down now, and I can click on them and duplicate them or make another one of these. Okay? And then drag it underneath. Happens a lot with forms. Okay? You want these half ones, One long one stops somewhere, one stops somewhere else. I think that's all I want though. You go away. So you might finish then you're like did a form. It was just a textbox with some text on top. Okay, we're going to take this a little bit further because now we want to add some of that error messages and different kinds of versions of these boxes. So we're going to start with our master component. Where is it? It's up here. Okay. If you can't find it, how do you find it? Right click it, main component. Go to me. There, is there. Let's even be more fancy, let's cut it and put it on our components page because we are awesome like that. What I want to do is where are you shift two. There we go. Okay, I want to have a couple of different variables. Okay, so I'm going to select on this and say you are a variant, actually I want four of them. Let's go, boom. This first one is happily called default. Let's give the name of this component, set of component, Let's call this Ticksfield or let's spell it right this time, okay? And the default one I think is fine. What we'll do is we'll have an active one, okay? You often have an active, an error one and maybe a disabled one. It can be other versions, but let's go default, let's do a disabled one. And I'm just going to go through and say the difference between you was 90, right, 90. You see what I did there? I just typed in 90. It assumes you mean 1990, 90. Often these numbers will repeat, especially if using gray scale. I want that to be the same thing, 90. Let's click on this. Where is the variant two? I don't want to be called variant two, I want it to be called disabled. Okay, I don't need to add a description or documentation to this because it's pretty self explanatory. This one here is going to be my active. When it's active and you're clicking in, it's going to do something fancy. It is going to make the text and back to black. Maybe the outside line here is going to indicate that it's being used. So I'm going to use one of my styles. I'm going to use that accent color because I don't know. It's too close to era, So I'm going to use maybe that one to make it a little bit bigger. Stroke up, one we can test and come back. Okay, And the last one is going to be era. So we're going to do lots of red everywhere. Red, red, red, even like a little fill of red. It's cool what you can do with these variations. You can build some really complex things that Okay, and because we started with a component, we've added this afterwards. Let's go and have a little look at what happened. Are you ready for this? You think you might have to start again? Okay, but because these were all using that original component and we expanded that component into a variant, we can now, actually you filled out your name wrong over here, the property. Actually this one is, I didn't call it error call it variant, but you get the idea right. So maybe this one doesn't have a variant. Where is it? It's because we remember grouped them inside of a frame, so I'm going to go inside it. I can say you are like just disabled. You are disabled as well. You get the idea of components. Awesome. Adding variants, extra special, nice. That is an ugly looking form. I need to break my column rules. That is an ugly looking form. Now forms on the fly, I need to test it on my phone to see if it's big enough. I need to play around with the spacing. Okay. I need to go back to that original name. Things better. I don't know if I was doing something like this now. Okay. I would go and find another form that somebody else has made that looks like a form. And trustworthy. Something about it doesn't look trustworthy. Have a look at it. What is it? I've done something wrong. Okay. I probably look at what Mac and sorry, what Apple and Android do, okay, to make their forms. Because I want to kind of match that. I want people to feel safe clicking my button. I feel like mine isn't there safe. All right, so let's go back to my component and let's enable that last one. Let's call it he. I don't know, what did you think of that? It's pretty nice when you kind of start stringing stuff together and you can see how easy that was. It feels like a big drummer making variables. At least I made it into a drum in the last videos, but actually you can make variants halfway through. You don't have to be totally proactive, so that's going to be fine for us. I want to show you kind of like somebody else's one. So I'm going to look at where it's fun. So I kind of looked at this earlier on. So look at this one that is one of owl ones of these. Okay? Remember what that's called? What is it called? It's called a content frame component set. I totally forgot it myself. So that component set there is nice and friendly and easy. And this one here, whoa. Okay, so there is a bunch of different variables. Now you can see, I'm not going to go through it entirely, but let's have a look at the Assets panel. And the nice thing about the Assets panel there is that input field look, just a lonely old input field. All of that is in it. So let's have a look. So what they've done is you can see there's three different options, one with icons, one without icons. There's errors. There's a group of error messages. There's a group of, there's, I'm not even sure. Okay. But over here what they've done is they said state is the default active typing filled out field, disabled field. We did that. Okay. But they've also added like an error message to it. Okay, is there an icon on the left? They've done a lot more but nicely if I got, given that as a designer, I can use that and then toggle the switches and make it do what I want. And there's a bit more of a more complex variable. Okay? And it is a multi dimensional variable. When you're actually building them yourself, they actually don't feel as confusing. Oh, that's what we need. Okay, I need that. Copy that. Let's go over here. This is exactly what's going make my, it's gonna fix it all up mobile. That's what they need. Super safe. Now. Actually it does. It brings a little trustworthiness to it. All right, that is it a practical example of using components with variables to make a form. Alright, that's it. Let's get on to the next video. 83. Class Project 16 - Form: Hi everyone. This is our class project. I want you to design your own form. Design it on your checkout page, much like we did in the last video. I want you to screenshot your finished form plus send me a screenshot of your variable field. I want you to practice using a variable for this field and what I want you to do is turn it into a little bit of a research project. I did mine a little bit on the fly. I want you to have a little look at other forms. What about mine do you trust? What about it don't you trust? There's something wrong with it? I'm not sure exactly what it is. What I want you to do is be a UX designer and actually go out and see what thing's actually are missing. Maybe it's a spacing, maybe it's the type of rounded corners, maybe no rounded corners. Maybe it's the font, spacing, alignment. Maybe the edges here. Have a little look at other people's examples. Build your own, and I'd like to when you upload it, especially on social media, upload this one to social media of what you've done and maybe throw out there the things that you felt gave the trustworthiness to this form, especially because it's a credit card form. Maybe ask for advice, maybe if you're struggling as well and other people can help. Post it and let's together figure out why. I would never put my credit card details in this form maybe just because it doesn't align there. There's something, anyway, do your form, do your variables. I'd love to see what you make. 84. Putting it all together in an desktop example: Hi, everyone. This video, what is it? It is a production video. I need a desktop version. We don't have that yet. I'm going to work through it. There is nothing really new that we're going to learn here. It's just a ride-along of me making something and showing you how to tie in variables, update variables, use some of the styles that we've used. I'll give you a few shortcuts as well. But if you are a capable designer and you're pretty good at Figma, you feel ready, you can skip to the end of this one. I won't be heartbroken, there's nothing essential in this video other than me working through and making this. This will surprise you in the next video. It's just a frame with some stuff, there's nothing fancy about it as well. Because we're going to get into prototyping and we need it. I'm going to make it in this video along with the homepage, a few tips, and tricks, but mainly just a little bit of a ride-along. Enjoy it, skip it, it's totally okay with me. But if you are sticking around, let's go. Let's get started. I'm going to hopefully look professional, but it's going to get messy and it's the kind of things that you're going to run into, hopefully. Working on the desktop page because we've neglected it in this course, I'll turn on my grid, Command forward slash grid, good. So you come down a bit. Now, my components are getting a little messy, so I'm going to tidy some of these up. If you click on it, it would jump to the page that that's on, here it is. That was good. I don't need it anymore where I'm going. I don't need you either. Can you see it highlights it? If you're zoomed in and you click on it, watch this. If I go to my other page, Components, Pages and I go to here, and I go back to my Assets and I click on it, watch this. It highlights it on the page. It takes you to the page, but you can't see it. You're going to be zoomed out a lot. There you go, it's highlighted it. I don't need you anymore because I'm doing super amazing variance. Do I need that guy? I do. Have I use the other places. Remember, even if you delete it from here, as long as there's an instance somewhere, you can go back to it. That's nice and tidy. Let's go down to my page. Now we're going to start with that bonus shortcut. Jumping to pages is, when you're on Assets, it closes them all up. Layers. It's a little bit more exposed, but you can still get to them there. What I find most useful, you might not. If you got a PC or a big keyboard plugged into your Mac, you can use page up, page down. On a MacBook Pro that I've got, I hold function and use the down arrow, and it just moves through the pages. Can you see? Now it seems very weird. That's not weird. But can you see the little tick there moving in this bit here? After a while, you get a sense of where things are. I know that that's my desktop view. I'm going to do that in this video just because I do it. Assets panel. Let's grab our logo. Come here logo. Now. it's a component, it's that size. It was made that size for our mobile. I'm going to make it bigger, holding the key or tapping the kit tool drag it out a bit. Here we go. Remember, we've got a primary and secondary indexing color of that. I'm not sure what I'm going to use for that. Let's add a bit of text here. I'm going to draw a fixed width box that goes from that column to that column. I'm going to type in my "the music for our people". Select it all. We're going to use some of our styles. Remember I said I wasn't going to use zero because it was really big, totally using our desktop view. That's what I want. That's want to do. I want to add some buttons. We created some variables earlier. I'm going to use this. You can see here we put them together with these things and things we've made earlier. This button here has a few. Do I want a small one or a large one? I want the small one, please. This one can stay the primary color. I'm going to make another one. Problem with this one is I want the outline view. Let's go and fix that one. I'm going to right-click it and say, take me to the main component. Here it is. We're going to go a bit nuts with this. I don't need that. That's just an instance of this. Let's go a bit nuts. Let's, first of all, make the accent color of the button. I don't have that. I've only got primary and secondary. I'm going to select that, grab that guy, Command D, Control D. It's messing with my flow. That's right. We can make this bigger remember. Let's make it really big. You two can go down here. This one is going to be small, secondary. I'm going to actually change the color of it first. Remember our view. This one is going to be x in color. What we'll notice is, can you see this one says, if you see that that's bad, things aren't going to work. Properties and values of variance are conflicting because we duplicated it. This has got the exact same, it's just as small and secondary. So Figma has no chance of working which one you actually mean. I need another property. I can either go back to this outside one and say, I need another one in here so this property, I need another over now. I'm not sure. Let's undo that. Let's go back you, this variant, let's do it here. It's safer. Let's add a new one. This one is called accent. Now it's not having that problem. I probably need another one of these. I'm going to duplicate this. This one is going to be the accent color. Let's actually give it the accent color. What you tend to do is just go through them all once you're making them, especially when you're new, to check if there's any errors. I've got that. Next thing I want to do is the outline view. Basically, all I'm going to do is grab you and go on an outline set. I need to make it a little bit bigger. Certainly towards that giant version. I'm going to make an outline view of all of them. Actually, I'm never going to have an outline of these, so I'm going to keep it nice and clean. These guys again are problematic because they don't know what to do. Let's make this like a third-level multi-dimensional. Back here, let's give it another not variant, property, which is this up here. This one's going to be the outline version. You are going to be the outline version. Perfect. I set the corner at default. We're going to have the outline turned on. All of these guys, I'm going to select them all. I'm going to say you have no fill. Can you see when you've got lots of fill selected, it says I don't know what to do? It gives you a hint, just that were placed them all with Accent 1. When I delete it, I don't want any fill. I would like a stroke. There's going to be probably 2, 3, 2, 2, 3. We can come back. We'll start with three. This one here is going to be the stroke of primary, stroke of secondary, stroke of accent. These buttons in here, now to click things inside of other things, we did these earlier on. We have a whole command and you can click inside. If I hold Shift and Command, I can click little bits within these frames. Otherwise, I can't click on if I hold Shift and click these, it grabs the entire thing. I just want to grab the bits of text inside these frames. I'm just holding Shift. Then we're going to be white. We've added it into the property. This one here is small. It is primary and it's got an outline on. What is this one? This is small, primary and the outline is on. Now, let's turn this one to off. Same with this one, and that one. I can select more than one. So you are the off vision, same with this. These are all large. They're mixed colors, but I can make them all off in terms of their outline. Remember, we use on and off. Hopefully, we can go, you small, I need it to be accent colored and I could turn the outline on. I'm going to click that. Let's go down to our page, function down arrow, or our page down. You might not find that shortcut helpful, but now I can say small. You might find this one. I want you to secondary color and I want the outline on. I'm going to change the text. This one is going to be the buy now. This one, he is going to be that learn more. Do you notice they didn't bump each other along? They fit in there fine. But if you do one that whole bumping thing along, who remembers what it is? These two need to be turned into something because we've been using smart selection. We like smart selection. It just means that we don't have to do anything to them and we can grab them and move them around. But if you want them to interact all the time, you select both of them and make them auto-layout. All it just means is that they'll reference each other. Let's go buy. This one here is going to be the learn more. Not really necessary there but we're learning. Let's add our nav along the top here. I'm going to use the same button. The problem with these buttons is, I don't like the rounded corners on everything. Actually, let's just add the text first. Actually, let's turn it into an auto-layout because I do want them to adjust as the things adjust. This gives me a chance to show you something cool. At the moment, let's adjust this one. This is going to be my checkout or cart, let's call it cart. Can you see it's kind of doing left to right? Which is not what I want. Who remembers the term to get it to stick to this side? You're like, "I remember. " You with the hand up. I pick you. What is it? It is constraints. I've got this selected, it doesn't have to be an auto layout, but it has to be a frame. You can say actually constrain yourself to that side. What's happening is this is the thing I want to show you. Watch this. If I move you over there, it's constraining to my grid or my guides, or my columns even, instead of the edge of the frame. Because when we are using columns like this, especially it's sticking not to the column really it's sticking to the margin, the edge here. It just means that if I now adjust this thing here, it's going to stick to that column rather than the edge of the page. Just something to note that it does stick to columns as well. You can't see it, but it is still doing it. It's sticking that way. Now if I go, you are cart and you are home and you are account. I want you to be secondary and you can be the exit, all the colors. Now what I want to do is I want one that doesn't have rounded corners because I feel like These have got different meanings. These kinds of navigation buttons, and these are extra buttons. Go here and do this thing. I want these navigation buttons not have rounded corners. Right-click it let's go to the main component. Why can't I see it? Because my little components are actually inside this thing is auto-layout, see in the layers. There they are. But I've clicked on this. That's why I couldn't do it? What you can do is Command-click just like one of them, then right-click it and say go to main component. Another thing you might have noticed is this thing's really big. You can actually, with your layers and assets panel, you can make this bigger and bigger and smaller because as we add these extra labels, you'll notice they'll push this out and you need to expand it out to see stuff. Let's have a look. I want to add another property. The way you organize these is totally up to you. Let's say that I want to seem like a good idea to separate them that way. Now what I'm going to do is I'm going to go you, I'm going to drag out another chunk of them. Actually, before I do that, I'll actually add the property. I've got size, color, outline, and I'm going to do a new property that's called around rounded corners. I might add not just a property, but let's name the rounded corners on, and let's add a variant to that one as well. That didn't work. Let's add the variant afterwards. Rounded corners on. Let's duplicate this out and let's call these ones added new This one is going to be rounded corners off. You can start to see why now you stopped needing this because you start getting quite complicated, but we know what we are doing. All of these selected, I'm going to say you have rounded corners off zero or maybe just a teenie tiny one. My office is a little bit on. It's like them all up and just tidy them up.Look at that. Look how tidy we are. Click on the outside component frame. Let's tidy this up as well. Is it going to work? I don't know. It might do. We're going to see if there's any errors. Actually, I never check it. I play with it and if it breaks, I come back and check which one's broken. Might be doing right. Let's go and apply it. Function down or page down. Command-click one of them I'm trying to click the outside hold Shift. I'm grabbing all of these, I'm going to say small colors are mixed. The outline is not what I want to change, but rounded corners are off. Feel so satisfying. We work on the homepage and we need to move to the next one. We know that page down or function down arrow moves to the next page. You can actually move to the next frame. If you want to go to the next frame. I'm going to zoom in, Shift two and say I want to move to next one is just in, just tap the in key. It's a good way of toggling shifting goes backwards. You've hung out this long in the video, you get a bonus shortcut. I'm going to go down one. Here We got. Next thing I'm going to do is that modal. We're going to use it in the next videos so we need to build it. Let's practice what we're using. I'm going to start with a frame or a rectangle for no good reason, I'm going to give it a fill of my gradient. I'm going to give it some rounded corners that pop up, sign-up done usually the thing. I've actually got an image that I cut out in Photoshop command shift K and it's called cassette tape. It will be in the exercise files if you want to. It's massive one megabyte. I'm going to hold shift and drag it out. Something like that. I love those things that project out over the edges. Type Tool will store a fixed-width box. Selected all text. Back to using the zero vision. I'm going to lift align its that it's selected all, Command Shift L for left-aligned. Now, there are some shortcuts that are totally ridiculous. I know that one because if you hover above it, his ticks, the line left and right. You're on a PC. It's probably what? Control Alt L. We're getting there now in terms of the size-wise, it's probably shift zero. It's probably a good one at 100 percent. We know what kind to join in with us. Let's grab my type tool again. This one here, it's too big, we're going to use that. Even though it is part of my paragraph style or my text style, I can't do that whole fixed-width strictly box thing. It actually is in there for some reason.Here you go. I want it to be that.I'm going to fix height, so it expands as we need it just to tidy it up so it's not white mainly. Same with this one I'm going to drag out a box and I'm going to see that you are that kind of stretchy bottom version. I'm going to change my style to paragraph and this one's going to say, I'll speed this bit up. I can't spell, there it is Did you mean?That's what I mean. Thanks, Google. I'm going to use my sweet form text field. I could go back and add another variable for a filled-in background, but I can actually just modify this. Remember, these things you can just override. I'm going to put a fill in the background. If I want this label, I'm going to delete it. Did it delete? You know it didn't. I deleted it and it just turns it off. It's still there.It's going to mess with my lining of things. Let's grab our assets lets' grab our button, sign up. Please put it over here. I totally want rounded corners version.I do. You can be primary, secondary or none of them work. Gradient button and then it'll do. Subscribe. If we wanted to push the other way we select on it.Before I do that actually let's undo it. If I want you to go off that side of the exterior frame. Now when I type look at us. We're being fancy. Contrast ratio here is probably not going to work like it's just not enough of the contrast but, I'm going to acknowledge that and move on. Let's change the sample ticks as well. My little frame is going to have a drop shadow effect. That's probably going to be enough until we hook it up in our next video. I hope that was useful. You were totally able to skip it. There was a couple of bonuses in there and I think it's nice to see people working. I'm not a super amazing designer, but it's nice to see some of this coming in and being used in different instances. Hope it is anyway, either way, it's done now. Let's get onto the next video. 85. How to add a popup overlay modal in Figma: Hi everyone. In this video, we're going to do something like this. There's a pop-up Modal, covers the background. In our case, we're going to do a newsletter, but this could be any pop-up. Confirmation, would you like to? Are you sure? That type of thing. We're going to click in the background, it goes away. I love them. Let me show you how to make it here in Figma. The way this works is you need a frame, close to it, somewhere in your page. It can just be a plain old frame. We've designed one in the last video that's a bit fancier. We are going to go select the Homepage. Then we go to Prototype mode, and I'm going to say you go there. I don't want to be on the click, what I want to say is maybe after some time, I'm going to type in maybe four seconds. That's not four seconds. There four seconds. I want to not navigate to, I want to open an overlay. This is where the magic happens. We'll leave everything by default and let's go and preview it. Waiting, hey, it appeared. You get rid of it. There's a couple of things we need to do. If you haven't got it selected, click on the little line and say after delay, cool. Be in the center, close when clicking around the outside, add background overlay. This is going to darken the background, I like to crank it up a bit darker so it's a bit obvious. Fifty even. In the animation, I'm going to get it to dissolve in. I'm going to click on Homepage, go to my preview button. I'm going to have to hit R for a reset, wait for my 4 seconds, and go time. You can do this with any pop-up modally thing. We're doing it for a newsletter sign-up, yours might be a button. All you do is, let's say it's not a newsletter that automatically appears, it's something to confirm something, or you've clicked a button. Let's say this button here, is going to do the same thing. But when it's clicked, instead of our delay, if you can't do a delay on a button. When it's clicked, open up in overlay. Normally it goes to Navigate to. You can open up this overlay. Let's go to our Newsletter sign-up page; all those same things. Let's have a go and delete this one because it's going to try and fight. It's going to appear automatically, that delay one. Now if I click this button, hopefully, it should open up. Let's give it a go. Let's hit reset. Nothing's going to happen unless I click this button and it pops up. This might be a, are you sure? You sure you sure? You sure you want to delete things? What I mean by that is let's have a look, I just Googled pop-up inspiration. You can see there's lots of different pop-up Modals. It just darkens the screen, don't have to leave the page, it could be any of these things. That's my pop-up modal. Let's get into the next video. 86. How to make & prototype a tool tip in Figma: Hi, everyone. In this video, we're going to make this little tooltip that appears when you click on the CSV information thing. There's a lot of just building like the card, tooltip, and the little information icon here. I'm going to do for you if you can follow along with the whole thing. But if you just want to cut to the chase, what you need to do is, let me show you, you have a frame down here. In our case it's just a circle, and we have another frame up here which is my tooltip with some texts in it. To connect them up, you click on this, you say, go to there. When you tapped, navigate to tooltip. That's wrong. I want to go On tap, Open overlay to the tooltip and instead of centered, I want to switch it to Manual and you'll see this ghost version of it. It starts over there, when you click it, it'll appear wherever this is. Let's stick it there. Let's give it a preview. You click on that and it appears. We're going to do that, the long version by building all of this. Stick around if you want to see it. Otherwise, jump straight to the manual positioning. Let's get started with [inaudible] Let's make out tooltip on the Checkout page. We're going to have to draw two parts, the trigger, a little button that makes it pop up and then a little button. O for the oval tool, or the circle tool. Try something kind of the right size, it's kind of the right color. I'm going to add that little information Eye, that goes in the tooltip. I'm going to use the Text tool, click once. I'm going to type it, I. I'm probably not going to use my font, I'm going to use Roboto or I've started using Open Sans for kind of information stuff. Can you see the difference between Roboto and Open Sans? Okay, they're different fonts. Let's get this in the middle. Let's make it white. Let's center them both. Now centering there is a shortcut, it's option H to send to them like horizontally and option V for vertically. Okay, on a PC, it's hold down the Alt key and H or V for horizontal or vertical. Okay, maybe you're across there, got both of them selected option H. Now, because we're dealing with something so small, we've only got like one Pixel, we can't straddle the Pixel size, something like in Photoshop. So you do need to make sure that the circle is kind of big enough to have a space in the middle. Can you see that line there? Option H. Here we go. Okay, you too can spend way too long on you're little trigger. So I've got both of the, spend two more it needs to be Bold. I don't know why. No, it doesn't. All right. So with them selected, I'm going to turn them into little frame. It's Command Shift G, or right-click them, turn them into a frame. I call this one my, it's going to be tooltip and this is going to be the trigger. Okay, let's build the other part. So let's grab a rectangle. I thought we use frames for everything. I'm using a rectangle here because I want to grab that. I want you to start using those Boolean stuff and you can't do that with frames. There's one of those use cases where we can use rectangles and triangles. Okay, so I want to do this. So I select them option H, center them together, and let's smoosh them. If you just click the first one, it'll do Union. There you go, it's the one you use the most and I'm going to double-click it and I'm going to grab around the corners. I've got very inconsistent running corners throughout. You should have, I guessed four. You should have consistent around the corners throughout your whole kind of app. I'm going to select these, so that tooltip and these Unions molding shifts, so I can click this first one, hold Command key on a Mac. Control key on a PC, select both of these and again, option H. So they line up. It might get this to pop down a little bit. Also I want it to be white. Let's get some text in it. Click and drag for a fixed width box. Okay. Got some texts to put it in there. The box just isn't big enough. Double-click, go inside so I'm just missing with a rectangle, something like this. I'm going to switch it as well to the fixed height. I'm going to say fixed height, I mean, Auto height. I'm going to center it as well. Okay, and let's go to Drop shadow. There's lots of things going on. All right, change the Drop shadow. I'm going to stick these both in a frame, so that's kind of one unit. Okay, has to be a frame. We're going to say that this is the tooltip Popup. Cool, so there are two bits. I've got that thing. This is my tooltip trigger and I've got this. Now, mine's kind of tucked inside of that. It doesn't matter. Probably not. Mine's kind of mixed up in this group. No it's not, let's get you out of there. So there they are, let's put them underneath each other. So this thing here, starts, look at this file, just like the other one we did. Okay, and what we say is when you are clicked, so let's go to prototype. Let's say, when you are clicked, I want you to go here. Okay, and On tap, which is great, Navigate to the tooltip. Actually, I want it to Open overlay. Okay, and the difference between this one is, it's up there and it can appear in the middle. It's not going to quiet worthless, let's just prototype it quickly. I'm going to Click on that button and it appears in the center of my screen. I wanted it to be just at the top. So what you need to do is change this to say, we had it Centered, probably saw there's Top left, Top right, Bottom center. Those are the main ones. There's a bunch of other ones including Manual. What Manual does is that it shows you a kind of a preview of where it's going to appear. So I'm going to say, here you go. There's my arrow keys just to nudge it down. So that's where we keep it over here for working purposes. So it's not on screen and then it just appears here. I said it's going to overlay. It's not going to dissolve. It's just going to instantly appear, I'm not going to gray out the background. Let's preview it, will present it. Let's go. You look at that. I click off in the background, nothing happens. So let's do that. So let's say that whenever somebody, clicks in the background area, it goes off. All right, preview it one more time. I got to stop closing that preview. This will take longer and longer the more images you have involved in your preview. Look at that, cool little tooltip. All right. So basically the same as the last one, except that we can use that manual positioning. That's the uniqueness about this particular tooltip thing. All right, let's jump in the next video. 87. What are Flows in Figma: Hi, everyone. We're going to look at flows. What are flows? It's these things. You probably got flow one and flow three lying around somewhere, and you're not sure how you got it. I'm going to show you how to use them, what their for, how to rename them. All sorts of good stuff about flows in Figma. Let's jump in. So do you already have some flows? You might have a bunch of them. Go to Prototype. I'm on my mobile one, I've got one flow, you might have another one. Why would you have more than one flow? It's because you're working on something else, maybe down over here, and you go to prototype it, and you're like, I'm going to draw this to this one, because this flow doesn't connect to this one at any stage, it goes up, you need to start here, and here, so you might end up with loads of them. To get rid of them, because you don't really know what they do yet. Okay, you can't have nothing selected. Click in the background, beyond prototype, and there's a bunch of flows, and you can actually click on them and delete them. Okay, I have got a flow and it starts here. What is the flow? Let's actually get going. The only bit of prototyping I've done on this particular mobile mockup is on this page here. It starts here, it goes, I'm the beginning of the flow. You can start it somewhere else by clicking, holding, and dragging, and say actually start the flow there. Then when this button is clicked, it goes to buy Now, goes all the way there, and when that one's clicked, it goes there. You start rigging it up. So that's this particular flow. This is my eCommerce flow. Let's do that, let's call it eCommerce flow. I'm going to click off in the background, I'm going to name this one, I'm going to call it eCommerce Flow. Because that's what we've been tasked to do. This is the task flow that we're doing. Let's say that we've finished that job, now we need to work on the login screen. So it's another task flow. I'm going to go steal a login from somebody else. I found this one here from Bravo Studio. Thank you very much. Man, Figma's great for the community. So I'm going to grab you, you, you, it's already rigged up under prototype, which is nice. I'm going to copy it, and it brings all the prototype stuff with it into here, Shift-1 to see everything. I've got all of this stuff. What is this down here? It's junk I've built throughout this course. I'm going to paste this one down here. Should be above, but there's also junk up there. Junk everywhere. Now, at the moment though, there's no way of getting to here. So if I go and preview it, how many pages have we got? We got a bunch of frames, let's preview it. It started off with my flow. I've only got one flow, so it doesn't actually show me any others, and I can click on this and go to work. But there's no way of getting to that login screen, because we're starting at the homepage, we're already logged in. We're pretending. I'm going to close that down, so we need another flow. To create another flow let's click on this first page here, and I'm going to start a flow from this point. This one's not going to be called flow, this can be called Login. It just means now when I go to my prototype, reset, no, click this one. There it is. I've got two kinds of flows. I could be showing somebody, and if they know what they're doing, you could say like this two flows on the left, you can start which one you want to go to, because they don't really connect. There's no way of jumping across these two. You can have multiple flows, login, maybe the cancellation screen, maybe how to change your user profile, how to reset a password. You have lots of different flows if your prototype's getting quite big. That's what flows are for. You can actually do some cool stuff, like you can actually just start prototyping from hitting play rather than hitting up this one, where it's unsure where you want to start. You can say actually start from the login screen, please. Or this one here, start from this eCommerce flow. You can do a little bit more. You can see over here there's not much going on, so we can go nothing selected, beyond prototype, find my flow, you can click on it, no, you click on it here. You can add a description. I can't remember where. Oh, there it is. So I've got it selected here, and you can see this little pencil here, enter a description, and you can say, "This is how to purchase the headphones". You can add quite a bit into the description, and this might be, "This includes the updates from Doug". So that way when people are prototyping it, and they say the login, they can see this screen, and can see this includes the updates from Doug. You get the idea. You can close it down. Now, I find that is probably, I don't know, it's a little bit hidden over there. What you can do is you can actually go to, so if I click off in the background, see these, there's this option that says, see this little link? You can copy that link, and all it is it's just a URL, big, long, ugly URL. But you can put that into an email, and say, "Hey Dave, this is the one I want you to check, and what will happen is he'll go exactly to this login page. You just got one file, but Doug, or Dave, or whoever is responsible for the login, can go straight there. Or maybe you got an email with a couple of different links, like, "Hey, check out the eCommerce flow. Here it is. Hey, check out the login. Here it is", and just give them two separate links rather than trying to explain that you go into here and then click on this little thing that looks like a box with a rectangle. Just click the links. All right, that is why you have flows, and you have probably flow three and flow 17, just hanging about. All right, so that is it for flows. Yeah, useful. Great when you rename them, great when you get a really big prototype going. All right, that is it. I will see you in the next video. 88. Slide in mobile nav menu overlay in Figma: Hi, everyone. We're going to make a little slide in nav menu that goes in and out. You can use the close button, super easy to make. Let's jump in. To save time, I've created a little slide in Menu, all it is is a frame that sits in here. It's probably not big enough buttons to click, I'll have to test it on my phone, but I've made a little cross there as well. It's actually just a plus turning on its side so I can close things. But yeah, let's start rigging it up. It's still an overlay world. What we're going to do is home page, we're going to go to our prototype and we're going to say when this button here is clicked, it's a bit small, and it's okay for the moment. I'm going to say when that is clicked, go there. I don't want you to go there. I want you to not navigate, open an overlay. Instead of instant, I want you to move in. It's going to slide, let's give it a go, preview it. Click your doodles, and there it goes. It moves in, it's the wrong way that I wanted. Let's have a look. I can say actually, I want you to not move him from that way. It's going from the left. The easing, let's get it to ease in and out to be a little bit prettier. Same thing, there's play. I'm going to hit off my reset, click that button. It's stuck there. We need to get rid of it. We're going to do a couple of things. One is, let's get it too close when clicking the background. That's what I want. I'll get it to duck in the background as well. What I'll do is I've made this little button here. What I want this thing to do is when it's clicked, actually I don't want it to go anywhere. I want it when it's click, to go to an interaction. When it is tapped, what I want it to do, I want it to close the overlay. That's its job. It doesn't go anywhere, it just closes itself. Let's give it a preview. Let's hit a for a refresh and let's click it. I can click anywhere in the background here. Now I can click this and it will close, with some easing and outing, the dark in the background a little bit. It's pretty nice. Let's rig it up a bit more just to see because what I want to do is, at the moment, if I click here and I go Features, I can't go anywhere else. If I do make it to the Features page, the nav doesn't look. Let's just go through the motions because what I want to do is and I need this, double-click it to go inside, to do the same thing. I need it to go to this and I can say On Tap, Overlay, get it to move in. It's remembered the last thing I had done, which is great. Often though, it's easier just to grab that, copy it, and if I copy anything, and I delete that and I paste it, it will bring through the prototyping. Let's give it a preview. Let's reset it for Aki. It works on the homepage. If I go to the Learn More, it still works here as well. What we should probably be doing now is double-clicking these and say that goes to home, that goes to features, that goes to cut, and that goes to my account page. I don't have an account page. Now the navigation is going to do something and do more than just slide in and out. That's an ugly transition. That transition there is still using movement because it remembers the last thing you wanted to do. This thing here, let's go to Tap. I don't want to move in. I'll get it to dissolve. That's going to work. Same with this one. Tap this thing to Dissolve. Let's give it a preview, features, here we go. I'll slidy any menu plus rigging up a little bit of our prototype. That is going to be it for this video. I'll see you in the next one. 89. Class project - Prototyping: Hi, everyone, class project time. I'm going to get you to do a few of the prototypes that we have done in previous videos. Basically, the newsletter pop-up, the tooltip, and the mobile navigation that slides in. Make sure the tooltip is called CVV, I've been calling it CVC for a long time. Take screenshots of all of them, be on prototype mode so I can see those lines that connect them up. Now, yours doesn't have to be like a newsletter, it doesn't have to look like mine. The tooltip can be somewhere else, and your nav can slide in from different places in the top and not look like mine. But I just want to get those mechanics right, so the overlay that is timed and popped up. This one here is a little clickable, appears on the page manually, and this one here is a slide in navigation, and we got some of those other little buttons there as well. Then share it in the assignment/projects/comments part of this website, and also share on social media as well. I'll be interested to see how your design's coming along, how the little form looks, what you did with the little pop-up for your newsletter. That's it, I will see you in the next video. 90. How to pin navigation to top in Figma: Hi everyone. In this video we're going to pin stuff to the top. Okay, so that the content slides behind it. We'll make it a little bit transparent. We'll do a footer as well. My footer is not very spectacular. It is a box. Okay, do you want the short version or the long drawn out version? We'll start with the short version. The short version is select something, say fixed position to the top. Same with the bottom one, you are a fixed position. Tick that on and stick it to no it's not. It's gone and moved the little update video, they're just going to move where it is. So we click on the element. And under design, there was an option here that had a little tick box you to saw. It's moved under Prototype now. Okay, so I click on Prototype. I've got the thing selected and instead of the position being scroll, which is the default, I want it to be fixed. I want it to stay in place. Okay, and get my little preview. And look stays in place. Awesome. They just moved it. Let's do the bottom one again. Okay, I'm gonna click on this and we know it's not under design 'cause they went and moved it. That's where it's gonna be for the rest of this course. Okay, If I do it again, I've tried to update the videos that have it, but you know you're like, I can't find it there. Now it's under prototype. Okay. Instead of scroll apparent, it's going to be fixed. The only difference with this one is it's going to be kind of fixed. It's fine. But I wanted to get it fixed with sticking not to the top. To the bottom. Okay. So if I case I go and resize things, it will stay down the bottom. Everything else in this video is good and correct. All right, continue on. The only other thing you need to do is make sure that your frame has got prototype is set to vertical scrolling. Okay? And stuff that actually expands out. See this? Actually, let's turn mine off. Okay, so I'm going to go to design Clip contents. I got a bunch of stuff to scroll. Two, if you don't have that, it's not going to scroll. Okay. This page can never scroll. Doesn't matter how many. Hm, Prototype scrolling, Horizontal works. It's not going to work to get stuff to scroll. Just have it like off the bottom. All right. So look. Scrolling, Scrolling home page, home page, no scroll. All right. So why is this video so long? It's because you're going to run, it's a, I want to show you how I work but also the problems you're going to run into. We're going to look at problems with like adding. We don't originally have this black background, so we're going to try and force it into an existing component. Okay, we're gonna run, run into some problems with scaling to some general like things that might catch you out while you're working. That doesn't sound interesting. Move on to the next video. Let's go. Okay, so putting to the top is easy. Putting to the bottom just as easy. But let's go through why is this video so long? It's 'cause I'm gonna try and do it to my one. I want to add that kind of like black background to it. I'm gonna show you some things that you're eventually going to run into too when you're making it from scratch and you know where you're going, it's easy when you're kind of plodding along and kind of changing it as you go. Things can get confusing. If you are new, you are finding this, you know, new and exciting but difficult, just start again. Just bin, you know, bin these and just start again and make a new one as you need it. But let's say we don't want to do that because we've used it a bunch, you know, a bunch of times. So well, the first thing we need to do is notice how the images have gone. This happens on my version every so often, mainly when I'm dealing with version history. So I close it down and open it up again, it goes away. I'll leave this in the course because you might run into the same thing. You'd be like, where do all my images go? They're there just for some reason, they disappear. This could be just on line. Anyway, we're back. I want that black background in there. First of all, we can't add the black background to this instance. That left me there for a second. Okay, so we want to find the main component, So right click and let's go Main component to him. Okay, He's just up here. He should be on the components page. What we're going to do is we'll put the instance over there and we'll use the main naw. I'm going to put it here so we can get it all lined up. So basically what's happened is we've got this thing called top nav. It's a component inside of it is the different icons. Now there's no frame. Okay, there's no frame wrapped around it. So how do I color it? Actually, the component is a frame. Frame and a component has all the same attributes as a frame. Okay, So if I slick on it, I can actually add a background color to it. I'm going to use black and I'm going to train the transparency down. You're like great, except that it's san. Zoom out Excel. Let's go in a bit closer. And watch this. If I grab this guy and go op, I'm like, this isn't working, that's staying. Why is that not stretching in the look? See these guys. Okay, let's have a little look. We're back to our constraints. Let's undo it straight again. If I click on this guy, inside of this component, it says Scott here is sticking to left and top headphones. Top left. The whole group though, for some reason, let's have a look. My whole frame says scale. Which it's not. So that's okay. I'm turning that off these guys though. If I click on him, he said to scale. If I turn his body to right, I'm really just turning it off. I don't care what it is at the moment because I want to stretch. I'm just make sure they're all the same. Make sure your phones off. Let's select this one. No longer want to scale. I'm going to use what I did. I did right. And same with these guys. These guys are going to be right top. It just means when I scale the frame or the component, okay, they're not going to distort. Part of it is what's gone wrong. What's that thing? What was the the door of my house? I forgot. They even had our door disappeared aces ago. Let's he look what's going on with that. Okay, so the door is pinned some other way. So let's get a big middle hello door. It disappeared a long time ago. So the rectangle here is set to scale, so I'm going to get him to stick to the right. That's the first time that's happened in the top. So hopefully now they go. There we go. Okay, so I'm just distorting this. It would be easy just to recreate it, right? But hey, what is stretching it up and down, these individual parts in here? This rectangle is top and right, this part is set to scale. Oh, there's all sorts of stuff going on. You know, when I said there you can flatten it. Okay, I'd be likely to flatten it. Now, what are you going? I'm just checking all these, checking for scale, all these parts, you might just go, my friend are going to be flattened. That it's just easier to work with. Okay. We've done that now. All right, these tricky things pop up. I've got it like this now. I'm just going to rearrange it inside of this. It would have been easier just to recreate it, but we wouldn't have learned so much. Everything feels a little bit big. I'm going to test it on my phone. I haven't tested on my phone in a long time in this course, and I got the horrible feeling, these are really big. Okay, You're going to get a 0% which is shift zero. Yeah. They still feel probably very big. All right, so now that I've fixed it and it's got it, I'm going to say you are fixed position to the top and left. Just a quick little interruption here. I forgot. I've just noticed when I'm editing that, I forgot to mention over here in the layers panel. Can you see there's this new title? It says fixed everything in there will be fixed, like the thing we just made. Fixed. Okay. And everything else is under the scrolls heading. So you'll just see that you probably pretty self explanatory bits in there were fixed bits. Down here are scrolls. All right, carry on. And I don't want to be using this actually. I'm going to move him to can be all properly inficial. Move him to the component's page. I'll get that person down here. And these guys need a bit more lining up. This one here. I need to be slightly different. I could be starting creating a variant, but I'm lazy. Okay, so I'm just going to double click on the outside here and go hide. Can't delete it because it's part of the original component. There's a little gap there. I think this one here, for some reason, what is it, 375? This one is probably 376 for some reason. Why is it? It's probably when I was messing around with creating variables here. Sometimes they go to the side here and I drag it back in. And obviously didn't drag it back the right way. All right, where did it go on my component space is double check. Where did you end up? There it is. Hello. All way over there. You can go there now. All right, let's test that. It sticks on that page. Now let's have a little look. The other thing that might not happen to yours, we covered it quickly at the beginning, is let's say this page here. There's actually stuff to scroll down. If there's nothing to scroll to, it can go down. This one's going to be okay, ish, but it's not going to work. I bet I click on this. I go to prototype. Actually don't have to go to prototype. Go to this one preview or present, they call it Look, nothing happens, it doesn't stick to the top. The way to make that happen is click on the actual frame. Okay, go to Prototype and you're going to say, what do you do with the overflow? Okay, no scrolling, no way. I want some vertical scrolling. I very often hit horizontal scroining, which is left and right. Okay. By accident, verticals which you want up and down. All right, there we go. Now we got scrolling. Is it fixed to the top? It is not. My friend are designed fixed to the top. Okay. Is that one fixed to the top? Let's do it. There we go. Just one more time. Very fresh. Let's go to the little more page jackpot. All right, so that is pinning stuff to the top. Pinning stuff to the bottom is not same thing. I'm going to draw something and say you and my friend are stuck to the bottom fixed position when scrolling. And you are going to be not top but bottom. Okay, let's give that a go. Scrolling, scrolling, scrolling, scrolling, things that you might stick to the bottom. I did a little Google search for you. These kinds of things appear in some apps down the bottom. We also saw those snack bars earlier. Those a little temporary things that pop up. These are the potential things that might appear down the bottom. What you might consider doing, don't do the way line. I don't know why don't like it. Yeah, pinning stuff to the top. Pinning stuff to the bottom. That is it. We've got our nave working and I'll see it in the next video. 91. How to make horizontal scrolling swipe in Figma: Hi everyone. In this video we're going to look at how to do the horizontal swipe scrolling, goodness in Figma. Let me show you how. Let's start with a simple version over here. I don't even know why we made these, but they're going to serve their purpose. We'll just do it with some rectangles to get started with. We're going to make 1, 2, and go Command D, D, D, D, so they head off. We need something that goes off the page horizontally. I'm going to click on my frame and turn off the clip contents just so I can see it. I'm going to grab them all. Now for this to work, all these things need to be inside of a frame or inside of a component or an auto layout. All those things underneath roll are like a frame, and that's what we need. I'm just going to use Plano frame, I command option G. It's a frame, I'm not going to give it a name because there's nothing, and you need to do two things. In the other video, remember we said, hey, this is prototype scrolling vertical. It's the same for horizontal. Except for doing this outside mobile frame, you do it to this frame, and the frame we just made, we say you can actually have your own scrolling, and you say vertical scrolling. You can use this little error and it's not going to work because what it's saying is, the frame needs to be small, that needs to be clear. Is it going to read. But what that's saying is that if I work to design, this has a frame around it. Even though I clip this, it still won't work. Watch this, if I go back to prototype, this is still a warning. What it's saying is you need to clip the frame like this. Let's turn that one back on to make it more sense. Remember, these guys inside of here, turns out of a frame. That frame can be smaller. Normally it's bigger. We always do it bigger, but we can make it smaller. There we go, we made it smaller. Do you have to clip it? You don't, but it looks nicer. You just have to have that outside frame smaller than the contents inside it, then it will work. Let's click on this and try and preview it, here we go and I can scroll. Why isn't working? Let's go back and check. You have prototype of vertical scrolling. Perfect. There's still a warning and it says the scroll of the frame, bigger than the frame. It is, I've done it. Frame you, that's how big it is. Does a metaphor clips contents, and I've applied that vertical scrolling, horizontally scrolling. I want a horizontal man, I get those mixed up all the time. You're seeing it. You're like, hey, he means vertical, he means horizontal. It happens all the time. If you've done any of my other courses, you'll know. Spelling is a challenge and horizontal, vertical. They need more icons here. Do they have an icon? They don't. Put an icon in there for people like me who can't tell the horizontal from the vertical. That's the basic vision. As long as the framer on the outside of where it is, is smaller and then has to be a little bit than the contents in the inside. Just tuck it in. Again, it doesn't matter if you've got that frame selected and whether it's clipped or not. It's just if you can see it or not. It just wants to see the frame smaller. What am I going to do? I'm going do it to this. We did this earlier. I didn't want to start with this in case you're coming to this video without doing the entire course. This thing here is something we made earlier on when we were learning that. Cool thing about auto layout is that you can go like over that, which makes it work, and there's two things you need to do. What was it? One was we need to say you the frame is smaller, and the other one is that we need to make sure Dan doesn't say horizontal, vertical, horizontal. You can draw the line in the air, and let's click on it. I'm going to try and preview it, previewing it badly on purpose I think. It's starting off with this page. We'll go back to the homepage. Well, where it is it? I can't see that page. I've got 1-4. I've got this random page, but I haven't got any of the other ones. Why don't I have it? First of all, I could just go into this and go to prototype and give it a flow starting point and then I can start from here, perfect. Scrolling is working, and the reason it isn't is because we haven't linked to it at any stage. I'm going to undo that flow, so don't want that. If I got a prototype and if I select on everything, I just do command A or Control A on a PC, can you see all these lines going everywhere that connects to that, something connects to that. Nothing goes there or there. That's why we haven't been able to see these two pages without first clicking on them and then going to present. What we can do is we can say that when somebody clicks the purchase button and goes there, tap navigate to instantly, perfect. That'll be part of it. This still won't be. How do we get to this one? We need a button. This is show reviews. We do not have that anyway. Luckily, we've got an asset, and we've got a big giant button here. There we go. Now I can say click on this one and get to there. On tap, go there, open it up, send now, even if I start over here, start at this flow. I can't actually click on that anymore because this thing is ever the way of it. Sometimes you need to zoom in to be able to click on the top of that. One more reviews and there is our little scrolly thing. Here we go. That is horizontal scroll. The two things to remember, the outside frame needs to be smaller than the contents inside and the prototype you need to switch it to horizontal. I'll remember that for a day of two, don't you worry, but that dribbles out eventually. The other thing that is not in this course, I guess, is I would be tempted to make this shorter so that you can see more of it to give the hint of swipability. I hate sites when it's like this and you're like, oh, you just swipe and you're like, well, how am I meant to know? This one has probably enough of a hint. I'd like to see something like that, the peeking through there. I'd go through and probably design a review card that was just a bit skinnier, so there was the ability to see that. That is it. I will see you in the next video. 92. Automatic scroll down the page to anchor point in Figma: Hey, gang. I am going to show you how to click this and scroll down the page. Let's go to the bottom one. It's pretty easy to do. Let me show you how. To make this work, I just made this thing at the top here on my product details. Basically, I'm going to bring up these things. These are just frames that I made. We got a prototype mode, and we say you, instead of going to pages, we go down here, go to this link. The rectangle. Now, it depends on, it might be a component, it might even be a textbox. You can go to anything, it's pretty cool. It also assumes that because you are scrolling, you're doing something on the same page. It says let's do scroll to. We go into that rectangle. Let's give it a preview, so we're going to click the title here. Let's go and present. I click it, and it works. What happened there? For refresh. That things, it's working. It goes to the top, but this thing stuck, other thing came up. It works. I'm going to claim working. First of all, this things shouldn't be moving. This got came out, remember scrolls and fixed? It needs to be part of the fixed gang, they are not scrolling gang. That refresh should fix that. Click that and it works. The thing is, it goes all the way to the top. Now, we need to play around with this and this is offsets. You got x and y. One of those things that I find difficult again, so you just what you really need to know is, and you can go left and right. Just play with that. I can't even remember which one it is whenever I come into it, I know because I've practiced this one already, that it's this first one. That it's y up and down, and that's negative. Let's give it a preview, refresh. Learn More, Materials. You can see, it just keep going down until you're happy with it being a bit lower. Let's get it down. I played around with it and I got to minus 200 was good. Refresh, click the button. Click that button. I'll take it back, minus 200 wasn't good. Something's changed since then. Let's do minus 150. You get the idea there. One thing we will do is let's just check this last one. It's about right, and easy will animated. It's defaulted to instant. Let's click Animate. Lets pick some nice easing, and let's give it another go. Refresh. Click that button. Nice. I'm going to do the same for this one, and I'm just going to go down to this rectangle. Let's keep everything good. I'm going to use the same negative 150. Let's give it a refresh preview. That one. Here you go. Nice. You just work your way through this one as well. The problem is, I can't see this. You might have to turn on your outside frame here. You might have to go to design, turn your clip contents off so I can actually see everything. It was the last one comfort. Back to prototype. Down to here, minus 150. That's it. I didn't scroll to the rectangle, I probably scroll to this entire thing rather than the rectangle inside of it. That's why my little calculation was off. That's one. Scrolling stuff. If you get way down the page, you might have to turn down because moving this far, is not very far. It can take wall of 0.3 seconds. This one here, maybe we'll make it a little bit longer. This one can be like using my Up arrow Shift Up, goes up in bigger chunks, so I might go to the x400 of a second. I can get my measurements, confuses them. Anyway, 400 milliseconds, and this one here is going to be just a bit longer. Maybe Shift Up arrow. There we go. Is that going to make any difference? Probably not. But we'll know. Here we go. That is how to scroll down a page. Have something doesn't have to be anything. Doesn't have to be a frame, just a thing to click, it could be a nav item. Just drag it down and it should default to scrolling, and animate it if you choose. That is automatically scroll down the page stuff in Figma. 93. What are Teams vs Projects vs Files in Figma: Hi everyone. In this video, we're going to talk about what are teams and what our projects and what I designed files and those design files, What's the difference between ones in the project party website and the differences between the ones in drafts. Let me show you all how that works. Let's talk about the differences. Files of what we've been working on so far, that's this project we're working on. You can have a bunch of different files. Files can live in drafts or they can live inside of a project or as a project. Well actually let's jump to team. Team is like the company name or let's say that it is, you working at a really large company it might be like a division. It might be sales or marketing or I don't know, Asia Pacific, that could be your team. Inside of that team are different projects. E-commerce website, so this is my project inside of it, it might have that website that we're making, the mobile vision. It might have another file that we create, so we're working on e-comm V1. There might be another design file in that project called V2. It might be an app division, it might be an iOS and Android version. There also might be files in here to do with the launch of the website. This project is like a high level one of the company. For the free version, you get as many teams as you like, but you only get one project. If I go here and I say I want another project, please, it says, hey, you already got one on free. What you do is you share teams with people. I can click on it's got headphones and say, I'm working with another designer, not maybe my client, because I'll talk about that actually in a second. Other team members, I can add the other designers that I'm working with, and they will have access to our different projects. These projects over here, these projects allow us to separate all the work we're doing rather than just dumping them all into one big file. Why did we have drafts and then why do we keep files in both our projects and our drafts. Drafts is a nice place to have your stuff before anybody can see them. Because obviously if I share my team, they can see inside my project and see my half-finished work and then they can be judging me, I'm not ready to be judged. That's one reason you can keep things in draft. Nobody else can see them just yet. I guess that's the reason you have this project, is that you can edit so the other team can find it, you don't have to send them a link every time. Here's this other file that's an e-mail buried somewhere. They all just appear here. Any other UX designer or marketing or sales that are using Figma. They can jump in or you developers can get in here and actually have a look at the files for e-commerce project and to see everything in there. Private, public, and public with the people that you shared the team with, does that makes sense. You might be thinking, well, I'm just going to keep anything in drafts and then just share it like this and that's fine. You can get a bit further, like you can get reasonably far, so I can share it with people that can view. But I can't get them to see if I want to add somebody else to edit it, be able to copy and paste things from it, make amends inside of this file. It has to be in a project. Remember, you've only got one project for a team, for the free one, but yeah, in drafts you can only do a couple of things. I can share it out. Remember we did it before we shared it with Doug, Doug had that he can view it and he could comment on it, which is cool. But there will be a point where you're working with another designer like I do, and I have to actually share the file with them. It has to go into our project which is part of a team. When the other limitations free is at the moment, is that I can only have three files here in my project. One project, three files that I can share it with my other design buddies. But as a freelancer, I'm going to have more than one team. That is the company that I'm working on. You can have as many teams as you like. So say I'm working on another company, furniture. I can add my collaborators to this team. I'm going to skip that for now. I have got a paid version, but I'm just using the free one for this course. You can have as many teams as you like at the moment, but only one project, one file. If you're a super frugal designer, and you can get by by having just lots of teams one project, the trouble is you have to share a bunch of different teams with people. I don't know it gets to a point where actually, depending on your professionalism, how much work you doing in it, that it's actually just too high to try and manage all these different teams. One project, three files. Let's say you get four files, you have to create another team, share that team with that same person. That's where it can get messy, but remember these things do change, and also if you are a student or an educator like I am, you can get a free version, go to figma.com and check it out. There is a free option for educators and for students. But if you are feeling frugal, there is one thing that might push you over and it's library, so I will show you libraries in the next video. See, teams like company name, you have different projects. You can have files in those projects. That's it, I'll see you in the next video. 94. How do you use team libraries in Figma: Hi everyone. In this video, we're going to talk about team libraries. What are libraries? Libraries is a way of connecting the components and all of the styles that you've made in this one document with all future documents and potentially other people in your team. Basically, we upload them here to a library and that means that other documents that you make, here we go let's make a quick one. I can say actually, "you know what? I got nothing in here." Imagine if I could connect it with this library and get all the styles, all the colors, all the components with you using it yourself. Connecting lots of different projects or even more useful if you're working with other designers, you can share it with them too. If I update the original, everybody's file updates as well. That's what it is. Let me show you how to make it. Let's look at publishing a library. A library is going to publish. You need to have the file opened that you want to publish from, the originating file. It's got components made into it, our variables, it's got all of our styles, colors, and when you're ready, go to "Assets" and go to the little book icon. It's going to publish this current file. I'm going to publish it. It's going to publish, like if you keep it minds and drafts at the moment, so it will only publish the styles, not the component. I can publish my colors and fonts and effects. But actually what I want to do is I want to close this down and I want to move it to a professional team. I've got to pay a professional team. I'm going to say, you, my friend need to go into this one. It's no longer in my drafts, it's in this team and in this team project. Now I'm going to open it up. I go to my assets panel, and if I go in here now, everything's going to work. I'm going to unpublish that because I just did that. Let's say we'll do it properly. Instead of just publishing my styles and colors, I'm going to hit ''Publish'', and it's going to publish everything including QC here, my components. So that's one of the drawbacks for the free version, is that you can publish things like stick styles and colors styles, but you can't do these components, which is one of the big perks. Let's click ''Publish''. Give it a think. So file is published. What you can use now is if you're just working on your own, you can create a new design file. Doesn't have to be in drafts or in the team projects. F key, I'm going to go iPhone 8, and the cool thing about it is I can go to my assets panel. There's nothing here yet, but I can go to this library and access those published libraries. Here we go, I can turn it on, let's close it down now. What we'll see here in my assets panel are those components, so I can get going. Here we go. You, my sweet button. If I create some text, select it all. All my styles come along as well. The other way around that, the workaround is to start copying and pasting the bits you need from that other file, which is doable, but they're fun. The other big perk is when you're sharing with somebody else. I can share this library with anybody else in my team. Actually, I didn't have to share it. All I need to do is say this team here has members and I have my other team members in here and they'll have access to their library. They can grab all the company-wide stuff we've made, all the styles. It's about consistency. Everyone's going to use the same hitting style, color styles, all the same components. Me here or my colleagues in other countries. What happens is if, let's say that me as the lead designer, I decide that actually I want to change this. Let's change, what are we going to change? Let's change this. It's being used in about 10 different documents and I'm like, I need to change this. So what I can do is over here, I can right-click and say go to Main component. This brings up one of the things that are interesting about libraries. The library itself isn't this stand-alone thing. It actually references that initial file we made. It's going to open back Scott Econ one, the thing that I originally created. So keep this around because this is going to be like the original. The library works more like a bridge between this and all other documents. I'm going to go into it. I'm just going to wreck it. Let's wreck it. We're wreaking it. What's going to happen in here is, I'm going to click "Done". A couple of things is going to happen. There's this little icon here from the assets, there's a little blue dot there. If I'm clicking on this, if I click off, it actually tells me there as well. Often early versions, it popped up down here as a little pop-up to say, "Hey, you've updated something," but hey, yours might be there. You might come back. It's not there at the moment. What it's saying is, these changes haven't been published to that library, can come working in here. What I can do is I can click on my libraries. Assets libraries and say you want to publish that change to a round button? You can give it a note. Just explain to people, "hey, this is the change that we asked for." They're really sweet. Plus button now. If I hit ''Publish'', it's going to go up. Anybody else using that library is it's not going to automatically update, which is nice. It's going to say, "Hey, here you go, one of the components has been updated, what do you want me to do?" I'm going to review it. It's going to tell me, how any notes that I might have given it and I'm going to hit ''Update''. Look our little button's updated, same with any of our tick styles, color styles. Anything gets updated, it will be pushed through into all your other documents so you can see how maybe your initial project library is not that useful, but as soon as you get into two or three trying to reuse logos and share it with other team members, libraries are amazing. The free version you can shake colors and styles. When they talk about styles, they talk about all of these ones. Let's have a look. These ones over here, these shape what the components do. So it's a really big perk for the professional version. Now again, I'll say this a million times they changed these things. It might be included, list might be included, so it's not set in stone. Another thing to mention is this is my original file. The overrides, this is the new file that we started making. If I go into something like this, let's say this text actually where is a better one. This checkbox here and I go into it and I change the color for whatever reason, it needs to be this other one, and didn't make a color-changing vision. But I've changed the color. Remember that's an override if the original file updates. I'm going to right-click. Now we move from the library. I'm going to find it, there it is down there. That brings up another good point. I'll talk about that in a sec. If I go into here and there is something changed, again, breaking things, I save it. It's going to say that this thing has been updated. You push our birds, push updates, publish, even do all that. Now his original one, let's say I'm going to review it. That's the change. I'm going to update it. But you can see hopefully my override is that color hasn't changed. Buttons the same KG change the text and the button updates. It's not going to wreck everything. It's pretty good. Retains all those overrides like we've been using already. One of the other things, I'm on my original file again, the creative file, and you can exclude things. You might have a file that has got lots of stuff in it, but some junk and you are like," actually this one here doesn't need to be in the library." Maybe these ones down here move from the library, and then we can update it and to say remove those bits from the library, please, because they're not getting used anymore. Another thing you might do is that it's a little bit confusing the way I've done it. I've used this working doc to create my libraries. What I might do instead is I'll show you a bit of a nicer way of doing it. It still has to be in your team projects, so I'm going to duplicate this one. This person here, that's a new one, that's a new one "Copy". I'm going to say ''Rename''. This is going to be SCOTT, master styles, and components. So I'm going to use that to build a name and inside this one. That's going to hang around but this one here is going to be my main master, I'm going to say, do I need the brief and toss flow? Not for this particular one. I've got a copy of it remember. I'll keep the style guide, I'll keep components but I don't need these pages. This thing is only going to have these two pages and it's going to be nice and pretty and I'm not going to wreck it and I'm going to lay it out nicely, and I'm going to go publish this one. Assets, library, so it's a different file. This one here, I can turn this one, off. I'm going to bin that one in a second, but you can see this is just a nicer one to share with people. Because it makes more sense, you know what e-comm V1 is? But this one, can be our universal one. I can share it with other designers. They can add to it and mess around with it and change it and update it. To get rid the other library, we need to open up that file or is it Ecom1, and you can go into assets, library. I've made some changes, but what I actually want to do is go into it and say, "Unpublish this one." They're removed from the libraries and break the link to everyone else and see what happened to that file that we created. This one here. This was based on that library. What you'll notice now is, this is the one we dragged all the stuff out from that shade library. It doesn't delete them. It just goes, your now local files they're no longer connected like they were. And you can see there all my styles have disappeared from the side there. I've disconnected their library. I can pick another one. We'll just got all the same stuff in it. Let's turn on that one. Back in business. One thing I might do is, well is I go and read the pages I need. Let's do it from this one. To use these styles, one thing I just remembered I haven't covered is I can go to my Ecom V1. Let's go to my cover page, This could go on homepage. I've got some grids. You can turn these into styles as well. I can add this and say this is my ball, just so we're all consistent across different documents, yourself, and other people you might be working with. This is my 6 col. You might put it in what kind of petting you're using as well so everyone knows, that can be part of the library. That is team libraries in Figma, you need to have your file out of drafts and into your team projects that you can share your styles. If you've got a paid account, your components as well, and that the libraries are more like a bridge between this originating file and other files between you and your documents and other team members. There's the libraries. On to the next video. 95. The difference between animation & micro interactions: Hi everyone. In this video, we're going to discuss quickly the difference between animation and micro-interactions. It's a tomb that is new for some people if you are new to UX design, for others, you're going to know exactly what I'm talking about. But if you don't, it's just a subtle thing, and the creation process is the same here in Figma, I'm going to do in the next videos. But I know, it's a term that we need to be clear about a little bit at least. Animation is pretty easy. Animation is what you would imagine it being. State to delight uses, help, tell, or communicate a little bit more. Sometimes it's just pure branding. It's just animations, and they can happen on websites and you can do it in Figma and I'll show you how. The other one is micro-interactions. This is probably a good representation of micro-interactions, just simple stuff that shows that. Watch when this is clicked. It seems something. It's user feedback or at least system feedback that something's happened. It might be to help convey like something is being processed like this, or it might be that something is waiting. You can see that little micro indirection here. You get a little, "Wow, look at that." They don't have to be animated, but generally they are. It was another good one. That little locking icon one. That is a nice handy one to know whether your system, the thing you've done is locked or not locked. Whether it's working or the microphone's working. Often it is maybe to prevent you from doing anything wrong, remember earlier on we did this. This would be a really big bones micro-interactions, things starts going red or to know that you've done it wrong or you haven't got enough in the year two, haven't picked enough things for a password. They do get a bit blurry sometimes people like I've have made a micro indirection and you're like it could just be an animation because it's not really. Like this one here is being tagged as a micro indirection, but maybe it's just an animation, I think, because it's really cool, it's become part of the brain, this is backed into delighting people with fun stuff. It crosses the line. Look of this one. Is this a micro interaction? I think it's good, but it's boring. Not full-on animation. Let's have a look at some other interesting ones. Pay complete touched thing. See these ones here, that CO and the fun and definitely be labeled as micro-interactions because yeah, it's helping. Often a micro indirection is a UI interaction like I've done something on the site and the system, your website, your app is telling me, give me a response without having to pop up a window saying, yes, you have enabled this feature. It's like little easy one. We'll build a couple, they both get built the same, with animation. We'll do a couple of different examples. Let's jump in. 96. Animation with custom easing in Figma: Hi everyone. In this video we're going to make this animation. We click the button and it turns into a box and then the box goes off. Fun animation. Now, when I say fun, I use that term loosely. It's going to cover a few of the animation principles that we learned way back in the early part of the course and build on those. A lot of them we've used before, we're going to use them in a bigger job, and I'm going to throw in some new stuff like easing, I'm going to throw in some customizing at least, and I'm going to throw in the things that I know my students get wrong and get stuck on when we're building something. If that doesn't look very exciting, you can skip it, it's a video course. But if you want to build it with me, let's do it. Let's jump in. I'm going to warn you, it's a long one. All right, to get started. Well, we're just going to see where we started in this course. Remember way back here when we made that animation? We are still at that level. We're going to go a little bit further and make it a little bit more exciting to begin there. But yeah, that's where we started. We're going to be updating this page. What I've done is, I'm going to be working on my mobile Hi-Fi. I've gone back to this original Scott Ecom project. If you come just for the easing and animation, I'm going to do some drawing here first, you might want to skip along. We'll get the editor. Could you put a time code down at the bottom now just of a way to jump to if you want to skip all this drawing part because you know how to draw now, you're an amazing drawer. Skip there. Otherwise, wait with me. What I need is two things. I need a box. I am going to use my rectangle tool in this case because we're mostly going to do frames for this. I'm just going to be doing quite simple stuff. I'm going to use my brand colors and to draw some headphones. Prepare yourself for not amazing headphones. Another rectangle. Remember, I can't see my dots if it's too small, I can't see them. You're going to zoom in a little bit, there they are. Who remembers where I can hold down just to do one? Hold down the Option key or the hold key. I want both of these sides, 6, 6. Why are they all coming? Select the first ones, no. Am I holding down the wrong key? I am. It's not an option at all, it's a command. You knew that. I've got this one key here muff mod. I'm going to do a little bit of that. I'm going to copy and paste it. It goes back over the top of itself, just fine. But I want to now go to my camera reflectors. Flip horizontal, is it Option H? No, that is center horizontally. I can't remember. Remember, command forward slash or control forward slash is the answer to all our options. Let's go to, is it flip? It is. Shift H, there you go. Let's get these lined up this way. Draw them apart over the circle toe, started about there. If you hold down Option or Alt on a PC, you can stuff from the center. I'm holding Shift as well to get something like that. Who remembers how to flip the fill and the stroke over? Shift X. I'm going to use my up arrow to go up a bit with my headphones. We're getting there. I'm going to pick my same color. What I'll do is this one with half a rectangle. We're just going to slice it off down here it disappears into this. How do I do that? Select you, select you, as long as this one's on the top, click non-union, subtract. I've got some headphone 1. Choose my arrow keys to go in twice and we've got some average looking headphones. Now, you don't have to group them, but it is really handy to do it, because it doesn't always goes wrong, but sometimes these things end up doing their own things. Let's stick them all together. Should we stick them in a frame or group? Let's put them in a frame because everything can be a frame. Let's give it a name, headphones. Remember from our early animations, you need to keep the names consistent across both of these panels. That's my box. Wow, that was exciting. We've got some headphones. They are going to drop into the box which is small. Okay to scale it up. Can it fit inside? Perfect. We are going to duplicate this. I'm going to hold my Option key on a Mac, O key on a PC. This is how we're going to animate across two frames. What do we do? This one's going to be down here. Layer order, it doesn't really matter, they don't have to match, the names have to match, but on this one actually it needs to be underneath the box. Somehow I actually would double-check that that's actually a row, maybe it needs to start on the right, but let's give it a go. How do we animate it? We go to our prototype 2, then we get to prototype. It's all the way up the top here. Here you go. Scroll up. Our prototype, you my friend are going to go to this box. We're going to do the same thing we did before. We're going to go on a delay. After the delay, how much is a second? That's right, 1000 of these milliseconds, and then it's going to navigate to this. Now, animation, basically always use smart animate, it's magic. It just smart animates it. Easing we'll look at in a second. Let's do ease in and out, why not? Let's give it a preview. I've got to make sure this one's selected. These flows now, you can double-click it here to change it instead of doing it over here, there is the flow 2. Let's call this one our headphones animation. Bad name. Anyway, simply. Prepare for glory, everyone. It worked. I'm going to back using my back arrow. Looks great. After a delay, they fall in the animation, the easing is fine. What we're going to do is look at customizing. What we're going to do is the easing is done between the two frames here. A little tip is you can just use your up arrow to go up in tens, hold Shift to go up in hundreds. You're only going to notice hundreds. Let's say we go to two seconds. Let's give it a preview over here. We don't need to reload it because it had our key. We should restart it. Pretty slow. You can do maths in lots of things. This is like the bonus for this video. You've stuck with me with the boring headphones, you'll get the super amazing shortcut. I can divide this by 2. You can do this in lots of different things. Let's say that I need to design, and I need the width to be half of that, I go to divide by 2. Because that were linked, they both come along. This is maths that you can do throughout any of these. Anyway, if you need x to be, and let's go twice the way over, it needs to go twice that way, that will double what it is. You can add times, which is actually the asterisk key, normally smashed together with your 8 key. So I need to hold Shift 8 on my keyboard, but you'll find that on yours. Do that times 2 and it'll move across to us. There's lots. You can do minus, divide by, times, plus. You need to add some padding to the outside. You can plus 20 padding to any of these fields. Segue way, where do we get to? This prototype is going to have delay, ease in and out. But actually I want to switch to custom. You may or may not have seen anything like this. Basically the easing in and out, can I switch it? Easing, that's the in, that's the out. The easing is this lovely bend here. Basically this is time, and basically this is how fast it's going. Over time, this is going very slowly. The speed is increasing. Imagine this is miles per hour or kilometers per hour depending on where you're from, 0-100. Between here and here, right at the beginning of this bit, it's actually going very slowly. A lot of time has passed, but the speed has gone from 0, it hasn't gone very far, it's only gone to 10 miles an hour. But in the middle here, it's cranking. It's gone really fast, it's gone really high. It's moving fast in the middle and then getting really slow at the end, miles per hour. It takes ages to get to 80-100 miles an hour, an old clapped out bang of car. That's the easing. If I go back to ease, actually let's do, it's that custom just to ease in, and then go back to custom. It will show you, slowly, slowly, fast, fast, fast, fast. That's easing in. If you got to custom though, you can just click on them. Click and drag out of them. That's what you got to do. You can click and drag them, and you can get your easy and going. Now look at that one, that's going to be pretty extreme. It's going go sue is like whoa, and then at the end here over one second. Let's give it a preview, then refresh. Here you go. Is that better? It's not, but we learned what customizing is. You can do the other way around as well. Very few people will do this. No, I take it back. I don't use it very often. It's going fast, it's going slow in the middle and this. You might have an animation that looks perfect for it. Let's have a look. Fast, slow, fast, end. The S-curve is the nice curve. Something like that always looks nice. Closing Photoshop, easing in any of the animations that is a beautiful looking it is. Can you prove it here? Not really well. That is going to be the customizing. Let's look at a little bit of that principles. We came for the easing, customizing, but let's actually look at a few other things that might catch you out. I want to put a lid on like you saw at the beginning. The rule is it has to be in both of these frames if I want it to be in both of them. If I edit here, my rectangle tool. I'm going to click this lid thing, design it amazingly. Here we go, and I call it lid. I honestly will probably end up with rectangle 50 or 150, but you're watching, so it's going to be lid today. Let's quickly go to Design. Pick a color. I want this to animate on. Actually, I want it to be here. That's where it's going to finish right in the animation. I want it to be closed on. You need to manually copy it and paste it because it's not in this first one. It'll just magically push this for repeat. It tries as best as it goes. I'm not over here, I'm just going to fade in and hope for the best. What I need to do is over here, do it this way, and I'm going to do some spin thing. There's not a lot of control because it's not a timeline animation tool. It's very primitive and probably the biggest problem is everything happens at the same time. That customizing we just did is the same for the box, but for a simple animation, especially prototyping, it is perfect. If you want to get hardcore into animation, something like After Fix has a file format called Latte. That's something to go and research, that does some amazing animated SVG stuff. Maybe I'll do a course on that one day or Adobe Animate. There is other programs. I end up being a bit to Adobe. Google SVG animation or Latte animation tools, but we're working in Figma, so we'll work with what we got. Now I'm going to draw a quick tick. Click once, click again. That my friend is the amazing tick. Dragging left and right. I'm going to click on this and say your end-point is going to be round. That endpoint is also going to be round. That corner, we're going to play with the miter, round. You can select them all at once, do them all in one go. Anyway, this is going to be my tick. I'm going to go back to my move tool. I'm stuck in this object editing mode. I get stuck in here all the time. Click on "Done" and now it's a little unique thing called vector. I'm going to call it tick. Scale tool. I'm going to scale it down because I want the stroke to scale as well. It's a bit big. I want this to appear over here. Where is it? Do you know where it is? It's there. It's just tucked inside the headphones there. I have actually dragged it by accident inside this frame. I'll just came above the box. Here we go. Remember it has to be on this copy and it has to be on this one, and it has to have the same name, tick, tick. What I want to do is if you want it off screen, let's say I want this thing sliding up here, what tends to happen is that's not going to work. You remember why. Just repeat it. Just fades in. Because it actually doesn't see it here because it's off the frame. We can have it off the frame, visibly over here, but it has to be included in this whole confirmation V2 frame that I've got: V2 A, B. It needs to be on A. Even though it's hanging down here, can you see it? It's not inside of any of these. I can just put it in there. I can't see it there, so you can decide whether you have this thing clipped or not. It'll zoom in. Let's give it a go. I close my preview, and I think because I didn't have it selected, I had nothing selected so it went way back to my Flow 1, but look, I got my awesome flow. For repeat, refresh, redo, restart, there we go. What I'm going to also do is probably get it to fade in. Down here, I'm going to say, you my friend lab. Actually I can use my sweet shortcut. Who remembers? Select it. How do I get it to zero? Well 50, just type five or zero. No, zero is 100. You can get it down to 10 percent. What is zero? How do I not know that? Here you go. You don't have to do that as well. You can just turn the eye off in the whole layer. It will do the same thing. Let's give it a preview. Refresh, it should zoom up and fade-in. Last time we ended in two frames. We're going to go a little bit further in this one. We're going to go to you duplicate because I want all of this stuff with all the great naming to come along. What I'm I going to do? I'm going to try and get it to jog off. I'm going to go, I want it to go like zip off this way. I want it to go up a little bit, so it looks like it's flying off. Here we go. It needs to make sure that it's inside that frame, even though I can't see it. Here we go. You're going to come with it. Should we get both of those? Yeah. Shift click both of those, it's going to come. It's going to be a little bit up in the air as well, and make sure it's underneath my lid. You can come along with the ride and just make sure he, where's he? Headphones is in confirmation, but underneath. Let me use my square brackets to send them right to the back. There we go. Find everything. How good is that going to be? Probably terrible. The timing is not going to be good. It's an off the cuff den designing. I should spent more time on this one, but here we go. You ready? It's not going to work. Do we know why? You know why. There's no connection between the page. Where are you? There you are. Prototype. I need a connection, so I'll do another delay after 0.3 seconds. We are going to smart animate. We're going to use our custom ease. Actually I'm not. I want it to go like that. It's getting faster and faster. Starts slow, starts slow, starts slow, fast, fast, fast, fast, fast. It's good to go. Refresh. It's working. I need to play with the timing. It is taking forever to get over there and it's still with this one. How do I control the timing of this? It is how long it takes between this and this one. Here my customizing, and then you shift to go down. Yeah, that'll do. You have to go up and down a few times. Refresh. Animation genius right there, look at me go. My box's coming. Its hidden off real fast to come to my door. I probably have a couple, or maybe not as abrupt. That is almost it. I'm going to show you what happens now when you're like, I know, I'm going to add this other thing way back at the beginning. You saw at the beginning that Purchase button updated. It's going to be, I want to actually double back. How do I double back and edit another frame? It's not that hard. I'm going to use this one again. Just so that I've got the naming conventions, I don't need half this stuff. What do you do when you've got A? You might as well, final final V2. I've ruined the naming. It's got full into it. I got two flow starts, it's not what I want. If you want to get rid the flow, don't click at the the whole thing. I've got two of these. I've duplicated it. I minus it, here we go. You go there. Can you see I can actually have two of them? Which is a weird thing I don't like about Figma. You can actually have two of these, so delete one add one. You go there, you go there, and this one is going to be different. Actually, I'm not going to have that. I'm going to have you when you're clicked go there. I'm going to fake this until a button, so I'm going to say you are now a button. I'm not using our components and all that lovely and variance. I'm just faking it here, and I'm going to say Design, four. I'm going to add the purchase there, purchase and make sure I'm using my styles. You've got to actually select them all to make sure the styles applied. I'm going to make it bold anyway. It's about the stage that I'll probably create another text style. This can be my button 1 text. It's basically the same as the paragraph except it's bold instead of having to change, and I'll write it. This is going to be it. This guy here, prototype. When he is clicked, he is going to go on tap, go to this place on this is my animate, and I'll probably ditch my customizing and go out and back. Yeah, that might go. We'll give it a test anyway. This stuff here, remember we can delete it as long as you want it to fade in over here. We saw that if you delete stuff through clicking goes I'm just going fade it in because I don't know what else to do. Yeah, let's play this one. Click on this. If you don't want that to happen, I'm going to undo. You got to do something with it, so maybe they fall from the sky. Make sure the headphones is still in my final final V, and this thing here, you can't get it to follow a path if you are asking, can I get it to follow a path in? No, it'll auto animate you got to get used to a bit of auto animation like what it's likely to do. Are they all in there? Turn it on and off as a good way that I will, are they all in there? Is this is going to work? Refresh, purchase. It's okay. You can say it. Refresh, purchase. That's cool, the little boxy thing. That is going to be it. For my little animation here, I'm actually going to say you after some time loopback here. On delay after zero seconds, go back to there. It's my animate? No. I'm just going to go dissolve. Let's give that a test. Button, go back around, loop back. Well, there's need that you hide out, things to remember, things had to be named the same on both of them. If I now and go and call this thing, you can just change them quite a bit. Remember if I call this one button because I'm being good, it is not going to animate into this one. Refresh, click. It just faded it out. The other thing that I run into problems with, I'm going to undo that is I'll go over here and I'll start grouping things. I'm in Design View, I'll start grouping it, and that is not good because now there group instead of all these things and it's hidden away, and what does this do with it? Just fade it out at the end because it didn't know way to go over here. Be careful not to group things or frame things. Once you start, just keep the same consistency, keep testing to see if anything breaks, and yes, you end up with loads of friends. It's what it's down here. I wouldn't keep it along with this workflow because you end up with so many of these. Another thing you can do, maybe we didn't tidy up. I've selected all of these I want to get the spacing the same. You can see, they're all off. If I select them all, tidy up works on everything, not just objects in frames, but the frames outside frames themselves. If you think this is complex, let me go find you one. You wait there. Reluctant to show you other people's animations because they're way better, look at this, how cool is that? I guess I wanted to try and find one the head, this is it. Basically every single thing is in its own frame, and they've just played around working with what can auto animate and some customizing to like say this box close. Obviously that falling in is pretty easy, but then the box closing, it couldn't go straight from there to there because Figma missed up the animation, so they've had to do a little bit of in-between, little bit of in-between, little bit more, little bit more, little bit closed, bit more closed, a bit of tape there. It's pretty amazing what they've done. It looks like this when it's finished. That's not the one, that one. This is my favorite. Look at how happy this one is. I had to go in and have a look at how it was made, and that's what you're going to do. I just went into Community, typed animation and then clicked on lots of them. Lots of them are horrible, and some of them are great. Because you've got sweet Figma skills. You can go through them and pick them now, this is so good because the illustration is so wonderful. I can do the same thing, but my stick man wouldn't be as nice. But looking at it, we can see, there's from frame 1 it's just a lot of time delays, goes to frame 2, time delay, time delay. I've actually drawn these separate pieces, and that's the main part I feel is this lovely illustration. But the actual bouncing between the two is, let's have a look. It's all to do with the easing. Can you see that done smart animate like we've done, but then they've done some nice things with the easing as in, when I say nice, they're gone through and you can click it out and above. It doesn't have to be within here, I kept mine in the box. You can be outside of the box. We can ruin this person's animation. Let's have a look. Let's go back, refresh what we notice it? Yeah, we will see that zip at the beginning where it go. Yeah, this is art not science. I feel like this just beautiful illustration, some great easing going on, and lots and lots of shift 1 frames. I've seen way more as well. I've seen like 30 and 40 of them as well. What a meandering video, but we learned customizing earlier on. We built a slightly bigger project, and I guess that was my goal here, is to show you that more of a fuller animation and we went from a little black arrow that moved in to, I don't know. Let me go back to mine, on the line. I will see you in the next video. 97. Class Project 18 - My Second Animation: Hi everyone. It is class project time. We're going to create your second animation, okay. Now you might be either really excited by this class project or you might be deriding it, okay. But this is all about learning, okay. This could be your very sick and animation of your entire life. That is okay. I give you permission to be terrible edit. Just give it a go and have a minimum of three frames and create your own confirmation page and go to the box thing. You can do the box thing. But, think about it like if your product is like the bike, maybe the bikes wheels 10 and it skids off or there is a camera maybe takes a photograph. It doesn't have to be going into a box. Okay. Have a look at what you've got. Craft beer might be bubbling at the top, something fun. Draw your own icon version. I drew those headphones, you do whatever you are doing, and experiment with the easing as the other thing. Play around with the easing and what do you have to deliver? Take a screenshot of all your screens, okay. Just of all of this, okay. If you do know how to record your screen, I use QuickTime on a Mac, okay, on a PC, I'm sure there's a version, but it would be awesome if you do know how to record your screen to upload a video, either upload it directly here or stick it on Vimeo or YouTube or something and share that, and I'd love to see it in the group. Even if you consider yourself like I'm a terrible drawer, do it anyway. Our group is an amazingly welcoming group. Explained, I'm not animated this my face go, what do you guys think? If you want to critique, ask for what critique. People are kind I'd love to see what you make, and it's a minimum of three frames. If you do a big long animation, go for it. Otherwise, just do something simple, and I will see you in the next video. 98. How to make animated transitions in Figma: Hi everyone. See this big bird's nest? That turns into this magic. You're ready, the fades in Doug slide in a little bit later. Okay, so that's what we build, we're going to do. Instead of just doing animation like we've been doing, it's the same thing, but we're kind of building out a page, like a page transition. Okay. No page peels unfortunately. But there is. Yeah, we can do something almost as good. Alright, let's page peel into it, Okay, so we don't wreck our home page. I'm just going to move it down here and this is where our giant messy page starts. Well continues. Okay, so we'll get our home page. Let's call this thing something different. So we're going to call this one now, animation. The way this works is basically we need a placeholder page. We're going to have to string a few of them together to get that animation. The first thing we're going to do is actually not between those two pages. Between that one and this one. Come with me, Copy down here, Paste. Now I'm going to have mine a bit further apart at the moment, just because I'll show you a wine a bit. I want this page. I'm going to switch to prototype. Now, I've been just clicking the buttons over here. Okay, yeah, if you start getting a bit like shortcut, like hey, what is it? Okay, remember the shortcut is the command or control for slash and you can start typing it in like prototype panel. Okay? And you saw it there. See the little shortcut, Okay, It was option nine or old nine on a PC. If you look at your keyboard, hold down the option key on a Mac key on a PC, and tap 890890. They're all next to each other. Along the top of your keyboard, you see design prototype inspect. Also, don't forget that there's this little guy down here, K under keyboard shortcuts. And that's actually just really well laid out and grouped, and they've highlighted the best ones, and this one's under view, or is it these three? Whyn't these ones blue? I think it's just to show importance k of the most useful ones. So do keep cash your eye over the blue ones, probably the ones you're gonna want. So I'm going to go, actually what I might do is just break a few of these, just 'cause it's a bit messy. Let's going back up to the top thing. It's not what I want right now, Okay? So what I want to do is say when I click a little more, I want you to go here to the kind of product details page. On tap, I'm going to use an animation of like push. That's what I used in this one. It doesn't matter easing. Let's just give it a preview. Let's rename this flow here instead of E Commerce Flow. This is going to be my animation flow. Let's play it from here. All right. No more he. Okay, that's what I'm going to start with. And I want this to build like you saw before. So what we're going to do is we're going to have to have two pages, okay? Separate them out. Again, basically there's going to be nothing on this page. That's the main takeaway for this course or this video, is that when you're doing transitions, you probably want to start in for an empty screen. Remember we can't have an empty screen. We need to have things off screen or totally transparent. What I would like to do is have maybe this first block slide in. These guys are going to push off. We're going to have to make this way bigger. Remember if they are selected, you can tidy them up and then you can grab the gap in between if you've got a lot of them. Okay, so I got some space, not duplicating them, I'm just holding shift. So they slide off this way you I'm not sure where I got that thing from. It was my footer now, in this case, I want to group these now. Okay? 'cause I haven't grouped them before. They should really be components, but we made these earlier in the class. Now, I'm not going to, I'm going to leave them all as kind of ugly bits and pieces. Why? Because there are bits of pieces over here. Are they frame nine? Actually, they're not. They're altogether okay. Forget me. Okay. So you can go over there, you can go over there. Just be careful when you are gripping thing. They don't need to go over there, do they? Nobody can really see them on their first screen, but hey, let's be official. Same with you guys. I'm going to get you guys to start over here, I'm going to get you start over here and I'm going to get you probably just to fade in. So I'm going to start it by fading it out. I'm going to hit zero on my keyboard capacity set to zero, 100% Maybe there is. Let me know in the comments, if there is a set to zero, I know there's a set to 100% how do we not know this? Maybe there's not one. Okay? And you can fade in as well. So zero I'm projecting here. I'm saying that I want these things to slide in from these sides. Okay, I want that to fade in. And what I'm going to do is over here, actually let's preview that just to make sure we've got everything working. So we're going to click the button. It's going to go here, and then nothing's going to happen. Right. It's just going to get stalled for a reset. Let's go a more. Okay, and it just sits there. So what I need to do is that a bit of timing. So you are going to prototype mode. Let's use our sweet new shortcut. Let's remember our option on a Mac. On a PC and type nine prototype. This one is going to go we. You can drag that out or you can say on Ed in direction that says not tap. I want to say that on delay. Where do I want to go? I wanted to go to. Now we get to what page? What I name this one. I have to do some bit of naming animation product details. Animation product details you delay to animation product details. Thank you very much. Okay, it's going instant as well. Let's go to smart animate. Okay, let's give it a preview. Now let's reset. After a time, it's going to fade in. It's not what I want, I want it to slide in. Want now why aren't they in there? You might be screaming at the screen, going. He didn't put them all in the original frame. Okay. It's one of the things when you are dragging it out, I wish there was, they haven't. Photoshop. And one where you can say you do not leave this frame. There's an option in here says do not, you know, leave the parent frame when I drag you, even if I say, even though I've kind of drag you out, hopefully that'll come in. The future might be there now. Have a check. The future is here. Actually. The future was actually available right then, but I didn't know the shortcut. Okay. So I just mentioned there that I wanted a way for dragging things out that they stay inside of the page. Okay, So it's left this page and just come out of it while you're dragging. So start dragging just with the mouse, click old and drag it. And while you're dragging, hold down your space bar key. And what you'll notice is, can you see here, it's stayed inside the page. When you are moving anything from the page out, start dragging first, then hold down spacebar. It's a bit advanced because what you can do is just go, you're there, you're out there and is jumped out. I just drag it back in. Okay. That's one option, but there you go. Thanks to Dexter for the tip. Carry on. All of this, I need everything to be an animation product, so, I'm going to grab you guys and move it in. Let's do all of this stuff first. All of that is going to go inside of. Now if I drag this, can you see it's missing those. If I drag those inside, animation under the scrolls part, did it leave the parents behind it? Is that it? Those guys came along, some of them are already still in there. Let's get them all in the same part. All right. Let's give it a preview now so that those guys should work. Reset those slide in. These things aren't part of it. The only reason I left these separately is that if I drag them in in the wrong order, so if I go in, what is it? Tabs, grabe the parent frames. Plus if I drag them and I select them weirdly or I drag that one in first say and add it to animation under the scrolling partner. Fixed is this. Na, we don't want it to be fixed. And then drag these in on top, see what's going to happen. You might not, but the tab actually, you drag it underneath by accident. Let's have a look. Click, pause, Slides in the layer order was around the wrong way for a second. Let's refresh that one. It's a little hard to see back. I'm using my back and actually you can't really tell the transition. But you might find that if you start them behind, they have to kind of some stage flip to be on top. Okay, they're on top over here. But just know that you just make sure your layer order, it's not important, like it doesn't break the animation. But you might find that for part of the transition, these guys are going to be underneath it. Does that make sense? Why not? Anyway, where are we got? Going back forward arrow. Okay, so that's kind of what I want and I want these guys to happen later on. So the trick for that is that we, you know, there's, everything has to be timed at the same time to come in. Now, this is only two for Figma, It's not something I made super clear in the last videos. Everything's kind of tied together. When you actually go out to build this Apple website, the developer has, you know, they can control all the timing at any stage, okay? So this is just a limitation for Figma at the moment. There are ways around it, if you get there are some timeline animation plug ins, protopyes, another thing that you can export your Figma files to and kind of do more complex animations. But outside of the scope of this course, just know that all of us having at one time, it's only because that's what Figma does. All right, next thing I want these not to be in. Okay? So what I'm going to do is be clever and duplicate this first. Okay? Because the trouble with doing it afterwards, I'll have to try. And if I move all these off and then duplicate it, I have to try and move them back in where they were. So what I'm going to do is say Frame 11, give us some more space, You can be off still inside details, you can be off. Oh, look how messy this is getting, and these guys are off a frame anyway. That can be seen. We start, it pushes over to an empty screen. This thing builds. And then the difference between this and this are these guys. They started over here and should slide in. Give it a go. Frame 11 is not in the right thing. Animation scrolls with 99. You need to be inside, animation scrolls. Now give it a go. Play. Well, one thing we're missing, Come on, pop quiz. Why isn't that moving to the next one? We just did it. We did it right. I swear we did, Except we didn't say what happens after this just sits there. Okay, We need to say you, my friend, prototype member option or Alt Nine. Okay, we can say you go there on tap. Nope, I want you to go after a delay there. How long this smart animated, please. Let's get it to ease in and let's do it in and out and back just for Googles. All right, let's preview it now, because I didn't select anywhere. It's going to just preview the first home page. So I'm going to go to Headphones. Animation. No animation flow. Okay, and let's go to Lomore. Okay, so there you go. Hey everyone. I want to insert a little section in here. This video is going right for some people and some of the people are getting a little bit lost. And I thought, ah, be a good opportunity to jump in and kind of show a few different things that might have got you lost. If you got lost and if you got it right is to watch it anyway. Because it's helpful to see where you might go wrong in the future and how to fix it. So a lot of the problems were these things not sliding in, right? Well, actually the first one was they couldn't even see them. So once they've moved this off the page, they're like they've disappeared. Okay. It's what we need to do is make sure when we click on our parent frame, okay, whatever animation page you might have to go to them all and change them all. Okay, but pick one. Okay, and then go to prototype. And then go to this one that says no. Go to design. And go to this one that says clip contents. Can you see Actually, clip contents doesn't change much other than we can't see it. Okay, in the preview here, you can still get it like I know that one's called, what's it called, Frame 11. Can you see it there? And I can kind of click it and drag it in. It's still accessible, I just can't see it. So if you are finding it tricky to kind of like do your animation, click on the parent frame, turn that off. Okay, so you can see stuff to clean things up, you can turn it on. The main problem is when people are dragging this off, they're leaving the page at the moment, everything is inside this thing called product details A. Okay? So what happens is if I want this to be if I drag it out, because I don't want it included here, you can see if I just drag it without holding anything. Frame 11 is now outside of this page. Okay? Frame 11 on the page. It's inside this parent page, But if I drag it out, it's no longer you've got to make sure that you either drag it back in, it's inside product page. I'm just clicking and dragging the parent frame, which is frame 11, and make it throw it's back in, or like I showed you a little bit earlier with the update is while you're dragging it out, start dragging hold space and it just doesn't move outside of its parent page. Another thing to check is to click on the parent page and go to Prototype. And just see if you've got where is scroll behavior. Okay, check out the overflow. See if no scrolling vertical change between these two. I can't see that being a problem, but it's a guess that's something that I'd go and check. Okay. The other thing to check is that they are named the same at the moment. This one here is called Frame 11. It is inside Product Details A, over here under Product Details, okay? This one here still is called Frame 11. Watch when I do it and I switch this to something else, like I don't know, Frame 11. A, something, something different. These don't match. Now let's have a look, and let's preview this one. This will pop up, cool. Right? So the new little update to figure it opens up on its own little page. I click on this one, goes after delay. It goes to this one. Can see it just faded in instead of slid in. Okay, if it's fading in when you're telling it to do something else, that's fig going, I don't know what to do with this thing because I can't find it on the previous page. Can't find it because it is different names. But let's refresh it. You watch it. It's just going to fade in. Let's make sure the names are the same. Doesn't really matter which ones call which. I'm going to call you over here. Let's change to 11 A so they're both the same. Let's give it a preview. Is, is going to work. I've been under pages to be different. It's on the wrong page. Let's go to Animation flow. Let's go to Limore. Come sliding command sliding. It faded in the update help video is not working. Wait there. All right, I know why. And I renamed this one. So we've actually got three instances of that same thing, right? So I rename this 111. This 111. But the actual one that does the animation is between these two frames. Here. Between this one and this one. This one still has the old name of frame 11, so now they're all going to be called 11. Okay? As long as they named them all on all the frames. I'll leave that mistake in the video as well, 'cause it'll probably happen to you. So we're gonna hit Fa refresh. And hopefully now we're going to go come on pre, come on pre slider. It's light in. Alright, so I hope one of those little updates helps yours if it's not quite working. All right, carry on with the last part of this video. What we might do for this one is that ease in and back because there's so much more going on and we might have to increase this. Okay, so click, drag it if you're sure, just type it in. Maybe it's going to take one on a 2 seconds. Other thing we might do before we go and clean it up is I'm going to click on Prototype. Have nothing selected and you can drag these around. I feel like my animation flows needs to be there. I have no idea what float one is. So you can select it and delete it. Okay, This feels more consistent. Let's go refresh you slides in the there. Feel better. Better. Okay. So those are page transitions. You just have to potentially what you want to do, you have an empty page and then kind of build it on every single page if you want different timing. If you obviously want it all to come together at the same one, you can jump from this one all the way over here. Alright, that is how to do page transition animations in Figma. Let's get on to the next video. 99. Class Project - Page transition: Hey, gang. It is class project time. It is page transition. I find that pretty hard to say so I will pronounce it, page transition. I want you to make something like what we got here. Yours can be equally as made. I don't mind between which frames it is, but some kind of building thing where you go from one page to the other so that it is animation, but it's kind of a way of, I don't know, building out a page. I don't mind, it can be between the homepage and your existing product details page, that's all right. Or it could be new pages that you're creating for your own version. You might have a particular product that could have a really cool fun page. Build that out and see if you can do some transition between it. Like before, you just take a screenshot of the pages you do. Let's say this one here. Just zoom out. I want to see all of this probably in design view. All the Ys have gone. Something like that. Screenshot of that if you know how to record your screen. I'd love to see your actual animation. Upload that instead of or as well as. Also share it with social media. I'd love to see what you're making and what you can bend Figma to do. Yeah, it's not a full-blown animation tool. I'd be interested to see what you can make it do. That is it. I will see you in the next video. 100. Micro interactions using interactive components in Figma: Hi, everyone. In this video, we're going to do the most basic of micro-interactions. Is this even a micro-interaction? A hover. They're called interactive components inside of Figma. This one is a hover, as you can see. This one here is just click on and off. Up until now, we've had to choose a variant to start with, and we haven't had this lovely interaction, but now we do. Let me show you how to make them. Hi, everyone. First thing is that this feature that I'm showing you here is new for Figma, actually, it hasn't come out yet. It's still in Beta, depending on how long in the future you're watching this. Either it'll just work flawlessly, or you might have to turn it on. If some of the features aren't around, just go to Figma, and we'll do a Google search looking for something called interactive components Beta and ask to be part of the program. It takes about a week and then they seemed to be leaving any old person in. They let me in. But in the future this might just work, so we're going to start with that. I'm going to undo and we'll get started for real. What I want to do is just to really bare bones version, just so I can show how it works and then we'll do some more detailed things as we go. I've just got a blank document because other one is getting messy and I've called it micro-interactions. I'm just going to start with a rectangle. We're going to do that button thing you saw at the beginning. I'm really just going to do bare bones. We'll start with a button that is gray, and we will turn it into a component. We're going to rely on some of the stuff we already know. A button needs to be a component, heading to a variable. That's what we need to start with because interactive components is just a way of switching variables. To make a variable, we have to start with a component. That component has to be turned into a variable, and it needs to be two variants, or a minimum of two. This one here, I'm just going to double-click and change the color off. I've got two colors, and this is where we got up to before. That is a variant and what we were able to do up until recently is only we can go, here's my component, I can pick whether it is this variant or this variant. We had to just do it. There was no interactivity between the two, which is weird. These new features feels like very important part of our prototypes. But anyway. What we need to do now is to make that actually interactive. For this interactive component, what we do is we go inside here, this is my components. Maybe the dots lined the outside. Go to Prototype, go inside my components here. Here's the two versions. You can see these dots appearing. Well, up until now we could only go to other frames. But now we can go to other components and use things like, you see that on tap while hovering. If you can't see while hovering, it means you are not part of the Beta and you might have to go and ask for access if you want to do this. Otherwise, wait around, it'll be out soon. They might change the naming of it. Just look in here. Some of them is going to say something to do with hovering. It might not say while hovering, but they reserve the right to change it in Beta. While hovering, I'm going to change to Variant2, and that's it. Let's give it a go. Let's preview this one. I say it's going to work. It's not going to work, or it does. If yours doesn't work, look at that, I'm hovering, I'm not doing anything. That's the sweet new Figma, and the thing called interactive components. Super helpful, longtime coming. If you can't see yours, it's because you only have this, the I have this version of it. Well, as I explained here, drag one out. You might only have this first components here. You might have to drag out from your assets panel, the actual button. You should really be on its own page. Let's go to this one now, and there we go while hovering. Let's do another simple one. It's going to be whilst clicking or at least on tap. I'm going to go and steal something from my last document. I went and installed this checkbox, I think, I originally stole it from Microsoft's Connect community one. Anyway, let's go look at the layers. It is just a rectangle and a tick box. Currently you're inside of a frame, but that doesn't really matter. I'm going to select both of them. Make sure it's component. Make sure there's two variants of it. The second variant, I'm going to double-click to delete the tick. That's what we did before. We made this little thing and we get to decide whether it's ticked on or ticked off. To add the interactivity, just like we did before, switch to prototype option 9, Alt 9. I've double-clicked to go inside the components here, to say, "You go there." When do you go there? On tap. Done it already. On tap change to Variant2. Instantly? Yeah, why not? Dissolve, it's not going to be that exciting. Let's give it a preview. I'm going to drag out an instance. I've already got one there and let's preview it. I'm pretty sure it should be already open, and watch. Look how cool that is. Why doesn't it go back then? It went one way. If I reset it for all, it goes off but not back on. How do we do that? Basically, if you want it to toggle, go back and forth, you basically just go to this. We've got one dragging from here to here. Let's just get one going back to this way. It will remember the last thing you've done. It's going to remember on tap change too, and it's going to go to this new one. Hopefully this works. Let's go. Toggle, toggle, toggle, toggle, toggle. Hey, super basic micro-interactions. Really, this is just interactive components. This is basic as it gets. We'll do some more micro-interaction, the bits in the next video. That is interactive components inside of Figma. 101. Micro interaction toggle switch in Figma: Hi, everyone. In this video, we're going to make this little toggle switch so that it turns on and off, and it animates and changes color. Very similar to the last video, but a little bit more exciting and probably a little bit more micro-interaction-nes because it's going green to help us communicate that it's actually turned on. All right, let's get going. To save time, I've put a circle with a rectangle with rounded corners, play with some sweet drop shadows and some lovely gradients. We're going to start at this point. Remember to make a variant, it needs to be a component first, make a variant. It needs to be different and all I'm going to do is move this over here. The only difference between this and the last video is we need to, when we join them up, prototype. I'm going to click on this one on the inside. I double-click it to go inside the sit. You go over there and untap change two we've being using instant, which is the default. But we can use smart animate. It's the only difference, and it's going to do our lovely the animation that we're used to. While we're here, we must get it to go back to do the same thing. Let's give it a preview. You can't preview this here. The components it, we're going to drag out an instance of it. Now that should work really. Feels nice. That's good. I'm going to fancy it up. That's a micro interaction. I feel like it's more a micro interaction if we do something with the color. Let's have a look. Design linear. Let's indicate that it's turned on to make it a bit clearer. Here we go. We're going to go something. We're going to spend too long picking colors that's what we're going to do. Is it green enough. I think I've gone for too much of an aqua. Anyway, let's go have a look. This one and we go on, off. Look at that. Look at us making stuff. It's pretty small, but you're probably zoomed in. There you go. You might have a red on one side and green on the other. It's just really helping us know that the thing that we've ticked next to is actually turned on and that smart animate works nicely. All right, let's do an extra special fancy one in the next video. Yeah, let's go and do that now. Before I go, I've been really lazy with my naming conventions. A couple of things to remember. The same rules apply. If you want to go between this and this, the layers need to be the same. If yours stops working at any stage, it's because you've got component or is it, lets go to U. This my components here. I can tell it's the master because of the icon and I've got variant 1 in default. First of all, let's tidy that up. We can name it over here. We might call this one instead of variant 2, probably it's is going to be On. This one over here is going to be Off. That's one thing that's going to make this nicer. When we are rigging this up and trying to drag it over to different places. You will see, 'Drag change to.' You can see you I've got my little toggle switch now on and off. That might be helpful. The other thing is that one, this one's called Ellipse 10. This is called Ellipse 10. If I end up accidentally changing it or grouping it, it's going to break. Let's give that a go. No workey. Just make sure that these are the same between the two variants. The same sort of problems we had when we were doing animation between frames, and between these little variants, the same structure, the same rules apply. Again, let's have a look at our component design. What have we got? Its called component 1. Terrible name for it. It's going to be my toggle switch. You see the variance is, what do you call that name value, that's my default for like, "I'm not sure what to call this." Turned on this. You get the idea. We came back to name just to remind you to name things better than just leaving it default and in variant 2. All right, now let's go and make something a bit more exciting in the next video. 102. Micro Interaction burger menu turned into cross in Figma: Hi everyone. Brace yourselves. We're going to go from stripy Burger menus, [inaudible] sandwichy thing too, criss-crossy thing. It's going to animate, it's going to change color, the outside shapes going to change. It is totally a rite of passage to make this animation. Everybody does it. It is amazing. It looks cool. I could click it all day. Let's go on. All right. Let's jump in and show you how to make it. The trick with this one is, there is no trick. It's the same as little Toggle Switch. It's just that Smart animate, but I'm going to take, well, not longer, but I'm just going to work your way through it just so you get the idea of how to make it, and plus it's like a rite of passage, that little Burger menu animation. I'm going to start with the rectangular or frame, doesn't matter. Around the corners, all the way round, color-wise, that'll do. What we're going to do is we're going to start with our little lines. I'm going to use L for the line 2. I'm going to hold Shift to drag them across. I'm going to make three of them. Command D. I'll drag the first one or option drape the first one. Command D. Let's select all three of them. I'm going to go to. I need to really have a test of how far apart these need to be. Stick them all. Let's tighten them up. All right. That's going to be my start. I'm going to start with some brands specific color, it's color like this. Just like before, we need to have a component that needs to be variance between them in this very end. Basically what we do is this middle one, you can either delete or lower the opacity down to zero, so it goes away, or decide that it's slides off or do something else. With these two lines, I'm double-clicking to go inside my components. Don't click on too much and I get this. I want to hover on the outside so I can get this, and I want to get it to, who remembers how to get it to go to 45 degrees, is what I want. It's it. Hold and Shift. You can tell by looking at it and it says it up there. There's that one. There's this one,45 degrees as well. Now I'm going to line them up, them in the middleish and not aligned. Let's go that way. It'll look good. No one needs to go the way of it. Aligned again. Horizontal, vertical. There you go. I'm going to change them to, let's go for you. Let's change it to red. I want extra micro interaction goodness. I wanted to red to close, green to get started. Let's go a full roundy. Instead of changing to a circle, you can actually make a circle by going rectangle tool and all of that. We talked a bit this earlier, but all of the rounded corners. As long as you're above, doesn't matter how much, but 2,000 in there as long as it goes past being a rectangle to a circle. The magic happens is this prototyping bit. Remember, I'm going to click inside to grab my fist variant. You are going to go there. It's the same. On Tap Change to, but instead of instant, it's going to be Smart animate. Same with this one here. When I click this one, go back over there and it's going to remember what I did. Let's give it a little preview. Let's go. Remember you need instance dragged out of it because you can't preview the component set. Let's go in here. You're ready. Where is it? There it is. It's a rite of passage. That one will impress your colleagues, your friends. Look at how nice it is. It goes from square to a circle. It also does that lines sliding over each other to cross. That is taking the micro direction thing to its next level, something that looks quite fancy. Same principles, prototyping instead of from frames just to different variants of a component set instead of over to pages. Then just changing my animate to get that all. Click that all day. All right. That is it. I will see you in the next video. 103. Class Project 20 - Micro interaction: Hey gang, it is time for a class project. This one is micro-interactions. I want you to do the burger menu and across, like I said, it is the rite of passage if you haven't done it already. It is this one. Lines to across you do your own version. Well, just do that. But then I want you to do your own one. The custom and direction can be anything you like. It could be a toggle switch. What I want you to do is go and have a little look, go look for a Google search for micro-interactions or 20 best micro-interactions or most exciting, and to see if you can recreate one. It's going to be for your actual Figma file. Go have a look at that. What could be done? Maybe it's this button here, maybe it's that purchase button, maybe it's on the Congratulations page, something to do the stars. Yours is starting to look a bit different from mine now because you've been using your own products. Have a think, have a bit of an explore, and I'd like you to create both the bugger menu and to cross and your own one. Then when you're done, send me screenshots of the components set. If you can't work out how to do a video animation. What I mean by that is send me a screenshot of this. But if you can, I'd love to see a video of the thing working, you interacting with it. Go forth, make a little interaction, and I will see you in the next video. After you've done your homework, go do that. 104. How to change the thumbnail for Figma Files: Hi, everyone. In this video, we're going to go from the thumbnail here that we've been using, which is for me, not pretty representative of what we're doing, from this one to that one, which is a little bit more representative of the actual file inside. Sometimes it can be very obvious what's in the file and sometimes not so obvious, so a customized thumbnail can be handy. Let me show you how. It's probably driving you just as mad. The thumbnails here are fine sometimes but then they end up like at the moment it's showing me stuff that I made a long time ago. It's on my Task Flow/Brief page and it's not really indicative of what's actually in the document. That one, not helpful. Basically, this thumbnail is using the first page in your document. I'll open it up and just find out how to later on to go, which one was I working? That's not helpful, it's just too small. What you can do is you can modify it. I'm going to go into it. What it's using at the moment is whatever is on the first page on the first frame. It's using this thing on mine. What we can do to update it, we can just go to a frame and right-click. Here's the thumbnail. That's a way of doing it. Problem is it's only going to use that one frame, so what you tend to do is you make a whole page for, you're going to call this my cover page or cover thumbnail. You can call it anything you like. Put it at the top, and in here, there is a frame default under Figma community called file cover. It's all we want. That matches the size back out of here. You can put anything you like in there. I'm reluctant to go and start copying a chunk of this. Why? Because I got more instances of these things and what I tend to do, you can use copy and paste this and stick it on that page. What I tend to do is just do a screenshot of appropriateness. On a Mac, it's Command Shift 4. On a PC, I think you print screen and then paste it in something. You'll have to double-check. I'm going to screenshot that. I go to my cover page and dump it on there. Command Shift K, Import. I've got a screenshot, there it is, and I'm going to have exact, click once. I'm going to stick it inside my frame. What I'm going to do is, I don't know, it feels like part of the legit of being a UX designer is, it has to be tilted on the side like a gun in the movies. You're not a real UX designer if you have your stuff straight. Has to be on the side. Cock to an angle. That's going to be my one and then I can right-click this and say, "Set as thumbnail." It's the right size. What you'll also see is, can you see the little icon changes? There's teeny tiny little, I don't know what that is. It's the little glam that was at the card that appears in here. Well, for me, in my vision, I'm using a bit of vision, so this could just be in mine. It doesn't update it straightaway and I close this down and open it back up. Right there and we're back and it worked. Look at that. All on the slide and customized. Look at this. Obviously, some of them work just fine but there we go. Another thing you can do is, let's open this up, you could take a screenshot of the actual presentation, you might want to see it inside of the frame, which might be nice. Not that page. Here we go. This one here. If we do this and present, take a screenshot of this page. It might look nicer, still has to be on an angle. How much of an angle? I'm not sure of the degrees, I'm not in the higher echelons of UX designers yet to know the degrees. It's a secret recipe formula. Anyway, I'm waffling. That is how to update the thumbnail in Figma files. 105. How to export Images out of Figma: Hi everyone. In this video we're going to look at exporting images from Figma, a general-purpose exporting images. We'll look at some more specific use cases for developers and colleagues and stuff in the upcoming videos but let's do this general-purpose one. You can export anything. Let's have a look at this logo, I need the logo exported. What you need to do is other programs you'd select it and go file, export, something like that. This one here you apply export settings to it, so I want to say you selected, I'm going to apply some settings to it and then you can go through and pick. This is the main one, what format it is, PNG, JPG, SVG, or PDF. If you're new to it, an SVG is Scalable Vector Graphics great for things like logos and icons because they are like resolution independent, that's the wrong key, scale, you can see they get bigger and bigger without pixelating. In the past, you probably would have used the PNG because that allows can see some transparency around the background as opposed to JPGs. Now this preview updates, I think you have to like click, "Off" it, click "On" again. Let's go off, on. Look at the preview, it's still there, just showing me the background anyway, this will export with a solid background, it won't be clear. SVG is when you can do them, icons great, logos great anything that's that victory, simple straight lines, that's what SVG is, a Scalable Vector Graphic and PNGs are helpful for, I'll show you, let's do JPG because that's the opposite of a PNG as a JPG and SVG. JPGs are really good if there is no need for transparency and you've got a lot of color information, something like this. SVG won't know what to do with it, because it's not a vector graphic like these linear shapes of text and icons, so JPGs first base for this. JPGs have large colors, they can be compressed nice and small, and look great. Let's say export, and I'd say you are a JPG. What you'll notice is the name here, if I want to export this, I just click the button and it tells me, you go export this thing. I'm putting my images here on just an empty folder on my desktop, you'll notice that it comes the layer name over here is what Figma will use for the name of your file. I can save it there, let's have a little look and there's my JPG. Now, how big is it going to be? Figma is not really made for compressing this down, you might have to use something else, something like tiny JPG is a good solution or using something like Photoshop to get the file size down. There can be a little bit chunky coming out of Figma. You also notice that's the filename, so if you want to be clever you can go in here and let's call this one IMG woman 1 and now when I go to export, it'll use that naming convention. JPGs good for images with no transparency, SVG is good for any vector linear stuff. When we use a PNG is a great for half and half. This one here has a circle and it has transparency, so can't use a JPG. This image here can be an SVG or JPG, so it has to be that PNG, because it will allow transparency around the outside. Other things we haven't talked about is the sizing guide here. This would depend on, let's say a web design, often your supply your web developer with a 1X and a 2X depending on how they are making the site. How they are dealing with responsive images. This is a question you'd like to talk to with a developer. Do you want it just cut the middle and be 1.5 and not have any changing of images? It just means there's some monitors that image will look great at this smaller 1X size, by 1X, it is going to be a 174 by 174. If I export this one, it is going to be double that size which just means on fancy new laptops or computers, which is most of them now. It will look better and then 1X will load fast and then be small, but one look as great. So often you can add more than once. I'm going to export this PNG in both 1 and 2X. Suffix, that's a common practice for heading, so it's going to be still called ellipse 2, but one of them's going to have no suffix the end, you might do this to be clear with yourself, and a suffix just means it's going to go on the end. Let's stick it in there. Let's have a little look. I'm going to switch to this view, so we've got 1X and 2X, can you see the file size differences? Still got transparency, you see the quality difference. It'd be a little hard on this video, but I'm sure you can see. What the big pixels? This is getting a little bit old now most websites will probably try and do this two weeks, not always. Other things that are useful when you are exporting, let's say that I want to export this. I'm going to double click on "Export," just this circle again so I'm going to go high up, I need that, what is it? PNG transparency. There's an option in here that says, these little dotted lines, you can say actually ignore overlapping layers, but if I turn it off, which is icon down here. There you go. It's grabbed the back part of that image, it's also grabbed the green box and all this other stuff. It depends, basically just using the edges of the ellipse and grabbing everything else that overlaps, so you may or may not need it, I show everybody I never need it, there'll be some time you need it. We talked about 1X and 2X, but let's say you do want, say you've got an icon, I'm just going to grab one edit here. What do we got? I got this, don't even remember when I made that. I got it from somewhere, let's say I need to export this. I'm going to export but instead of being an SVG, I've been asked to be supplied at a specific size, so I'm going to be a PNG, so it still has transparency, it should really be an SVG. But let's just say in here, instead of 1X, we can type it in, we can say I want it to be a width of 500. You put a W at the end or an H for the height, you want to be 500 pixels high or 500 pixels wide and that would just force it. It assumes pixels, so let's do that and let's do another one and that is going to be, say 100 pixels, maybe for a thumbnail version of it. Let's export both PNGs. I've left a suffix on there as at times two, which is not good, but there it is there, that's my white, you can really see it. There's the big version, you can see the wheels, they had transparency, other one is obviously 1000 pixels or 500 pixels and one is 100. If you have applied export to a few different things and you go through and make a change, say you change one of your colors styles and it updates lot of things you like, do I have to go and individually go and apply all these again? No, you can export them as one big go by going up to your little Figma icon, go to file, and if you hit this one just says export. It's going to go through and say, hey look, here's all the things that you've edit export settings too and you can say, I need that, that, don't need that, but I need these three and just click, "Export" and it will do it in one big go and put them in there, replace existing files, there we go, simple. My friends that is exporting images out of Figma, hope you found it useful. I'll see you in the next video. 106. How to share you document with clients & stakeholders: Hi everyone. In this video, I'm going to show you how to export your document to maybe your clients or stakeholders maybe your product manager or line manager or your studio manager, whoever that person is. We've talked about sharing a link. We'll do that towards the end because we've already done that. I'll show you some unique things that you can do. One of them is exporting your frames. I'm on my page, hit that one export. I'm going to go up to my Figma icon and the top-left file, this one has here's frames to export or exports to frames. Frames to PDF. Click on that. It's going to be good, it's going to be bad. The bad bit is that, that is considered a frame. There's lots of things, even though that is auto-layout, that's considered a frame. We're going to have to tidy up. We've been avoiding tidy up for a long time, but hey, we're going to have to soon. There's my PDF. I'm going to hit save. Where is it? It is there, it is a very messy PDF. That went through all stuff. Then hey, this is the things I want so I could delete the pages I don't want, depends on your needs I guess. What I need to do is go, you my friend needs to be that my mobile nerve, I'll just delete because I needed is part of this document that I think they don't need even there. This one, I don't use that one. These two here, I didn't want anymore. These guys here, what I'm going to do is you are going to become clipped content. Normally doesn't matter. This particular one, for export PDF's, we want to clip the content. Anything else? These guys will live in there because I don't want to delete them. This is junk familiar on how the junk that way an export button. We're going to have to do it at some stage. Now when we export, it'll just be a bit tidier and we can delete the pages. I want to keep that around. So look. So a whole lot tidier. I've got these two that I'd have to delete. I'd open up in Acrobat and remove them. What have you've gotten your machine for working with PDFs. You'll notice now this is all tightly integrated. I've got all my pages. You might think of another reason you might use this, KPDF. You might be using Figma to do presentations. It's really common to use the frame tool. Over here there's presentations for different slides. That's a generic HD format for a slide. You can totally use your skills here just to use Figma for presentation because you've got good at edge. You like it. It's fast. It's easy to update, easy to share. People are using Figma for all things. Another useful, I wouldn't say it's useful. It's something that I plan to show you. I'm going to show you it's the Slice tool. The frame tool is what we've used loads. Slice tool, which uses the really good shortcut of s, which should be scale, is the slice tool that nobody uses. I don't think Figma has any documentation on it. It might disappear. What does it do? I can see when you'd use it. I just never have. You want these two frames to go out and you just draw a box around them. It's called Slice 1. You can give it a name. This might be some task flow for the login task flow. You can select it over here like we do lots of the things. Can you see it just appeared to the top of my layers list? I can add exports settings like I've done earlier and say, I want to export this as a JPEG or I don't think it supports PDF, let's check it. It's a JPEG. I don't want a suffix on it. I'm just going to go to zero and just going to delete it. This is just going to be a 1x size or I can give it a specific width. Let's say it has to fit for something. It's going to a website into some gallery and it needs definitely be 480 for some reason. It needs to be 480W. Let's export it. Exporting PDF is currently unsupported. It's going to minus it. There we go. We're going to export just that little slide. Look what it did. Test for a login. It might be just a way. A 180 pixels is pretty blurry. That was my fault. It should be like a 1480. That's what the Slice tool does. Now, those are ways of getting it out. It's a generic way of getting out. There's going to be times we need that. If you are sharing with your colleague or client or I should not call the client, somebody that's not a UX designer. Often it's better just to share the link and say, I don't want you to be editable. I want you to be viewing. Because I don't want you to move things around, give them the email address, or you can just copy the link you don't have to email them to just write an email and copy this in. You can link to a specific [inaudible] slice. Let's say you want to start it at this animation. You can say, you share and link to the selected frame. It's automatically selected it because I clicked and selected a first frame. You can do those things. Copy that link. I'm going to just paste it in a text document here. Ready for my emails later on. Another link you might send to them is the actual prototype rather than the actual working doc, you might want to share than the prototype. Let's go to present. I'm using this flow here and I'm going to say a sheer prototype from this window and I copy it. It'll select the prototype to start with. It's going to be very similar to the other one. You can, from this link, get to the prototype. I'll show you that but this one will go straight there. Often, even though you can get to prototyping from this one here, lots of double-clicking. I will send them two separate links so that makes it easy for people. So let's open this one up. I'm going to open up a browser. Let's have a look. We did this way, ago. So just the basics to cover. They can ignore this and they really want them to sign up but they don't have to. If they want to comment, they can login with a free email address but they can view it without doing anything. They can prototype it without looking at anything. There's that pretty low barrier to viewing your work if you're sending it to them. Who remembers this, it was a while ago? There is how to share your document with clients and stakeholders. Not really other UX designers, definitely not developers. It's a great way for sharing designs, images and being able to do some commenting that comes back and forth from Figma. That is going to be it for this video. 107. Talking to your developer early in the figma design process: Hi everyone. I thought I jumped outside of the screen. We'll do this live. Working with your developer, there's no official way of working with a developer. Some official hand-off process, basically what ends up happening is it will depend on the developer and your relationship with them, the goal and where it is all amazing is where you have got the developer in earlier in the process. Surprising anybody with a finished design is no fun. The developer will feel resentment, probably too strong a word, but they've had no input. Okay, this designer has given me this thing to build and I'm going to go build it because they said I had to, what you want is them to be part of the wire-frames, to give you advice. Part of the first few frames that you do to give you advice so that there's not just buy-in, but they feel like they're part of the process. Especially when you're new getting feedback earlier on just means you're not going to design yourself into a disaster. The language can be really simple. It doesn't have to be official meetings. It can be like, "Hey, Sandy, would you mind, can I quickly show you my wire-frames, this is where I'm thinking of going with the project. Just want your feedback. Would you mind giving me five minutes?" Or, "Hey, here's 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 that I was going to do that but I think we'll push that to phase 2 because it seems like hard work what do you think and they're like no we've got that other thing it's very similar. That framework is already built for this other thing. We'll just put that in there and I'll change it and you're like, hey, I'm not an engineer or developer, so there's 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 like a core piece of the thing that I want. It might be just like a value ad "Oh, this would be awesome." 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? When it's early you like, "Yep, we'll do that in phase 2." Phase 2 is a good way to say we'll do this later, but probably never to shuffle along so we can get this project done. That all happens in that first dialogue. 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. Work in the open, ask them to comment, get them involved and find out why and how they like to work. What kinds of things they want to see at the hand-off so that you're not going to be "I hope they like it" and sending an e-mail off with all your links and images and they get want some. They're going to want to see mock-ups, prototypes, and a bunch of images probably. They'll use your mock-ups to work out spacing and padding in those sorts of things and 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 rebuilding everything mostly in code, except for things like images. There are some consistencies between the hand-off. 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 wait to like magic engineering department go and do it. 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 who it is, talk to them. Make the developer your friend, if you are the developer, makes things easier. But all 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 with Figma. 108. Sharing Figma with developers & engineers handoff: Hi everyone. In this video we're going to look at what I'm calling a vanilla version of handoff to your engineer or your developer. Okay, so just a nice simple, just the basics there is your mock up down the bottom here, there is just a little bit of information about what we're doing, what the client is, what flow we're demonstrating down here. Maybe some links. Okay, the prototype link. Okay, so we've added that link earlier on just so that they can easily go to the prototype if they're not sure how to get there. It is really for somebody you're going to be working with, some developer who's going to get real onboard with Figma and be part of this whole online collaboration thing. And then there's going to be people who just want to be told what to do, given good documentation and left to building it. Again, this will come down to your developers, just work with them. It might be a bit of a process to get them onboard with Figma. Okay, there's a shared document that we might be using. Some paper, fig jam, mirror board thing that you might be using. Okay. Just all the stuff there and easily find. And I just dumped all my styles on the page. All the colors, you know, it depends on how much you want to impress them. Like this is not impressive at all, but I put the colors out there. Okay. Components, I kind of stripped out and I haven't labeled them all. I could. It really, there's no right or wrong. Okay. Just get a sense for what's required for this one. You might go way overboard for your first one. Okay, get it looking pretty. I'll show you some good examples. Better than my examples. Yeah. Just kind of laid out the basics for this page now, how do I share it with them? You do this share option. Oh hi everyone. Little button here. I'm going to, there's a little update to this video. Thing may have changed things a little bit. What we've done in the past is when we've shared stuff for a developer, we shared it to them and we got them to then go to this inspect tab here. They've moved that inspect tab into this little toggle switch. Okay, it's called dev mode now. Instead of inspect, still kind of inspect, there it is there, okay. But they're calling it dev mode, okay? So when you are sharing I'm in design mode, it's blue de mode. Green. Okay, if I go to share, and I share this link to the developer, what's going to endup happening is they're going to go into your design version which is a little bit more complicated and a little bit harder to use for developers. Okay, so you want to get them straight into dev mode. So what you do as a designer, as you say, you got that on, then go to share. And if you share a link from this mode, okay, dev mode, okay, you'll get a link that comes to this green version. I'll explain where the green version is now, but it's a better way to share. That's why I've bit it in right at that point. Don't share that original version. This is the new better way. Now I might as well continue on with a chunk of the video explaining what is in this kind of inspect mode. Now, really called Dev mode, is that this allows a developer to go through and be a bit self sufficient, okay? So they can go through and say, actually I can click on this and it's just easier for them to work on. Okay, If you've got groups inside of, groups inside of frames, it can get a bit tricky for developers to be click, click, click, click to try and find the bits they need. Whereas now in Dev mode it's a little bit more one clicky, which is if I click on this top navigation, okay? It's giving me a lot of stuff about the navigation, height and width, okay? I'm using CSS. They might be using one of the app development frameworks, okay? I'm going to use CSS, okay? But it gives them the code that they may or may not use, depending on what they need, okay? The colors used in there, which is awesome. Okay? Also all the assets in this. I'm actually, I'm doing the whole frame. Let's click on just the top navigation Ks. It's given me that spacing, but it's given me the icons that are in it, which is really easy. So in previous videos we showed you how to export SG's for the developer. If you've got a developer that is working inside of Figma, they can grab the stuff themselves. That's the way we work at bring your laptop. Okay, our developer, Malcolm will come into the Figma files and pull the stuff he needs out of here. Okay, so that's handy. Okay, You can decide G PNG and then just hit the little download button, a lot more self sufficient. The other thing to note is that at the moment, this is what's called an open better. So it's a function that is used. Everybody in figure can use it. Free accounts, paid accounts, enterprise. And I know the plan is in the future. I think it is, is to make this a pro only account, okay? So a paydown only account, So yours might be different if you're in the free account in the future and you're watching this somehow, you got a hold of this video, okay, it's not updated. And that yours might look slightly different. You might have a cutdown version. Your Dev mode might only be enabled in Pro mode, okay? And you might get a limited amount of inspect features, but at the moment it's open to everybody. So here we go. Dev mode, it's really cool. Just make sure when you are sharing your link, you're in this toggle switch to make sure you get the right link to the developer. Al right, that's it, last part of the video and then we'll move on. Well, that's the update version gone. Carry on with the video. Enjoy. Actually, before you go, one last thing. Super important, okay? You need to know how to put emojis in your page names because it's going to impress everyone, okay? So on a Mac you double click in here, have the cursor flashing where you want your emoji and you go command control space bar, okay? And then you can start deciding what kind of things you want in there. Very important, find appropriate stuff for the different page names. Makes it easier to find them. Kind of, it's just fun using emojis on a PC. I don't know how it's a little bit weird. I Google it and it's not super clear. You just need to Google the words. Add emoji to text layers. It's more of a generic Windows thing. Okay, Same Olmcutus, but Mac's got a shortcut for it. But both can be done. You can add these emojis down here as well. They can be in any text box. Just make sure your curse is flashing two of them. All right, that is going to be it. Very important, Mochis. Al right, onto the next video. 109. What are the next level handoffs aka design systems: Hi everyone. In this video, we are going to just take a quick look at the other end of the spectrum. If this was our Vanilla design guide or style guide, this other end is a full-on design system. Let's quickly talk about those. What is a design system? It gets used a little bit loosely. I consider this a design system where you are not just describing what you do, it's why you do it. This one here is Atlassian, it's amazing how UX is such an open community and industry. If you've come from more traditional design or anything else, the public doesn't get to see your corporate manual and all your specifications, but in UX, well it does if you think of a company that you admire, that's in that digital Silicon Valley life, you will probably fine. You can Google their design system. I just grabbed a few. This is Google's one, Atlassian, Apple's one, Shopify, often they'll give them a name, Polaris. I think Adobe's is Spectrum, Mailchimp, and what it does is it's amazing. It's several websites and it will introduce you if you are new to UX, which you might be, some of the things, they'll talk about color, let's have a look. There is color in here and fonts, but reading this earlier stuff, their mission, their vision, where they've come from, their history, where they want to go, will help you understand why it's yellow and why they've got a male monkey. But this would be considered the complete other ends of being a design system. You might be working at a company that is, you might be working from one. That might be your first job if you're new to UX, you might end up creating one. Obviously not a small job, and it's obviously built out of a huge team, but it's amazing if you're new just to go through. I learned so much when I was getting into UX from this material design. A) they've got articles now about their design and what they're doing, but just creeping around and having a look at what color, their color system, why they're doing it, getting the language right as well, talking about legibility and hierarchical and all those words that you need to add to your vocabulary as a UX designer. I guess I just want to leave you with this course was that's it, you made a design system. Now there's a lot more to it, and to be honest, my types of work and the types of clients and the things I do, I end up at this stage or a little bit further but not much. Even if you do end up here, it's really important to go and explore other design systems, join meet-up groups with other UX designers to make sure that even if you are in this world, that you understand the fuller picture of UX design and design systems. 110. Class Project 21 - Finish your design: Hi everyone. It's the last project, Project 21. I know. There was a few of them, but I hope you found them useful in the fact of cementing some of the knowledge that you learned in the videos, actually making your own thing which is exciting. What I want you to do is just tidy it up. Everyone can take this to their own level. You can just quickly knock up a desktop version that's perfect and send me a screenshot of both the finished-ish mobile and the finished-ish desktop version. But if you want to take it a little bit further, what I want you to do is being quite systematic. So far do this. I want you to go and look at your brief, look at your persona, and say, what pages do I not need here? What pages I'm missing from my persona? I feel this environmentally. That stuff is something I haven't really addressed. I've done some basic stuff. We use recycled plastics, but I feel that person is going to need more depth. I'm probably going to need an exploded view of when this is clicked, read more to get into how materials are sourced, how I approach to our supply chain and probably even things like our values as a company, where we stand, where we're going, something like that is probably missing from this to address my persona. Those might be different. It might need ingredients list or supporting may be products, or may be it needs videos or some testimonials, reviews, that type of thing. Just have a little think about what you might do. You don't have to go too far. But although exciting as a checkout is, it's probably not. It's part of the flow and it's part of my task definitely, but it's not something that I feel like. These other things I could do for this particular persona to really engage with here. Think of one or two extra pages, that would be awesome. But again, optional. Not everyone is going to have the time and capacity to do it, but the people that do that stuff that will make this particular product more meaningful and a bit of portfolio paste. If you are going to turn it into something for your portfolio, again, totally optional, you might look to create something for a portfolio. You might have a portfolio such as get it in there. I'd love to see it in there and mocked up. When I say mocked up, just your wireframes, nice screenshots laid out, show your brief, your persona. The wireframes can have your finished designs. When you are going out to portfolio, you want to be including not just your final designs, but here's the brief, here's my assumptions from that brief, and here is my wireframes that I use to test my assumptions. Here's some learnings that I got from both testing the wireframes and may be a final version. If you haven't done any testing, you might look to test even your final design, it could be your significant other, your kids, your friends. You could find somebody on one of our Facebook groups to help do some testing. List out what you thought was going to happen, what the results were, any amends you did, and any final conclusions. When you are describing this, it's not a real project. I know case study is a nice way of putting that. Don't say this wasn't a real project. But a case study is a nice way of explaining that it was an instructor led exercise or at least that wasn't a real client case study. Good way of saying that. Now there isn't any perfect. This is what it should look like. Go and have a little look. It doesn't take long to find a design that you like in terms of a layout of a UX project. Do a Google search for UX portfolio examples. There's many on Dribble and Google and there's lots out there. Find something that you feel fits with your project and your style. You might already have one and just lay that up. I'd love to see it as well. It might just be the screenshots of your mobile and desktop frames. But for others who are taking it a little bit further, I'd love to see it as a portfolio piece. If you've got questions and you're new to it, post the portfolio piece and say, "Hey, this is what I'm thinking of adding to my portfolio. What's missing? What can I update?" It's great to get feedback and get past that little impostor syndrome that you will inevitably have getting started in a new field. Facebook groups are amazing for it, so is LinkedIn group. But even if you don't want critical feedback, just send it up. I'd love to see what you actually made, what actual product you got. Make sure you share the brief that you used and I want to see what you ended up doing. That is it for our projects. I will see you in the next video. I'm going to see you live, get out from behind the screen. See you in a sec. 111. What next : Alright, wow, you made it to the end. It is a long course. Congratulations, you're here. I'm here. It's pretty amazing. Long course to make, long course to do. We should both be very proud of ourselves. I want to cover a few little things in this video just to kind of just to kind of wrap up, where do you go from him? It is new to me. I've come back to update this video because there's a very important new update in terms of what you should potentially do next. And that is my Figma advanced course. So you've just finished Figma essentials. Figma advanced picks you up from where you are now to carry you through to a more advanced level. So it's going to build on where we are now and is the next perfect step to go further and all those things that you want to push a bit further. Yeah. So is it advanced, but it's more for taking you to advance. Don't think it's only for advanced people, it's to make you in advance person. But it starts kinda where we are now. So if you're comfortable here, move on to Figma advances the next step. And other bits of software, if you're not really for Figma or advanced now is maybe something like this will be two ways to go. There is learning a bit of HTML and CSS. Okay, I've got something called web essentials. So check that out if you want to do a little bit of introduction to coding, if you haven't done that now, it really helps you be able to connect with developers and talk their language. And the other one might be if you want to go down the web root, but you don't want to do the code way. You want to go no code. And I've recently created a course called Webflow essentials. So check that one out. It's no code quite design-related, but still building websites. And other than that, they might be designed stuff you want to cover that I do. There's lots of design courses that I've got. There is a Photoshop, Illustrator, InDesign, and after fixed Premiere Pro Light room, there's an essentials and advanced course for all of those as well. So if there's anything you want to get started in, update yourself and go further. And those are the courses to go check out. Those are the little updates other than I've got a new chair. What can happen in a year? A new chair in a 3D printer. You can see it back there. New glasses as well. That's the update. Then lots of things, Apple Glasses. I will return you back to the previous excited finished the course, Dan, to explain everything else, I'd like to thank the editors, Jason and Taylor, for all their work. Producing this video series is a lot of work for them. Thank you guys. And also to Stephen Butler and his merry band of teaching assistants who are helping you in the comments. You probably already know who Stephen Butler and the TAs are. So thank you to you guys as well. At this stage as well, I'd like to ask you if you enjoyed the course, give it a good review. And also probably more importantly is if you can think of a way of sharing this course with others. Anyway, that you can think of k, It helps me grow and allows me to keep doing this. So there is anything you can do, share with your colleagues, your friends, people, you might know your circle, that would be super helpful as well. You can follow me on social media as you've probably already have after all the class files, there'll be here. Yeah. That's right side. These are my social medias. And the other thing you might do is YouTube. I've got a YouTube channel and there's a lot of stuff that doesn't get turned into course, just smaller format stuff that's on my YouTube channel. Go subscribe to that, check that out. The next thing I want to talk about this just briefly about the industry, how evolving it is, The impostor syndrome and how big that feels. Okay, so the industry is, it's not new, but it's new in the way it's been applied to a lot of these kind of like even to small businesses. Like nobody was doing user experience and small to medium-sized businesses, and even the large businesses, it was a different flavor. So if you find things are changing all the time and you feel like, oh, I don't know anything because everything keeps moving around. It is things that, you know, five years ago was like, this is the way we work and everyone else's fault for not doing it this way is like this year. Like the thing we point to it and laugh and you like, remember when we used to do it that way. I find that happens a lot in user experience design. Now, in terms of imposter syndrome, there's like, Are you a UX designer yet? No, I'm not. I haven't passed the qualification. Now, I give you permission if you are new to this industry to call yourself a UX designer from today on, UX designer, a junior UX designer, a bad UX designer, very inexperienced UX designer. That is totally fine. There's no official qualification. It's like becoming a Dr. there's very little formal education around UX design. There's more appearing. Most of us though, are self-taught. And I guess whether you're getting started at 16 or getting started at 60 or 80. Okay. It doesn't matter like there's no like line to cross. It's all about getting started, deciding for yourself that yes, this is an industry I love. I want to get amongst it. I'm only at the beginning. And there's so much to learn and I can't wait. So I guess that is the mentality that how might help you kind of get past that and post imposter syndrome. But impostor syndrome is huge. It's massive, like loads of people that you speak to have. The fear doesn't matter whether you're eight or 80 or 42. Okay. I still feel like there is somebody who is going to come and ask for my papers and dragged me away because I'm not a real UX designer. That awkward pause is for when you said 40 to 42 Dan, you look Billy 32. That's what you meant to say there. Alright, that is gonna be the end of the course. Dead jokes over. I hope you enjoyed the course. I really enjoyed making it. I hope you enjoyed viewing it, and I hope to see you in another course soon. Bye everyone, hide it