Figma Tutorial - A Free UI Design/Prototyping Tool. It's awesome.

hey everyone Gary Simon of course zetro so today we're going to continue on with the theme that I've been keeping up in the channel the last week or so with UI design and prototyping told overviews all right so just last week we did graphic designer and also lunacy and today we're gonna take a look at figma and I have to say figma is the one tool that I think most of you have requested more than any other tool so that's for good reason it's 100% free for an individual and also it's a hundred percent web-based it also has prototyping in it and a hat also has a desktop version that you can use on in multiple operating system which is made possible through electron so I'm gonna go ahead and walk you guys through a quick kind of like a mobile UI design just to show as many features as possible like in a 30 minute video so you can get a well-rounded understanding of how this tool operates and I have to say it's very similar to Adobe XD except it's free and even web-based so that's pretty freakin awesome alright so make sure you subscribe here if you haven't yet make sure you do that because I'm pumping out videos like a crack addict and also check out corset row calm alright so here we are at figma calm and I so just real quickly just to go through this landing page it's just gonna give you some basic overview blah blah blah about the features but we're gonna get into that ourselves the main thing I wanted to look at real quick was just the pricing area and this is one of the most impressive things about this because basically if you are in an individual it's free I had to do a search for that even though it was up top I knew it was somewhere but yes if you're working with a team then this is the right plan for you I would definitely make this more this bigger if I was the figma team because I glossed right over that it's kind of important so yeah if you're a freelancer like most people are which I don't have any claim to back that up but if you're a freelancer it's free and it's hundred percent off so and then if you working with a team of some sort you know you can if you have up to three projects you're fine it's free it's only twelve bucks a month if you want a bunch of stuff so basically you want to sign in or sign up rather and I already did that to make easy with a Google sign-in and once you're there then and you probably have to confirm your account unless of course you're using Google I just accidentally created that there we go this is a completely web-based interface and also just as in the previous tutorial where I covered Gravett designer they also have a desktop version and of course that's made possible with electron if you don't know what that is do a search on my channel for that but basically allows you to create a native desktop apps for multiple operating systems using web technologies so basically you can kind of just in a sense clone their existing code base here that works in the browser but also make it work for native desktops and add you know special additional functionality but I'm just going to need to use this I the desktop version here you could see I am in the browser okay so let's go ahead and take a look at this so the first I think it start is just this new file icon up there and as we could see I if you've been paying attention to any of my to my channel at all lately I've been covering prototyping tools and it has a similar interface you know we have our canvas in the middle properties on the right we have some tools I up here and then we have a layer section down here and also a couple other things that we'll take a look at in a little bit but first how do we actually start with a project or a canvas of some sort or an artboard well we do that right here we click on this tool and then it shows us this stuff on the right now I would change that because I was kind of confused when I first used this and mind you I've only used this once so it made it confusing you know okay I had to click there to figure out where to start all right this should be selected by default that way you have your templates here to get started so I'm just gonna choose iPhone X and notice we have our three tabs right here design prototype because yes this is a prototyping tool as well unlike a few of the others that we've covered and an also code which will provide you with CSS code depending on which elements you're selecting so here is our ir artboard and again just to talk about i which i've done in the previous tutorials how do we move around in here so spacebar very simple and standard you can zoom up holding the control key which is kind of different i'm used to holding the Alt key but the Alt key if I press that it allows you to go up and down so just you know my new difference is nothing big so I once we have this selected again if you select anything including the artboard you're gonna have the all the options show up here like if you want to change the background color here we go in the backgrounds so section I'm gonna leave it white but just to look at this which is pretty much a universal color picker for any element we have our ability to select any type or shade of colors and the lightness and darkness down here we can have an output hex its hex by default or RGB CSS HSB we can change the opacity and there's also a slider right here for that and then we have a swatch section down here and we can add new by clicking that okay so let's go ahead and start designing a mobile app or just a mobile version of a web app and I'm not gonna get too in-depth I really just you know the purpose is just to learn this application so I let's start off with a rectangle and I'm just gonna maybe this would be like the splash screen or the very first screen let's drag this up alright so it does have guides exactly as you would want so if I get this there it snaps nice and into place alright let's let's make it a primary a color or something like around a blue maybe we'll turning it up just a slight notch there we go so now with this selected we can add this as a custom color down here would have been nice if they added up there was personal colors document colors okay that's better there we go switch document alright so I would say for instance we wanted to change the actual physical shape of this rectangle beyond just scaling it up and down the left and right so double-clicking it will get us into a mode from which we can now access the anchor points so if I just take this one hold shift go down look at that cool what if we wanted to add an anchor point can it do that so let's see here sweets and notice it's it's snapping right here in the middle just as we would want it to so if I left click did it add it well let's see so if I hit escape and hit V which is kind of the universal shortcut for a move tool in most applications there we go it is a part of our shape now awesome so what about the Bend tool there we go so now we can create a nice sort of a Bezier curve alright so let's see if we take multiple anchor points and move them down just like v2 go back to the move tool well I just created the Nike swoosh almost all right let's uh let's bring this back up let's play around with this some more all right this is a quite intuitive I have to say select this we can get back to just the regular select mode let me double click this and take all these three and drop them down drag him down rather okay that wasn't snapping no this time so maybe I'll use my keyboard arrow keys okay so to get out of the mode where you're in the anchor points you just double click outside notice I still didn't get that lined up correctly so all this is just helping me to kind of get acquainted with this with the move tools and such looks like this one got moved on its own there we go all right great all right so how about duplicating let's see what would it take to do that select it control D duplicate selection very easy as you would expect but you know you have to do it because sometimes with these apps certain no-brainer things are left out so I've just duplicated and moved up with my keyboard arrow key just now I do I didn't see a comet that somebody said there's no skewing tools up here so edit object of course gives us into that object mode the bend tool I don't think will probably help us here the pen tool has just have a pencil tool yeah so I don't believe right now there is any type of skewing but that's okay let's take these down I don't know just I'm just experimenting here I'm not sure if I necessary like that maybe I'll bring this one and hide it all right so let's I also let's duplicate this let's rotate it see how that works all right as you would expect hold shift all right so now we have this big thing hanging up here now that's because it's not really considered a part of this artboard so because most of its hanging outside of it if we drag this in here mm-hmm all right so I know one way we can tackle this or we can fix this we can just take the rectangle tool make it match the very top of the canvas select both and this is where we can use this section which is equivalent to like Adobe illustrators Pathfinder where we can do different things with multiple selections here so we can subtract the selection voila now we have that part up top awesome so of course we you know we have a pasady down here you can use your once you have any of these select these text fields with these numeric values you can use your keyboard up and down arrow keys I don't like this though but again I wanted to demonstrate this tool right here this is really important if you're working with shapes and you're creating vectors here so I'm let's see about you know can this import SVG files that you're using so let's say for instance we want to use some material IO icons so material IO icons let's type in traffic light okay so we click this will choose you know well let's just make it a No we'll leave it black and then we'll choose SVG to download it alright so we're gonna show this in the folder this showed up off my screen but what I'm going to do is just I drag it on to my desktop alright so if I move this and I show this right here and then we go back to our app there we go I can we drag this in yes we can that's awesome just like you can in Adobe XD and I presume other apps I didn't try that with gravity I'm not sure but now we can notice that this inherently is a group because we can see it's a little drop or this little arrow if we click it will see that we have our vectors here already that's how material IO icons are though they give you a background like a container in each one but so let's say for instance you wanted to change this color to the blue that we've been using when you select it it's just gonna select a group and it has the background as white that's not what you you what you want to do you can actually get to the inner layers here by double-clicking onto it and now we can choose our primary color awesome alright so let's get that centered up maybe make it a little bit bigger shift and alt will allow you to scale up so the I so far my my impressions are very positive of this app I mean it's behaving exactly as I would hope it would behave so let's just type in my app now this is using a de montserrat font that I've always been using this is they allows you to use I think this is part of Google web fonts so you have a ton of awesome fonts that you can use already they're already ready to go so the type tool of course you have all your justifications here you have your line height you have your letter spacing paragraph spacing and indentation I let's see here for our fill let's go ahead and just use yeah it's just completely blue ass app right here so this is looking pretty good so far let's increase the size keep our up arrow key perfect my app let's make a button so how would a button work oh by the way let's get that out there so we have the rectangle tool let's just go from the very left at the very right even though I don't want it to and the reason I'm doing that is because it will allow me to very easily hold the Alt key while left click that left clicking and dragging in and that way it's completely centered up for me alright so does this have the little or border radiuses all right well let's zoom up so control mouse wheel and there we go we could see it right there when you get a little bit closer so it gives us our ability to change the radius is very easily all right so let's say I change this ugly gray color to I will make this white something that really contrasts well let's get some our button call to action text out here so I'm just left clicking and dragging to create a text area so let's see we'll just call this let's get going some type of unique call to action text let's get this now and again we're gonna use our swatches here let's get this centered up there we go nice what about drop shadows all right so let's have a drop shadow on here and again drop shadows are one of those things that I you could really screw up so only use them if you know what you're doing you might kill kittens so effects this is where you're gonna access your drop downs along with inner shadows layer burglars and black back black around blurs no background blur there we go drop shadow if you want to change the options let's zoom up a little bit let's get the rid of this thing down there so change options we have the blur amount so we can change this to 0 X is 0 in Y is 4 I kind of like that and let's just take down the opacity a little bit like 9 percent and there we go we got a fantastic drop shadow let's create a secondary actually this isn't even DUP entirely there we go all right now let's take both of these now it would make sense to make this a group right because we have two different layers but if you move the button you want the text to move too so ctrl G gets you into a group you can double click rename it my button so again everything's working as you would expect it to so control D that's duplicated it just drop it down and let's say maybe this this button down here isn't as important so using visual hierarchy through design here we can double click on this to select this let's get rid of the fill all right so hide that and then we'll add a stroke now one thing that's kind of frustrating is because it's selected the actual selection indicator box is kind of hiding this one pixel stroke that's over here so not a big deal just make this white and then we'll make our text white we can't see it but I know it's there and that way it's selected right there we'll make this over here white as well and then we'll just say do something else hit escape sweet and again if you really want to make this not that important another way is to decrease the the font weight so we can go to regular awesome okay so we'll say that's done all right what we'll do now is let's create another artboard so lets you know because prototyping is a thing here i we want to make something a page that will show up when somebody clicks on let's get going or to ended the actual app so we'll take and select this artboard hit ctrl d voila perfect as you would expect and so now let's create just a real quick app interface I'm not going to do much trust me so let's take this scale this down quite a bit that's about 43 by 43 my app we'll take this and scale down the size quite a bit like graphic designer it doesn't allow you to like left-click and drag that would be cool if they allow that technically I'm not sure how difficult that would be to integrate though alright alright so now let's add a hamburger icon menu thing over here so let's bring up our material IO real quickly we'll do the same thing so it was the same menu I mean a typical menu right here we'll choose yep just black again and then we'll change the color after so we'll download that I'm gonna drag that off-screen onto my desktop here alright and then we'll go back to figma drag it in there it is awesome get this back out and once again we'll just open this up we actually have our vector here we'll choose our blue and we'll change the size we could either um you know hold shift and change the size that way or we can change the size up here we could choose this to constrain to proportions let's try 32 awesome and you can fine-tune it of course with your I keyboard arrow keys okay so now let's uh I'm gonna get rid of all this it's just um I'm gonna get rid of this bottom button we're gonna keep this button but I'm gonna put it off to the side so now let's just create kind of a container right here and let's make this kind of like a light very light grey Edie Edie Edie move this over here to the center alright I think that's the center and let's try how this see how this app works with images or photographs so we'll have like a photographs kind of container down here so let's go to images Google alright so let's just type in traffic alright usage rights they before use with modification let's drag this on to the desktop copy and replace I'll go back to figma now let's just drag this sucker right on to our artboard okay so I made it quite large let's zoom out holding control all right so I scale it down zoom back up now notice once it snows it's inside of this artboard it's not going to display whatever's outside of it which is Andy of course so let's see about let's play with the layer blend modes so this is really handy as well so let's create a selection over the entire area we can also reorder these we can just left-click and drag it underneath or you can right-click it and either bring forward to front and backward to back so send backward we'll make it go just one layer beneath it and then now let's take this and over here we have this pass through all right so now we can change blend modes and stuff like that so we can darken it oh by the way let's let's get this out let's get this this is that ugly gray color let's just make it that blue right click send backward there we go so now you can just play with your blend modes if you want this is too much contrast we want kind of like a water mac mark that watermark background so we can do something like 20% here that looks good all right cool so I'm not going to really develop this this interface anymore because I'm just want to get to the point where we can show the prototyping ability I'm gonna make one more quick adjustment and we'll say ok what happens when the user clicks on this menu let's show a menu all right so ctrl D we'll duplicate it decide this is the experience of using this app so far has been pretty pretty fantastic I have to say ok so let's take everything right here we're gonna ctrl G to group it alright so now we have a group and we also have I let's go down to our effects and let's add an effect of layer blur this will allow us to kind of simulate a blur and that way it kind of shifts focus or emphasis onto the menu that's going to show up on the right hand side so it allows you to simply change the blur amount which is pretty cool one thing that I would happen naturally is we could see the edges so I'm just gonna cheat a little bit and hold alt and scale it out just a tad bit alright so now let's create a container on top so just going from very left or the very right to about 1/3 of the way one thing I do wish it would do is remember the last fill color that would be kind of handy right so yeah we'll just leave it that color we'll do the material icons one more quick time I will just do or is it is there one for clothes yes there is clothes download the SVG couldn't made this white because that's what I'm going to use alright and we'll go back bring this over here extend this alright we're also going to make this 32 just to keep consistent and then double click this change the field of white alright and then real quickly will create the a repeating menu right here so this we're going to introduce you in a second two components which is a real important topic here for figma so one thing I could just create a selection like this sometimes you'll find yourself it might be easier I in this case it probably wasn't easier but you can just duplicate this layer hold alt that way you know it's a hundred percent lined up in terms of the from left to right being inside of this container so let's just make this maybe slightly darker okay and that's also maybe we want to create a more of a distinction or separation between this background and this section over here so we can duplicate this control D move this over and get a little bit closer like that make this one even darker maybe right around there and then now we're going to have multiple this is kind of a just an item or a link container so we're going to have multiple of these and in this type of situation you may find yourself wanting to to maybe make an adjustment and it would be a pain to have to make the adjustment for five different links correct most certainly so we'll take both of these layers hold shift and select them you can see they're both selected and then we can right click and then choose create component or you can click up here I believe that's the component right here yep and now it's highlighted in purple to let you know that it is a component all right so let me show you I'll show you exactly how this this ends up working you know what before I'm gonna back up and not do that when I was originally testing for this I didn't include the type the text area in the component itself I let's see if that actually works the way I would want it to work so I'm gonna type in about us and that's that's that's pretty big you know what although for usability purposes maybe it's a good idea to keep it that big there we go yeah my gut reaction is to make it smaller but I think this works well here so let's take all three of those and then create a component and see how that works so we've created the component now let's duplicate this alright so we just created a little bit of separation between them and then let's duplicate it I was take both of these control V control C control V or you could have controlled eat it same thing and we'll do one more okay so now what happens if for instance you say okay well I want this to be this come over a little bit more to the right so now if I do that make sure I click on this there we go if I make it a change to this it's going to affect all the rest and that is what components are that's what they allow you to do they cut out a lot of work if you have elements that are repeated now what if I make a change to this text area or this text field yeah it will make a change to all the rest of them which is something that we don't want so what we could do or what I hope we can do is right-click and then we'll choose detach ok detach instance would probably now make them not a part of this component but now we can change these about us maybe services or something and there we go alright so in this case you wouldn't want to create a component out of we know what that includes the text if you wanted unique text alright so I think that's pretty good we'll stop there for the design portion now let's check out prototyping so if we switch to the prototyping tab we see not much changes but what we'll do I wish I could close this off or I'm wondering if I can just collapse this no I I don't think I can no oh well well anyhow I mean normally this isn't a big deal if you if you have a big enough resolution right now I'm only on 1920 by 1080 for this video normally I'm on 4k and just wouldn't be so cluttered but anyhow I what we can do now is select like this button and we can see this time it has a little circular icon a little drag er well over here we have our destination well we can specify the destination very similar just as in XD or experience design by just dragging it over and it allows you to change the transition so the behavior is instant by default if you just wanted to automatically go there without any type of animation or we can dissolve it move it push it try push and it gives you a preview where you can then change the duration of the animation or the transition between the page the direction as well and then also easing so it's pretty powerful pretty much everything that you would want for page transition animations so now on once they're here let's make this go back oops okay so now it's going back we'll make this push as well except go this way all right and then the hamburger menu well make it go to the this nav page we should probably double click these and change the titles appropriately you would want to do that if you are working on a serious project and then we'll make the X go back to this page alright so now we have all of our connections that are visible and they're visible by default unlike in Adobe XD which is you know ok I think that's pretty much all that I would want to do you know I would probably want to make I wonder if you can make let's see here just take this whole thing if they click outside of here they can also get back there we go alright that's looking pretty good to me so let's give it a go alright so we'll click the present button it automatically launches a new browser tab by the way and let's choose let's get going there we go we can go back choose our menu there and get out of there there we go very simple obviously but I let's see what else do we have here we have some other options let's see we have our current user name we can share the prototype I'm this show hotspot so basically this means if I click here it's going to show us where we can actually click which is very handy that's a common feature we can also choose how to fill this this presentation here and we can also I viewed school full screen of course my screen extends way beyond this viewable area and that's that's pretty much it for the presentation section now mind you there's a lot of other stuff here that I didn't really touch on but for the most part we went through you know you know creating a basic app covered all the necessary elements like for it also I will show comments you can specifically place comments in certain areas so let's say for instance I designed this logo I may say I don't my caps lock is always on I don't know I don't know about this what do you say all right post all right so now you it has a little resolved button like this is an issue I want feedback and then the person can give feedback when you share the prototype in the same location so now if I go back to here you don't see a comment but if we go back to this show comments it'll show you wherever you're at and you could place multiple comments very very good stuff so this is quite a really robust option especially for it being free we also have a settings over here pixel preview this is enabled I would imagine if you're there we go it's going to show the actual pixels that looks terrible though so let's go ahead and or with the settings at there we go turn that off all right and then you can also export oh by the way code we have our CSS so like for instance if we want the CSS for this button and this is the group though so let's click on this if we want it just for the container and we want the code well there we go and that is quite handy and you don't have to use everything maybe you'd have some other way of creating this container here but you want the the aesthetics like the color and stuff just copy that there you go and you paste it into your code editor make sure you check out my site course cetera comm where you're gonna find a bunch of courses on modern design and development a lot are free and others you can access for the cost of buying me like a six pack each month that's it now also it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on

Channel: DesignCourse

Views: 1,178,448

Keywords: figma, figma tutorial, figma tutorial 2018, figma design, figma ui design, figma prototyping, figma pen tool, figma sketch, figma vs sketch, ui design tutorial for beginners, ux design tutorial for beginners

Id: 3q3FV65ZrUs

Length: 36min 35sec (2195 seconds)

Published: Mon Apr 30 2018