TinyImage works by detecting the export settings/formats you've set on any layers in your Figma page and allows you to 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.

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 (eg. 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 allows you to 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.

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

Overriding compression quality/size levels per export

In addition to setting the quality level using the slider, TinyImage allows you to 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 on 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 allows you to 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.

Highlighting layers to filter image selection

Another way to select the image(s) you would like to export is by highlighting them on your Figma page; this will automatically filter down your selection in the TinyImage exportable images list. Any highlighted layers that contain export settings will show up in the list, and any layers that haven't been highlighted will be excluded.

This is a great way to quickly make a selection of the layers you know you'd like to export without having to manually look for them in the list of all exportable images.

Refreshing image export settings to image selection

If you highlight a layer (or multiple layers) in Figma to filter down the selection, and one or more of those layers don't have any export settings yet, you can keep the layers selected; then in the Figma properties panel, click on the + icon next to Export to add one or more export settings to your selected layers.

When you're happy with the new export settings on your layer, click the Refresh icon in the TinyImage toolbar to refresh your Figma layers and display the updated export options for your highlighted layers in the TinyImage 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.

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.

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.