# Using TinyImage

Compressing your image exports
Downsizing your Figma layer fills
- Using the Downsizer feature to optimise image fills on your page
Creating animated GIFs from layers
Merging parent frames into a PDF
Configuring TinyImage settings

# Compressing your image exports

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 (opens new window) 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 (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.

Size targets don't apply to PDF or GIF exports

Please 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 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.

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.

# 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 Compress Images 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

Please 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.

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).

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.

# 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.

# Downsizing your Figma layer fills

TinyImage includes a Downsizer feature which allows you to automatically resize (and lightly compress) any Figma image fills on your layers to their actual layer size. This is useful if you've originally imported high resolution images to your Figma file, but then shrunk the layer dimensions down to be much smaller (with the original large image file still being used).

One common case of this would be adding a large image from Unsplash (or another stock photo site/plugin), the resizing that layer to be used as a much smaller "card" or "avatar" image. This can cause the performance of your Figma file to slow down; so using something like this downsizer feature will help save file size and improve page performance in your Figma file.

# Using the Downsizer feature to optimise image fills on your page

To get started with downsizing your Figma fills, you can click on the Downsizer button in the TinyImage header. If you didn't have any layers selected when opening the downsizer feature, it will automatically scan every layer on the current page in your Figma file for any that contain image fills.

Selecting certain layers to load

If you're running the downsizer feature in a Figma page that contains many images, it may take a while to load. You can ease this load time by optionally pre-selecting the layers you'd like to search for image fills to downsize before clicking on the Downsizer button, this will ensure the plugin only loads fills from any layers and child layers from the Figma layers you've selected.

# Selecting the image fills to downsize

Once the image fills have loaded, you can select which you would like to downsize by checking/unchecking them in the list. You can also quickly narrow down the images included in the list by clicking on them in your Figma page. If you're unsure which fill relates to which layer, you can click on the Image icon button in the list, which will instantly zoom and scroll to that layer on your Figma page.

# Downsize your fills

When you're happy with your fill selection, you can toggle the resolution that you would like your Figma image fills to be downsized to; by default this is set to @2x, which means your image fills will be proportionally downsized to be exactly twice the size of the Figma layer that they're being used in. You can toggle this down to @1x, which will resize the image fills to be exactly the same size as their Figma layer, but won't be as sharp as the @2x option.

When you're ready, click on the Downsize Figma Fills button to start the downsize process. TinyImage will automatically detect if an image needs to be downscaled or not; any that require downsizing will be resized (and lightly compressed), then automatically replaced in your Figma layers. Once every image has been processed, you'll be able to see the total amount of size you've saved in your Figma file.

Undoing image downsizing in Figma

If you've used the Downsizer function accidentally, or selected some image fills by mistake, you can use the normal Undo function in Figma to rollback the image fill updates to your original image fills. Alternatively, if you need to go further back, you can use the File -> Show Version History in Figma to roll-back your file to a previous version.

# Creating animated GIFs from layers

TinyImage includes a Create GIF feature which allows you to create and export animated GIF files from any selected Figma layers.

# Selecting and refreshing Figma layers

The GIF feature in TinyImage works by taking the selection of layers that you highlight in your Figma page, and using each one as an individual "frame" for your animated GIF.

# Selecting layers to use as frames for your GIF

To get started creating a GIF, you can click on the Create GIF button in the TinyImage header. If you don't have any Figma layers highlighted already, you'll see a prompt asking you to to select some layers on your page to use as the "frames" for your animated GIF. Once you've selected some layers on your page, you can click the Use Selected Layers button, which will load your selected layers into a preview.

Pre-selecting layers

To avoid clicking the Use Selected Layers button, you can also highlight layers on your Figma page first, before clicking the Create GIF button, and those layers will automatically be loaded as the frames for your GIF.

# Refreshing the selected layers

If you would like to change the layers that are being used as "frames" for your GIF after you've already loaded some, you can make a new selection of any Figma layers by highlighting them on your page, then clicking the Refresh button next to the Selected Layers label in the "Create a GIF" toolbar. This will load the selected layers as new frames in the GIF preview.

# Updating the order of your frames

There are a number of different ways to sort the order of your frames in your animated GIF:

# Sort frames by Custom Order

You can manually sort the order of your frames using drag and drop, by clicking/holding your mouse on any thumbnail image, and dragging it left or right to shift its order in your GIF, then dropping it to confirm that order. This custom ordering will be saved if you want to switch between ordering options, so you can get it back by clicking the Sort frames by Custom Order option in the sorting select box.

# Sort frames by Figma Layer Order

Selecting the Sort frames by Figma Layer Order option will automatically sort your the order of your frames to match their order in your Figma layers.

# Sort frames visually by Columns

Selecting the Sort frames visually by Columns option will automatically sort your the order of your frames to match their visual positioning order by columns in your Figma design.

# Sort frames visually by Rows

Selecting the Sort frames visually by Rows option will automatically sort your the order of your frames to match their visual positioning order by rows in your Figma design.

# Sort frames visually by Figma Layer Name

Selecting the Sort frames by Figma Layer Name option will automatically sort your the order of your frames to match their alphabetical order according to their Figma layer names.

# Adjusting the GIF speed and playback options

# Setting a delay speed for all frames

You can control the playback speed of your GIF by setting a frame delay to each of your frames using the delay slider. Clicking/holding and dragging the delay slider will allow you to specify your desired frame delay timing (in milliseconds). This setting will be applied to all of the frames in your animated GIF. The playback speed in your GIF preview will update in real-time as you adjust this value.

# Overriding delay speed per frame

In addition to setting the frame delay using the slider, you can also specify different delays per frame, which overrides the value that is being set by the delay slider. To specify the delay for a certain frame, click on the delay number input underneath the desired frame's thumbnail image image; you can enter any number between 1-9999, which will become the new delay (in milliseconds) for that specific frame in your GIF.

# Setting the play count

You can specify the number of times your GIF should play through from the first frame to the last frame by using the playback input number field. Setting this option requires the Infinite toggle to be disabled, then you can input a number, which will become the amount of times your exported GIF will play through (and then freeze on the final frame after that number of play throughs).

Infinitely Looping your GIF

To ensure your GIF plays on repeat forever, you can enable the Infnite setting in the GIF export options. Please note that this setting is enabled by default.

# Controlling GIF preview playback

While previewing your GIF, you can use these buttons to help control the playback:

The play and pause control buttons allow you to instantly pause/resume playback of the GIF preview.

The previous and next control buttons allow you to shift the current frame in the GIF preview backwards or forwards by one frame. Please note that the preview must be paused in order to use the previous and next control buttons.

The restart control button allows you to instantly restart the GIF preview frame, setting the "current frame" back to the first frame.

# Setting GIF export options

The export settings for your GIF can be configured using the following options:

# Setting the image dimensions

By default, the dimensions of your image are set to the first frame's image width/height, but you can override these values to be whatever you like by updating the width and height input number fields with the size of your choice.

# Scaling the image size

To easily export your image at a different scale of the selected size (eg. @2x, @0.5x etc), you can use the scale select box to choose a scaling option. This will ensure that the GIF is exported at the scaled size (shown next to the scaling select box).

# Selecting an image fit option

Depending on if you want the images in your frames to take up the entire size of the frame, or to be shrunk down to fit the frame size, you can choose between the Cover Images and Contain Images (which is the default option) options in the image fit select box.

# Setting the background color

If you're using transparent images or just using the contain image fit (which may leave some gaps around your images), you can specify the solid background colour of your GIF by setting a HEX color (opens new window) value (starting with a #) in the background colour input field.

Transparent backgrounds

If you're exporting a GIF with transparent PNG frames, and don't want a solid background, you can enable the Transparent Background toggle. If you're not exporting transparent frames, there's no need to use this setting.

# Setting the GIF compression/quality

You can set the quality level for your GIF exports from 1-100 by using the compression slider. Clicking/holding and dragging the slider will allow you to specify your desired quality level.

# Using image dithering

If you would like to specify the dithering to render your GIF with, you can select from some dithering algorithms (opens new window) that are included in the Image Dithering select box.

# Exporting the GIF file

Once you're happy with your animated GIF preview, you can click the Export GIF button in the toolbar; this will begin the process of adding your GIF frames one by one. You'll see a progress indicator showing which frame is currently being processed, followed by a progress indicator showing the progress of rendering your final GIF file.

GIF Export Speed

Please note that exporting GIF files with dozens (or hundreds) of frames, especially if they are larger dimensions will take a bit longer, please wait for the frames to finish processing.

# Exporting to a WebM video or animated WebP image

You can optionally export your animation to a .webm video or animated .webp image file (instead of a GIF) by clicking on the dropdown box and choosing the WebM or WebP option, then clicking the Export button.

# Exporting to a MP4 video

You can optionally export your animation to a .mp4 video by clicking on the dropdown box and choosing the MP4 option, then clicking the Export button.

# Saving the exported GIF file

After all of the frames in your GIF have been processed, you'll see a confirmation notification letting you know that your GIF has been rendered, and your .gif file download will automatically be triggered.

File downloads from Figma

# Merging parent frames into a PDF

TinyImage includes a Create PDF feature which allows you to merge and export any parent frames from Figma into a compressed PDF file.

# Selecting and refreshing Figma frames

# Opening the PDF feature with parent frames

To get started merging parent frames to a PDF, you can click the Create PDF button in the TinyImage toolbar. This will open up a list that displays all of the parent frames currently on your Figma page.

If you don't have any parent frames on your page, you'll see a prompt letting you know; if you add some parent frames to the page, and then click the Refresh Parent Frames button, the plugin will refresh those new layers and load them into the list of available frames.

Parent frames required

To export a merged PDF, your Figma page must contain at least one "Parent Frame". This means, any "frames" that are located directly underneath your page.

# Refreshing the parent frames for your PDF

If you add, remove or change any of the parent frames on your Figma page while the Create PDF feature is already open in TinyImage, you can click on the Refresh button in the toolbar to refresh all of the parent frames from your Figma page into the available frames list.

# Reordering PDF frames

There are a number of different ways to sort the order of your frames in your merged PDF:

# Sort frames by Custom Order

You can manually sort the order of your frames using drag and drop, by clicking/holding your mouse on any thumbnail image, and dragging it up or down to shift its order in your PDF, then dropping it to confirm that order. This custom ordering will be saved if you want to switch between ordering options, so you can get it back by clicking the Sort frames by Custom Order option in the sorting select box.

# Sort frames by Figma Layer Order

Selecting the Sort frames by Figma Layer Order option will automatically sort your the order of your frames to match their order in your Figma layers.

# Sort frames visually by Columns

Selecting the Sort frames visually by Columns option will automatically sort your the order of your frames to match their visual positioning order by columns in your Figma design.

# Sort frames visually by Rows

Selecting the Sort frames visually by Rows option will automatically sort your the order of your frames to match their visual positioning order by rows in your Figma design.

# Sort frames visually by Figma Layer Name

Selecting the Sort frames by Figma Layer Name option will automatically sort your the order of your frames to match their alphabetical order according to their Figma layer names.

# Selecting frames to merge to PDF

# Setting PDF export options

There are a few options you can specify when exporting merged PDF files. These are related to the compression/quality level, password protection and the color profile of your exported PDF.

# Choosing PDF quality

You can set the quality level for your PDF export from 72dpi-300dpi by using the compression slider. Clicking/holding and dragging the slider will allow you to specify your desired quality level.

# Setting a password for your merged PDF

If you would like your exported merged PDF file to require a password before it can be opened, you can enable the Require a password to open PDFs setting, then set your own password in the password input field. Ensure that you give this password to anyone you're sending the exported merged PDF file to, or they won't be able to open the file to view its contents.

# Choosing a color profile for your merged PDF

Depending on where your exported PDFs are going to be used, you may need to change the colour profile setting, by choosing an option from the PDF Color Profile select box.

RGB (Default/For Screens)
CMYK (For Print)
Greyscale (Black & White)

Gradient fills in PDF exports

If you're exporting layers to PDF that contain gradient fills inside any vector paths, you can enable the Vector Path Gradients setting to ensure the gradient is rendered as expected. If you don't need this option, there's no need to enable it.

# Exporting the merged PDF

Once you're happy with your PDF settings and frame selection/order, you can click the Export PDF button in the toolbar; this will begin the process of merging and compressing your PDF pages one by one. You'll see a progress indicator showing you that the PDF is being merged and compressed.

PDF compression speed

Compressing PDF exports can take a bit longer than JPG and SVG exports, especially if they're very detailed or contain lots of images.

# Saving the exported merged PDF file

After all of the pages in your PDF have been merged and compressed, you'll see a confirmation notification letting you know that your PDF has been merged, and your .pdf file download will automatically be triggered.

File downloads from Figma

# Configuring TinyImage settings

TinyImage has a settings panel that allows you to further customise your compressed image exports from the plugin. These include features like converting image formats, customising the filename/folder structure for your images and specifying additional options for PDF files. You can open the settings panel by clicking the Settings icon button in the TinyImage toolbar.

# Converting images to other image formats

If you need to convert your images to formats that Figma doesn't support exporting to natively, you can select an Image Conversion option to export converted images to either Google's WebP (opens new window) format, the AVIF (opens new window) (AV1) format or the Progressive JPEG (opens new window) format.

Adding PNG and JPG fallbacks for WebP or AVIF conversions

By default, converting your JPG and PNG images to WebP or AVIF will automatically substitute the original formats in your export. If you'd like to convert your images to WebP or AVIF and also include compressed versions of the original JPG and PNG formats in your export, you can enable the Include PNG/JPG fallbacks toggle.

# Setting custom filename/subfolder naming format

TinyImage lets you specify a custom filename format that will be applied to all of your exported images. This can be really useful for giving a consistent naming convention to all of your exports.

The Filename Format field is optional, and if you leave this field empty/blank, it will default to #{name}#{suffix}.

# Available variables for your filenames

You can mix and match any of the variables below into your custom subfolder/filename pattern, including regular text and characters (like underscores or letters/numbers).

#{name} The name of the Figma layer (eg. "My Figma Layer Name")
#{scale} The scale from the export setting (eg. "2x")
#{width} The width of the image (eg. "1024")
#{height} The layer height (eg. "768")
#{suffix} The suffix from the export setting (eg. "_example")
#{date} Timestamp at the time of export (eg. "28-Sep-2020")

Creating Sub Folders

To create a subfolder, you can add a "/" anywhere in your custom filename format. For example #{date}/#{width}x#{height}/#{name} would create a dynamic folder structure like 28-Sep-2020/1024x768/my_figma_layer_name.jpg (where the variables get swapped out for the real values related to each exported image).

# Setting custom ICC color profile for PNG exports

Depending on how your exported PNGs are going to be used, you may need to change the colour profile setting, which you can do by choosing an option from the PNG Color Profile select box:

Display P3 (Max Compatibility)
Display P3 (Max Correctness)
DCI-P3
Adobe RGB (1998)
Apple RGB
ColorMatch RGB
Wide Gamut RGB
CMYK
sRGB
sGrey
ProPhoto RGB

Toggling the ICC Version

By default, ICC Version 4 (v4) is selected, but if you need your color profiles to be ICC Version 2 (v2) instead, you can uncheck the Use ICC Version 4 toggle.

# Setting options for PDF exports

# Setting a password for your PDF exports

If you would like your exported PDF files to require a password before they can be opened, you can enable the Require a password to open PDFs setting, then set your own password in the password input field. Ensure that you give this password to anyone you're sending your exported PDF files to, or they won't be able to open the file to view its contents.

# Toggle black borders around links in PDF exports

By default, TinyImage automatically removes the black outlines around links that normal PDF exports from Figma includes. If you would like to override this behavior and include a 1px black border around links inside your PDF exports, you can enable the Outline Links toggle (which is turned off by default).

# Choosing a color profile for your PDF exports

Depending on how your exported PDFs are going to be used, you may need to change the colour profile setting, which you can do by choosing an option from the PDF Color Profile select box.

RGB (Default/For Screens)
CMYK (For Print)
Greyscale (Black & White)

Gradient fills in PDF exports

← Getting Started with TinyImage Troubleshooting TinyImage →