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. 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. 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. We'll get into these settings in a moment, but I'm just going to go through the left hand side as well. 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. Now we've got all of our images in here, you can see that I can select these based on the check boxes. 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. 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. The first thing to know is just to go over the interface. 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. 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 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. To do this, we're going to install a Figma plugin called "HyperCrop". 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |