How to merge frames to a compressed PDF from Figma using TinyImage

Video Transcript

Today I'm going to be showing you how to export merged PDF files with compression from Figma using a Figma plugin called TinyImage.

If you haven't already done so, the first thing we need to do is install the TinyImage Figma plugin from the Figma plugins directory. The quickest way to do that is just by going up to the top left of your Figma application, clicking on the little Figma icon, and if you go down to "Community" and click on "Plugins" you'll be able to search for a Figma plugin called "TinyImage", and you can just put in the keyword "TinyImage" and if you click on the "Plugins" tab you'll see a result pop-up called "TinyImage Compressor", and over on the right hand side over here you'll see the "Install" button. If you haven't installed it you'll see a button that just says "Install" and once you click on "Install", it'll take a couple of seconds and then it should change to look like mine where it says "Installed" and it has a little checkbox next to it. Once it does say "Installed", then you can jump back into your project and we can get started.

The first file I'm going to look at is just this design with a bunch of frames; it's a presentation for Dieter Rams "10 Principles for Good Design", and today I want to export this as a PDF file from Figma, but I want it to be a compressed PDF file and I don't want it to be the regular PDF that Figma exports natively, because it's really large, and it's just way too big for sending people over email or Slack and things like that. I want to be able to compress this file into a single PDF and have a couple of options around that.

The first thing we need to do is just right click anywhere, go to "Plugins" and then go down to "TinyImage Compressor" and click on that; that's going to launch the Figma plugin we just installed. You can see here that the first thing we can see is this little empty state, this little warning message just letting us know that none of the layers in our file have any export settings on them; that would normally mean if I click on this image for example, an export setting is something that you can add in Figma in the right hand column; you can see over here on the right hand side I've got this little export section, if you click on that it'll allow you to add export settings for each layer or each image in your Figma file. Normally this would be the way that we would compress images with TinyImage; for example if I just refresh this you can see that it's picked up on the three export settings that I've just added to that image, but for today, because we're actually going to be using a different feature in the Figma plugin, I don't actually need to have these image settings added at all; I'm just going to remove those three refresh the Figma plugin and so this message is actually fine for our use case, because the second part of the message lets us know that if we just want to export all of the visible frames on this page to a single compressed PDF then we can use the the button above.

I'm going to do that now, I'm going to click on this "Create a PDF" button up here; you can see once I've clicked that it's brought up a little panel for me, this little export panel, and this is allowing us to create a PDF from frames inside of our Figma file; when I say frames I mean top level frames. You can see in the left hand side of our Figma design over here we've got all of these frames at the top level of the page and these are all being picked up on by the Figma plugin; we can see here it's picking up on each of those layers if I bring this over here you can compare it directly; starting from "Principle 10" all the way down to "Intro", it's bringing all of those layers in in or in the order that they appear in the layers panel in Figma. In our case, the order of the Figma layer panel is actually the exact opposite of what we want; by default it will load them in that order, but we obviously want them to be in a different order. There's a few ways to approach this: the default option is to sort these frames by drag and drop; you can see over here we've got this little grab icon, when you hover over this little icon over here, and if you click and hold that and drag it you are actually able just to reorder those frames in any order you like by clicking and dragging them and you can put them into any custom order that you want and when you've when you've finished with that it will render out that PDF file in this particular order; but clearly if you've got a dozen, or more than a dozen in other cases, frames just like this one manually going through and rearranging every single frame back to front, it's actually kind of time consuming.

That's why I wanted to make this tutorial about a brand new feature that's just been shipped in the TinyImage Figma plugin, and that is the quick sort option. As I just showed you, the default is actually set to sort by drag and drop, and by default that will load in the the normal ordering, but if we click on this little drop down here where it says "Sort by Drag & Drop", if I open up that select box you can see there's actually a bunch of options in here, and of course the default one is just custom ordering via drag and drop, but there are some other options, too. I've got "Figma layer ordering", so if I click on "Sort by layer order", that's just reverted it back to the layer order that we saw in here, but if I go one more down, we've also got "Sort by layer order in reverse", so if I click on that one, that's actually exactly what we want; we want it to be the the reverse of what it is in the Figma layers panel. So, just with one click I'm able to change it from the default ordering to reversing that layer order. Now we've got "Intro" at the top and "Principle 10" at the bottom, it's literally reversed that order that we can see in the Figma layers panel here, and it's done so without interfering with our Figma design or Figma file at all; all of these layers are still in the same order, it's not altering those, it's just scoping that to the Figma plugin options themselves.

There's a few other options we've got in here as well; let's say you wanted to export this, and for some reason the design has been a bit frantic and they weren't able to keep all the layers in the same order as the designers appeared visually; in that case we could do another option which is visual position ordering, so instead of sorting by the layer order in Figma or reversing the layer order in Figma or using drag and drop, we can also arrange these frames by where they're positioned visually on the canvas. For example, if I click on "Sort by left to right", you can see here that it's actually sorting from the top left to the bottom right, and what that means is it's actually going through and it's going from "Intro" to "Principle Three" to "six" to "nine", then it's going all the way back up to one to "four" to "seven"; you can see that ordering popping up there in the Figma plugin and that's really neat, if you have ordered it in more of a column setting where you need to order it by columns, basically from column one all the rows in column 1 to column 2 to column 3, that ordering would be perfect for that setting.

There is also a second setting if you need to go from top to bottom, or top left to bottom, you can also use "Sort by top to bottom", if you click on "Sort by top to bottom", that will actually then do the opposite basically, or it will do an alternative of that where you go row by row; you're going row by row from the top, starting at "Intro", it's going to go from "Intro" to "Principle One" to "Principle Two", and then it's going to go to the next row "Principle Three", "Principle Four", "Principle Five", and that's going to keep going on until it gets to the end. In that sense, you're going from the top over here to the bottom, row by row, instead of column by column; that's the difference between left and right, left to right, and top to bottom and then there's the opposite of both of those options, too. You can also go from bottom to top, which would exactly reverse that ordering; you're getting 10 to 9, and then it's going up another row to 8, 7 and 6 and the same thing if I go from right to left; in this case it's actually going from the the opposite way that we that we saw before; it's actually starting at "Principal 8" this time, so it's starting at the last column. It's important to know this particular option is column, and the other one is row, from left to right; this is actually going from 8 to 5 to 2 and then it's going back down to the bottom to 10, to 7, to 4, to 1, and so on; these are the different options that you have; they can be handy depending on how your design's been organized, how it's visually organized, how it's organized by layer, and of course if worse comes to worse, you can always pick one of them so if you do "left to right" and let's say you still need to fine tune it, you can still go ahead and just override that ordering with drag and drop. Even if you get 90-95 percent of the way with your visual sorting, maybe there's something that's a couple of pixels off, you know up or down, or left or right, than the other frames for some reason, you can still go in there and manually tweak that if you really wanted to. Those are the sorting options that we can use for all of our layers.

We can also select layers that we want or we don't want; for example if I actually just want to get rid of the "Intro" frame, I can just click on that, and now you can see that 10 of the 11 frames have been selected. I've got rid of the "Intro" frame, of course I can get rid of any of these frames, I can get rid of them all, and then obviously I can't export it until I select one. You can just toggle those to create the PDF that you really want, it's not just going to go ahead and export all of those frames if you don't want them to; you have full control over which frames and what order they're in to be exported from Figma. There's a couple of other options as well; I've covered these in other tutorials, so I won't go into full detail of them, but you can also select the color profile and if you need to, and you can also add an optional password to protect the PDF file.

Having said that, I'm just going to export this. Let's just go with the default layer order for now; it's backwards, just to show you what it looks like normally. If I click on this "Export Frames to Merged PDF" button, that will start the merge process of going through each of these 11 frames and compressing them to a PDF. That's going to go through all of them, and once it finishes we should see some really good file size savings and expect the PDF exactly as we ordered it. That's finished converting, and you can see here the original PDF size was 6 megabytes, so we've had that taken down now to 1.3 megabytes; that's a 77 percent saving from the original PDF file size, and it's worth noting that was a 300 dpi PDF, which is the highest quality dpi for exporting compressed PDFs from Figma. If I go to my desktop now and just open up this PDF file we just exported, you can see here it's exported the PDF in the reverse order that we just set up in the Figma plugin, just to show you what that looks like. It has exported perfectly, and it looks great; I can't tell that the compression has been applied at all, it looks just super, sharp and exactly what we expected.

If we run that again; we can do that just by closing the Figma plugin and going over to the right hand side column, and if you click on the "TinyImage" icon, it'll reload the Figma plugin for you really quickly. Now that we've exported a PDF file just to experiment with, the second thing I wanted to show you is just changing the quality on that as well. We had that set to the best quality, and you can see up here the button changes its context based on what quality you're setting it at; there's three levels of quality for PDF exports: there's 300 dpi which is basically print quality, if you slide it down you can get to 150 dpi, which is more like a screen based quality (high quality for screens), and then you've got 72 dpi, which is the lowest quality, but it's going to give you the highest file size savings. Let's just try exporting it at 72 dpi, and I'm just going to leave that slider set to 72 dpi, and if I click on the button again, the "Create a PDF" button, this time I'm going to export it in the correct order. I'm just going to click on "Order by layer order (reversed)", and that's just going to take the Figma layer order and reverse it for me. Now I've got it in the order that I actually want it, and I'm going to go ahead and unselect the second half of this presentation, because for some reason in this case I'm just going to export the first four principles; let's let's see what that looks like. Once again I'm just going to click on "Export Frames to Merged PDF", and actually that's not going to work... I'm going to reselect all of those, because I do want to compare the file size and if I remove those frames, it's going to make the file size smaller, of course; but I want it to be accurate to what we just exported. So, I am going to leave all 11 frames selected, and all I'm going to do is just reverse the order, that's it; that won't change the file size at all. We're just going to see what it looks like with 72 dpi.

Again, I'm going to click on "Export Frames to Merged PDF", and once again, this is just going to merge those 11 frames to the PDF. It has converted it really quickly from Figma to a compressed PDF, and this time we've saved 86 percent. We've actually got it down underneath a megabyte now; it's come down from the original six megabytes that would have been exported from Figma, and it's brought it down to 873 kilobytes; that's just a perfect size if you need to send it to somebody on your team or a client via email, or an attachment on Slack, or something like that; under a megabyte is is ideal. Now if we open up that new PDF, let's do that; this time you'll notice immediately that the order has been reversed, the order's now much better, we can see that we've got our "Intro" frame, and then going from 1 to 2 to 3 and so on, and even though we used 72 dpi, it's really difficult to tell how much compression has been applied to these images. At a glance, you just really can't even notice I'd say if you zoomed in or if you were really having a look at it on a on a really good screen and looking at it up close you'd be able to tell that there's some compression applied to these images, but again, it's very hard to tell and we've got a really good file size for very little image quality loss.

Okay, the last thing I'm going to do is just show you an example where I take some frames out. I'm going to relaunch the Figma plugin just by clicking on the right hand side once again, and this time I'm just going to change it to 150 dpi, just to just to get all three in the tutorial. Once again, I just want to create a compressed PDF, but this time I only want a few frames just to show you what that's going to look like. If I actually deselect all of them to start with, and let's say I just want the "Intro" and I want "Principle 8" and I want "Principle 10", but I actually want "Principle 10" to go before "Principle 8", and I'm also going to throw "Principle 4" in there, but I want that to go at the very end; now I've got this really weird ordering for some reason, and I've unselected or deselected a whole bunch of frames. Now I've only got 4 out of my 11 frames selected because in this particular case I don't want any of those other frames and I just want to tailor this PDF for this use case where I only want the four frames in this custom order. Now I've got custom ordering going, I've got the frame selected that I want and I've got it set to 150 dpi, and once again, I'm going to compress this PDF from Figma by clicking on the "Export Frames to Merged PDF" button, and once again, this should be pretty quick. There we go, so let's just save that out for us, and this time you can see that it's actually saved us 85 percent because we took out some of those frames; the original size has also come down, it would have been exported at about 2 megabytes, but because we've saved it out at 150 dpi, which is sort of the middle setting, we've actually got it down to 295 kilobytes; we've almost saved 90 percent, and that's a total absolute saving of 1.7 megabytes, which is really good. If I go back to my desktop and one last time, I'm just going to open up my PDF, and you can see here immediately we've got only four frames this time as we expect. It's just those four, and as we saw from the custom ordering in Figma before we exported the compressed PDF, you've got the frames in a really strange order; we've got frame 10 and then number 8, and then number 4 and none of the other frames have been included; we didn't bloat it up with unnecessary frames and we've got custom ordering at our custom compression level.

Okay, so that is three different examples of how you can go about exporting those those compressed PDFs from Figma. Finally, I'm going to run this on one more file just to show you what it looks like. I've got this second file here which I used in a previous tutorial where we were covering the initial PDF compression functionality, that didn't have the sorting function. I'm just going to relaunch the TinyImage Figma plugin once again, and you can see here we've got some selection settings already saved for exporting these as individual PDFs; these frames have PDF settings already on them, but again, I'm not too concerned about that today, I just want to click on the "Create a PDF" option. I'm going to click on "Create a PDF" once again, and as we saw in the last example it's exactly the same setup; in this case we've already got custom ordering saved from previous export. The red frame has been brought into the middle, whereas normally it would be brought down to the end. If we wanted in the correct order, once again, we can we can order this visually; if we throw these completely out of order just to set it up that way, those are completely out of order now, and again, if I wanted to arrange this visually from left to right, I can just click on my order options as we did before, click on that, and I know that I want to click "Order from left to right", so I'm going to click that now, and you can see here it's ordered it visually from left to right. Yellow is now first, gray is second, and red is third. That that's really handy, because as I mentioned before, sometimes the layers just don't correlate to the ordering of the visual design, so you can see here that our first layer in Figma is actually the "Approachable" layer, then it's the "Thoughtful" layer, then it's the "Professional" layer; that ordering is just totally out of whack and this is just a small file as well. It's not too bad if you did have to manually order it but again it's just; much easier; that the default layer order would look like this but it's just; much easier to sort it visually. Now we can do that with this new feature; "Order by left to right", I could also "Order by right to left", so we get the backwards, the red one first and then yellow at the end, but in this case I'll just do the correct order and go left to right.

One last time, I'll export the frames to a merged compressed PDF from Figma, and it's going to merge those three frames for us, and this is set to 150 dpi as well, so this should be some decent compression. In this case, we've actually got a really, really good result; it's gone down from 12.6 megabytes to 500 kilobytes, that's a massive 96 percent saving, or a 12.19 megabyte saving on our PDF, and that wasn't even at the lowest setting. If we tried it at 72 dpi, it'd actually probably go even lower; well, it definitely would go lower, but in this case, I'm very pleased with with the 96 percent saving, and finally I'll just open up the merged PDF we exported from from Figma so you can see what it looks like. There we go, we've got all of our frames as we'd expect in the correct order that we that we set before in the Figma plugin; it's yellow, gray and red. Okay, that's looking really good, and we've saved quite a lot of megabytes and kilobytes from all of our exports combined there. So, I think that's been a really good run through of what the differences can look like, and also tailoring the ordering based on visual order, or reverse layer order, depending on your use case. I just wanted to show you all of those different cases so you could get a get a good idea of what that would all look like, and really understand how it's working in the Figma plugin.

I think that's all for today. I just wanted to run you through that brand new feature in TinyImage; it's something that a lot of you have been requesting and it's something that I've actually wanted in my own use cases as well. I'm glad that we were able to ship that for you this week and I hope that it comes in handy when you are exporting compressed PDF files from Figma on a daily basis, or a weekly basis, or however often you need to do it; I hope this just helps out with your workflow a little bit more and saves you some time instead of you manually reordering those frames as you had to do before.

Thank you as always for watching, and I hope this comes in handy for you or your team if you do need to export compressed PDF files from Figma, specifically merged PDF files and being able to have all that control over the ordering and the export settings. Until next time, thank you, and we'll be back very soon with more Figma tutorials just like this.