Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:12Length:1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Preparing to Begin

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

2.1 Preparing to Begin

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.

Back to the top