Figma tutorial for Beginners: Complete Website from Start to Finish

hey friends my name is ron and on today's video we're going to do a crash course on figma and build this really cool website together i'm going to teach you everything you need from how to use the software how to use it the right way to set up for success and efficiency i'm going to talk about keyboard shortcut and all the essential features you need to know figma is a really great design software if you can get started with a free account you can use it whether you're working on a pc or on a mac and it's great for collaboration i've been using it to collaborate with my clients and we're using it in flux academy to design all of our project so it's a really great tool to hone and i hope this video is going to help you do just that if you want to follow along this tutorial there are resource files in the starter file below this video so you can download it and work together with me and with that said let's get started so if you're new on figma you can open up a new account and if you want to follow along this tutorial you can clone the assets that i'm working in i'm going to put the link to this cloneable project below the video so you're going to click here duplicate and that's going to open up a new figma file for you and we have a bunch of stuff here to make our life easier on this design i'm going to show you everything that we have here but first i want to give you a little bit of context to the figma interface if this is the first time that you're looking in figma so what we have here in the middle is basically our board and all of our designs are going to go in here if you're going to hit your space bar you can see that my cursor is changing into a hand and then you can grab along and pan and move around here in case you have a lot of things and you can also go ahead and zoom you can either do this here from the corner or you can hit command plus or minus on your keyboard to zoom in and see what we have here so let's see what we have here i have an image here which is kind of like a wireframe of the structure that i want to have for this page now sometimes your wireframe are going to be sketched out like this sometimes they're going to be digital but now we have this and we can see the layout that we're trying to build here i have this for caller reference and the kind of like the look and feel i want for this website and i'm going to use these free 3d images that you can find here and you can click here this is a free commun community resource that you can use as well i've pasted the images that we're going to use right here now we're going to use these uh fonts so this first font is called outfit which is a free google font and it actually loads automatically google phones automatically loads in figma and we're also going to use this robota font and then you can see the text that we're going to use right here now on the left side you have your layers panel and in case you don't know what layers mean this is our basically everything that we have here on the the board and you can see with the little tiny icon that you have here that we have a bunch of different things here so this is an image and this is just a rectangular or shape that we have here and then we have some text signified by this t that we have here now your you might be familiar with layers from software different software like photoshop or other design software if not the main idea here is that if rectang if this layer that is selected is above these other layers it means it is on top of it so you can see i'm going to drag hit and drag this rectangular and you can see it is on top of these two other layers rectangular 19 and 17. but if i'm going to drag it below them you can see right here now it is below them so layers they stack one on top of another like layers i'm actually going to delete these colors so to use so i can teach you how to use the color picker it's going to be nicer example so this is the layers and you can see that they are grouped together inside of this frame in a second we're going to talk about this and we can collapse this little arrow to see that they're all grouped together this helps us organize and understand what's going on in our panel on the right side we have basically the settings of each element that we're going to pick so if i'm clicking and choosing this font layer you can see that we have a bunch of stuff here we'll get to some of them along this tutorial we can see the font and the size and all kinds of different properties that will um yeah that will start using so this is what the right panel is for so with that said let me zoom out and let's start with the first basically first step which is to create a frame now a frame the idea of a frame you can see here we have this icon for frame and it also gives you the shortcut f a frame is basically the page the the format that we are designing for and you can see that when i click it um you can see it gives me a bunch of sizes for phones or for tablets in this case we're going to design a website for mobile so i'm just going to hit this desktop and it's opening up a new frame for me i'm going to drag it here and this is where we're going to design this is going to help us we can you know create different pages so that we can see what's on different page and we can see what information is inside of the page versus information that is outside of the page we can actually make this longer and we'll probably want to make this longer because this page is going to be longer i can of course make this wider but this is a good width you can see here 1440 for designing for desktop so let's get started using that now the first thing i would want to do in this case is to get started with some kind of a dark background you can see here with the image that i have here i have this maybe like dark blue i want this to have kind of like a dark mood this website so what i am going to do is i'm going to select the desktop that we we have here and i'm going to change its fill color you can see it has a fill color of white and i can click this and i can pick up different colors and i can also use this eyedropper tool which i can click here and then select the color so let's go here and select this maybe like dark blue color and now you can see that we have a background for our page so this is a good good place to start now before i'm going to go ahead and start designing stuff to it on this page i want to have some kind of an organizational structure to this and this is pretty important i want to create a grid if you're not familiar with grid the concept of grid you can see here in my layout that you know first of all most of the content is centered in the middle of the screen and that's if we have a very wide screen things are centered so that we don't have content that's too wide that's called container in web design but you can see here we have basically two columns here we have a text and an image and then here we have maybe logos one two three four five six and then here we have two columns and then testimonials we have three columns we want these things to be organized and we want them to align so that design looks good and clean and for that we're gonna need some guidance and so i'm going to create columns for us to work with so the way i'm going to do this is i'm going to select the frame that we have here and i'm going to go here to layout grid i'm going to hit this plus button and by default it adds this grid that you can hardly see on this background but what i am going to do i don't need this kind of like a grid i want to change this from a grid into columns because this is what we really want to see but it's very hard to see with this red color on our color so let me change this into white now you can see that we have some columns here but this is not really what i want i told you i want them to be centered right i want the information to be centered this is very very tiny so let's fix this first of all i want to have 12 columns and 12 columns is super super common in web design and the reason is that it divides by a lot of things so we can divide it two columns so each six columns and then six columns it's divided by three so that's four columns four columns four columns it's divided by four so 12 is a good number so let's go ahead and do width of every column is 75 maybe pixels and let's change the gutter the gutter is the spacing between each color to 15. so this is going to give us a center an area in the center that we can put all of our content in and these guides are going to help us create content if i'm going to select a rectangular for example to make sure that you know this is four columns and then maybe i can copy and paste this and you know create three columns here and by the way one nice shortcut to learn right now is when i'm dragging things if i hold the option key or alt key on the pc i can just duplicate things so this is going to become very very useful as we go along so that's a shortcut worth remembering so now you can see these grids which are actually just we can hide them they're not really part of the design they're just here to help us position things um the right way so that now if i want to have two columns i have here maybe like six and six these are just helping me to position things and make sure that everything is aligned and i can go ahead and hide them whenever i want to but it's just here to help me okay so now i have a pretty good setup to get started with right i have my background i have my grid i'm ready to start off my design so let's see what we have here first of all we have some kind of a navigation so maybe we have like a logo here and some links so let's get started with this we actually have some context here the name of this company is crypto yeah crypto is super trendy right now so let's design a crypto website and we've got a bunch of a bunch of links so let's drag this here and we can't see them because they are black on black so let's change their fill color into white and now we can see them right here let's go ahead and change their fonts so from here i can write out outfit that's pretty good the logo i want the logo to be bold so i can change you know hear the width of the float uh the font i can actually change also the capitalization so if i click these three dots here i get some more typesetting and you can see here i can change the letter case so if i'm going to click uppercase this is going to turn into crypto like this let's ch keep these kind of like lower face it's kind of like hip and cool so i'm going to align this to the left side and align these to the right side now one thing to note about text you see this this text has some kind of a box and this box is basically so that if we have a lot of text the text wraps right and that's very common in you know in designs we don't want the text to be too long we want it to uh wrap around some kind of an edge so this is pretty good if you want to have a paragraph but in case it's just one word this is kind of annoying to organize stuff when the box is too big so here on the right you can see that we have this this basically means the width make it automatically based on how much text we have here i don't want to have to manage these boxes all along so i'm just going to click this and now each of this is the right size and let's go ahead and you can see that as i'm moving things around you can see these guides that are trying to help me make sure that everything is aligned i can also do this by selecting all of these and then maybe here making sure that they are all aligned to the center i also want the spacing to be equal so i'm going to hit this tidy up and you can see that now figma organized them in equal spacing and i'm going to select all of these things and put it right here at the top where it's it's pretty good here and now i want to group them together now grouping is really great to you know we're going to have soon a lot of layers like you have here and this becomes pretty messy when later on you want to move things or manipulate things or know how to find things so you can change it so we can group these elements together by hitting command g that puts them in a group and i can also call this navbar so that later on i know what this thing is so we have the nav bar here and we can continue into our first section and the first section in a website is called the hero section and we have an image here that's half of you know our main container and then we have some text so let's go ahead and pick our main image it's going to be this one and we already have guidelines this grid that are help helping us position it positioning it and making sure that we know that it's around this size right like half of it so six columns and we're going to position this um right here so that's that's pretty good and now we want to bring in our main headline so our main headline here let's actually grab all the texts so this is going to be our main headline sub headline and then two buttons that we have here buy nfts and then sell nfts so let me grab all of these elements and bring them onto our page and of course turn them into white because we can't see them and now let's basically go ahead and start manipulating them so this one is roboto uh eighteen percent or sorry 20 pixels we can maybe change this to 18 pixels which is kind of maybe solid for uh body text and one more thing i want to show you is that this body text we're probably going to use this text again and again throughout the design right it's going to be very common so instead of me having to pick the font and the size for each one of them i'm going to go ahead and create a text style that i can start reusing and applying this and that's going to make my workflow much faster so i'm going to hit this plus button i'm going to call this body text you can see i already have this here create a style and now this is pretty easy this one we want this to be a big headline right our biggest headline on a website usually it's called h1 so let's change this to outfit and let's change this to bold and let's make this really big actually let's go ahead and crank up the size of the font and you can see that this is the size of the font and this is the line height the space between the lines you can see that i'm increasing the size of the font but i'm not increasing this and that's why we get this not enough space between the lines so what we can do is we can change this from fixed pixel we can change it into a four a percent base so let's do something like maybe 110 percent and then what we have now is this is probably this is going to change dynamically in relative to the text size so maybe now this is good and maybe we don't need 110 maybe actually 100 is pretty good right now now do we need a different capitalization on this maybe we we do this again we go here for maybe title case so title case means every word in the sentence is going to have a capital letter and this is pretty good i can also go ahead and create a text style here and i'm going to call this h1 main heading because if i have another page on the website i want this automatically to be easy to apply and working with text styles if you set them up properly it's going to make your flow so much easier so let's go ahead and create here some buttons for this how are we going to create a button well one thing we can do we can go ahead and pick a rectangular or we can use the shortcut r to go ahead and create a rectangular and let's do something here like this you can see it's on top of the text right so i can't see the text how are we going to bring this down well one thing i can do is i can go here and i can start dragging it below or i'm going to undo this by command hit command z we can start learning a very helpful shortcut which is command shift which is sorry command command option up and down and you can see that we're moving this layer now up and down and this is an easy way to kind of move this around and let's change this to a different color so i want to pick up this purple color maybe this purple color well we've already seen how we can click this but i'm going to give you a shortcut if we i just hit i for eye dropper i can immediately go ahead and pick this one and that's yeah that's making my life very very easy so let's turn this into outfit let's turn this into maybe semi-bold and let's make this um also uppercase by nfts in this case i actually want to space out the letters a little bit you can see here we have also letter spacing let's crank this up and you can see that now we're getting a little bit more spacing in the letters and this makes it look a little bit more more buttony so this almost looks like a button but everything here is so soft and round let's make this button round as well you can see when i'm hitting this rectangular here at the top we have this round corner and i can start dragging it or maybe cranking it up this way and you can see it's going to start making this button super round and i'm going to crank it actually all the way to the top maybe make it a little bit yeah a little bit like this but now we have a nice button here now i can go ahead and i can create a group from this and actually you know what it's going to be very easy to just duplicate this i'm going to drag it with a shift just like i told you earlier and from the second one which is going to be cell nfts um cell nfts i'm going to make it into what we call a ghost button which is a button that doesn't have a fill but has a stroke so let's go ahead and turn down this fill i'm gonna remove it by hitting this minus one and i'm gonna add a stroke by hitting this plus one on a stroke and i'm gonna choose maybe this kind of color maybe this teal color and one pixel of a stroke sounds good to me now we can nicely make sure that they are aligned and now we have two buttons here so we have these buttons let's take them up and so organize the spacing here a little bit maybe we can make this a little bit bigger and align them and basically we have our hero section so what i'm going to do is i'm going to select both of them and i'm going to group them together i'm going to call them a hero section and hero and i'm actually going to put this below just for organizational uh structure you can see we have here two sections on our website and uh yeah we can keep going let's see what the next one is so the next section we have here is some logos right and we we actually have a bunch of logos here and we need the title you know as featured featured on so let's take the title featured on um select white color for it and let's take this whole thing here and let's see how we are going to design this thing so what we have here is we have a rectangular just with a little bit of background then we have four four images of these logos first of all i want to use this as kind of a background and i'm going to span this maybe all across and maybe something like this and i want to make this kind of like a very very soft background color or let's see how we're going to do this so i'm going to pick maybe a dark purple color from here and i'm going to remove actually the i want to remove the the visibility of the layout just so that we can see the actual color maybe i'm going to remove the opacity a little bit so you can see i have a hundred percent and this is full opacity but i can make it a little bit transparent and i'll show you why we're making it transparent in a second also let's give it a little bit of a round corners so it's cornered as well now we can have these logos where we can put them here we can make them a little bigger by selecting all of them and then um dragging them here now as you can see we can they're being changed the whole size is being changed so what we want to do is we want to heal hit the shift while we are dragging and that's going to just scale them kind of like proportionally which is what we want let's organize them nicely here and actually we don't have to work too much because we can just again click them and then tidy up and then it's going to be equal spacing i think we can also decrease a little bit the opacity of all of them just so that they're not as bright and that looks pretty good this one actually you know what let's go ahead for this button um i think i want to create a text style from this so let's create let's call this uh subheading yeah i want to use this as a subheading although it's a button so that i can apply this to this subheading and yeah exactly i'm going to reuse this on a lot of things so this is pretty good featured on and that looks good now i feel like the background is kind of bland right now and maybe we want to go with this gradienty kind of like different gradient kind of color it looks pretty nice let's go ahead and try and do that on this background so the way that we're going to do this and again by the way for organizational sake i'm going to group them all together and i'm going to call this logos okay here's how we're going to do this gradienty background we're going to start off by creating an oval uh and it leaps we can do that by hitting o and i'm just gonna drag something here and let's pick a color that we already have now we can use the eyedropper again but i can also see the colors we already have on our page so let's grab this teal thing and i want to blur this first of all i want to put it in the background so i'm going to drag it below everything now i want to blur this a lot so i can do that by hitting the effect and then not drop shadow but layer blur now you can see it started to blur this a little bit here but if we are going to crank this up by a lot by a lot and by the way i'm hitting shift with up and down arrows so that changes the number in increments of 10 and i'm cranking this up all the way to create this kind of a gradient and then i'm going to move this around here now you can see it turned out of the page but i want this to be cropped in the page so i'm going to make sure that we are you can see in the layers panel it got out of the desktop i'm going to keep it back here on the desktop just so that it crops when it hits the the edge of the page maybe i can decrease the opacity of this as well but this looks pretty cool let's have another one purplish over here so i'm going to go ahead and duplicate this i can either copy paste i can eat that's option number one copy and paste you know command c command v or drag it with an alt we've seen that already another way to do this is command d is duplicate and now we have another one can drag it over here can pick maybe this purplish color instead decrease the opacity as well and let's put them both here and let's group them together you know how much i love grouping things together so that we everything is organized and i'm going to call this background circles circles and now we start having this kind of a cool background effect that's going to make the page a little bit more interesting but why is this now maybe let's make this a little bit more this is a little bit dark let's make this maybe i want to make this more transparent so that we can see the background yeah maybe like this so we can see the color is changing here so this looks nice i think all right so now that we have these things here let's go ahead and continue now the next two sections are actually pretty easy they pretty much resemble the hero section um so we have a image on the left and some text on the right and at this point by the way we can actually start you know actually maybe copying and pasting so let me drag this this another section here uh i'm going to ungroup this for a second just while we're working on this so i'm going to hit command shift g to ungroup this and break this down instead of this i'm going to delete this image and i'm going to bring back our columns just so that it's easier to organize and let's take this whoa let's take everything that we have here six columns to the right size and on this section we're not going to have such a big headline this is h1 the main heading here i think we're going to have so let me break the the style they touch the link and maybe change here the you know change here the styling to something like this and something like this this looks good but we need to bring in the text so for here we have let's take this built-in analytics now if i'm just going to paste this note what happened it's pasting it with this style so it overrides this style so i don't want to do this i'm going to undo you can do this you can if you want to paste here and keep this style you can always i'm going to go to the edit you can paste and match style and uh boom well i don't know why it pasted here let's go ahead and paste it here now you can see it built-in analytics to track your nfts so now this is basically pasted at the style and let's create actually a new style that's going to make our life easier so i'm going to create a new style and this one i'll call it h2 so this is the second um second title of importance and for this you know i'm going to copy and paste this here i already have a style so i can just go ahead and change this and this looks good we also have view our pricing here now here for this button let me show you what's going to happen here so if i just go ahead and paste the text here view our pricing here's what's going to happen uh it's going to break or it's going to get out of the button and that's not what we want so here's i'm going to teach you something cool let me go ahead and undo this while we have this group right i'm going to turn on something that is called auto layout so i'm going to turn this on by hitting the plus and now it's going to look at this as one unit that have some padding so it's going to if i change the text it's going to try to maintain the same spacing so by let's buy nfts you can see it's changing the size of the button based on how much text we have that's really cool so now let me go ahead and paste in the text view our pricing and now we have a new button in the right size and this is pretty cool the only thing that we're lacking here is uh this analytics thing that we need here analytics so let's paste this here and actually want this to be maybe teal and not like this not body text but sub header okay so we have this and we're going to use um this one this one for analytics okay we're going to use this image we have the guides to make sure that we position it in the proper place and now this looks pretty good i can go ahead and group it together and call this you know analytics and now i've got it so we can do the second one which is pretty easy by just you know duplicating this uh i can go ahead and replace this with the last image but actually this is kind of boring so i'm not going to go ahead and change all the text but we can you know it's going to be pretty easy to change the text here it's where you know you see the y guides the the layout guides becomes very helpful just to make sure that we keep everything here aligned with the navigation and with everything so it's very helpful to keep it aligned so we're going to have this section here which we're going to call maybe get our app get our app and let's see what is the next section that we have so the next section that we have is going to be our testimonials so in our testimonials we want to try something a little bit different so let's go ahead and bring in this testimonials we're going to make this a sub header a green sub header and uh text i'm going to use the sub header and i want this to be centered this time so while this is selected i'm just going to hit this align to the center and now it's in the center of the page i'm going to also align the the heading that we have here so i'm going to bring it up select white select h2 and i want to center it but i want also the text to be centered so let's center the text okay so now we have a different layout centered layout and let's have three testimonials here so let's create some kind of a card here and put in we have here testimonials of three lovely people let's go ahead and create one card so if we want to have three columns we know it's going to be the size needs to be about four columns white so i'm going to hit r to create a rectangle duplicate this around four columns so this is about right let's create some kind of i'm going to use the eyedropper to take this background that we have here and now maybe let's remove the columns just so that we can see how this looks so we have this very light background we're gonna give it some round corners and let's say i want to have i'm going to hit o for oval so that we can put some kind of maybe i want the profile picture right here so let's see how we can bring in this image that i'm dragging here inside this circle so first of all i'm going to drag it to put it on top of it and the way that i'm going to do this is you can see in my layers panel that we have this image on top of the ellipse and i'm going to select both of them using shift and clicking both of them and then using my right key i can do use as mask or i can use command alt or command yeah command option m and bam now you can see that they are grouped together and this what we have at the bottom is the mask and this is the content so i can click the mask and change the size of the mask or i can go ahead and select the image and move it around inside of the mask so that's how we have them and that's very nice let's bring her name so let's say her name is olivia and pick the right one let's use the sub header let's see if it's a good fit yeah olivia cole that's that sounds good let's bring in some text here and this text i'm not sure it's going to be a body text because i think maybe it needs to be a little bit smaller also i want this to be centered so i'm going to hit sorry the center and let's pick here maybe 16 right and do 110 maybe even 115 for this text maybe something like this i want all of these elements to be centered so i'm going to click i'm actually going to choose all of them so using shift i'm going to select multiple elements and you can see they're all selected here and i'm going to hit this center align to make sure that you know now they're all clear and then i'm going to group them together call them testimonial maybe item and now we need to duplicate three of them [Music] so i'm going to turn on the layers but before i duplicate this there's actually something i want to do with this image so this image now is pretty colorful and although it's nice i want you know we have these kind of like color scheme going on here and i want the image to be a little bit more online with this so i'm going to pick i'm going to double click to get and select the actual image here and you can see here in the layer we have this path through this is what what's called blending mode and you might be familiar from this from other tools like photoshop or illustrator this is basically how this layer blends with everything that's on below it and we can do things like multiply which is going to be very dark only the dark colors are going to pass or screen which makes only the light color pass you can see this creates all kinds of very interesting effect i'm actually going to choose luminosity which basically means that it's just going to make the image dark or um you know dark or light based on the image and it's kind of like looks more in line with the color scheme that we have here maybe i want to let's maybe just to make it a little bit more fancy let's maybe just add a little bit of a little circle here with you know with another color just to give it a little bit of a touch of whatever like a little bit of a design flare that we have some things overlaying here and maybe we'll change this to screen so that we have now overlaying i don't know maybe that's nice let's put it inside of the testimonial item not sure about this but looks like this is nice now i can go ahead and duplicate this make sure that we have the right spacing and then duplicate it again and now you can see why the grid is so helpful because it allows me to organize everything that we have here and it looks really really good now we can group all of these together as testimonial testimonial section and we can continue into maybe the last section now i feel like i need a little bit more spacing here so i'm going to select the frame of the desktop and then start dragging here but oh no look what happened this is because figma is trying to make everything relative to you know what's it's inside and make everything responsive i'm not going to go into this in this video because it's a little bit more complex than that but what i can tell you is i can select all of these section that we have here all of the groups and when it's telling me constrain here like how should this be constrained i just want this to stay in the center and stay aligned to the top of the page so if i'm changing where the bottom of the page is nothing moves so this is something a little bit more advanced and we'll talk maybe in a different video about how to use these constraints because you can do some pretty cool things with it so the last section i want to create here is kind of a call to action section it's just a big section with a call to action and let's go ahead and just create some cool card with a gradient we didn't do gradients yet so i'm going to hit r to create a big rectangular and we have the grid so it's very easy to create it in the right position and the right size and when i hit the fill you can see that so far we've been dealing with solids but we can also go to linear and that basically creates a gradient so we can have a gradient from maybe this teal color to this purple color and you can see we can start moving them around and that's going to create maybe i'll do this a little bit more yeah a little bit more saturated but we have this nice gradient right now so this is nice let me remove the columns so that we don't have to see this anymore and let's give this a little bit round corners this looks like a nice card for a call to action so let's bring in the text that we have here uh we have are you ready which is we're going to put this here and we're going to give this the style of sub subtext and let's go ahead and center this and be part of the next big thing so let's do h2 here whoa we've turned this around we need a bigger box here and we need to center this we need to make it um white and we want to bring in let's give ourselves a little bit some more space here actually maybe this is maybe we'll do this black just so that we have this big heading stands out and let's also bring a button here right so let me go ahead and double click this to copy and i'm going to hit this paste here because i want to paste in a button so this purple background is not going to work on this background so let's change it to black and let's see what our call to action is here get started so i'm just going to go here and going to type in get started and i want to make sure everything is aligned because it's probably not aligned so selecting all of them hitting center as you can see it wasn't aligned so good thing always make sure you align look at the spacing looks good i can go ahead and before i do this you know what i'm going to i see now we have a lot of space here so i can go ahead and you know again this i want all of this to be aligned to the top and to the center what i want to do we only need to put in the footer but i saw this cool trendy thing where you know people take this kind of a gradient and they put it at the bottom of the website so just do this cool ending to the website let's go ahead and center this in let's put this as part of the footer end of the end of the page and now all we need to do is bring in some um some of the links so let's go ahead and bring the links that we have here we're going to turn everything into white what do we need to do here first of all let's turn on the layout so that we see that we position them in the right place let's go ahead and turn all of these into uh ouch outfit outfit and let's also go ahead and make them semi-bold this i remember needed to be uppercase and we can align this now here we also can use the we can also use the grid it's very helpful we can say okay these are each of the one of these is maybe two columns and so we can organize them it's going to align to everything else here and this join our newsletter let's make a field here let's make this this should be kind of like a field so let's go ahead and create a rectangular and maybe create something like this this color and make this very very round and put this below this so we can see these this is probably probably we don't need the text field within the field to be so white so let's go ahead and reduce the opacity a little bit but this submit we can actually bring in maybe this button or maybe this button but make it a little bit we can put it here call it submit submit but actually submit this is too big to be a button in this field so let's see let's break this down i'm going to hit this and just break this down by clicking actually you know what i'm not going to do this i'm just going to um change the padding that we have here move this into centered um and yeah just change maybe change the text size a little bit to do where is the text size well i don't want this to be sub header so i'm going to break it down from the style just so that we can change it so what i did i'm sorry i clicked a bunch of things without explaining what i'm doing when this was small i wanted to make sure that the text is actually centered within the button so i click this and this is basically where where the text is aligned within the element right so i've made sure that it's centered in the center and change the text size and then let's see how this looks and we can hide this and i think it looks pretty good the next question you're probably asking yourself is how do we now actually turn this into an actual website and so i'm going to record a part two for this video where i'm going to help you prepare all the assets for development and also show you how to build this website in webflow so make sure you are subscribed to watch the next video and if you want to practice the tutorial that we just did here make sure you downloaded the resource file and you've tried it yourself figma is an amazing tool you want to make sure that you know how to do this properly and get some practice under your belt so give it a try and i'll see you on the next video peace out [Music] you

Channel: Flux Academy

Views: 901,578

Keywords: figma tutorial, figma tutorial prototyping, figma tutorial web design, figma tutorial 2022, figma tutorial for begginers, figma, become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: HZuk6Wkx_Eg

Length: 43min 20sec (2600 seconds)

Published: Fri May 20 2022