- Hi everyone, welcome back to my channel. I'm really excited about today's video because we're gonna be
working on a project together. I'm gonna be showing
you how to take a design you've made in Figma and convert it into a working website using Webflow. I've got some tips for
you and some suggestions on like a workflow you should
follow to make this process really streamlined and easy, so if that sounds good to you
then let's get right into it. (relaxing upbeat music) So this right here is the
design that I've made in Figma. It's a landing page for
the community that we run, it's part of our podcast, Design Life. So it's just kinda like a sales page, tells you a bit about what
to expect in the community, there's some reviews, there's the ability to sign up obviously, so this is what we're gonna
be building out in Webflow. And the first thing to actually note and the first tip that I have for you, how to start this workflow
off in the right place, is that if I turn on the
layout here in Figma, you can see I've setup a 12 column grid, and this grid is 940 pixels wide because that is the standard
width of a container in Webflow and also Webflow uses a
standard 12 column grid. So if I'm working to that in my design, it's gonna be much easier for me to then take what I've designed and
build it out in Webflow. So it's a really good
idea to start with that and if you're interested
in my layout grid settings then this is what I've got
here so you can just copy that. So the first thing that
I wanna do before I dive into Webflow and start building is just kinda evaluate my design. Websites are all built
out of blocks right, blocks stacked on top of each other, styled different ways,
arranged in certain ways, but it's pretty much all blocks, and even though you're
not writing code by hand when you're using Webflow,
you are still coding, so things still function the same way. So I wanna get an understanding
of the different blocks that make up my site, because
that's like the sections that I'll work in when I get into Webflow. At the top here you can see
I've got this white section, that's the intro, this gray
one is like some content, I've got this badge here that
kinda overlaps these sections so I'll be using some negative
margin to push that up and take it out of the section
that it kinda belongs in, and then again happening
here with this screenshot. These reviews here take
up six columns each, all of my text kinda
takes up eight columns, here sitting in the middle with a two column block on either side, these points four columns each,
that's good to keep in mind. Just going through, scanning your design, seeing how it fits to the
grid is gonna help you when it comes to building in Webflow. So with that said, let's dive
into Webflow and get started. This is the Design Life
website in Webflow. It's where we house all of our episodes, it's where we have a current
landing page for our community but it is kinda bare bones so that's why I decided to design a new one. So let's just start fresh with a new page. All right, so here's our
blank canvas and like I said the first thing you wanna do is add that introduction section, so I'm gonna drag in a
section from the layout, then I'm gonna add a container which is that 940 pixels wide
that I was talking about. The next thing that you
can see in my design, and as it's pretty
common in every website, is a navigation at the top. Now if you've used Figma before, you'll probably know about
components which is where you design something once,
you save as a component, and then you can drop it
on all of your app boards. If you need to make a change to it, you just change it in that one place and it'll spread those changes out. So I've got this navigation
in Figma saved as a component. That makes it a really great candidate for a symbol in Webflow which works pretty much the same way. You make it once, save it as a symbol, and then drop it on all
the pages that you need. If you need to make an update to it, just change it in the symbol, and it'll spread those changes out. So if I go to my add tab
and change to symbols, you'll see we actually already
have our navigation set up, so I'm just gonna drop that in, but it is really easy to
make a symbol in Webflow. Let me just show you as an example, I'm just gonna drop in
this example navigation. Just like in Figma, you're gonna right click
and create component, in Webflow you're gonna right
click and create symbol. And now this guy, this test
navigation is saved for me whenever I want to drop
it onto another page, but to be honest I
don't because we already have a navigation so let's keep moving. Back to the design, like I was
talking about with columns, I've arranged this H1
over kind of eight columns because if I spread it
out right to the edge, then I feel like my text
doesn't break how I want it, so eight columns is nice. I'm gonna come in here and
add some columns in Webflow and then I can adjust these column widths just by dragging over here so my columns are eight with two either side,
that's what we're gonna do. (relaxing upbeat music) Like I said before, when
you're working in Webflow you are actually coding so for example, this left hand side here where I'm dragging in elements to my
page, that's like adding html, and then over here I can come and change the style of those elements. I can change the font, the colors, borders, you know whatever, and this is kind of like adding the CSS, just like with code as well, you add classes in
Webflow which means that you can reuse them on different elements. So we already have an
H1 class in our site, but it's a lot smaller
than the one that I've used on this page here as you can see. So instead I'm going to make
a class called H1 large, and then I'm gonna go about styling. The font that we're using on
our site is called Assistant, so let me save that. Just like in Figma, you can
easily use Google fonts, it already comes built into the software, that happens in Webflow
too so it's really easy for me to find the Google font
that I want added to my site. (relaxing upbeat music) So far, so good, but as you can see these images are aligned kind of to the top of the column
there and I want them to sit more in the center of the heading. So to do that I'm gonna use flex box, gonna apply it to the column here, and if I set the flex
layout to align center, just with this button, then
they're gonna move down. Moving on to the next section, this one's gonna have a gray background so I'm just going to call it section gray. Another tip for keeping things streamlined between your Figma file and your Webflow website build is with colors. So if I come in Figma you can see all of my document colors here are the ones that I
use throughout my page, and I could be saving them
to global colors as well. In Webflow I can put in a color value and then save it as a swatch,
I'm gonna call it gray. That way I don't have
to go pasting in values all the time and all of the colors I use can be saved here for me. So I'm just gonna add my
purple to that as well. (relaxing upbeat music) Now obviously my first
line here is sitting a little bit too close to
the top of this gray box, it doesn't quite look like my design does. A handy way to measure things
in Figma is to hold down the option key when you've
got your object selected, and then you just hover on the object you wanna measure it to, and as you can see here it
tells me there is 88 pixels between this and the
top of the gray section. That tells me how much margin or padding I should add in Webflow. As you can see here, I can
just drag to add padding, but if I hold down the
option key and drag, then it'll adjust the top and
the bottom at the same time which is very handy. (relaxing upbeat music) Now obviously my design,
I have the bi line sitting next to the image so when I put in a block it automatically is gonna stack
em one on top of the other so I need to adjust the settings for that. Using flex is a really
good way to do this, it's easy to remember
because think of flex as more flexible and you have
more options if you use it. So I'm going to set this
block that's containing both the image and the bi line,
I'm gonna save that to flex, and because the layout
is set to horizontal, that means it'll arrange
all the items in the block on a horizontal line, which
is exactly what I want, and I'm just gonna click
center and that'll drop the bi line and twitter
handle in line with the image. Then of course, I'm gonna
want to add just a bit of margin onto the image here,
so let's come in and do that. As you might notice on my
design, if I turn the guides on, this white block here actually extends past this column that I had it in, extends out about 20 pixels, so I need to make that
overlap here in Webflow too. So to do that I'm gonna
set a negative margin. Again, if I hold the option key it's gonna do the left and the
right at the same time. So let's do that and drag
it out about 20 pixels. Yeah, that's looking pretty good. (relaxing upbeat music) With this one here, I'm
gonna put all of this, because again we like to think in blocks in what you're gonna make, so let me just get an outline here, we're gonna put all of this
here together in a block and then just like I extended the sides of that testimonial card out, I'm gonna do that here
with a negative margin to make it move up into the
next section a little bit. (relaxing upbeat music) Earlier on, on a different block, I made a class called center
to just like align everything, so I can just use that again and it'll pop this image into the middle. (relaxing upbeat music) Remember when I saved my
purple in my color picker, it's coming in handy now. (laughs) (relaxing upbeat music) Something I find really good to do as I'm looking between my
design and the Webflow file like figuring out what
sizes to make things, that sort of stuff, is come
into the code tab in Figma. So this tells me, okay my font size is 17, it's got a line height of 22 pixels, it tells the font family
although I already knew that. Instead of me figuring
out, okay exactly what do I need to know to style
this one line of text, in the code view it tells me exactly that. So then I can come into
Webflow and make sure that I set the size of this to be the same as the one over there. So there's that block done, and for these things here
I'm gonna do two rows, row one, row two, of four columns each, so three columns of four. (relaxing upbeat music) So my next challenge
with this is going to be all these icons here, getting
them aligned to the left of the box with the
text right next to them, and I kinda want the icons sitting, I mean the text sitting in the middle vertically of the icon. And if you remember I
did something similar for up here where I used that flex box. So I think I might do the same thing here. Going to add a div, gonna take
this and put it inside it, and handy thing in
Webflow is that it obeys your regular keyboard commands so I can just go cmd + x and then cmd + v and it'll paste it inside that div box. What did I call it up here? Flex div, okay, so because
I made that a class, I can just reuse it down
here for this one as well. (relaxing upbeat music) Duplicate here is just gonna be a bunch of copying and pasting
from Figma so excuse me while I just go get that done in a snap. (snapping) There we go, all done. I was able to just
duplicate my heading icon, the paragraph in these three columns, and then I was able to
duplicate that whole row and replace the text for the next one. All right, so underneath that
we have another piece of text. So for this, this is the same size as the text that I used up there, so I'm just gonna come in and copy/paste this in here because why not. (relaxing upbeat music) see how I've got this little
line up here in my design just as a nice little divider, it's really too small for me to bother with exporting that as an image, that's unnecessary load time, so what I'm gonna do
instead is bring in a div, gonna put it at the top of this column, and how wide is this guy, in Figma it's about 20 pixels wide. Okay so I'm gonna make this div, I'm gonna call it divider line, gonna be 20 pixels wide. And centering stuff in CSS
when you're coding by hand always feels like such a problem but in Webflow I'm just gonna click here, this handy button that
says send to element, and it'll go in the middle for me. Now I'm gonna add some margin to it. Just wanna fix the padding,
then what I'm gonna do is I'm going to basically
fill in this div, and I will have drawn a shape. Gonna make the background purple, and there we go, now we
have our little purple line. (relaxing upbeat music) As you can see in my design,
my screenshot has this drop shadow to it and this
is where I find the code part really comes in handy
to know what settings I need to apply in Webflow
to make this drop shadow. So it's got 14 pixel radius,
it's not offset at all, and it's like .25 in opacity, then I come into the shadows tab, just gonna add drop shadow. So there was no distance,
and it was a 14 pixel blur, and my color was really low opacity, so let's shrink that down a lot. There is my image for the drop shadow. Okay, I'm just gonna add
in this next gray section and then I'm gonna show you how
I do this overlapping thing. (relaxing upbeat music) Okay, so I want this screenshot here to overlap with the gray and I want this here to overlap
with the gray at the top. So we've put all of this inside a div and I'm just gonna call it overlap top and then we're gonna add a negative margin so just dragging down
on here and moving it up until I feel like it looks good basically. That looks pretty good, and
then this one here at the bottom I'm gonna add an overlap bottom to it. And actually I'm gonna take
off the padding from this white section so that way it's
already sitting at the bottom. And then it's a negative
margin to drag it over. Now let's get on with filling
out that gray section. Something I'm gonna need to
do is add a lot of padding to the top of this gray section just so my content doesn't hide behind the image, basically just extends
the space that you have at the top of the section to allow for anything you might have overlapping. (relaxing upbeat music) These here are, even though
they're smaller than my one that I've used up at the top here, they're the same style really, and this white block is just gonna go to the full width of
whatever column it's in. So what I should be able
to do is just come here and copy all of this and paste it in here. Yep, that worked, but
remember because I put that overlapping on the sides of it I don't want that in this one so I'm just gonna go and take that off. (relaxing upbeat music) Right so that this here, I think that I'm gonna
start with a div block, because I mean it already
has a border around it so it is obviously a block. Let's call this pricing, and it's going to have a border. (relaxing upbeat music) So this is kind of in two columns, as you can see this takes up kind of four and this takes another four, so what I could do is make it four columns with like two with four
width, four with two width, but what I think I'm gonna do is actually nest some columns within
columns if that makes sense. Just because I know it's gonna help me when I come to making this responsive, so let's start with editing this to be our standard eight
with two on either side, and then within this I'm
gonna put another column and this is just six and
six, that's right, cool. (relaxing upbeat music) Then to end it all off, I'm gonna come back to another
symbol and add in our footer. There's a component in Figma and it is a symbol here in Webflow, so just gonna grab that and
drop in into the container. Boom, there we have it. There is a rough
approximation of our page, and the next thing to pay attention to is the responsive layout,
so if I preview it here, this is what my page is looking like, looks pretty much the same as my design, there might be a couple
of things to fix up but it's looking pretty good. I can preview it at these
different device sizes. Obviously there is a problem
with our symbol there, navigation shouldn't be doing that, but yeah for the most part, this shrinks and looks pretty
good just like on it's own. Cause I was using the column element, they all resize as the browser shrinks and as you'll see as I
get to the mobile device, columns all just stack one after another. So these things here
which were three in a row, now they're in a list of
six, which is working great. So there's only a few things to touch up and this page will be production ready. But I'm gonna end this video here because I know it's gotten really long. I hope that you enjoyed seeing this and I hope that it was useful
for you to see my workflow, taking something from Figma
to building it in Webflow. I did a video recently
about why I switched from using Sketch design
websites to using Figma, and a lot of people
asked questions in there about how you make it
into a functioning site, so yes, I hope this was useful. The reason it isn't a thing
where you just like upload the Figma file and it
automatically makes it a website is because Webflow makes
really good clean code, in fact, I can come in here
and show you that all that clicking around I was doing
was actually making just like a good looking html and
unfortunately that is not the case with most code building tools which is what makes
Webflow different for me, and it's also not usually
the case with tools where you just upload a file and it
makes the design automatically. This way you're getting a
good functioning website, it's not gonna slow the site
down or anything like that, and it's good clean code
that you've written. All in all building this page
out took me about two hours but I was also stopping
to charge my battery through the middle of this, so as you can see pretty easy to get a website up and functioning. All I have to do on this literally, is click publish and it'll go
out and be a part of our site. So I'm gonna make those last
few tidy ups and get that out so you can take a look at it. If you like what you saw
and you wanna dive in and try out Webflow for
yourself, then you can do that, there's a link on the screen right now, and also in the description. It's free to just dive in and start having a play with a project so definitely check it out
and see what you can create. If you've got questions for me, if anything wasn't clear
in what I went through, I know I like sped up
some parts just to try and make the video shorter, so please feel free to ask questions down below in the comments, I'd be happy to help you out. Thanks for watching this video and I'll see you in the next one, bye. (relaxing upbeat music)
