Getting started with Figma: A beginner's guide

if you're thinking about getting started with figma this is the right place to be we're gonna be looking at the very basics of it in this video hello and welcome I'm really excited about this video but if you are new here my name is Kevin and here at my channel we learned how to make the web and how to make it look good with weekly tips tricks and tutorials and as I said we're going to be diving into figma in this video but really going through the basics of how a lot of things work in figma to be able to create what you see on the screen now so by the end of this video this is what we'll have created I'm really gonna walk through all the different things I'm doing to create this we're using a lot of this to show you how figma is working so it's really an introduction to figma before we get to that though I just want to say that this video is being brought to you by Kyle's freelancing bundle a lot of people are constantly asking me about freelancing advice how to find clients how to do design so they can start selling stuff to clients how to communicate with their clients how to find more clients all of that type of there even how to price yourself all sorts of things like that if any of those questions are things you've been asking yourself this course is fantastic for you in this course he's covering things like freelancing fundamentals how to position yourself toward your client making sure you have multiple streams of income because nothing's worse than having a single stream that just goes kaput he's looking at how to price your services and how to keep finding new clients he's looking at creating websites that work for your clients as well as how to sell your services and how to make sure you're getting paid what you should be getting paid and going into marketing and all of that and it's not this like crazy price that you might find on a lot of these freelancing courses it's really affordable and extra bonus he's giving anybody who puts in the code keV check out 25% off so if you use the link down below make sure you use the coupon code so you get 25 percent off and honestly if you do one job you've already made more money than this course is gonna cost you so it really is one of those things that if you're looking to get into freelancing it's a bit of you know a no-brainer it's immediate return on investment as soon as you have your first client now back to the topic of figma which we're going to be exploring the beginnings up in this I really want to make sure that we're setting the foundation in this video and there were we know exactly how the basic tools of it are working let's get to it so here we are unfitting this website and the cool thing with figma is you can just work straight from here you can hit login and you work directly from the browser before we even look at that let's check out what figma even is so you can see here they say where teams designed together it is a design tool obviously and it is cool because you can work collaboratively we won't be doing that in this video we'll be seeing how it works as a nice standalone design tool so it's vector-based and really cool stuff and design and prototype intend I've seen design and keep bringing your animations stuff like that we're not gonna be looking at animations the more advanced stuff in this I will have other videos in the future that do take a look at how we can do some of those cool and fun interactive things so for now actually let's just get started so as I said you can come and make a free account by clicking log in up here or you can download their app they work pretty much the same so don't feel like you're handicapping yourself one way or the other I do have the app on my computer so I'm just gonna pop that open and you can see if you've been in figma before you'll see all your artboards if you are new here I think there's a couple that come as I get default so you might see that there's a few like examples along the way though and I'm just gonna come here to drafts and create a new draft in the free account you're allowed to have unlimited drafts I have a free account right now you can see I have as much as I want there if you eventually start working on lots of projects which if you're working with teams you will be then you might have to upgrade but for the moment we can get started for free so we can just click here and make a new draft now here's one of my biggest complaints with figma is when you start it looks like this and this doesn't help us very much to be honest with you so we're gonna run through it first just the interface that we do have here and you can see it has a very limited amount of tools that you can see at the top but there are always more tools underneath a lot of these things there's not always a lot some of them have more we have a pen tool stuff like that typing hand and a little comment bubble there I believe that is yeah so the issue I have a signal when you make a new file is you get this blank canvas and you know you I want a square and I could I could actually start drawing stuff here and doing stuff here but that's not what you want to do at the start and so the very first thing you want to do is you want to go over to this guy right here which is your artboards or they call it the frame and I'm used to Adobe where everything is called artboards you're creating a frame when you're on the frame tool then you have to Tory is you can either click and drag and make your own frame it'll show you the dimensions that it's going to be and we can start working on that or I delete that when I'm on my I'm gonna push f4 my frame tool and over here on the right you can see that this is now changed and we get a whole bunch of different options and this is one thing that you're definitely going to have to get used to if you're not used to design tools or figma specifically is that the menus are contextual so if I'm not my frame tool I get my frame options over here if I switch over to this tool you can see that it's changed over and we get a few different options we're going to see there's a lot more that gets hidden away in these guys so if we jump over to my frame tool alright again I like looking and I'm gonna talk more about shortcuts after but if I look and I see that my frame tool is the letter F I'm not going to select it I'm gonna come here let's just so I'm not going to select it I'm gonna switch tools and I'm going to push F and I'm actually going to use the shortcut because if you want to remember shortcuts using them is the only way don't say next time I'll use F push F right away and a lot of people don't use shortcuts you should definitely use shortcuts and so we can either draw one out as I said or we can choose from here so let's just choose a nice big desktop design for the moment and as soon as you create that you can see that it actually automatically switched to this tool which is your move tool so that means I can move it around no point in moving anything just yet but that's there and you can also see I have my layers here and these are gonna become important in a second I'm so the very first thing I think we should look at is the one of the most basic tools which is right here my rectangle tool and all the shape tools pretty much that we have there so what I'm gonna do is I'm not gonna select it I looked on top and I saw that that's the letter R so I'm going to push our and then I mean if you draw a square here now I want this to be like the hero area of my website so let's just come and you'll notice when I get to the edge it actually locks in place and when I let go automatically it's switched back to the move tool let's do that again put our draw a box and let go and it switched to the move tool this is super useful because it's so often that you finished with something you always want to go to the move tool after to actually position it properly or to move other things around so super useful so with this I can just move it and it's going to lock into place there and then I can drag it across and do something like that now remember this is a contextual tool so when nothing is selected I just get this sort of background thing there but when I click on a box they've already created oh I get a whole bunch of new options here um and for now the only one I'm going to worry about is my fill so I can click where it says fill and I can come in and change the color here to anything I want it to be so we got the nice little color slider here where we change the hue and then within those hues we can choose whatever tint saturation shade I was thinking to shade tint shade or saturation of that color that we're going to be using in our color picker here where we're choosing our colors that's probably a little strong I'm gonna go with just like a light gray actually for this back to almost where we started and there's also an opacity slider here this is only going to be noticeable if you have other content on top so maybe we'll look at that a little bit later but if ever you want to play with the opacity because there's nothing underneath it looks like it's just taking a lighter version but it's actually making this transparent so just this is like a transparency slider 100% means 100% opaque 0% transparent and if I slide that way it's the opposite we're going all the way down to we get to zero my tank what is here I go to one and I could probably type a zero in there if I wanted to oh I can't interesting but it's not there anyway oh it's at zero okay there we go and 100 we can also here turn on and off that layer sort of by selecting it you can see I can turn that fill on and off but don't you know there's times you might want to do that but we're not going to do it now and you can actually add multiple fills so you can see I've added a gradient on top and I could add another gradient and you can do some funky stuff here we're not going to worry about that we're touching just on the basics right now but know that there's some pretty interesting use cases and some fun stuff that you can do there and so we have my sort of here OE area that's gonna be here and we want to write some text in this so I have my text tool all the way up here or I'm you you might have seen it flash on the screen there or this is like the one shortcut that I think every software ever uses except maybe quark if any of you come from a background quark had weird shortcuts it's me coming per minute it'll be background but you you just there's two options actually if I push T or select my type tool and then I click I can just start writing hello world and it makes a text box it's exactly the size of the text that I wrote the other option is I can actually click and drag and make a text box and I can write within that the difference between the two of them really is if I came this way and I write a whole bunch of text it just keeps going and going and going forever until I push return on my keyboard and I can make a new lines of text obviously if instead of that I take my text tool but I drag it like this and I start writing now when I get to the end of the line it's just going to break automatically so this is if you have paragraphs of text in general you're not going to be doing a line break every time you need one you're just gonna draw a text box out use to illustrator you'll be used to this behavior already so we want to write some text here so really awesome cool product and now we can change what that text looks like now one thing that's really cool Sigma that I love is it automatically brings in all the google fonts so if you like your google fonts I do actually I don't know if they're all in here but you can see there's lots of fonts in here I also have some extra ones activated on my own computer so there'd be some bonus stuff in here and then another thing that's nice is the default is Roboto which just happens to be a really nice font so I'm not gonna worry too much about that I'm just gonna bring this all the way up to black to make it more bold and we can change the font size now for here I can let's just bring it up it like a 72 for now and we want we have a really awesome cool product that's what we have and then what I'm going to do is I'm going to push T for my type tool and I'm going to come and draw a box here now I actually want this to be on two lines I don't want it stretching the whole way across the side so this is where it differs from illustrator if you are used to it if I grab the corner so this is back on the move tool if I go on to the corner here and I start dragging you see it's not changing the text it's changing the text box that was created when I was writing and I can just come and break that and sort of line it up like that instead and if ever you want to go back you can see there I double clicked on the corner so double click and it just jumps back to the minimum size that box could be and I'm just going to do something a little bit like that and then I'm going to press T again and make a small box this is gonna be like the regular text that's gonna go underneath it but now just watch it because it remembered the last settings I used so it's on Roboto black 72 so before I bring any text in there let's go with a light and we'll go with like an 18 and in here we could now bring in a whole bunch of text so I'm gonna grab some lorem ipsum text now so I'm just gonna come up to Google and put in lorem ipsum I tried the lorem ipsum dot IO before and it wasn't working so I'm just gonna go with another one I usually use this one but it just seems to be stuck so here let's just choose five paragraphs and bring this in I do have a plug-in inside of here but let's not worry about that we're sticking with the basics so now that we're in here I can just do a control V or if you're in a Mac it can command V to paste it in and we get all of my text now black on greens not really the best let's come in and change this a little bit and actually you know what let's completely change this I said I wanted to play around a little bit so here we had my rectangle tool I'm just gonna jump down here to the ellipse tool which is oh never gonna remember that shortcut I'm so used to all the other software but oh it is and I'm gonna make a really big circle that actually goes off my artboard and one reason I want to do this is to show you that if my frame I should say so I want to show you that what happens when you go off a frame is this just cutting that you're not seeing the parts that are off of it so think of the frame sort of like your viewport from your website and now we can also look at our layers here where I have my this layers on top and then I have my next layers that are coming underneath that so that means that this layer is covering the ones that are under it now if you remember back if I click on something we do have the fill and we also have the opacity here so if I lowered the opacity now but as I said it's gonna make it a little bit transparent so I'm just gonna hit control Z here or gonna Mac command Z to go on do a little bit because I don't want a transparent circle I want the circle to be in the back so the easiest way to do that is just to come to where your layers are and click and drag it down and you can see now it's below you know it's in between my two layers of text and then I can take this and drag it down again and now it's underneath everything like that except in this case I'm gonna make this whoops a little bit smaller too if you have a circle or something and you can do this with squares too if you have a square you can see if I click and drag in the corner it's just miss shaping it like I can make an oval I can make any shape I want but if I hold shift down on my keyboard doesn't matter if you're on a Mac or on a Windows computer it keeps the exact shape you had now let's just make it another ellipse so when I'm creating my ellipse if I hold shift it makes a perfect circle but if I let go it's gonna make an oval once I have an oval if I click on the corner and I want to change it I'm holding shift it's gonna keep that oval it becomes more like a scaling tool instead of changing the shape tool so just that is really important to remember and actually I'm gonna make this really big so I'm gonna hold shift and I'm gonna hold alt and if you're on a Mac that would be shifting option we're gonna make that really big just so I get sort of like this shape coming off the side here and I've done a few things now this is when you're teaching the very basics you'll notice I was moving around a now to do that we want to use the hand tool so you grab the hand and you move around and then when you're happy you you tend to zoom in and zoom out a lot now I don't even see a magnifying glass so I honestly don't know I'm so used to the software that has magnifying glasses but I never use it I also never use my hand tool itself I'm gonna zoom in a bit here and we'll get to that in a second but what we do to zoom in and out is or to move around as you push spacebar and this is universal and like all design software you push spacebar and you can move around just like that and then when you let go of spacebar and the mouse you get back to your move tool so you can make your text look a little bit nicer zoom in make your little fine adjustments and then move around go to where you want like go a space bar change spacebar move around that if you're gonna use one shortcut and only one shortcut it has to be the spacebar one please don't go up and use the hand tool because you have to use your hand to will move around you notice when I use the hand tool it doesn't automatically jump back to my move tool so I'd actually have to come all the way back up here and select my move tool oh my god that's painful don't do that to me so spacebar move around let go you're back when your move tool and the move tool is also a select tool right because if I'm clicking on if I if I click and drag it moves it good if I just click on something I'm just selecting the thing I'm clicking on but now I joined in so I said on a Windows computer that's control - or a control plus just like that and if you're using a Mac e2b command and the same one so command + and command - and there's also some other things that are nice is command 0 will go to 100% now one thing with that command 0 is it's command 0 but on the keys at the top of your keyboard not your number pad I thought this just didn't work because in Adobe products I always use the zero on my number pad and never use the one at the top so just if you are zoomed in command 0 and it is zoom you note all the way to 100% alright so this is a bit long now one thing with the type tool if you do have a text box and unlike other design software they know if you make this smaller it will overflow a lot more like actual CSS and that's a really long one so I'm just going to delete all this text because I don't think it looks very good we're going to fix this up a little bit more but I think you know we've covered a lot so far so we've looked at how we create a frame we've looked at how we can create different shapes how we can size those shapes using our move tool Gale things as well so if I you know if I take that I can sort of reshape this but if it's a circle I can you know if I called shift I can rescale that pretty much and change the size of it now eventually I'm gonna bring a picture into here that actually I might play around with that a little bit I'm not super happy with it but whatever we're getting there and the next thing I want to do whoops I zoomed out too far control zero so these are the things you really want to get used to at the beginning just using your shortcuts a little bit checking what they are hey let's move on to some more you know we want to get used to using the software so just the next thing to do is you don't always want to move one thing and then move another thing though sometimes you've done that you've moved this and you go oh I really want this text to be lined up with that I could come and grab this and just slide it over and eventually there's these smart guides that click on and they tell me okay it's actually lined up that's really useful but another way you could do it is actually to select both of these and it's really easy to select two things you just go where nothing is and this could even be like off your artboard just click and drag and select everything you want cool right so those are both selected and now when things are selected you always get these alignment options at the top I'm not going to get into the distribution ones but definitely play with them we will look at those in another video but just the basic align ones are really really useful so we grab both of them and then I can align all of that to the side that way or if I had them both this way and I liked this one better I could grab them both and I could line them both that way not so great if this was Center aligned text and I wanted them both to be centered with each other I grabbed them both and I can Center them now there is an annoying thing right now is I'm saying grab them both but what happens if they were on top of a background there's a few different options here if this background is perfect and you're never going to move it what I would suggest actually is coming to your layers and locking the layer and actually one thing you should do is name it so let's call it Bureau BG for hero background so to do that I'm literally just double clicking where the name is and then I can change that you can turn visibility on and off here and you can lock it so if it's locked I can't move that layer so it means it makes it much easier to manipulate things that are on top because I don't have to worry about accidentally selecting it but let's say I haven't locked it and I want to grab both of those if I come off and I do that and I move stuff it's gonna move including my background because you can actually see here in my layers all three got selected so there's a few different ways you can do this I can click on this one and then I can shift click on that so just like selecting files you can select multiple things shift click here whoops click shift click here and it's added that and if I have too many things selected so say I did a big selection and I don't want my background selected I can shift click on it and it's going to drop that from my selection so shift-click will add or remove something from your selection let's try that again shift click on my there and then shift click on it again so as long as I'm holding shift down when I'm clicking he's gonna add and remove whatever I click on to my selection there we go we can move that off again I made it really big there so I'm just going to shrink that down and I'm gonna position it something like that and we were looking at the alignment tools so again let's just fix the alignment text align I'll do left align and then left that way and then I can just drag this up like that and position it however I want that to be positioned cool I think that's starting to look pretty good now usually when you have something like this you have a button that comes down after that so the first thing I'm going to do is bring in a rectangle because we got a draw button so there the rectangle tools right up there you're really tempted to go and drag your mouse and click on that but instead of doing that what are you supposed to do hope you said use the shortcut now what's the shortcut it's easy that one's the easy one it's our our for rectangle so you know there we go I got a rectangle and I can draw it out so I can create that are there and actually I'm not going to do that we're gonna say this is really awesome cool product we're going to add actually I want to show you okay so I almost did something there I want to duplicate this so you could do it like anything else you can do a copy and paste command C command V and Lake magic there's two of them it's like a magic trick with the cards knowing they peel a card off but you didn't know there was actually two there there's one hiding behind the other one so ctrl-c ctrl-v you can see my layers now I have two of them undo that and then control V and again and you just keep adding more on top one on top of the other one so that's one nice thing when you paste that it ends up in the same place but if I have something I want to duplicate and save ctrl or command C command V or control C control V to duplicate it then I have to drag it then I can do stuff with it what I can also do if I'm on a Windows computer is option I can alt drag and you can even see when I push alt you can see the cursor changes to like this double cursor it's like the duplicate cursor so I'm duplicating that so I just click and drag and it duplicates it I can do the same thing here you can even if you had a whole bunch of stuff and then I can option if I'm on a Mac it's option drag if you're in Windows it's alt drag I can drag on that and you can see the whole thing it's duplicating everything that was selected so that can be really really handy so what I want to do here is just bring that down a little bit and I'm gonna write coming soon and the reason I duplicated it is just because I like to font size and everything there but I'm just going to come to my color here and maybe make it less prominent and we can change that font size a little bit down to 48 so this products not out yet maybe we do it you know we could even do like a little coming soon I like that and then I'm a new option drag this one down and the reason I'm option dragging these instead of making a new text box and then having to do it from scratch is it's so much faster because then you just double click to start selecting the text so double click it selects all my text and sign up to be the first to know when it comes out and I have this really big box double click on the corner it shrinks down so maybe that one could actually be bold so we're learning some font controls here at the same time so that we could have and then this here instead of just a button why don't we make it because we can go back over practice some of these things that we just looked at and learn a little bit more rule we're at it so maybe this could be like my name my email and then we'll make a finally a button for sign up so if this is a field that we're gonna fill out what would probably make more sense is having no fill so I can subtract my fill so there's no fill and then come over to stroke here and add a stroke to it and I don't really like the black strokes we can change the color of the stroke and you can change how thick it is so maybe we make that like a big thick box but we make it kind of light and then we want to duplicate it so again you could copy and paste and then move that over but you can alt and drag or if you're on a Mac you can option and drag it and then last but not least we can do the same thing and make that a button but what I would suggest I do this all the time and then realize I want stuff in it so before you do that finish your thing off first and this would be like a really good thing to make into a component eventually but I'm not gonna cover components in this video but I'm gonna write first name here maybe this could be a bit smaller it's a small label but at least we have our label there and I want it bold but I'm gonna drop that down just a little bit maybe 14s a bit small we'll do something like that I'm just oh actually I never looked at this before when we're moving things if you just move things you can move them however you want if you want to make sure they're moving perfectly up and down if you hold shift when I hold shift I can't move it side to side I accept it for a 45 no I can't move it side to side it's either up and down or left and right and there's no like random movement so I often hold shift down when I'm moving things around so now I'm having trouble so this is where I probably zoom in ah I looked at one before which was ctrl + ctrl - the other way to zoom in is spacebar and ctrl or space farm command now the one issue with this is do not do ctrl then spacebar it will not work spacebar than control and you can draw the zoom in that you want to make so ideally this would be a component but as I said we're not at components yet you don't have to know components to get started so we can option drag both of those now that we've selected them and move that over and then just change this one to say last name and then I could just take this and drag that over to make it into a button so the button obviously we want to make that a little bit smaller probably the text is gonna go inside so I just option drag my text right in the middle and you'll see when I position it it's telling me that it's actually perfectly centered but let's pretend we didn't perfectly center it I could drag both make sure they're both selected not my circle so I have them both selected and then I can do center-aligned this way and center-aligned that way and it's perfectly centered inside and now I can just come to here I'm gonna leave that stroke on but I'm also going to give it a fill so I'll hit plus here and I have the fill now I have two different colors here I want them to be the same and one cool thing with figma is it actually keeps all the colors of your document down here at the bottom so I think that's gonna be this one I guess yeah there we go it's that one right there I want it to be lower down because it's all the way on the top and that text is hiding underneath it so we saw before I can click and drag things here another way you can do it is right click and there's the options here bring forward bring to front send backward or send all the way to the back so in this case I want to do a send backward so you can also see it's control and square bracket so look right here I'm going to do control square bracket down or it's the opening square bracket and I can move it that way and if I do the closing square bracket I can bring things back up and I'm gonna keep those two together and we can do sign up and now that I change the text actually I'm going to Center align that text but we're gonna grab both our new center Center this text maybe it would make sense to be all cap so that's actually we don't have to rewrite it we can go to the type details and right there we can get uppercase and there's some really cool stuff that hides out over here so you could always check that out a little bit later and the sign up because it's grey on grey I'll just darken that up a little bit and things are starting to come together a little bit I'm gonna move this over a little more maybe even if we overlap that but we came in with I got color could be or maybe not so we start getting this that's you know coming together as a little bit of a layout and we've learned a whole bunch of stuff another way we could spruce this form up a little bit is if these had round corners on them and it's really easy to make round corners the thing is sometimes you'll see the option for it and sometimes you won't and it depends on how sumed in you are on something so when I click see you get these little white circles in the corner if i zoom out those those go away if I make a really big rectangle I'm gonna see them right away but on a small rectangle if I make that smaller those white circles aren't there anymore until I zoom in so if ever you're like why is that option not showing up for me just zoom in on your rectangle and the other thing is it also depends if your mouse is on top or not see how I'm going back and forth now if i zoom out more those just never show up so part of it is being zoomed in enough and part of it is is your mouse on top or not now there's another place we'll see where it is but this is the easy way to do it because it's really visual so I didn't just click and get something so say I like that you know just get a valley you know I'm visually doing this I'm not looking at the value but once you get a shape that you actually like and you think it's good you're happy with your round corner that rounded radius is actually right here so what's happened here is we've got the x and y coordinates the width the height and here we have the radius and I think 10 is good so I can actually come on these now with these ones because I'm selecting multiple I can't actually do anything I can't come in here and do much so I'd have to do one at a time but I know I need 10 so I can just do 10 come over here do 10 hit enter and I have the round corners on all of them and actually since we're here what we're gonna do is we're gonna make sure that the spacing on these is perfect I said I wasn't gonna do it but bonus tip here at the end we're not the end yet but we're getting there but we're do a nice little bonus tip here to make sure things are equally distributed or equally spaced the first thing I'm going to do is and it's more layer management now I'm selecting my sign up in my rectangle because I want to make sure they're treated like one object so they do that now I can right-click and I can choose group selection or control G and this is a really good one to know control G and you can see it actually makes a group so I can call this sign up and if I look inside that I can see the two elements that are in there now sometimes you're gonna make groups just for moving stuff and then you want to ungroup it so on grouping it again you could right-click and you could choose is there even in there it is ungroup so it's control I was looking I found group and then there's like a frame select and then there's the on group I would have preferred that up there but it is what it is control shift G but it's G's super easy to remember so if I look here I'm just using the shortcut shift control G it undoes it and then a control G and it goes back together like that so I want to make sure it's grouped because if I don't its treating actually we'll see what it is in a second but let's select all three of these keep selecting my circle I'm going to lock my circle because I don't want to select it so I'm going to select these three here and then I'm going to come to this last thing which is my more options and I can either tidy up or I can distribute things equally let's try tidy up it usually works really well and it pretty much makes the spacing perfectly equal now another thing is if you have things and you're spre they're spread out and you're bringing it in you can actually see at one point it's going to tell you when they're the same distance no I really slow now and then it locks a little bit too it sticks here I move my mouse a little bit you can see it's sticking to that space so it's saying the distribution is equal but if ever you have a whole bunch of stuff and you just want to really quickly do it and even let's just do even like something like that select it all go to here tidy up and align them all to the same top and there we go now I want them closer together so another way to do that actually is if you have like really big spacing on stuff and I bring this on top like that I could just do a distribute horizontal spacing and then boom looks good in this case let's just move those out a little bit and I could group these together too I could make a group of that and a group of that just so every time I select one of these like I'm selecting everything all together when you make your groups do name them so sign up button first name last name because if not you never know what they are and I'm even gonna put them in the right order so first name then my last name then my signup button and because I like having these in order that I see them here so sign up to be the first one should be even lower down just some coming soon should be right there and lorem ipsum it's a really cool product and I can click here to select stuff so as I'm clicking you can see it's going through and selecting everything will shrink that down a bit be the first to know first name last name sign up will sign up button and then Mike your obg there at the end of one of the last things I want to look at is placing images so placing images is super easy to do one way I'm just dragging this from my desktop and dragging it over here under figma and it's gonna drop the image that I wanted right inside of figma now my image is really big so I'm just doing a control - to zoom out and then I'm pushing shift and alt or if you're on a Mac could be Shift + option just to shrink it cuz it's faster like a lot of the time if you're doing it this way you have to do it and move it so shift alt and it drags it from the middle and I could position this image and then I'm gonna do spacebar ctrl to zoom in or I could have done the ctrl 0 to get to 100% lots of ways to zoom and then I could you know position this however I want but obviously on when actually really nice thing I figma as it will crop your image automatically so if you're taking it away from the original dimensions you can see it's cropping it however it needs to crop it to fit those dimensions which is really handy if you want to make sure that you're keeping your full image just always hold shift just like we saw that's sort of like scaling right so we can hold shift and it's gonna make sure that it does that right there the thing is I don't want this now I could come actually on this and make some around corners on it if I wanted to and maybe that would be cool but I actually I want to sort of use the circle thing I made here so maybe I'm gonna reposition that a little more so let's bring that in like that and maybe these are kind of big so maybe I can shrink those down just so you know I think that's probably gonna be big enough these now oh these are in a group and if I'm in a group and I want to select one layer in the group I could either click it here and drag it out or I can just double click on it and drag it out that way and I'm gonna click anywhere else it leaves the just so I can bring that on top more and I sort of want to line the bottom in the circle up with that maybe bring it a little more because visually it's gonna make it feel like we're there a bit more um and now I think what I'm gonna do is I want to pass it I have this as my layout but now I want to position I want to place my image in there so that's actually gonna be under here which I find a weird place for it but all the way at the bottom you can see there's a place image or it's a really awkward shortcut of ctrl shift K no idea where that came from but control shift K and then we can find the image so that's just in my downloads and we can get that and it's going to ask me to place it on whatever I click on so even if I click on my text check that out of places that inside my text just like that so easy I'm incredibly easy to do I don't want it to be there though so it's on do so ctrl Z and let's do that again place image I got this from on splash and I want to place it here so I'm just going to click and it puts it inside so super easy super awesome another way that you can actually do this another thing with this and this is a little bit like InDesign for any of you print designers out there if you grab multiple things at once like multiple images and you go to do a place it works a lot like InDesign where I can click on multiple places so I could place one here then the next one here then the next one here and then finally one here if ever you have a whole bunch of assets you say you had like a set of eight cards you know to place all eight cards really fast you can do it that way but we don't want to do that for now we just want to bring that in one thing also that's really cool figma if I click on the image and I'm gonna reposition that I don't really like how I set that up I'm gonna actually I want it to be more like this I'm holding shift I still want it to be a perfect circle one thing that's really cool though is if I come to my image here I actually it's unlike fill option so you can see it is set to fill but I get all these options for like tint I could change the tint of my image I can change the contrast the exposure of the image here in figma which is really really neat and I think you can even rip layout you can replace the image as well or I can switch it you know I don't want an image anymore if I choose solid now it's going to wipe and put a solid color we don't want to do that I think the image is looking pretty good but actually now that I'm looking at it I think this text could be a little bit bigger and one thing I can't do and I mentioned here if I shift this it's sort of like a scale if I select these and I shift it's not it's it's scaling the box but it's not scaling the text inside that box so to be able to do that there's another tool and it's underneath my move tool and it's called the scale tool and this one is a K and I don't the other thing with K there are places with K and scale is with K I don't know why they like the letter K especially for scale but it is what it is it's a good one to remember so that one I would actually suggest just hit K now one thing I don't like is you'll see here I'm on my V tool my move tool it looks like that and if I switch over to K the tool doesn't look different so okay I often switch and then forget I switched cuz my black arrow didn't change at all but it's just the way it is but you can see here I'm on my scale tool now so I can actually scale this up and down now I don't have to go through and start playing with my font sizes I can scale this to how I need it to be so I'm actually going to scale that up a little bit then I'm gonna come here I'm gonna push V to switch to my move tool so now I can actually just move it around instead of being on the K because the K you might accidentally start scaling it you can move around stuff with your scale tool too though and maybe I do something like that and last I think for the layout itself right now I'm kind of happy with it I'm gonna move that just to give a bit more breathing room along there we'll go with something like this the last thing I'm going to look at now is grabbing colors because colors can be hard I don't want to go too in depth into the world of colors actually going to move that up and maybe we'll do like something like that I guess is okay but what I want to do is grab some colors and this has really nice colors in it so I can take this and when I have my fill you'll notice there's an eyedropper so I can actually click on that and I think a Rabb a color from here so I can go through and grab a pink really fast I can also if you don't you know that's kind of long so just like any other design software if you're used to anything else if you just click I you get your your coming soon I don't like it I want something darker not fantastic colors maybe but here and that now actually just really fast even though this is a group of items one thing I love with figma is it shows me the two colors that are being used here my dark color in my light color and now I can go to here and choose that same pink I was using and then I can choose my text color here and bring that all the way up to white so I can actually read it this one I'm going to bring back into the greys though or maybe a dark purple or something like that and this could match that so I could run through and quickly start adding some color to these maybe even here let's go to my rectangle tool so I'm pushing our oh really important here if I'm making a rectangle and they push spacebar it moves that without me letting go so I can sort of position that a bit better move it all the way across sure I get all the way down under everything and position that a bit more I'm gonna I drop in these light pinks I'm gonna come over here and just lighten it way up maybe I can round these corners just because we have round corners there we have this big round circle we can make this like that these ones now I think would make sense if they actually had a fill I want just stroke that's the fill so because I'm double-clicking to come inside here and I can come here and add a fill which will be white double click on this to fill will be white and I don't really like the outside corner there color so I'm selecting both that was this one I think for that I'm actually gonna go back to the darker purple mmm maybe this purple something like that might work a little bit nicer and we start getting towards some sort of you know we could call the action sort of thing coming out of that and we could do something a little bit like that I'm not sure if I like that being bold so now you start playing around with things a little bit I think I might even just leave this straight and bring it underneath now one way you can make sure that it's going to be straight if you drag and turn you're rotating if you hold shift you can see it locks things into place so you can sort of come through and lock that into place coming soon make that more like multiple lines of text and now my image I'm actually gonna make bigger but bring it off to the side of it more just so this is you know I think that sort of frames everything a little bit more and we got sort of this hero area for the landing page is coming along it's I don't think it's perfect by any means these are actually probably a bit too round looking at it now so I'm just gonna sort of tweak things a little bit here but you can play around with it this should also all be lined up let's just grab everything group it all call that CTA for call to action not GTA CTA and position that I want to just make sure that everything here like this and this I want them to be lined up so I'm just visually doing that a little bit and look when I did that you can see that if when I grouped it it pulled everything ahead so I could again drag it all the way down I can also just do a shift control opening square bracket and that means go all the way to the bottom and I'm going to leave that open because that's one of those things you might group in on group a few times maybe up here you need a little logo or something like that but you can come through and we have a nice little sort of landing page for a new product that will be coming out I hope you like that I hope you learned a few things with this and I hope you are what I'd really encourage you to do is not just watch this video but to try and design something yourself figma is one of those things it's like anything else when you're trying to learn something don't just watch what other people are doing really get in there and actually try to meet stuff and do stuff and have fun with it if you're not strong on design and designs your weak point that you're trying to get into design look at other designs I didn't well I sort of created this one from scratch but I had that stuff ahead of time to sort of have an idea but what I wanted to do do that look at other designs copy them at the beginning just copy the design completely try doing it in figma you're gonna be learning about designs more subconsciously because you're copying something and you're gonna be learning how figma works at the same time it's a pretty easy tool to get into we don't need all the bells and whistles like the components and really note they call it components but whatever they call it you don't need all you don't need to be doing the prototyping stuff from the beginning you just need to be making stuff you are going to learn how the software works you're gonna get comfortable with the basics and then you start adding some of that fancy stuff on once you're used to and comfortable using the software the biggest piece of advice I can give you is to use your shortcuts please please please use shortcuts and they are you just work so much faster it's incredible the difference and it really sinks in quickly if again look at what the shortcut is oh it's K I'm not gonna push anything I'm gonna come back down and then I'm gonna push K on the keyboard you do that five or six times you start remembering that it's cane you don't have to look anymore so that would that's like the biggest piece of advice I can give you when you're starting to learn a design software start using the shortcuts immediately also before you go don't forget to check out the link to Kyle's course that is just down below and that is it for this video if you did enjoy it please consider subscribing if you have not yet subscribed I don't have tons of design content yet but it is something that I plan on making a really big part of my repertoire here I'm still gonna be going with CSS tons of CSS tons of front-end material but I want to balance that with a lot more design content because that's what you guys have been asking me for thank you very much for watching you guys are amazing a really big thank you to my patrons for their monthly support you guys are absolutely amazing and help make everything I do here possible

Channel: Kevin Powell

Views: 76,856

Rating: 4.9652553 out of 5

Keywords: Kevin Powell, tutorial, html, css, figma, getting started with figma, figma tutorial, figma for beginners, a beginners guild to figma, figma intro, figma introduction, using figma, web design figma, ui figma, ux figma, figma tutorial for beginners

Id: eZJOSK4gXl4

Length: 43min 16sec (2596 seconds)

Published: Wed Jul 15 2020