Collaborate on Invoice Template Figma for Export with Ease Using airSlate SignNow

Invoice template figma for Export

hi everyone this is adam from fig manic and today i'm going to be showing you how to export PDF files from figma with ex CMYK export settings which you would typically use if you wanted to use the PDF for print purposes and 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 so the first step is installing a plug-in called tiny image and 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 tiny image which is TI n y IM AG e and underneath the plugins you'll see a result called tiny image compressor pop-up and if you haven't already installed it you'll see a button on the right hand side that says 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 Figment design project so today I'm just going to be using this simple three frame design which are figment is its design principles just as a bit of an example and the first thing we need to do is just right click anywhere on the page go down to plugins and then go down to tiny image compressor and click on that and that's just going to run the plug-in 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 so at the moment I've got a PDF setting I just added a PNG setting so if i refresh my tiny image interface you can see that PNG has just been picked up but for this case I just want PDF so I'm going to remove that and refresh and you can see PDFs back again so if I just do select my frames once again it's just going to list all of the detected export settings in my file so all I've done is just applied a PDF export to all three frames okay so basically 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 so 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 so today I'm just going to be showing you how to use tiny image to export these PDF files in the CMYK format that we want to use okay so 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 and you can see here it's got JPEG settings PDF color profile settings PDF pasture projection settings custom image file name format settings all that good stuff so for today I'm not going to be requiring the password protection I've got another video tutorial on that if you're interested in password protecting your PDF files you can check that out on the YouTube channel but for today I'm going to be focusing on the second setting here which is the PDF color profile setting so 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 so 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 so the RGB option I'm just going to select that for now and show you what that looks like just so you've got an idea as a baseline so I might just uncheck those I'll just do one for now if you want to change the DPI so you can see over here it's got the DPI it's gonna get saved as all you need to do is change this slider up here and that's going to change the dpi so the lowest quality correlates to 72 dpi the good quality on medium is 150 dpi and 300 dpi is the maximum setting so 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 so I tend to just keep it around the middle and go with 150 dpi so now that I've got my frame selected all I'm gonna do is export the RGB version first and just click compress selected to show you what that looks like it'll be very quick so it's already done and I'm just gonna save that as my first one and I'm just gonna 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 plug-in being a compression plug in the original file size that figma saves PDFs out that would have resulted in a six megabyte file and because we're running it through tiny image that's come out at 166 kilobytes giving us a saving of 97% which is which is really good okay so that's the RGB one and I'm just gonna restart the plug-in 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 plug-in once in a page you'll see this little option on the right-hand side under the title plug in and you'll see the little milk bottle icon with tiny image 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 plug-in name this is just a one-click way of relaunching okay so now that we've just given the RGB version ago I'm just going to go back into the settings option so if I click on that settings icon once again and underneath PDF color profile this time I'm gonna click on that again and this time I'm going to select CMYK for print okay so 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 so once again I'm going to click compress selected and in a moment we should get the CMYK version so now I'm just gonna tag that CMYK ok 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 however at first glance while they look exactly the same so this is the RGB one and then if I open up the CMYK one right alongside it it might 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 so on the right hand side we've got our CMYK so 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 so 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 so that's great so that's that's working just as would expect the CMYK is turned out well and there's one more color profile we can use which is grayscale so to show you what that looks like to just out of interest so 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 so the last setting is grayscale if I click on that and just select it again and once again just click on compress selected this time instead of CMYK PDF we're going to get a grayscale PDF and this is something that I personally don't don't use I haven't had to use grayscale but it could be handy in in some scenarios so 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 so everything's grayscale everything everything's black and white and yeah that's that's in stark contrast to the RGB and the CMYK one so those are basically the three color profiles that tiny image gives you as options for exporting so 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 the CMYK PDF that we exported from figma is 202 and finally the one we just exported is 167 so the grayscale one is marginally smaller CMYK is marginally larger but overall it's still a 97 98 percent saving from whatever you'd get originally from figma so the very 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 so if you didn't catch that that was me clicking on this button up the top here so in the top left I've got this button called create a PDF so if I click on that this setting is different from the default one so this setting essentially looks at all of the top-level frames inside of your figma file so if we look at the left hand side right now underneath the layers you can see I've got three parent frames approachable thoughtful professional so those are being loaded in over here so 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 so instead of doing three different ones with the regular exports this is going to actually merge the three into one so you can see here we've got the exact same options as we did before so I've got RGB CMYK and grayscale as I said before pass a 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 ball so 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 plug in between uses so 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 so in this case I'm just going to do RGB actually I'll do see on my K just so we're just so it stays on point and 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 so I've got the like a PDF RGB PDF in grayscale PDF so those are all fine there is an edge case if you're exporting vector paths so 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 defaults will ignore the gradient fill on that particular vector path that vector style and we'll use just a solid color so if you do come across that it's not it's not all that common but if you do come across it there's an additional option here which is enable gradient fields for vector paths so it will take slightly longer but that just resolves that little that little issue with the exports of vector paths that have gradients so 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 all it'll fix it right up okay so I'm gonna select CMYK once again so this is gonna give me a merged CMYK color profile for my pdfs from my figured in pigment designs so I'm just going to select all three I'm gonna arrange it so yellows first red is second and the gray is last and all I need to do is click on export to merge PDF and once again it's just going to compress those three files but 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 okay so I'm just gonna save that as the default filename savings way as you can see once again we're up at the 96% mark it's down from what would have been twelve megabytes to five hundred kilobytes very good saving and if I just open that file you can see here we've got yellow red and gray just as we'd expect and once again he might be able to tell just by comparing it with the figment design because we are exporting it has CMYK the color difference is is is fairly noticeable so 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 so that's worked that's that's good news that's exactly what we want so yeah that's that's the merged version so 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 so yeah so that's everything you need to know about exporting PDF files with CMYK from figma as I mentioned before this isn't something that figma currently offers natively so yeah if you do want to do this I think tiny image is as far as I know 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 yeah if you if you want it directly from if you want the CMYK PDF directly from figma and you also want the benefit of compression at the same time then yeah tiny image is a really good option for doing that so I hope if you've been looking for a way to export CMYK PDFs from figma that this video has been really helpful and yeah I hope that you've learned something and you can take it away back to your team or back to your own projects and get some benefit from it so yeah thank you as always for watching and be back very soon with even more tutorials that are just like this one