How to export compressed PDFs in CMYK from Figma

Video Transcript

Today, I'm going to be showing you how to export PDF files from Figma with CMYK export settings, which you would typically use if you wanted to use the PDF for print purposes. At the moment Figma does not let you export PDF files with any sort of color profile settings, so that's what we're going to be looking at today.

The first step is installing a Figma plugin called TinyImage. If you haven't already done that, you can go to the top left corner up here with a little Figma icon and if you click on that you'll see a little search bar up here, you may have to click on "Community" or "Plugins" first, but once you do type in the search bar the word "TinyImage", underneath "plugins" you'll see a result called "TinyImage Compressor" pop-up. If you haven't already installed it, you'll see a button on the right hand side that says "install"; and if you click on that it'll change to say "installed" with this little check mark, and once you've got that checkmark, you're ready to ready to roll and you can jump back into your Figma design project.

I'm just going to be using this simple three frame design, which are Figma's design principles as a bit of an example. The first thing we need to do is just right click anywhere on the page, go down to plugins, and then go down to "TinyImage Compressor" and click on that. That's just going to run the Figma plugin we just installed a moment ago, and you can see here that I've got my three frames listed, and the reason that they're being listed is because I've already listed all of them as PDFs; and what I mean by that is if you click on any of your frames, and in the right-hand side you'll see a little title called }"Export"; if you click on the plus symbol it'll let you add export settings.

At the moment I've got a PDF setting, and I just added a PNG setting; if I refresh my TinyImage interface you can see that PNG has just been picked up, but for this case I just want PDF; I'm going to remove that and refresh, and you can see PDFs back again. If I just select my frames once again, it's just going to list all of the detected export settings in my file; all I've done is just applied a PDF export to all three frames. By default, Figma when it exports PDF files it will always export them in RGB, which is basically the color profile that you would typically want to use if you are viewing PDF files on a computer screen or on a TV or on a monitor, it's typically not the format that you would choose if you were going to be using a PDF file for print; when you're using a PDF file for print ideally you're probably going to be asked to provide something that's been exported in CMYK; this is a different color profile to RGB, but as I said the default and the only option for exporting PDFs natively from Figma is an RGB export. I'm just going to be showing you how to use TinyImage to export these PDF files in the CMYK format that we want to use.

What we need to do, is click on the little "settings" icon that you can see my mouse over now just on the right hand side here, if you click on that icon it's going to bring up a whole list of settings for us. You can see here it's got JPEG settings, PDF color profile settings, PDF password projection settings, custom image file name format settings, all that good stuff; for today I'm not going to be requiring the password protection, I've got another Figma tutorial on that if you're interested in password protecting your PDF files, you can check that out on the YouTube channel.

Today, I'm only going to be focusing on the second setting here, which is the "PDF color profile" setting; you can see here that if you hover over the the drop-down, the default is being set to "RGB", which is the color profile that Figma normally exports as; that's the default, and then the second option we've got here is "CMYK" and in brackets "for print", and there's also a third option which is the "Grayscale" option. The RGB option, I'm just going to select that for now, and show you what that looks like just; you've got an idea as a baseline. I might just uncheck those I'll just do one for now if you want to change the DPI; you can see over here it's got the DPI it's going to get saved at, and all you need to do is change this slider up here and that's going to change the dpi; the lowest quality correlates to 72 dpi, the good quality on medium is 150 dpi, and 300 dpi is the maximum setting; this will give you the best quality but also at the highest file size and at the opposite end you get the best possible file size savings but the quality won't be as good; I tend to just keep it around the middle and go with 150 dpi. Now that I've got my frame selected all I'm going to do is export the RGB version first and just click "Compress Selected" to show you what that looks like; it'll be very quick.

It's already done, and I'm just going to save that as my first one, and I'm just going to put "RGB" in the file name and click "Save" and save that to my desktop; and there we go we've got our PDF file as we'd expect, and you can see here due to the nature of the Figma plugin being a compression plugin, the original file size that Figma saves PDFs out that would have resulted in a 6 megabyte file and because we're running it through TinyImage that's come out at 166 kilobytes giving us a saving of 97%, which is which is really good.

So, that's the RGB one, and I'm just going to restart the Figma plugin; you can click close, and if you want to restart it really quickly, all you need to do is go over to the right-hand side here once you've run the Figma plugin once in a page you'll see this little option on the right-hand side under the title "Plugin", and you'll see the little milk bottle icon with TinyImage there if you click on that that will save you from having to right-click on the page go down to plugins go down to the Figma plugin name this is just a one-click way of relaunching.

Now that we've just given the RGB version a go, I'm just going to go back into the settings option; if I click on that "settings" icon once again and underneath "PDF color profile", this time I'm going to click on that again, and this time I'm going to select "CMYK "(For Print)". I've selected that now; I don't have to click save, I can just get out of that and this is now going to export it to CMYK. Once again I'm going to click "Compress Selected", and in a moment we should get the CMYK version. Now I'm just going to tag that "CMYK"; there we go, I've got my CMYK one and you can see here it's exported it just as it would expect as well.

At first glance while they look exactly the same; this is the RGB one and then if I open up the CMYK one right alongside it, it might not be super obvious to tell from where you're looking, but on my screen I can clearly see a difference between the left and the right; on the right hand side we've got our CMYK; that's the one we just exported and then on the left hand side we've got our original one which was the RGB and if you if you can tell just by looking at your screen right now as I can on the left the red is much more vibrant it's much more illuminated and on the right hand side it's much more muted and it just has a very different sort of tone to it. That's the result that we actually want, we want them to be different, they're two different color profiles; the one on the right we would be using in a print scenario most likely and the one on the left the RGB one this is what we would be using whenever we want to send a PDF that's intended to be viewed on a computer screen and intended to be viewed on an ipad something like; that anything that's not print you would want to use RGB. That's great; that's working just as would expect the CMYK is turned out well.

There's one more color profile we can use which is grayscale. To show you what that looks like to just out of interest; this time I'm just going to use this exact same PDF file and I'm going to go to my settings and once again you can see it's previously been set to "CMYK" but once again I'm going to change that to a new setting; the last setting is "Grayscale", and if I click on that and just select it again and once again, just click on "Compress Selected", this time instead of getting a CMYK PDF from Figma we're going to get a grayscale PDF. This is something that I personally don't don't use, I haven't had to use grayscalel but it could be handy in in some scenarios. The grayscale one if I open that up you can see here it's it does what it says on the box, it will give you a grayscale PDF. Everything's grayscale, everything's black and white and that's in stark contrast to the RGB and the CMYK one.

Those are basically the three color profiles that TinyImage gives you as options for exporting; that's all three of them now you can see there's a little bit of a file difference between them, nothing too crazy the RGB one is 171 kilobytes, the CMYK PDF that we exported from Figma is 202 kilobytes, and finally the one we just exported is 167 kilobytes. The grayscale one is marginally smaller, CMYK is marginally larger, but overall it's still a 97 to 98 percent saving from whatever you would get originally from native Figma PDF exports.

The last thing I'm going to show you is slightly unrelated to the color profile itself, but if you wanted to export a merged copy of these PDFs, you can do that by clicking on the button I just clicked on; if you didn't catch that that was me clicking on this button up the top here; in the top left I've got this button called "Create a PDF". If I click on that, this setting is different from the default one; this setting essentially looks at all of the top-level frames inside of your Figma file; if we look at the left hand side right now underneath the layers you can see I've got three parent frames: "approachable", "thoughtful" and "professional"; those are being loaded in over here; it's not relying on the export settings as our main panel was when we just want to export different formats to individual files; the purpose of this function is to merge multiple parent level frames sort of larger frames into a single PDF file; instead of doing three different ones with the regular exports, this is going to actually merge the three into one.

You can see here we've got the exact same options as we did before; I've got "RGB", "CMYK" and "Grayscale", as I said before "password projection", I've got another video on that if you're interested in that but you can you can enable that down here too and these are actually rearranged; you can rearrange the order of those frames and you don't have to touch your frame order in your Figma layers; these are independent they'll be saved in the plugin between uses; you can go back and re-export files in the order that you set them set them in here and of course you can you can deselect or select whichever ones you you like; in this case I'm just going to do "RGB"... actually, I'll do "CMYK".

The last little edge case that I'll touch on is: you might have noticed there's a little toggle underneath the color profile options; I've got the CMYK PDF, RGB PDF and grayscale PDF; those are all fine, but there is an edge case if you're exporting vector paths. If you're drawing a blob or something with the pen tool and you give it a vector background or a vector fill, the RGB compression by default will ignore the gradient fill on that particular vector path, that vector style, and it'll use just a solid color. If you do come across that, it's not all that common, but if you do come across it there's an additional option here which is "enable gradient fills for vector paths"; it will take slightly longer, but that just resolves that little that little issue with the exports of vector paths that have gradients; in my case I don't have any gradients, I don't have any any blobs or any paths like that really, so I don't need that option; but if you do encounter that, that's the option you can use and it'll fix it right up.

Okay, I'm going to select CMYK once again; this is going to give me a merged CMYK color profile for my pdfs from my figured in Figma designs; I'm just going to select all three I'm going to arrange it; yellow's first, red is second, and the gray is last; and all I need to do is click on "Export to Merged PDF", and once again it's just going to compress those three files. As I mentioned, this time around because we're using the create a PDF button, it's going to give us a single PDF file, whereas before it would have given us multiple if we exported them all at the same time. I'm just going to save that as the default filename, savings wise, as you can see once again we're up at the 96% mark, and it's down from what would have been 12 megabytes to 500 kilobytes, which is a very good saving.

I just opened that file, and you can see here, we've got yellow, red and gray; just as we'd expect. Once again, we might be able to tell just by comparing it with the Figma design, because we are exporting it as CMYK, the color difference is fairly noticeable; you can see on the right here again we've got the very vibrant red, the RGB sort of red, same with the yellow, you can see on the left or right here the yellow on the left in our Figma file is very different from the CMYK PDF that we just exported from Figma. That's worked; that's good news, and that's exactly what we want. So, that's the merged version; those are the two options: you can either export a merged version, which is a single PDF made up of your Figma parent frames, or of course you can export all three of these as individual PDF files based on the export settings in the bottom right column over here.

That's everything you need to know about exporting PDF files in CMYK from Figma. As I mentioned before, this isn't something that Figma currently offers natively. If you do want to do this, I think TinyImage is the only way to do it right now; I'm sure that there's a way to export your PDF files from Figma natively and somehow load them up into a separate tool or other software and convert it to CMYK, but if you if you want the CMYK PDF directly from Figma and you also want the benefit of compression at the same time, then TinyImage is a really good option for doing that.

I hope if you've been looking for a way to export CMYK PDFs from Figma that this video has been really helpful and I hope that you've learned something that you can take away back to your team or back to your own projects and get some benefit from it. Thank you as always for watching, and we'll be back very soon with even more Figma tutorials just like this one.