How to remove black borders from links in Figma PDF exports using TinyImage

Video Transcript

Today I'm going to be showing you a quick tutorial on how to get rid of these black border outlines around your links in PDF exports from Figma.

We're going to be doing this by using the TinyImage Figma plugin, and I'll show you how to do that now; if you go to your Figma file that you want to export the PDF from and go to the top icon bar here and just click on the "Resources" icon and then search for "TinyImage", and under the "Plugins" tab you'll see TinyImage pop up. Just go ahead and click on that result, and then you can run the Figma plugin by either clicking on the "Run" button here or you can save it to your Figma plugins list for later by clicking on the "More options" icon and then clicking on the "Save Figma plugin" icon here. I've already saved it to my list, so I'm going to go to my Figma canvas, I'm going to right click, I'm going to go down to "Plugins", then I'm going to go down to "Saved plugins" and click on "TinyImage"; and that's just going to load up the Figma plugin that we just saved a second ago.

In this example I've just got a few different frames here, and this frame in particular as we saw in the Figma PDF native export over here that I exported natively from Figma, it includes this black line around the links. I've got a link here, and I've got a link here on my text, and I basically want to get rid of that link border from my export. The way you can do that in the TinyImage Figma plugin is just by clicking on the "Create PDF" button in the top header. if you click on that it'll give you a list of all the frames in your current page, and you can deselect those or select them as you need to and sort them by whatever order you want; you can manually sort them or just sort them visually by where they appear on the canvas.

I'm going to leave all that alone for today, and the setting that you want to make sure is turned off in this case is the "Outline Links" toggle. If you turn on that setting in the Figma plugin, it's going to automatically include those default black borders that Figma includes. By default, this setting is turned off, which means that it's not going to include those black border Lines around your links in the PDF exports, but if you do want to keep them on for whatever reason, you can do that by enabling the "Outline Links" option, but again for today I'm just going to be turning that setting off.

Now I'm just going to click on the "Export PDF" button to export a compressed PDF with those borders removed. I'm just going to save that to my desktop, and now if I open up the new PDF that we just exported and go to that slide, you can see here that the links are still intact, so it's going to Google for these two links, but as you can see the links are actually clean; they don't have that black border around them as you can see in the default Figma PDF export. I've just switched back to that one you can see here that the links automatically get that black one pixel black border outline box around the PDF links, and in the TinyImage export with the "Outline Link" setting turned off, you can see that the links are still there, but they're not getting that black border box outline added onto them. The design matches what you've actually got in Figma with the underline, but not with that border box outline that you didn't add in the Figma file.

If you want to try that out, you can try it out now; I'm just going to show you another example if you're interested on how to export single frames into individual PDFs as well. If you want to know how to do that, I'll quickly go through that now, otherwise feel free to stop watching now; but I'm just going to go through that for you now so you can see what that looks like as well, and show you where the setting is for individual PDF exports, too. What I mean by that is the option we just used a second ago to create a single PDF basically merges a bunch of frames into one PDF file, but let's say you wanted to actually export these frames into individual PDF files, so you can do that as well. The way you do that is just by selecting the frames that you want to export into individual PDF files, I'm just going to select all of them in this case, and then in the right hand side column just click on the "plus" button next to the "Export" label; click on that, and then by default it's going to select "PNG", we're going to click on that "PNG" option and change it to "PDF".

I'm going to click on "PDF" now and you can see when I click on any of these frames we've now got the PDF export setting added; now all we need to do is refresh the exportable layers in the TinyImage Figma plugin. You can do that by clicking this button down here, or clicking on this little "Refresh" icon here, and that's just going to load up the new export settings for each of those layers. Now we can see in our default TinyImage view that we've got all of these PDF settings and those are on each of our frames. We can select which frames we want to export, so I'm just going to export the first few, and what we need to do is again go to the general "Settings" icon; I'm just going to click on the settings icon up here in the Figma plugin, and again, we're just going to make sure that the "Outline Link" setting is turned off, which it is by default, but if you've turned that on before, just turn that off if you don't want to include those. That's all you need to do; we've got that turned off, I'm going to click out of that, and this time I'm not going to click on the "Create PDF" button, I'm just going to click on the regular "Export" button and what that's going to do is go through the four different PDF exports that we just specified, and instead of combining the frames into one PDF file, it's going to export that into a zip.

You can unzip the file, open up the folder, go to your PDFs, and now you can see we've got four different PDF files here. I can now open up that individual file, and again, we can see that the link has got the border removed; it's just the plain link which still links out, but it doesn't have that one pixel solid black border outline around the links that Figma usually exports with default PDF exports natively. Of course, we can open up any of these frames as single PDF files and that's what that looks like there. You've really got two options there; you can export the frames as individual PDFs, or you can use the "Create PDF" button to merge a bunch of frames into one PDF file, but the common thread amongst all of these exports is just to make sure that the "Outline Links" toggle in the TinyImage settings for PDFs is turned off if you don't want to include that PDF border box link outline that Figma adds in automatically.

As long as you've got "Outline Links" turned off, the one pixel black border box outline that normally gets included around your PDF links from Figma will be removed; and again, if you did want to include that for any reason at all, you can just enable that setting again and that will export it the same way that it normally does with the default Figma exports. That's going to be all for today, I really just wanted to cover that one thing because I know that some of you out there have been asking for a way to remove those default borders that come with the PDF exports from Figma natively; this is now going to do that for you automatically by default, as long as that toggle is off, which it is by default. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.