In this course, we’ll take a one-page design for a travel website in Figma and go through the process of converting it into HTML.
In the process, we’ll learn some tricks about working with Figma and using CSS Grid and Flexbox to make layout control a breeze.
This course is perfect for anyone who’s found a landing-page design on Envato Elements and wants to code it up themselves. Let’s begin!
Learn Figma
We’ve built a complete guide to help you learn figma design, whether you’re brand new to Figma’s design tools, or you want to take your skills to the next level. You may also want to check out our free Figma tutorial for a comprehensive beginner’s guide to the software.
In this course, we’ll take a one-page design for a travel website in Figma and go through the process of converting it into HTML. This quick introduction will give you an idea of what to expect from the coming lessons.
In this course, we’re gonna be taking a one-page design for a travel website in Figma and we’re gonna go through the process of converting it into HTML and CSS. We’re gonna have a couple of main points of focus here. One is how you can work with Figma during the coding process. And the other is how you can use CSS, in particular Flexbox, and CSS Grid to more easily control your layout. And just a quick note. We’re not gonna be building a fully responsive website. We’re just gonna have one width so that we can keep our focus on working with Figma and on controlling LAN. By the end of this course you’ll have this whole website all coded up and ready to go. So let’s go ahead and get started on Figma to HTML. I’ll see you in the first lesson.
Before we get into the coding, we have a few preparatory steps to undertake. We’ll begin by simplifying the template a little so it’s more efficient to work with, and we’ll also examine how to deal with templates that have a fixed-width design.
Related Links
Hey, I’m Kezz Bracey for Tuts+. In this lesson, we’re gonna start laying down the groundwork that we need to go through before we can really get into the guts of coding up this Figma site. The first thing that we’re gonna do is a little preparation on the template that we’re gonna be working with. Now the template itself comes from Envato Elements. We’re gonna be using the one that you see on the screen here, Knife Travel Agency Web Design Template. There’ll be a link to this in the of this video, so go ahead and download a copy of this template and then we gonna bring it to Figma. Once you downloaded the zip of the template from elements, and you extract it, you’ll see these files here and the one you want is on the .fig. So fig, Figma, then you wanna open up Figma. You can do that in one of the desktop apps or you can do that in the browser, either way it doesn’t matter. And then you just wanna drag and drop that .fig file onto the Figma interface, and it’s gonna go through and import that file into Figma for you. Once the import’s finished you can hit Done and then double-click on the file to go inside, and let’s have a look at what we’re working with. All right, so a template has several different sections. We are not actually going to create up every single one of these sections because it’s gonna get a little bit redundant if we do all of them. We’ll end up covering too much of the same ground. We wanna try and make it so that there’s something interesting in you that you are learning, or working with, in each part of the coding, so we’re actually going to remove a few of the design elements from this template. To do that, open up the collection of groups here. We’re gonna keep the top header and the regular header, but we’re going to turn off group six. Group six, just to show you. Is this form here, so we’re not gonna be using that. We’re keeping the Hero header. We are not gonna keep Upcoming Tours, so let’s turn that off. Just hit Shift+1 to zoom out again. We’re gonna keep the Discover Around section, the Best Offers section, and the Explore section, but we’re going to turn off Testimonials, Instagram, and Newsletter. Now we just need to get rid of this empty space that we have in between our remaining elements. So I’m just gonna drag a select box around these three, hold down Shift and press the up arrow, until we get this into the right spot. Hit Shift + 0 to zoom in closer, so we can check on our alignment. Want to get about the same space above and below this heading, so that looks about right. Now, let’s take a look at our footer down here. You wanna do the same thing, just gonna hit Shift + 1 to zoom out again. I’m gonna start dragging this and then I’m gonna hold down Shift to snap it into a locked horizontal position, we’ll just drag this up a little bit. And now, because we don’t have anything overlaying the top of this box, this background is a little bit bigger than we really need it to be, so we’re going to shrink that down. Let’s expand the footer, and we’re gonna select this BG element here. Let’s just shrink that down to, say, about 178 pixels ought to do it. And then we’re just gonna reposition it. So that it snaps into alignment both vertically and horizontally. And then, now let’s drag the whole footer up, I’ll just select it here, drag it up a little bit more, to about there. And then that’s all good. Now we’ve got this big empty spot at the bottom here but, right now, if I select this frame and try to resize it, it’s gonna squash all the content we have inside here. So undo that. And we need to do to work around that is select all of our chart elements so like first one in the last panel here. Hold down Shift and then select the bottom one to get all of them. And now we’re gonna change up the constraints over here. What we wanna do is change the vertical constraints, so that when we modify the height of the parent rapper, these chart elements stay where they are relative to the top of that parent rapper. So we’re gonna change that to top. And then now when we select the panel, we can just drag in until it snaps to the bottom of our space. And now that frame perfectly fits our layout. The next thing that we have to do is figure out how we’re gonna deal with this being a fixed width design in this template. If we select our parent wrapper again, we can see over on the right that this is designed at a width of 1440 pixels. But of course you’re often going to have view ports of the 1920 pixels or larger. So we need to decide how we’re gonna make this design behave, while we do have that bigger view point. Generally speaking with a design like this you’ve got two choices. You can have either each of the elements that are inside the parent, stretch their backgrounds out, the full width of the view point that they’re in. So for example we have this sort of a gray, blue tone, In the background of this section, you could have that grey blue spread out to be a much wider rectangle in the background, while the content stays where it is. Alternatively, rather than have these content elements that are in here get wider, you can have them stay the same width and what happens instead is you have an empty space that gets created down the right and left sides and it’s that empty space that expands with the v-port instead. In the case of this design, the decision is already kind of made for us and the reason is this background image here. This background image is already inserted in to the design at a width of 1440 pixels. That means if we try to stretch it up to 1920 pixels or higher, it’s gonna become blurred and artifacted. And it’s not gonna look very nice. So because we don’t want to stretch this image out, we’re gonna go with the option of creating empty space down the left and right side of this layout instead. The way we’re gonna do that is hit Shift + 1 to zoom to fit again. We’re gonna grab the frame tool and we’re gonna draw another frame around the outside of the frame that we already have and that’s gonna represent a larger view port. So I’m just gonna grab this, drag it all the way around. And that will automatically herent itself around the frame that we already had there. Then, we’re gonna need to resize that parent frame, before we do that we’re gonna need to change the constraints on existing frame just like we had to do with the chart elements that we were working with before. So we’re gonna sit this first setting to center, meaning that this frame is just gonna stay in the center of the new frame that we just drew. And we’re gonna set this one to top, meaning it’s gonna keep itself stuck to the top. Now with this frame selected, we’re just gonna click and drag until it snaps to the top and the center, and then we’ll just move down to the bottom, select this new frame that we added in. And drag that up, until it snaps to the bottom there. Now we can change up the width. We’ll just go with 1920, and now we have a wrapper that represents a pretty standard 1920 width view port. The next thing that we’re gonna have to do is deal with the fact that now these white backgrounds here bleed into the rest of the design. We’re gonna need to do something along these edges here to separate the existing design from this new background area that we’ve introduced. The first thing that we can do is set a background color on this new frame itself. And then the second thing that we can do is put a thin border around the entire design. So we’ll do the background first. We’re actually gonna set it to the same background color that we’re using in this top header here and in this Best Offers section. So make sure you have this parent frame we’ve just added in selected. We can actually delete the stroke, we don’t need a stroke there. And make sure you don’t use the fill setting when you are doing this. If you add a fill then it’s going to affect all the chart elements in your design so you don’t want to do that. Instead you want to change the background setting instead. So make sure that you hit this colour palette button so that I can use the colour picker to grab this color from the background here, that’s F2, F4, F6. So now, that’s giving us some nice distinction between the white areas of the site and the bluish-gray areas. But we still need to separate the bluish-gray background areas of the content from the background as well. To do that, let’s just collapse this layer here. And we can Shift + 1 to zoom out completely, and we’re gonna grab the rectangle tool and we’re gonna draw a rectangle, and we’re going to snap it so that it’s the same size as our content. And then we’re gonna drag it down so that it’s behind the Knife Travel frame. I’m just gonna hit Shift+0 to zoom to a 100% so you can see more clearly. We don’t need to fill so we’re gonna delete that. But we’re gonna add in a stroke. And you’ll notice at first you can’t see that stroke. That’s because it’s set to show on the inside of the rectangle that we just added. So it should have shown the outside. Then, you’ll be able to see that board clearly. Now, we’re gonna give that stroke a color that’s a darker version of the background color that we just added in to our parent wrapper. Just going to select that tangle again and the color that we’re gonna use is D6E3F0. All right, so then now we’ve got that subtle separation. It just helps to distinguish where the content is and where the background is. Generally speaking, you don’t need to do a really bold line to achieve that. It doesn’t take much, it’s just a little cue to help the eye quickly make sense of what it’s seeing. So now it would not matter what size the viewport was, we can just have that constant area stay centered, and just decrease and increase the size of the space around the outside. And just a quick reminder, we’re not gonna be doing a full responsive layout with this. I will link you through to some courses that we have on how to turn pretty much any design into responsive layout. It’s a set of same steps every time. You just need to apply them depending on the content that your working with. But with this course, we’re gonna be focusing more on the things that you need to know to work with Figma to do this type of process. And on the actual CSS and HTML that we’re gonna need as well. All right, so that template is now ready to go. We’ve simplified it down to only the elements that we’re gonna be using, and we’ve decided how we’re going to handle the fixed width nature of this design. In the next lesson, we’re gonna go through and pair the images. So we’re gonna be exporting all of the photos that you see in here, so you’ll see how to work with big amounts of export photos. We’re gonna look at when you might need to downsize the images that you’ve exported from Figma, and we’re gonna save that a couple of svg graphics as well. So we’ll step through all those things in the next lesson. I’ll see you there.
We’ll now go through and export all the images from Figma that we’ll require in our site. First, we’ll export all the photos and cover a “gotcha” to be aware of with Figma image exports. We’ll look at downsizing images and exporting SVGs.
Hey, welcome back to Figma HTML. The next thing that we need to do as part of our ground work is we need to prepare all of the images that are in our figment design. We need to export the photos, and there are a couple of SVGs that we need to export as well. As part of this, we also need to make sure that the files that we end up with are an appropriate file size, so they’re not so big that they’re going to make somebody’s internet connection chug when they’re trying to view the website. So here I have my file manager. I’ve created a folder, I’ve just called it coding up and it’s gonna hold all of the HTML and the images for this site. I’m gonna need to create two folders. One is gonna be called just images, and that’s gonna hold the images that we’ll actually load into the completed site. And I’m also gonna make another one and I’m gonna call it full size exports. The reason I’m doing that is that when we first export our images from Figma, some of the them are going to be pretty big in file size, so we’re gonna export from Figma into this folder. Then we’re gonna downsize the files that are too large, and put them into the images folder, ready for use. All right, so let’s start at the top. I’m gonna hold down control so that I can directly select whatever I’m clicking on, then I’m gonna hit shift two to zoom into that selection. Now you can see with the size of this selection that this has actually selected an area bigger than we actually want to export. And if we look in here, we can see that this whole image is wrapped by this frame here. So I’m gonna select that. Now that selection shows us that we are using the right thing. And over here is where we set up our exporting. Before I hit this plus button to create a new set of export settings for this image, what I wanna do is rename the element that I’ve selected to whatever filename I want the resulting image to have. So I’m gonna double click that to rename it and call it hero image. So now I’m gonna hit this button here. I’m gonna change this to JPEG. Working with a photograph and you pretty much always want a photograph to be in JPEG file format. And we can also click this little preview button here, so that we can see what’s gonna be exported and make sure that it’s exactly what we expect it to be. So now we can go ahead and hit Export heroimage. It’s telling us there that our file name that we want is coming through correctly. Then we can browse to our fullsizeexports folder and export our image. Back in the file manager, we go into our folder, and there’s our heroimage. You can see there, it’s 1.2 megabytes, which is entirely too large, so we are going to need to downsize that image. But before then, we’ll go through and finish exporting all of these images, so we can do the same thing here, hold down Ctrl to help us get into roughly the right area. Then in here, you can see what we have actually selected. Gives us an area too big, that’s because that is masked inside this frame here. Let’s name this image, Rome. We’ll create an export for that, same thing again, change it to JPEG. Check that the preview is showing what we expect it to be showing, and then export to the same folder. Now you wanna go through the same process for the other four in this section. We’re gonna call this image BarCrawl because the text talks about whisky and beer. We’ll call this image Paris. This image has some text about an art tour, so we’ll call it ArtTour, and we’ll call this image Iceland. When you’re done with all that, you should have these images inside your images folder. The next section of images we have is in the Best Offers section. So for this one, we’re gonna do the same thing again, and with this time we’re gonna name it Thumb_Paris so we can differentiate it from the LodgeParis image that we exported before. Thumb_Paris, add an export switch to JPEG, and this time we’re gonna export this just directly into our images folder, cuz it’s quite a small image so it’s not likely to need downsizing. So we can see here that image exported at 24 kilobytes. You could crunch that down even smaller, but it’s probably not really necessary, that’s small enough. Now we’ll jump to the third one, export that as Thumb_Berlin, and just go through the same process that you did for Thumb_Paris. Now with this image here in this Dublin, Ireland row, we’ll will actually start by naming it Thumb_Dublin. But now if we create an export for that and you have a look at the preview, you can see that all this empty space around the outside of this image. We don’t want that, we just want the image itself. And even though you can see that our selection bounds are accurate, they’re where we want them to be, we’re getting a result that we don’t expect over here. That’s one of the reasons that it’s really important to check the preview for every image that you’re exporting, because what’s actually happening is it’s pulling in these image effects that are applied to the image in these nested elements here. So let’s go through and check those. So there’s nothing applied to this image itself here. We go into the mask. Here we can see that there’s a drop shadow turned on. So what we can do is just hide that for now. And then we’ll check the mask as well, and there’s also drop shadow there, which we’ll turn off. So now, if we go back to our preview, now we can see that we’re just getting the image itself that we want. So we can change that to jpeg, and then go ahead and export it, and that’s it for this section. Now we have just three more images in the Explore the Travel. This image here, select it in the same way that we did with the other ones. We’re gonna call this one Greenland. You can export that just the same way that you have the others. This one on the right, we’ll name Quotes. And then with this one in the center, you’ve got the same issue that we just dealt with in the previous section, where there are some image effects that are going to be exported with this image, unless we locate them and turn them off. So once again, there’s nothing on this bit map layer here. You can see that there are no effects applied. If we go to the mask, there’s a drop shadow that we need to turn off. And this other mask also has a drop shadow that needs to be turned off. And now that one’s ready to be exported, and we’ll give it the name Indonesia. And these are larger images again, so put these ones in the full size exports folder. When you’re done exporting all of those, make sure that you go back through and you turn the effects back on again, so that when it comes time to code everything up, you have those effects there for reference as to what you need to do in your CSS. All right, so now if we look at file sizes of the little thumbnails that we exported, those are about 30 kilobytes each, that’s totally fine. But if we have a look at our full-size exports, we can see these file sizes are quite large. And our Hero image is 1.2 megabytes, so that’s far too big a file size. It’ll be far too slow to download. So now what you wanna do is, open up whatever your favorite image processing application is. It could be Photoshop, it could be Affinity Photo, it could be GIMP, anything you like. And then re-export each one of those images at the lowest file size that you can get it, while not destroying the quality of the image. So it might need a little bit of experimentation. Basically, just watch a preview of the image as you’re tweaking the compression settings, find the point at which you start to see artifacts in the image and then increase the quality just a little bit above that. And that will give your smallest possible file size. I’ll show you one example in GIMP. So I’m going to, Export the file to my images folder. Keep the name the same. Let me just drag this out of the way, so we’ll be able to see the image preview. Hit Export, I’m gonna set this to show the preview in the image window as I’m working on it. So now I am just gonna drag this down. So I have taken that down to about 80% compression, and you can see that that’s dropped the file size down to 190 kilobytes. So we’re at only about a sixth of what we were before. And there’s a little bit, it’s looking a little bit excessively smoothed up here, so I’m just gonna drag it up a little bit more. I’ll leave that at about 80%, that looks pretty good. So then I’m just gonna go ahead and export that. So then you should be able to do the same thing for all of the other images. And when you’re done, you should have this collection of images in your images folder. And if you take a look at the file sizes, they’re all a lot more reasonable. So that’s gonna make your site much faster loading. Now the last thing left to do as part of preparing the images is to extract a couple of SVG graphics. So we’ve got this little phone icon up here, and we’ve also got this text here that reads summer. Because this is just actually text here, created with the font, my type script. We could get that entire font file, load it into our document, and use it to present this word summer here. But we’re only gonna be using it for one word, so it’s probably not really necessary to load an entire font file in just for that one word. So instead, we’re gonna create an SVG graphic for this word, Summer, and we’ll use that in place of raw text. There are a couple of ways that you can exploit SVGs from Figma. One of the ways is, if you get your selection onto the graphic that you want to export, so that would be this, you can right click, choose copy as, and then copy as SVG. Then you can create a text file, call it something like phone icon.svg and paste that code straight into it. That’s one way or you can just use the export button down here, the same way that you did with photos. So I’m just gonna hit plus, and then this time, I’m gonna choose SVG. Let me actually rename that to AllUse, one word. Now export phone icon, and that can go straight into that Images folder. And then we’re gonna do the same thing with this word summer, here. You’ll notice that, like with our other images, there’s a drop shadow active here but because we’re working with SVG, we don’t need to disable that. SVG has the ability to create drop shadows inside itself through code. So rather than us needing to manually apply drop shadow to this with CSS later, we’re just gonna let the drop shadow appear inside the SVG itself. So just like before, great, and you export. And you can actually see in there, you can see the drop shadow being applied to the word. Change that to SVG. We do wanna rename this later, because that hash at the beginning of summer could cause some problems trying to load these image files off the server later. So we’ll just delete that, and now export that as summer.svg into our images folder. And there is our completed collection of images, all ready to go, ready to be loaded into SI. We’ve got our photos without any extraneous effects applied to them, all crunched down to an appropriate size, and we’ve got our SVGA graphics ready to go as well. In the next lesson, we’re gonna start the coding. We’re gonna begin by creating the basic shell of our site. So that is creating the basic files, like the index.html file in the style sheet, adding in some basic html, loading up the style sheet, and calling in the fonts that we’re gonna need. So I’ll see you for that in the next lesson.
With our template prepared and images exported, we’re ready to start coding. We’ll start with the basic shell: creating our required documents, adding basic HTML, linking in our stylesheet, and loading the fonts we’ll need.
The last element of our groundwork is to set up some base layout classes we’ll use throughout the content of the site.
Related Links
Hey welcome back to Figma to HTML. In this lesson we’re gonna go ahead and create the basic shell of our site. So we’re gonna create the essential files and put in a bit of the essential code that’s going to form the basis of our site. I’m working in VSCodium here as my text editor, you can use any text editor that you prefer, VS Code, Atom, Sublime, whatever you prefer. And I’ve already opened up the folder that we’ve been working inside this text editor, so it’s showing me the sub folders that we already have as well. In here, I’m gonna create a new file, gonna call it index.html, and then while I’m at it, I’m also gonna create a style sheet and we’re going to call that style.css. All right, so inside our index html file, we’re gonna add in just the basic wrapper of code. If you’re working with VSCodium or VS Code code, or if you have Emmet installed in your text editor then you can just put in an exclamation mark and hit Tab and that’s gonna give you all of your most essential code. Then we can create a new title, let’s just call this Travel Site. And we’re gonna load in the style sheet that we just created. So create new line, type in link hit Tab. Now we could just type in the name of our style sheet and the next thing we need to do is load in any fonts that the design is going to need to use. So if we go back to Fgma we can start looking at some of these texts elements and see what font is being used. So if I hold down Control, I can click on this logo, and you then over here we can see it’s Roboto, same thing on the text here. However, you’ll notice that the font weight has changed, so gonna need Roboto medium. Just go back and have another look at this. You’re going to also need, double click to edit in here, bold. Light, so we’re gonna need light, medium, bold. Up here we need regular Roboto, so these are all Roboto, but just using different font weights. Roboto is a font that’s available on Google Fonts, so we’re just gonna load it in from there, so let’s just search for it. There it is, so we’ll just add that. Now, we’ll open up this little box so that we can hit this Customize Link here so we can decide which weights we wanna bring in. And we saw that it was using light. Regular is already pre-checked. It was using medium, and it was using bold. We didn’t see any other font weights and we didn’t see any italic text, so that will do. Now we can go back in the embed tab and we can just copy this link here, and now we can paste that in, right above our style sheet. All right, so now let’s add a little bit of basic CSS and a couple of basic layout divs into our site. The first thing that we’re gonna need to create is some type of a wrapper. If we look back at our design and we’ll just zoom out so we can see it all. Of course, we went through and modified this layer, so that the main content of our site would be encapsulated in this rectangle with a light border around it and would be separated from the main background. So we’re gonna create that wrapper by making a class and naming it Wrapper and applying it to a div in our site. So inside our body, we’ll just type .wrapper, and then hit Tab and that’s gonna create that main wrapper div. We’ll just save that out, and now in our style sheet let’s create a new class, we’ll call it Wrapper. We’re actually gonna give it a width of 100%, and we’re gonna control the width that it shows up on the screen with the max-width property. So we know that our layout is 1440 pixels wide and that means that we don’t want our content to ever get any wider than that 1440 pixel amount. So we’re gonna say max-width equals 1440 pixels, or if we wanna have that as a rem value, and again, I would link to some courses and tutorial materials on benefits of using rem values. And we can divide that number by our base font size which by default is 16 pixels. So if we say 1440 divided by 16 equals 90. So we’ll change that value to 90 rem. And now our central pillar of content will never get any wider than 90 rem, but because we’re also setting the width to be 100%, it also has the ability to flex to 100% of any amount of space smaller than 90 rem in width. Now, we also need to center it, which we’ll do just by adding margin 0 auto, and that is the basic code that drives our wrapper. Now we wanna be able to check on our progress as we go along coding up this site. For that, I recommend the extension Live Server for VsCode or VSCodium. With that installed, all you need to do is select the file that you wanna preview, and then just hit this Go Live button down the bottom. It will spin up a local host server for you, and open it up in your default browser. So now if we open up DevTools, we can see that our wrapper is in here. If we hover over this box model representation of our wrapper, we can see that it’s centered, and we can see that it’s coming at 1440 pixels wide. All right, so now let’s flush this out a little bit more. The first thing that we need to do is a couple of little tweaks to the html and body element. You’ll see there’s a bit of a space above where this wrapper element is appearing. And that’s because by default, on every body element straight into the browser, there’s gonna be an 8 pixel margin. So I’ve selected the body in the inspector here and you can see here we have an 8 pixel margin. So in our CSS, we’re gonna create a body element and we’re gonna set the margin on that to 0. And while we are at it we also wanna make sure that the html and body elements are always taking up 100% of the available height. So we’re gonna create a new style tag in both of those, and setting both of their heights to 100%. Now if we go back to our site and we select our wrapper, you can see that it’s no longer got a space above it anymore. Now let’s actually add in some of the styling that we need. First up let’s set our overall background color which will apply to our body element. So if we get back to Figma we can select that out of frame that we created before and copy this color code. We know that most of the sections in our main content area need to have a background color of white. So that’s the first thing that we are gonna add in and we’re actually gonna use CSS variables to drive our colors. You don’t have to do this but it can be quite handy using CSS variables for colors if you decide that you need to change your later you only need to change them in one place. So first up, let’s define our variables. So we’re gonna add in :root. And now let’s make a new variable, it’s gonna be our main background color for our main content. So we’re gonna give it two dashes and call it –background_color_one. And we’re just going to set that to be white. So now down in our wrapper, let’s add that as our background color. And here we’re gonna say va, put a pair of brackets, add in our two dashes, start typing out our variable name, and VSCodium will auto-complete it for us. And we can select the one we want and end our line. Now, let’s set the background color that’s gonna go all around our content. So if we go back into our Figma design and select the outer frame, let’s copy our color-code here or we can go into Code up here and copy the color code from there instead. Define a new variable, this one we’ll go background_color_two. And then we’re pasting our color, I’m just going to copy this line into the body section. That’s go