Design A Website In Under 1 Hour With Figma

why hello there my wonderful people on the Internet how you doing today in this video we're gonna create a three page layout design inspired by Spotify so we're gonna take a look at a lot of the cool things that we can do in figma we're gonna cover things like prototyping aligning different things and creating logos and we can create logos in pigma yes we can and I'm gonna show you how and also this video is actually a collaboration with a YouTube channel called web that simplified and what he's gonna do is he's actually undertake this website that we're gonna design and he's gonna do a tutorial on building it out in HTML and CSS so I'm gonna do the design part and after I do that I highly recommend you go checking out the actual tutorial on building this website out on his channel so I'm gonna leave a a box a card thing up here or something or in the description and yeah just go leave a comment on his video send him some love and yeah just check him out I think he's a really really cool guy and always remember if you want to become more creative make sure to hit that Bell and let's get going alright so let's get going I have pigma opened up here it's just an empty project and I'm the first thing I always do is I'm just going to the frame tool up here I'm gonna click on this and just click somewhere here on the screen and it's gonna generate us a frame which can be like one page on our website so if I want this to be full HD I can modify all the properties up here so we have the X and Y which is the position of the frame I usually put these to 0 this is a small reset that we can do and for the width 4 to go full HD I'm gonna do 1920 by 1080 because that's 1080p good now if I hold space I can also kind of drag this around and if I hold ctrl and scroll I can zoom out and in Wow amazing okay I'm gonna rename this and I'm gonna call this landing page so this is the first page that our users are gonna see okay so what I want for this muse well who makes music this is how this is how my thought process was going on with this who likes music well people like music who who makes the music people make music so I kind of felt obligated to have a person on my landing page and I imagined that I need to have a person that just loves and enjoys music and have like a cool expression on your face so that's what I wanted to to kind of include here on the landing page so this person will use our service and this is the feeling that we can provide to them like joy and happiness so I really wanted to not include illustrations or anything like that so I found this picture I kind of Photoshop I'm gonna include this in the link in the description as well so you can download it and follow along easy but as you can see really cool picture again this is I photoshopped it because it had a background and everything but really expressive and she's just enjoying herself and she has headphones which is a big plus because hey it's a music app alright so I have this that the problem here is that the contrast is kind of it's kind of pretty hard with this white so I I like to change this and go to a darker color so what you can do is you can actually change the color on the frame so on this big thing so you don't need to drag like a box like so and put it in the background actually like this and it's not going in there okay so below like that you don't need to do that you can just grab the frame here and you can change the background color here and I found one that worked pretty well it's to f30 3/8 so hit enter there we go so it's kind of a grayish has maybe a tint of blue but it's really gray ish and it looks pretty cool okay so we have our our girl here enjoying the music now the second thing I want to kind of think about is what do I want in the title so I want a big title here and a small description and a call-to-action button that's gonna tell the user what to do alright so what I want what I want in the title well since I have this image I can kind of think about a title from this image so what is she doing here it's like she's feeling the music so that that can be a good title so I'm gonna grab the teat BT tool here the T tool it doesn't make you a tea it just makes you text unfortunately but hopefully they fix this in a future update and we can call feel the music here now this is gonna be super small but just write out feel the music and I can drag and copy all of this and we can just change the color to white let's go all the way twice it's still super small so that's kind of increased the font of this lets go something like 72 so there we go that looks better and we are also gonna change the font in a bit so don't worry good so we have that and let's do a subtitle here and for this I'm gonna do something like stream over 20,000 is that correct thousand songs with one click all right now this is extremely huge it doesn't look that good so I'm gonna just decrease the font size I click on it we can go here to 36 and that should look way better good so we have that as well now another thing we need is a call to action button and we're gonna position everything here nicely in just a bit so for that I'll just do a join now we can grab your rectangle tool and just drag out his shape like so and we can change the color now for me I kind of thought about this I didn't really overthink the colors I kind of just wanted a colorful and vibrant look to this website so we have the muted background and I want everything that that that I want to stick out to be really colorful so that in this case the join Now button I click this blue one which let me just get the color here is gonna be one seven six two a seven and we have this really cool bluish color and what we can do is just drag a text on top of this and what I can also do if we zoom in here I can just grab the grab tool and we select the text here somewhere here and well we didn't write anything so it's gone so let's do that again I'll just drag it out randomly like so I'm gonna say join now and let's make this uppercase and what we can do is we can just choose white let's also make the font size smaller something like 24 maybe that's a bit yeah that's okay and what we can do is we can grab your join now and we can just position it on top like so and how can I Center this straight in the middle well we have the tools down here and these can align everything horizontally so if I hit Center here it's gonna align horizontally and these can apply vertically so I'm gonna do middle and boom it's perfectly centered really cool nice so let's change the font size of this I use poppins for this I really like it I think it fits really well with this one and let's just change everything for Poppins there we go and actually I'm going to drag this a bit out so it's in one line and we're gonna position these in a bit as well so I'm gonna grab the join now here I'm gonna add Poppins as well good and one thing I want to do is I really don't want these to be separate so what I can do is I can just grab the join now and the box and I can hit ctrl G and it's gonna group everything up here and I can just rename this to button just to keep everything a bit more or organized and what I can also do is if I open up here I can add a bit of a rounded corner to this so I can go up to something like five and see how that looks so it's not that super flat actually let's go with ten rectangle we're gonna scroll up to ten perfect let's make this a bit wider like so yeah a bit taller and play with it all day good nice so how do we align everything in here well we can use a super cool tool that if we go on the landing page Sonne frame we have the layout grid here so we click plus on this one it's gonna generate this grid now it's super crazy complex and doesn't make any sense so I'm gonna click on this one and this icon here we can go to columns and we can just put 12 here and that's gonna give us 12 columns that we can easily align things to and it's hardly visible so I can raise it up to something like 50% and there we go maybe that's too much 30% good so right now I can align these however my heart contents so let's do it here just bring it to this box here so this is the one two three four the fifth box I'm just gonna line everything to this fifth box nice now this goes out here one two three four five let's let's go to six actually there we go so everything is in in one frame perfect and let's put the lady all the way at the start of this one thanks so let's move her down so she's still in frame and that should be okay so now when we do our nav links we can just easily position everything in these boxes so let's temporarily just turn this off like so and we can also align this kind of in the center so we grab everything here holding shift we can just bring this down till it's sent read think so perfect and I kind of want to have a bit of space in between the D join now so this usually I leave spaces in between the texts so the the button pops out more so I would usually bring these up a bit something like that and then I'd have a bit more space with the button good and now we can Center everything so I'm gonna bring it till we have this horizontal line and yeah that should that should look okay perfect nice so let's also do two navigation buttons here grab the text drag doesn't matter how we dragged for now this drag and we're gonna save this cover we're gonna change this to white like so and we are gonna make the smaller let's do something like 18 we might modify this if it's too small let's do 24 yeah that looks a bit more visible okay and we can to just grab another copy of this we can just hold alt and drag and then that's gonna just create a duplicate here for us but make sure you keep holding alt because I believe if you let go before you your mouse then it's not gonna work so make sure to hold alt let go of the click and then you can duplicate something perfect now I don't want this big box to be here I kind of wanted to wrap over the text so another cool thing you can do is just go through to the three dots here and if we click we can just click this wit tool and look at that it's gonna outer resize to our text and then we can just go back to fixed so just click this once and jump back and it's gonna help us align things very easily okay let's go back on the frame tool hit the the column and let's align this so I kind of want these at the end here I'm gonna drag this discover here and the the other discover and that's reaming this this is gonna be called join alright so since i'm lining everything at the start here that I'm gonna do the rest with the other designs as well so I started here and these are gonna be at the start as well perfect that we got discover and join great let's get going with the logo so we can just hit the frame tool I'm gonna hit here and that's gonna create us eight hundred by a hundred frame which is fine don't worry and we're gonna grab the circle tool here here and I'm gonna drag out a let's go 60 by 60 I think that's big enough there we go let go and what I taught for this is I kind of want to have a wave form so we sound wave form and of a logo here and for that I'm gonna just get rid of this fill and we're gonna add a stroke and I'm gonna increase the stroke to three pixels we're gonna get rid of this fill so we're left with the circle and I kind of want to make this colorful so rather than picking random colors I'm kind of just gonna use everything I have up here and actually we're gonna use another pinkish color in this design so I'm gonna use this blue one and that pinkish that we're gonna use on the other pages so let's have a linear gradient to this I'm gonna hit the circle tool and let's go to stroke here and we are gonna go from solid to linear perfect and we can actually just hit the blue here Wow nice and we can go to this one down here now by default its opacity zero so we need to bring it up to a hundred and we can change the color to let me make sure I use the same pink so we are consistent here across all and that color is going to be B c3a eight and zero there we go look at that that's pretty cool good so we have the outline of our logo now let's do D small waveforms so for that I'm just gonna grab the line tool here I'm going to track out a small line there we go not too big not too small click I'm gonna increase this three pixels as well the stroke size just so I'm consistent with everything that I have here so this is three this is three and I cannot don't want to have this super straight edges here so we can change that if we hit these three buttons down here and we can change the cap to round look at that beautiful very nice let's also just copy this I'm gonna hold alt and drag there we go we have two we can drag again and it's selecting this big image so let me just close the lock this layer here so we don't accidentally select this one so I can just grab it like that drag it out and just drag this up like so now don't worry these are not aligned we're gonna affect fix this in just a bit let's drag it one more time this is gonna be even bigger boom one more and I'm gonna copy the smaller one now and we're gonna go back all the way to the smallest and one more just so we are consistent so we have two small ones one bigger one two biggest ones and then we're just going backwards nice let's grab all of these move them right in the middle now these are not in the middle at well don't worry figma is here to save us we can just go up here and if we select everything so make sure everything is selected we can click on the align vertical centers and wah-bah boom look at that everything is perfectly aligned nice so we can just drag this and Center everything like so and what we can do is rather than adding a linear gradient to all of these I'm gonna leave them like so and I'm just gonna grab them and just group them up so I'm gonna group all the lines up like so okay now how do we add a linear gradient to all of these well watch this we can grab the rectangle tool I'm just gonna drag a rectangle across these gonna move them kind of like across all of these let me bring down the a city a bit so you can see what I'm doing spraying it across all of these okay just like that now I'm gonna bring back the opacity to 100 and I'm just gonna add a linear gradient to this box linear and we can use the same colors I'm gonna do the blue and for this one I'm gonna do the pink one good and now what I can do is with this rectangle I'm gonna leave it above here and if I select the lines so the lines I can use them as a mask so so all you need to have here is the box on top with the gradient and you have the lines as a group here and just grab the lines and hit mask and look at that everything just works like magic so we can just grab all of this with shift and we can just group them up again and we can name this logo but I mean by the balm we created a logo we can strike this up here let go and we can also add a title here that we're gonna call sound wave so let's go to text drag out here we can call this sound wave like so perfect let's make this bigger let's do 30 pixels we're gonna change the color to white great let's also make sure we align everything we can delete this frame we don't need it anymore the one that we use for a logo we can just turn this back on and I can just kind of drag this position this grab both of them and drag it and align it to the second one again beautiful and we can also just kind of move this up so it's it's in the same line as this one as you can see we have that line just to make sure it's in the same line because it's not gonna look that cool it's kind of yeah we need to have everything centered here and it's just gonna make our design look way better good we can turn this off and what I'm missing here is this kind of feels a bit empty to me and I kind of want to bring these colors up in this landing page so what I can do is well since her face is like I'm enjoying the music so much I want to add kind of a like background bubbles that are not super visible but they're there that's gonna bring out the color of the music that made no sense apologize but what I kinda want to do is just add a bit of color to this so what I can do is I'm gonna grab the Eclipse tool wrap and just track out some circles here I'm gonna leave one here I'm gonna add the pinkish color that we used bring down the opacity to something like 10% like so and we can just drag this down so it's in the background so below the lady and look at that we have that small circle there let's add another one we can just copy this one drag it up here make it smaller a bit hold shift I think so drag it up here let's add the blue for this one change it to 10% and let's add another one and let's do it in the corner here and just alt tab drag just make it bigger it's kind of positioning there and the corner so there we go we finished our landing page we added a bit of more color we added a bit of a a more personality to this landing page nice alright hope you're ready let's get going with the second one so for the second page what we're gonna do is we're gonna pretty much do the same thing we're gonna grab the frame tool click and we're gonna do 1920 by 1080 so we're gonna do the same thing hit enter it's gonna create us a frame I'm gonna call this feature and what I a half here it's kind of a reason why people would want to sign up to our service so I will have album covers different categories of music that they can see and hey if they might be interested in then they can sign up so here I kind of want to have a bit of a visual of the different music that you can find on the website so let's add the color the same color that we used up here that's fine let's keep everything more consistent there we go and I provided a few images here that you can get something just gonna copy them and paste them in here and look at that there we go we have four images and I kind of just position these like in a box like so alright so we have four images in here if yours are scattered around you can just kind of grab them and position them together like so they should be the same size so everything is okay now the cool thing you can do is if you grab all the images here you're gonna see that there's this pink thing here so if you want to rearrange the items you can scrab this pink thing and look at that you can just let go and look at it we can easily rearrange everything that we want so I'm gonna bring these like so great let's drag these up here kind of Center them like so nice now don't worry we're gonna super ly position this in just a bit let's add a a title here and for that I'm just gonna say discover new music discover new music let's grab everything change this to white and what I kind of want to have below here is just a a few cards that shows us different kinds of music that we can find so HRT's maybe albums and more copy this paste it in here and let's create the card system we're gonna grab your rectangle tool we can drag out a small little box here let go and to emphasize this I kind of just want to grab the background image that we have here and just make it a bit darker so let's go to the fill here and the color I'm gonna use is gonna be two zero two zero two seven as you can see it's kind of the same color is this just a bit darker let's zoom in here and what I want to do is I just want to add these different images on top now this is gonna go below actually that's rename this this is gonna be charts I'm gonna place it I'm gonna bring down a rectangle so it's gonna be on top can I bring it up there that's good and I'm gonna just add a text down here that's gonna say charts charts Oh huge let's make it smaller 24 pixels let's make this white and we can also align everything remember just here hit center there we go perfect we can also take everything that we have here and just combine it so we have the rectangle we have the charts and we have the text up here so all of these three you can control G and we have a group and this is gonna be the charts card and what we can do is we can actually just duplicate this we can drag it we can drag it again perfect and we can just replace the images in these too so where where are you okay so let's grab this one this is gonna get rid of this delete drag the album up here we need to make sure that this is gonna be in here okay rename this albums and this is gonna be the albums albums card good let's do the last one let's close these so we have more space going on here this one is gonna be more card hit we're gonna grab the microphone delete it and we're gonna grab this one and we're gonna drag it in here so we can drag it on top perfect very nice let's rename this two more okay we just made a small card system here nice let's actually make this a bit smaller or we can just make this a bit larger oh never mind we don't want to do that because we're gonna extend the SVG here so let's go in here and grab the rectangle let's make it a bit larger and bring down the text a bit just to make everything more spaced out yeah I think like that looks a bit better and we can do the same with these let's make sure to grab your rectangle drag it out and reposition everything nicely good let's go to the last one actually it's the first one drag this out good let's drag this down and this perfect very nice and you know what we can actually make these sticker a bit as well I know I can do this forever you find yourself repositioning everything for 10 hours okay drag this out actually let's just copy the the same height and width from this so this is gonna be 136 go on this one 136 and the first one is gonna be 136 okay perfect and that's positioned this as well make sure everything is centered alright that move on because I can work on this for 10 hours okay that's that's fine it's fine good close everything up and let's position these as well what we can do is subscribe all tree like so and we can distribute everything tidy up right here boom it's gonna Center everything that's everything nicely very nice we can also drag these here and again if you want to reposition we can just drag like so we can switch between these but I'm gonna leave them like some charts and let's rename the text this is gonna be albums and this one is gonna be more for you and here you are more beautiful good and let's also add a small text here let's just drag out another one and we're gonna just say beautiful things that people want to hear by joining you can benefit you can benefit by listening to the latest albums released how wonderful we can grab everything here let's make this 30 pixels make it a bit bigger good and we can align everything to the right to the left now right click here everything is aligned to the left very nice now what I also want to have is I kind of want these to kind of fit with this image here okay so what I wanted to do is I kind of won drag it till it arrives to this okay so everything is gonna look better if everything is just well organized and it's the same height what we can do is we can just align everything vertically so hit the arrow here distribute vertically oh that's actually gonna mess things up here so what we can do is we can grab these albums and we can just group them together so there one like so good we can just grab everything again and we can do distribute vertical spacing good and this doesn't this still doesn't look good because this takes up too much space as you can see because the box is way bigger than the actual text so again what I recommend you to do every time you work with this is just hit the outer resize to the width and it's gonna make it the same size as the text this one's okay this one again seeing as you can see it's it's way bigger than it's supposed to be so we can just do wit and that's actually gonna mess it up because it's we have it on two lines let's just bring this up a bit thanks oh all right grab this again and drag everything down here let's try it again distribute vertical spacing and there we go we should have a pretty decent alignment of D texts and one thing I almost forgot let's just make sure that everything is well organized and here so let's go to the feature page again and just make sure we add a grid to this so let's go to layout grid hit plus we're gonna click here we're gonna do columns 12 and we're gonna bring it to 50% so let's just align this everything nicely again scrab this bring it to this line like so this is gonna be the one two three four fifth line okay Center it and let's grab these as well and make sure it's at the beginning of the second line here we go and now we have a bit more harmony okay so for the last page I can either want to have something like a contact page or actually you know what since this is a service how about we give the people a chance to sign up so let's create another frame again nine twenty by ten eighty this is gonna be standard and let's drag it up here and this is gonna be the sign up perfect and let's use the same color again and the background click here very nice and it's not working won't work there we go i missclicked okay these sign up so I want to have the form here or where people can enjoy and for that let's grab the rectangle tool and strang out a box like so very nice drag it up here maybe a bit taller like so now again I can just I can just use things from the previous design so I can give it the background color if I hit the I I button can sample this color a lot we have a frame where we can put our input let's make this a bit wider actually so so we have a bit more space going on here and let's also add a let's do a a bit of a rounded corner here so let's drag this up here this is something like 20 this is gonna be a bit more super round there we go and in here let's just create some forms we can grab the text tool you can drag in the same name we can change the color to white we can make this way smaller something like 18 pixels and that's too small 24 I still feel like it's too small should be okay okay 24 let's also make sure that we ought to resize this with the width and let's add also add double dots here its Colin's not double dots so if somebody called me out it's like edy double dots why are you talking about oh my god I just make up things while I go right do I have a space in here let's delete that okay I just named and for the input I'm just gonna drag out another one of these rectangles like so it's gonna be around 60 pixels and let's change the color let's get rid of the fill I'm gonna have a stroke we're gonna get rid of the fill and let's add this bluish color that we use previously perfect and let's also add some border radius to this as well let's do ten okay very cool let's make sure that this is a line here and let's make this bold or medium let's go with medium yeah so it pops out a bit more so this is gonna be around three pixels we can do too this is one right now let's do two pixels so it's a bit more visible yeah that's that's that's pretty good okay I'm happy with this we can just grab these two this is bothering you you can always lock it so you can easily grab things you just bring this down let's do 25 distance that's fine and just name this email and let's drag another time and we can create a password password and drag this out very cool and let's also do a sign-up button and you know what I recommend you to cheat so click on this copy and paste it down here there we go we're cheating now I'm gonna actually bring this in the center here and drag this out to match the size of the boxes very cool there we go we just grabbed everything we can do vertical spacing there we go and we can subscribe everything and just kind of bring these up a bit maybe and give this button a bit more space so these so I kind of want this stick out a bit more there we go look at that we have our form ready to go let's also add a small title here to get people to sign up I'm just gonna say join the fun you cannot see that let's make this bigger let's go way big there we go and let's also add a bolt to this I want to emphasize there we go join the fun very nice okay what else do we need to do well I kind of want to bring this out a bit I don't like the way this looks let's make it white alright let's see how that looks I'm going to Center this with the box I think so okay and you know what let's change the last word here we're gonna make it bigger something like so join the fun maybe that's too big I'm just trying to get really creative right now let's do 96 on this one and let's make these smaller let's do these 72 yeah I'm just messing around you can just like the text there and let's add the pinkish color to this I don't know I think it looks cool I like it drag this make sure it's centered actually we can just grab the tool here same we did with this just add the layout grid and we can do the credit column we can do the counts to 12 and we can just increase this to 50% make sure we align everything properly so bring it to this line again this one is a bit messed up so we need to wit let's go back to fixed we can just easily stick that there very nice just around there is fine we can just grab this box this one is locked so I'm gonna unlock it good I'm gonna bring this right here to this one which is one two three four five six okay bring it to the center that's fine I'm happy with that good let's also add a a footer here I'm going to disable this and then we should be ready to go grab the sign up disable this and let's add the footer down here and drag out a box like so make sure we put it in the sign up okay should be around good let's drag this up here try this in here I'm gonna sample the same color actually should we do darker who I don't even know let's let's see if the and see if this color looks good yeah I like the way that looks fits everything more well you know what we can actually bring these a bit up there we go a bit more space very nice let's do about us in here about us and we're gonna do a contact contact oops make sure everything is set to white otherwise we cannot see and that's not good very good let's also do a Twitter and a Facebook before I actually do this let's make sure never mind we're gonna do it after I'm just gonna drag this out two more times we're gonna do Twitter here and Facebook here Facebook perfect and I actually have two icons for this to give me one second I'm gonna drag these out so just a simple Twitter icon and a simple Facebook icon there's one to whether mr. Facebook mr. Zuckerberg is there as well good very nice couldn't drag this around like so drag this around like so and now we can just go back to the grid turn the grid back on and we can align these I'm gonna do the second one so kind of lines with this as well strike the box to the second one crank this in here crank it down and we're gonna do a line it's there same goes with this try get in here drag it in here drag this down make sure it's the same height so I'm going to drag it until it clicks and there we go that's one maybe we can we get a bit taller yeah I kind of well I actually make it the same height as our footer so it's perfectly centered so yeah just drag it up here if you cannot see it we can actually turn this off a bit for now so just drag this till it hits the footer so it's perfectly perfectly centered okay and we're gonna do the same with the other ones as well so turn back the grid just quickly go here and zoom in a bit cuz I'm blind drag this in here and where do I won these let's do the last two someone's gonna be here Andy Twitter is just gonna be here now we have two here so I'm gonna align the Twitter logo here I'm kind of just gonna bring this in the center of the logo something like that okay and take this as well bring it in here bring it in here and just actually I need to drag this more out because I have no other choice right now just at least make sure the logos match up and everything else and if this sticks out a bit it is what it is just make sure you can get it as close as possible so something like that should be fine also again make sure the size of this matches to the footer so we're gonna bring this down like so okay drag this up drag this down make sure everything matches again I'm gonna just bring this out a bit like so just so we can get the logo and there perfect very nice so let's turn up the grid and there we go now what you can do is you can take everything and this glue and group it and what web dev simplified is gonna do is he's gonna include it across all the pages so you can just tape all of these group it up like so and then with this group we can call it nav and we can just pretty much move it across all of our pages like so okay here we go let's also make sure that we check out prototyping that's a super cool feature that figma has so what I can do is is I can click on this discover button and maybe I want to go to this page so on the discover button I can go to prototype and I can use something called the triggers here so we can use something like on click while hovering what would pressing Mouse enter I'm gonna do on click right now because I want this to pretty much bring me to the second page so we're gonna hit on click action is gonna be to whichever page I want to go to and in this case I want to go to the feature page there we go hit the feature page and we're gonna get this small line that's gonna show us where it's gonna go and here we're gonna have a few options so the action is gonna be the page we're gonna visit and each transition we can pick different transitions we can do dissolve which is pretty much gonna just fade out the first page and bring us the second one we can also do something like move in or move out so I'm gonna do move in move out I'm not sure let's do move in there we go and we can also choose the direction so maybe I want the page to come down from the bottom to the top we can pick a duration I'm gonna do 800 for this so this is a millisecond so 1000 is gonna be one second and we can choose also an easing function I'm gonna do ease in and out let's see if this works I'm gonna hit the play button up here which is gonna mean present and by default I think the sizes are gonna be quite messed up here so it's gonna be super zoomed in so I'm gonna head the where is the thing yes just here I'm gonna do fit so it's gonna scale down to fit there we go and we can hit on the discover and look at that we're gonna get this nice page transition up to the second page very nice let's close this up hit escape and we can close it in here and what we can do is we can also transition to the the join to the last page so again let's do trigger I'm gonna actually show you show you a different one we can click the sign up which is going to be the last page let's do a whoo let's try the push it's this interesting okay so this is just gonna push it to the next page let's also add a different direction I'm gonna leave the default one let's see how this one looks 800 I'm gonna do ease in and out let's take a look click I'm gonna choose scale to fit again and let's hit join there you go you can get cool different animations going now what you want to do is a bit of a challenge for you so this video doesn't dig till tomorrow because the Sun is already down let me close this you can actually just copy this nav and just bring it down here like so I'm gonna do it like really quickly so and you can use it across all the pages so when you're navigating make sure to Center these very nicely and then when you're prototyping now you can just click cross all the pages so you can go from each page to the next one so join we can go to discover and as you can see we have the cool transitions going on so there we go hope you enjoyed this one I'm sorry if it'll s quite a bit but yeah I hope you're enjoying this yeah as you can see you can barely see me anymore because it's getting super dark but yeah please drop a subscribe if you enjoyed this video and also make sure you head over to web they've simplified and watch this website getting build outs so again it's gonna be in the description and the card is probably gonna pop up again not sure if I can do it the second time but hey it is what it is alright guys thank you again so much and I'll see you in the next one peace and love [Music]

Channel: Dev Ed

Views: 589,787

Rating: 4.9402533 out of 5

Keywords: web design, how to make a website, web development, how to design, how to design a website, web design tutorial, web design tutorial for beginners, design website, web design with figma, figma, figma prototyping, figma tutorial, website design, figma logo design, ui design, ui design tutorial

Id: FK4YusHIIj0

Length: 47min 46sec (2866 seconds)

Published: Sat Mar 09 2019

Reddit Comments

[u/storyofedd]

So I thought I would make a similar design based on spotify to kind of show you my process of building these pages out. If you are interested, I cover things like prototyping, creating simple logos etc.

Let me know what you think of figma and if you enjoyed this design!