Free Figma UX Design UI Essentials Course

hi everyone my name is dan scott and this is a small extract from my larger course called figma essentials loads of value here but if you do want to go further with figma check out my figma essentials course there'll be a link in the description all right let's get going [Music] [Applause] [Music] hi 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 wireframes from there we learn how to implement colors and images properly in your high fidelity mockups 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 component sets constraints and multi-dimensional variants they're all very easy once you get to know them we'll also make our lives easier by using free ui kits and plugins for figma to speed up our workflow we'll build a simple style guide ready for colleague or client handoff 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 handoff 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 alright it is time to upgrade yourself and go from figma xero to figma hero so sign up and i'll see you in class now the shirt this shirt made a whole lot of sense it makes a whole lot of sense later on when you know figma a little bit more but at the moment i've realized it's come across a little bit probably just creepy but it's made now and we're gonna have to live with it so sign up to the course i'll see you in there hello you made it in congratulations uh welcome to the course uh first things first is you need to download the exercise files there is uh there'll be a link on this page here download those uh in those exercise files will be the files we'll use for the course but also there will be a shortcut sheet okay we won't go too deep into mad shortcuts here but um 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 and also you need a version of figma okay so figma go to figma.com 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 okay and or maybe english isn't your first language and you find my accent a little tough um there will be on all the videos there's 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 it might make it easier for you um and that is it ah free version paid version and we are going to use the free version for most of the course mainly because it's amazing like 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 page 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 re-jig things to make it simpler and easier and include more advanced features it is really painful for me as an instructor because basically i 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 and if it's fundamental stuff i'll re-record the videos if it's just small stuff just take a look often could be just a name change it's in the same place does the same job but maybe they've called it something else or clarified 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 yay for lots of updates boo for lots of updates um alright let's get on to the next video all right let's talk about what figma is for and what it's not for and it is amazing at rapid prototyping of things like websites and apps okay it does do other things which will cover a little bit and but it is the main tool of a ux or ui designer okay and their role in the creation of either wireframes which we'll do in this course okay of really quick kind of look and feel for an app or a website through to kind of like really like it looks exactly like a website high fidelity mock-ups of this website with interactivity as well okay and this kind of leads me to where 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 the best bit about figma and ux in general is that we'll create something and then we'll actually be able to get it in the hands of the client uh the intended audience okay our customers and they can it's not going to be complete okay but they'll be able to use it enough that we can make some observations and actually test some theories about what you know they think and that you know what the users want and if things need to be changes we can change them really quickly and figma and then get them back to them like why they're sitting there okay 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 clients happy with it now this is where figma doesn't do anything else okay it is just the prototype and it's not going to code the website for you or the app okay it hands over little pieces to the developer to use okay css and svgs and graphics and stuff and but not a lot that the developer can use they'll end up kind of starting from scratch using your mock-ups okay and they'll lose a lot of things like spacing and they'll make it look like your app okay but um that's what figma doesn't do okay it doesn't do the coding site so what you do is you get it kind of signed off with the client and then you either work with a developer if you're a developer yourself you start coding it and 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 okay or you might be using something like wordpress or webflow okay i've got courses on the horizon for both of those too or wix or something more drag and drop okay you then have to build it based on your figma mock-up 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 okay and what it's not is you're not gonna 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 don't cut it uh 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 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 it doesn't do a very good print stuff you can put a normal page into it you can say a4 or us letter okay so while people are using it as an alternative for something like maybe illustrator and a bit of photoshop photoshop's still required but um 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 all right let's talk about what ui versus ux's if you already know you're allowed to skip this video it's okay and 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 and so ui design the simple way this is all very simple okay the ui user interface versus ux the user experience okay the ui is the way something looks and the ux is how it works how somebody uses it okay so often the way it looks how it's used and 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 a newish and i did a lot of ui design i designed a website that was based a lot on my intuition like oh buttons should be this big and it should be over here and traditionally things go over here in the nav okay so there was a lot of that and i'd give it to the client they'd like it great okay but there was a big element missing the ux okay there was very little testing okay i had a i had an idea of what would work okay 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 okay that layout and getting it in the hands of clients and testing it okay 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 you know and is the client when they click this button did they go where they expected or were they surprised okay is the language like let's say ui designer designs the button okay and the rounded corners and the beautiful gradient okay or the and the text in the middle okay 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 okay 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 uh 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 um you know some ex some insights as we go along about what i would do at different testing phases okay but it is broader than what can be covered in this course okay but we'll do ui with a little bit of ux okay but figma basically is we're learning software that's why you signed up probably okay 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 okay i'm sure it went through some testing imagine it went through lots of testing not right at the end though because there's just it's just simple things like um let's say that i'm typing in my password type type hit enter enter enter nope you've 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 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 okay another thing you go into like updating uh 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 okay so i went to find how to edit it i'm like i have to delete it because i couldn't find anywhere you know 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 and i've been doing this a few times like i'm going to email them um they're like i'm just going to click the name of the person to edit it i'm like huh alright seems simple go and have a look and you do if you click the name of the person it does go into edit it but it's missing a couple of things any sort of indication that that's possible underline arrow big sign tool tip and and 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'd you read again this feels very ominous um my little colored like i just bought the colored light you're gonna see it all the way through this course until i get sick of it um 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 that thing that i hate as well is in this thing so you are ux that's my explanation for the moment all right next video hi everyone in this video we're going to look at what we're making okay we are gonna start making some wireframes initially okay then we will make some high fidelity versions okay that look a little prettier that one's actually pretty messy let's look at this one here okay see the screen's down the bottom okay 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 versions so yeah it's uh 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've 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 um 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 a persona is so this is just a bare bones kind of persona they can run to one whole page two whole pages and this is going to be enough for this particular course what is it for so i'll read it out you can read but um 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 uh 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 okay not specifically to sarah herself sarah is representative of a a type of person okay a group of people that are going to be using this website and it helps me distance myself otherwise i end up building things that i would like okay based on my own history in 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 okay 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 and 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 uh color fonts uh language types of imagery organization of information like what features should be shown earlier based on you know 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 okay a ux researcher okay we'll spend a lot more time and potentially produce you know 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 and if you are new my advice to you is to spend some time okay now or after this course researching personas what they're for okay so 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 taskflow if you haven't heard of it before okay teslo here we've been given uh instead of designing all of the mobile website we've been asked to design a certain kind of important critical feature okay so we have to design this home page it shows the products uh 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 okay they can be less complicated it might be like uh you know task flows could include things like how you know how does a person cancel this product what is the process there okay 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 taskflow versus user flows comes up quite a bit okay and there's this great article here by erica hirano i'll put a link on the screen here but um 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 floats have a look they've got the pancake task flow so i'm going to look at this finding a recipe version okay very simple kind of like what we're doing in our course home page social 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 okay is a lot more complex let's have a look at this one so this one here can you see um 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 they'll taslow up above okay 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 no they're not going to use the search bar so then we're going to have to build out and mock up okay the browsing the categories and there's a breakfast category and then there's a breakfast page okay and they're finding pancakes within that breakfast page and then they click on the recipe that they want okay and they've ended up back at the same place but it's a different way of getting there okay there is you can see the key up here there's decision nodes okay the different shapes okay for different actions okay 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 and a bigger job whereas a task flow can be quite a simple boundaried option now you will have task flows within this user flow can you still see our home page search results banana is still there okay 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 where people get stuck in a loop or don't know where to go anymore okay so yeah that's the brief uh user flow versus taskflow 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 you know the one mobile size screen okay 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 somebody asked 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 but um often a brief can be a lot bigger than this okay like designing a whole website and sometimes you can get a lot of details around it okay 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 little at this stage okay i would like to see i'd like to talk to them or have my product manager talk to them or you know whoever is in charge talk to them about you know what they're about you know um 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 and sometimes you won't get that information okay and sometimes you will if you get given something from a bigger company they're probably going to have values of mission statement okay 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 you know 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 uh not just a persona but like why are we doing this where is the direction we're going okay uh you know who am i helping why are we helping and to really influence my design work but anyway this is a good starting point for this course um let's let's move on 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 uh 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 okay that is great for your own portfolio okay so and the first one is to create your own brief so we saw in the last video that i made uh 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 okay so randomprojectgenerator.com okay i want you to enter your last name uh or your pet's name okay or a friend's last name somebody's name okay okay for the company and enter your location in rio it was where i was born you can put in ireland as a country if you're in a big country put in your state or town whatever it is okay so and then click generate my project okay make sure on the ux ui um tab there and click generate my project and you should get something unique for you okay so i've got shadow surfboards oh that's kind of cool okay and 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 okay some of the more tricky objects okay and tricky uh personas is one of those things that will really help build you as a designer okay don't hit it um and yeah have a little read through so um you're gonna get something unique and it's gonna 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 okay 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 in headphones you're going to bring in surfboards or whatever your product is okay you're still gonna have you know an image and a circle so they're gonna have the same structure but at least at the end you're gonna have something kind of unique for your own portfolio plus it's gonna get you thinking about your own persona and how you might kind of design for them get the idea so follow along in this course but using your own company name okay which i'll get you to make a little bit later on in 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 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 and tesla 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 interesting for figma figma really wants everything to be in the cloud online okay so go back to your kind of home page or if you're on a pc go to the little figma icon and 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 okay 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 okay and in your exercise files there's one called taskflow.fig okay load that in there and we'll use that later on as well you can open it have a look okay basically it is just our test flow okay 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 hi everyone in this video we're going to talk about the difference between wireframes and high fidelity okay well it's pretty easy you can see wireframes are pretty budget and high fidelity mock-ups look really nice and they'll call them hi-fi lo-fi okay generally though they'll call them wireframes and hi-fi is high fidelity okay this one's gonna be really quick and easy to make and test okay and do not try and skip if you're new to ux skipping the wireframe um section of your kind of design process at your apparel um you can probably knock up a wireframe in a few minutes uh 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 uh 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 okay 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 wi-frame uh another wireframe that i downloaded a lot prettier buttons got color in them okay pick one color only gray and a color if you want or stick to gray you want to take away the design elements here are 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 um you know wireframes further than what we do in this course a really simple one that's kind of removed all the text okay 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 uh so they're all live lo-fi wireframes okay hi-fi it's in the same document okay this one looks a lot prettier though okay 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 figment and do something okay so let's make our first uh 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 and so what i've normally done in the past is i go to we're going to create a drafts okay and there's a little plus it's kind of next to it okay so either way we're making a new design file okay and there we go all right 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 so we've got our design file okay now we need to introduce frames frames of these guys here this little icon here third one in click on it okay and you can draw any size frame think of a frame as a page okay so if we're drawing an app we're going to draw something kind of like go back to this tool here draw out something that looks like an app you can have multiple frames okay all sorts of different sizes desktop run tablet one so frames have many uses okay but at this early stage of the course think of them as a page or an artboard if you're from adobe land and what we need to do is delete them because those are random sizes click anywhere in the inside of them hit delete click them delete them all right so go to your frame tool and actually let's be a little bit more specific with our sizes okay over here you'll have some pre-made sizes okay you are going to be in the future so you might be at iphone 52 okay 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 okay 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 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 um you know and you will get something or most common desktop size okay 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 school paper the wood stuff okay there's all sorts of things in here so yours will be different now i'm gonna start with phone and i'm gonna start with iphone 8 even though it's really old i don't know why it's still in here hey it is but it's a good generic size 375 pixels i like you can adjust it afterwards here's your frame okay and you can say 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 okay 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 okay double click it either one and let's call this one remember our task flow okay we've got we're going to have our marketing page we'll call it the home page homepage slash 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 spacebar so hold down space bar it's pretty common lots of design programs right and click hold and drag okay and i'm going to name it in this one 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 control c on a pc then v so command v we've got another one control v on a pc okay up to you i say no shortcuts and then i start with lots of shortcuts uh let's put in our four pages so our tassler said we did that product details what else was there was a checkout okay and copy paste spacebar click and drag we are going to do our confirmation okay so in the same document there's no reason why you can't then go actually now i want my desktop version okay 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 okay and over here landscape portrait space bar across landscape portrait you can remove them okay i'm going to click the name you drag the name spacebar around drag the name around okay 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 okay and if you see this one's ipad pro at the moment okay you can click on this frame and say it actually now you are um a normal kind of standard desktop that's a really good desktop size okay um really common and generic now zooming in and out command on a mac control on a pc and is it the plus and minus keys okay there's a million different ways of doing lots of things here in figure 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 it 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 okay i'm going to zoom out use my spacebar get it right in the middle and then zoom in okay so this is what i want you to get to i want just four boring old frames okay and i want you to name them all and 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 heaven documents and so we're going to be really specific and actually name them if we click off in the background here you can 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 okay 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 okay so you pick your you know the name of your company and put ecom v1 our ecommerce is version one this is the v1 just something abc one two three it doesn't matter as long as you're not like a final person final one 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 versioning 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 okay and what you'll notice is look there he is down there uh econ one if you've got lots of untitled already okay 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 hi everyone we're actually going to start making things in figure 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 you know 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 okay 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 for adding a comment all right so we've got two kinds of text boxes you click once and you can type forever okay that is this one here it is called our 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 okay so grab the type tool click and drag it out okay instead of clicking once click and drag it we get this option here which is the fixed size box okay and this one is just means that when i get to the end it will break okay and we'll use both of these in this course especially for this wireframe 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 uh auto with okay so type tool click once and just type in your brand name okay so mine is scott headphones okay when you finish you can just kind of like click out and there's no man's land okay and you can move it around and stuff and grab the type tool again and let's do a box about this sort of size okay and we're going to type in our marketing meshes 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 and [Music] 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 and they might end up testing you know coming back with spelling mistakes or like uh it might be controversy about the marketing message that's not right let's get it to copywriting okay 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 okay so we can click it here same with this one we can make it a fixed box and the difference now is watch this when i start typing okay 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 okay i'm using my shortcut command z on a mac control z on a pc to get back to undo's aren't as consistent as you would imagine um from other programs undo's can you see the undo didn't put my rectangle back to the big size it's undoing my type okay okay but it's not doing that um 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 and 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 and let's look at font size and 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 line centered you know all that sort of stuff one things i will show you is that let's say things if you hover above them okay that little icon there is the line height okay but you can click and drag them any of the icons so i'm going to undo that undo again there it goes okay 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 okay when i'm working and you'll see me throughout the course okay dragging line height and tracking and letter spacing and that sort of stuff so that's one little trick the other one i do quite a bit is um let's say this is not draggable i wish it was okay 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 okay if you hold shift it goes up in big chunks okay and 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 okay or hold shift go up in big chunks and i'm making the width of this text box bigger undo undo wrecking my boxes okay but for the fonts i use it quite a bit just kind of going up and down i'm looking at my uh 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 okay 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 um and this because this is going to be on a mobile device okay 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 um kind of ratio this height okay it's best to be actually picking font sizes on your phone okay i'll show you a little bit later in the course not too far we can actually preview everything on a device okay so don't be spending too much time on you know deciding who was it 12 should it be 16 14 actually get it onto the device and start looking all right 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 not font a font that has zero character i feel bad because this is roberto sorry roberto you have zero character and i don't want you know let's not go all brush script okay or even if it's a beautiful font and it's exciting okay we want really plain fonts here because when we do do our testing and we want feedback not on like hey i don't like that font or that's not communicating right we don't want to you know 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 you know let's have a look roboto open sans what's another one sauce sans sauce okay you can tell these guys are not the guys you invite to the party okay 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 gonna 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 ariel or calibri or whatever you want to use actually not only to use aerial calibri it's too microsofty um 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 um for our logo as well we're just going to keep it super simple and 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 and we're just going to keep it super simple i'm going to play around with uh fonts now this is where i break all my own rules like hey don't pick a font that has character stay away from you know and then you can't hug yourself you're like man that leading's really big uh if you want letting to go back to zero just delete it and hit enter and it goes back to auto okay and even then you're like oh okay i'm just gonna oh wrong one this one here just take it over 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 and we're going to copy and paste and use this again wow that went weird and when you do copy and paste did you notice that so there's only one of them there now if i copy and paste and figma it goes back over the top so there's two of them right over the top okay 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 double arrow there on um pc it is your option 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 okay we've got a buy now and a learn more okay 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 gonna do for this particular mockup all right 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 there it's pretty amazing how deep it does go if you're a designer who loves a bit of loves beer loves a bit of ligatures and all sorts of amazing things you can see alignment not that exciting decoration underlines strikethroughs nothing okay so there's a lot bullet points are in here you can start doing uppercase lowercase i won't cover them all okay 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 okay 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 ah boring rectangles and buttons i'll see you in the next video hey everyone this video we're going to draw some rectangles and some circles and some rounded corners very exciting let's jump in alright let's first of all put in our kind of product shot we're going to put in a placeholder image for that okay i'm going to use my selection tool just click and drag over a bunch of them okay and then i can drag it down so i've got a bit of space okay 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 so rectangle lines all the kind of basic shapes okay so as for the rectangle tool which makes sense okay 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 okay so this brings us to layering okay so over here if you can't see it you might be on assets go to layers you'll see there's my home page frame okay and inside of that are all these different things okay 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 and say send to the 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 the 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 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 okay 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 okay if you find it and you like it you can do it okay 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 arranged you can see how [Laughter] no i don't want to range object there it is there you can see how much i use this menu not very often okay so you can on a mac you'll see these on 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 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 backwards okay but you might find in this course that dan's going up to a range up the top here and you're like hey i don't have that there it is there look okay so i'm going to go object send it back yeah loads of ways are 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 arranges along the top here kind of you know arrange center arranged 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 plus or control plus on a pc and i'll hold my spacebar key down and click and drag okay 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 okay 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 okay 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 okay i want to move on to rounded corners because when i say do not whatever you do don't design this thing okay it's hard because you're like i want rounded corners you're not the boss of me dan i'm going to make some little design choices okay 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 they're there yeah they're there zoom out there's a level you look there they're not there zoom one more in i can grab them and drag them okay and you're like there you go nice round of corners and 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 uh but so shift zero okay on the top there goes to 100 because that's a 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 at use my arrow keys remember the sweet shortcut up one oh how does it look up another one smashing it up down okay so i'm going to just put in some runner cause five um it's handy because you can get consistency select this other one go five 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 the mac alt key on a pc and actually just click one of them and go look at 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 okay and click it and drag it there we go and before we go let's add a little circle down the bottom here so the circle tool the ellipse is the o okay i'm going to drag it out another thing that i haven't quite covered yet if you want it to be completely um circular or square okay you hold down the shift key while you're dragging so watch this i'm gonna 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 okay or oval back to holding shift i'm gonna get about that and for the moment i'm gonna put it down here i'm gonna grab my type tool okay and click once i'm going to hit my plus and i'm going to pick an appropriate font size now with type okay 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 [Music] [Laughter] absolutely useless never used it i i can see i'm like yeah that does a bar graph i have not mocked up a bar graph before so uh sorry pie chart is what i want okay so you can that's what that thing does [Laughter] anyway uh let's get on to the next video hi everyone just a quick little segue i wanted to check on you see if you're enjoying the course how was it is it okay if you think it's good enough for a like give it a like um and think about subscribing to the channel got lots of other stuff like this so yeah subscribe away i also know that um this is a short part of a longer course okay like this is the first 20-ish videos so if you're enjoying this and you want to go further okay the the full course is about 111 videos about it's exactly that and what you're seeing on screen now okay so these are some of the things that we continue on in the full course so if you want to go further on after this course there will be a link in the description or there should be a card there in the top right now come check out the full course or otherwise continue on with this amazing free stuff all right carry on enjoy the rest of the course it's a bit ending all right i hope you're sitting down this video we're going to look at color you ready city 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 wireframes 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 all right to work with color and select on something we're going to use this big big rectangle here that's the default color for figma all you do is click on it okay so now fill click on it once and you get this little guy if you've never used the color picker before this little dots where our color is you can click them and drag them around okay so at the moment you can only pick red okay to change it this little hue slider here drag it along to the kind of zone that you want it to be i'm gonna pick some sort of greeny thing okay and then move this around okay to get the full saturation no saturation light dark somewhere in there okay other things you should know about in here if you want full white just click drag and drag it like past you know like just keep going and it'll be full white and either of these dark ones down the bottom are going to be the same okay so white black or that one is black doesn't matter and i'm going to pick some sort of like greeny color so you could pick it from the brand okay or just pick like light blue is probably the most common kind of you know wireframe color it's the default and like xd and a few other ones so we end up seeing this kind of like tealy blue thing throughout i'm gonna pick a slightly greener version you pick anything you like other things to know about color is transparency down bottom here you can make things slightly transparent which makes no sense unless i bring this all the way to the front okay so i'm using my square bracket you can see it's kind of covering things with a bit of transparency i'm going to go back to actually i was going to change that there at 100 it doesn't matter whether you do it here you can see it the 100 or you just type it in here and you say i want it to be 50. well same again you can kind of use your up and down arrows to kind of go through it all so i want mine to be 100 perfect okay and if you are a bit more of a color nerd then you might be like me okay hexadecimal numbers that's the kind of like web version of a color you might not like that you might like the rgb versions there you go it's rgba so you can still get transparency at the end red green blue you might be mixing colors from maybe a corporate spec manual or something else um other colorways css you probably if you're a developer you might be working this way okay your rgba colors you can type them in there and hue saturation luminance i don't often use i use this quite a bit hue saturation brightness and 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 so 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 and you'll notice can you see up here there's like a zoomed in version and watch this i can move it around you can see it just zooms in on things so it's you know as it's pretty easy because we can pick this big rectangle but sometimes you're trying to pick a teeny tiny bit of color from like that bit it's going to be that weird light gray okay so eyedropper i'm going to click on this one same with this fella you eyedropper now to get to that eyedropper very often i won't be going into the color and picker to do it so i'm going to undo to get my grades back so i select on it there is the shortcut for i for eyedropper like i not e y e the letter i okay it's a shortcut so selected it 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 okay keep it really just black grays whites and you know a color just to sex it up a tiny bit okay when you start adding color palettes to it you again start entering different parts uh you know to the conversation about oh is this the right color is it right brown color just keep it generic keep it gray then nobody's gonna complain the last thing about colors is and down here can you see document colors you're like oh great those are the colors that i've used already okay so this though gets mad big and not very useful and 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 it's something that's been used okay or there's that green is that the green it's the same green it gives yeah later on we're going to look at this and we're going to 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 kind of tidy it all up and get a bit more consistent but document colors will show everything they've been used in this document so it gets a bit mad but that's what they are all right that's the basics of colors let's jump into the next video actually we're going nowhere it's driving you mad it's driving me mad you can't do that then so this needs to be bigger we're going to do some responsive buttons later on but for the moment i can't live with this it needs to be bigger and this needs to be more in the center one of the things i want to show you a might be handy is because you want to like make it bigger on both sides you can hold down the option key on a mac or key on a pc and when you're scaling things instead of just like dragging the edges and then trying to move it around if you hold down the yeah option key on a mac oh pc kind of does it from both sides you're like that's better all right now we can move on to the next video is that even in the middle dan yeah arrange look that is better let's do the same thing with this one i got closer with that one some of you like why does he care so much and then some of you be like oh my goodness finally fix the button will he ever get rid of the full stop it's not lining up properly is it anyway let's get on to the next video now hi everyone in this video we're going to look at strokes uh 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 inch 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 alright so let's do our stroke so we're gonna 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 plus button okay and we've got a black stroker on the outside uh the stroke width we can drag okay 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 on the outside and you're like okay i'm going to draw another one on this product uh details here r for my rectangle tool and 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 five and go slightly mad trying to get the eyedropper tool and 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 to the default okay so um let's go to our little figma icon here okay and go to edit and there's this one here it says set default properties nothing really happens except that word appears okay but now if i click off grab my rectangle tool draw something out look at that i got a sweet green rectangle with black line around the outside and yeah right of corners so that is how you set the defaults and i'm going to leave that and 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 okay 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 okay and we're gonna copy them and we click on him and doesn't matter what color he was if we go to edit paste properties it comes along okay we can click more than one i've got the two rectangles okay and let's go edit paste properties there we go okay so that's stroke let's look at a bit more stroke we've got a bit of a tangent there with setting the defaults and let's look at doing a little burger menu at the top so i'm going to zoom in remember command plus on a mac control plus on 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 and we'll show you other things i'm going to use the line tool okay and i'm going to use my lintel to click hold and drag that didn't work i don't know why okay click hold and drag okay it will try and be straight if it's kind of not straight enough for you okay 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 degrees 90 degrees 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 um you know 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 counter mac 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 this if this guy introduces another shortcut here i'm going to scream close your eyes or your ears okay i'm going to introduce you to the command d or control d really common in figma okay it just means do it again okay duplicate do it again whatever you want to call it okay so command d we'll 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 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 kind of pc command d d d d d or control dddd on a pc okay you can open your ears now the people that are screaming about my shortcuts uh 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 okay but if you are building stuff on your own especially things like icons it's best to be member at shift zero okay or at 100 up here so that you've got a good sense of the size okay 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 so 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 okay and i'm going to put them in a kind of appropriate position for a navigation so it's called the burger menu or the nav sandwich okay uh 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 to zoom in on it because i want the little bubble ends now over here my stroke the stroke weight we've talked about okay so start an 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 developers 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 and 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 okay so the stroke saw 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 okay 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 okay 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 we're going to do the end as well there we go all right so what have we learned there are some quirks to figma like that undo with arrows uh we've learned about strokes actually the last thing i want to do is with images okay and we've written you know product shot but it's actually more common to just draw a bit cross through the middle as a placeholder for an image so i'm just great grab my line tool and i'm going to go from this corner over to here and this corner you go back to the tool every time cool so it'd be really common to have that as like a that's kind of a you know 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 to 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 it and so it's in your exercise files so how do you bring in an image okay or an icon and you can go up to this couple of ways and there's this way here okay 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 okay and click open and within them with this okay if you bring in an image you click once it'll come through it 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 okay if you want to drag it out remember same thing with like the lines making them go straight and the rectangle being perfectly square so that would be very common as well for uh you know placeholder image we are going to not do that for the moment i don't mind i don't really care lines actually you know 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 so all right that is strokes 101 let's get into the next video 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 that's imagine how i want it and 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 okay and what you can do is you can grab a corner and drag it and you're like yay destroyed it okay or you know manipulated it you can also click this enter 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 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 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 okay and all i want to do is i've got this tool here the default tool and i can quick click the edge and i can drag it around that's kind of how you imagined it um you know and that's most the time what you want to do what you'll notice is is that the stroke stays at two the whole time okay 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 okay 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 okay 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 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 a scale tool what i mean by that is let's say that we do what do we got these two okay 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 nope still does the weird stuff so you 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 though 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 like i 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 inu 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 it's okay and you can scale them up perfect so back to the selection tool and off to the next video 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 sciencey uh i introduced it earlier in the course because it was probably the hardest thing i had to get used to and coming to figma so i'll introduce a little bit now and a little bit later on a little bit more and you know 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 okay we'll do three shapes let's look at the polygon tool okay 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 okay and what you'll see here on this product details frame okay 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 control g on a pc now grouped you're like great what happens over here can you see the icon has changed okay it's called group two there's a group there must be a group somewhere else i made a group earlier didn't i there it is it's that button so group two 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 and i can look inside the group of my layers see this little turn down arrow here so yeah you can see stuff inside of it you can say all right i want to move that grouping is useful because we know what grouping is you can grab them and they move together okay 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 operate 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 okay 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 control g on a pc and group it so what's the difference uh 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 got this grouped one you can see here it's called group two these guys here are just hanging out by themselves in this frame so what we're gonna do is very similar i'm gonna select them all and instead of right clicking and saying group we're gonna frame selection and it's basically exactly the same as a group except the icon's 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 is different you get this like little um what do you call it pound symbol hash symbol grid whatever it is okay but they do a lot of the same thing so you can still see them in there they're all still trapped inside of this nice frame so what's the difference dan is 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 okay 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 okay it is useful because i'm undoing okay is because i can do things like let's say i want to cut that off okay i can drag my frame in can you see it it's it's operating differently if i drag the edge of this look what happens squidgy if i drag the edge of this in okay i can do things like this clip the content so i can use the frame as kind of like a mask okay 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 okay 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've got this list and you can set this to scroll okay so that it kind of clips it off same with this you've 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 all right so clip contents is one of the reasons and 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 figma and they just stop using groups never because figma um 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 un-group 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 um name here okay 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 okay these guys though i'm going to click on you okay 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 okay 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 okay so i'm gonna click on my frame tool i'm gonna say oh it's gonna be a tablet mini okay it's gonna be in portrait i'm gonna 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 okay 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 okay so frames get used for the big thing around the outside but also the little things inside of it okay 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 okay you probably didn't notice but if i go to um our place image can 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 okay 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 groups bad nope groups are great and they work just fine and they just don't have all the extra fancy features so that is my whole point of this video and we're going to use frames from now on instead of groups because they have features that we're going to learn on uh 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 do you got frames inside of frames and the one last thing is that this frame what 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 i 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 okay 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 hi everyone it is class project time okay i want you to create something like this okay 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 okay 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 okay i want you to keep it very 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 kinda similar because i i want you to be able to follow along with your example throughout this course okay and these kind of units help me show you all the different features in figma so get a bit close to that and 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 okay 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 okay so use the skills you've earned 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 okay 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 uh here the requirements so four pages those are the four pages from our task flow okay pick your own color okay 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 and 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 okay and just take a screenshot on a mac it's command shift four okay 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 and 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 white frame all right i'll see in the next video 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 so 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's 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 called an svg i'm stalling that thing to gauges the load anyway 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 it's free and then there's probably free so free or licenses and 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 and this one here requires commercial use but doesn't require a backlink so i don't actually have to acknowledge the people that made it so in here pick anything i say pick anything i'm gonna find a shopping cart that looks like a shopping cart where is one pick something quickly dan people are watching all 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 png version and an svg version let's look at both of the png's probably the one you already know svg you may or may not know already so i'm just going to pick a smaller icon version of this png and i'll show you the difference i'm going to download both of them stick them on my desktop and this svg let's compare both of them and how figma deals with both of them so um is there a right one and a wrong one yes svg is better but more complicated but now that we know what frames are and groups are it's actually not that bad okay so let's bring in a file i'm gonna 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 okay by holding shift and clicking both of them let's click open can you see i've got like a number little two there you can even see my little icon look a little trolly 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 so hold shift on your keyboard that's the reason we have a svg rather than a png i acknowledge that i downloaded a very small version okay on here in here you can download like the really big version let's download that and it will look fine and so let's bring in another one command 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 svg is one kilobyte this is 112 kilobytes that's the reason we don't you know we prefer to use svgs so it looks good but it's ginormous so can't use your png it's transparent which is awesome this svg is transparent kind of you're like well that's not transparent it's got a white background svgs into figma what they do is we kind of looked at this earlier can you see they came in as a 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 it 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 and it is colored okay so i can go through use my eyedropper tool and actually start using these now whereas the png we can't change the color we could we can go to photoshop change it okay but obviously svg is scalable that's what the s and svg is okay and yeah we can go into object editing mode which you know about already okay if you like i love this but i really want uh double click start going in i really want a spiky handle then okay [Laughter] looks like a digger anyway you get the idea svgs 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 uh 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 uh somewhere around here called figma community it's kind of new it's better in mind 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 iconfinder if you just want to like a hey i need a sharing icon or a 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 look let's have a look at the fig pic okay uh fig pick just means figma's 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's kind of 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 oh 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 email 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 [Laughter] yours might do the same so i'll leave it in there okay um 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 grab something 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 like this 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 safe to 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 say unicorns anyway so let's go and have a look now it will depend on how these things have been created these things have been 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 go copy i really need this i like it for my wireframe i'm going to go back to this document and i'm going to paste it and what will end up happening is this weird file turns up with a weird 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 detach instance you're like i don't know why 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 say 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 like get it out of that frame drag it out so it's kind of just hanging out by himself or is he there let's rename it let's call it file and in my case it's on the where is it on it's ended up on a weird page so let's say that i want it on the checkout page it's currently not on the checkout page there we go haha and that is the community i kind of introduced it earlier on okay getting into the community because there's so much good stuff in there you can find good wireframes and good kind of like layouts and lockups and cards and icons and we're going to be used to copying and pasting them and sticking them 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 wireframe 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 you know 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 alright let's bring in some icons and get them all tidied up so that we can use them okay so we're going to use the long way still for the moment using the little arrow there place image okay 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 our pc it's control i'm gonna 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 and drag these in now what will end up happening is and the 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 okay i've got them kind of a similar-ish sort of size and what i want to do though is scale them down okay and you've got to decide here whether you're just going to use the normal selection tool or our fancy scale tool okay it'll depend on what you want to do so in my case you see the strokes are kind of staying at that two 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 okay 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 okay 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 that 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 and but the stroke width is about 2. that's what i used here and i want to try and match these all okay so same with this one and 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 point five you can see there so let me just type in two 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 into good 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 and 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 okay 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 redrew that with the line tool okay 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 okay 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 0.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 know what i mean oh broke that i'm gonna leave it it's broken forever okay i can't live with it all right back um 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 are they done 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 okay because what i want to do is have that on all of them so what i'm going to do is copy it okay so from this first one click on the name of product details and just hit paste so i'm using control c and v on a mac you'll use can 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 gonna 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 okay 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 hi everyone in this video we're going to look at some of the secret sauce what makes figma amazing and it is the plugins that are run in parallel with figma so plugins are made by other people not figma okay and basically you install them okay and in this case i've installed a little icon plugin and let's say we search for a house i can grab my icon and just drag it out so 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 plugins 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 so to install our first plugin if you go to uh this little drop down next to the figma icon you can go to plugins and we're going to browse them in the community okay manage just will be able to see the ones you've already got installed and maybe uninstall them i'm going to go to browse in the community often i don't use this method i just go to this home screen okay and remember under community we were looking at icons a second ago there's another option here it says plugins so this is kind of new and always getting developed 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 take uh you know take five minutes and just have a read through all the amazing plugins okay um 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 plugins we're going to look at icons for the moment what you need to do is well the way that i use 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 plugin really common probably the first one everybody installs we'll do it later in the course but you can see 60 630 000 other ux designers decided 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 a codified but just like how to install a plugin and get it working so we're going to click install yes please remember these aren't made by figma so no responsibility taken okay and let's go and have a look now how to actually operate a plug-in we'll do a few through this course so let's have a look so you have to turn the plug-on plug-in on you can only have one running at a time so 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 ui they all look different none of them look the same this one here it's big i put mine on another 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 this i've got another house maybe that house was broken it was hard to change it so 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 mod and maybe that guy will be probably not i'm going to use this one fingers crossed so you can just click and drag them out look at that got a giant svg icon and really that's it that is that plugin you can just drag stuff out you obviously there's other options in here okay you can search icons and there's lots of tagging and stuff going on so plugins 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 plugin specifically for icons i don't need this guy now so i'm 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 not to like you can you can just delete it you know with this frame it's best to go into your actual layers and say that's it i'm going to hit delete and everything inside of it and then just make sure your layers are kept nice and tidy the hang is that there 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 hi everyone it is class project time not homework uh we are going to be doing something around icons okay so if you haven't already i want you to go and make sure that uh 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 okay on the confirmation page just a you know 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 just bought these great headphones check them out here at this link okay so and when you are doing this you're gonna kind of start dabbling with our persona okay so in my case um uh sarah here she's in her late 20s so i feel like i can be a little bit not as explicit with my language okay because if somebody else maybe is a little less technologically savvy born in a different decade um they might need a bit more explicit click this button to you know upload to your social media and to share with your friends your you know 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 okay without being too explicit also she these are the social media icons that i feel i'm not gonna put them all there don't you hate sites they just have like here's the 40 different um social media platforms that you might share on it and you know i've excluded a bunch because i feel like her age group um what else like she's working for herself so probably has a linkedin um profile and it's not going to be corporate so she's probably going to be okay sharing her new headphones um uh purchase and everyone's using facebook still so like use these sorts of you know what should i have here go back to persona decide what's going to be in there it might be wrong like you know i might have got these totally wrong and my clients going to come back and go why isn't there reddit there or some other thing that's new and tick-tock-y thing okay 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 uh 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 the icons from um 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 uh 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 and actually before you go if you are using plug-ins which i think you should get it installed have a go with it doesn't have to be iconify use something else um sometimes when you are dragging uh 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 okay and it just makes everything really tough in terms of your layers when you're new so i'm gonna undo that often it can be undo okay 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 okay and i can drag off a bunch of these where are they and what else we got okay 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 in 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 hi in this video we're going to look at pages that sounds boring it is and it isn't um over here at the moment we're going to end up creating a page we've currently got a page one 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 uh brief and our persona and also our task flow all in one kind of nice figure 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 one uh it's lurking there it's kind of probably closed up you're on your layers panel you've got page one there it is you can get quite far in figma and never have more than page one okay on page one is all of the stuff we've made so fast we've got i'm gonna use these little chevrons here to close them down just to make everything look tidier okay so we've got our confirmation page check out product details you can rearrange these because that doesn't make sense does it confirmation at the end ah i don't know that feels better anyway so we've got our frames which you could argue uh pages okay 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 one you can have more than one page a page two and basically you get to here and you go okay i'm gonna start making something different why would you have two pages in our case what we might do page one might be i'm gonna double click it and call it mobile okay 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 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 okay 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 by 1024 okay and we're going to have one two three or four of these so i'm going to drag one out don't do that go to your move tool okay grab the name hold down the option counter mac or key on a pc hold shift as well if it's not locking into place totally is and then command d or control d a couple of times i love that command d so satisfying and so we've got three of them okay go through i'll speed this up i'm gonna 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 okay 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 okay but it's truthful or honest it's an honest file that's what that is so other use cases uh is we're gonna 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 okay 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 um icons uni icons whatever they are okay over here like 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 okay 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 okay and there's where all the good stuff is it gets even more hardcore let's look at something a bit more big okay i'm at the home i'm over here at community and i'm an explorer 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 okay or a big figma file it might take a long time to up to download mine's i've got kind of rural broadband it goes okay it's not a mobile device so that's that's okay 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 okay and you'll notice that there's a cover page great um general information okay 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 are 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 okay let's peek at a bit of them the layouts the avatars the icons so um 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 kits understating what this thing does this is a system okay for how to think about everything about microsoft teams so somebody's made this somebody microsoft okay 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 um pop-up window that communicates that i've lost all your files and i'm really sorry okay 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 in the course we'll make a teeny tiny design system normally called like a style guide um but this is a pretty big use case but i guess i wanted to do pages because you're gonna have to file through these i'm gonna 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 got mobile there might be option one okay it might have a specific kind of task flow and you do another mobile option too 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 i'm out 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 okay so it's great to have all the stuff together and so it's going to be the top okay 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 okay 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 jpg that you've downloaded and put it onto your brief and task flow okay so we'll put it in here yours is probably just a big cheap egg 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 taskflow there it is there taskflow 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 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 uh how do we prototype it we'll 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 going to do is have the home page selected okay we'll start with this one and what you'll notice is this little dot this little dot is important we're going to click hold and drag drag drag a little arrow and go book and stick them on there give it a play you can just kind of 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 there you go all right let's prototype it okay to 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'll 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 home page here okay just click on the word home page and then present okay it'll basically jump back to that same tab but at least we're at the home page now look at that that's our sweet home page so what we're going to do is just click anywhere okay so click once oh it moved along click in checkout page what is that confirmation page has had a bad day what is on there that is doing that shouldn't do that uh let's close the downside again uh what is on there nothing something's weird happening uh i'll even the course in case it happens to you home page present yours is probably going to have this little load screen as well there we go you you you giant something in the way i'll figure that out later on but it's kind of working we're getting one of the time black box uh yucky you weigh there and i'll figure it out so we all know right there all right i'm back i have no idea is the answer did you 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 with some svg doing some weird stuff so i deleted that and i tested it and it still was broken let's double check it's still working no it's fixed weird i don't know then um so all i did was delete it and then undo it and it came back to life so just in case um something else happens and it's not as easily fixed like that took me ages it took me about five ten minutes to kind of figure out what was going on what i normally do is actually i go through and i just delete stuff and then test it delete stuff and 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 that's normally how i do it and then i gave up on that so i just made another version of it and that worked and in this case i just deleted it and undid it and it came back probably closing the program opening it back up restarting machine anyway all right that was a little bit of a um tangent but these things happen so it kind of worked let's go to our present now forget this is back in the zone dan back in the zone okay so we're going to preview it and we have done some basic prototyping where you click anywhere and it moves along okay guess the end and it's kind of stuck so what you can do if you kind of wiggle around okay you'll notice that and after a while some other little options appear okay restart which is r it's a really common one get back to the beginning so you can kind of work through your prototype again you can manually get through it can you see down here page one two three four other things that might be useful is under these options here you might just but you might want to go like 100 or full screen to get rid of all the kind of chrome around the outside uh what else we want to do that's kind of it and one thing you need to know is that you don't need to close this every time okay you and i feel like when you finish you close this down and then come back over here 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 know you're like where did it all go okay because you're in prototype remember to go back to the design there's three at the top here we'll look at inspect later on the course but whenever you're missing your colors or fonts it's because you're stuck on prototype not design so i'm going to go in here and i'm going to say you are now going to be another color okay now i'm going to 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 kind of 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 there might be in the future check you want to google the thing that says figma present what is it called yeah present shortcut okay it 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 two is whatever the second tab is that's considered the first one two three so in my case i'm gonna be going back between command two and command three command two command three come on two make a change come on three okay and it updates instantly so you can keep that open another thing to note is you can't prototype across pages okay so i go to my home page 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 mine as well is that i have this nice chrome around the outside of an iphone 8 that might look ancient when you're watching this okay 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 click in no man's land okay and you can say all right i don't want an iphone 6 i want uh i don't know what google pixel like i own a four at the moment why we come here before you have to look at a really old uh two and and you can pick through the different colors um not that they change much on an iphone but obviously on our iphone 8 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 you can change the background color you can go from portrait to landscape okay 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 it's because when you started okay remember way back in the beginning when we went all right make our first frame and we picked one of these defaults okay they're attached to this okay so even if you've just typed out you've 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 uh chrome there it's it doesn't help the testing 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 click on home page on the frame too and i okay click on the home page you'll notice in prototype prototype settings there's nothing in here okay so i can go and say that i want it to be a desktop okay like 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 all right 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 the um 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's clicked at the moment it's using the entire frame so to get rid of it you can do two things uh what i tend to do is just click on the little arrow hit delete or you can click on your frame here okay and say under prototype can you see it says we've we've applied this interaction called tap checkout okay just said minus it's the same thing whether you want to delete it by selecting and deleting it or selecting the frame and then just minusing any interactions you've got edit all right so we're back we've gone nowhere we added them but we deleted them let's jump into the next video and we will break up the buttons but we'll also add some animations with our transitions all right i'll see you there 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 okay bye now there's a cool pushy thing this one does a slighty thing uh so i'm gonna 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 right to change the animations we're going to do a couple of things we are going to make sure one prototype here in the top right okay and we're going to delete these okay if you haven't already okay click on the names at the top and delete these transitions oh where did he come from haha [Music] do you remember in an early video you were like i was like what were those big black uh boxes i've turned figamer off open it back up and i totally figured out what those big squares were okay there something in here uh yeah that's what they were big giant letters facebook and there we go oh well problem solved uh i think i was demoing 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 okay 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 okay gives 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 wanted to go to straight to checkout okay that's for the keem buyers to go straight there no fuss no mess now the animation is this okay 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 um but you might if you've closed it okay just go to this little play button okay and go to present and we'll open it up all right so a little button gonna 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 ex self-explanatory um we're going to instant as easy dissolve as you just saw smart animate will 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 uh r for reset move in case 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 and instead of testing every single one what you can do is like move out and can you see down the bottom here if 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 we'll push one out to move one in okay so this is kind of an easy way to um slides 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 okay i'm to stick to move in and can you see here the directions you can decide whether you want it from the left or coming from the right down from the bottom down from the top and up from the bottom so those are all pretty easy and let's look at one of the other interesting things is easing okay 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 okay it's going to ease out that little curve there okay i'll exaggerate it here so this is another term we need to learn um ms which is milliseconds okay 300 milliseconds is there's a thousand milliseconds in a second so that is one second okay so uh 300 is i don't know a small part of it um third ish [Laughter] i'm going to turn it up to a second just so that i can um preview it and have a look um so let's go over here for refresh by now can you see nice and slow but it starts fast and then gets nice and slow at the end okay 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 you see this actually shows it even better in this little um icon here so it starts slow slow slow slows out and gets faster okay it just always looks good with that ease in and ease out okay so i'm gonna crank it right up to exaggerate it to 200 milliseconds okay oh i can do that there's one fifth of a second and all right so let's preview it let's have a look for a reset by now that is too fast uh so let's try three straight 400. reset click it still probably a little fast but you get the idea right it's easing is to play with the animation um 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 um 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 has to move kind of how far it has to move it's alpha reset so that kind of e what was it called um [Music] he's 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 and 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 okay so i'm just going to do it from the button or on the outside okay 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 okay 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 okay 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 okay so it'll just remember the last one so i'm sticking to push and the other thing to note about animation and just the interactions in general and prototyping if i copy this and delete this one click on there hit paste can you see it brought along with it okay 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 um navigation on one of them and just copy and paste it along okay so let's say it's this one here i want it to go to the home page you know i make this go to the home page i don't have a share in a um [Music] account button yet okay 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 is going home button's going and you don't have to drag it um 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 okay it's doable uh after a while it's not you know you saw that like microsoft materials one no microsoft teams one there's no chance of rigging that up um with dragging and dropping okay so what you can do is you can click on these okay and actually don't click on them you select it in prototype mode click in directions hit plus okay and it's going to say tap what happens when when you tap this one it's going to go to navigate to the home page okay 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 okay i think that's it um that's it that's it that's it hang on let me think i'll pause it hang on uh 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 and then you'll know instantly you'll be like i'm stuck and i can't get back okay so you can update your um uh 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 homepage and it just pops that thing back out again to delete one you can drag it off and 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 at prototyping 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 okay 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 okay but um maybe it goes to the um product details page but if you click anywhere it should highlight the one so buy now uh purchase hey congratulations the push and the bounce is a bit weird but um 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 uh 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 uh so if you're viewing pleasure editor can we wrap up with a page peel hello uh this is the other side of my office you normally looking from that way across this way this is that way it looks like my junk and my soundboards to try and make it sound nice and it's nighttime it's not kind of moody it's just actually dark it's about eleven o'clock at night and we're making courses for us um and in this video we are going to be looking at something called figma mirror what is it it's a way of testing our you know we're on the computer trying to design a phone website a mobile first website okay or an app okay there's no point spending all your time on there you need to be testing it on the device that thing okay so there is an app you can download from either the android or the mac app store you can tell i don't use it um but it's called figma mirror they might be changing that name um in the comments if they have updated it but it's called figma mira 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 and and basically what happens is uh can i show you here um 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 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's too small because i can barely click on it you can't see what i'm doing buy now button look at that okay now 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 looks fine on desktop but it's teeny tiny in there okay the purchase button looks all good when i go to buy now um 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 and i do get stuck on the learn more page i don't have any sort of like prototyping off the uh the um 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 oh that's way too small or that's the hideous color green okay so um actually that's probably pretty good and 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 gonna change the camera all right so probably should have done this at the beginning uh 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 um and yeah you can just kind of work so you when i'm working especially this initial stage getting font sizes and stuff ready uh i just kind of like i don't have it propped up i just have my phone lying down on the ground but so you can see it and this is really handy now i can go through and say actually font size here what do i want to do it's a group so i'm going to go into my group and i'm going to use up and down until i find something what i'm looking at is i'm keeping my eye out on my phone here okay that's what i'm looking at i'm like is that an approachable for our size what you'll find is pretty much always 16 is good okay you can't see it because it's on this side of my desktop but i've gone to 16 points that generally is a no-brainer good one okay can't wreck it 15 if you're trying to be cool and fancy and trying to keep it small but if you get down around the 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 and across center them together there i'm gonna 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 hearing knuckles in the video but you get the idea you can make changes really quickly be seeing what it looks like on a phone okay it's pretty much instantaneous i'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 but mobile phone or an app okay or a mobile first website like we're doing okay desktop is part of our plan but it's secondary most of our audience is going to be coming from paid ads because i talked to the client about it those are the kind of conversations you talk about as well like lead generation where is it all coming from it's coming from facebook ads it's all gonna come from mobile phones if it's coming from youtube how-to videos like a lot of my courses do then it's desktop first so kind of questions you'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 in a bit all right it is class project time i want you to download the figma mirror app from the google play or the app store i both named those wrong in the last the last video okay 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 okay so log in with your account uh 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 okay are the fonts large enough and legible enough are the colors easily contrasting okay so i can actually see some of the text that is you know like over the top of these i know it's wide frames there's not much going on but um are these fonts for the description big enough they don't all have to be 16 and massive okay but you know some parts that do need to be bigger okay 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 know go to prototype and just make sure they're all connected okay when you're testing and also are they easily clickable are the buttons big enough okay in the last one gonna go back to design mode i had 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 framer on the outside so like 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 and that this thing inside okay and this outside kind of wrapper which is the frame can be different sizes okay we're going to get a teeny tiny bit advanced here but hey let's do it and so i don't want to just grab the edge okay because what i want to do is i want to go inside of that group okay hello group okay or any of these things go inside of them all okay 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 wanted you to say actually just stay in the center don't scale means when i grab my frame which is this one on the outside okay and i grab it look hey i can make it bigger it stays in the middle which is cool okay 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 gonna 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 okay so that is it go and test your wireframe okay and check in your where is it class projects just want you to take it can you take a photo of your phone no everyone can and 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 why 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 not my computer and it's exciting it's interacting i'm clicking buttons i feel like a professional i don't know is that youtube anyway take a photo if it doesn't work and you can't you know 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 um all right that is it i will see you in the next video 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 okay with the whole thing sliding out but now you ready for it wait for it [Laughter] that is the arrow sliding in just the arrow rather than the whole thing okay and 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 okay 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 so hold down the option key on a mac oh key on a pcs we've got two of them okay and on this first one i want it to be off screen okay kind of over here and this one of the tips is when you are doing animation is i'm undoing that is just have a bit of space okay 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 okay and the second one where it's going to be on and to make the magic happen is we need to connect these two okay 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 okay that's the one we ignored earlier basically this works when there are objects of the same name on two two separate frames and it will animate them okay 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 okay and i'm using the ease in and out back because it looked nice so yeah let's give that a go um 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 okay what's happening is is that this arrow is actually not part of this frame yet okay or not part of this frame anymore there was a time it was look i'm part of this frame okay so have a look over here in my layers panel okay 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 it um 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 all 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 okay 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 conformations 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 so 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 where there there's one there it's going to work all right so let's go and give it a test so i'm gonna use my back arrow once i'm just using the arrow you can click these down here if you want okay um i'm on page four click once hey a little animation okay 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 uh 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 the 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 okay 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 okay 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 and we're 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 percent just so i can still see it okay and let's go test that now so back arrow click once it fades in and does that okay 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 okay so one of the quirks is that if you rename it okay 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 okay 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 okay so if you get a name one that's fine just make sure you name the other one arrow back one click okay uh what else do i want to do i don't like to 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 okay and when i click this i want the arrow to start kind of like moving in okay 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 and 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 okay so basically what i want to happen is when it gets to here okay and we go to prototype okay 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 okay and then after a delay of however long okay i'm going to turn it down to one millisecond you can't have zero for some reason okay 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 okay 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 then automatically moved on if that's a bit confusing let's change it to two seconds so two thousand milliseconds okay and let's go back so we click this it gets here waits for two seconds and then moves to the other one and the smart animation moves it in here 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 figment does it but if you're thinking this seems a little bit clunky it is don't tell anyone okay it is figma trying its best to be all things to all people all right 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 and the other big thing is that everything needs to be within the frames okay what i mean by that is remember our little arrow over here okay 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 alright that is it i will see you in the next video okay it's class project time your first animation okay 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 and just do the arrow that we did okay 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 okay 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 okay i'm happy for you to go a little bit further okay so in here it says you might try something keep it simple still okay don't get things to bounce in and bounce off stuff multiple key frames like that is tricky and 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 dish 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 okay 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 okay be great if this button says record my stuff check it might be there now okay but there's not at the moment okay so i would love to see what your animations are if you do know how to like record your screen like i do okay i'd love to see either a video uploaded to something like youtube or vimeo okay that'd uh 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 alright into the next video hi everyone in this video we are going to be sharing our design with our client or one of our stakeholders okay 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 password so but we still need to get you know he's our client i want to get him this prototype okay this wireframe at this stage just to see if i'm on the right track keep them involved rather than surprising them at the end so it's really easy to share stuff in figma so we're going to use the share button on the top okay click on that and we're going to start with a simple version okay 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 okay so this is doug he i emailed him a link he clicked it in his email address and this is what he sees okay 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 okay and he can kind of move around he can't do a whole lot without logging in okay but he can look at it and he can't comment at this stage we'll do that in the next part okay 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 and the other thing you can do is this little play button still appears here okay 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 you can see it you can click on learn more you can realize you can't get from learn more to the purchasing okay so back to home page all right so he can see all of this which is cool and 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 um so yes where this gets even cooler like this might freak dug out okay it might freak you out okay so he's working on this what you'll notice is i'm gonna make dig dug go over the side so pretend this side is dug and this side is my regular old figma okay so let's put a gap in between so this is him on his computer at his house and this is me on the 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 uh 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 uh 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 okay and let's say doug's like oh man it's good but what is that green i'm like and 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 okay so what's happening is this is live collaboration so um 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 okay 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 okay if doug wants to use commenting okay 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 okay 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 uh so i'm going to go back to figma okay so forget about doug bye doug okay a couple of things that you can do as a designer okay is you can go into here when you do go to share you can say i want to link to a specific frame so let's say that we all the homepage is wrapped up there's just problems with the um product details page because there's no clickable button uh let's do this terribly let's make that clickable we can go to the checkout okay so what is it doing instant that'll do okay 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 okay if it's grayed out it means you've got nothing selected and i go to share you can't tick anything okay so that's one thing let me show you what commenting does okay so let me upgrade doug wait there okay so upgraded doug this is doug now before he could only do very limited stuff now with his free login okay he gets probably a little bit too many details for our poor old doug and he's like why can i see the css code but the difference now is he's got commenting so doug over here is like okay i like this uh you know um can't see my comment so doug's gonna write why are we not using real images signed doug doug it's a wireframe that's why okay so he posts on his one on my side i can see doug now there he is okay and i can start seeing comments coming through okay 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 okay send it off to doug i should put a smiley face in there okay you can see we can have this collaboration between my client okay and me they can pin stuff all the client needs is a free login or they can just do it by email you 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 okay let's go can you see up here there's two ds i should have called him fred or something but here's two dogs now okay so there he is there and he's the yellow guy you can have loads of them along the top here okay of different people looking at it lots of different clients lots of different testers okay i'm going to go from my i don't want to be on comments anymore because i can make comments myself okay 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 okay 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 figment teams all right i'll see you over there bye doug bye dan i'm dan all right in this video we are going to take it another step along okay we send our file off to be shared with our client and that worked great okay but let's say we're going to be sharing this with other colleagues okay working in a ux design team okay at a company and there's more than one of you working on documents okay so i need to share this with somebody that can actually start working on the project we 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 them 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 okay 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 okay 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 okay but this is called a team okay 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 okay for different companies some companies only need one team with lots of projects inside of it okay 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 okay or the redesign of that web page and then redesign again lots of different projects okay so you share the kind of company-wide team with the different people okay so i can go to members and say i want to invite you 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 okay so we've been given yours will be different okay 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 okay 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 okay this is the default one for figma at the moment okay and there's just a bunch of styles okay lots of things going on in here different assets okay 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 plus create my own project okay this one is going to be the e commerce it has to be lowercase e for some reason ecommerce website okay let's create it 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 okay 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 okay 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 okay doug we don't really want to edit but let's say victoria okay um victoria's somebody i work with another ux designer i can send her email address in here and she could start editing this thing so why do i show you all of this uh because it pops up quite a bit and it's one of those break points where you go from free to paid okay because let's have a look let me show you so back at home okay 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 okay 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 okay i need to pay for this okay 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 okay 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 okay actually i'll bring it up here this is what it looks like at the moment it will change okay it says free you're allowed unlimited drafts but you're only allowed one team project okay 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 okay 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 okay i've got this i can share it when it's in drafts okay 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 okay so they don't have to pay okay the trouble with it though is anybody that was an editor can't see it anymore okay it comes out of their figma and goes into drafts and i have to kind of share it this way there we go okay 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 uh confused the academy drafts this thing this thing i can create more teams what goes in here so 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 alright i'll see you there all right you made it to the end well done uh if you enjoyed it like and subscribe of course and also remember that this is a short part of my longer course it's not so short right but this is the first 29 videos of 111 so there's lots more to go here if you are interested if you are uh there'll be a link up here in the cards in the corner link in the description or just google daniel scott figma essentials and you will find me join me for their full course lots more exciting stuff to go um yeah that is it i hope you're feeling more confident in figma and maybe in ux in general and if i don't see it the full course i'll see you around here on youtube lots of pointing that is the end goodbye everyone you

Channel: Bring Your Own Laptop

Views: 45,860

Keywords: figma tutorial, figma tutorial for beginners, figma ui design, Free Figma course, figma tutorial web design, figma web design tutorial, figma UI tutorial, figma ux tutorial, figma ui tutorial for beginners, figma ux tutorial for beginners, figma tutorial 2021, figma for beginners, figma for beginners 2021, figma ui design tutorial, figma tutorial for beginners 2021, how to create icons in figma, figma tutorial app design, learn ux design, figma ux course, free figma tutorial

Id: kbZejnPXyLM

Length: 177min 39sec (10659 seconds)

Published: Wed Dec 01 2021