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