FREELessons:12Length:1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Preparing Images

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.

2.2 Preparing Images

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.

Back to the top