How to reduce large file sizes for heavy PDF exports from Figma using TinyImage

Video Transcript

Today, I’m going to be showing you a quick tutorial on how to reduce large file sizes for heavy PDF exports from Figma using the TinyImage Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little “Resources” icon up here. If you search for TinyImage and then click on the “Plugins” tab, click on the TinyImage result, and then you can run the Figma plugin by either clicking on this run button here. I’d recommend clicking on this little save icon, and that’s going to allow you to run the Figma plugin from your saved Figma plugins list later.

So, I’ve already clicked on the save icon. I’m just going to go to my canvas, right-click anywhere, go down to “Plugins,” then go down to “Saved plugins,” and click on TinyImage. That’s just going to run the Figma plugin we saved a second ago.

The Figma plugin has a bunch of different features that allow you to export and compress images from Figma. But for today, I’m just going to be focusing on creating PDFs that have a much lighter file size than the native Figma exports.

To get started, the first thing I’m going to do is go to my create PDF button. In the Figma plugin, if you click on create PDF and then make sure you’ve got a couple of parent Figma frames, frames that are directly on your page rather than nested inside of other elements. As long as you’ve got a couple of those, those should come up here. If you have added them since opening the Figma plugin, just click on this little refresh icon. That’s just going to refresh any parent frames that you’ve got on your page.

This is going to allow us to create a PDF with multiple frames in a single PDF file. You can customize which PDF frames go in there and the order of those layers and things like that. Make sure you have checked this “Downscale large Figma image fills” toggle. Click on that toggle, then change this option over here. What that’s going to do is make sure that any image fills on your layers, for example, each of these layers has an image fill applied to them here. A lot of the time, you’ll get these images from your computer. They’ll be really large, high-resolution images. Those are going to get exported along with your PDF normally and really blow out the file size.

This toggle allows you to automatically downscale those fills in Figma. It’ll make sure that they never exceed the multiple scales of whatever you selected for your layer size. For example, if this image fill is 4,000 pixels wide and 4,000 pixels tall, toggling this option on and doing it to 2x the layer size will automatically downscale that image fill to be a maximum of 800 to 900 pixels in width and size. This is really going to shrink down your image fills, as we’ll see in a moment.

Now that I’ve got that “Downscale large Figma image fills” toggle enabled and I’ve got this set to 2x, which is going to give me a really good file size compression, then I’m just going to click on export PDF. You can see here that it’s downsizing the PDF image fills, and you can actually see them getting swapped out in real-time. It’s downscaling any images that require downscaling. You only really need to do this once the first time, and then any subsequent ones will be much faster because it’s already downsized those images.

Once the PDF compression finishes, go ahead and save that to your computer. I’m just going to save it to my desktop, click on Save, and you can see here it’s saved us a total of 22.5 MB. The original export of these two frames from Figma would have been almost 30 MB, and running it through the compressor with the downscale option enabled has saved us 79% of the file size that we would have had originally. Now it’s just got it down to 6 MB, which is a great saving, and you can see on the desktop, we’ve got the PDF there. We can open that up and show you what that looks like, and you’ve got your two pages automatically exported.

If we go back, I’m also going to show you how to export these as individual PDFs as well. Maybe you don’t want to always export your PDFs in one file; you might want to do it in multiple files. The first thing you need to make sure you’ve got set up is for these parent frames or really any frames you want to export to PDF from your page. Just make sure you’ve got the export setting applied down here. For example, if I remove that and then refresh the layers in here, it’ll say that there are no layers on the page that have any export settings. If you see that, it just means you haven’t applied export settings to your layers yet.

I’ll just show you what that looks like now. If you click on the frames you want to export to individual PDFs, click on those frames, go down to export down here in the bottom right-hand corner of your column, click on this little export plus icon down in the bottom right, and then change the PNG default option to PDF instead. Once you’ve got PDF selected, just go back to TinyImage and click refresh exportable layers. That’ll automatically pick up on those export settings, as you can see here. It’s telling us that we’ve got our PDF setting applied to that one.

This will allow you to export these two different frames as individual PDF files. If you’re coming from this upfront and you’re not even going into the PDF menu over here, what you just want to do is go to the settings panel, click on the little settings icon in the left of the header in the Figma plugin, and you’ll see the same options down here for the PDF. It’ll say PDF image fill Auto downscaling. Just make sure that downscale large Figma image fills is enabled, and then again select this option to be whatever you like. I’m just going to leave that at 2x, close that settings panel off, and now that we’ve got our PDF export option selected, just go ahead and click on this blue export button in the top right of the Figma plugin.

Once you click that, you can see it’s processing each of those PDFs individually. Because we’ve already downsized and downscaled our PDF fills, you can see it’s going through those much quicker this time. It’s essentially just checking that they have been downscaled and checking for any new layers that haven’t been downscaled yet. The export process is much faster with subsequent runs. I’m just going to save that to my desktop, and because we’ve exported two, it’s going to export them as a zip file. I’m just going to open up the zip file. If we open up that folder, you can see we’ve got our two individual PDF files exported there — the dark one and the light one. We can preview those as individual files, as you can see here.

The dark one, and you’ll notice that the file sizes are also much smaller. You’ve got 3.3 MB per PDF. If we check out the stats in the compression output here, you can see that it’s basically scaled each of them down from about 15 MB down to 3 MB. Very consistent 79% saving compared to the other one that we did as well. So there we go, we’ve saved about 24 MB there. The other thing that you can play around with is the DPI. You might notice that I’ve had the DPI set to 300. We’ve got 300 DPI set here, so we can change that to be 150. You can do that in the create PDF output as well, so you can see the DPI slider here. We can change that, so you can set that to 150, and that’s going to basically, again, perform more performance on the compression side.

If you go all the way to 72, the images are going to look not that great. 300 DPI is like print quality, and then 150 DPI is actually more set for screens. You might want to play around with that one. I’ll show you what that looks like now. If we re-export this PDF merged PDF at 150 DPI, you’ll notice that the, again, the downsizing is much quicker because it’s not actually downsizing anything again. Now it’s optimizing the pages, and we can save that. If we click on Save and replace the one that we had there already, you can see that this time it’s actually increased the file savings even more. It’s gone down from 30 MB down to under 3 MB, and it saved us 90% compared to the original large Figma export.

We can open up that merged PDF, and you can see here it’s looking really good. We’ve got a 90% file size saving without really any noticeable quality loss. That’s a really good option. I actually do recommend exporting at 150 DPI if you’re just using the PDF for screen purposes. If you are sending it to print or you’re displaying it at really high resolutions, then 300’s probably better. But 150 DPI is what I would typically recommend for the most optimal quality to file size saving ratio coupled with the downsizing toggle, downscaling toggle that we went through before. Those two things are going to make a huge difference to really large file sizes that are normally coming out of the Figma native PDF exports.

That’s a fairly comprehensive way of showing you how to get your PDF file sizes down when you’re exporting them from Figma. I know that sometimes the file sizes can be really large, way too big for emails and things like that. This is going to allow you to really easily and automatically optimize those PDF file sizes to suit your own needs, depending on if it’s print or screen or anything like that.

It’s also really handy just to finish up on if you’re noticing that your Figma file is crashing when you’re trying to export PDFs. Sometimes this happens if you’ve got PDFs or frames with really high-resolution images. Figma basically has a memory limit that’s constricted to about 2 GB because it runs in the browser. If you are noticing that your file is literally crashing or freezing up as you’re trying to export PDF files from Figma using this option, the downscale option is going to save you a lot of headaches by automatically doing that and really making the export process much smoother because those large high-res images are really going to be memory-intensive for Figma when you’re exporting and can cause it to freeze or crash in some cases.

Hopefully, that’s useful if you run into that problem too. Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.