How to batch crop and resize images from Figma using HyperCrop

Video Transcript

Today I'm going to be showing you how to batch crop and resize your images from Figma out to multiple different sizes, based on whatever dimensions you need.

To do this, we're going to install a Figma plugin called "HyperCrop". If you haven't already done that, you can go to the top left corner of the Figma app, click on the little Figma icon, and just in the search bar, if you go down to "Community", type in the word "HyperCrop", and if you put that in the search bar you'll see a result pop-up called "HyperCrop Batch Image Resizer", and if you haven't already installed it there'll be a little "Install" button on the right-hand side over here you just click on "Install", and it'll change to look like mine with the little check mark, and once it looks like that, then you're ready to go.

Now I'm just going to jump back into my project, I've just got a bunch of different images here, and I'm going to be using these as an example to show you what HyperCrop can do. If you just right click anywhere on your page, go down to "Plugins", and then go down to "HyperCrop Batch Image Resizer" and click on that, this is going to load up the Figma plugin that we just installed. The first thing to know is just to go over the interface. What we can see on the right hand side here is a list of all of the images in our Figma file that have export settings, and what I mean by that is if I click on any of these images, you can see over in the right hand side under the "Export" column heading, you can see that I've got a JPG export setting applied to this image, and all of my other images also have at least one export setting on them too, and if I were to remove that, so if I remove that export setting and then refresh my layers, you'll see here that I'll get a message saying that I don't have any selected layers which contain export settings; and it's just telling me if I want this image to be exported, I have to add at least one export setting. You can see here now I've only got nine images selected because I've just removed that export setting, but if I just add that back again; just click on the "Plus" icon, and this can be set to anything, it's just to tell HyperCrop that the images that you want to export have some sort of export setting on them, because if you didn't have that, it would basically try and export every single image in your document and that would just be kind of crazy, so that's the way that you can tell HyperCrop which images you want to actually be cropping, it's just by clicking on them and clicking on the little export setting "Plus" button; and if you click refresh in the Figma plugin, that'll make all of the images you've selected pop right up.

Now we've got all of our images in here, you can see that I can select these based on the check boxes. If I want to just target a few of them I can uncheck them, I can use this little title up here to bulk select and unselect them, if you've got a lot of images that can be really helpful, but essentially the whole right hand side here of the HyperCrop Figma plugin is really just an overview of all the images that you're going to be cropping. We'll get into these settings in a moment, but I'm just going to go through the left hand side as well. On the left hand side, that is just dedicated to sizes; if you think of the right hand side as being the images that you're going to crop, the left hand side is dedicated to all of the sizes that you want to crop each of those images to. You can see over here on the left we've got this little "Presets" panel, and if I scroll down you can see that there's quite a lot of presets in here, we've got a lot of popular social networks like: YouTube, Twitter, Twitch, we've got Tablets, we've got Snapchat, Screens, Pinterest, Phones, Paper, LinkedIn, Instagram, Google Ads and Facebook; these are all baked into the Figma plugin to give you really quick presets for very popular sizes and very popular platforms. For example, if I wanted to add this little Facebook "Carousel Ad" size and the Facebook "Profile" size, I can just click on those check boxes and you can see here it's actually just populated those into this column; this column in the middle of the two left and right sides, this column here is going to show you all of the sizes that HyperCrop is going to batch export your images to.

If I just uncheck those again, you can see here when it's empty it's telling us that we need to add our first crop size either from the presets on the left as we just did, or we also have the option to create a new custom size using the inputs above; if you see in the top left header of the HyperCrop Figma plugin, here we've got two text fields; we've got a "Crop Width" and a "Crop Height" text field. If I wanted to add a custom size that doesn't fit into any of these presets, I can do that easily just by typing in values up here, so if I type in "400" and then I can do "400" again, and then click on "Add Custom Crop Size", that now adds a custom crop size to my presets panel and also automatically adds it to my output sizes. If I uncheck that, that'll remove it, if I check it that'll leave it in there, and I can also remove it from my list entirely if I don't want it anymore; I can just click on the little "Trashcan" icon and that will remove it.

The other thing I can do is add auto sizes. If I wanted to have "400" as the crop width, if I don't populate the crop height, you can see here it says "Auto", if I click on that, it's saying it's going to do "400" width by "Automatic" height, so whatever the size of the images are, it's going to automatically determine what the height should be, but it's always going to crop the width to be "400", so I can do that in reverse too; if I just fill out the height; if I do "460" height and then click on "Add Custom Crop Size" without any width, the same thing happens; it's going to give me the automatic value to the opposite one that I that I put in there. I can also add just both of the sizes of course, as I did before, and that will that will work as well. Now we've got a few different custom sizes, so you can uncheck all of these and check them and combine them and do whatever you want; you can add as many sizes as you like. I'm just going to leave a couple of those checked for now, I might also add something from Facebook; if I add a "Carousel Ad" and then if I scroll down a bit, maybe I also want something from Twitter; maybe I want to have a Twitter "Profile Picture", and maybe I also want to have a "Website Card" from Twitter. Now I've just checked a few different options, so these are the sizes that are going to be output in this little column here, and if I go back to my right hand side, as I said before, this is going to select all of the images that we now want to resize to those sizes, so it's going to crop and resize multiple images to multiple sizes at once. This isn't kind of like Photoshop where you set up batch actions to do a whole bunch of images to one size, this does multiples, so it does multiple images to multiple sizes at the same time.

To just give you an idea of what that looks like, I'll just uncheck all of the images and if I select a few; if I select the little ice cream image, I'll select the the guy with sunglasses, and maybe just this kind of backdrop scenic sort of looking photo. Now you can see up here as I check those, the number in the top right is incrementing; it's multiplying the number of images by the number of sizes, and just to give you a sense of what that looks like I'm just going to do an example with these. You can see here the images have these little options on them, so I can determine where the crop anchor is going to happen, I can do a top left anchor so it'll crop it and make sure it's keeping the top left in check; I can also just center crop that; you can play around with those. The other cool thing is we have these other options down here, so for each image there's also a checkbox called "Content Aware", and content aware will essentially use a smart cropping algorithm to determine where the most interesting parts of the images are and it'll crop it to that area. Once you've enabled content aware, there's also a secondary option to detect faces; in this instance I do have a face in my photo, so I'm going to check that option, and again, that's going to add a secondary algorithm to determine where the faces are in that photo, and it's going to do some smart cropping to make sure the face is always prioritized. For this particular image I'm not going to turn any content aware on because it's a very simple center sort of crop, one but this one I'll add content aware to as well, just so it has a nice little cropping background and I don't need faces, because it doesn't have any people in it.

Now that we've set all that up, all we need to do is click on this little "Batch Crop" button in the top right hand corner. When I open that up there's only a few options to choose from; we can either export JPGs, or PNGs if you need transparency; I'm just going to use JPGs. We can choose what the image quality is going to be like; by default it's just set to 80. I can obviously drag that up and down; in this case I might do it to 90. Then there's one last option for image fills, which means if you select "Contain", it's going to not cut off any of the image, it'll just put a black background basically wherever the crop doesn't fit; but in my case I'm going to use "Cover", which just makes sure the image always fills up the the size.

Then down here, we've got the "File Name Format", and by default this will automatically export into folders, and it's going to do the folder name, so it might be "Facebook" or "Custom" or "Instagram"; whatever the collection is, it'll do that as the parent folder, and then it will put the file name as well as the width and height of the image into the file name. You can see an example of what that looks like down here, but you can completely customize that, too. If you wanted to add a folder, let's say "collection" and then you add a slash to make a subfolder, you could then do the "name"; then you could have the name and then do another slash and then that would make another subfolder, and then you could do the "width" and "height". You could do "width" and then "x" and then "height", and that would basically give you that custom folder structure, but you can you can name that however you want; you can put normal text in there, so you could do "crop" as a prefix, and you can really customize that to whatever you need. For today, I'm just going to leave it as the default, so we'll see what that looks like in a second, but just be mindful that you can customize that as you need to.

At last, we can click on the button "Crop and Export Images", so I'm going to click on that now, and this is basically going to go through all of the images that we selected. We selected three images, and we've selected five different sizes, so it's going to resize each of those images into five different sizes, and you can see it down here that it's processing them, going through each of those images, cropping them, resizing them and you can see here it's detecting faces for the last image that we selected, and it's telling us that it's smart cropping and resizing that one as well. We're almost done, it's just doing the last couple of images now, and once it's finished it's going to give us a prompt to save our zip file, so I'm just going to save that to my desktop, click "Save", and if we unzip that, you can see here we've got a folder structure that we expected, and if I open that up you can see that I've got my cropped images resized. Those are the those are the ones we did for Facebook, we only selected one size from Facebook, the "Carousel Ad", if we go to Twitter, we selected two different sizes, we did "Profile" and "Website Card" for each, so that's the profile and website card, and then if we go back to "Custom", these are the ones that I set up myself; it was "400" by "auto", that was "auto" by "460", and then we've got "400" by "auto", "auto" by "460"; so, those have been cropped based on my custom sizes, too. That's an example of what a batch crop process looks like. I'm just going to restart the Figma plugin, so if you close off the Figma plugin and on the right hand side under the "Plugin" heading, if you just click on the "HyperCrop" icon, that will reopen the Figma plugin really quickly, so you don't have to right click and go into all that stuff.

I just want to show you a few other things that we can do as well. You'll notice over here we've got this secondary button called "Crop Manually", and I didn't go into that before, but I can show you what that looks like now. If I just click on "Crop Manually" to any of my images, what this does is it brings up a manual cropping interface, and you can see here that it's got all of the controls that you'd expect. I can move that around, I can change the aspect ratio really easily, I can change it to a portrait aspect ratio, I can change it to landscape, I can change it to square, or I can just make it freeform. I can also zoom in and out with my mouse my scroll wheel, that will zoom in and out really easily down here. I can rotate the image, if I need to rotate it, I can do that, I can also reset the rotation just by clicking on this little icon here that rotates it. I can flip it, if I need to flip the image vertically, I can also rotate it if I needed to do that, and I can reset the whole process just by clicking on this little "Undo" button up here; that just brings it all back to the start. That's kind of what that looks like, and this is really handy if you just need to crop something really quickly, or if you need to have complete control over what the crop looks like, you can use this manual cropping tool really easily and get the exact crop to the exact dimensions that you want; you can see the dimensions down here, and the second thing you can do is also set up a resize; if you do need to resize this, you can just do that by typing in a number, so I can do "800" wide and it will automatically fill in the height for me, or I can also unconstrain that; if I just click on the little "Padlock", I can change this to be whatever I want, and that will also update it to be a forced crop size, but in this case I'll just leave it to "800" by "1200" and click the check mark, and that basically resizes it for me. You can see here it's now at 63 percent of what it originally was, and now the crop has been set to that that bounds, so that's what that looks like, and once you're happy with the crop you can save it just by clicking on the "Crop and Download" button in the top right here. If I click on that, that will save the image for me, and I can just save that to my desktop, it's just a JPG file because it's just one file, and if I open that up, that's the crop that we just saved out from the Figma plugin. So, that's just a really nice way of getting a high precision manual crop if you really need to just do one-off sizes, or if you just really need to have full control over what that crop looks like.

That's essentially what we can do with the HyperCrop Figma plugin, and as you'd expect, we can roll this out to multiple images; if we wanted to have many more sizes to to all these images, we can totally do that; you can just keep adding as many as you want and and pile them up. Of course, it's going to take longer the more images you add and the more sizes you add, but if you just leave it, it will compress them all and resize them all for you. I can show you what that looks like now; if I go through these and just update the positioning a little bit and make sure that set to to what we need; I'm just going to turn on facial detection for the ones that need it, all the ones with people in them, and for the other ones I can just just leave them. We can set these to be different crops, I'll do that to the left this one, I'll just turn "content aware" off for now. This is basically going to crop and resize our images from Figma to 180 different images, so I'm just going to click that "Batch Crop" button now, and we'll wait for it to go through them all and finish, and then I can open it up for you and show you what that looks like as an output. I might just fast forward this for you at home watching this, so you don't have to go through the whole process, but once it's done I'll open up the folder and we can go through all the images together. Okay, it's just finished zipping up all of our files that it's just finished cropping; I'm just going to click "Save" to my desktop again, and it's just worth noting that these are really high resolution images as well, these are 4000 by 2500 pixels, so these are huge; the images that you're working with may not be as big, but just be mindful that the bigger the images are and the bigger the crops are, that's going to take a lot longer than smaller ones; just something to be mindful of.

I'm just going to unzip this now. You can see here that we've got a 32 megabyte zip file; I'm going to unzip it and here's all of our folders. If you remember, these are all the crops that we had, so I can go through and I can open those up, and you can see all of the images that we added have been exported, and they're looking really good; all the custom sizes we added, we did some Twitter ones, these are our Twitter images also looking really cool, and if we go back, we had a whole bunch of Facebook ones, too; you can see here this is a huge folder of images, and all of our Facebook crops have been included. You can see here with the facial detection, it's picking up the faces, making sure those faces get included in all the crops. Just a whole bunch of crops into different sizes, but those were all automatic and we didn't have to do anything, we just hit the "Batch Crop" button and it just ripped through all of them for us. I won't go through all of the folders, but you can see here they've just been exported to all of the different sizes that we we asked for, so all the files are there and it's just super easy, super automatic, and you're basically putting your cropping and resizing on autopilot.

That's that's all I'm going to show you today; I just wanted to run through a few different use cases, show you all the features, explain how the HyperCrop Figma plugin works, and just go through each detail to make sure that you're across what you can do, how it works, and what it looks like when you export your images. Thank you for tuning in, and I hope it's been a useful tutorial for you if you've been wondering how to batch crop and resize your images from Figma; this is the the fastest way to do it if you don't want to manually crop and resize them individually, or use some third-party tool like Photoshop and do it one by one, then this is the quickest way to do it from Figma. I hope you enjoyed this video, and we'll be back soon with more Figma tutorials just like this one.