How to add bleed and crop marks to PDF exports from Figma using TinyImage

Video Transcript

Today I'm going to be showing you a quick tutorial on how to automatically add bleed and crop marks to your PDF exports with one click from Figma using the TinyImage Figma plugin.

If you're new to this concept, bleed and crop marks are basically used for printing documents. If you're sending a design to a printer, they always require this little bit of extra, a few millimeters on the edges here, and these trim marks to basically add a bit of buffer so that when they cut the design to the correct size, it doesn't leave white space at the edges.

We're basically going to be extending our original design by a few millimeters externally based on the original dimensions and automatically add these trim lines so that the printer knows where to cut it, and you won't end up with these white areas at the edges there. Now that we've finished that quick 20-second primer of what bleed and crop marks are, I'm going to show you a few examples of doing this automatically in Figma.

I've got this business card design here that I want to export to a PDF, and we're going to first open up the TinyImage Figma plugin. All you need to do is go to your Figma file, click on the little resources icon at the top here, and then if you search for TinyImage, under the "Plugins" tab, if you click on the TinyImage result, you can run that Figma plugin by clicking on this "Run" button here. Or you can click on this little bookmark icon to save it to your Figma plugins list for easy access.

I've already clicked on that save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on the TinyImage Figma plugin, and that's just going to run the Figma plugin we saved a second ago.

To export these frames to a PDF, what we can do is click on this little "Create PDF" button in the top of the plugin header, and that's going to automatically fetch all of the frames on our current page. These are all the top-level Figma frames, and you can select which ones you want to include in the PDF. You can rearrange those based on different orders, so you can do it by column, you can do it by rows, you can do it by layer order, or manually rearrange them in the UI as well. But for today, I'm just going to keep it really simple and just do it by rows.

Once you've got that set up, all you need to then do is configure your options down here. You can select the DPI; if you're doing it for print, you probably want to go to 300 DPI, but you can change that to whatever you like and customize anything down here as well. If you like, you can change this to CMYK, for example, so we can do that. And then what you want to do is just enable this toggle down here that says "Add Bleed."

We're going to enable the "Add Bleed" toggle, and by default, that's going to add 3 millimeters of bleed, which we just looked at before. This is this red area here, and that's going to automatically add that 3-millimeter buffer or bleed to our design. You can customize this, so if you need it to be 5 millimeters or 2 millimeters, you can change that, but the typical use case is about 3 millimeters, so we're just going to leave that as three.

And then you've got the option, which is turned on by default, of including the crop marks. Those are these little lines here that kind of intersect at the top of each of the corners, and that will just give the printer the lines for it to use, essentially, a guillotine to slice that to the original document dimensions. That's going to crop off this bleed area and just leave you with this inner area here.

I'll show you what that looks like now. We're going to export that by clicking on the "Export PDF" button in the Figma plugin, and that's just going to go through and export those four Figma frames to a new PDF and automatically add that bleed and crop area to our PDF export. I'm just going to save that to my desktop, and you can open that in whatever PDF reader you like. I'm just going to open this up in the Mac Preview for now, and you can see it's automatically added our crop marks to each of those pages in the PDF.

What that's essentially done is it has stretched the PDF to the original dimensions, which are here, and it's added 3 millimeters around that edge, and it's extended the design outside of that as well by those 3 millimeters. Then, it's included those crop marks so that the printer knows where to crop it. Essentially, this area where these crop marks intersect is the original dimensions of your Figma frame here, and the frame has essentially got an extra 3 millimeters, as you can see in these corners here, added to the outside. So that when it gets cropped off, it will exclude any of that extra content and give you a nice, clean cut.

That's a really simple example. We've got a few other examples we can try as well. You can see here we've got another one, which is a poster. I'm just going to rerun the Figma plugin here, so we're going to open up TinyImage in this new Figma file, and we're going to do the exact same thing. We're going to go to "Create PDF." This time, we've only got one frame, so that's totally fine. It's just going to give us a PDF with one page on it.

Again, we're going to click on the "Add Bleed" toggle, we're going to keep the crop marks on, and then export that to PDF. Once this is done, I'm just going to save that to my desktop again. And one more time, I'm just going to preview that. You can see here we've got our crop marks, and because this is a much bigger frame—it's not a business card—we can zoom in and see those crop marks. That's still a 3-millimeter edge, but because the design is much bigger, obviously, that relative size appears much smaller when we look at it on the computer. But you can see that it's added those crop marks in.

You can also notice that on this particular design, because it's a different color design in each corner, the Figma plugin is automatically making sure that those crop marks are inverted, so they're always visible in the design. You can see here, because we've got a black background in this section and a white background in this other section, that's automatically being accounted for when it gets created, and it's giving those crop marks the correct contrast. That's what that looks like there.

Finally, I'll just show you one more example of those two things put together. If we click on this last Figma file example, again, I'm just going to rerun the TinyImage Figma plugin. This time we've got a few different files, so we've got a few different designs here, and each of them have a different color background, and they're about 1080 x 1080 pixels, which would translate to some size that's larger than these business cards but smaller than this poster.

I'm just going to export that as a last preview of what this can look like. I'm going to again click on the "Create PDF" button, and then I'm just going to make sure that all of my frames are selected. I've got those selected there. Again, you can rearrange these however you like. You can change the DPI as needed, and again we're just going to click on the "Add Bleed" option. We'll set it to CMYK just for print, and this time maybe we want to do a 5-millimeter bleed, so we can just change that to five.

Keep those crop marks on; if you don't need the crop marks and you just need that extra bleed area, you can obviously turn off the crop marks option, and that will exclude those corner crop marks while leaving that extra bleed around the edges. But we're going to leave the crop marks on and click on "Export PDF."

Once this finishes exporting, we should get a new PDF with five pages, all with the bleed of 5 millimeters included and those crop marks as well. This is just optimizing the pages; it's going to save that so we can add that to our desktop. And if we open up that file, we'll just open it up in Preview, and again, you can see here that the crop marks have been added. We've got a 5-millimeter bleed area, and the crop marks are being included.

That's looking really good. And as I said, the contrast will change based on the background color, so if you've got a darker background or a lighter background, the plugin will automatically make sure that those crop marks are visible, and that's going to make sure that you're not getting invisible crop marks. If you're using a dark background or a light background, it's always going to show up as you would expect. That's looking really good. That's basically giving us our extra bleed area with the background included, so we're going to get a nice clean crop once that gets sent off to the printer, and that's going to look really good with those crop marks included.

That's basically it. If you've been wondering how to automatically add bleed and crop marks to your Figma PDF exports, this is a really quick way of going about it, just with that one click of enabling the "Add Bleed" toggle in the TinyImage Figma plugin. You can customize those millimeters here—you can even go down to, you know, half a millimeter if you really wanted to. But again, 3 millimeters (mm) is pretty standard, so I would probably just leave it at that unless your printer specifies otherwise.

You can also add or remove those crop marks along with the bleed, and don't forget you can set the CMYK color profile if needed, which is super useful for print. This setup is going to get you most of the way there for print-ready PDFs. I hope this has been helpful if you've been wondering how to optimize your PDF exports from Figma for print with CMYK, bleed, and crop marks. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.