Introducing Figma: A Beginners Tutorial (2023 UI UX Design)

Today we're gonna dive into figma so if 
you're interested in learning figma for   designing websites but you don't have a lot 
of experience in the tool yet then this video   is for you because I've made sure that we're 
going to use the most important features in   figma in order to create this design and the 
project that we're going to create together   is this simple home page for a gym it has a big 
background image with a transparent header and   an overlapping icon row a text section with 
an image on the side and a simple footer with   social media icons and all you need to do is make 
sure you have a figma account which is free to do   just click over here make an account then go 
to your drafts click on new design file and   from here on I'm gonna give you all the images 
the colors and everything you need to recreate   the design and after that feel free to use it in 
your portfolio just change up the design a little   bit and then it's fine so how figma essentially 
works is that everything is in a horizontal box   or a vertical box as you can see right here and 
this is basically how the web actually works so   designing in figma will make you understand the 
web even better so now let's just get started the first step is to structure of the layout 
so look at this design it has three sections   this first one then the text section and then the 
footer and it's better to first create those three   sections so that you're not gonna focus on the 
details too soon because that's what designers   like to do but it slows down your progress so 
let's just do that so in your new file we first   need to create an artboard so before we can start 
adding text and colors we first need a frame and   frame is kind of like a page so you do that by 
creating a frame over here so if you click on   the frame then on the right over here you can see 
a lot of options and the one I always start out   with is desktop so click on the desktop that's 
1440 pixels in width and like I said let's first   create our three main sections alright so what 
you're gonna do is you're gonna go over here   grab the rectangle and then create a shape like 
this then you can drag the edges and make sure   it's aligns to the top then we have an empty space 
over here and then we have a footer at the bottom   so we can create another shape from here but it's 
easier to make a duplicate of this one so hold alt   or option and then click and drag and then it 
will make a duplicate now you want to align it   exactly in the middle so here we're going to use 
our align option which is a lot nicer than just   trying to make it fit in so just click on middle 
align and then over here to the bottom because   that's what we want and now we only have to drag 
this part down and it's still perfectly aligned   but our design is a little bit short so if you 
grab your artboard or frame over here then you   can make the whole artboard a bit longer you 
can by the way zoom out by holding commands   or control it's alt or control on Windows I'm not 
really sure and then just drag it down or you can   simply change the number over here I'm going to 
change it to 1700s like this okay so now we can   put the footer again at the bottom with this tool 
and make it a little bit higher and for our top   part we also gonna make it a little bit higher 
we will do this overlapping part later because   that's a little bit harder but for now let's just 
create created the shape for our image so now I'm   going to grab a new rectangle like this you can 
also access that by clicking on the r and then   create a rectangle like this alright but now where 
do we actually align it that's a problem so now we   need to dive into the grids so as you probably 
have noticed all websites are based on a grid   and some websites skill discrete but most websites 
keep the content in a specific pixel width because   otherwise the text boxes become too wide and it's 
not comfortable to read and we need this grid to   align our image so let's just do that I'm going 
to click on my artboard over here and then over   here you can see layout grids you can click on the 
plus over here it creates a standard grid but that   is a horizontal and vertical grid so click on 
this one over here click on columns because we   just want 12 columns 12 is the industry standard 
because you can easily create two boxes three and   four and six which is kind of nice so we're gonna 
use 12 columns it doesn't do anything but you need   to click outside of it to see the changes put it 
on Center because now it stretches sometimes you   want that but for this design I don't want that 
so click on Center but then you need to tell figma   how wide each column should be and a common use 
size for this is 75.

Why well because then from   here to here it's 11 20 pixels which is used in 
many Builder tools like Elementor so as you can   see whoa whoa I aligned it almost perfectly in 
one pixel which is a coincidence so that's kind   of funny so I'm going to align that to the grid 
and I'm also going to make it a little bit wider   like this because I wanted to stretch over six 
columns like this and if you do that you can see   that it's exactly 150 pixels from this section 
and from this section you can actually activate   that by holding option or commands and then you 
can see the pixels if you hover with your mouse   which is nice okay so now let's add some colors 
I'm gonna go to the fill over here and I'm gonna   change the color to to pure black because I want 
to use pure black on this website and then you   can go on this shape and also put it on black but 
there is a trick here which you should know which   is the asset colors because for example black is 
used in many places in this design so you want to   save that color so you can reuse it later so now 
this one is black then you click on these four   dots it's called style and then you can add 
this color to the color styles they call it   color styles over here it's called assets color 
assets in Adobe XD it's all the same thing it's   Global colors that's what I actually think they 
should call it so you click on the plus and then   you you give it a name for example black all right 
and you click on create style and now this one is   safe so if you then click on another shape instead 
of just changing the color from here you can click   on the four dots again and then select your black 
as you can see a little bit easier for this one   we don't have to change the color because in our 
Design This background is actually soft gray so   if you want to use the same same colors as me you 
can drag in the files so I will share these files   in the description below so you can download them 
and then you can drag in my colors if you want to   like this make a little bit larger so here are 
my colors it's just a screenshot from my figma   actually and then you can grab the background 
so grab your artboards now it's set to White   which is ffff so you click over here and now you 
can click on this tool you can also access that   by the way by clicking I so you click on this one 
and then you go over the soft gray and boom there   you click it and I also recommend to also add 
that color to your style so click on the four   dots again and call it a soft gray create style 
so where are all these Global colors shaped well   you can access them by clicking outside of your 
artboards just not in your design but outside   and then you can see it over here local Styles 
and here are your colors you can change them   afterwards so let's say that you want to change 
your black to maybe not 100 black but a little   bit softer then as you can see it changes in your 
whole design when which of course is awesome I   just put it on a little bit lighter like this and 
then the last thing that we need to do is create   this diagonal shape that's also really easy to do 
you can just click on the shape then double click   it again and now you can access the individual 
points so you can grab this one and put it up   like this yeah that's something like our design 
all right and then click outside double click   it and now we're done so the basic structure 
is here let's now move to images and icons so here's the image that we need so you could drag 
in the image like this and then mask it like this   but what I like to do is just click on the image 
over here and then instead of using a color use a   image as a background so now this is connected 
to the global color so I'm going to disconnect   that click over here and then you can select 
instead of a solid you can select an image and   now you can drag your image over here and then it 
masks you even have some very simple editing over   here if you want to change the image a little bit 
let's just increase the opacity a bit that looks   pretty cool and now your image is in here but it's 
not in the right position so if you hold option or   alt and double click there you can reposition it 
like this make sure to hold shift so it skills   proportionally and then put it in the position 
you want just look at our example this is where   I want him to be but now we have a gap over here 
so click outside of it so what's beautiful about   figma is that you can have multiple layers 
within a fill so now we have an image as   a layer in a fill but we can add another layer on 
top of it so if you click on the plus you can add   a layer on top of it so now it's a solid which 
is on 20 opacity so if I increase that you're   not going to see him but if we then go to linear 
which is a gradient then we can say like we want   to go from black to white so this left one is on 
black 100 and this red one is on zero percent it   doesn't look like it's on 100 because this layer 
also has an opacity so I'm going to change that to   100 and now you can see that we're almost there so 
I'm going to open my gradient again I'm just going   to grab this point and just position it over here 
so this is pretty cool as you can see two layers   in one shape we didn't have to group anything and 
it's all here on the Right Alright for this image   I'm gonna do the same so I'm gonna click over here 
then go to solid image then drag in my image over   here and there she is we can reposition it again 
but I'm fine with this so now we have two images   let's drag in some icons so I'm going to go to my 
folder I have three SVG icons over here which are   vector icons and then drag them into your figma 
like this they're not all the same size and we   want them to be smaller anyways so let's just make 
uh one of them let's just drag it in over here and   let's just make that one a lot smaller for this 
design I want them to be 30 by 30 so you can just   drag it over here and then look at the numbers 
or you can go over here and then change the width   and the height so if you put this one at 40 it's 
gonna stretch so if you don't want that then make   sure this one is linked and then if you change 
it it's gonna change the width and the height   so for now I'm gonna put it at 30.

I'm also gonna 
do that for these two you can select both of them   by holding shift select this one and then put them 
at 30. and now you can see we have the three icons   drag them over here and now we're going to use 
Auto layout for the first time this is the most   amazing feature I think in figma so if you select 
all of them and you click on shift a it's going   to create a grits this is not a group it's kind of 
like a group with a lot more features so in a tool   like Adobe XC you would group Everything But Here 
auto layout is a lot nicer because now for example   you can do things like this but like I said in the 
intro it's vertical or is horizontal we also want   these icons to be white so if you go down over 
here you can see what kind of colors we're working   with for these icons so I can put them on white 
and I also want to add white to my color so create   a style call it white and there we go alright 
let's add our icons to the grid but our grid is   gone I did that by holding shift G then you can 
hide and show your Grid or you can go over here   and then use this eye over here so make sure to 
add your icons over here and we're going to work   a lot more with auto layout in The Next Step which 
is working with text layers okay so let's add some   text layers let's just first start with the big 
one so this one over here this one and this one   so I'm gonna go over here I'm gonna select t for 
the text tool I'm gonna click over here and we're   gonna type Fight Like A Champion and here you 
can see the newest feature in figma which is   auto correct really cool so if you're in your text 
layer figma can now auto correct it super cool the   font that I want to use here is Sarah and then 
condensed you can click over here all the Google   fonts are automatically already loaded in and then 
I want to use the Bold version I want it to be 130   in terms of size and I want the text to be in 
capitals that's a little bit hidden over here   if you click on type settings then over here you 
can put it on uppercase alright so now I'm gonna   decrease the width of the text layer because 
I wanted to break as you can see in my design   after like it doesn't do that right here which I 
don't really like so for now I'm just gonna click   after the A and then click on shift enter to get 
what I want but as you can see the line height is   much too high and you can change that over here 
line height I'm gonna put it at 90 for many other   text layers you want to use a higher percentage 
above 100 but for big titles it's less this also   really depends on the font but that is what I 
found alright so now let's just turn on the grid   again so I can align it by the way I don't really 
see the red on this black background so let's just   also change our grid color so I'm going to click 
on my artboard I'm going to go to the grid again   and I'm just going to change the color over here 
to something we can actually see maybe something   like this blue it's a little bit intense over 
here but we need to see it all right that's a   little bit better now we can at least see what 
we're doing okay so I'm gonna turn off the grid   again with shift C and as you can see in my design 
the word Champion is red so let's just make this   word red now I'm gonna double click it and then 
I'm gonna click on the plus I'm gonna change the   fill to a red color like this 100 opacity actually 
I think Carla was more something like this so okay   so now this text is red as well let's just now 
make a smaller version of this text so I'm gonna   make a duplicate by holding option or alt like 
this now I'm gonna change the size over here to   50 and the line height 110 because if it's smaller 
you need a little bit more space all right in my   design this text is black so I'm gonna select this 
one I'm gonna create a fill and we're gonna put it   at black and of course we're gonna use our Global 
colors and this text is the same size as this text   so now we can also save this color to our Global 
font so in the same way click on the four dots and   then click on plus and I call it something that 
you want for example I'm going to call it heading   2 because this big one is heading one make sure 
to click on create style and now you can see that   it changed so now if we make a duplicate of this 
text and we make it white and we click outside of   our artboard we can see our Global font over here 
and if we change it over here so let's say we're   gonna change it line height now it changes both 
of them all right perfect so click on the great   again sure to align it change the text decrease 
its width and in our design the word next is red   so let's try to select the red but as you can see 
we haven't saved the red so we need to go back to   this one and then this red we need to save it so 
let's just go to fill style click on the plus and   then call this red create the style so now this 
text has red and white I also haven't connected   the white as you can see like this so now if you 
go to this layer and you select the next you can   click on white and then click on red and now this 
whole text layer has two Global colors as you can   see perfect we have two more Simple Text layers 
which is this one and the menu so let's just   create that I'm gonna click on the T again create 
a text box like this and I want to paste some   lorem ipsum in I haven't installed any plugins 
yet to do that so I'm just going to use my Chrome   extension but there are ways in figma to do this 
I will make a separate video about Henley plugin   by the way so paste your lorem ipsum text in and 
now we need to detach the global colors because we   want another style for our body I want to use the 
font enter it's going to be a lot smaller like 16   which is a good size for body font the line height 
needs to be 170 because that looks better for   um body text color that I want to use is gray 
but it's the darker gray for body text you almost   always want a font that is a little bit lighter 
because otherwise the contrast is too harsh so   what I'm gonna do is I'm just gonna color pick my 
color that I've prepared like this and of course   I'm going to add that color to the palette as well 
gray okay we don't want all capitals we just want   it to be normal like this and we also don't want 
everything to be bold it should just be regular   now this looks like a great body text I also see 
that I forgot to change the text turn on the grid   again to make sure to align it on the grid so this 
one on the left and then this one to the edges I'm   gonna add a enter over here to make it a little 
bit more readable and then never forget to add a   font to your glow balls so over here we're going 
to do that we're calling this body text create   the style this one I also haven't connected that 
but of course we're going to use the heading too   because this one is also on heading 2.

Alright 
let's now go to the menu because that's the last   step before we're gonna go to the combinations of 
icons and text and we're going to use Auto layout   for that so uh let's just copy this one with alt 
or option let's make it white let's detach The   Heading 2 because we want to make a new style this 
one needs to be 16 all right this is the styling   that we want so I'm gonna add that to the styles 
again I know it's a little bit of work in the   beginning but you're gonna thank me later for this 
okay I'm gonna call this menu okay now I'm gonna   change this to home but this text box is a little 
bit too wide so if you double click over here then   it just becomes a single item okay so I'm gonna 
create some other ones okay now select all of them   but if I try then my image is gonna move so in 
this situation like this where you're working on   a background I would suggest grab your background 
layer then right click and then lock or unlock or   you can do command shift L and now you can just 
easily select your layers like this click shift   a again for auto layout and there it is your menu 
what's also great about other layout by the way is   that you can click and then change its positions 
and it sticks as you can see it's really really   nice we want 30 pixels in between all right I'm 
gonna position it and we need some space for the   button so for now I'm just gonna leave it right 
here and then the last little detail that I forgot   to add is this little line over here I've just 
used the rectangle tool to be honest so clicked   on the rectangle create a little rectangle and 
then select it to Red like this and I made my   title a little bit smaller that's actually all 
I've done okay and this is all we need for now oh   and I also forgot one other thing and that is on 
the bottom over here we have terms and conditions   and privacy these are just two simple text layers 
with the body font so you could just click T and   just type in privacy policy then make sure to pick 
your body font like this post it over here make a   duplicate and change the other one and make sure 
to both align them in the grid we're gonna Auto   layout them later but for now this is all we 
need okay it's starting to look like something   so let's just go to the next step where we're 
going to take it a step further with auto layout   okay let's now finish our menu with the logo 
on the left and the button on the right and   we're gonna drag in this icon that we're gonna 
use I'm gonna drag it let's say outside of here   I'll first make it white because otherwise we can 
see it and then drag it in over here make it a bit   bigger then I'm going to copy my title change 
the text I'm gonna make it 32 this icon I want   that to be red so right now it's white I'm gonna 
make it red and again select both of them and   make an auto layout of it now we want to create 
our button so in most other tools you can first   create a background and then you put a text on 
top of it and then you group it but in figma this   is a little bit different with buttons so I want 
to use the same text style over here but when I   duplicate this one with common D It's Gonna stick 
inside of this Frame which is not what I want so   you can simply click and then drag outside of it 
and now it's free from the auto layout change it   to sign up now turn this one also into an auto 
layout with shift a and then it's going to add   this box you don't see it yet but there is a box 
let's make that box visible by giving it a fill   so I'm gonna go to fill I'm gonna give it a red 
background and now you can see the box as you   can see this Frame only contains a text it's kind 
of like a group but then a little bit different   but the beautiful thing about this is that you 
can increase the horizontal padding like this   and the vertical padding as well think 10 is all 
right and we need another button over here let's   first position it so I'm going to turn on my grid 
again I'm gonna position it and I want to make   sure that it's in line with the logo and also I 
want this one to be a line so you can try to do   it yourself or you can just select all of them 
and then press Auto layout again and now it's   automatically aligned in the middle but we don't 
want the menu over here we want this space to be   less so here you create another Auto layout 
because by default it will space out all the   items evenly so if you then select this one and 
this one give it an auto layout again with shift   a and then you can decrease this size to for 
example 30 and now you can decrease this size or   you can just drag the side over here and then make 
it wider but that doesn't work why well because   there's another tool you should know and that is 
a little bit hidden it's under here so if you go   to Advanced layout by default it's just stacking 
or packed but if you put it on space between then   it will automatically create that space within the 
box or within that container this actually works   the same way as the container does so now we have 
this one which is a horizontal container we have   this one which is horizontal and also has some Gap 
in between and then we have this whole container   which is C is the right part as one part and then 
the left part as one part and it creates as much   space as possible in between so now if we decrease 
this as you can see it scales perfectly okay let's   now add another button over here but hey we've 
already learned that we can reuse things so this   is the same for the button so I'm going to click 
on the button again double click it and now we're   going to use this feature called component so if 
you click on this icon it creates a component and   a component is a reusable element so this works 
similar to Global colors and fonts but it's not   saved in the same place so if you click outside of 
your artboard it's not saved over here they have   it over here on the assets so here you can see 
desktop we have this button so now it's better   to drag the button from here into our design like 
this and here you can see if you go back to the   layers that this is a frame now it has this shape 
which shows that this is a component but this is   not the main component you can always find the 
main component by right click and I click on go to   main components and if you change this component 
because this is the main one then the other one   will change as well so let's just try that if I'm 
gonna increase the size as you can see the other   one skills it as well so let's just do that let's 
just put it on 30 make the button a bit bigger   and that works perfectly so let's now add Auto 
layout to this section so what do we see here we   have this part this part and this part which are 
aligned vertically but if we select all of them   and press command a then it's going to be stacked 
vertically so you need to go a step back with   common Z these two parts need to be horizontal so 
I'm going to make an auto layout of this one first   and then figma already sees that it's uh it's 
horizontal and now figma sees this as one element   so now we can take all of them and press shift a 
again and now we can change the values over here   and then it does what we want all right let's 
align this in the middle I want the image to be   the same size so we'll just resize that okay that 
looks pretty good let's just do one more exercise   with auto layout because this is so important 
okay so in our final design in the footer we   have this icon over here and then email and then 
the terms and conditions and privacy over here   we're going to use the same trick first we need 
an icon and an icon is not part of this folder   because I wanted to show you something so if you 
go to iconfinder.com this is a beautiful website   you can take a look at their packages they have 
beautiful icons over here but if you just search   over here for example to email you can find all 
kinds of icons not all of them are free but a lot   of them are free so this one for example that one 
looks nice so by default it's on PNG but you can   go to SVG which is Vector and then if you click on 
copy over here and you go back to your figma and   you paste it it's already there and you don't have 
to save it on your computer first it's beautiful   so let's just change that to White all right I'm 
gonna put it in the footer over here I need a text   layer for my email info ad box champion.com okay 
so let's now add Auto layout to this whole section   first let's select all of them but now it's also 
selected background so I'm going to lock that   background again select all of them shift a that 
doesn't work so we need to create a box over here   and a box over here so this one in Auto layout 
this one in Auto layout and then these two boxes   in another Auto layout and then as you can see it 
perfectly aligns as well show that again this one   already was in an auto layout so if you want these 
two to be aligned in the middle you also select   both of them and other layouts Perfect Right these 
two don't need to be in an auto layout you can do   that but I don't think that's that's necessary 
so now we're done with most of the basic things   now we're gonna go do the hardest part which 
is this one over here this is the hardest one   so we need to go to the website again and we're 
gonna search for fitness icon for example I'm   gonna grab some cool icons you can filter on the 
left for free by the way here we have a free one   beautiful copy okay now I have three icons let's 
first I'll make them the same size so I'm going to   select all of them make sure to link this one 
and then I'm gonna make them 45.

Alright that   looks decent but as you can see with downloading 
icons sometimes they don't look the same because   this one looks a lot bigger so sometimes you 
just need to change it a bit and use your eyes   in order to create something that looks a little 
bit similar okay so we also need three text which   is another one it's 24 in size so let's just do 
that I'm gonna create a text layer let's just   start with this one because I think it looks 
similar unlink it 24 that looks good add that   again I'm gonna add some random text over here I'm 
gonna make these texts red so now you're probably   thinking like hey we need a rectangle over here 
but we can use Auto layout in the same way as we   use in the button which is pretty cool so first 
we need to put everything in an auto layout but   if we're going to do that right now it's going 
to be in one row so this is a vertical row and   this is a vertical row and this is a vertical 
row so three layouts then all of these three   also needs to be in an auto layout so I'm going 
to add other layout over here all right and now   we can add the same kind of background as we did 
with the button so I'm going to click over here   and then click on white here you can see it adds 
a background and now if we increase the padding   you can also create a box like this so let's 
add our grid Again by holding shift G and I   want this to be middle align so first I'm going 
to do that then I'm going to move it up a bit by   holding shifts so it goes straight up and now if 
I increase the padding it starts to scale from   the left but I don't want that so there's another 
trick over here and that is constraints so if you   put the constraint which is now on left on Center 
and now you start to increase the padding now this   is what happens now it doesn't move to the right 
which is kind of nice we want it to be as wide   over here if we also change the space between or 
the element Gap then the sides also become bigger   because this is the padding so it always keeps 200 
pixels so first decide how much space you want in   between the icons so for example 120 and then 
decrease this size in order to make it fit zoom   in a little bit to make sure it's on the grids 
perfectly alright now shift G again and there's   one more thing we need to do to this part and that 
is a shadow because I don't know if you've noticed   but there's this soft very nice shadow under this 
part so I'm gonna click over here and we're gonna   go to a new feature called effects click on the 
plus drop shadow is the first feature there are   a few other ones but for now we're just going to 
use drop shadow click over here to change it we   need to increase the blur so click over here 
and then increase the blur and make it really   nice and soft and for the color I want to use red 
maybe a little bit darker as you can see this is   starting to become really beautiful I'm gonna also 
put it a little bit down increase the blur again   oh this is so cool I'm gonna decrease the opacity 
because it's a bit too intense but now as you can   see it starts floating and there's a really nice 
contrast between the white background and this   gray background with the Red Shadow in between 
look at that absolutely beautiful so let's now   compare this design to our final design and we 
can see that there are still a few differences   this image is a bit taller than the text which 
is nice it creates some balance so let's just   do that as well with our design but if we just 
go over here we make it higher by holding alt   by the way you can do both sides we don't actually 
have enough space for that so we want to move the   footer down but this layer is locked and these 
are two separate layers so I want to show you   one more thing and that is to use the constraints 
again but then in a different way so make sure to   find the layer for on the footer because you 
can't click on it and you can see this one   is locked so let's just unlock that so now we 
can edit the footer again select the footer if   you press shift a it's going to create the auto 
layout again I don't want that because then it   changes the padding so in this instance I would 
use a group so just right click and then group   or shift G and now click on the group and then 
over here on constrains click on this one over   here because that changes this one to bottom and 
that means that whenever you're gonna change your   artboard this one will stick at the bottom so now 
if we click on our artboard you can see that our   footer just sticks to the bottom which is nice 
because it happens a lot of times that you're   making your page longer and adding elements so if 
you know that your footer and some layers need to   be at the bottom just group it constrains bottom 
and that's really nice I'm going to make it a bit   longer and then I'm gonna grab all of this gonna 
make that an auto layout again to make sure that   this one is aligned in the middle and there we 
go and then there's one more difference and that   is the background why does this one look better 
it's because of the background so you can change   the background color of your whole figma if you 
want to so if you just click anywhere outside the   background over here you can change that as well 
and that's what I did and that's why that one just   looks a little bit better and also the icons I see 
are a little bit thicker which I like a little bit   better so as you can see it's super similar to our 
design we've covered the basics but if you want to   learn more about figma then you can sign up for my 
fikma course right now it's a waiting list but if   there's enough interest for the course then I will 
create a fake my course so if a thousand people   sign up on this page then I will create that 
course and I will email everyone with a discount   that signed up on the page so that is nice and 
I also want to make this design when Elementor   comes out with the container in Elementor which 
I think is also going to be pretty fun and then   we can also make it look good on tablet and mobile 
so hope you are excited about that for now I want   to thank you for watching and hopefully I will 
see you in the next video a living with pixels

Website Setup Service

Leave a Comment

Your email address will not be published. Required fields are marked *