Adobe Figma Tutorial for Beginners - Your Quick Start Guide

hello hey I'm Dan Scott and in this video we are going to design our mobile website I will use the software figure and on our little journey I will introduce you to the design or user experience design process uh we'll start by making the simple wireframe like this I'll show you all the basic tools and then we'll prototype it and then from there we'll end up by actually filling it out by making what's called a high fidelity version before the end of this video first up who is this video for it's for you as long as you are the person who really wants to learn ux design and figma but maybe either curious and haven't got started or like I was curious and scared to get started it can be a little bit intimidating both the ux world and figma as a bit of software so what I'll do in this video is we'll do a short little project together learn the software learn a little bit of the process to hopefully yeah unintimidate it for you and get you involved before we jump in the software quickly let's talk about what ux design is and I felt like it was quite this hard thing to understand when I got started but once I kind of let these kind of like three core Parts I found it like a clicked I was like Ah that's why this is so good okay so the first one is not one of those steps is like getting a clear brief that's right for any creative project getting the brief right uh figuring out who it's for is super important for any project okay so you do that first from there though what was um what I find useful in considering ux is there is kind of three steps assumptions testing and iteration so um you make some assumptions based on the brief and who it's for about what they might like things that need to be there things that might not need to be there language you might use so those are all under the term assumptions rather than things that you should do then you test those assumptions okay get it in the hands of the people it's meant to be for not you not your colleague not your mum not your girlfriend the actual people it's meant to be four okay and get them to test it okay whether you're sitting side by side with them emailing it to them okay doing a b tests against a bigger group um but doing testing and then once you've done the testing evaluate it and iterate on that one so the iterations that last point so you go back to the beginning basically make new assumptions based on those testing do testing do you know do we need to iterate again okay so that was for me a really good process because it did a couple of things like I was trained as a graphic designer I've worked a lot in you know web design and Motion Graphics and video editing okay and a lot of those jobs I hired based on my experience okay and what I think should be right okay and what the client wanted and together we kind of made something that we were like that is perfect no testing involved because you can't test a lot of that stuff okay and whereas ux design is often used for web and app development which is easily trackable so instead of saying like when I was a web designer called myself a web designer I would get the brief make the stuff and deliver it to the client okay there might be some a b testing it's some stage of some part of it but it wasn't a clear part of the process whereas now as a ux designer I will detach myself from being I know everything that should be you know right because I'm the professional that's why I've been hired I am now the person who's looking forward to making some hypothesis some assumptions and then getting in the hands of users and then being blown away by like how awesome I was or how terrible I thought you know how far away from where I thought it was going to be and what it ends up becoming okay and learning loads along the way it's super exciting that's my that's my key parts for ux design so assumptions test those assumptions iterate on those assumptions and eventually you come to a point where it's the best it can be for the people it's meant to be for ux design 101 next up what is figma's role in this like ux design process so it is a rapid prototyping okay it is the design tool what needs to be really clear is that it's not the actual maker of the app or website so majority of times we're using figma to design apps or websites you can use it for all sorts okay but it is not the actual builder at the end and you know we're going to get something we're going to quickly do a wireframe test that wireframe then make it look on brand right colors images okay and get it to a point where it can be tested and actually feel like an actual app or an actual website but it's just a mock-up of it okay it looks real you can test it that's the beauty of it but it's out actually making the website or app and that's a big thing where um you know you're like well why do you even have figma if you have to then go and build it again afterwards it's that rapid prototyping like however long this video is right now I'm not sure how long it is okay but um you know that's how long it takes us it's probably an hour and a half hour and a half and how long it takes us to you know make something that is that's a wireframe that's tested and that actually looks on brand and we can get sign off from both the potential users and the client we can do that super fast imagine trying to build it in code or you know and you know getting an app developer to actually build it based on the brief okay it'll take a long time to build out and when you do testing we've got to change it all but maybe we have to change the whole you know infrastructure or the framework that we're using it's that's the long way of doing it you can do it that way but it's much quicker and much easier to use something like figma to do this rapid prototyping get in the hands of people and get it tested get it signed off and then hand it to an engineer okay and then they can go all right I know exactly what I need to make I can go away Scurry away find my dark corner and code away and come back with something that looks exactly like your mock-up because you've worked out all the pathways and user flows and you know problem spots and anything that people might get stuck you've fixed all that they just need to copy that and that's a lot faster process okay so that's what it is you need to know that your job is figma rapid prototyping but then afterwards we need to build it in either code or in code or a framework or a template however you're building your web uh web that's combining the web and app I've had a lot of caffeine today all right so that's it cut okay that meltdown there reminds me that I speak too fast and I've had a lot of caffeine and not a lot of sleep thank you kids uh so you can slow me down the coggers or the cogs over here isn't it there's a settings there you can do the speed down to like 0.75 I sound a little drunk but I sound maybe a bit slower and maybe easier to understand okay so do that next I want to talk about the design brief that we're doing together you are making I'm giving you a brief okay so and we are making our website okay it's going to be mobile website it is for a co-working space that it's about to open it's not open yet okay they're still building out the shop this is all fake okay they're building out like the the lighting and the seating and all that sort of stuff but uh they also are starting marketing okay so they need a website that basically just takes email addresses so they're going to be trying to drum up promotions and get people hyped up about joining they can't join yet they haven't fixed the price all that sort of stuff but they want to get emails in so that they can email those people when they do get ready with prices and show people around so it's basically just a simple micro site to capture email addresses and so that's what we're building who is it for okay super important it's often called the Persona okay who are we designing for so I'm going to give you somebody for this one so you've got an idea in your mind who you're designing for okay so I uh our ideal customer I'm retina down here uh is a woman named Karen Karen's in her 40s she's married with kids she works for a multinational company that is based in another country so she needs somewhere to work from that's close to home but that's not home because a lot of us have tried that and they don't work um so yeah she finds it hard to disconnect from work and family life she's aware of what a co-working space is already so that's good to know um she's just looking for her own professional space with a mixture of community so that is who it's for now it's really clear on that persona before you get started on building anything because if you try and build something for everybody you end up building something for nobody because it tries to there's just too many compromises and it becomes this blur nobody you know nobody can see themselves at that co-working space you know it's very different if it's going to be like uh you know young hip no kids looking to party kind of vibe at a co-working space which is plenty of them out there okay and then there's ones on the other side as well that are less Community it's more formal you get to use the boardroom and look professional and there's leather stuff everywhere so getting care about who it's for it's not always your responsibility as a ux designer but you need to push back often with the client get really clear who you're building it for because sometimes they don't know either but that's who we're building for Karen let's get started is he still talking we're gonna open up figma Heather next promise first up I wanted this to be like a follow along you know so you can actually open up figma and play along so I've created some exercise files okay they're free to download their Link in the description go grab those go get figma if you haven't already open it up and we'll get started and also there is a link to a shortcut sheet that I've made okay so you can print that off while you're working and kind of you know I'm going to mention shortcuts throughout it okay um you can have those you can Circle the ones that you like and try and remember them so go get the exercise files go get the shortcut sheet open up figma and let's finally start building something down okay all right first up uh go to figma.com and sign up for an account for this video you don't need a paid account you just need a free account awesome if you're new go through the welcome and find the new design file if you're like me and you've opened it before you can either hit this new design file or under drafts plus new design file doesn't matter pick one of them we'll end up here there's going to be a bunch of things that try and help you do figma that's going to be my job though so close those down and we're going to start with something called a frame okay frames have different purposes what we're going to use it for is uh frame of our mobile website so we're going to click frame and over here there's a bunch of templates okay so we're going to start with phone as our default okay I'm just going to use iPhone 14. if you're in the future and we're using the iPhone 27 use that okay whatever it is uh pick one of them doesn't matter now I want three of them okay so I've already got it selected if you don't you can just click on the name at the top here and go copy paste paste so we've got three of them okay and I want to name them okay so this first one here okay you just double click the title at the top here this one's going to be called home page this next one here is going to be called registration then confirmation enter nice not just the basic navigation hold down space bar just hold it down you get the little hand click hold and drag around okay and to zoom in is command on a Mac control on a PC okay and hit plus plus to zoom in minus the zoom out those are the basics and one last handy shortcut before we move on it is hold down shift key on both Mac and PC and hit one and it just puts everything in there watches if I zoom in I get too far and I don't know where I'm at shift one shows me all my artboards which is Handy if you do get lost you're like I can't remember all those uh remember there's a shortcut sheet to use or see there's a little if okay the figment f up here click this and it's got all that kind of normal stuff that you've got from uh you know you're more your desktop applications you can find it here view there's all the stuff there's all the shortcuts okay so if you do get lost click on that guy and you'll find most of the stuff eventually all right boring navigation over okay next up let's add some text uh that's the type tool up the top here you can use T on your keyboard it'll select it there's two ways of adding text you can click and draw a box that way good a body copy that means when you're typing it will break onto different lines okay different paragraphs but what we want is just uh another way of doing it okay is using the same tool and just clicking once and this will type on forever that's what we want and we're going to do it like a little mock logo okay we're going to use your own name so my name's Dan I'm going to do Dan's co-working not sure if co-working should have a hyphen I should check these things now I'm going to select all the text okay and I'm going to pick 16 for the font and the default in figma for font type okay or font family is enter interesting note the person who designed that typeface works for figma here you go basically whenever you like hit enter it goes back to this move tool which is handy because I can click off in the background and then just kind of drag it up into this top left kind of logo position all right that is how to add text now before we move on we've got Untitled okay how do I know it's Untitled it says it up there in the tab and just the cool thing about using something like this browser-based application is that you don't really need to save it I end up with lots of Untold documents don't tell anyone because they just save constantly because you're kind of working on a cloud-based version It's always backed up online even if your computer crashes but we'll save it because otherwise it gets confusing now you'll notice that I can see the word Untitled here and I can click on it to change it so I'm going to call it Dan's co-working it's going to give it like a version number okay I often give it a date number as well so I'll go I'm starting this in December okay and I'll put in the year okay and that's how I kind of know maybe you know where I'm at with this one I'm just going to use V1 in this case now if you can't see that it's because you've got the text selected see that goes away these are helpful but not right now because I want to save it so let's click off in this gray area the pasteboard here all right saving Done Right the next thing we're going to do is we're going to make something called a component I'm going to zoom in who remembers what the shortcut was command plus you got it control plus if you're on a PC how do I zoom around the place because I can't see it it's up there somewhere it's right hold down space bar click hold drag click hold drag and kind of roll your way up here okay I'm in close I'm not sure why but I want to turn this into a component what is a component it's anything that you want to reuse okay this logo is going to be on lots of different artboards okay we've got well they call them frames here in uh figma okay so I've got three frames you might end up with 10 frames 100 frames games is not uncommon if you're developing say an app or a more complex website okay but anything that's going to be reused you don't want to be copying and pasting it on every page because if you have to update one you're gonna have to go and update them all pain in the butt so what we do is we have it selected with our selection tool and then see this little button here okay create component click on that it drone sound effect nothing really happens okay except that over here I'm on layers I'm on my home page inside of home page there's this thing called Dance co-working see that little icon there means it's component okay components live on their artboard like we have it here but it's also under your assets it means later on you can go through and say actually I'm on this other page here and I need the logo again and I can drag it off okay and they are connected watch this if I update Dan's logo over here our Dan's co-working because we're like it's one word Dan I don't think it is I have no idea against your check can you see this updates so components are handy while you're working great for Logos think Footers check marks buttons everything should be a component because we're going to use them loads and loads and loads and they become shareable with other people on your team there you go now my one under my assets panel is called Dance co-workings probably not the name I want I just want to call it logo I'm going to click it okay and over here we can rename it so instead of called Dance logo or Dan's co-working I'm just going to call it a logo there you go you my friend have made your first component hides in the assets panel and you can still see them here on our layers panel could you zoom out to see it all please oh do you remember what it is what's a shortcut I want to see all my artboards shift one you got it both Mac and PC all right back to real life me I figured I'd jump in to talk to you in real life to basically beg for a like And subscribe okay that's what I do uh what is like And subscribe do it really helps me I don't think it does but it's a very good vanity metric and I look at it and I'm like people like it and they really like it they subscribe okay so if you like it like And subscribe and also know that this is kind of like a mini course uh for figma I've got a full course okay a full Essentials course is more complete uh and there is an Essentials and an advanced figma course as well there'll be links to those full courses in the description but for now begging over get back to the computer let's jump back into the next bit okay next up we're going to put in an image placeholder when we're designing this wireframe okay so wireframe is just a simple version that we can test really quickly it has no images does it has no good fonts no good colors no brand guidelines are applied to it it's just really simple just rudimentary that's why they call it a wireframe so we're not going to actually put in images we're going to put in a rectangle as an image placeholder so that when we're testing we're testing the like the flow okay of what people are doing rather than getting caught up in conversations about image okay oh that's the wrong graphic or you know that's not the right one or why we're using this for those initial tests you want to leave all of that out so image placeholder is just a rectangle there it is there click hold drag out some sort of random image okay and that is our image placeholder some people put lines okay grab the line tool so under here under rectangle there's a line and some people like to put lines either side okay that is the image placeholder there's nothing wrong with that I like to use little icons and that's what we're going to do in ours we'll get those in a bit but while we're here let's get this some basic starting so radius okay so I've got it selected here if I hover over it can see little dots I can click and drag those okay fun fact if you hold down option on a Mac alt on a PC you can do one at a time we don't want to do that okay uh with it selected you can either drag those or you can just type it in over here I want 10. thank you very much okay and what I want you to do over here is pick a fill color any color just one though for the whole wireframe okay it can be anything except for this color there's idiots okay pick one color because again you do not want try not to even pick the brand color because you do not want to get into at this stage conversations about color that's for the High Fidelity or kind of like Hi-Fi version okay so click drag it around so yeah you drag the Hue to find the kind of right sort of Zone that you wanted to be in I'm picking a greeny teal color and then you drag and hear how dark light saturated unsaturated it is okay so find something and hit enter and it stays open at the cross let's give it a stroke okay the line around the outside so I'm gonna hit plus I'm going to leave it uh three okay three pixels for the width okay or three points and in terms of the color I'm just gonna you can see there's no like black or white option basically what you do is you just grab this little dot so instead of being red just go and you kind of drag it past over here and then pick something that's gray anything in here has zero color so it doesn't matter whether you're here here it's the same gray okay so I'm going to pick so I'm going to agree and hit enter and then it cross okay so just hit the cross all right so we've drawn a rectangle uh let's add some type so grab the type tool T key on your keyboard and I'm going to click once in the middle because again I want this text to kind of keep going I'm going to actually make this centered so it goes from the center and you'll notice that well there it is there so I'm going to click in here I'm going to say opening in January you do the same okay I'm going to select it all pick uh we're not picking a form we're leaving enter because it's good it's not going to offend anybody I'm looking at you Papyrus okay uh into pick something like open Sans or Roboto or into something that's not going to again Drive conversation about what font we should be using you can definitely play with the hierarchy okay of fonts so in this case we can use like a bold and make it a bit bigger so make it these sizes for me but try to stick to just one font for the moment okay the cool thing about figma is with the selection tool which it always defaults to if I click off in the background a couple of times nothing selected if I grab this and start dragging it look at all the cool stuff that appears like it's like did you mean line up with this no this side in the middle of the whole page yes oh so good it's really handy watch this I can kind of move it like oh look it says would you like it to be 14 pixels like right in the middle you're like yeah that'd be perfect it's not what I want right now but middle of page oh it's so good automatic alignment is nice all right next thing I want to do is I want to draw a button and again there's no like create button button okay it is just like create a button using the rectangle tool you're like should be fancier but it's not okay and again with my selection tool widget defaulted to I can kind of get it in the middle of my page by just dragging around and eventually goes hey do you mean oh there middle of the page there is fancier options at the top here okay where you can line things up but often you can just do it with by dragging it now awesome now the next thing I want to show you is that you know we can go through here and I wanna I wanna make this consistent color I'm not going to use gray and then green and then purple so I'm going to select on this I'm going to go to fill and you'll see there document colors look at that it's got my green in there great and there's the gray that I use for the edge so I can go through and do that you could do that like we're going to make so many elements in say an app or a web design that man that gets tedious so I'm going to undo I'll show you a cool trick for figma is we'll select this because it's got everything we want rounded Corners thickness color okay so we go up to the little figma option and go to file and go to edit okay and then down the bottom here is one called copy properties you don't have to learn the shortcut but no one's a handy one copy properties paste properties okay so a mine that hieroglyph there is option Command MAC and I'm guessing you'll have to look on PC it is probably alt control see a bit double check for me so I'm going to go U and I'm going to click on this one and then I could go back but I'm going to use a shortcut command option V oh look at that control alt V okay on PC probably okay and it will just copy and paste so you'll end up using that a lot just to get everything kind of styled the way you want there is fancier ways of setting up proper Styles and defaults and those sorts of things but for the moment Perfect all right so now let's make this an official button because at the moment it's just a rectangle it's shaped like a button okay uh first of all it needs some text I'm going to have the type tool you can click inside things and start typing okay I find it's easier just to click off on either this gray area or just somewhere where you know there's no other parts sometimes you can turn boxes and text boxes and it's just easier to like do it over here and go I'm going to type in register register pick the right font size 16 just so you know is a really common font size that everyone can read accessibility issues are you know there's no problem with the size 16 up to you I'm going to pick medium I want them to be all caps okay so text has this box here but you can actually expand more okay and there's a bunch of other text options in here and I just want this one uppercase okay down the bottom here nice I'm going to get it with my selection tool close that down and just drag it into the right place at the moment of kind of highlighting the text I've got to kind of click off you see it changes a bit now that's easier to drag and again I can use my alignment tool you know I can get it here select both of them align align them okay but what I want to do is well actually what I do all the time is with that selection tool if you just drag it close let's zoom in and see the magic of figma zoom out a little bit here we go so watch this I can just drag it in here and look oh do you mean halfway in between there you're like yeah like right in the middle look at those crosshairs it's very easy to do quite intuitive so that's gonna be my register button now it's still not an official button until we select both of them so my selection tool we just you need to shift click both of them or just drag a box around the two and then we're going to make it a component remember anything you're going to reuse just make it a component because we can update all of the Imagine buttons you want to change it I don't know your client cards back and says actually 10 points not quite right can it be nine point and you're like sure and you have to find every single box and change it whereas if we make it a component okay we can change one and they all change so I've made a component over here my assets panel there it is hey I've got two components I'm going to change the name of it okay let's call it button nice welcome to the world button all right let's Zoom back out remember shift one and we're out okay I'm gonna make a uh what's called a UI card down here so a UI card or a card a UI is user interface ux is like the design process ux is more of an umbrella term covering lots of things including like ux research planning deciding what the kind of customer journey is going to be what you want them to feel how you want them to get there as well as designing the elements on the page these page Furniture Parts these page Furniture parts are UI user interface okay so we're doing UI design work right now as part of our role as a ux designer what makes ux kind of bigger than UI is that there's a lot more like for me you know for us in this video is going to be a lot of testing involved okay getting it in the hands of clients and then coming back and iterating whereas UI design is more just the actual mechanics of making this stuff which we're doing so as UI what is a card uh UI card is like a reusable unit I found a few for you there they are so I just picked a bunch of sites and they all have of them this is generally called your what's it called your hero or your Jumbotron okay this big kind of marketing message and image okay then down here let's have a look I think I've got some there These are nice reusable things they can make 100 of these and they'd all have the same sort of structure okay uh icon hitting so many words okay let's have a look at a few other ones HubSpot okay there you go this is another one you've seen these on kind of like pricing Pages as well like the you know the recommended the free the Enterprise okay these are ones weeds me out that I've only got five I really want six fill this whole HubSpot okay um but these are cards okay they look very different but that's the generic term one more you know what I'm talking about there's another one uh not those these most reusable they can have these going forever okay image there's a some sort of like subtitle title oh the padding I'm just gonna go around the internet judging other people way better designers than me I'm gonna go judge their work anyway uh also the funniest not the funniest but like I feel like the about us um cards if you have a person they have to be in like a round circle these ones animate which is kind of cool but you can see I just put our team for some local businesses and like you have to put people in heads for some reason you know if you are sorry if you've got a person a headshot it has to be in a circle there's another one all people in circles okay don't put images in circles just head shots and circles these are cards let's just make one Dan and for somebody who's very judgy about design we're just we're keeping it simple on purpose because it's a wireframe all right to do a card they're going to be features of the co-working space so I want my rectangle tool again well you'll get to a point you're like man I'm sick of going up here look ah key it's rectangle I know that one and use that one quite a bit t for type 2 R for the rectangle tool can see it jumping over here V is always the move tool I'm not sure why move okay let's go the r key and I want to drag out a rectangle how do I drag it out so it's perfectly Square you're like I know I know that's right you do know it's hold shift you got it go back hold down shift and then drag it out you get like a perfect perfect rectangle perfect height and matching width Square get something like that now depending on how far you've gone in your document you might be able to just use your shortcut and paste the appearance which is really cool okay in my case command option um command option V or control option V on a PC okay so if you haven't got it though and it doesn't work go back up here remember and we can use the long way just for those people who need to go this way okay copy properties back down here you you and paste properties there you go scrub the type tool click once and I'm going to say bottomless coffee bottomless coffee it remembers the last typing you did okay so it's all uppercase for my case and I'm happy enough with that okay bottomless coffee I'm gonna pick something like what fits in there 22 doesn't let's pick 20. all right oh okay nice so too big 18. keep move on then move on all right 18. that's it let's see the last one and the next feature is probably it could be my fast uh fastest it could be my favorite feature in all of figma okay it's called smart selection and what I want to do is I want to do a couple things I want to make those not centered because it remembered I wanted Centered for this text this one actually can be left alone because I need a few of these and I want them to align to the left okay so I've got these two selected I've got them kind of lined up how I want and I'm going to select both of them I'm going to group them okay so I know the shortcut is command or Ctrl G I have no idea where the long version is it's in here somewhere you wait there there it is found it okay sometimes you end up just knowing the shortcuts way better than where they are in here okay so I went to U object and group okay so I've grouped them together so now when I click off they're actually just one unit Okay so we've grouped them what I want to do though is make a couple of versions of them okay I want there's going to be three different tiles so I'm going to you can copy and paste there's a shortcut a shorter way in figure this is not the super secret awesome thing hit control or command D and you can see it says duplicate I'm gonna do it again so I've got three of them you're like where are they they're all stacked on top of each other which is good and bad I guess but now we know so I'm going to drag one down how far about that sort of far the next one though I want to drag down like how far I wanted to be the same what if there was a way that it magically just went did you mean that you're like yeah exactly the distance 21 uh pixels in between all of them that is not the feature again get to the feature Dan so while all those are great duplicating Auto aligning things what I really love is selecting all three of these now okay and basically you want to hover above them can you see this little dot kind of appears and I can kind of hover above it watch the actually let's change the text so I need to go into this one and this one's going to be I'll speed this through okay so these are the features okay I'm gonna select them all again and now it makes more sense when we drag it watch this see this pink dot here and you're like actually the client wants to move it around you're like here we go look at that I did nothing I grouped them that was it and there's this magic power of smart selection okay just select them all and you can adjust them okay you need this one to be the top drag it around just snaps and remembers all those spacing now this is only like a three stack let's imagine you're trying to do something and it's like search results on your app okay or product listings or something Big And Chunky okay you can drag these things around super easy without making anything really just all I did was group them so they knew that they came along as a unit cool huh I love it and it gets better watch that see this what's that line in the middle what's the no way ah oh look at that the little pink line can be dragged to adjust them all we're only doing three again but imagine a thousand okay not a thousand imagine 100 of them all listed here that you've designed you just need to increase the spacing a little bit do nothing just select them all go to smart selection okay let's add our little input field so when people hit I want to register it's going to go to a registration page and we're going to put in an input field which is just like a text box that people can type in and if you thought this was cool with smart selection you can just readjust them input fields are way less fun you've just made an input field okay like the placeholder image input fields are just like representing in a book field if figma can't actually make one a user can type into okay you can go further something like protopi or something like that can actually make some of them more mechanics but you can get the feel for everything and yeah so uh input field here uh is just going to be filled with white it's going to have a stroke of one I'm going to pick a color that is some sort of gray my match the gray that we're using for the stroke around these other boxes here and you my friend have just made an input field okay to make it easy either add a label explaining maybe this is the email address I like the hinting you know where you type in email and it kind of it's kind of grayed out inside of it okay so I'm going to use 12 and I'm going to make sure it's in the middle by just dragging it around color wise I'm going to pick that same Gray game people can tab over that sometimes you put sample at website.com you know just so you know people know where to fill it in I'm gonna have a bit of text at the top I'm going to borrow this so I'm going to copy and paste it you can use command D you ready for one more shortcut hold down the option key on a Mac ALT key on the PC before you drag it you see now click hold drag and just makes a copy as you're dragging it lots of ways of doing the same thing that's okay so we're going to be and this one's going to be let me know let me know okay they enter the email address and then they hit the submit button next we want to button the submit button now hey remember we've got that uh now assets panel here look we've got that button that we made look we can drag out another one of it okay it doesn't really matter whether you drag it officially out of the assets panel or this one here was the component considered the main component the first one we made I can duplicate it using my command d right to them okay or alt dragging or option on a Mac alt on a PC okay either way what we've done here now is let's go back to a layers panel I want to describe just a tiny bit about our components so this one here is the first one I made is it I got a couple of each other I was like that doesn't make sense okay now it does command D is that or Ctrl D on uh PC is that you end up with two of them right at the top of each other and like me you might get confused okay the difference between these two so main component this is called an instance of a component why is this important main component the difference visually can you see this in my layers panel it's got that kind of Icon here that we saw earlier that's the icon for main component click on this other one up here on our registration frame it has got an empty Diamond okay that is an instance of this okay why is it important it means that I can adjust these instances we kind of looked at it earlier but I want to make it clear so I want this button they're not going to all say register I want this one to say submit okay so that's really nice the cool thing about it is that there's still controlled okay this main one if I make changes here if I click on this and decide to pick a new background color can you see I can control all of them on my huge big uh you know figma loads of frames everywhere lots of different pages mobile desktop layouts app layouts I can control by updating this main one okay and it flows through all of them but I can do something called an override okay which means I could update the text on this one okay let's make another one okay another instance of the main okay and I can do a different one on here I can say actually let's change this one to a fill of white and yeah just a fill of white okay so I can do little changes they're called overrides overwriting this main one but I can still make big changes like look at this hey okay so main component instances of that main component and I have these overrides you can go into them and say actually I want to get it back to where it was so click on it it's an instance of button there's this little option here okay and I just go say reset it back to normal please okay and in this case I'm gonna what do I wanna do I'm gonna go back into here I'm gonna get you back to that main color I've got and I'm happy for that just to be submit other cool things is like say we change the text let's say we want this now to be bold can you see that flows through if you change anything on these instances it will keep them anything you don't change and you adjust here in the main will flow through super awesome think any sort of navigation option arrows buttons menu items cards we didn't turn ours into a component we totally could have and should have because we can update one they all update the moment they're all just separate groups but if I went back in time okay instead of just grouping them I'd make them a component so that when I do update because at the moment if I update this one you see it's all on its own but now we know the power of uh components where there is a main component in an instance I would do that I turn it into a component rather than grouping it there you go all right for now let's just throw a bit of text here on this last page here confirmation page just to say thanks thanks we'll keep you you can watch me type hang on all right and we're into a problem we I wanted to break onto two lines I could fake it just put a return in okay I won't tell anybody if you won't tell anyone uh more officially you can't over here remember I said you click once you get the box that goes on forever and if you click and drag you get a box with edges and it breaks okay you can transform it watch this if I click off kind of have it selected here watch this that's my forever going on order width box there's this one which is auto height okay it just means now if I change it to that and I resize it can you see it actually has a like a boundaries that it can snap onto different lines or just put an enter in I won't tell all right next thing I want to do is just paste them places a really handy one it's kind of simple but super handy earlier on in the class I just made that one by copying and pasting it or alt dragging it and you can kind of get it to how you want you're like okay and it's really easy though is when you do design on one artboard or one frame you want it on each of them okay is to select it okay I'm just using my regular old copy so command C on a Mac Ctrl C on a PC just the regular old one and then I can click on this one and this one and the other 100 app boards that I've got and just hit paste that same shortcut that we know and love command V control V can you see it puts it exactly on the artboard where it was on this first one super handy when you've like updated the nav and you just want to like flow through all did you hear that I I said flow through and I wave my arm around and then almost knocked my plant off my desk anyway um so where was I okay paste in place great for Footers and anything that's like on every single page a background graphic the one on all of them just copy it off the first one select all the titles up here I'm holding shift to select more than one and you can paste them let's do it with this Let's Pretend This is the footer okay you you and paste powerful simple awesome right shift one and let's talk about using the drawing Tools in uh figma we're not you know this is a mini course I don't want to go into like all the detail if you do want to go into all the detail I've got a figma Essentials course which is a nice big course and it covers everything in figma in a lot more detail there's a link for that in the description but for now there'll be a lot of people transitioning like you can draw rectangles and shapes I'm not going to cover all of these the pen tool if you've never used it before is kind of out of the scope of this mini course as well but you can draw stuff you can draw just fine in figma a lot of people maybe not you maybe you okay will have skills in others software like Adobe Illustrator it'd be pretty common to you know especially for me to flick between figma and illustrator Adobe Illustrator here it is okay is a vector drawing program okay its only job in the world is to draw stuff so the tools in here are amazing figment does most of the basics mostly fine okay whereas illustrator does everything it's beautiful so I want to show you how these guys interact and it's pretty easy let's say I need this this is my image placeholder icon okay that I like to use so it's in here it's Vector I can do cool stuff in illustrator but how do I get it into figma oh It's Tricky you copy it go back to figma and hit paste there you go I'm going to turn into a symbol uh sorry component just because I think that's important okay because I'm probably going to use it multiple times and if I want to change one I can change them all there you go I'm just going to use that that is how you work with illustrator copy and paste it let's look at the something slightly more complicated I'm doing this may need to show off in illustrator and get you to consider uh consider joining my illustrator Essentials course I like this guy I like to do illustrator with them that's my goal I also the way I've wedged this in is that I want to show you like if you've got something more complicated figment can generally deal with it but if there are problems I want to show you if you're an illustrator user how to kind of conquer those so that you've got a nice flow so I've got these two lines that I've drawn okay and they've got an interesting stroke on them I use the width tool to get it okay and I want to blend these two together so I'm going to select both of them okay I'm in Adobe Illustrator okay I'm going to go to object I'm going to go to blend I'm gonna go to this one called make okay and if I do that I get a big line in the middle you're like kind of cool I guess if you've tried to use the pen tool and try to match two lines that is actually really handy but it gets better okay over here under properties there's one called blend options I can say actually instead of smooth color let's go specified steps how many steps five looks good because I've already practiced click ok oh look how cool that is lithograph kind of things nice now this will copy and paste across mostly but if it does have problems because it's like this weird blending thing and there's all these Strokes going on sometimes just so if you're doing something complicated in illustrator the way to get around it in this case there's two things to do object blend there's this one called expand and kind of look at the graphic it just kind of goes instead of this like active thing that I can change it's now just all these lines and the other thing I've got this fancy stroke on it sometimes those Strokes if they are super fancy figma will freak out so what we can do is go object path and outline the stroke as well okay so go blend and then expand it and then path and outline stroke and Jim Lee that will fix all problems if you are using this kind of Illustrator to figma so copy it now and into paste it and the cool thing about it is because it's Vector it continues being Vector I'm holding down shift so it doesn't squish okay but look at this end I'm not sure why I need that big and but I've got it this size if I double click it oh look the individual strokes and if I double click it again the edge look at all these nice beautiful paths that I can start messing around with okay so the illustrator figma connection is strong I'm going to leave this in here because I'll use a little bit later on for our high definition version but we'll hide them over here not ready for you all right the next thing I want to do is uh bring in the burger menu okay let's zoom out now shift one is going to kind of work now showing me everything including the stuff in the pasteboard so yeah if you get a messy pasteboard if you if you're that person the messy piece board that ends up going on for like ever with all your workings and scribblings that can be trickier so then you have to go back to command zero back just 100 then you're kind of at a good view Ctrl 0 for a PC okay let's bring in I'm jumping to illustrator the burger menu I'm going to copy it okay nav sandwich mobile menu whatever you want to call it okay we're going to bring them in so I'm just going to paste them in what I want to do is add them like I could put him in position like we did with the logo copy it select this one the name of the um frame and go shift click this other frame hit paste and go on both of them and that might be enough okay I want to actually add it to this component okay we made a component earlier and the handy thing about components is if I add stuff to it it's going to flow through all the rest of the document so what I'm going to do is get into position and what we'll do is I'm on my layers panel now okay so assets we were before I'm going to go to the layers panel and what we can do in here is we can actually find my home page frame there it is there and you'll see right down the bottom where is he his logo because this is the first thing we made it keeps getting pushed down what I'm going to do is Select it once click hold and drag drag to the top for no good reason other than it makes it easier to see okay and I want this thing called frame which is a terrible name for it it's uh rename it double click it over here call it Burger menu you can name it even though it wasn't we haven't converted it into a symbol okay one thing you can't do oh sorry component you can't put components inside of a component there's my main component we know about the little Diamond I haven't made this into a component because I'm just going to put this inside of here and how do you do it oh look you just put it inside of there that's it just kind of drag it in between so I've got logo which is the kind of like wrapper inside of it there's some text now there's a bigger menu with a group inside of it just the way it came in through from illustrator nice oh yeah and this special thing I was meant to be showing you look it appeared on all of them hey so when you are working on that 50 page or 50 frame document adding things to existing components just spills through nice and easy go components okay we have a pretty good looking wireframe here okay it's pretty simple but what we're going to be testing now generally called the user flow like I now want people to sign up so I'm going to test that on people to be able to click this button enter the email address and then go to the confirmation page and then probably once they're finished uh go back to this home page again that's what I want to test I know this is pretty simple there's a mini course we're doing Simple Stuff off you might be testing a cancellation flow or buying a purchase adding to carts canceling your order changing your delivery address all sorts of different user tasks or user flows that you've got to try and test how's his email sign up how do we do it okay we've been in this thing called design we do most of our work in here until we're ready to get this ready for testing okay and go to this option called prototype so click on that a couple of things we're gonna if you've got nothing select if you've got something selected it's different okay so if you have nothing selected in the background just click on this gray area prototype what device I'm going to use the device that I kind of chose obviously there's lots of different devices you can preview one match the frame size that you picked at the beginning what model phone very important okay the midnight one the blue one Starlight did anybody buy a purple one I know one person Victoria Rotel uh so let's go to I'm going to use midnight and then stop spending so much time picking the frame of my phone what happens now okay what we do is we click on this button and you'll notice that we don't now have all of the colors and fonts and sizes in rounded corners and a prototype okay we don't have a whole lot going on but you'll notice can you see if I hover above this thing there's this little Plus on any of these Corners you can just say where you do it doesn't really matter so I'm going to click hold and drag that little plus oh look little arrow pops out click on and just get it close to this frame look Bang boom there you go add your own sound effects and what it's going to do is when this thing is tapped navigate to the registration page animation instant so it's not going to have any animation oh let's do the submit button so click there it comes to this page click on this one comes back to well actually the difference between because this is a symbol they share the same wire so this guy said go to registration page this button also says go to registration page that's why the arrow is a bit confusing you're like well they're both going the same place you're like actually no I'm going to do an override I'm going to say you go here there you go and then people are going to get stuck here forever so what we're going to do is say when we get to this page people can click on the logo and go back to the home page there we go all right let's preview it now it will preview whatever page you have selected okay so if we go to home page remember spacebar to jiggle around click on the word home page then this is your little preview option click on it present you can see there's a shortcut there click on it and it will load it in another tab in our beautiful beautiful iPhone 14 with the notch I hate the notch you Notch lover anyway and I think there's too much screen real estate going on so ignore the logo disappearing into the notch we'll fix that uh let's click on the register button oh look at that and jump to our page we pretend to type something in you can see there I try to type in here and it gives me a suggestion actually like just click that button move on please okay so click on submit and thanks we'll keep you up to date hooray and we're gonna go back to the beginning click on the logo nice what's really cool about it is because these are just different tabs I can drag this out and I can make it a bit smaller you know because I got an iPhone it's a pretty small and skinny okay I'd probably put this over here on my other screen that you can't see okay I just have it over here and I have it open the entire time I'm designing why because it's really handy look I can make this browser you have to do some like browser dragging and laying out if you're going to do it on the same screen okay just have it on another screen if you've got it okay over here shift one watch this I've got this thing I'm gonna shift I'm going to shift click both of them actually I'm going to go back to design view that's one thing that even me like I use it all the time and I'm always like oops not the right thing prototype design prototype design okay we're gonna be in design because I'm moving things around I'm going to zoom in actually and I'm going to zoom out again I'm going to U hold shift and U I actually just grab the whole logo and they should all come for the ride and watch this if I drag it down look what's happening over here look oh there's a spec of a delay but look at that working in one and updating over there then what I like to do is kind of grab the sides of it and actually like this is a bit caveman but I get my phone out I'm doing it right now you can't see me I'm getting my phone out and I'm holding it up to the screen to get it to the rough kind of size because I want to sometimes like you're picking font sizes and you're using this giant screen you might pick a font size you might pick 10 or 8 and you're like yeah look it reads good because it's a ginormous phone okay so you make it the same size as your screen and this is not gonna yeah it's gonna be different on everybody's screen and I'm holding it up that's about the size of my phone here I've got a crappy Google pixel it's not crappy it's just old and the screen is all smashed and okay but I have that open just so we can get a sense of scale and size okay and it's totally usable as I'm working I can change things I can say u under prototype now are I'm gonna click on the this little wire here to say actually animation now it's going to be I'm going to get the next one to slide in okay gives you a little preview there but now over here let's go back to the home one oh I don't have that hooked up on that page there so let's go through the flow oh look it pushed in back to the homepage watch push in so you can kind of just make your adjustments and then just have this open all the time super handy good work figma all right so we've done our own testing okay now we want to share it with our often called stakeholders not a fan of that word but it gets used a lot who does that include it might include well it generally includes say the client it might include your product manager or your studio manager it'll include the Persona so remember Karen or people who kind of represent kind of Karen's to do the testing okay we want to send it off to them don't forget to include your developer as well the people who's gonna be building it it's great to get them in on the you know what you're doing at the moment even at this real primitive stage it's so I get so much feedback from my developer okay when I'm doing stuff and he's like why are you doing it that way you're like huh oh yeah we don't do it like that on these other Pages why are you doing it on this page like hmm so stakeholders for your project might be small it might be a huge amount of Team you might have lots of people that you're working with as a ux designer or you might be a one-man band like me and your stakeholders are often the client and the users and don't forget your developer so how do you get it there's two ways of sharing the let's look at this way okay and I'm in my figma file shift one I'm going to go up here it's pretty clear sharing okay I'm just going to copy a link it's pretty good okay if I just copy a link I can just email people that link okay and this is what they say let me open up an incognito window let's paste it in so even if they're not a user for figma they're going to be tried to you know and figma really wants people to come in and sign up you can sign up with a free account okay and view this you can actually just ignore that and they can have a look okay and they can check out your work if they want to add comments though then you've got to log in or sign up okay but they don't have to pay which is cool but you can send it to them and ask for email feedback but obviously adding comments is a lot nicer to the actual document because you actually put them on the different parts you want to talk about so I said there's two ways this way is kind of like a flat way uh where uh you know just all kind of laid out nicely if you want to send just the Prototype because they can play it right you might send it to your say your boss and say well the client and say hey what do you think and and they know and you can coach them to say you know when you're ready click on the play button and it will open it up I'm still my client here okay they haven't logged in yet okay it still wants them to but they can still interact with this thing okay which is really cool what you might want to do though is sometimes you're working with somebody that you know is just gonna it's gonna to baffle them all of this extra stuff you just want to send them straight up to that preview and you can do that by proving it yourself okay so close all that down preview it yourself like we did before here it is okay and there's an option up here to say share okay and if you share this one it'll just share the Prototype okay and I'm going to open up uh incognito window it's just a private browser window that I'm logged out of just so that I can show you what a client would see or a customer or a user okay and you've seen this to say your testers okay to get some feedback again they can go through and they can use the product and kind of gets rid of that first step so you can either send the whole flat upwards or you can share from the preview or the presentation making this work with us awesome that is how you share your amazing little wireframe that we've prototyped using figma what do you think it's cool huh it's one of those times where because up until now there's been you know there's been some fun things like this smart reorder you know that's cool um but it's not like maybe not enough to move from say something like illustrator to do mock-ups or photoshop or I don't know Microsoft Publisher the big difference is when we get to this prototyping stage where we get to easily quickly wire these things up okay and get them to do different animations and actually make it feel like a product that's why this is like rapid prototyping quickly draw some boxes and we've drawn all our elements what you'll find is once you've got a bigger menu that you like you'll use it for all your jobs you just open up the old one copy and paste it out there's lots of free templates and other people's work that you can borrow I say borrow inverted quotes steal from them okay the UI components that are shareable so things get really fast in something like figma rapid prototyping awesome whoa what are we doing here in Photoshop you ask well figma is great you can do a lot of things in figma there's always going to be a time though where you need to jump out to something like Photoshop or some sort of photo editing now if you're following along open up the exercise files and there is one called office okay so open that one up in Photoshop remember there's a free link for the exercise files if you want to play along check it out in the description okay and open it up in Photoshop and a lot of the time like especially stock photography is all shot at this landscape kind of I don't know rectangular laid down version they know what landscape is then but we when we're doing for mobile websites which is becoming more and more common and apps we need this kind of portrait version so your best friend here in Photoshop I just want to get you um I don't know they're going to be lots of people with Photoshop skills and I want to show like hey you've already got great skills in the ux design world with some of the other more I don't know traditional design tools we're just adding figma to it and I want to show you how they connect okay so we did illustrator let's do Photoshop and extending this so it's kind of portrait is the world of something called content aware there's lots of different cool content to wear stuff in Photoshop but I really want to go in and show you it all but for now let's just do something simple so let's grab the crop tool okay fifth tool down here the top one there okay and what we're going to do is turn on the content aware there's lots I want to show you but for now let's zoom out same shortcut command or control minus okay and just drag it up so it's kind of I don't know a third bigger ish it's not I don't have to be perfect here and with content aware on I hit enter on your keyboard or return and watch it oh look at that more background magic Photoshop is amazing for this sort of stuff extending background especially it's even better with things like natural backgrounds Skies grass sea but for me I just need this for my buttons and text okay next thing I want to do is I'm going to do something a little bit destructive editing okay if you do my course for Photoshop you'll know non-destructive is the key but for now we're going for speed so go to the adjustments panel if you can't find it go to window and go to adjustments okay and we're going to go this one called we're going to use levels actually no we're going to do a slightly different way okay we're gonna make it just simpler for the people who don't have Photoshop skills okay go up to new layer I like go to image go to adjustments and we're going to go to this levels so slightly different it just makes it a little bit easier for this course here the panel open up on a different monitor you drag it back across so people can see it I also need to drag this little house here I just want to darken it down explain what you're doing then I want to darken it because I want text to be easily read over the top of it there are tricks to doing it in figma as well but for the moment I'm just going to drag it down somewhere in the middle-ish okay and click ok so now we've got a nice dark image I like doing it that way with the levels there's lots of ways of doing it I find it still retains some of the goodness of the image while still letting text go over the top now what we're going to do is go back to our move tool and to get it into figma at the moment the easiest way is just to go select all you can save it out as a JPEG and import it again but let's just copy and paste it let's go to select all okay and then go to edit copy and edit paste okay so jumping back into figma and I'm just going to paste it straight in here now it can get in the wrong place it depends on whether that freaks you out or not sometimes it's easier just to hold spacebar go to a nice safe part and paste it in here then you can grab the corner and hold down shift okay and you can scale it down to something more reasonable often images especially stock images will come through ginormous I've made mine reasonable so it didn't freak everyone out too much but sometimes it can be really big so just do it on the side scale it down then move it across and I want to move it so it kind of can you see it just kind of like snaps in there eventually and I kind of want it about there if it doesn't go into the right place and this is really common in figma if things especially if they're large they won't go into the right part you're like get inside my homepage why aren't you in my home page check over here go to your layers panel I've got this image it's not in this Frame it's not in my registration frame okay they call them frames I call them Pages or artboards but technically they're frames most people are still referred in those pages okay registration not in that one I want it to be not in confirmation home page why aren't you in there watch this here's image I know it's him I'm doing the eyeball on and off that's the guy okay new drag drag drag drag home page hooray now I can do one of two things I needed to be behind everything on this page how do I do it I can right click it and go to Center back or you can actually start using your layers here if you know them from other programs and just go drag drag down to the bottom there you are we're at the back hooray shift one and we've got a background image that we can see text over the top and if you weren't able to make that dark background because you're like I don't have Photoshop or I don't know how to use it yet check out your exercise files there's a catch up file in there just saying I've made one that's already dark you can use that one import it or just drag it in and start using this one um if you do want to go further with Photoshop as well just so you know I've got a Photoshop Essentials and an advanced course and I promise you even if you're a dabbler in Photoshop and are reasonably good there is some amazing stuff that I bet you don't know about it check out the link for my courses in the description cross-sell the other thing I want to point out here as well is that we've done our testing and we have now moved into the High Fidelity mock-up okay so we do our testing it's come back we've made some changes if we need to on that first wireframe that's kind of as far as we can go with that first wireframe mock-up now we need to start adding a lot of the things like the right fonts and the right colors and the right messaging the right imagery and that stage is called Hi-Fi or High Fidelity the pretty version so we've added a background image to get started next let's look at using some corporate colors awesome brand colors so you might have brain colors listed in a manual in your bottom drawer of your office that you've haven't opened for years okay and it might have all the from brain guidelines you might be the person who knows their numbers off by heart and for me I work on lots of different clients so there's a lot of times where I pull it from other documents so like something like illustrator most of this software is the same InDesign After Effects let's say I want this I'm going to call it watermelon Peach no you have a bit of name for it and I'm going to click on fill and what I'm looking for is the often the RGB number is easily more easily represented as the hexadecimal number same same it's just a different way of doing it so I'm going to click on it I'm going to switch to this like little color mixer and I'm not going to be on CMYK I want to switch it up here to RGB you can type in your igbs or grab that that is representative of those numbers and I find them easier to remember or at least copy okay so that's it FC uh 7 f for E I did it okay so I'm going to copy it and jump into figma and I'm going to say I want you to be that color so I'm going to go to design not in Prototype because everything was disappeared under fill I'm just gonna see this is here the hex number there it is I'm going to click on it it doesn't really do anything until I kind of like click out here there you go it's the right color the cool thing about it is once you've put it into figment it's pretty clever watch this if I go to I don't know the text here I want it to be the same color I don't have to keep pasting it watch it'll just appear in my document colors here here's that document color it's not what I wanted find a colored text I've got to kind of double click it okay or triple click it because it's a what is it it's a component then go to fill and there's my document color nice nice the other thing I find easy is just to copy and paste stuff into it it's pretty clever especially as Vector okay so I'm going to grab that copy it these little group here or actually underneath these two now so I'm going to copy them I don't really want the rectangles but if I paste these in okay uh to here and watch oh I've picked a green that's very similar did I actually go and get that or do I just accidentally give it the right color so what's that o4d what is this one no just very close um let's have a look this slate color here then so let's see if I've got that Sleek color let's change this one so there is that slate color hello no it's not there it is there there's a say color so all my colors just come across easy on brand it's the right colors what I'm going to do is color these backgrounds so the color the background of these um what are they called These are called frames but we also got them Pages if you click anywhere in here not on the text because this will get all filled up make sure you're on design click anywhere that's like nothingness in here okay look there's the background color I'm going to say actually I want you to be that slate color nope that's the background of the whole thing let's click on the actual um frame over here so what we got this is the registration page yeah Dan knows what he's doing okay and there's the full color of the background you kind of selected like a whole rectangle sorry I get confused between figma NXT they're very similar programs and I use them kind of interchangeably sometimes I get a little bit lost there you go okay so let's go to fill so I've selected it like a rectangle okay the registration page okay which is my frame it's just a rectangle and now I can say you are that dark slate color and you my friend okay are going to be with confirmation there it is there and I'm going to say you have a fill of I'm going to use that color there just to bring in our brain colors I'm going to quickly using fast forward mode go and switch these okay because they're all the close but wrong colors so you wait down cool so first of all whatever you do don't pick a you know a wireframe color really close but not the same as the brown color that you plan on using later the other thing to note is that I only had to update this once okay remember this button here remember one of the perks of being our component is when I select it and I change the color okay let's double click it no not the text okay to the edge of it you see there we want to select the text you've got to kind of like click in the background so I want this remember we can change this and they both change okay here we go and then I found it easier to actually just type or paste the hexadecimal number and rather than picking it down here because they were both so close and after a while what you'll see is can you see there's only one green there now that means it's showing me that in this document only these colors exist so there's only one green now which means good I've only got one green there are better ways of doing like Global Styles and again that's more for the big course but for the moment we're making it work command zero to 100 percent there we go we've got some on-brand colors all right let's go and update the fonts now to our High Fidelity One the brand may already have one is you have to go pick one as a designer again kind of too deep for this course but a nice little hack is to go and Google something like this like Google fonts is basically what figma uses for its fonts okay so if you do Google font pairing you will I just switch it to images and you just have a little search through so let's just pick something something quicksand and quicksand [Music] um when I say pick real quickly it's been ages trying to find a cool friendly let's do this all right that one rubric and overpass let's see if we got it rubric oh I like it I'm gonna use uh off-white and let's try overpass in here oh I like it all right there's enough for now I'm not sure how I'm feeling about Rubik in my kind of fonts here but I'm definitely liking overpass new favorite font all right let's add some more high fidelityness I'm going to switch out this graphic and get rid of that little icon there because that this little graphic down here I'm going to group it command G Control G on a PC it's going to be my like little hero graphic there and I want to fill these with images so to do it uh you keep clicking them until you've actually got it selected and you can see the fill like it is there's that green you can click on this and you can go to solid and we can say instead of solid color we're going to fill it with an image please one image pet friendly I'll choose image better exercise files I got a couple of them facilities three okay is my pit friendly guy hello got a bow tie uh bottomless coffee I'll close that double click find the green U image choose image and bottomless coffee is number one I move these around they were in order I promise but we played around with that smart selection and reordered them around uh close that down double click you you you you you you have to rewind that one if uh if we're going too fast there find the color change it from solid pick an image click in this bit here which is not super intuitive in my opinion but hey here we go more high fidelityness I'm going to tidy up this logo you wait there all right colors images shift oh no yeah shift one see everything don't need these now go away more shift one if it's exactly the same uh all right Next Step and the next step is a big one it's this we're going to learn um how to make a micro interaction what is a micro indirection you ask what's this click this oh look at that it's a little bit of animation and it's not just there for like pretty sick it is there because it's going to help communicate something the animation shows that the same button actually toggles from being the burger menu to actually closing the menu now in all honesty we're going to be uh jumping a little bit ahead in terms of like our capabilities now because I want to get you excited by figma we've done lots of stuff and we're kind of kept up to speed I'll try and keep you along here don't worry but if you do get to the end of this punt you're like oh you left out a lot it's because there's a lot to get to this point but I also want to show you some of the awesome stuff this is could be the awesomest animation ever I love it it's a writer passage as being a ux designer okay you've got to make one of these and try and squeeze it into a job like learning the lens flare in Photoshop or drop Shadows or something like that where you're like oh everything needs a drop shadow everything every project needs one of these let's make it okay let's do it on one of the pages I'm going to do mine on my registration page here so what I'm going to do is I'm going to use this burger menu I'm going to kind of smush it apart so basically I want a copy of it I'm going to grab you copy I'm going to click on this artboard here paste it it went back to the old Hub and I'm going to put it here the reason I don't want uh I'm not going to use this version I'm just going to right click it again there's a way to say ungroup okay that was weird did you see the little blue box that didn't have text in it before that was meant to have I was like that should have uh something I couldn't remember what it was their measurements in there um yeah I just refreshed my page uh figma works in the browser normally it's pretty solid and it must have been an update I've had this browser open for a long time over the weekend now you don't know that because the videos just carry on but I had to pause for the weekend and it was just open and yeah anyway if there's anything screwy happen uh hit Refresh on the browser we're back so I've ungrouped it okay uh ungrouped it so I've got rid of it being um what's called a component okay and what I would like to do is turn it back into a component okay so it was kind of a component before now I'm going to say you are a component okay I'm going to do something a little bit extra okay this one here we're going to add a variant of this component okay and what we're going to do is this top one is going to be the starting of our animation and this one's gonna be the ending what happens with the ending this one here I want the middle to go away remember from that first animation we don't want to delete it because we delete it from the first one it freaks out okay it needs to see them in both of them okay so what we need to do is this one here is actually just say opacity of fill down to zero just typed in zero so it's still kind of there but you just can't see it perfect and this one here I want to rotate around okay so I'm going to just hover to the corners you can see that's the scale that is the rotation let's just type it in then I've typed in what have I typed in 45 degrees yep and this one here is going to be negative 45. here we go line them both up so I'm going to hold shift click both of them and I'm going to say align U align centers so I'm just going to see horizontal senders and vertical centers so now it's kind of lined up nice Now is it going to work it is not let's play it preview why is he showing us the thing that doesn't work because now this kind of special component here this is like just a working version of it okay it's a variant so we don't actually use this in the document it's kind of like a working dock okay and we can say we can put it on its own page for like working documents or stick it down there what we really want now is we want to find it in our assets panel we've given a terrible name I don't think we gave it a name at all group 12. it's okay we're gonna drag it out now so that's the kind of working version of it with the two variants this is the thing we'll use and guess what it still won't really work let's have a look at our preview let's click it yeah it's not working okay so what do we do for the next step is back to this working version let's get him over here okay we need to say this top one okay when this top one is clicked go to this bottom one and we use that prototype like we did earlier if it's feeling a little overwhelming it should be we're kind of jumping ahead in the course a bit or in our figure knowledge but it's fun so this one when it's clicked it's going to go same thing I'm going to grab that little Dot and go say go here so on tap change to this variant okay of my variant 2 which is my cross instantly now let's do smart animate that does the little animation stuff we don't actually have to do anything figma is amazing at just doing it cool and let's test that now and it's going to kind of partially work ready oh it kind of half worked but it won't go back so back here we'll say so when that's clicked go to this one when this one is clicked okay you go back up there and it should remember things like smart animate from the last thing you did now we are ready ready three two one bam bam I want that little dot to go away look how cool it is the editor will zoom in because he knows I'm very excited by this animation I've done it a million times with a million students but look how nice it is that's the cool thing about figma and its animation if you came from flashland or adobe animate a lot of the easing is added uh all that nice kind of smooth easing is added afterwards whereas this is just or after effects or Premiere Pro it's all added afterwards whereas figma adds it for you because it looks cool all right so that is a micro interaction it is just a little thing to help us know a little bit of draw our attention and help us know what we've actually done we've clicked it and look now it's a Little Red Cross now it's a little cross that we can use to close the same little menu you'd use it up here okay where you had your navigation popping out very cool all right so we've got a little bit of Animation we've got our kind of High Fidelity mock-up kind of mocked up not complete but hopefully a good overview of kind of getting things onto that page let's look at now we've got let's say testing done again okay clients happy with it we need to get a two-hour engineer or a developer actually what we might do is just send it to the client as not a link it's handy sometimes just to go to up to this figma F here and go to file there's an export frames to PDF and it's just going to make one I'm going to stick mine I'm going to stick mine in here okay and we have a PDF okay and it's just the simple pages and just maybe a nice easy uh way of sharing via email next up we want to share it with our developer okay or our engineering team whoever it's going to maybe build this website maybe it's you how to get the images out uh there is a simple way the simple way is let's click on this say this graphic here that I want out what I need to make sure is um actually I've clicked on that already and so down here it'll look like this okay I have to scroll to the bottom of this little panel I've got it selected I can say I want this exported what kind of export do I want maybe you want PNG I want a SVG scalable Vector graphic because I know that's best for my intentions here but if you're like I've never used one of those I want a PNG you can do that you can get a JPEG a PDF anything you like what size do you need to be there you go okay and you just click export and here you go I'm going to give it a better name you can see if you're naming your layers like a good ux designer which I am clearly not Group D uh if you name it there it'll pull their name and save your time here this is going to be my leaf okay another little export folder there let's have a look schumfinder unsurprisingly here we go we have a leaf there it is jpeg terrible should be a PNG or an SVG you get the idea okay so anything that you want to be exported if I don't Mark these as exportable they won't get exported okay so I'm going to say you are exportable as uh jpeg okay and I can export them now it gets even cleverer so that might be it you send them the PDF with the images and leave them to it what's handier working with an engineer is the same share option that we did earlier where we were sharing with say user testing and with our stakeholders let's go to share you probably just want them to instead of edit to view mainly because developers probably not spending a whole lot of time in figment you might be a developer yourself watching this and if you haven't used figma before if you give them editing or give yourself editing abilities it can be maybe too many options you only need View and you send them the email I'm just going to copy the link and open it in another window for us new window paste it in all right I'm pretending to be the developer now so what ends up happening is you'll need to coach them a tiny bit okay what they want is not design not prototype they want inspect that's the thing they want the cool thing about it is that they can do things like click on the home page know the height and width you don't have to write a document to explain it all they know the background color click on this one there's the background color that we picked before they can just click it can you see it says copy to clipboard it's a great way for them to build out their app or website okay if I go back to kind of like click on the background and you can see uh because this is going to be a website okay webmo uh sorry a mobile website we can use CSS and but if they were using iOS okay so Apple app or an Android app they could use this you can see here if I click on registration it's giving me a different like they don't use pixels okay these DP so I can give them the kinds of properties that they need so I'm going to click off in the background and search it as CSS it's really cool they can work around and go all right here's this button here and you can see it actually if I just click on it I don't need to do anything but if I'm an inspect look it says it's this height by this width okay it is got this much padding around the outside if I click double click this text on the inside it gives me cool things like 15 pixels top left and right but not the bottom because this font is a strange one I have to kind of move it up a little bit but it gives them all those sort of measurements that you don't have to go out and label brilliant so colors measurements are all just in there let's have a look say this text here can you see it tells them the font what's weight we're using the size line height random Dan 33.818 and what's really handy as well is I used to have to when I was handing over documents like this maybe down in Photoshop or illustrator I had to hand over a text document well the text copied out of it okay but look at this there's a text copied to the clipboard okay and they can just paste it into their code it gets more complicated with the CSS down the bottom here okay there's two options here it can be um like just the actual class names in their answer you know the class names and the values but over here there's an option to kind of looking at it differently depends on what they want to do so you might have to coach them through having a look under inspect to get the stuff they want let's say this text here they're probably not going to want the width and the height they're not going to just copy this verbatim and paste it into CSS but there might be stuff that is useful okay font family rubric especially if you're coding it yourself like if you're new to coding and you want to get into it check out my web Essentials okay where we do HTML and CSS and it's handy for things like you're like let's go in here you're like I've double clicked on it it tells me the Border which is awesome also tells me the Border radius okay there it is there and you might not know the Syntax for what border hyphen radius is but now you do just copy and paste that straight in your code it's all right that is getting it out to your developer and kind of wrapping us up now let's actually jump out to the real life camera it's more wrapper all right my friend that is where we're gonna end this mini course I hope we got close to my goal of demystifying a little bit of the ux design process and also showing you how figma Works a little bit I hope you got value out of that um next steps for you if you want to like continue along with me and your ux and figma journey uh I've got a full course there's only so much we can cover in this kind of like mini intro course I hope I've got you excited enough to do the full course okay there will be a link in the description for that what I'll do is I'll show you on screen here this is what we cover in the full figma Essentials course that is an advanced course as well okay and it's just we just go into things a lot more in depth okay build some really cool projects together and stuff for your portfolio you can have unique stuff for your portfolio you're gonna have a really good understanding after the essentials and after the advance you're going to be an expert figma user and you'll have a really good grasp of the ux design process and if you sign up for the course you also get access to you know complete and get a certificate and a merit certificate as well that same subscription gets you uh ask the experts access so it means that you get priority answering of your questions if you have got anything throughout the course there's an exclusive podcast there on the website as well for members only where I talk to an interview ux designers amongst other creative professionals one of the big perks is that we do design challenges okay so there'll be regular UI and ux design challenges because it's hard if you don't have clients and you don't have feedback from other creative professionals it's hard to kind of build those skills so as part of signing up for the course you get access to those design challenges as well oh and most important is these little badges here you can earn those too and lastly that same price for the XD course gets you access to all my courses okay so I've got a figma one I've got a Photoshop illustrator InDesign After Effects Premiere Pro Lightroom basically those place I don't think so but there's an Essentials and in advance for all of those things so come join me and bring your laptop join the community other people on the same Journey doing similar stuff sharing our little journey together uh but for now that is it and uh hopefully I'll see you in another video bye Link in the description

Channel: Bring Your Own Laptop

Views: 31,083

Keywords: adobe figma tutorial, adobe figma tutorial for beginners, figma tutorial, figma tutorial for beginners, adobe figma, adobe figma 2023, figma for beginners, how to get started with figma, figma basics, figma tutorial web design, figma ui tutorial for beginners, figma mobile website, figma mobile web design, how to make a mobile website in figma, how to make a mobile app in figma, figma for beginners 2023, figma tutorial for beginners 2023, byol, figma, free figma course

Id: IOVFRMuPeVQ

Length: 82min 49sec (4969 seconds)

Published: Thu Mar 16 2023