How to export high resolution images from Figma?

Ok, buckle up because I'm about to spit some truth about image file types and resolutions and compressions and what's it all got to do with Figma and exporting images.

It won't get too technical because I'm not that knowledgeable but I will try to get to the point in as few sentences as I can, so let's just get into it:

What export file types are supported by Figma? 

At the moment you are able to export as PNG, JPG, SVG or PDF. If you want to use plugins there's really no limitations, you can even export MP4s and GIFs or whatever. But the default editor only supports the four file types.

Now we're going to talk about each one of them, but briefly and right to the point. 

About PNG files

PNG's are the most popular image file type on the internet. They are raster files (which means they are built with individual pixels) and they are uncompressed. That means you get the highest possible export quality (as opposed to JPG files which are compressed).

PNG's also are mostly used when you need to have transparent parts of images, like transparent backgrounds.  

Take this ugly penguin for example (no seriously please take him). It's a PNG file and it has a transparent background.

The Figma file from above the penguin for example does not  have a transparent background and is a JPG file, even though it looks like it's transparent (because the background of my blog is white).

If you drag the actual images in browser over my text you will see that while the penguin keeps the text from its wings (or whatever those are, arms) visible, the JPG above will not do that. You will be able to see the full rectangle:

This way of teaching things is really meta by the way. And if you don't know what meta means, don't worry it's not relevant to this post.

About SVG files

SVG files are vector files. This means they are infinitely scalable and they will look sharp no matter how much you want to upscale them.

While you can export shapes, texts and layers created in Figma as SVG files, the images won't become vectors. And while the SVG will contain the actual image you exported - the image itself will not be scalable. It will still be a raster image (made from pixels).

About PDF files

PDF files are mostly used for printing so they're also supposed to be vectorized, but again - images won't become vectorized. And one thing to keep in mind, if you end up with large PDF files and are not sure how to make them smaller you can start by compressing the images.

Now let's get to the actual point.

How to export high resolution images from Figma?

If you don't like text, you can simply watch the video I made below. It repeats some of the things I mentioned but it's easier to follow:

In short, if you want to export a high resolution image, then your best bet is to export as PNG and export it a few times larger than the designed size. You have the option to make it 1.5x 2x or however many times bigger than initial size you need in the export settings here:

Just do keep in mind that you won't be able to export a quality better than you imported. For example if your imported image is 600px x 400px, even if you output 2400px x 1600px the image will still look blurry and low quality because Figma does not A.I. upscale your images. 

But if you imported an image that's  and you're using it in Figma at 600px x 400px for example - it makes sense to export it 4x the size from the project so that you can end up having a high quality image to use. 

Now the second option - If your exported layers are from tools provided by Figma (for example the illustration I created above) the simplest way is to export as SVG.

You won't have export sizes because you won't need them. The SVG file will be infinitely scalable and high quality. 

To summarize

If you want high quality images exported from Figma, then export 2-3x the initial size and as PNG. If the content exported is not an image simply export as vector files - SVG or PDF. 

Just keep in mind that with images (or with everything in life) you can't get out more than you put in. If your uploaded image in Figma wasn't high resolution in the first place, you won't be able to pull out high resolution images. 

Stay awesome. (if you were awesome in the first place, if not maybe try to be awesome in the future).

June 27, 2023


Related Posts:


Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.