How To Convert Figma To Webflow in 2021 (Website Included)

now we all know how easy it is to design something in figma but recently i've been getting a lot of comments that asked me how to turn figma into something more real and tangible something that requires html css and you can actually visit it online right a real landing page so in this video that's exactly what we're going to do we're going to turn this figma file which we designed in the last episode of this series and turn it into a webflow hero page or a webflow landing page and we're going to do that under 10 minutes so you guys can see just how easy it actually is to do now before we get started here if you're new to the channel my name is arna ross i'm a designer and i like to help you become a better designer as well so if you liked the video like and subscribe and always stick around to the end to see how this transforms into a real website now let's get into it so the first thing you're going to notice here if you checked out the last video is that i transformed this sigma file into an auto layout system so what that means is that if you know anything about web design and how websites are built is that everything is basically rectangles within rectangles and what i mean by that is this so you see that we've got this main hero section here or this main container or this main div block right you see that if i double click it it splits off into two different blocks or two different containers as well and one way to think about it is that each container holds important information that's relative to the other containers so you know how separate everything is and the beauty of figma is that we can control how far apart or how close we want this section to be just by typing in a few numbers now i'm going to keep this at 64. and i'll explain you guys why in the next part so we see that we've got these two containers here right we've got the nav and then we've got the hero content or the hero section and if we double click again we'll see that we split again into navlink and then the logo or the main branding part of the website and the same thing happens in the hero section so we've got the image on the right side and then the contents or the actual text and the cta on the left side and that again is split off into two different blocks one being the button and then the other being the text here we've got a h1 or a heading text and then just the sub body main body text here now all the data of the actual fonts and sizing to everything is given to us here so if you want to measure the distance relative to the button then we have to click the actual auto layout format and hold option and it'll tell us that relative to the other button is 64 pixels so let's go ahead and build this out in webflow in under 10 minutes and i'll try to show you guys how easy this actually is so the first thing i'm going to do in this blank webflow page here is hold command k to bring up the search bar or the search content and the first thing i'm going to do is type in navbar and i'm going to just leave that in there and i'm going to want to change the color to be transparent just so we can inherit the value of the actual hero section and you'll notice that we don't have a brand here or logo and let's just go ahead and export the data here so we're going to select the actual logo and then we'll also export the image here just so we have them both and then we're going to want to click export and let's do 2x and both and g now you can also export the logo as an svg but for this it's just easier if we export it as one so now that we've imported these two images into the asset panel we're going to want to just drag this in to the brand section or the brand div block and that seems a bit big right so what we're going to want to do is go over to the actual auto layout here double click our way onto the logo and then we can just check the sides right here so we want this to be 118 by 70. so let's just type that in right now we're going to want to be 118 by 70. and you see that that just automatically transformed the size to fit exactly what we need now we're going to want to change this to be team about us in origin so let's just do that right now we've got team about let's add us and then change this to origin and we see that that just transforms that easily so let's go ahead and build out the actual hero content of this page right we're going to go ahead and add it in a section and this will be our hero section so we can just call it that call it hero and then we want to check the distance between the nav bar and the actual section so we can go ahead and do that as well we'll click our way through into the actual section here and by holding option we see that it's 64 pixels to the nav bar so we'll go ahead and type that in we'll put 64 pixels let's check the height here it's going to be 450 pixels so let's do that as well and that kind of takes care of that section right now i notice that the navbar is a little bit close to the top so we're going to see how close that is and that's just 31 pixels now that's just a random number and we can just round it even and we'll see that that automatically just looks better so let's go ahead and build out this actual main section here we're going to want two div blocks so we can go ahead and add that in we've got a div block here and another dip block within the section let's go ahead and make this into a flex box and let's set them to be horizontal and then justify it to the middle now within this div block you can just call this something arbitrary like left and then call this something like right now this is just so you know that this is the left side and the right side right okay within this one we're going to want to add another div block because if we check the actual hero here we see that this left side is compromised of two other auto layouts right so there's the text block and then there's the actual button as well so we want this to be an actual div block as well so now that we've added that in we'll call it the text section and then we can start adding in our actual text formats right so we're going to click command k again and type in a heading make this an h1 and then within this div again we can type in text box or text block and that takes care of that now for now i'm just adding in the bare bones so that we get the structure right and then we can start styling everything as much as we need to so within left we're going to add a button as well and note that this button actually isn't inside the text div block or the text auto layout right it's not inside that we want it to be separate from that so we can justify the distance so we're going to leave that as button and change the text to be find locations okay now that we've got that let's go ahead and import the image onto the right side now really quickly before we get into this if you guys want to use webflow make sure you guys use the link in the description because that will help out the channel now without further ado let's get right back into the video now we don't actually need a div block on the right side but just to show you guys how easy this is we're going to go ahead and add the image so we're going to want to drag this in and that seems a little bit big to me so let's check the size on that one so this shows that it's 450 by 490 so we can just change the height image here to 490 and that will automatically justify the height based on the actual horizontal so it stays with the same ratio now that we've got that going let's go ahead and change the heading to be appropriate within the style that we want so we're going to go ahead and just copy this text here into this and then also copy this text into this text block okay now that we've got that going everything is in place but the style doesn't look very right right so what we want to do is pick the right fonts pick the right sizes and start to space things out so that it makes sense but before we do that we're going to want to change the body color now usually you would do this in the section but because we only have one section here it's totally fine to do that so we're going over here to backgrounds and we need to pick a color so let's go ahead and reference our sigma file we'll pick the frame double click on the hex code and paste that one in so now we see that it changed the color but now all the text looks wrong and everything just just looks out of place right so we're going to want to go ahead and change this and we can name this navlink or nav something like that we're going to want to name all the nav links to be exactly the same so that when we change one color all the colors change as well let's change this color to be white let's change all the colors to be white as well so that they all match and make sense in terms of contrast so we change that and change that so the font itself we can find it just by hovering over the actual text block and saying that it's frank rule libre 60 and then auto so let's go ahead and type that in so we've got to select the correct one so we've got frank ru libre over here just to go 60 pixels and then 100 percent and then the same thing for the text block we've got this which is nunito 25 and then automatic so we've got new needle down here we've got 25 and then let's do 100 as well so now we've got that going but this button doesn't look too right so let's go ahead and change that as well we want this fill to be the right one and let's just remember that these styles are guaranteed to be matching in the real world right so we want to go ahead and change that to be correct so we've got 13 and then 31 around the sides so let's go ahead and change that and let's just make it even let's make it 15 and 30 why not and then we can change the color here by going to background and pasting this color in now that looks fine but the text actually doesn't look right so we want to change it to frank rule libre so go ahead and do that and change it to be the right size as well lastly in terms of scale and size here the team is obviously not the right size so we're going to want to go ahead and give it the right number so we do 20 and then that should be fine okay so now we've got all the data all the correct numbers and all the correct colors but the spacing is all wrong right everything just doesn't make sense here so let's go ahead and change that we want to select the left side here and give it a value of 521 that will change the scale of everything and make the left side a lot more compact so let's go 521 and we'll see that this is already starting to make more sense let's go ahead and separate out this to be 54. so we've got the top heading here and let's just separate that to be 54. we want to get rid of this spacing here and then let's select the text div as well and change that to be 64 because as we see that's what figma tells us right so we want to go ahead and make sure that's the right one now comparing this to figment we see that this actually doesn't look too right so i'm going to go ahead and change that something to 150. that looks closer and we're going to want to center this section over here in the middle so we're going to change this to a flex box direction vertical and then we're going to want to justify it through the left and then in the middle now the sizing looks a little bit off so we're going to want to decrease that by a bit and that looks more appropriate we're also going to want to change this section and let's give it an even number of around 20 all around and now what we want to do is give it the appropriate space between the actual text box and the cta and then the actual large image so go over here to the left and give it a spacing of 64. so now that's the same in figma as it is in webflow but the nav bar here looks a little bit off so this nav link here is within an actual div block so we want to do here is make it the same width as this image and that seems to be 490. so if we type in 490 and we space everything out evenly with a flex box now i've gone ahead and done some extra work here but the basic thing is that the nav menu is the same width as the actual image and so what that allows us to do is match those exact parameters to be the same size and as you can see it's a little bit tight here but that's because we're in the wrong size so if we go ahead and change it to 1280 pixels we'll see that it's much closer to the actual image that we have here on figma now given this is only a 10 minute tutorial or 13 14 whatever this came out to be it's not going to be the best thing in the world right but if you give yourself a couple of hours here this will come out to be a really really nice website now if we want to go ahead and preview this or publish it we can go ahead and click the publish icon here and what that allows us to do is give us a preview link that you guys can go ahead and access so if you go ahead and click this link right here we'll see that this is a real website that works we've got real working buttons here this image that you can drag out this is a real button this is all text that is real right this is a real landing hero so what that allows us to do here is have the flexibility to pretty much build out anything we want in figma and we can go ahead and move it into webflow and what that allows us to do here is really have the freedom of design and we can just move around anything we want and have it be the exact parameters that it should be i'll go ahead and leave the link to this webflow page down in the description if you guys want to check out webflow then also use the link in the description because that will help out the channel thank you guys so much for watching this video if you guys enjoyed it make sure you like and subscribe and i'll see you guys on the next one

Channel: Arnau Ros

Views: 4,109

Keywords: figma to webflow, figma design to webflow, covert figma to webflow, convert figma design to webflow, webflow website from figma, figma to webflow design, figma to webflow portfolio, figma to webflow plugin, figma to webflow converter, how to convert figma to webflow in 2021, how to convert a figma site to webflow, design from figma to webflow, convert figma to webflow, figma plugin to webflow, figma to real website, how to turn figma into website, how to turn figma into code

Id: yspIZPz2X3k

Length: 11min 5sec (665 seconds)

Published: Mon Oct 18 2021