Transcript for:
Figma Essentials Lecture Notes by Dan Scott

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. Hi everyone, my name is Dan Scott... 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 are not even that entirely sure what UX design actually is... don't worry, we're going to start right at the beginning... and work out 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 very simple wireframes... from there we learn how to implement colors and images... properly in your Hi-Fidelity mock-ups... you'll learn the dos and donts for choosing fonts for web and mobile apps... you'll learn how to create icons, buttons, and all sorts of UI components... you'll learn all the scary terms... like components, constraints, and multi dimensional variance... they're all very easy ones, you get to know... we'll also make our lives easier by using free UI kits and plug-ins for Figma... to speed up our workflow... we'll build a simple style guide, ready for colleague or client hand-off... you'll learn how to make both simple and advanced micro interactions... page transitions, and animations. Before the end of this course you'll have fully interactive prototypes... ready for user testing... all the way through to collaborating with other team members... and exporting the right files, ready for hand-off... to your developer or software engineer... you've got assignments that I set throughout the course... so that you can practice and develop your skills... plus you'll have something unique for your portfolio at the end. All right, it is time to upgrade yourself... go from Figma zero 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 going to cost a little bit... probably just creepy... but it's made now, and, we've going to have to live with it... so, let's dive into the course, I'll see you in there. Hello, you made it, congratulations, welcome to the course... first things first, is, you need to download the exercise files... there is-- there'll be a link on this page here, download those... in those exercise files will be the files we'll use for the course... but also there'll be a shortcut sheet... we won't go to deep into mad shortcuts here... but there are just some super useful ones that... you'll need to know by the end of the course... so print that sheet out, and you can circle the ones you really like... also you need a version of Figma... 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... 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 lots of coffee, it's early... I do slow down... but if you find that I speak very fast... or maybe English isn't your first language, and you find my accent a little tough... there'll be, on all the videos there's like a little cog, where is it, down there... and you'd 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 easy for you... and that is it, uh, free version, paid version... we are going to use the free version for most of the course... mainly because, it's amazing... it's amazing what Figma has allowed to be free... versus what is paid... towards the end of the course I will show you... why you might want to jump up to the paid... you can get quite far, like a professional designer using the... free version, but I will show you the perks for paid later on. Also, Figma is always updating... which is amazing, to me as a designer... means new features come out all the time... they rejig things to make it simpler and easier... include more advanced features... it is really painful for me as an instructor... because basically, I know this, as soon as I finish recording this course... they're going to go and shuffle some bits around... so keep an eye out for that... if it's fundamental stuff I'll re-record the videos, if it's just small stuff... just take a look, often it can just be a name change... it's in the same place, does the same job, maybe they've called it something else... so clarify that 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... yeah, for lots of updates, booh, for lots of updates... all right, let's get on to the next video. All right, let's talk about what Figma is for, and what it's not for... it is amazing at rapid prototyping of things like websites and apps... it does do other things, which we'll cover a little bit... but it is the main tool of a UX or UI designer... and they roll in creation of either wireframes... which we'll do in this course... a really quick kind of look and feel for an app or website... through to kind of like, really, like it looks exactly like a website... Hi-fidelity mockups of this website, with interactivity as well... and this kind of leads me to what it doesn't do. You can make something that looks very like a website... enough so that you can go out to testing, and that's probably the... the best bit about Figma and UX in general is that... we'll create something, and we'll actually be able to get it in the hands of... the client, the intended audience, our customers... and they can, it's not going to be complete... but they'll be able to use it enough that we can make... some observations, and actually test some theories about... you know, what the users want... and if things need to be changed, we can change them really quickly in Figma... and then get them back to there, like why are they sitting there? So it is about rapid prototyping, quick... you know, changes, and get to a point... where you're like satisfied with the website or the app... and you're like, "This has gone through a bit of user testing"... client's happy with it, now, this is where Figma doesn't do anything else... is just the prototype, it's not going to code the website for you, or the app... it hands over little pieces to the developer, to use... CSS, and SVGs, and graphics, and stuff... but not a lot that the developer can use... all end up starting from scratch, using your mockups... lots of things like spacing, and-- they'll make it look like your app... but that's what Figma doesn't do, doesn't do the coding side... so what you do is you get it signed off with the client... and then you either work with the developer... if you're a developer yourself you start coding it... or you might start, like... if you're-- you might get into HTML and CSS, I've got a course on that... if you want to start doing your own stuff... or you might be using something like WordPress or Webflow... I've got courses on the horizon for both of those two, or Wix... or something more drag and drop, you've been had to build it... based on your Figma mockup that you've-- it's a lot faster to do... then go and build it in either one of those tools, or code it... that's what it is, rapid prototyping... and what it's not is, you're not going to have a complete site at the end... that's a question I get asked a lot, so, next video... actually, I forgot one thing, don't go away, editor, don't cut it. What else is it getting used for? Figma is getting used a lot for like just regular old graphic design... mainly in the digital space, so like social media campaigns... there's some amazing things you'll-- you'll see as you go through the course, you'll be like... "This would be really handy for doing Instagram story posts"... or Carousels, or a bunch of different sizes for ads... it is getting really good at it, doesn't do very good print stuff... you can put a normal page into it, you can say, A4 US Letter... so our people are using it as an alternative for something like maybe... Illustrator, and a bit of Photoshop... Photoshop, still required, but... you'll see, it's made for design websites and apps... but people are using it for all sorts of other stuff now, becoming... not a general design tool, but know that... you will find some people using it a lot more for things it's not meant to... but 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 is... 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. So UI design, the simple way, this is all very simple. The UI, User Interface, versus UX, the User eXperience... the UI is the way something looks... and the UX is how it works, how somebody uses it... so often, the way it looks, how it's used. Now in terms of being a UI designer, like, UI designer is in charge... like, up until UX became part of my life, and lot of us, it's kind of new-ish... I delivered UI design, I design a website... and that was based a lot on my intuition... like, "Oh, button should be this big, and should be over here... traditionally things go over here in the Nav"... so there was a lot of that, and I've give it to the client, they'd like it, great... but it's a big element missing, the UX, there was very little testing... I had an idea what would work, but it was totally an idea... it was like, hypothesis of how it should work... and the UX part of being a UX designer is... the taking that kind of UI, that layout... and getting it in the hands of client, and testing it... that part of it turns you from just a UI designer into... you know, the beginnings of a UX designer, is getting it out there... and actually testing that, did it work, did it do exactly... you know, what I hoped it would do... is the client, when they click this button, did they go where they expected... or were they surprised? Is the language like, let's say UI designer designs the button... and the rounded corners, and the beautiful gradient, and the text in the middle... the UX designer says, "That's great, let's go and test that," and says... you know, "Is it big enough, can they click on it, is there enough contrast... is it accessible for people that have-- that are visually impaired... is the hierarchy of buttons, is this one too big"... because it feels like it should be doing something else... so a lot of that side of things, is the UX. Now in all honesty, this course is based mostly around UI design... because we're learning Figma, Figma is the creation of these things... the testing side of stuff, I'll give you a... some insights as we go along about... what are we doing, different testing phases... but it is broader than what can be covered in this course... but we'll do UI with a little bit of UX... but Figma basically, is we're learning software... that was why you signed up, probably... so it doesn't make you instantly a UX designer... the UX part is the, taking it further than just moving pixels on the screen, like... giving it out there, getting it tested, and changing things... and testing things, that's UX. My little example, where I'm kind of running through at the moment... example, it's yeah, my bank, updated its website and its app... and it looks beautiful, the UI, amazing, the UX is terrible... I'm sure it went through some testing, imagine it went through lots of testing... not right at the end though, because they're just... just simple things, like... let's say that I'm typing in my password, hit Enter... Enter, Enter, no, you got to get to 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, can't remember what it's called... where you get to the end, it will know that... when you press Enter you mean, this button here... so that's just one thing. Another thing, you go into like updating a, I want to update a... person in my standing orders, like a Direct Debit... or, not sure what you call it in your country... but a regular payment that I'm making... so went to, find how to edit it, I'm like, "Huh"... have to delete it, because couldn't find anywhere, now I'm not tech savvy... I know how to use computers, I'm like, "Couldn’t find it," so I was like... maybe have to delete it, now I've been doing this a few times... I'm like, "I'm going to email him"... now like, who's going to click the name of the person to edit it, I'm like, "Huh"... seems simple, go and have a look... and you do, if you click on the name of the person, it does go in to edit it... but it's missing a couple of things... any sort of indication that that's possible... underline arrow, big sign, two tip... and the other weird thing about it is, you know, when your mouse... your mouse is kind of moving along... when you go into something clickable, changes to a little hand... doesn't do that, you just click over the arrow, hope for the best... it's like clicking everything... that must be hard to turn that thing off, somehow it's off... there is a million of one of those little things, ah, it just come out... but I do have a problem with, anyway, I'm babbling... and red, why do you bring it in... this feels very ominous, my little colored like, I just put the color like... you know, I say it all the way through the course until I get sick of it... but yeah, that's my UX story at the moment... you'll have them as well, and that's the kind of thing if you're new to UX... it's keep those ideas open, like... they're terrible, and they're pain in the butt... but it's kind of language and stuff you're gathering as a designer... so that when you're working, you can avoid some of those things... or at least, when it comes back from testing you're not surprised... like, "Yeah, that thing I hate as well is in this thing"... so UI, 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... we are going to start making some wireframes initially... then we will make some Hi-Fidelity versions, that look a little prettier... and one's actually pretty messy, let's look at this one here... see the screens down the bottom... so we're going to work on these... we're going to build Styles components, all sorts of goodness... let's have a look at one of the mock-up versions. So yeah, 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 that product can be added to a Checkout... and then once the credit card details are filled in, Confirmation... so that's what they've asked us to build... they've given us our persona... so let's quickly talk about what our persona is. So this is just a bare bones kind of persona... they can run to one whole page, two whole pages... 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 our ideal customer is a woman named Sarah... Sarah's in her 20s, she has a Bachelor's degree... she works for herself, she's married, with kids... and she lives in Ireland, she has never bought anything like this before... and some of her concerns is that she is... very Eco-environmentally and waist conscious. So why do we have a persona? It's to allow us to be specific... not specifically to Sarah herself... Sarah is representative of a, a type of person... 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... 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... because you end up with this generic thing... that doesn't actually work for the target audience... so our persona helps us define 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 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, is her, or himself... and let's talk about what's right for Sarah... and that's through to like color, fonts... language, types of imagery, organization of information... like what features should be shown earlier, based on... 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... a UX researcher will 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 it'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... now, or after this course, researching personas, what they’re for... so to get a better understanding... just know that this is a very simplified version of it... but good for what we need for this course. Now Task Flow, if you haven't heard of it before... Task Flow here, we've been given... instead of designing all of the mobile website... we've been asked to design a certain kind of important critical feature... so we have to design this Home page, it shows the products... all the product features, a Checkout page and a Confirmation page... so this is a nice simple Task Flow, they can be a bit more complicated... they can be less complicated, might be like... you know, Task Flows could include things like... how, you know, how does a person cancel this product, what is the process there... you might be designing the cancellation process... maybe it's the sign up process, maybe it's how to change your password... how to download or upload a document... it might be a specific thing that needs to be done... on your particular app or website... so let's consider it a Task Flow... and also, actually, let's throw in this other term, kind of his buddy. So Task Flow versus user flows comes up quite a bit... and there's this great article here by Erica Herrano... I'll put a link on the screen here... and 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 Flow, let's have a look... they've got the pancake Task Flow... so I'm going to look at this, finding a recipe version... very simple, kind of like what we're doing in our course... Home Page search for pancakes search results... find the super banana pancake recipe, simple Task Flow... it's step-by-step, it's sequential, kind of linear... whereas a Task Flow is a lot more complex, let's have a look at this one. So this one here, can you see... we end up with... it's the same kind of process, so you start at the Home page... and you end up with super banana pancake... but there's a lot more ways of getting there... there's more than one option, which we know is always the case... like this option is, like the big one here, the first one is... are they going to use the Search bar at all... they'll task low up above, said assumed, using the Search option... but there is going to be-- your persona might not be a search bar kind of person... and 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... the browsing the categories, and there's a breakfast category... then there's a breakfast page... and they're finding pancakes within that breakfast page... and then they click on the recipe that they want... and they've ended up back at the same place... but it's a different way of getting there... there is, you can see the key up here, there's decision nodes... they're different shapes for different actions, these are our pages... these are interactions between the user and the interface... and these are decisions, they've got the start and stop there. So user flows are more complex, show different options... so you've got to make sure that you are designing for the right thing... if you're designing a user flow it's going to have more to it... and a bigger job, whereas a Task Flow can be quite a simple bound read option. Now you will have Task Flows within this user flow... can you still see our Home page search results... banana is still there, it's just kind of baked into this more complex flex... 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... so yeah, that's the brief user flow versus Task Flow. Another thing to mention is that... we've been asked to design a mobile website version of this, not an app... so an app, you just have the one mobile size screen... because it's a mobile website... it means you're probably going to have to design out... not only the mobile version but maybe a tablet and a desktop version as well... so that can often catch you out when you're new and you're like... does somebody ask 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. Lastly, this is a pretty bare bones in terms of... you know, we've got a persona, we've got a company name and a Task Flow... and often a brief can be a lot bigger than this... like designing a whole website... and sometimes you can get a lot of details around it. So for me as a designer, what would be hard with this particular one... is how much do I know about Scott headphones, very little at this stage... I would like to see, I'd like to talk to them... or I have my Product Manager talk to them... or you know, whoever is in charge, talk to them about what they're about... what are their values, what is their mission... to help me kind of help with this persona... to kind of build another level on there... and sometimes you won't get that information, and sometimes you will. If you get given something from a bigger company... they're probably going to have values and mission statement... so you can go off and find that, and add that to your kind of tool set... when you are designing this thing to have... better conversations with the stakeholders... when you are referencing what you're doing... versus where they're going as a company... you're going to get jobs where there is no values, and there is no mission... and they haven't really thought about it, and you're going to have to... do your best with what you've got, and as you get more experienced... push back for those types of things... it's probably conversations that I want to have more and more... the more experienced I get... like not just a persona but like, why are we doing this... where is the direction we're going, who am I helping, why are we helping... to really influence my design work, but anyway... this is a good starting point for this course... let's let's move on. Hi everyone, it is time for your very first bit of home-- we're not going to call it homework, we're going to call it class projects... they're here to-- you can ignore them, you totally can... but it will really help you solidify what we've learned, and my goal is... so that you can create something through this course... that is unique from the course material that I'm making... that is great for your own portfolio... and the first one is to create your own Brief... so we saw in the last video that I made a Brief, where is my Brief? So that's my one, what I want you to do is... go to this website that we've just created here... so randomprojectgenerator.com ... I want you to enter your last name... or your pet's name... or a friend's last name, somebody's name... for the company, and enter your location... Manurewa, it was where I was born, you can put in... you know, Ireland as a country... if you're in a big country put in your state or town, whatever it is... and then click 'Generate My Project'... make sure we're on the UX/UI tab there... and click 'Generate My Project', and you should get something unique for you. So I've got Shadow Surfboards, it's kind of cool... 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, "Hmm"... some of the more tricky objects... tricky personas is... one of those things that will really help build you as a designer... don't hit it... and yeah, have a little read through, so you're going to get something unique... and it's going to be unique in some ways, as in the company name and the product... but the actual thing we'll build together will all be the same kind of structure... so we'll follow the same Task Flow... you're going to use Home page, Product features, Checkout, and Confirmation... whatever the product is... and it just means though that when you do start following along..... we're still going to draw a button, and it's still going to say Learn More... but you're going to be using colors that are good for your persona... and when I say bring in an image... instead of bringing in headphones you're going to bring in... surfboards or whatever your product is... you're still going to have an image in a circle... so they're going to have the same structure... but at least at the end you're going to have something... kind of unique for your own portfolio... plus it's going to get you thinking about your own persona... and how you might kind of design for them, get the idea? So follow along in this course, but using your own company name... which I'll get you to make a little bit later on... 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 it as a PNG... and just store it away on your computer or your phone... ready for later in the course... we're going to put them together on a kind of a brief and Task Flow 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, copied it to a clipboard... something, you've got it somewhere, stored away... and let's bring in the Task Flow as well, because we're all using the same one... so it's going to allow me to show you something strange, weird... I don't know, interesting for Figma... Figma really wants everything to be in the cloud, online... so go back to your kind of Home page... or if you're on a PC go to the little Figma icon, 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... rather than it being shared with you, this is a little icon up here, Import... look for that icon, it has moved around in the past, give it a click... and in your Exercise Files is one called taskflow.fig... load that in there, and we'll use that later on as well... you can open it, have a look... basically it is just... our Task Flow... and 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... or at least 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 Hi-Fidelity... well, it's pretty easy, you can see... wireframes are pretty budget, Hi-Fidelity mock-ups look really nice... and they'll call them Hi-Fi, Lo-Fi, generally they'll call them wireframes... and Hi-Fi is High Fidelity... this one's going to be really quick and easy to make and test... and do not try and skip if you're new to UX... skipping the wireframe section of your kind of design process, at your peril... you can probably knock up a wireframe in a few minutes... always Hi-Fidelity, you can end up kind of like... playing with the tracking, and leading for hours and hours... and you will not get a better 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, it's like, on a phone or on a website... super quick, super easy, and no distracting... like, "Oh, is it the right image... is that the right font, I'm not sure about the colors"... you're talking about the Task Flow... like the actual mechanics of how this is built underneath... and we can test it quickly with wireframes. Wireframes don't have to look like this, that's my wireframe. Another wireframe that I downloaded, a lot prettier... buttons, got color in them... pick one color only, gray and a color if you want, or stick to gray... you want to take away the design elements here, and you spending time doing it... or at least, you know, decline going... "Oh, I don't like pink," or, "This blue's not the right blue"... you want to take all of that out of the equation... when you're designing wireframes... keep it simple, pick a boring font and a boring color... Another wireframe, slightly nicer... yeah, somebody spent some time on lots of kind of headings and stuff... and yeah, you can, there's no reason you can't take your... you know, wireframes further than what we do in this course... a really simple one, that's kind of removed all the text... another sketchy one, ooh, kind of sketchy... I think that's too close to Comic Sans for me... but I like the sketchy lines around the outside... so they're all Lo-Fi wireframes. Hi-Fi, it's in the same document, this one looks a lot prettier though... this one here, another Hi-Fi, a lot more time and effort going into this one... but for testing you only need the basics... so that's why we're doing wireframes... and you have to do it because that's the beginning of the course... we're going to learn lots about how to use Figma... building the wireframes before we start... building our super beautiful things a little bit later in the course... all right, let's actually get started with Figma and do something. So let's make our first design file... so it 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... might be a bit blurry here because it's got my email addresses as well... but click on your name, not Community, click here... and you should get to something resembling my screen. What we want to do is a new design file that only appeared the other day... so what I've normally done in the past... is I go to-- we're going to create drafts... and it's this little +, it's kind of next to it... so, either way we're making a new design file 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, now we need to introduce frames... frames of these guys here, this little icon here, third one in, click on it... and you can draw out any size frame, think of a frame as a page... so if we're drawing an app, we're going to draw something kind of like... oh, go back to this tool here, draw out something that looks like an app... you can have multiple frames, all sorts of different sizes... desktop one, tablet one, so frames have many uses... but at this early stage of the course... think of them as a page or an artboard, if you're from Adobe land... and what we need to do is delete them because those are random sizes... click anywhere in the inside of them, hit 'Del', 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... over here you'll have some pre-made sizes... you are going to be in the future, so you might be at iPhone 52... I'm going to use iPhone 8, it's a nice generic size for both Android and Apple... some of these big ones get a bit big and strange sized. Now the goal here is to pick a size that is generic... we're not going to design every different iPhone in different size... we're going to design something close enough to the general purpose phone... and our developer will build something that is a bit more responsive... and will adjust for the kind of small changes in different pixels. So pick a phone size that is quite generic... it's easiest just to Google, like most common phone size - and you will get something - or most common desktop size... and you'll get something in here, and pick it... if you're designing a watch, if you're doing kind of just regular old... old school paper, the wood stuff... there's all sorts of things in here, so yours will be different. Now I'm going to start with the phone, and I'm going to start with iPhone 8... even though it's really old, I don't know why it's still in here... hey, it is, but it's a good generic size... 375 pixels, I like... you can adjust afterwards, here's your frame... 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, 375667 to get the same dimensions... but hey, go with whatever is common for you right now. The other thing I tend to do is I try and, at the meeting figure out... what kind of phone my client has... because they're going to be potentially testing it on their phone... so I want to make sure, like if they've got some sort of phone... I might use that just so that the mock-up works really great on their phone. So we're going to end up with naming loads of these frames... because iPhone 8, 1, 2, 3, 4, 5, 6, 7, 8 is not going to help us... so we're going to double click on the word up here... or you can double click over here in your Layers panel... if you can't see the layers you might be on Assets... double click it, either one, and let's call this one... remember our Task Flow. we've got, we're going to have our Marketing page... we'll call it the Home page, Home page/Marketing page... we want another one, so you can go back to your 'Frame' tool... click on 'iPhone 8', again, you'll get another one... and just keep going the way through... we're not going to do huge amounts of shortcuts in this course... but we're going to have to learn a few. The first one's going to be space bar, so hold down 'space bar'... it's pretty common in lots of design programs, click, hold, and drag... and I'm going to name it in this one... so remember, our Task Flow is Marketing page, then Product Details... another shortcut that we use quite a lot... is you can just copy and paste these frames, so just click the name... 'Command C' on a Mac, or 'Ctrl C' on a PC, then 'V'... so 'Command V', we've got another one, 'Ctrl V' on a PC, up to you... I say no shortcuts and then I start with lots of shortcuts... let's put in our four pages, so our Task Flow said... we're going to do that, Product Details, what else is there? So Checkout... copy, paste, space bar, click and drag... we're going to do our Confirmation. So in the same document there's no reason why you can't... then go, actually, now I want my desktop version... so I'm going to click on 'Frame', I'm going to say 'Tablet'... and I'm going to say, we're going to be designing for the iPad Pro 12 there... because that's the one I own... and over here, landscape, portrait, space bar across, landscape, portrait... you can remove them, I'm going to click the name... drag the name, space bar around, drag the name around... you might say copy, paste, paste, and do the same thing... we're going to have Home page... Product Details, same with like the desktop versions... I'm just going fast here because we're going to delete them, you don't need to... maybe practice playing around with it... if you, see this one's iPad Pro at the moment... you can click on this frame and say that actually, now you are... a normal kind of standard desktop, that's a really good desktop size... really common and generic... now zooming in and out, 'Command' on a Mac, 'Ctrl' on a PC... and just hit the plus and minus keys. There's a million different ways of doing lots of things here in Figma... I'm going to give you one way that I think is probably the easiest at your level... or just the generic best way... if you do find another way, and you're horrified... I'm not using the hold option, hold 'Command' key down, and use scroll wheel... that's what I can do, to zoom in and out, you can do that, that's fine. What I want you to do is, for this course is... I'm going to select all of these, and I'm just using this tool... it defaults to it every time, so you don't really need to pick it that much... I'm just going to delete it, this is where I want you to be at the end of this... if you end up in the middle of nowhere, I zoomed in into the middle of nowhere... I'm going to zoom out, use my space bar, get right in the middle and then zoom in. So this is what I want you to get to, I want just... four boring old frames, and I want you to name them all... 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 untitled documents. So we're going to be really specific and actually name them... if we click off in the background here, you see, it appears up there... if you've got something selected it goes away... have nothing selected, click on no man's land... and you can click up here, and you can say, give it a name... and you've already got your brief, right? So mine is Scott, yours is going to be something different... but we're all going to call ours 'Ecom V1', so you pick your... the name of your company, and put Ecom V1, our eCommerce version one... so V1, just something, a, b, c, 1, 2, 3, it doesn't matter... as long as you're not like a Final person, Final 1, Final Revisited, Final-Final... if you're laughing, it's, you know what I'm talking about... I'm talking to you, give it some version numbers... there are some sweet features later on... for like versioning within the document, but that's later on. Another thing is, if you have got a bunch of untitled, you can-- let's go back to, I want to explore this little house... or go back to, yeah, go back to the little house... remember, make sure you're at your little name here, and not Community... and what you'll notice is, look, there he is down there... Ecom 1, if you've got lots of untitled already, I've planned 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 Figma now... and what I'm going to do over the next couple of videos... is I'm going to introduce things like Type in this one... and the next one's going to be like circles, and buttons, and colors... and just the stuff that we need to get going, we're not going to-- I'm just going to touch on them, and throughout the course... we'll get deeper and deeper into them rather than trying to like... click every button to do with Type in this video... we're going to get all the basics in... and when appropriate throughout the course, we'll dive a bit deeper into them... so let's get started. In this video we're going to look at Type, and the various quirks in Figma... all right, so let's start off with the Type tool, it's this letter T here... if you hover above stuff, can you see, it says text... and the shortcut is T, on my keyboard, so I can tap 'T' on my keyboard... I'm not going to go through all the shortcuts... but if there's one that you're using quite a lot, hover above it... and it should tell you what it is, here, C for adding a comment. All right, so we've got two kinds of text boxes, you click once... and you can type forever... that is this one here, it is called Auto Width box... because I know that off by heart... and the other type of box you're going to create is a click and drag box... so grab the Type tool, click and drag it out... instead of clicking once, click and drag it... we get this option here which is the fixed size box... and this one is, just means that when I get to the end, it will break... and we'll use both of these in this course, especially for 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... you'll see the shortcut for it there, undo, redo. So we're going to do two things, we're going to do Auto Width... so Type tool, click once, and just type in your brand name... so mine is Scott Headphones... when you finish you can just kind of like click out in this no man's land... and you can move it around, and stuff... grab the Type tool again, and let's do a box about this sort of size... and we're going to type in our marketing missions... so just type in something, like... "This is our marketing message"... you've got to be at this stage, with things-- it depends on who you're working for... it's best to keep everything very generic... try not to use language, you know, marketing speak here... because you might send off to testing, and instead of people testing the flow... they might end up testing, you know, coming back with spelling mistakes, or... it might be controversy about the marketing message... "That's not right, let's get it to copywriting." So at the moment we're just going to keep everything as simple as we can... to take out any sort of variables for our testing, just so that we're focused... now you can switch these later on... let's say that this one here, we want to actually make it that auto width... so we can click it here, same with this one, we can make it a fixed box... and the difference now is, watch this, when I start typing... kind of blows out of the box, and it's got a fixed width. So you can change them later on, I'm going to hit 'undo' couple of times... I'm using my shortcut, 'Command Z' on a Mac, 'Ctrl Z' on a PC... to get back to-- undo's aren't as consistent, as you would imagine from other programs... undos, can you see, the undo didn't put my rectangle back to the big size... it's undoing my Type, but it's not doing that big rectangle... this is pretty common throughout Figma... sometimes you can, like draw an arrow... change the arrow head, hit undo, and that leaves the arrowhead 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... 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... the basics over here, not going to cover them all because you know how to go... font size is 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 aligned, centered, you know all that sort of stuff. One thing I will show you is that, let's say things, if you hover above them... that little icon there is the line height, but you can click and drag them... any of the icons, so I'm going to undo that, undo again, there it goes... if you see the little icon, so over here, not draggable... over here, on any of these little icons, you can click, hold, and drag them. So I tend to do this quite a lot when I'm working... and you'll see me throughout the course... dragging line height, and tracking, letter spacing, and that sort of stuff... so that's one little trick, the other one I do quite a bit is... let's say this is not draggable, I wish it was... but if you click in here, and, see my little cursor flashing... if I hit the arrow key on my keyboard, just the plain old up, down, left, right use the up and the down, if you hold Shift it goes up in big chunks... in 10s, units of 10s... so that's true of like every box in here... if I want the width to be a bit wider, up and down... or hold Shift, go up in big chunks... I'm making the width of this text box bigger, undo... undo, undo, wrecking my boxes... but for the fonts I use it quite a bit, just kind of going up and down... I'm looking at my desktop, I'm not really looking over here... I'm just kind of checking, is this a good font size, not a good font size... Now when it comes to fonts here... there's a couple of things, we are picking font sizes now... 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 font size you're like, "Oh, that's too small"... you've got to try and pick a font size at 100%... you don't want to be trying to pick a font size when you zoom right out... because you can make it too big... and this, because this is going to be on a mobile device... it's a mobile website, it's not an app... but it's only going to be viewed through a mobile website at this kind of... you know, ratio, this height... it's best to be actually picking font sizes on your phone... I'll show you a little bit later in the course not too far... we can actually preview everything on a device... so don't be spending too much time on... deciding, is 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 nought font... a font that has zero character, I feel bad because this is Roboto... sorry, Roboto, you have zero character... and I don't want, you know, let's not go all Brush Script... or even if it's a beautiful font and it's exciting... we want really plain fonts here, because when we do do our testing... we want feedback, not on like, "Hey, I don't like that font"... or, "That's not communicating right," we don't want to... you know, bring that into the conversation, we want to keep it all separate... and just have it very, very simple... it'd be really common to use something like Roboto or Open Sans, let's have a look... Roboto, Open Sans, what's another one? Source Sans, Source... you can tell, it means, these guys are not the guys you invite to the party... they've got no, they've got little personality... they're clear and they are professional... and great for a wireframe, but they're no Brush Script... so whatever you decide, pick one... we're going to use Roboto for this, because it's... 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... it is, yeah, it is pretty common around the place, and it is free... you can use Arial or Calibri, or whatever you want to use... actually you're not allowed to use Arial or Calibri, it's too Microsoft-ey. All right, so we've picked a nought font... we're going to throw in a few different things for our mock-up... so we've got our-- for our logo as well... we're just going to keep it super simple... even if you have, if your company already has a brand... it's probably appropriate to throw it in, in black and white, just keep it simple... because the brand isn't being developed yet for this company... we're just going to keep it super simple. I'm going to play around with the fonts. Now this is where I break all my own rules... like, "Hey, don't pick a font that has character, stay away from..." and then you can't help yourself, you're like, "Man, that leading's really big"... if you want leading to go back to 0, just delete it and hit 'Enter'... and it goes back to Auto, and even then you're like, "Huh," I'm just going to... oh, wrong one, this one here, just tuck it over a little bit, I can't help myself... yeah, do as I say, don't do as I do... don't be playing around with letter spacing and stuff... and making it, your wireframe looks good, making your wireframe look really good... it's hard to stop that, you can do a little bit of design. So we need a couple of things, we're going to keep that... we're going to copy and paste, and use this again, wow, that went weird... 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 in Figma it goes back over the top... so there's two of them right over the top, so that'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 you hold down the 'Option' key, you see a little arrow... it's a little, that arrow there... on a 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, and you get a second one. Figma is really good at lining things up, can you see, oh, so handy... I've got a Buy Now and a Learn More. We are going to go centered for that one... I need another one up here, that's going to be my Product Shot... I think that's all the text we're going to do for this particular mock-up. All right, so we will go into a little bit more text detail later on... but see this little dotted line down here, this is where you get into the... it's pretty amazing how deep it does go, if you're a designer who loves a bit of-- loves a bit of ligatures and... all sorts of amazing things, you can see, alignment, not that exciting... decoration, underline, strike throughs, nothing. So there's a lot, bullet points are in here... you can start doing uppercase, lowercase, I won't cover them all... we will look at little bits throughout the course... but here's all the, if you really want to get into stylistic sets, man, it gets deep. So it is, most of it's just sitting here, in your kind of right menu... they call it the Right panel, sometimes they call it the Properties Inspector... this thing here, on the right, you can get most of it just here... this little dotted line gets you a bunch more. All right, we've actually made something, kind of, a bunch of boring text... let's get into the next video, make some, uh, boring rectangles and buttons... I'll see you in the next video. Hi everyone, this video we're going to draw some rectangles... and some circles, and some rounded corners... very exciting, let's jump in... all right, let's first of all put in our kind of Product Shot... we're going to put in a placeholder image for that... I'm going to use my Selection tool, just click and drag over a bunch of them... and then I can drag it down, so I've got a bit of space... let's grab the 'Rectangle' tool, it's one of those ones... that you'll probably learn the shortcut for... they're all hiding in here, see, rectangle, lines, all the kind of basic shapes. So 'R's for the Rectangle tool, which makes sense... so I'm going to click, hold, and drag it out, and you get the big gray box... and you'll notice, our text disappeared... so this brings us to layering... so over here, if you can't see it, you might be on Assets, go to 'Layers'... you'll see, there's my Home page frame... inside of that, all these different things, all the different texts we've added... now we've got a rectangle but it's on top... so we can do a couple things, right click, say 'Send to Back' please... and it's just that shortcut, you'll learn that one quite a bit as well... learn the different shortcuts, at your level... you might be ready for shortcuts, you might be not, you might be freaking out... so just right click and say, actually, 'Send to Back'... or I want you to practice, I've undone that... can you see here, I can drag this, kind of more like Photoshop, I'm holding it... holding it, holding it, dragging it, now it's at the bottom of all those guys... and I can see it, easy. I'm going to undo it, and show you just one more painful way... mainly because there is a ton of ways of doing everything in Figma... and I'm going to show you the way that I think makes most sense for your level... and what's really common and useful... but if you find a different way, and you're like... "Hey, why didn't he show us that way, that's heaps better"... if you find it , and you like it, you can do it... but let's say this one here, see this little Figma menu here... if you're on a Mac you've got this top bit along the top here... which is exactly the same as Edit... where is it? Arrange, you can see how... no, I don't want Arrange, Object, there it is there... you can see how much I use this menu, not very often. So you can, on a Mac, you'll see these on the top, and they will correspond, see... so File, there's File, Edit, there's edit... So often, I use these ones along the top here... but I know, if you're 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 it backwards... but you might find in this course that Dan's going up... to arrange up the top here, and you're like, "Hey, I don't have that"... there it is there, look, so I'm going to go, 'Object', 'Send to Back'... yeah, loads of ways of doing the same thing. Let's kind of get that in the middle there... you'll notice, Figma's just naturally wanting to go to the center of things... center of boxes, center of artboards... and just drag it around, you don't have to do a lot... there are the full-on Arrranges along the top here, kind of Arrange Center... Arrange to the left, but often just dragging it around does perfectly well. All right, let's do our buttons down the bottom here... so I'm going to zoom in, 'Command +', or 'Ctrl +' on a PC... and I'll hold my 'space bar' 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... what's the shortcut to go all the way to the back? It's that square bracket, '[', next to P on your keyboard... there it is, down, up, the other one, down, up, down. So I've got that button, I'm going to hold down 'Option' key, and drag another one... you might have to resize this... I want to move on to rounded corners... because when I say do not, whatever you do, don't design this thing... it's hard, because you're like... "I want rounded corners, you're not the boss of me, Dan"... I'm going to make some little design choices... so with the Rectangle selected... you might notice these little dots, if you don't see these little dots... if I zoom right out, minus, '-', 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... 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... and you're like, there you go, nice rounded corners. You can do it, I'm going to go zoom all the way out to 100%... the shortcut is, where is it... 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 heck is that guy?" have to look at my keyboard, luckily it's written on it, you think I'd know that. So 'Shift 0' on the top there, goes to 100%... because that's probably a better place to be designing rounded 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... using my arrow keys, remember, the sweet shortcut, up one... oh, how's it, look up another one... smashing it up, down... so I'm going to just put in some rounded corners. It's handy because you can get consistency, select this other one, go 5... click on this one, they're all going to have five rounded corners, look at that... because we are doing rounded corners, it's not appropriate right now... but if I click on this, zoom in enough so I can see this radius... you can actually hold down the 'Option' key on a Mac, 'Alt' key on a PC... and actually just click one of them, and go like that... undo it, because we don't need it right now... but you probably had that question... like, "Can I do one by itself?" You can... just hold down the 'Option' key on a Mac, 'Alt' key on a PC... and click it and drag it. Now before we go let's add our little circle down the bottom here... so the Circle tool, the ellipse is the O... I'm going to drag it out... another thing that I haven't quite covered yet... if you want it to be completely circular or square... you hold down the Shift key while you're dragging... so watch this, I'm going to go back to my Circle tool... and before I start dragging, hold down the 'Shift' key, drag it out... and you see, perfect circle, if I let go of it... ellipse or oval... back to holding Shift, I'm going to get about that. Now for the moment I'm going to put it down here, I'm going to grab my 'Type' tool... and click once, and I hit my '+'... and I'm going to pick an appropriate font size. Now with Type, I want to move it, just going to kind of select it... 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 size that I want... kind of weird for that... here we go. All right, that is going to be good enough for this video... circles, exciting rectangles, oh... one little bonus thing for circles, was going to do this later, but... look at this, see the circle, what's that thing do? You probably already dragged it, you ready? Absolutely useless, never used it... I can see, I'm like, "Yeah, that does a Bar graph"... I have not mocked up a Bar graph before... sorry, pie chart is what I want, so you can-- that's what that thing does... anyway, let's get on to the next video. 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"... and think about subscribing to the channel... got lots of other stuff like this, so yeah, subscribe away... also know that this is a short part of a longer course... like this is the first 20-ish videos... so if you're enjoying this and you want to go further... the full course is about 111 videos, about... it's exactly that... and what you're seeing on screen now... 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, otherwise continue on with this amazing free stuff... all right, carry on, enjoy the rest of the course. All right, I hope you're sitting down, this video, we're going to look at color... you ready, steady, boom, it's green and black... it's not very exciting, I know, I am 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, select on something... we're going to use this big rectangle here... that's the default color for Figma... or you just click on it, so Fill, click on it once... and you get this little guy, if you've never used a Color Picker before... there's little dots, where our color is, you can click them and drag them around... so at the moment you can only pick red, to change it, this little Hue slider here.. drag it along to the kind of zone that you want it to be... I'm going to pick some sort of greeny thing... and then move this around to get the... full saturation, no saturation, light, dark, somewhere in there. 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... 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, or just pick, like light blue... is the, probably the most common kind of wireframe color... it's the default in like XD and a few other ones... so we end up seeing this kind of like... tealy blue thing throughout, I'm going to pick a slightly greener version... you pick anything you like. Other things to know about color is, transparency down the bottom here... you can make things slightly transparent, which makes no sense unless... I bring this all the way to the front, 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 to change that there at 100%... it doesn't matter whether you do it here... you can see it there, 100%, or you just type it in here... and you say, I want it to be 50... or, 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 a 100, perfect... and if you are a bit more of a color nerd, then, you might be like me... 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 RGB-A, 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... and other colorways, CSS... you probably, if you're a developer you might be working this way... your RGB-A colors, you can type them in there... Hue, Saturation, and Luminance, I don't often use... I use this quite a bit, Hue, Saturation, Brightness... actually, do I do it in this one, probably not in this program very often... I do a lot in things, in 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, can you see, it just zooms in on things... so it's, you know, ours is pretty easy, because we can pick this big rectangle... sometimes you're trying to pick a teeny tiny bit of color from, like that bit... but it's going to be that weird light gray. So Eyedropper, I'm going to click on this one, same with this fella... you, Eyedropper, you... now to get to the Eyedropper, very often, I won't be going into... the color picker to do it, so I'm going to undo, let's get my grays back... so I select on it, there is the shortcut for, I, for Eyedropper... like I, not e-y-e, the letter I... it's a shortcut, so selected it, hit the 'Eyedropper', click on that... there's a lot of that going on... however you want to get that... this, all the same color for me, and be resilient... don't try and add a bunch of colors... keep it really, just black, grays, whites and, you know... a color just to sex it up a tiny bit. When you start adding color palettes to it you again start entering... different parts, you know, the conversation about... "Oh, is this the right color, is it the right brand color?"... just keep it generic, keep it gray, then nobody's going to complain. Last thing about colors is... down here, can you see, Document Colors... you're like, "Oh great, these are the colors that I've used already"... so this though gets mad big, and not very useful... it's fine for the moment, because you're like... "Okay, I want to go back to that gray that we had before"... there it is, there, something that's been used... or there's that green, is that the green? It's the same green... it gets, 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... the Document Colors will show everything that have been used in this document... so it gets a bit mad, 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, driving you mad, it's driving me mad... "You can't do that, Dan"... 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, needs to be bigger and this needs to be more in the center. One of the things I want to show you, another little shortcut, 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, 'Alt' 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... 'Option, key on a Mac, 'Alt' key on a 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 are like, "Why does he care so much?"... and then some of you be like, "Oh, my goodness, finally, fixed 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... Strokes around the outside, that's the line around the outside here... we'll look at Burger menus, which is just a group of lines... but we'll also look at the ends here, can you see... they've got nice little rounded lines... instead of this kind of like big flat end on the edge... we'll look at setting some of the defaults... that every time we draw something, like a rectangle, kind of set to the... rounded corners, and the Stroke, we like, and the color, we like... there's a few things we cover in this video, all right, let's jump in. So let's do our Stroke, so we're going to click on the rectangle... the Stroke is this one here, by default you get a Fill, you don't get a Stroke... to add a Stroke hit the little '+' button... and we've got a black Stroke on the outside... the Stroke width, we can drag... I'm going to put in just two for mine... do you have to have a Stroke around stuff? You don't, but we're learning stuff. The one thing you will get annoyed about later on, if you do have like a style... you've decided that this green, with that Stroke on the outside, and you're like... "I'm going to draw another one, on this Product 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... "So I'm going to go over here and I'm going to change it to 5"... and go slightly mad trying to get the Eyedropper tool... so what you can do is you can get to a point, you're like... "Actually, I like that... I like my rounded corners, like my green, I like my Stroke"... and I can go change it as the default... so let's go to our little 'Figma' icon here, and go to 'Edit'... and there's this one here, it says, Set Default Properties... nothing really happens, except that word appears... but now if I click off, grab my Rectangle tool, draw something out, look at that... I got a sweet green rectangle with black line around the outside... and yeah, rounded corners. So that is how you set the defaults, and I'm going to leave that... another thing you can do is... because these are already drawn in the past, I can't go like, I don't know... I want it to now look like this... so we don't have Style set up, which we'll do later in the course... what you can do is you can click on this guy and say... 'Edit, 'Copy his properties'... these are his properties over here... and we go copy them and we click on him... and it doesn't matter what color he was... if we go to Edit, Paste Properties, it comes along... we can click more than one, got the two rectangles... and let's go 'Edit', 'Paste Properties', there we go... so that's Stroke, let's look at a bit more... we got on a bit of a tangent there with setting the defaults... let's look at doing a little Burger menu at the top. so I'm going to zoom in, remember 'Command +' on Mac, 'Ctrl +' on PC... you can 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 ... and I'm going to use my Line tool to click, hold, and drag... that didn't work, I don't know why... click, hold, and drag... it will try and be straight, if it's kind of not straight enough for you... hold down the Shift key, Shift key will do something with the Line tool... remember, it did with the Circle tool, it made a perfect circle... with the Line tool, it just makes it go in kind of some, 45°, 90°, and straight. So I want something kind of that long... don't worry about how long it is just yet, we'll make it... then we'll go out to 100%, and kind of make it the right size... so we're going to grab this guy, we're going to have three of them... so we're going to either copy and paste... remember, copy and paste has that weird option where it's... well, it's not weird, but it's over the top of it... so remember, I tend to just use the Selection tool... hold down my 'Option' key on a Mac, 'Alt' key on a PC... and just drag another version out... and that really wants to go underneath it, which is great... I'm going to introduce one more shortcut, if you're like... "If this guy introduces another shortcut here I'm going to scream"... close your eyes, or your ears... I'm going to introduce you to the command D or Ctrl D... really common in Figma, it just means, do it again... duplicate, do it again, whatever you want to call it. So command D will just do the last thing I did... so I can go Command D, D, D... it's great when you're doing like lists and images, and you've got four of them... you just want to kind of like... make a new one, it doesn't matter what you're doing it with... so let's say I want some Type and I'm making a list... drag it out, holding my 'Option' key on a Mac, 'Alt' key on a PC... Command D, D, D, D, or Ctrl D, D, D, D on a PC... you can open your ears now, people that are screaming about my shortcuts. So with these lines here, you're like, "How big should the Nav be?" The best way is to copy an existing template... I'll show you kind of some of the templates that Figma's got... but if you are building stuff on your own, especially things like icons... it's best to be, remember, at Shift 0... or at 100%, up here... so that you've got a good sense of this size... because if you have them like this they're going to be very hard to click... or if they're going to be big jumbo ones... 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... 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... 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 Stroke-ey goodness, so I'm going to zoom in on it... because I want the little bubble ends... now, over here, my Stroke, the Stroke weight we've talked about... so start and end point, they do two things, click on the first one... you can put an arrow at the end, that's great, if I hit undo it doesn't go away... maybe this is just on my machine, I don't know why, undo, undo... that's one of those quirks... I'll leave it in this course because it's a weird quirk... is it just on my computer? No, I think it's universal, it's probably going to be gone in the future... it's one of those updates where it's on somebody's-- some developer's bug fix list, it's not super important... because I can go back to None... but my undo doesn't turn those off... we've gone off at a tangent, let's stay on point... because I want to show you these, there's three options. So your Stroke at the moment just finishes right at the end, can you see there? the second one, I'm going to go, this Stroke has a rounded end... and that is the pretty one that I want... so it's, the Stroke still ends there but there's this like... little round, that's a butt cap, that is a round cap... and this is going to be a square cap... see this one here, look at the difference between this top one and the bottom one... the Stroke is the same size... underneath, but this has got like a big square cap on the end... this has got an unfortunately named Butt cap... and that has got a nice round cap... that's what I want, I want all you guys... you'll see mixed quite a lot, if you've selected stuff... and it doesn't know what to say... instead of going, "Question mark, I'm confused," it says mixed... which means one of them... they're all sorts of different things, I'm going to say, you're all, round... which only partially worked, oh yeah, when I do the end as well... there we go. All right, so what have we learned? There are some quirks to Figma, like they undo with arrows... we've learned about Strokes, actually, the last thing I want to do is... with images, we've written, you know, Product Shot... but it's actually more common to just draw a big cross through the middle... there's a placeholder for an image... so, I'll just grab my Line tool... and I'm going to go, from this corner over to here... and this corner... you got to go back to the tool every time... so it'd be really common to have that as, like a... that's kind of a visual cue, that, there's an image to come here... but it's not available right now. The other thing you might do, just while we're on the topic... is instead of those lines I'm going 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. So it's in your Exercise Files... so how do you bring in an image, or an icon? You can go up, there's couple of ways, there's this way here... so it's weird, under your Rectangle tool... is where you bring in images as well, so I can place an image... there's the shortcut, the other way is, under Figma... you can go to Edit... no, 'File', 'Place Image', use the shortcut quite a bit... but I'm going to bring in an image... under your 'Exercise Files', under 'Icons'... bring in the one that says 'Icon Image'... and click 'Open'... and within-- with this... if you bring in an image, you click once it'll come through... at 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... hold down the 'Shift' key, if you want to drag it out... remember, same thing with like the lines making them go straight... and the rectangle being perfectly square... that would be very common as well for placeholder image. We are going to not do that for the moment, I don't mind... I don't really care... lines, actually no, keep the lines there... because we're going to look at something in the next video... that is kind of reliant on having a couple of diagonal lines there... all right, that is Strokes 101, let's get into the next video. 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... "That's, I imagine, how I want it"... but if you want to like say break the edge and distort this... you double-- well, there's the official way of getting in there... so I've got it selected, look, there's the official way. 'Edit Object'... click on that, and nothing really happens... except this top menu changes, watch it again... click on that, you get these extra features... we'll go over them in more detail when we start drawing our own icons... but I want to, yeah, I want to get you escaped now early in the course. So the official way to get into it, click that... and what you can do is you can grab a corner... and drag it, and you're like, "Yay, destroyed it"... or, you know, manipulated it... you can also click the center, and delete the center of your rectangle... click on this edge here... delete the top part. So that's what object editing mode is, it kind of breaks it from that kind of... you know, that rectangle, that does only rectangle stuff... I show you here because me, 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, 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. Let's look at Scaling versus the Selection tool... because you're going to need both of them... and they're a bit quirky from other programs that I've used, and yeah... caught me out at the beginning, so let's do it together. So with my Selection tool I'm just going to click on the rectangle... I'm not in Object Editing mode, remember... and all I want to do is, I've got this tool here, the default tool... and I can click the edge, and I can drag it around... that's kind of how you imagined it... and that's most of the time what you want to do... what you'll notice is is that the Stroke stays at 2 the whole time... and if I do something else, let's say that I select... both the text and the rectangle, and I'm like, I want it to be bigger... and I drag it out, that's weird, maybe if I hold Shift... hold Shift, still doesn't work, that's where the Scale tool comes in. So there's times where you actually want to just make everything bigger... Stroke, Type, everything, and it's this tool here... hiding underneath the Selection tool, click, hold, drag... don't hold and drag, just click and hold, and there it is there, the Scale tool... click on that, I've got both of these selected... and I can just click and drag this, the corner there... and if I hold nothing down, it does it kind of proportionately... scales it up, both the Stroke, can you see, the Stroke got bigger... and the font and the rectangle, so there's times where 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... in 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 have we got? These two.. select them both, I'm going to right click it... I'm going to say, you are group, 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're going 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, I go... again, I'm trying not to do too many shortcuts... just the ones that are really helpful, and I'm going to... I'm going to beat them into you throughout this course... so you're going to go to the end, and you'd 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 K, 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, Rectangle tool does what you imagine... like it's not rocket science... ready for this video to be rocket science-ey... I introduced it earlier in the course because... it was probably the hardest thing I had to get used to coming to Figma... so I'll introduce a little bit now and a little bit later on... a little bit more, and 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... "Oh, I kinda get it, but I don't kind of get it," don't worry... I'm introducing it early so that we can revisit it a few times... all right, first let's understand groups... let's draw a bunch of shapes up here, so we're going to grab... we'll do Rectangle tool... we'll do three shapes, let's look at the Polygon tool... get them roughly, don't need to be the right size, they can be three circles... I'm doing these because, I don't know, it looks good. So make three of something, and what you'll see here on this Product Details frame... is my ellipse, my polygon, and my rectangle, I can select them all... and I can right click them, and group them... or the really common, 'Command G' on a Mac, 'Ctrl G on a PC'... and they're grouped, you're like, "Great." What happens? Over here, can you see, the icon has changed... it's called Group 2, where is it, group? It must be a group somewhere else... I made a group earlier, didn't I, there it is, the red button... so Group 2, I can rename, so this could be my Icons, great... this little icon here is, not important, but you'll get used to these shapes... so that there, the dotted line is a group... so I can look around, look, there's another group... I can look inside the group of my layers, see this little turned down arrow here... so yeah, you can see stuff inside of it, you can say... "All right, I want to move," like grouping is useful because... we know what grouping is, you can grab them, and they move together... but I can go into them individually by either clicking them here... in the Layers panel, and going, "This needs to be 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, we can-- you know, work on it, double click it to come out... and it's still a nice helpful group. You can ungroup by right clicking it and going to Ungroup... and then it kind of comes out of that dotted group... and it's back to being single units... I'm going to go back, 'Command G', or 'Ctrl G' on a PC' and group it. So what's the difference? Let's make two versions, so I'm going to duplicate this fella... and I'm going to right click it and say 'Ungroup'... so I got this Grouped 1, you can see in here, it's called Grouped 2... these guys here are just hanging out by themselves in this frame... so what we're going to do is, very similar, I'm going to select them all.. and instead of right clicking and saying Group, we're going to Frame Selection... and it's basically exactly the same as a group... except the icon'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's different, you get this like little, what do you call it? Pound symbol, hash symbol, grid, whatever it is... but they do a lot of the same 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?" The difference is, that frame can survive on his own... the group, if I go into this group, say, "You are gone, and you are gone"... remember, double clicking it to go inside the group... the group disappears, by group-- I undo that, because I want them back... the frame on the other hand, if I go in, delete this guy, this one... you're left with a frame, which can be weird when you're new... you're like, "What are these empty frames everywhere?"... because the frame can exist without the group, "Why is this useful, Dan?" It is useful because - I'm undoing. - is because I can do things like, let's say I want to cut that off... I can drag my frame in, can you see, it's operating differently... if I drag the edge of this, look what happens, squidgy... if I drag the edge of this in I can do things like this, clip the content... so I can use the frame as kind of like a mask... to kind of hide things, which is one thing... actually let me show you quickly. So this is why that's useful, you created a nice big list... you can grab your frame, make it a bit smaller... I know we're jumping ahead in the course... but I guess I want to introduce frames couple of times, so that's why it's good... you got this list, and you can set this to scroll... so that it kind of clips it off, same with this... you've got the stuff hanging over the edges here... I can say, where are you, frame, you can be over there... then I can say, Clip Contents... so I can use a scroll, so people can... scroll left and right, clip off the edges... there's one of the things, let's jump back. All right, so Clip Contents is one of the reasons... there are other ones, and the reason I show it to you here is that... you're going to download somebody's free UI templates... and you're going to be like... "Why is everything framed, it's all a bit weird, I don't understand"... that was my position anyway. So the reason people do do it, they get to an intermediate level... or an advanced level in Figma... and they just stop using groups, never, because Figma... sorry, frames is just like groups but with bonus extra features... and clipping contents is one of them... let's look at one of the other main ones... just to introduce it now, and we'll work on it at a bit more in-depth later on. So what we can do is, I'm going to actually ungroup this... weird thing about a frame is that you group it... so you group this top one, and then you ungroup it... your frame, you frame it, then you ungroup it, does that make sense? Ungroup works for both of these... so I'm going to ungroup it, and you'll notice these guys just come out... I'm going to put these kind of over here... I'm going to grab my name here... and I'm going to select all of these and turn them into a frame, not a group... because I want to see the bonus... the bonus is, watch this, I can click on... double click to go inside our kind of Object Editing mode... I'm inside my frame... and I'm going to say, you stick to the top left of this frame, that it's in... this frame is the thing around the outside... these guys though, I'm going to click on you... and I'm going to say, "Actually, you are going to go to the top, top right"... same with you, you can go to the top right... same with you, top right, you're like, "What does that do?" Watch this, if I go now and-- I'm going to make a copy of it... and watch this, when I drag it, hey, sticks to the top right of the frame... groups can't do that, they call them constraints... we'll do the Property later on, but when it gets to things like... "Okay, I need another version, it needs to be tablet"... so I'm going to click on my Frame tool, I'm going to say... "Oh, it's going to be a Tablet"... Mini, it's going to be in portrait, I'm going to stick it over here... I'm starting to design... so instead of trying to drag it all out and try and make it all line up... you can click on this guy and go, you go over here... and I can get in the top and I can drag this over... and I can stick it to that side, can you see the perk? It gets more and more in-depth when you start kind of stacking things up... and it means, when you start adding text, things start reflowing... it gets, not complicated, gets more awesome, that's what it does... but that awesomeness comes at a kind of confusing stage, because... remember at the beginning of this course we dragged out frames... remember the frame, that was our mobile phone... we just did it now again, with the tablet. So frames get used for the big thing around the outside... but also the little things inside of it... these little nested frames, so I've got a frame inside of a frame, weird... if I bring in say, remember that icon we brought in earlier... you probably didn't notice, but if I go to our Place Image... and I bring in the same one, or a different one... watch what happens, if I drag this out... you'll notice that actually, can you see, I brought it in as a frame... it's a frame, inside of it is our little vector thing, but it's inside of a frame. So that's why we can't leave it to the end of the course... because there'll be frames everywhere, and you're like-- in this case it doesn't matter, we're not using any sort of this... goodness with constraints and variants, and all sorts of cool stuff... we're going to do later on, it's just kind of like a group... that's all we're going to use it for, for this guy... but know that later on there's some fancy stuff we can do. "So what you're trying to tell me, Dan, is group's bad?" Nope, groups are great, and they work just fine... and they just don't have all the extra fancy features... so that is my whole point of this video... we're going to use frames from now on instead of groups... because they have features that we're going to learn on, learn later on... and they just appear lots in Figma, and I wondered why. The weird thing is when you've got frames inside of another frame... weird, why have you got frames inside of frames? The one last thing is that, this frame... why does this one have a name... how did you get that name there, and this one doesn't have a name? Basically, if a frame is not nested it has a name... what I mean by that is, see this frame here, got it selected... if I drag them out over here, watch, his name appears... inside, his name goes away... so that's kind of why you might sometimes see a frame name... and sometimes the frame is just used as like a group... and it's inside of another frame... "Wow, what a confusing video, Dan." Anyway, let's-- hope it got us closer to understanding frames versus groups... what we don't need is we don't need these particular examples that we made... we're going to create some specific icons in a little bit... but yeah, we're moving towards understanding frames versus groups... so delete those, and I will see you in the next video. Hi everyone, it is class project time... I want you to create something like this... you might be following along so far, and you might be kind of... at similar sort of stage here, if you're not, I want you to build... get all your frames in, I want you to build this first page, plus these other three... basically just other kind of versions of this first page... rectangles, lines, some text... I want you to keep it reasonably similar to my layout... even if you're like, even if you disagree and you're like... "No, they shouldn't be there"... keep it kinda similar, because... I want you to be able to follow along with your example throughout this course... and these kind of units help me... show you all the different features in Figma, so keep it close to that. The actual requirements for the different class projects... are in your Exercise Files, you'll see something in there called Class Projects... open that up, and it will look something like this... we've done this first one, so ignore that now, if you haven't... this website URL will change, kind of building it at the moment... but remember, you're going to go to that website... and you're going to create your own brief and persona. So we've done that one already, potentially... then we're up to here, so use the skills you've used so far... it should look something like that... if you're looking for a larger version of it... you should be able to zoom in, in this PDF... but if you can't, in your Exercise Files there is the PNG wireframe example... just a nice big version of it, you can look at... there is a Figma file in there as well... remember, if you can't remember how to do the Figma file stuff... maybe go 'Home', go to your 'Drafts', and hit that... and you can import that Figma file, up to you. All right, what else needs to be done? Here are the requirements, so four pages... those are the four pages, from our Task Flow... pick your own color, it doesn't have to be green, and your own font... you lose points if you use Papyrus, Trajan, Brush Script, or Comic Sans... all terrible fonts, pick a plain simple font that I don't hate... it's part of the requirements, I'm looking at you, Papyrus... and then what I want you to do is just take a screenshot... I'll show you how to export frames and stuff properly later on... but it's actually just easier at the moment... to go into Figma and open up your project, and just take a screenshot... on a Mac it's 'Command Shift 4', you can just drag a box around it... and on your desktop you'll probably have a screenshot... on a PC it's slightly different, you use 'Print Screen', you paste it somewhere... I'm not big on PC... exactly how to do it for the different versions... so just Google, "how to take a screenshot"... you're allowed to take a photo with your phone, either way, do that... and then upload it to either the Projects or Assignments... it depends on the website you're on... you'll have a look, there'll be a way to kind of submit it... either as an assignment or a discussion, or a project... once you've done that, I will see you in the next video... is that big work? Oh no, it doesn't take too long... but it's good, practice our tools, our techniques... and we're going to get better together, but we need our wireframe... all right, I'll see you in the next video. 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... so what you're looking for is, let's say I want the Shopping Cart icon... 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 took ages to load. Anyway, so there's a couple of things on most of the sites... the main thing is all to do with how free it is... because it's free, and then there's properly free, so free, or licenses... I'm going to use the one that's for commercial use... and this one here requires you though to use it for commercially... but you have to link back to them, which is totally fine... you might find good free stuff in there. This one here requires commercial use, but doesn't require a back link... so I don't actually have to acknowledge the people that made it. So in here, pick anything, I say pick anything... I'm going to find a Shopping Cart, that looks like a shopping cart... 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 a SVG version... let's look at both of them, PNG is 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. So I'm going to download both of them, stick them on my desktop... and there's SVG... let's compare both of them, and how Figma deals with both of them. So 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... so let's bring in a file, I'm going to do this way, Place Image... and let's bring in both of them, you can bring in more than one image at a time... by holding Shift and clicking both of them, let's click open... can you see, I got like a little 2 there... you can even see my little icon, look, a little trolley. So I'm going to click, hold Shift, so that when I drag them out... they are not going all wonky like that, so hold Shift on your keyboard... that's the reason we have SVG rather than a PNG... I acknowledge that I downloaded a very small version... in here, you can download like the really big version... let's download that, and it will look fine. So let's bring in another one, 'Command Shift K'... we've got this other PNG, the difference is, can you see that, size of that one... so I can get a good quality PNG but my SVG is 1 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 I can't use you, 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." SVG is into Figma... what they do is, we kind of looked at this earlier... can you see, they come in as our frame... 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... come out of that frame and hit Paste, I didn't actually come out of that frame... you can drag it out of the frame, so just sitting there in 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 their original frame... just so I've got the vector sitting lying around, happy days... now it's transparent, and it is colored... 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... but obviously SVG is scalable, that's what the S in SVG is, woohoo... and yeah, we can go into Object Editing mode, which you know about already... if you're like, "I love this, but I really want a..." double click... start going in, I really want... a spiky handle, Dan... 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 free stuff, is part of the Figma community... so if you go back to your like little house along the top here... there'll be an option... somewhere around here, called Figma Community, it's kind of new... it's better on mine, 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. So in here you can do things like icons... 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, so let's have a look... let's have a look at the Fig Pick... 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, 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... 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... 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, 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... yours might do the same, so I'll leave it in there... I was like, "Have I done something wrong?," it eventually loaded. 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... you can right click it and delete it... but everything you open or duplicate in Figma, ends in this like... it's part of your world now, that's the kind of benefit I guess... of working in the Cloud, which Figma does... it's not saved in your hard drive, it's part of your Cloud... kind of online login stuff. It also means that after a little while you're going to have... a ton of things open in here... and it's going to be hard to know which is yours... so we'll look at searching and finding the files you want later on... and you might be really tidy... and actually go delete the ones you don't want anymore. So we've got a couple of files open, we've got the one we're working on... plus our little unicorns... unicorns? Is that 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... 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 the weird icon, ends up in our Assets folder... 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... we're going to say, detach the instance... you can see, 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... like get it out of that frame, drag it out... so it's kind of just hanging out by himself, where 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... 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 lock-ups and cards, and icons... we're going to be used to copying and pasting them... and sticking into our document, and seeing what happens... they come through as components, sometimes... sometimes there's frames, sometimes they're just groups, 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. All right, let's bring in some icons, and get them all tidied up... so that we can use them... so we're going to use the long way still for the moment... using a little arrow there, Place Image... I want 1, 2, and 3, so I want Icon Share, User, and Home... I'm just holding down the 'Command' key on a Mac... and just clicking them individually... on a PC it's 'Ctrl', I'm going to open them up... now what's the key I hold down to make sure they don't go all squiggly? 'Shift', that's it. So I'm going to get mine to a size, don't worry about the size at the moment... drag these in. Now what will end up happening is... the size here will depend on... the last kind of Stroke size that you're working with... so sometimes you might drag in, and they might be thick, like this... or might be super thin... one thing we need to do though is get them all to be very similar... I've got them kind of a similar-ish sort of size... what I want to do though is, scale them down... and you've got to decide here whether you're just going to use... the normal Selection tool, or our fancy Scale tool... it'll depend on what you want to do. So in my case, you see, the Strokes are kind of staying at that 2 point... so it's kind of getting, if I get them down to about there, they're kind of close... or you can use the Scale tool and just scale them down, it will 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 got to decide whether-- I'm twirling all these up, these are frames... just like groups with stuff in them... if you're happy to work like this now, we'll just leave them there... you can pull these out and delete the frames... what I'm going to do is leave them, so my Share icon in here, with that selected... you can see in here, I need to go inside of it... because I want to click on this thing, came in with a group inside of it... but with it selected, actually, I can go in here, and I can see the Stroke color... in my case I don't need to change it because it's matching what else I've got... but the Stroke width is about 2, that's what I used here... and I want to try and match these all. So same with this one, sometimes, so I can't see the Stroke yet... so I need to go inside the frame and click on both of these... holding Shift to select both of them... and it's scaled down to like 0.5, you can see there, so I'm going to type in "2"... this one here, this is not a terrible thing... but the way this has been drawn is that, it's not a nice little Stroke... it's actually a Fill, if I double click it and go to Editing mode... it's not like lines that are on top of each other... for an Illustrator person, from way back, you'll know what I'm talking about... if you're not, and kind of new to this vector world... you will just find some of them that are made of Strokes... and this one is actually made up of a Fill, it makes a little bit harder to adjust... so for this one to make it thinner... I literally have to go and do stuff like this... which is no fun at all, so you might just download a different one... or just draw one, we're going to draw... you could easily redraw that with the Line tool, so I'm going to undo... double click to get out... and scale wise, probably need to come down a little bit... and this is where I don't want to be using my scale. If I use scale now, and scale it down to the right size... it might look like this one here... but if I go inside of it, double click, you can see, it's no longer 2, it's 1.8... that can catch you out, probably, nobody's going to notice... but I notice, you'll notice... 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 2-point Stroke... you know what I mean? Oh, broke that... I'm going to leave it, broken forever, I can't live with it, wait there... all right, I'm back. So what we're going to do now is... get those three in, get them kind of looking the same... I feel like this one maybe is not looking exactly the same... "Don't spend too long in there, Dan," this is just a wireframe... what I want to do is I want to show you another... not trick, but a useful thing in Figma... is, I'm going to delete these... because what I want to do is have that on all of them... so what I'm going to do is copy it... so from this first one, click on the name of Product Details, and just hit 'paste'... so I'm using 'Ctrl C', and 'V' on a Mac, you'll use-- oh, that's a PC, so PC uses Ctrl C and V... and a Mac uses Command C and V... so it is Command V on all of these, and gets it back... exactly where it got it off that first frame, which is cool. So do that, I'm not going to spend too long getting all the spacing perfect on this... because we're going to have to go and test this on a phone, because, like... are they too big on a phone?, probably, are they far enough apart? Probably not... my big old fat fingers is going to end up touching more than one icon... so we'll do that when we actually test on our phone... but we've found our icons, we've got them in there... we've got them looking kind of the same... that'll be good for now, let's get into the next video. Hi everyone, in this video we're going to look at some of the secret source... what makes Figma amazing, and it is the plugins... that are run in parallel with Figma... so plugins are made by other people, not Figma... and basically, you install them... 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 this little drop down... next to the Figma icon, you can go to Plugins... we're going to browse them in the Community... 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, and remember, under Community... we were looking at icons a second ago, there's another option here, says Plugins.. so this is kind of new, and always getting developed... what I'd like you to do is, plugins are just so, an amazing part of Figma... that just means, like take a break, take, you know, take five minutes... and just have a read through all the amazing plugins... 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... let's 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 plugin 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, first one everybody installs... we'll do it later in the course... but you can see, 630,000 other UX designers decide it was useful... so there must be some big in here. We're going to use Iconify... if this one is not in here, or hasn't been updated for the last three years... you'll find another version that will work similar... this video is not actually how to use Iconify... 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... and let's go and have a look now how to actually operate a plugin... we'll do a few through this course, so let's have a look. So you have to turn the plugin on, you can only have one running at a time... so you've got to say I want a plugin 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... let's look at another house... remember that house was broken, 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 won't, 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... obviously, there's other options in here... you can search icons, and there's lots of tagging and stuff going on. So plugins all work a similar sort of way... there are 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 him... 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 'Del', and everything inside of it... and then just make sure your layers are kept nice and tidy... what the hang is that? what are you doing down there? I have no idea how I got that one. Anyway keep it clean, delete that guy too. All right, that is, yeah, a really simple plugin... plugins are amazing in Figma, 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... we are going to be doing something around icons... so if you haven't already, I want you to go and make sure that... you add the three icons along the top that we've kind of done in the class... and then on your own, I want you to add this section down the bottom here... on the Confirmation page, just, 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, I just bought these great headphones, check them out here, there's a link"... and when you are doing this you're going to kind of start dabbling with our persona... so in my case, Sarah here, she's in her late 20s... so I feel like I can be a little bit, not as explicit with my language... because if somebody else maybe, is a little less technologically savvy... born in a different decade... they might need a bit more explicit, "Click this button to... upload to your social media, and to share with your friends... what you have purchased," it might have to be a bit more deliberate. So my persona, she's in her 20s... so she gets the gag or the joke, or the inference, without being too explicit... also she, these are the social media icons that I feel... I'm not going to put them all there don't you hate sites? They just have like ... here's the 40 different social media platforms that you might share on it... I've excluded a bunch, because I feel like her age group-- what else? Like she's working for herself, so probably has a LinkedIn profile... and it's not going to be corporate... so she's probably going to be okay sharing her new headphones purchase... and everyone's using Facebook still... so, like use these sorts of, you know, what should I have here? Go back to persona, decide what it's going to be in there, it might be wrong, like... I might have got these totally wrong, my client's going to come back and go... "Why isn't there Reddit there?"... or some other thing that's new, and TikTok-ey thing... but this is something that I feel like it's worth testing. We might add more to these later on... and hopefully in our user testing, there will be some feedback like... "Hey, where is that thing that I don't even know about, why isn't that there? All right, so that is it, so the top Navs... I want you to find the icons from... I don't want you to draw them, I want you to find existing ones... from either a free site, just to practice the SVG stuff... and/or plugin, install your plugin, get it working, see if 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 plugins, which I think you should... get it installed, have a go with it... doesn't have to be Iconify, something else... and sometimes, when you are dragging things from plugins... let's say, it depends on the size of them, let's say I drag in this Facebook one... sometimes you're like, giant F... and it just makes everything really tough, in terms of your layers, when you're new. So I'm going to undo that, often, it can be-- undo... it's just easier just to find an empty part on your Artboard... and just drag it off there... because then they're on their own, in their own little kind of frame... and I can drag off a bunch of these... where are they, and what else we got? I can drag up a bunch of these, and I can scale them down... and get them appropriate, and then bring them in... rather than trying to push them around in there... and they ended up inside of groups or frames... that they shouldn't be, that's my advice. When you're finished with the plugin close it down, you guys are gone... and yeah, I'll see you in the next video. Hiya, in this video we're going to look at pages, that sounds boring... it is, and it isn't... over here, at the moment we're going to end up creating a page... we've currently got a Page 1, we're going to rename it "Mobile'... we're going to create a second page... that's going to have our desktop frames on it... and then we're going to create another page that has our brief and our persona... and also our taskflow, all in one kind of nice Figma document... these pages are going to be nice and separated out... so let's jump in and learn how to make them. All right, so to start off, you've already got a Page 1, it's lurking there... it's kind of probably closed up, you're on your Layers panel... you've got Page 1, there it is... you can get quite far in Figma, and never have more than Page 1... on Page 1 is all of the stuff we've made so far, we've got-- I'm going to use these little chevrons here to close them down... just to make everything look tidier... so we've got our Confirmation page, Checkout, Product Details... you can rearrange these because that doesn't make sense, does it? Confirmation at the end, huh, I don't know, ah, that feels better anyway. So we've got our frames, which you could argue are pages... they're more like Artboards, but we call them frames... because that's what Figma calls them... pages are a way of separating this kind of Artboard here... so Page 1, you can have more than one page, a Page 2, and basically... you get to here, and you go... "Okay, I'm going to start making something different"... why would you have two pages? In our case what we might do, Page 1 might be... I'm going to double click it and call it "Mobile"... this other one is going to be "Desktop", so I want you to do that... because we will design a mobile version and a desktop version in this course... there should be a tablet version as well, we're not going to design it because... we're not, it's just a small bit in between... so we've got our Mobile and Desktop... let me show you some other examples of it... well, you've got a Desktop, let's, before we go, go to our Frame tool... now your Frame tool, again, I'm not trying to get too many shortcuts... but the F key is pretty common one... over here I'm going to say, I want Desktop... and depending on when in the future you're watching this... this is a really good generic size... 1440 x 1024... we're going to have one, two, three, four of these, so I'm going to drag one out... don't do that, go to your Move tool, grab the name... hold down the 'Option' key on a Mac, 'Alt' on a PC... hold Shift as well, if it's not locking into place, totally is... then command D or Ctrl D couple of times, I love that, Command D, so satisfying. So I've got three of them, go through, I'll speed this up. I'm going to name them all exactly like my mobile one... I totally can't remember, so I'm going to flick back and forth, please, hold... yep, that was a painful copy and paste... so that's a good use of pages... there's no reason why you can't just have them underneath here, but you will see... before you get too far, they end up looking like this, let's have a look... that's my Mobile one, later in this course, just stuff ends up everywhere... and it's not pretty... but it's truthful or honest, it's an honest file, that's what that is. So other use cases is... we're going to do in this version as well, is often, you'll put another page... with things like your Task Flow and persona, we'll do that in a second... also, let's have a look, I'll show you now... because you'll have opened up some of the stuff from the Community... remember, we looked at these un icons, uni icons, whatever they are... over here, 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... and that's how I found it, these are different pages within this one... this one here is just acting as a cover or a thumbnail... and there's where all the good stuff is... it gets even more hardcore, let's look at something a bit more big. I'm at Home, I'm over here at Community... and I'm in Explore, I'm going to find the, find anyone, let's try this one... so Microsoft Teams is liable to be massive, let's open it up... it's going to be big, if you've got a slow internet connection, and it's a big kit... or a big Figma file, it might take a long time to download... mine's, I've got kind of rural broadband, it goes okay, it's on a mobile device... 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... and you'll notice there's a cover page, great, and general information... they've created a page with nothing on it, just to make it easy over here... can you see, this one doesn't do anything, this one here is where we get started... a bit of documentation on it, resources, what else? Things to download. So you can see, there's quite a complex one, the Change Log... let's have a look at-- I bet you, there's more here... look how many pages this one has, loads, let's pick a bit of them... the layouts, the avatars, the icons... so, at the end of this course we're not going to be creating a full-- this, we call it a design system, it's called a UI kit... UI kit, understating what this thing does, this is a system... for how to think about everything about Microsoft Teams... so somebody's made this, somebody at Microsoft... and they've separated out, so that, me as a designer... if I'm a junior designer, I come in here, and I go... "All right, I've got to make this pop-up window that communicates"... that, "I've lost all your files, and I'm really sorry"... you can go through here, find, read the guidelines... understand fonts... how they're communicating with different fonts on different platforms... spacing, what colors they are allowed to use... what the colors communicate, so this is a full design system... later in the course we'll make a teeny tiny design system... normally called like a Style Guide, but this is, it's a pretty big use case... but I guess I wanted to do just two pages... because you're going to have to file through these... I'm going to make mine up again... every page, see in this case, has a bunch of frames in it... inside these frames, bunch of other frames, Artboards, and all sorts of good stuff... so that's what pages are for. Other use cases might be that, you have like... say you've got Mobile, there might be option one... might have a specific kind of Task Flow, and you do another Mobile, option 2... with a different Task Flow, or different colors, or... a different look and feel, concept one, concept two, you get the idea... you can use pages to separate it out... I'm going to get rid of that. What I want you to do though is have a third page... and this one's going to be our brief and Task Flow... so it's great to have all this stuff together... so it's going to be at the top... and in here I want you to bring in the screenshot or the JPEG... or however you got your persona earlier on in the course ... I got mine here, so I'm going to copy and paste this... yours will be slightly different, I'm kind of building this functionality for you... but earlier in the course I would have shown you how to create your own Persona... and I want you to grab it, the screenshot or the JPEG that you've downloaded... and put it onto your brief and Task Flow, so we'll put it in here... yours is probably just a big JPEG. I'm not going to resize mine, and I'm going to bring in that Task Flow... if you remember from earlier, if you've opened up the Task Flow... it should be under your little Home button, under your Name... and where is that Task Flow? There it is there, Task Flow... if you haven't opened it, remember, go back there, go to your Name... go to Drafts, go to Import... and the Task Flow is in your Exercise Files, there it is there, open that up... and I just want you to copy and paste it in here. It's just handy to have all your documents, copy, close it down... go back to our initial, the one we're working on together... I'm going to 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, cool huh... 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. It's exciting time, 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'... and what we're going to do is, have the 'Home' page selected... we'll start with this one... and what you'll notice is this little dot, this little dot's important... we're going to click, hold, and drag, drag, drag, a little arrow, and go, boo... stick him 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, click the name at the top of this one, and there you go... all right, let's prototype it. Prototyping it, it's called Present, you can 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... and what happens is, it'll present from whatever page you were on... so that's not what I want, I want to go back here... and if I go to this Home page here... just click on the word 'Home' page, and then 'Present'... 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, so click once, oh, moved along... click again, Checkout page... what is that? Confirmation page has had a bad day... what is on there, that is doing that? Shouldn't do that... let's close it down, start again... what is on there? Nothing... something weird's happening, I'll leave it in 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 another giant black box... you wait there, and I'll figure it out, so we all learn, wait 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 it was some SVG doing some weird stuff, so I deleted that ... and I tested it, and it still was broken, just double check it's still broken... no, it's fixed, weird, I don't know then. So all I did was delete it and then undo it, and it came back to life... so just in case something else happens... and it's not as easily fixed, like that took me ages... 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, 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 tangent, but these things happen... so it kind of worked, let's go to our present now... this is back in the zone, Dan, back in the zone, so we're going to preview it... and we have done some basic prototyping, where you click anywhere, it moves along... gets to the end, and it's kind of stuck. So what you can do, if you kind of wiggle around... you'll notice that, after a while some other little options appear... Restart, which is R, it's a really common one... to 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 1, 2, 3, 4. Other things that might be useful is, under these options here... you might just, well you won't want to go like 100% or full screen... to get rid of all the kind of Chrome around the outside... what else we want to do, that's kind of it. One thing you need to know is that you don't need to close this every time... feel like,when you're finished you close this down, and then come back over here... but you don't have to, leave it open, and just always go back to it... because what happens is, it updates... see this, if I go in here and I decide to change the color of this... oh, good point, this happens quite a bit when you're new... you're like, "Where did it all go?"... 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 in the course... but whenever you're missing your colors or fonts... it's because you're stuck on Prototype, not Design. I'm going to go in here, I'm going to say, you are now going to be another color... 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... it doesn't exist at the moment... what we do is we use the Command on a Mac, Ctrl on a PC... and Command 1 is back to your little Home screen, we've been clicking on that... Command 2 is whatever the second tab is... that's considered the first one, two, three. So in my case I'm going to be going back... between Command 2 and Command 3, Command 2, Command 3... Command 2, make a change... Command 3... and it updates instantly, so you can keep that open. Another thing to note is, you can't prototype across pages... 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... 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, but you can change that... 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, so having something selected... 'Prototype', click this button, or just click on no man's land... and you can say, "All right, I don't want an iPhone 6, I want..." I don't know a Google pixel like, I own a 4 at the moment... why can't we have a 4? You have to look at a really old 2... and and you can pick through the different colors... not that they change much on an iPhone... but obviously, on iPhone 8... 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... and when I go into Preview now, let's have a look... 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... remember, way back in the beginning, we went, "All right, make our first frame" ... we picked one of these defaults, they're attached to this... so even if you just typed out, you've started with a desktop version... you've typed it out, and made it a phone size, it doesn't connect up anymore... so you might have to make phone sizes, and copy and paste them on... if you want that Chrome there... it doesn't help the 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... click on the 'Home' page, you'll notice... in Prototype, Prototype Settings, there's nothing in here... so I can go and say that I want it to be... a Desktop, like a laptop, and it's not there... there's only a few things you can actually wrap that Chrome around at the moment. One last thing before we go, 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... 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 Buy 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... what I tend to do is just click on little arrow, hit 'Del'... or you can click on your frame here, and say... under Prototype, can you see, it says-- we've applied this interaction called Tap Checkout, just hit minus, ' - '... it's the same thing, you want to delete it by selecting and deleting it... or selecting the frame and then just minusing any interactions you've got. 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, Buy Now does a cool push-ey thing... this one does a slide-ey thing... so I'm going to show you those... I'll also show you, remember that problem we had on this last frame... the big giant black boxes... that came back, and we fix it right at the beginning here... so I'll leave that in there so we can all learn... we'll learn about Easing as well... it's a teeny bit of a long one, but we cover a lot, all right, let's jump in. All right, to change the animations, we're going to do a couple of things... we are going to-- make sure we're on Prototype, here in the top right... we're going to delete these, if you haven't already, click on the names at the top... and delete these transitions, oh, where did he come from? do you remember, in an early video you were like, I was like... "What were those big black boxes?" I've turned Figma off, open it back up... and I totally figured out what those big squares were... there are something in here, yeah, that's what they were... big giant letters, Facebook, and there we go... oh well, problem solved... I think I was demo-ing it with you guys, showing you how to drag it in... and they all ended up there, but they disappeared... and now they're back, oh, we've fixed that problem. Let's look at the animation, so we've deleted the connections between them all... and let's do it for actual specific buttons rather than the whole entire frame... so what we can do is, we're going to say, the Buy Now... 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, 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... that's for the keen buyers, to go straight there, no fuss, no mess. Now the animation is this... it is instant at the moment. just moves across... let's look at Dissolve, and let's just go and test it... remember, you don't have to reload this... but you might, if you've closed it... just go to this little Play button, and go to Present, and will open it up. All right, so our little button, going to click it... look at that, Dissolve, very exciting, remember, R is the refresh button... and you can practice through it... so we won't cover every single one... because some of them are pretty self explanatory... we're going to do, Instant is easy, Dissolve, you just saw... Animate, we'll leave for this video... because it's a little bit more complicated for later in the course... it is amazing, but we can do it later on, you need to set it up a bit more... let's play with Move-in, let's have a look... R, for reset, move in... can you see, it slides in from the side, that's pretty cool... it 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, kind of gives you a visual cue of what it's going to do... so Push, can you see, instead of moving, which is one-- kind of sliding in on top... push will push one out, to move one in... so this is kind of an easy way to-- Slide's really good when we do get to those mobile apps... where it just kind of like pushes it to the side, not all the way in... I'm going to stick to Move in, and can you see here... the directions, you can decide if 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. Let's look at one of the other interesting things, is Easing... so Easing is on by default... and it just means that, Ease Out means... it's going to start fast and go slow on the out... it's going to ease out that little curve there... I'll exaggerate it here, so... this is another term we need to learn, ms, which is milliseconds... 300 milliseconds is... there's a thousand milliseconds in a second, so that is one second... so 300 is, I don't know, a small part of it... third-ish... I'm going to turn it up to a second just so that I can preview it and have a look. So let's go over here... 'R' for refresh, Buy Now... can you see, nice and slow, but it starts fast... and then gets nice and slow at the end, so that's Ease Out... what's very often nice is, both Ease In and Out... you can ease it in, so it goes slow at the beginning, watch the little-- you can see, this actually shows it even better in this little icon here... so it starts slow, slow, slow, slows out, and gets faster... it just always looks good with that Ease In and Ease Out. So I'm going to crank it right up to, exaggerate it to 200 milliseconds... oh, I can do that, there's one fifth of a second... so let's preview it, let's have a look, 'R' for reset, Buy Now, that is too fast... so let's try 3-- let's try 400... reset, click it... still probably a little fast but you get the idea, right? Easing is to play with the animation... Ease In and Out, it's pretty cool... it's kind of like a bounce, so let's have a little look... it's probably still going a bit faster, have a look... yeah, too fast, but cool, let's make it go to Push In... yeah, that's it, Push In, I'm going to ease it in and out... and I'm going to turn it to 600. There's a lot of playing with this, it depends on how long it is... and what kind of Easing you're doing, what kind of direction it has to move... kind of how far it has to move, so 'R' for reset... so they're kind of e-- what was it called? Ease In and Out, 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, not going to do it as a class exercise... because I can't really check it... so what I'm going to do is, just follow me, we want to go from Learn More-- you could do it from the text, it's better to do it from the button... you could group it and do it from both. So I'm just going to do it from the button around the outside... and I'm going to say, Learn More is going to our Product Details... so you can learn more about it... we're going to do the text over here... so when you often click a heading on a website... it'll go back to the Home page, this is my Home page... so what I'm going to do is, I'm going to say, you go to this one... this, go to this one... now, what animation is it using? It's going to use whatever the last thing you used, so I'm using a lot of pushes... so if you don't like push, we're going to have to go change them all. So pick it first, before you start clicking on them... so it'll just remember the last one... so I'm sticking to push... and the other thing to note about animation... and just the interactions in general, in prototyping, if I copy this... and delete this one, click on there, hit 'Paste'... can you see, it brought along with it. So as long as we're in Prototype mode you can copy and paste to different ones... so it means you can rig up the entire navigation on one of them... and just copy and paste it along... so let's say it's this one here, I want it to go to the Home page... you know, I make this go to the Home page... I don't have a Share, and Account button yet... or even a Mobile Nav yet... but I could just copy them all and paste them on everything... just to save some time, so Buy 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... and my Home button's going, Home button's going... you don't have to drag it, after a while, it's really easy with only four of them... because you can just kind of like, ah, zoom out... and just quickly drag this one, get it over here... it's do-able, after a while it's not... you saw that, like Microsoft Materials one, no, Microsoft Teams one... there's no chance of rigging that up, with dragging and dropping. So what you can do is, you can click on these, and, actually don't click on them... you select it, in Prototype mode, click 'Interactions', hit '+'... it's going to say, Tap, what happens, when you tap this one, going to go to... navigate to the Home page... so you can do it that way and play around with your Dissolve... so instead of dragging it you can just kind of like select it... add this interaction and do it this way, I'm going to Dissolve back, fancy... I think that's it, that's it, that's it, that's it... hang on, let me think, I'll pause it, hang on. It's hard to get it right, anyway, when you're in the Desktop view... in our upcoming video we will test it on our actual phone... and then you'll know instantly, you'll be like, "I'm stuck, and I can't get back." So you can update your prototype, oh, updating them... we didn't do that, so if I want to update this one from, you know, push... you can click on this line and it will pop that out... otherwise click on it and then you can click on Home page... and it just pops that thing back out again... to delete one, you can drag it off back into itself so it disappears... or you can click on the line like we did before, and delete it. All right, starting to get prototype-ey, let's have a look at our prototype... what can we do, let's go back to Home... did you notice that if I click on somewhere that doesn't work... these little blue dots appear... it's just to help people that are testing, even yourself, what to actually click... because we are doing, let's say a Task Flow, and it's very simple... there's only four slides in it... and I only want to test that, I don't want people going... I'd probably remove that + button for my test... just because it's going to confuse the test itself... but maybe it goes to the Product Details page... but if you click anywhere it should highlight the one, so Buy Now, Purchase... congratulations, the push and the bounce is a bit weird, but you get the idea. All right, that is animation, what you probably are thinking, your thinking is... "I'm not sure I can use Figma, because it doesn't have the best... most amazing animation transition in the world," let's have a look... it doesn't have Dissolve, where's my Page Peel and my Barn doors, I know... they're actually illegal in most countries now because they're so terrible... so for your viewing pleasure, editor, can we wrap up with a Page Peel? Hello, this is the other side of my office... you're 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 night time, it's not kind of moody, it's just actually dark... it's about 11 o'clock at night, and we're making courses for us... 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, or an app... there's no point spending all your time on there... you need to be testing it on the device, that thing... so there is an app you can download from... either the Android or the Mac App Store, you can tell I don't use it... but it's called Figma Mirror, they might be changing that name... check in the comments if they have updated it, but it's called Figma Mirror... you sign in with your Figma username and password... then somehow, magically, just starts happening... you don't have to be on the same network, it's magic... and basically what happens is, can I show you here? I'll show, you can you zoom in on that, you kind of can... basically if I click on different things here on my desktop... you can't see what I'm doing over here, but if I click on my Details page... where is it, Details page, there it is, click on my Checkout... so it's kind of live updating, and even better, it's actually live and interacting. So will this work? Maybe... so click on my 'Home' button, 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... Purchases, what is it focusing on, is it focusing on the right thing? Maybe... Fades, oh, look how good this is... so I can actually work on it, and the big thing I'm going to show you, is... the Buy Now button, is too small, the text look fine on desktop... but it's teeny tiny in there... the Purchase button looks all good, when I go to Buy Now... how is this filming, the cam-- this is pretty 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 Frame, let's make him bigger. Logo is too small, text on the Purchase page is good, the Checkout page... and I do get stuck on the Learn More page... I don't have any sort of like prototyping off... the Product Details page, 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, it's not that bad"... well, that's way too small, or that's a hideous color, green. So actually, that's probably pretty good... oh, one-- let's do a live update... because that's pretty cool, I'll adjust the zoom so we can... do it a little bit better, you wait there, I'm going to change the camera. All right, so, probably should have done this at the beginning, watch this... it's live updates, I'm moving stuff around on my desktop... so you're looking at my laptop there, my phone over there... and yeah, you can just kind of work, so you-- when I'm working, especially in this initial stage... getting font sizes and stuff ready... I just kind of like, I don't have it propped up... I just have my phone lying down on the ground... so you can see it... this is really handy now, I can go through and say, actually, font size here... what do I want to do, it's a group, so I'm going to go into my group... and I'm going to use up and down... until I find something, what I'm looking at... is I'm keeping my eye out on my phone here... that's what I'm looking at, I'm like, "Is that an approachable size?" What you'll find is, pretty much always, 16 is good... you can't see it because it's on this side of my desktop... but I've gone to 16 points... that generally is a no-brainer good one, can't wreck it... 15, if you're trying to be cool and fancy, and trying to keep it small... but if you get down around the 12s and 13 points... it becomes quite a tricky thing to-- it's fine for some things, but for a big old, click now, Buy button... it feels a bit small... so I want to go through and let's make this a bit bigger... move across... center them together. I have to do the same for the Learn More button, it's hard doing it one-handed... I need my hands over here, but I don't want my hairy knuckles in the video... but you get the idea, you can make changes really quickly... be seeing what it looks like on a phone... it's pretty much instantaneous, don't know, I'm pretty amazed by how that works. So yes, if you're designing for tablet, have a tablet... if you're designing for desktop, it's a bit easier... because you can just do it on your desktop... a mobile phone, or an app, or a mobile first website, like we're doing... desktop is part of our plan but it's secondary... most of our audience is going to be coming from paid ads... because I 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 going to come from mobile phones... if it's coming from YouTube how-to videos... like a lot of my courses do, then it's desktop first... so kind of questions you're going to get into as a UX designer... what do we design for first? All right, it' late, and surprisingly hot, with all these cameras and lights going... I am going to-- let's make another video before we go to bed... all right, that is Figma Mirror... and testing your prototype on your phone, see you in a bit. All right, it's 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 video... so go in there and look for Figma Mirror... if that's not working for you for any reason, you can actually... on your mobile phone, not on the desktop... go to figma.com/mirror, it works mostly the same way... so log in with your account, your Figma account, and test your phone. What I want you to do is just have a bit of a, be critique of your own work... are the fonts large enough and legible enough... are the colors easily contrasting... so I can actually see some of the text that is... like, over the top of these, I know it's wireframes there's not much going on but... are these fonts for the description big enough? They don't all have to be 16, and massive... but, you know, there's some parts that do need to be bigger ... like this one here, this, like smaller part down here, does it have to be bigger? I don't know, I'm going to test it on my phone... also make sure that your buttons are all wired up... go to Prototype and just make sure they're all connected when you're testing... and also, are they easily clickable, are the buttons big enough? The last one-- I'm going to go back to Design mode... I have problems with these, they just didn't feel clickable... they're not, they weren't very nice, just a bit awkward to click... so what I don't want to do is, can you kind of see them there, I can see that... like this one here just needs to be bigger, like not the actual icon... I kind of like it that size, it's the frame around the outside... so unlike a group, remember, a group, can't deal with the frame independently... but because we're dealing with these sweet cool frames with the little hash symbol... it means that- let's have a look - that this thing inside... and this outside kind of wrapper, which is the frame... can be different sizes... we're going to get a teeny tiny bit advanced here, but hey, let's do it. So I don't want to just grab the edge... because what I want to do is, I want to go inside of that group, hello, group... or any of these things, go inside of them all... and I want to say, actually, I don't want you to scale... it's trying to match the size of the frame, which is cool... but actually I don't want that, I 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, and I grab it, look... hey, I can make it bigger, stays in the middle, which is cool... but I can start making my buttons a whole lot more clickable... without actually distorting the image or trying to make the icon bigger... same with this one here, I can go inside of it... there's two vectors, I'm going to 'Shift' click both of them... don't scale, please, just stay in the center... awesome, go back to the frame on the outside... I'm going to say, actually, just be a bit bigger, nice. So, haven't changed the size, I just made the clickable area easier to get to... and it's the only one I've actually rigged up, isn't it, you get the idea... so that is it, go and test your wireframe... and check in your-- where is it, class projects... I just want you to take it, can you take a photo of your phone? Not everyone can... if you've got another person's phone, take a photo of it... I just want to see it on the screen, kind of proof that you did it... and a nice little cool graphic of your first wireframe up on the screen. How do you feel now? Like I remember, when I did my first ever wireframe... I still get that buzz of like... oh, the thing I made, it's on a device, it's on my computer... and it's exciting, it's interacting... I'm clicking buttons, I feel like a professional... I don't know, is that you too? Anyway... take a photo, if it doesn't work, and you can't... you've got no one else around to take a photo of your sweet new wireframe app... just take a screenshot from your phone, and upload it to the... Assignments part of this website... all right, that is it, I will see you in the next video. Hi everyone, in this video we're going to look at animation in Figma... up until now we've been doing kind of more page transitions... with the whole thing sliding out, but now, you ready for it, wait for it... hey, cool, huh... that's the arrow sliding in, just the arrow, rather than the whole thing... 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. 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 we saw at the beginning there... so what I want to do is basically, you have two of the same frame... so we're going to have Confirmation, this first one... we're going to duplicate it... let's hold down the 'Option' key on a Mac, 'Alt' key on PC we've got two of them... and on this first one I want it to be off screen, 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... so I'm going to move it over here, just so I've got space for my arrow... so we're going to have this first confirmation... where the arrow is going to be off... and the second one, where it's going to be on... and to make the magic happen, is we need to connect these two. So I'm going to click on this frame, and I want to say, Prototype... and I want to say, go there, and when you go there... and when you go there, I want you to use Smart Animate... that's the one we ignored earlier... basically, this works when there are objects of the same name... on two separate frames, and it will animate them... you can see them on this first one, and you can see them on the second one... and you can see like, hey, they're in different positions... I'm smart, I'm going to animate them... and I'm using the Ease In and Out back, because it looked nice... so yeah, let's give that a go. Confirmation, let's hit 'Preview', and it's not going to work... I know it's not going to work... this is going to be the big thing that catches you out... especially with these kind of slide in animations... let's have a go, click once, it faded in... what's happening is, is that this arrow is actually not part of this frame yet... or not yet part of this frame anymore, there was a time it was... look, I'm part of this frame... so have a look over here, in my Layers panel... I've got this line 13 on the Confirmation page... but watch what happens, look, watch it in the Layers panel, if I drag it out... it's still part of it, still part of it, still part of it... at some stage it goes, boop, can you see, it-- I'm not sure where that noise came from, but there you go... it is line 13, and it is now, like not in this frame, or this frame... so it doesn't know what to do, so basically it says, there's no arrow... now, there's an arrow, that's why it just fades in, so that's really important... to make sure that it is part of this frame, you can have it over here... you just got to make sure it is inside the frame, you do it by dragging it in. Now we've got a little tip, is, we've got two Confirmations, and that is pain... it's hard to know which one is which, in the Layers panel... so I'm going to do Confirmation A, and Confirmation B... just to be helpful over here... and my OCD says, A needs to be below B, A, B, here you go. now Confirmation A doesn't have my little line in there... so all I'm going to do is drag it in, there you go... it doesn't matter where it is as long as it's in this frame... and there's one that corresponds in this frame... so there's line 13, where, there, there's one there, it's going to work... all right, so let's go and give it a test. I'm going to use my back arrow once, I'm just using the arrow... you can click these down here if you want... I'm on Page 4, click once... hey, a little animation... so yeah, that's the basics of Smart Animate... as long as there's something on both frames, that has the same names... and it does something different... it'll work, it could be even-- let's do a couple of things... one of the things with stuff off screen, on Confirmation A, we know it's there... like we can see it there... but we can't see it over here, so what we might do is turn the... remember, one of the perks of a frame is, under Design... with the frame selected, you could say 'Clip Contents'... so it kind of clips it off... so you can actually see it and work on it... it's still part of the right layer order, nothing's changed... except you can see it now while you're working... but there are times you want to kind of turn it off, so it's all tidy. So now I can see it, I can, we did animation of movement... it will actually smart animate anything, so let's say we want to start it here... so it's still in the right, where are we? We're still in the right frame... it's still a different movement... but here we're going to turn the opacity down to 10%, just so I can still see it... and let's go test that now, so back arrow, click once... it fades in and does that... so there's a lot you can do, we're just going to keep it simple for the moment... let's talk about some of the quirks. So one of the quirks is that if you rename it... so we've got line 13, and line 13, if you're like... "Oh, I'm going to be very careful, and good... and rename at least one of my layers"... because it's got a different name now, it's not going to work... let's go back, back arrow, click once, just kind of like fudged it... so if you get a Name 1, that's fine... just make sure you name the other one Arrow... back one, click. What else do I want to do? I don't like the Fade In, going to go back up to 100%... the other thing I want to do is, I'm doing it On Click... basically what I want to happen is, I want to go to Checkout page... and when I click this, I want the arrow to start kind of like moving in... automatically, because at the moment I've got to click it and bring it in... you'll also notice, if I go back one, when I click on this... because of the transition between... the Checkout page and Confirmation page... because it does this back and forth, you actually see the arrow, look... that's weird... so we're going to do a couple of things, when the Checkout is open in Prototype... I don't want it to do the crazy-- what are we doing? We're going to get it to do On Tap, navigate to our Confirmation, perfect... but I don't want to do the Move In, I'm going to go to Instant... and I'm going to turn that clipping back on, so back to Design... remember, we clipped it off before, or turned it off so we could work on it... it's great while you're working, but if you start seeing weird things... you might have to turn the Clip Contents back on, so let's give that a go. I actually want this off screen... make sure that it's inside Confirmation A... ready? It's going to go back, let's click this, Instant... I want it to automatically go across, not have to click somewhere and go across... so we're going to introduce another kind of transition between frames. So basically what I want to happen is, when it gets to here... we go to Prototype, at the moment what happens is, we say... on Tap, navigate to this other confirmation B... I don't want to be on Tap, I just want to use this one that says, After a Delay... so I want it to get here, and then after a delay of however long... I'm going to turn it down to one millisecond... you can't have 0 for some reason... you have to have one millisecond, which is one thousandth of a second... so it's going to be instantaneous, it's going to get here... and then automatically move to this... and it's going to still use our Smart Animation, so that's the only change... let's give it a go, let's go back to our Purchase page, give it a click... see, it got to there, and then automatically moved on... if that's a bit confusing let's change it to 2 seconds... so 2000 milliseconds, and let's go back... so we click this, it gets here... waits for two seconds and then moves to the other one... and the smart animation moves it in, you're with me? If you're not with me, don't worry, we'll get 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... Figma does it, but if you're thinking, "This seems a little bit clunky"... it is, don't tell anyone... it is Figma trying its best to be all things to all people. 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... we 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... what I mean by that is, remember our little arrow over here... can't be hanging out in no man's land, it actually has to be on this frame... and this Frame, even if it's out in the Artboard... it needs to be kind of grouped together inside that frame... those are the rules of animation in Figma... all right, that is it, I will see you in the next video. It's class project time, your first animation... so just get that arrow to move in, and if you're kind of like new to animation... and you're like, "Man, this is going to be tough," just do the arrow that we did... get it to work on yours, change the arrow up a little bit... you know, get exciting, get a, like a line arrow or reverse arrow... do something a little bit different... but do that and then send me a screenshot... so just kind of like, screenshot these two frames... or three frames, if you end up doing more... but yeah, if you're new to it, just do that, nice simple one... we'll get into more animation later on... if you are like a little bit keen and savvy, and brave... I'm happy for you to go a little bit further. So in here it says, you might try something, keep it simple still... don't get things to bounce in and bounce off stuff... multiple keyframes like that is tricky in Figma... but maybe it comes in from the top, maybe using a ball, a square... a tick that comes in something different, up to you... if you did want to do more than one kind of animation... you can have multiple, friends, that all kind of have delays... and lead into each other... but again that is for the people who, I don't know... at this stage, I come from an animation background-ish... so I'd be like tackling that... but if you're new just do the simple arrow, and we'll do more later on. The other thing is, is that we're just taking screenshots... and uploading them as assignments... I'd love to see your animations, but in Figma, just so you know... there is no like built-in recording part, when you get to here... be great if there's a button that says, Record My Stuff... check it, might be there now, but there's not at the moment... so I would love to see what your animations are. If you do know how to like record your screen, like I do... I'd love to see either a video, upload it to something like YouTube or Vimeo... that would be great, or an animated GIF... but it can get a little bit tricky if you haven't done it before... so screenshot is totally fine... all right, that's the class project, do your first little animation, be excited... even if it is just a boring old arrow sliding in... all right, on to the next video. Hi everyone, in this video we are going to be sharing our design... with our client or one of our stakeholders... so we're going to share it, first of all with Doug, who is Doug? Doug is fictional, I'm using Doug as a representative... of a level of person you're going to be sending it to... Doug is a simple creature, he hates computers, and logging in, and passwords... but we still need to get-- he's our client, I want to get him this prototype,... this wireframe at this stage, just to see if I'm on the right track... keep him involved, rather than surprising him at the end... so it's really easy to share stuff in Figma. so we're going to use the Share button along the top... click on that, and we're going to start with a simple version... because what I'm going to do is just send Doug a link via email... that's all I'm going to do, I'm going to copy it, I'm going to close it down... I'm going to open up a browser, and I'm going to pretend to be Doug. So this is Doug, I emailed him a link... he clicked it in his email address, and this is what he sees... the nice thing about it is that, Doug doesn't have to sign up... or get passwords, or go to free trial... or all of that jazz, it just works, which is really cool... and he can kind of move around, he can't do a whole lot without logging in... but he can look at it, he can't comment at this stage... we'll do that in the next part... but he can look at it and go... "Oh yeah, that's cool, I like that," or, "Hey, what's this going on?"... and give me some feedback at this early stage of my wireframe... just to make sure I'm on track. The other thing you can do is, this little Play button still appears here... so we can click on this, you might have to tell them exactly where it is... and he can go through and actually prototype it without having to log in... he can see it, he can click on Learn More... you can realize you can't get from Learn More to the purchasing... so back to Home page... so he can see all of this, which is cool. One thing that might confuse Doug, which it does for some of my clients... is it's opened up a separate tab, you can't close this down and get back to it... you're like, you can click everything but you actually... just, it's got a separate tab that opens up when you hit this Play button... see along the top there... so yes, where this gets even cooler, like... this might freak Doug out, it might freak you out... so he's working on this... what you'll notice is, I'm going to make Doug go over the side... so pretend this side is Doug, and this side is my regular old Figma... so let's put a gap in between... so this is him on his computer, at his house, and this is me on... you know, this is me working, like I did before, and what you'll notice is... he can see my arrow. Figma is a really amazing collaborative design tool... so it's probably, for Doug, he's not going to appreciate that... he's going to be weirded out, that I'm following him around with my little hand... I can even see Doug, look, there is his hand... so if I move him over to, and click on this... anyway, you can see each other, that's the point... and let's say Doug's like, "Oh man, it's good, but what is that green?" I'm like, "Oh my God, quick, before Doug sees it, I can be..." select all same color, go, and he's like... "I hate green, man, green's the worst color in the world"... I'm like, "Ha-ha, what about pink?," he's like, "I hate pink more"... what about red, or orange? So what's happening is, this is live collaboration... so it is amazing when you're working, with other designers and other creatives... because you're just doing something, and you can all work on it together... but at this stage you're just working with Doug, and yeah... he doesn't have to do anything else, can just look... we don't have to be updating it in front of him... but it's a cool little bonus extra. Now let's bring Doug back, come on, Doug... if Doug wants to use commenting , which is probably one of the really nice features... he can sign up for free with either Google, or sign up with his email address... and he'll be able to start commenting. So there's one thing that I might convince Doug to do... so you can actually use a little pin, and actually start commenting on it... let's show you a couple other things before we do commenting... so I'm going to go back to Figma, so forget about Doug, bye, Doug... a couple of things that you can do as a designer... is you can go into here, when you do go to share, you can say... I want to link to a specific frame, so let's say that-- the Home page is wrapped up, there's just problems... with the Product Details page, because there's no clickable button... let's do this terribly, let's make that clickable, we can go to the Checkout... so what is it doing? Instant, that'll do... so what I can do now is I can select the frame first and then go to Share... and then that option will work, it'll say, when I send this link it'll actually link to the specific frame, this one here, it'll start there... if it's grayed out it means you've got nothing selected... and I go to Share, you can't tick anything... so that's one thing, let me show you what commenting does. So let me upgrade Doug, wait there... so upgraded Doug, this is Doug now... before, he could only do very limited stuff... now with his free login... he gets probably a little bit too many details for-- oh, poor old Doug, he's like, "Why can't I see the CSS code?"... but the difference now is he's got commenting... so Doug over here is like, "Okay, I like this"... can't see my comment... so Doug's going to write... "Why are we not using real images?"... signed Doug... Doug is a wireframe, that's why... so he posts on his one, on my side I can see Doug now, there he is... and I can start seeing comments coming through... and I can see it there, and I can see it's pinned... and I can see it's going there, and I can reply to Doug and, say... "Doug, I've told you a million times, this is just a wireframe for testing"... send it off to Doug, I should put a smiley face in there. You can see, we can have this collaboration between my clients and me... they can pin stuff, all the client needs is a free login... or they can just do it by email, don't have to log in at all. So commenting is great, there's a couple of things... and for me, on my side, let's forget about Doug now, let's go-- can you see up here, the two Ds, should have called them Fred or something... but there's two Dougs now, so there he is there... he's the yellow guy, you can have loads of them along the top here... of different people looking at it... lots of different clients, lots of different testers... I'm going to go from my-- I don't want to be on comments anymore... because I can add comments myself... I want to go back to my Tools, that I know and love... and actually, I can go back to comments... and I can say, actually, this one here, I can click on it and I can say... see it here, resolved, so it's one of those things that we are finished with now... I've kind of made the adjustments based on it... or at least I've replied his, and I'm kind of finished that... and I can work as a designer through the different notes... from my client or tester, or Product Manager... so commenting is pretty nice and fluid, and in real time... all right, we'll wrap this video up, we'll do in the next one... how to kind of share for editing... it's going to introduce a different part of the Figma experience... which is Figma Teams, all right, I'll see you over there... bye Doug, bye Dan, I'm Dan. All right, in this video we are going to take it another step along... we send our file off to be shared with our client, and that worked great... but let's say we're going to be sharing this with other colleagues... working in a UX design team, at a company... and there's more than one of you working on documents... so I need to share this with somebody... that can actually start working on the project, and 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 him to be an editor, but it says... hey, first, to be an editor you need to move it to a team project... I'm going to click 'Close'... up here, it says it as well, "Do you want to move this file?"... a lot of things that, indicating needs to be in a team... so let's go and look at that the manual way... we can move it, and it will automatically happen, but... let's have a look the long way, just so you can understand it better. So back at my little home house here... we've been working in drafts, you can have unlimited drafts, a bazillion drafts... eventually though, if you want to be sharing it with other people... and working on it... you need to move it into one of your projects... you also be named differently, depending on how you set up Figma... but this is called a Team, think of a team as like a project... like Scott Headphones, as a freelance UX designer... you probably have about 20 teams or 30 teams, for different companies... some companies only need one team with lots of projects inside of it... and the projects might be things like... hey, there's the mobile website, the desktop website... it might be some social media stuff we're working on... it might be some flyers that we've made... or the redesign of that web page... and then redesign again, lots of different projects. So you share the kind of company-wide team with the different people... so I can go to Members, and say, I want to invite... you, you, you, and you to this team... and inside of this projects we're going to have... Desktop, Mobile, January sale, all that sort of stuff... anyway, those are what? Those are the basic overview... of what teams and the projects are. So let's go back to this, so we've been given-- yours will be different, the name will be different... but you've been given, inside your team there's already a team project... it's this thing here, you can view it that way or this way, it's the same thing... we're going to delete it for the moment, create our own, they've given you like a... pre-made team project with stuff in it, we can open it, have a look... this is the default one for Figma at the moment... and there's just a bunch of styles... lots of things going on in here, different assets, it is... 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, don't have to... back to Home, I'm going to... get rid of this project, right click it, delete it, sorry, team project... I'm going to create my own, '+', 'Create my Own Project'... and this one is going to be the e-commerce... it has to be lowercase e for some reason, e-commerce website... 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 Ecom 1, I can just drag it into this project... and that will unlock the editing... and you're like, "Why, what's the difference between drafts... and just kind of like, team with a team project"... with a file inside that team project... this unlocks some of the features... so that I can actually collaborate with that person... I've still got that file open, nothing's really changed except... can you see, it's not in drafts anymore, it's in that project... and now when I go into Share, I can do more... I can allow people to edit, so I can say... Doug, we don't really want to edit, but let's say Victoria... Victoria is 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, because it pops up quite a bit... and it's one of those break points where you go from free to paid... because, let's have a look, let me show you, so back at Home... remember, drafts, you can have as many files in your drafts as you like... but if you want to share it with another collaborator... it has to be moved out to here, and I've got a team... that team can only have one team project, inside of that team project... you can only have three files, so that's where they kind of... you know, that's where you move, from going, "I need to pay for this"... because it's great having one project, but I need two of them... e-commerce website, and this other app that I'm building for them... or there's other kind of sub-section that I want to break apart... rather than just jamming them in the same project. Now in terms of the files, you're going to need more than three pretty quickly... now this changes, go to figma.com/pricing... and they will show you what you get, actually, I'll bring it up here... this is what it looks like at the moment, it will change... it says Free, you're allowed unlimited drafts, but you're only allowed... one team project, and you're only allowed three files within that project. There's a few other things as well... but this is where you might bump up to a paid, the paid product... there are ways around it, a lot of people do... you're weirdly allowed at the moment, unlimited teams... so I could have a zillion different teams with one project, and three files in it... and you can see how that works, and you can see how... it might be a bit cumbersome as well... but it is pretty amazing, what you get for free out of this Figma... again, these rules will change, go and check figma.com/pricing... to see what is available and what's not. So to reiterate, I've got this, I can share it when it's in drafts... I can move it back to drafts, I can say... you, actually, I'm finished with this project now... and I'm going to be sneaky, move it back to drafts, so they don't have to pay... the trouble with it though is, anybody that was an editor can't see it anymore... it comes out of their Figma and goes into drafts... and I have to kind of share it this way, here we go... kind of like Doug, he can view it, he can comment on it... but he can't be a co-collaborator on it, so pros and cons. There are a few other things that, you know, a paid version gives you... that we'll throw in throughout the course, but that's one of the big ones... one team, one team project and three files only. All right, that's it, I hope that helped... that really confused me at the beginning of... like the screen here, confused the heck out of me, 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... all right, I'll see you there. All right, you made it to the end, well done... 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, 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 the full course, lots more exciting stuff to go... yeah, that is it, I hope you're feeling more confident in Figma... and maybe in UX in general... if I don't see you in the full course... I'll see you around here on YouTube, lots of pointing... that is the end, goodbye, everyone.