Video transcript
22-minute video ·
Today, I’m going to be showing you how to export compressed PDF files directly from Figma.
To do this, we’re going to be using the TinyImage plugin, so if you haven’t already done so, you can go to the Figma icon up the top here; click on “Community”; click on “Plugins”; and then up the top here, if you just search for “TinyImage” and hit enter, you can see here I’ve already got it installed on my computer. If you don’t have it installed, you’ll be able to click on the “Install” button over here and then you’ll be able to use the Figma plugin in your designs.
Now that we’ve got that installed, you can jump back over to your project. In my case, I’m going to be using this “Figma Design Principles” file to demonstrate how to export to PDF. The first thing to do is open up the Figma plugin that you’ve installed. If you right click anywhere, go to “Plugins” and then just jump down to “TinyImage Compressor” and click on that; that’s going to run the TinyImage plugin.
The first thing that you’ll notice is it’s giving us this little message saying that none of the selected or visible layers contain any export settings. Export settings are something that is native to Figma, so if you click on any of your layers you’ll see down here there’s this little export block in the right hand side column. If you click on that “plus” symbol, you can see it’s giving you the option to add these export settings, so you can choose from PNG, JPG, SVG and PDF. In this case, we’re going to select PDF and we’re going to do that on this layer. You’ll notice that nothing has changed up here, so what we need to do is click this little “Refresh” icon in the TinyImage toolbar. If we click on that, you can see now it’s just detected our new export setting on the layer, so we can see here this frame, the “Approachable” frame, it’s got an export setting of PDF and the other two still don’t; so I’m going to add PDF export settings to the other ones as well just so they’re all consistent. Again, I’m just clicking on the frame, going over to export, adding a PDF setting. I’ll go to this one I’ll do the exact same thing, go down to export down here and change that to PDF, and then again I’m going to click on the “Refresh” button. It’s only popping up with that one now because I’ve got that layer selected, if I deselect all of the layers and just click anywhere you’ll see all three pop right up.
So, now we’ve got all three of our frames with PDF settings and so I guess the key thing is we want our PDFs to be much smaller than the the exports coming out of Figma. To do a little bit of a baseline, what I’m going to do is export these frames normally from Figma and then we can compare what the file size differences are. So, if you go up the top to file and then click on export you’ll see the little Figma export module come up here, and I’m just going to export all three of these, so I’m just going to click export it’s going to tell me to save it; so I’m just going to save it in a folder I’ve created called “Figma”, and if I open that up you’ll see here that I’ve got the three files that we just exported. So, I can see see those three and you’ll notice the file sizes 6.1 megabtes, 6.3 megabytes and 876 kilobytes, so those are slightly too big for what we want.
So, because we’re using TinyImage, what we can do is we can actually tell TinyImage what quality we want these PDFs to be saved at. There’s three different settings for PDFs, there’s the lower setting which is 72dpi, 150dpi is the sort of middle ground and then the maximum setting is 300dpi, which is kind of print quality dpi; so just as a bit of a test we’ll keep it at 300dpi, which is the highest. We’ve got all three frames selected and we can actually change that if we want to but in this case I want all three so once you’ve selected all three pick two the quality you can just click on this “Compress” button up here, and what that’s doing now is it’s analyzing those 3 PDF files, applying some compression and then it’ll let us save them save them out.
You can see here it’s just automatically given us a save prompt, it’s named the zip file that it’s going to save with the current document title plus the date and time so I’m just going to leave that for now and click Save you can change that if you want and just before I open that you can see here it’s actually told us how much it’s saved PDF export so this one’s gone down from 6 kilobytes down to 421 kilobytes or 6 megabytes sound 421 kilobytes this one’s gone from 846 kilobytes to 176 kilobytes and this one’s down from 5.83 megabytes to 356 megabytes so overall we’ve actually saved 93% compared to the original file sizes which is roughly 12 megabytes and saved and that’s that’s on the highest setting so to take a look at our exports from TinyImage the folder that I just saved them out at is here so all I have to do is double click on the zip file and that’s just going to unzip them into a folder for me and you can see here the file names are exactly as you’d expect and I can open those up no problem and we’ve got our PDF files compressed so yeah the file size difference is is massive even at the highest quality as we saw a second ago you know six megabytes for the other ones and those have come down to 365 kilobytes 400-year so we’ve saved literally 90% with with no quality difference at all, which is great.
You might even think that these these sizes are too big, so what we can do is we can rerun TinyImage and because we’ve already opened it using the context menu the right-click menu, TinyImage automatically adds itself as a shortcut into the Figma plugin sidebar here, so what you’ll have to do is just click on the TinyImage logo. You’ll notice I’ve got two because one is a development version and one is the production version that you’ll be looking at so just click on the little milk bottle icon and click on TinyImage and that will rerun the plugin for you without having to go into the plugins menu.
This time around, let’s try lowering the quality down to 150 dpi and let’s see what that comes out at, actually, let’s just go down all the way down to 72dpi and click “Compress”. So, you can see it’s set to 72dpi I’m going to click “Compress”, so once again it’s just compressing those PDFs, and you can see here once I save it, I’ll just save that again, we can see here at this time at 72dpi it’s actually saved us 98% on these to an overall saving of 97%, which is which is massive.
If I open that up, we can see the the only difference that I can see is a slightly lower image quality, but all of the vectors, all of the text is looking super sharp as you’d expect. That’s a larger view and if I zoom in, that’s totally sharp. If I like those results, then I’ll probably keep this lower sized version, it’s really good for if you have to email something the lower file size can often be really ideal and if you’re doing something more that’s more detailed that you need higher quality images for then you know 150dpi or 300dpi is probably the way to go.
This is the way to actually export individual PDFs, but there’s definitely going to be a time when you want to export all three of these in one PDF, so Figma does offer this feature; again, if you go to the top menu and click on file you’ll see down here there’s a there’s a feature that they offer called export frames to PDF so if I click on that it’ll give me the option to save this so I’m just gonna save that into the the folder so Figma has created this PDF file for me which has the 3 frames however it’s 13 megabytes which 13 megabytes is way too big for my use cases where I probably want to send this over email or send it and in a much smaller file size.
TinyImage supports this as well, so if we re-run the Figma plugin just by clicking on the sidebar over here so you’ll notice that we actually have three buttons up here and the one on the left is titled all frames to single PDF which does exactly what you’d expect it replicates the same native functionalities Figma but it adds a layer of compression into the mix so we can actually export immerged single PDF from these frames but we can control the size of it a little bit more so in this case I’m going to try the the middle option which is 150 dpi, and what that’s going to do is going to export all of the frames in your sidebar, not necessarily what’s down here, it’s going to just look at the sidebar on the left here and every top-level frame it’s going to use that as a page so each frame becomes a page in the PDF file that we’re going to save.
As you can see, I’ve changed the quality to the middle over here so now it’s set to 150 dpi, so if I just click on this this all frames to single PDF file so it’s analyzing those frames it’s merging them into a single PDF, and it’s already done. It’s just asked me to save the file so just going to hit save and already from the the notification we can see that it’s taken that 12.68 megabyte file and it’s actually brought it down to 436 kilobytes. so we’ve saved 97% compared to what we just exported directly from Figma natively.
If I open that up, this is our compressed file, as before, there’s no discernible difference in quality, so for 97% savings that’s a really that’s a really huge difference compared to what we can see right here. I’ll just get rid of these ones so we can you can see it a little bit better. So, our original one from Figma was 13.3 megabytes and a new one is 447 kilobytes, so that’s a huge saving and if we wanted that even lower, I could bring that down to 72 dpi but I personally use 150 dpi for most of my exports because it serves as a really good balance between quality and file size optimisation.
That’s roughly what it looks like to merge those those files and if you want to re-order them, the way you can go about doing that is just by reordering the layers in the left sidebar here. Essentially whatever’s at the top, so in this case we had “professional”, “approachable” and “thoughtful” if I want approachable to actually be the first one all I have to do is drag click and drag this frame up to the very top to be there and then if I want approachable to be last I’ll just click and drag that down to the very bottom and then if I rerun TinyImage, TinyImage is going to look at this order of the frames on the left here and it’ll take that into account. So, let’s actually just make this 72 dpi to see what that comes out as as well, so it’s merging these three frames in the order that we just were just specified. So, if I click “save” and open that up, you can see before that 150 dpi version was 447 kilobytes and the 72 dpi is brought down to 390 kilobytes. This doesn’t have too many photos in it so the differences in size aren’t going to be as noticeable, but we’ll cover that in a second. If I double click that you can see here it’s it’s exported the file as you’d expect and you can see the difference here is the order so “professional” is now last as we specified in the frames “thoughtful” is in the middle and “approachable” is last. That’s compared to our original order which was “professional”, “approachable” and “thoughtful” so that’s how you reorder the frames or the pages in a PDF, you just change it in the layers panel on the frames panel on the left and TinyImage will do the rest for you, you don’t have to manually do any weird stuff after you’ve exported the file at all, I’ll do it by itself.
That’s a an example of what it looks like, however I thought it’d be worth showing you what it can do for photos or images as well. So, if we click out of this I’m just going to jump over to my other project I’ve got open which is some some photos of Japan from Unsplash so again we can see here I’ve already run the plugin before, so I’m going to click on the TinyImage plugin in the right-hand side and open that back up okay so you can see here we’ve got quite a lot of export settings already in the mix so some of the export settings are JPEGs so we could actually export those JPEGs and then all of the frames also have a PDF export on them so the PDF here PDF here PDF here PDF here so that is worth noting you can export multiple formats in one go it doesn’t always have to be just one file format so I can show you what that looks like if you like.
In this case, I’m just going to set the the quality down, so let’s do 70 maybe, as I said I’ve already got PDF settings on on all these frames which you can see over here. I’ve got PDF set on there, so what I’m going to do is, I’m just going to export the PDF and JPEG version of each of these photos so I’ve set the quality to 70 and I’m just going to click “Compress”. This is analyzing all the photos, compressing them, the JPEGs and the PDFs kind of in the same batch, you can interchange these formats however you like for the individual kind of exports and already we can see that the savings are really good. Overall, we’ve just saved 94% or 40 megabytes, so 40 megabytes is is massive regardless of if you’re using this on a website or if you’re emailing something, having that that amount of image data saved is is really cool.
I’m just going to open up this zip file that we saved and you can see here we’ve got the two formats all saved out so we’ve got the frames exported to PDFs, so we can see those and then we’ve also got our JPEGs that we exported to so that’s all there as you’d expect. We can do exactly the same thing if we want to export these PDFs as a single PDF compressed PDF and we can do that by maybe it’s maybe it’s worth also doing the experiment with exporting the Figma ones natively.
If I export the frames to PDF from Figma natively so file export frames to PDF I’m just going to click that and we’ll just get a bit of a baseline of what the original file size was compared to our compressed one so from Figma just these four images has created a merged PDF of 36 megabytes so that’s that’s without any compression it’s just coming directly from Figma so I think TinyImage will be able to do much better than that so if we rerun the TinyImage Figma plugin as we did before and in this case we’re not going to click the compress button as we did in the last project we’re going to use this all frames to single PDF setting up here and again I think 150 dpi is always a nice medium setting so I’m just going to click on that and again that’s going to take this order from the left hand side all the frames in that order so we’ve got frame to frame for frame 3 and frame run so that’ll be the March it’ll be Mount Fuji it’ll be the Kyoto photo and this shopfront photo that’ll be the order so if we click on all frames to single PDF that’s going to look at our frames and merge them into a single file for us.
So, we’ll just save that, and it’s given us the report that we’ve saved 94%. The original PDF merge PDF file size was 34.34 megabytes and TinyImage has brought that down to under 2 megabytes (1.95 megabytes) so we’ve actually saved 94% there. If we jump back into our PDF file, this is the one that we just exported so that’s the order that we expected the images look great so that’s at 150 dpi they’re still looking very crisp and you know we that really says it all right there we can see we’ve got 36 megabytes with the with the original PDF export from Figma and then the TinyImage compressed PDF version from Figma has come all the way down to 2 megabytes so again you know there’s just no comparison between these these two exports.
That’s what it looks like; and that’s everything you need to know about exporting compressed PDFs directly from Figma. This was a hugely requested feature, so I’m really glad that it was able to be supported in the TinyImage plugin, adding PDF compression for Figma is something that’s that’s come up quite a lot in the community and and also from previous users of TinyImage; they were they were wondering if PDF compression in Figma was ever going to be supported and and now it’s finally here. As you can see it’s it’s working really well, and I think whether you’re actually exporting documents for presentations client presentations internal documentation maybe or even just kind of stitching together some some renders or some mock-ups into a single PDF or individual PDFs, TinyImage is a much better alternative to the native Figma exports; those file sizes are just way too big to kind of be shareable and practical so that was really the problem that that I wanted to solve with with TinyImage.
If you find it useful, let me know! If you have any other requests for image compression in Figma or different features, definitely let me know, because I’m constantly making updates and improvements to the Figma plugin to make it even better for everyone.
As always, thank you for watching; and I hope that I can do more of these in the short term, and keep getting these Figma tutorials out for anyone who’s interested in this kind of more advanced usage of Figma when it comes to image compression and other kinds of design automation. Until the next time, thank you for watching and we’ll see you soon!
Pro Bundle