Learn how to Design a Web in Figma

hi this is hygienist cookie and welcome to my channel building amazing things do you really want to know how to build this amazing website using figma then keep watching so let's get started this is my figma project and this is where I see projects I've done before now so if you have not registered to fig my doors open figma dot-com and register and you have access to this by the meantime if you're new to figma you don't have any projects but I've already done some projects or figma and these are the Pharos project I've done on figma so to get started you click on the plus icon at the top here and this environment gets opened for you so a quick introduction to figma at the top you see the different tools you can use you can see the a pictu you can see the frame tool the shapes they paint it takes the hand tool and the comments too so now what I'll do first is to add a frame I'll click on the frame tool and click anywhere on the canvas then I'll do it a general setting of my x and y as is to be zero by zero this just keep the frame by the center you can you can decide not to do this but I feel this is a best practice to do so next I want to set the width and height of my frame I want my frame tube you want twenty by ten eighty the reason for this is to give a forty approach to my design so I can select a hand too and drag this to the center one thing I want to do is to zoom which you can do opa insulates to be fifty and user onto a drug it is not okay I can select two feet and that's fine then the next thing I want to do is actually what we design what are we going to design I think actually design it puts folio for a photographer what do you think about that that would be nice so you put spoiler that just tells you this is what I do this is how you're going to contact me this is wrong these are my social media links and the rest of that so to do that we meet some pictures and we need some content about you food to refer and the rest of our so but let's get started first I'll get my right angle tool click on the wrench I will to make this rectangle right here and I think I'm okay with this so now I'll meet once you create a component or worse you are the components to your frame by the right-hand side of your screen you're going to see the properties of that frame so I can add color things I can set the width and height so you just go through these properties and know what you can do with its right angle so I'm going to give it a call though and right now you can just click on under the feel you can just click on the color year and just select any color you want to use for your design so right now I'm going to scroll down here and this might be fine but if you have a color code you won't use also you can those type in the color I prefer out the color code already so I'll just copy this color code and I'll put the color code here and enter do you think figma is a creative yeah it might appear to like so easy to use if you think figma is a great to comments writer comments tell me yes figma is a great so I won't see a comment in the comment section rights may comment tell me that pigment is a great so so the next thing I want to do is on a lolly text and on the property of the text I'm going to select blessing font size of 48 be the name of this site who's going to be the owner I'm going to use Bolivia that's not my girlfriend anyways I'm going to use you leave the Grace and fine if you're thinking if you're doubting me she's not my girlfriend so the next thing I'll do is set the font type by clicking down here and then like Pompeians such reporters and weights from this yes so I will select Pompeians then I'll make it on boot that's great so I'm going to take this down here this look nice our next our other space within the text so you can see this you can later spacing so you can click and drag to the right to increase the later spaces so now this is okay the next thing I want to do is our atom let's see links to the website lakes a home about and the rest of that so what I'll do is I will say I will list a house Allah detects and mister one on the font size should be lacing eighteen and I'll have a boom and think is it a Miss Mona 24 put it in Foy's lines so this summer I'm not going to make a bottom using medium I will drag down here and boom I think I notice this black is way too thick I'm going to reduce the opacity of the black so click on the failure and reduce the opacity and this is okay so half boom next thing the home brings me to the whole page next thing is about that we told me so to duplicate this those who'll your alternate on the keyboard and click with your mouse and drag that's fine if you do that great good job so the next thing is to type this to be about you need to add another one using my alternate and click and drag call these are black services but it's services I render then I think I need another one yes I do you probably want to contact me click on this and drug and sorry normally you are contacts believe you so next you know do is I'm going to add on such that is such it gives me on such anything on the sides I'm going to duplicate this also I'll call this such and I want to stretched about standing so our going to make it I'm going to make it down its Alex so select italics ok next thing our Olivia won't display the icon social media icons on the top also let's say Facebook Twitter and the rest of that but our arrangements are poor so let us fix that so I will select all this by clicking the ships by holding the shift key on the keyboard and click on each of the components so this is a great tool at the top here which can say align left align horizontal Center so but what I want to do is to align them vertically Center does good so all aligned part Alessandra then also there's click on this and select this boot horizontal spacing she's going to give each of the engine explicit spacings between less is such a contact is the same space between contact and services so next thing I want to do is to add my social media icons now one great to hear is that you can go to places will use your phone to post some icons you can go default also and download their icons one great julia is a pigment you have access to plugins so you can install some plug-in and use that in your project so to do that you can click on the file and click on plugins and click on manage older games so when you click on manage programs is going to open rights here so these are the plugins are installed you can install your new plugin I've already installed them font awesome does the fact I've installed fonts awesome so what I'm going to show you how to install that so just click on plugins here then go down and click on browse all plugins means such the plugin you want to use so sorry oops that should be front also so just click on it you can see I've already installed it if I click now I'm going to install it so I'm not doing this I'm going back to my design so once you're done installing means to use the icons you just need to right-click there's a shortcode and go to plugins you can as well put to file a desktop and click on plugins right here so but what I'll do is to click on this frame when I will right click and say plugins for our add plug-in to frame our other icon plugins they're firm so I'll click on front awesome these are the various plugins are installed so when I click on front also it's going to open the front also plug in now I can such which point I want to which icon I want to litter or use Facebook when I click on facebook facebook is right yeah so one thing I notice is this Facebook is not part of this frame so I'm going to drag this Facebook in to the string so next I'll drag the Facebook down here and I think does the size I want to use for this project next down the opacity is much also so I'm going to reduce by clicking on this on this field selection colors and reduced opacity so you guys see 60 64 is fine okay pink 60s okay so I'm also going to add more fonts so I'm going to put icons so I'm going to go to plugins and I'll click on font awesome icon then I'll search for the next one I want to use this Twitter so click on this and yes it again drag it into the frame and let's reduce the opacity to the 60 and that's fine so I'll drag it down here next I will do is add you see Instagram Instagram is popular people do Instagram so I'm going to add on new point also my call a code is Instagram Instagram sorry okay does it now click on it does my Instagram icon remember to also drag it into the frame then the opacity also I can set it to be 60 you know drag it yeah I think people also do Pinterest a lot of people don't think this so I'll add that also so I'll go to font also and I'll add on Pinterest this should be okay let me see latest remember drag it into the frame and said Open City it will be 60 then I'll drag it here so I can zoom without my keyboard and my mouse by holding my ctrl and scroll up to zoom on so I'm going to bring this and also lates by holding my shift and click on the individual continent and set it to be aligned but Allah send us - that's fine [Music] alright we have something like this so I can group this I can then select these icons one sets the spaces between it to be a quartz oscillate this and distribute horizontal spacing that's fine and I can also add another icon for this such I'm called this such then using this remember to drag in the frame and also the opacity to be 60 now drag it right here so I'm going to select all this steam war-making make sure they are in the same line and I set it but a car sent us so this is okay okay to have this disease nice so we have a header for Lydia next no one doing all group this individual cause so how group them by food in my command G so on Mac you can do command G on Windows you can do country G so our group eat and I'll give it the name so sure icons then pink I'm okay with this think this is okay so what I would do now is to group this icon and group date now links and group everything with the box and command G or go to G unnamed is to be my header of my website so if you have this this this okay so the next thing we'll do for add some images maybe shame where olivia is doing some cute work so what I would do is to select your it and go through I won't show a picture where olivia is doing a field work and maybe talk about believe by holding your alternate and dragging you you duplicate this so this box is I wanted to deep in this frame and look very nice the same size so what I do is to select the both of them then I will select the scale tool and drag in so this should be fine now that we make sure that the alignment from the frame to this box is the same with this so we can do that by adding layout great and select columns I want these columns to be 12 and I want imagine of AD imagine let's say okay our marginal fifty good so what I'll do now is to make sure that this box this boxes is starting from this point and this very one starting from this point another way to do that is using your skill to select the boot and drag and see how you're going to make it scale to that point good so you can remove your grid line by clicking on this I to here and so once you click on the ith shoes or once you click on it it goes off so I have something like this this is okay so I'll give these a color I'm going to click on the color under the field and click on the pencil they pick two and click on this color and I have this color next in is our other picture will Olivia is doing some field work so I'll click on this and you can get two free images from the internet and make sure you get images free without any copying license Authority then there are free websites where you can get images three images to use one of them is unsplash.com so I can add on splash to my feet my design as a plugin so to do that I'll simply right click and go to plugins and click on manage plugins so like we added the font also we're also going to do that here so I've already added that which is on splash use the process I showed you to add different person to add their own splash now to add these images from the our splash what I do is to right click click on plugins then click on on splash so I'll splash will loot and get me pictures so I need a picture where someone is taking a photograph let's say Olivia is taking some photograph so I'm going to click on set and I'll see let's say girl with the camera with a camera over the camera so any of them so I click on such and let's see what well okey let's see this so once you click on it it lutz from splat arm on splash and gets to I think I kind of found that show another one what let's try this is so nice I think I like this I like this and it works with the color I have with my design already so I can close my own splash this really looks good remember if you think figma is a great to drop the comments below let me know if figma is a great show look at this it's it's beautiful like it's it's gorgeous the tools are so super awesome to help me achieve something like this so next thing I want to do is maybe a little write-up on this box talking about what Olivia does so what I'll do is our crazy text also our code is Turks minimizing and give it the size of tip 6 then our say this text should be about sorry you can see that X because it's all right click to bring it to front yes is in the front so I'll see about me so I also want this to be boot dude I'm not really that with semi boot to define and I will choose in little space manage it is so set it down yeah so makes our added text that talks about Olivia so there's a great to also which Italy a great plugin also which again used to do that set of writing bunch of text so we just click on the text tool and I want some text to fill up to this piece by talking about Olivia say the size is 18 and blah blah blah add some text so to get some dummy text also install a plug-in which is called Laurium Laurie and helps you to give you Dermot X which you can add to your UI design so click on Laura and I say okay I want to paragraph or generate automatically which I'm going to use auto generate so it generates some text so and I want this text not to be bored just regular and this soon there's a civil world and this text is way too much I'm going to reduce that and reduce this later space in and I'm going to increase the line height by clicking your on track I'll click on it and back and this is OK with some text about Bolivia why my thing looks more okay this is fine this is also fine so I'm going to reduce it sorry I'm going to reduce this select my text when we reduce it actually this point and this is fine also around a moment I don't like the letter spacing so I'm going to remove it we'll set it to zero I'll set it to zero the letters personal cell so this it takes about Olivia element increase it a little bit it is fine so this is what we have now so I will also like to add a call to action button now we tell us what to do next sorry for that this takes I can also duplicate it like make it more okay this is fine these are text about what Olivia does so the next no need to do is a call to action button so I'll click on my rectangle tool and this is OK I'm going to give this black sorry for that I'm going to give you black not to black okay this is fine this is OK you know a detect so I click on the text tool and drag it takes to on top of it so I will see what should be the call to action you know I guess but I'm going to use late chats you can see that without the text color is black so I'm going to change the fill color to the whites and I'll change this size video six now make a boot semi boot okay fine then I'm going to set that to be in the center by selecting a line medial and center so I will click on this text I'm dragging this pair to match the words that we will be in this Center so click on this text and click on the rectangle tool and group the both of them remember use your command G to group so code is brought in sorry let me use this one little for that bottom does a button so I need the spacing between the text between the tag districts and the bottom and this above me and this text to be the same thing so remember how's the lady both of them using my sheet on the keyboard and clicking on there and I click here and celeb to support for its own to spacing and fix that by clicking on on line horizontal center dude so I'll take this I want you to be on the center yes pigma also gives you some lines that helps you tell if that is at the center so this tells me it's at the center good now we have our first page that tells what our website is all about so remember I said if you think figma is great to comment down pigma is a grid so you do you think thigma is very great to use a comment down and let me know that figma is not liquid to but i think you say a figma is a clear to everybody we say a few lines a creature so that's fine now next thing I want to do is I want to talk about home brings us here about Texas to this then rub our services so services is going to talk what would avenge doing so I'm going to increase this frame or click on this frame and I'll crease this this way next thing I will do is to talk about what Olivia the kind of services Bolivia Reynders so what I'll do is select one kind of make some services here so select this like a frame here and let's look at our layout grid okay so I want this frame to start from this point from this point that's fine - I'll remove the a so when I click on the frame I'll go remove click on the I - to remove it so I'm still going to increase this so I won't start on Mia so but I'm going to give this a fickle of this now we have a fickle object next I will do is to maybe add some some images that tells me that tells you what Livia is doing so remember our grid to our grip blogging that gets from on splash so I'll click that and I'll look for a picture to use there that's a lady picture a girl picture so such and you get some awesome pictures to select from I think this is I think this is slice from the picture Seltzer I was the latest this actually looks like the other lady here slim fit so I'm adding this picture and you can see it's loading just no wall wanted we're added it to the frame so I'm going to do on two dots by clicking on the frame and removing the picture we add it so I wanted this picture to be on these books so I'll select the books and go to unsplash and I'll select such and I'll go for girl and such so when's the lady's picture you know what it does she good I'm a picture yeah that's fine so I also want this picture also to duplicate it for different services so use your alternate key click and drag one and click and drag sure so let's add a frame great to see this is starting from this point so I also wanted to start from this point two so I'll remove the grid by clicking on the frame and click on the eye tool so I'll click on these three images and sets the horizontal spacing to be equal and that's fine so next I'll give a different pictures for the different services so this I'm basically going to like a deflower where you live here is a picture of a flower pots let's see pictures of flower pots you're taking before now so what's on splash login are now such and select they say flowerpots and then don't need a background when you say plain background would be nice flower put with the plain burger with a bling with plain background how do that such again I can get okay let's say flower pot I need a flower pot with a plain background okay wow this can also go and so like that okay this is cool house and ideas borrow be feeling okay this is also cool think kind of like this I'll look out for more let's look at this okay this also can work so you can look out for more pictures in which you can select this kind of look of the Colo we using so go back to this so depend on the pictures you want to use so you can see click on design as say another picture should be a bookshelf let's say whole bookshelf and I think kind of like this so ladies good so we have our pictures the hotel these services which believe in our renders to make kind of Mabel ship this little bits okay fine next I want to add the text title for each of these oils I'll click on mountain it and drag from here to duplicate this text yeah so our code is also this is service water capture service package one and kind of reduce do a little space in the business okay so I'll duplicate this for the next one and duplicating for the last one so this should be service to English to the service three okay great so I need another text so I need to click on the frame and drag this down would an idiot X to describe what this services is all about so I will select my text to and kind of draw a text this way some text element water services render how all this takes to be eating lesser chance for and no letter spacing and I'm use my login and I'll use my lower m02 generates good so but I'm going to make this on when I make it not boot I'm going to make it regular then I can do the Texas too much kind of weird is it this way and this is fine okay next our duplicates this by holding my odds but if I do that I kind of need to reduce this then before I do my kids duplicate it down here and also duplicate four so this is fine is that it services then the color for this service and disabled I need to reduce the color opacity for this so he looks great trying to give a difference which one was the difference between this this has should be more visible than this and that's why I had to reduce the opacity so the next thing I would need to do is to like Kyoto the prices for each of these services so I'll say this let's say a starting price of all as I started price of $100 and these are needed to be boot as I need people to know the price for this krisily respecting and tryna only reduce the opacity not to overshadow the head of not overshadow so next I'll duplicate this by holding mine I'll turn it on drug and this should be a starting price of 150 then this should be duplicated also starting price of 200 so cool we have something like this this really looks nice so now we have our home that takes us to this page how about that talks about those services this is the services so won't see the contact how the contact is going to actually look like remember I see if you think this is agreed to figma is a great tool and if you are also enjoying this tutorial writes me in the comment section that you enjoy in this tutorial if you're not enjoying it also lets me know that you're not enjoying the tutorial so now walk on the next tour I'll do much better than this so the next thing I want to do is the contact section so what I would do is I'll extend my frame this way and I'll add click on the return go to another rectangle this will will be fine and I'll pick this color by using a picture then I where I want it text descriptions come on yet so I'm going to use box for that and I want this box to be white in color then I'll use the text let's see how to placate istex down to where it's at the back of this book so I'll right-click say bring to front so this should be like your contact me so say let's work together then some bunch of texts also duplicate this and bring it to the front it is is okay then now I need a botton those will duplicate this down here I'll send it in front okay let's chat also fine so panel reduces and set the horizontal space including them to be equal remember to fix this select the align horizontal Center well this okay that's why you know fix this by selecting align left to fix this I think this is fine this is okay by me next I want to do is on maybe add a picture of my picture which should be not my picture book to Olivia so that picture should come over here remember there's a gauge here so we get it to that point yeah she'll be whites so I can add my picture then can oscillate another frame inside okay so this should contain my picture so when we look for PTO Olivia which is a picture of a girl such I think this is funny I use this fine this look cool right yeah this is great so next I want do is kind of add an artwork to looks very unique maybe artwork beside this so what I'll do is the lady right angle maybe this way take an artwork now should we head back so I'll right click and I'll select plugins and go to on splash Basu so you can search directly ads well let me go say ads and let's see we'll have in the arts or as a lot of artwork here so depending on where you want to select then this flow is nice okay that's fine kind of much Whitaker love this lady so I'll send it to the back I said this one the bottom back so out this this is this is awesome this is great what do you think about this let me also know what you think about it is let me also know if pigma is a creature I think pigma is a great so I strongly think there Sigma a picture so this kind of match with this and this and we have something like this so cool next thing I want to do is maybe a call to action like tell you maybe what let's say what our clients are saying about Olivia what Olivia clients are saying so I need to add what believe their clients passing so I'll click on this frame to and drag it down also then hours late it takes also and duplicate this text downward here then I'll say this text should be what my clients are saying so does oh okay so kind of check the spacings between for me at this point is spacing displacing from this also kind of looks similar so make you pretty look very neat so the spacing between this and this is not the same with that so kind of drag this downward a little bit to make it unique space between this and this that looks nice you can also use a frame a rectangle to check the space in every match and it's matching so if you have this great work next thing is to tidy up the work clients are saying about her so you can let's say let's duplicate this I can duplicate this down here and let's expand this and maybe duplicated text also so looks like lots of title so I'm going to make it Center by clicking on the align Center jr. so this word client is saying and this should be like a Caruso as lights that was light the different clients which comments about how work and what she does so what I would do is kind of add navigation so you can go to the next comment so I'll click on the pen tool and click and click also then when I'm done I click on the SK and click on door so this actually make it on to trade should be fine then I reduce the opacity as I make the opacity to be 80 okay so I'll do my sheet and duplicate this sorry for my odds and duplicate this the other way so you might want to swap this let us click on one of the edge and drag towards order and and that's fine so you you might want this to be on the cell line so you click on a lion vodka center and find this what clients are saying about remember this is off this is also when to reduce this and also reduces walk with imagine good also imagine good and out sets this patient between both of them to be good so next thing I want to do is the footer left wrap of this design where the footer design so what I would do now is add a box also for the futa you know let me increase the frame or so I click on the frame and drag it down so we have a great design right remember I told you to comment below if you think this pig module is a great tool for designing your X designs and UI so I'll give this a color of this and let's say create a little bit copy this sorry copied this down here and right click as a central front then the text should be followed as a follow me at Bolivia grace sorry Chris Farrell Chris Farrell so follow me at Olivia grace should be at the center use your figma alignment tools because it lines show United Center so I dropped it there so maybe our add those pictures which I added initially so I'll select my box my right angle don't know why I like calling that box so I will do this I think this is okay I want is to be a lesson 5 so the kids one two three oh this actually file so I'll select the five of them and I'll set them to have the same horizontal space and then I'll use my skill to make sure I scale it up quickly so the point I want it to be this is kiln also nice so I'll be back my move tool that's fine so each of this should be the pictures will added initially in this so I also want to increase the frame again or click and increase the frame then in this picture all right click and I'll use the plug-in splash splash plugin so the first one is a girl with a camera camera so does she wear the camera the next one is just a girl just go don't type just a Gyarados by a girl or the lady's picture you have the latest feature okay - a next one is a flower pots wait there's a flower pot with clean by girl oh this is nice I can't I prefer this to this so I can choose this and I can replace this to this find cool kind of half simple or similar to this from the colored shadow so this one should be the cut picture daybooks share picture to the book home book book share so which one do we use we use this then the last one should be this latest picture so okay I think I saw that last time so I'll select this and that's fine so if you kind of look at these pictures you can see they're these ladies pictures cut off these also is cut off this also is cut off so we can fix that by clicking on the picture then click on the image click on crop and you can drag it down to where you want it to be ok and close can do that for this I'll click do this hours so we have this this is gorgeous this is nice so what we need to do now is I need this icon so copy it and paste it this is where they said it to drag the icons drag it down to the footer this time around the opacity is going to be 100 next I'll need to add my links the home about body so select the home phylidia ball services and contact how copy a now paste three years it so drag it down to the bottom so I set these two girls under spacing then I'll set it okay then I want to start from this point okay next I'll like to add a copy right so I'll copy one of the sticks duplicating here NLC copyright at 20:20 will leave your place and I'm not saying that because has gone to the back from bringing this layer I'm removing their line Spencer okay so I have this now so oh good so I'll set this to have the same to be on the same line so I used by press ENTER to set it and also set this to have the same horizontal spacing and this is fine so we are done with our design of our web site for Olivia oh this is nice if you have watched through this video great job if you if you can do something like this Rachel this is awesome this is great I love you personally I recommend this so remember to Like and subscribe to my channel this will help you to do more videos and thank you for watching you might want to like and subscribe and see you in the next video bye

Channel: Building Amazing Things

Views: 43,309

Rating: 4.9788361 out of 5

Keywords: figma web design, figma, web design, web design in figma, web design with figma, how to design website in figma, web design figma, design web figma, design web in figma, design web with figma, how to design web in figma, how to design web with figma, web design tutorial, web design tutorial in figma, web design tutorial with figma, web design course, figma tutorial, figma course, figma ui design, figma ux design

Id: Fcvt9MSUylU

Length: 58min 24sec (3504 seconds)

Published: Thu May 21 2020