Resizing Images Figma

Web Development

Updated Jan 19th, 2021

Menu > File > Place (Ctrl +Shift + k)

Select the image you want to crop and click the crop icon in the middle of the top navbar there’s a crop icon.

Change the dimensions by clicking and dragging to get the desired crop result you’re looking for.

Note: On the right hand side you can unlink and type out your desired dimensions but this autocrops so may not give you the desired look. There may be a way to click and drag the image around to easily change what’s being cropped but I didn’t quickly see a way to do that. It’s probably worth the time to figure out how to do this.

To export: Select the images you would like to export then click the plus sign next to export in the right sidebar. Change output to jpg. Then click export (Ctrl + Shift + e). This will download your images as it folder and which you can extract.

You can add a suffix on export, This may be helpful for certain use cases.

I was excited to see it didn’t change the name on export, which would be great for resizing images, but figma actually does add a number suffix. So if you’re replacing images you’ll need to rename the exported files. This would be a good place for your batch file rename strategy to quickly remove the automatically generated suffix.