Sign in Subscribe
How to

Using Figma to resize the images

Using Figma to resize the images

Figma is a design software that is specifically built for web designers and mobile app designers.

So, Figma comes with a lot of features that make the life of web designers easy.

Having said that, if you are a website owner with no design experience, you can still use Figma for resizing and compressing images because:  

  1. It is extremely easy and fast to use
  2. It is free and reliable
  3. It allows to bulk-resize images

And here is how to use Figma for resizing images.

Come on try it out with me.

Step A: Open up figma.com, register for a free account, and log in

Step B: Create a new design file or open an existing one

Once you log in, click on "New design file".

This will now open up an empty design space and inside that empty space, just drop the image that you want to resize using your computer's file browser.

0:00
/

Once you drop the image, if it is big, it will occupy the entire space.

You might need to zoom out a little bit by using the keyboard shortcut CTRL - on Windows or CMD - on MacOS

If you want to zoom in, you can use the keyboard shortcut CTRL + on Windows or CMD + on MacOS.

Step C: Resizing the image

Once you put the picture in the design space, make sure it is selected.

0:00
/

When the image is selected, on the right-hand side of the Figma interface, you'll see the current dimensions of the image.

You can easily change these dimensions to resize the image.

But before that, just make sure that the "Constrain Proportions" icon is active. This will help us maintain the aspect ratio of the image.

Then, change the "w" (width) value of the image to 1000px.

Your image is now resized.

Now because the "Constrain Proportions" icon is active, the height will get adjusted automatically to maintain the aspect ratio.

So, you don't have to worry about the image being squished or distorted.

Step D: Exporting the resized image

Now that we have resized the image, the final step is to export the image outside of Figma to compress it.

0:00
/

To export the resized image, first, we need to select it.

When you select the image, on the bottom-right corner of the Figma interface, you'll see a section called "Export".

To export the image, first, click on the Plus icon (+) icon located in the "Export" section.

This will open up the export options.

Next, for the image format, you can pick:

  1. PNG
  2. SVG
  3. JPG
  4. PDF

I picked JPG because I am exporting a photograph. For photographs, the JPG format gives us the best-reduced file size.

If I am exporting an illustration, then I would use PNG or SVG for the best compression quality.

If I am exporting a screenshot, then I would use PNG.

Anyway, after selecting the image format, just click on the "Export [filename]" button, and voila, the image is now exported.

That is exactly how you resize images using Figma.

The conclusion

Our job is not done yet.

Although we have exported the image, we didn't compress it yet.

To compress the image, we have two options:

  1. Tiny image Compressor plugin for Figma (Premium)
  2. Tinypng.com

Figma plugins are a bit sluggish sometimes.

So, I usually use Tinypng.com for image compression.