Compressing your Figma image exports

How to select export settings and compress Figma image exports with TinyImage.

TinyImage works by detecting the export settings/formats you've set on any layers in your Figma page and lets you export them as compressed images using the TinyImage plugin.

For a comprehensive guide about the details of Figma export settings and how they work, please see the official guide to exports in Figma in the Figma help docs.

Any layers you want to compress require at least one export setting. If a layer doesn't contain any export settings, TinyImage won't know that you'd like to compress and export it, and it won't show up in the plugin's exportable images list.

Adding and refreshing export settings ​

To get started with exporting compressed images from Figma, you'll first need to ensure you've set some image export settings on any layers you would like to compress.

Adding export settings to Figma layers ​

To add export settings to a layer (or multiple layers), select the layer(s) in Figma, then in the Figma properties panel, click on the + icon next to Export. Clicking the + more than once will allow you to add as many export settings to that layer as you like. This means you can export a single layer to multiple formats and sizes at once (for example, SVG, JPG @1x, JPG @2x, PDF etc).

Refreshing Figma layers after updating their export settings ​

If you've already added exports settings to a layer, but would like to add or remove some while the TinyImage plugin is already running, you can do so as per the previous step; then, when you're happy with the new export settings on your layer, clicking the Refresh icon in the TinyImage toolbar will refresh your Figma layers and display the updated export options in the TinyImage exportable images list.

Setting compression quality percentage or size target ​

TinyImage lets you specify the compression percentage of quality from 1%-100%, or setting a maximum file size target (in kilobytes) for your image exports. Setting a lower number will result in smaller filesizes, but also lower image quality images. Setting a higher number will result in larger filesizes, but also higher quality images.

  • 0%-50% Low Quality (72dpi for PDFs)
  • 50%-75% Good Quality (150dpi for PDFs)
  • 75%-100% Best Quality (300dpi for PDFs)

Adjusting the compression quality percentage level ​

You can set the quality level for all of your image exports from 1%-100% by using the compression slider in the TinyImage toolbar. Clicking/holding and dragging the slider will allow you to specify your desired quality level. This setting will be applied to all of your TinyImage exports.

Setting a maximum file size (kb) compression target ​

You can also set a maximum target file size limit (in kilobytes), by enabling the Size Target toggle, and then entering a kilobyte value in the size input box. This will tell TinyImage to try and get each of your images underneath that maximum file size.

Note, this is often slower than using the quality percentage slider, as each image has to be progressively compressed to reach the desired limit.

Prefer setting your TinyImage max file size via Figma instead of the UI? You can use Figma’s Export settings suffix on any exportable layer. Add an underscore followed by a number ending in kb (for example, _250kb), and TinyImage will use that value as the max size for that layer. Valid suffix examples: _250kb, @2x_500kb, @1x_300kb

Size targets don't apply to PDF or GIF exports. Note that using the file size target compression option doesn't have an effect on PDF or GIF exports from TinyImage; it will only apply to JPG, PNG, SVG, AVIF and WebP images.

Overriding compression quality/size levels per export ​

In addition to setting the quality level using the slider, TinyImage lets you specify different quality/size levels per image format, which overrides the global value that is being set by the quality slider or the target size input in the plugin header.

To specify the quality for a certain image format, click on the quality number input next to the image you would like to update the quality for. You can enter any number between 1%-100%, and this number will become the quality setting that your images is exported at.

If you're targeting a maximum file size, you can specify an override by clicking the KB number input next to the image you would like to update the target size for. You can enter any number between 1-9999 (KB), and this number will become the target file size setting that your images is exported at.

Selecting images to compress ​

Once you've added export settings to the layers you would like to compress, you'll see them show up in the TinyImage exportable images list. However, you don't need to export every single image on your Figma page (if you don't want to) at the same time. TinyImage lets you select (and deselect) the exportable images you would like to compress by using checkboxes.

Checking and unchecking exportable images ​

To select (or deselect) an image for export, you can click on the checkbox next to the image thumbnail in the TinyImage exportable images list. Unchecking an image will exclude it from being compressed and exported, and conversely, checking it will include it in the export.

Quickly selecting/deselecting all layers. To very quickly select or deselect all of your images in the list at the same time, you can click on the checkbox in the TinyImage toolbar, above the list of exportable images.

Loading only selected layers when TinyImage opens ​

To avoid scanning a large page when TinyImage starts, highlight the exportable layer(s) you need in Figma before opening the plugin. TinyImage will initially load only those selected layers that already contain export settings.

Changing the Figma selection while TinyImage is already open can filter the layers that are already loaded, but it does not trigger another scan or load new layers in the background. If the new selection contains layers outside the initial loaded set, TinyImage will prompt you to click Refresh All Exportable Layers. This scans every exportable layer on the current page, including newly added layers and export settings.

If the current selection still has no exportable match after that refresh, TinyImage keeps the full page list visible so you can continue working. Changing the selection or switching pages restores the normal selection filtering behaviour.

Refreshing image export settings to image selection ​

If one or more selected layers don't have export settings yet, use the Figma properties panel to click the + icon next to Export and add the settings you need.

When you're happy with the new export settings, click the Refresh icon in the TinyImage toolbar. TinyImage will rescan the current page and display the updated export options in the exportable images list.

Exporting your compressed images ​

Once you've selected the exportable images you would like to compress, you can click the Export in the TinyImage toolbar; this will begin the process of compressing your selected images one by one. You'll see a progress indicator showing which image is currently being compressed, along with file size savings after each compression has finished. Please wait for all of the images to finish compressing; the more the images you have, and the larger each of them are, the longer they will take.

PNG/PDF compression speed. Note that compressing PNG and PDF exports can take longer than JPG and SVG exports, especially if they're very detailed or have large dimensions. TinyImage will warn you if an image is too large to compress.

Saving the exported zip file ​

After all of the images have been processed, you'll see a confirmation notification letting you know that your images have been compressed, and the your .zip file download will automatically be triggered.

Single Image Exports If you're only exporting a single compressed image, TinyImage won't zip that image into a .zip file; you'll be able to save the single image file to your computer, as is.

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 the exported zip file ​

After the .zip file has been saved 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 contents and let you to use all of your compressed images.