How to Create Print-Ready Frames and Export CMYK PDFs Using TinyImage

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can prepare print-ready frames in your Figma files with things like crop and bleed marks and then also export those out to production-ready PDF files that have CMYK color profiles and other things that will make them production-ready for sending off for print. We’re going to do that using the TinyImage Figma plugin.

To get started with that, all you need to do is go to your Figma file and then go down to the actions icon at the bottom here and then just search for TinyImage. Under the Figma plugins tab, if you click on the TinyImage item, you can run the Figma plugin by clicking on the run button down here. I’d recommend clicking on the save icon next to that. If you click on that, you can save the Figma plugin to your Figma plugins list and run it from there. I’ve already clicked on the save icon, so I’m just going to go back to my Figma canvas, then right-click anywhere and go down to plugins. Then go down to saved plugins and find the TinyImage item. Just go ahead and click on the open TinyImage button. That’s going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, it has a bunch of different features to help you with exporting images and manipulating images and things like that. For example, compressing your image assets like JPEGs and PNGs or creating PDFs and GIFs. But today we’re just going to be focusing exclusively on this print tab over here.

What you want to do when you first open the Figma plugin is switch over to this print tab, just as I clicked on up in the header here. That’s going to bring us to the print functionality that we’re going to be focusing on today. By default, it’s just going to give you these default options for an A4 printout. These are completely customizable. You can pick any print size preset directly from this list just to make it really easy. If you click on that, that’ll automatically update all of the settings down here. It’s really up to you depending on what the use case is. In this case, I’m just going to keep it simple and set it to an A4 document.

You can also do things like change the orientation. You can select how many pages you need. In this case, I’m just going to do two. You can also change things like units. If you want to size it by inches, you can customize the sizing or just leave it as millimeters, which is the default, and change things like DPI and all those other good settings. By default, it’s going to enable things like having a safe area and bleed area, and also including crop marks. You can enable other things like fold guides. If you’re creating a brochure, for example, you can add fold guides to any part of that brochure. If it’s like a triple fold, you can add the fold guides in there just to make it really easy to design those separate panels. You can customize that however you need.

Today, this isn’t really a foldable brochure, so I’m going to leave that one enabled just to show what it looks like, but we’re not actually going to be using it in any way. I’ll just leave that enabled to show you how it looks. I’m going to leave all the rest default. Once you’re happy with the settings, just go ahead and click on the create frames button up here. That’s going to instantly create a couple of different frames in your Figma file. I just wanted to quickly create that to show you what these little indicators in the legend down here reflect.

You can see here that we’ve got our safe area, which is this blue area here. We’ve got our bleed area, which is the outer edge that is actually going to get trimmed off once the artwork is printed out. We’ve also got our crop marks here. These black lines are just the crop marks. Again, that’s going to indicate to the printer where to actually slice off that edge. That isn’t going to be included in the final artwork at all. We’ve also got this safe blue area here. Essentially, you want to make sure that any content such as text or interesting visual content that should be prioritized should always be kept inside of this blue safe area and certainly outside of the red area, which is literally going to get chopped off. You don’t want to include any artwork in there.

I just want to quickly run through what each of those things mean. You can also see we’ve got our fold guide here as well. This would be if you were creating a brochure or a pamphlet. This is an easy way for you to design within the bounds of either side because that’s going to be the place where it gets folded after it gets printed. Again, we’re not doing a foldable brochure today, so I’m just going to quickly delete those example frames now that we’ve gone through those measurements and those safe areas from the key down here. I’m just going to set this back to portrait.

I’m also going to save this as a preset. If you know you’re going to be reusing this particular set of settings, you could just create a preset. I’m just going to call it print poster A4. I’m going to give it a simple name. Then you can click on the save preset button down here. That’ll automatically save it to your presets list. When you come back to this tab later, you can just quickly switch between those saved presets and you don’t have to fill out all the details each time. I just wanted to give you that as a little bit of a quick tip as well.

Now that we’ve got our preset selected, I’m just going to again create two pages. I’m going to insert those into Figma. You can see here we’ve got those enabled. I actually don’t need those fold guides; I just forgot to reset that when I saved the preset. I’m just going to turn those off and just add those without the fold guides. Once you’ve got the artboards created, you can then start designing your posters or designing your print artwork.

Again, this is just the overlay here that we’ve got on the frames. It’s just going to make it really easy for you to position any content inside of the safe area. For example, in this one, I’m just going to scale this down to fit the frame. We can see how it looks with those boundaries. You can see here that our text is probably a little bit too big for this frame. Now that we’ve got those boundaries, I can line that up with those guides. You can see we’ve got our safe area here. I’m just going to make sure that stays within those boundaries.

I can do things like reduce the spacing and stuff like that for this particular print frame. Similar with this one over here. I’ll just copy those layers or move those layers into this other frame. Again, you can customize your own designs. This is just a really simple example for a poster. I’m just going to quickly design that up. You just want to make sure all the content is within that safe area. If you’ve got any text, just make sure that isn’t getting put into these areas over here because, as I mentioned, that outer edge is going to get cropped off or cut off when the printer prints that out. You want to make sure those are always well within the safe zone areas.

That’s basically it. I’m just going to leave those as is. I’m not going to do anything too fancy. This is just a quick tutorial to show you how to do that. Once you’re happy with your artwork, you’ve got your two posters or your two print frames or however many print frames you’ve got, you can then tab into the export PDF for print tab over here. We were just in the create print frames here, and we’re now tabbing over to export PDF for print. You can see it’s already found our frames, but if you’ve added more frames in the meantime and you need to refresh those, you can just click on this refresh button over here. That will load up any parent-level frames on your page that you can print out.

You’ve got a few different options under the PDF print settings button here. If we click on that PDF print settings button, that is going to load up a bunch of export settings that we can customize. You can do advanced things like adding password protection. If you want to make sure that the end user needs to enter a password to view the PDF file, you can optionally do that. You can change the color profile. CMYK is the default profile which most printers will need. You can also customize the press profile and rendering intent options as well. If you don’t know what these are, you can safely just leave them alone. If you prefer to change those because you’ve got a specific requirement from your printer or from your client, you can tweak those as needed. But again, I would just leave those as default most of the time.

Because we’ve already got our bleed and crop marks inserted based on the creation that we just did a moment ago, you don’t actually have to enable this add bleed option because we’ve already got it. You can see down here it’s telling us that we’ve already got those print and crop marks included. I actually added my artwork on top of those print marks. If you want to see those, I’m just going to move those layers up just to reveal those in the frame as well. You can see here that it actually created those crop marks. We just couldn’t see them because it was overlaid. If you do accidentally overlay the artwork on those crop marks, this export feature will automatically shift those above the image when we export the PDF.

Just to confirm that those bleed and crop guides overlays are purely just for you to reference while you’re designing. The crop marks are just going to be included for the printer. Once they print out the content, they’ll be able to use those as a guide to slice the image. It’ll slice there and slice there. The edges will basically get cropped off. Because we followed our guidelines, all of that content is going to be nice and safe. Apologies for the rendering here; this is just the Mac OS PDF viewer. It’s not great, but you can see that’s well within the safe zone there.

That’s basically what it looks like. As I mentioned, you can customize those settings if you do have a different use case. If you need them as separate PDFs, just enable that toggle, for example, click on export PDF again. This time, because there are multiple files, it’ll just give you it in a zip file. You can then save that to your computer. If you open up the zip file, you’ll get a folder with the two different PDFs. You can open those up as well. This time around, it’ll just be the single PDF included, and you will have two different PDF files instead of one.

Again, this all depends on your use case and what the printer actually needs from you. You can basically just customize it to your own liking. I just wanted to quickly run through a couple of these new features under the print tab. You’ve got the feature to create the print frames in Figma. You can really dial those in based on your customer requirements or your printer requirements and then start designing the content. When you’re ready to export that content, you can just come back to the Figma plugin, open up the print tab again, switch over to export PDF mode, and again, you can dial in those export settings as you need as well, and click on export PDF just to get those files exported.

I hope that’s helpful if you’ve been wanting to use Figma for print workflows and you wanted to create production-ready PDF files and have these nice different options for creating safe areas and stuff like that. This is hopefully going to be helpful for you without having to dive into a crazy tool like Adobe InDesign or something like that. If you want to stay in Figma, this will hopefully help you do that. Thank you as always for watching. We’ll be back with more Figma tutorials like this one very soon.