---
url: "/hypercrop/batch-cropping.md"
description: "Batch crop and resize images with presets, custom sizes, smart focal points, and export options."
---

# Batch crop and resize images into multiple sizes

> Batch crop and resize images with presets, custom sizes, smart focal points, and export options.

### Video Tutorial: Crop and resize images

This video tutorial is a complete step-by-step guide showing you how to batch crop and resize images from Figma using the HyperCrop plugin.
[Embedded media](https://www.youtube.com/embed/ysRuuEJvvYE)

## Selecting popular size presets

[Video](/assets/videos/hypercrop/crop/selecting-presets.mp4)

HyperCrop comes with dozens of size presets to make it easy for you to batch crop and export your images for popular platforms and devices without having to manually research and enter the dimensions for each one yourself.

You can add (and remove) any of these sizes by scrolling through the list and clicking the **checkbox** next to each item. Checking a size will add it to your **selected sizes** list, and unchecking a size will remove it.

### Popular platforms and device sizes included

You can select from dozens of presets from the categories below:

- Facebook
- Google Ads
- Instagram
- LinkedIn
- Paper
- Phones
- Pinterest
- Screens
- Snapchat
- Tablets
- Twitch
- Twitter (X)
- YouTube.

## Adding custom crop sizes presets

[Video](/assets/videos/hypercrop/crop/custom-sizes.mp4)

You can add (and remove) any of these sizes by scrolling through the list and clicking the **checkbox** next to each item. Checking a size will add it to your **sizes** list, and unchecking a size will remove it.

### Using "Auto" width or height

If you want to specify _either_ a width _or_ height and let HyperCrop automatically figure out what the height or width should be, you can populate either the **Crop Width** _or_ **Crop Height** input and leave the other one blank. The placeholder of the empty input will change to say **Auto** to indicate this. Once you're happy with the fixed width or height, you can click the **Add Custom Crop Size +** button to add it to your available custom crop sizes.

### Deleting a custom crop preset

To remove a custom preset from your available crops list, you can click the **Trash** icon next to a custom crop size to remove it from your **selected sizes** list _and_ delete it entirely from the available crops list.

## Selecting images for batch crop

[Video](/assets/videos/hypercrop/crop/selecting-layers.mp4)

All of the available images to batch crop will appear in the right hand side of the HyperCrop plugin. By clicking on the **checkbox** next to any image in the list, you can tell HyperCrop whether to include or exclude the image from the batch cropping process.

The number of images you select will be multiplied with the number of image sizes you select, giving you the total number of images that will be exported from HyperCrop.

> **Note:** **Images must have export settings to appear in HyperCrop**. To make your images/layers from Figma show up in the HyperCrop plugin, please ensure that you've added at least one export setting to the layer you want to crop, by clicking the **+** icon in the right-hand side column of Figma, under the **Export** heading.

> **Tip:** **Quick selection/de-selection**. To easily deselect (or re-select) all images at once, you can click on the checkbox at the very top of the list next to the **X of XX Images Selected** label.

### Specifying crop focal points

By default, HyperCrop will crop and resize batch images using **Center/Center** image anchoring; this means that the image focal point will always be the direct center of the image.

Sometimes you will want to change this so the focal point is located in a different part of the image, for example **Top/Left** or **Center/Right**.

You can easily do this by moving your mouse over to the image you would like to toggle the focal point for, and clicking on the vertical (↕) and horizintal (↔) **select boxes**, and selecting your desired option for each.

### Enabling smart cropping features

If you don't want to manually specify a focal point using the vertical (↕) and horizintal (↔) select boxes, you can use the **Content Aware** and **Detect Faces** toggles.

You can enable either (or both) of these features by moving your mouse over to the image you would like to enable (or disable) them for, and clicking on the **toggle switch** for each.

#### Content Aware

Enabling the **Content Aware** option tells HyperCrop to use smart cropping models to determine where the important/interesting focal parts are in your image. If your image doesn't have a tricky batch of sizes to crop faces for, then this setting _doesn't_ need to be enabled, as it will take longer to crop your images with it turned on.

#### Detect Faces

Enabling the **Detect Faces** option tells HyperCrop to use facial recognition models to determine where the face(s) are in your image. If your image doesn't contain any faces or doesn't have a tricky batch of sizes to crop faces for, then this setting _doesn't_ need to be enabled, as it will take longer to crop your images with it turned on.

> **Note:** **Browser Support**. Due to browser compatibility issues, the **Detect Faces** feature in HyperCrop _isn't_ supported in **Safari**. Please run the plugin in another browser (like [Chrome](https://www.google.com/intl/en_us/chrome/)) or the [Figma Desktop App](https://www.figma.com/downloads/) instead.

## Configuring batch cropping export settings

[Video](/assets/videos/hypercrop/crop/open-settings.mp4)

Once you've selected your crop sizes, your images and you're happy with their individually configured crop settings, you can get ready to batch crop and export your images.

To open the settings panel, you can click the **Batch Crop** button in the HyperCrop header.

After opening the batch crop settings panel, you can select things like **Image Format** (JPG or PNG), **Image Compression** (to specify the image quality/size) and **Image Fill** (which only applies to non-smart crops).

### Adding a custom filename format

For batch crops, HyperCrop lets you specify a custom filename format that will be applied to all of your exported images. This can be really useful for giving a consistent naming convention or grouping your images into sensible **subfolder** structures.

This field is optional, and if you leave this field empty/blank, it will default to **#{collection}/#{name}/#{width}x#{height}\_#{name}**.

#### Available variables for your filenames

You can **mix and match** _any_ of the variables below into your custom subfolder/filename pattern, including regular text and characters (like underscores or letters/numbers).

- **#{name}** The name of the Figma layer (eg. "My Figma Layer Name")
- **#{collection}** The size preset collection name (eg. "facebook")
- **#{label}** The size preset collection label (eg. "profile")
- **#{width}** The resized image width (eg. "1024")
- **#{height}** The resized image height (eg. "768")

> **Tip:** **Creating Sub Folders**. To create a subfolder, you can add a "**/**" anywhere in your custom filename format. For example **#{collection}-crops/#{width}x#{height}/#{name}** would create a dynamic folder structure like **facebook-crops/1024x768/my_figma_layer_name.jpg** (where the variables get swapped out for each collection, and width/height combo).

## Downloading your batch crop images to your computer

[Video](/assets/videos/hypercrop/crop/batch-crop-download.mp4)

After you configured all of the options and your filename format the way you want them, you can click on the **Crop & Export Images** button to begin the "HyperCrop" batch image cropping/resize process.

Please note, this will go process _all_ of your selected sizes for _every_ image that you've selected, so the more images and sizes you have, the longer this will take.

Once the batch crop process has completed, you'll see a confirmation screen letting you know that your images are ready to download. To download the `.zip` file from Figma to your computer, you can click the **Download your .zip file** button in the HyperCrop plugin.

> **Tip:** **Saving file downloads from Figma** If you're using the Figma **desktop app**, you'll see a prompt appear to download your file. However, if you're using Figma in a **web browser**, your file will automatically be downloaded to your computer by default (usually to the **Downloads** directory on your computer).

### Opening your exported .zip file

After you've downloaded your `.zip` file from Figma to your computer, you can open your file explorer to the directory where it was saved. **Double clicking** on the exported `.zip` file will unzip the images to a folder containing all of the images and subfolders (as per your specified subfolder/filename pattern from the HyperCrop export settings).

## Inserting your batch crop images into your current Figma file

[Video](/assets/videos/hypercrop/crop/batch-crop-insert.mp4)

Alternatively, after you configured all of the options and your filename format the way you want them, you can insert your cropped images directly into Figma by clicking on the **Crop & Insert to Figma** button, which will create a brand new page in your current Figma file and insert all of the cropped image layers onto the page.