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 format, the AVIF (AV1) format, the Progressive JPEG format, or the Tiny 1.2 SVG 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.

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

Downsizing your Figma layer fills for your PDF exports

Enabling the Downscale large Figma image fills toggle will 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 and potentially crash when exporting these layers via the TinyImage PDF export options; so using this feature will help save file size and improve page performance in your Figma file.