There was a bug documented back in July that is still live. Every time I export a PDF, my links get this weird black box added around them.
Old bug report: https://spectrum.chat/figma/general/pdf-links-with-ugly-borders-how-to-remove-them~46de5a36-2288-48ac-81c1-4dacc1b01f15
How it looks in Figma:
How it exports to Adobe Acrobat:
Best answer by Gleb
Note that this is only a problem in Acrobat. If you open this doc in the browser (Chrome, Edge, etc.), you won’t see these outlines. There are a couple of ways to solve this:
While you have the PDF open, click edit PDF, then select link → Add/Edit Web or Doc Link. Double click the link that has a box around it and change the link type from “visible rectangle” to “invisible rectangle.” (Sources: Reddit and Musli)
The TinyImage plugin could not only remove these outlines, but also compress the PDF which is often necessary when exporting from Figma as the native PDF export is uncompressed and often results in huge files.
Finally, Niklas Higi on Twitter shared a way to do this programmatically.
/Link and replace it with /Link /Border [0, 0, 0] everywhere using the find and replace text featureIf you’re comfortable with the terminal, you can also run the following command to accomplish the same thing:
sed 's|/Link|/Link /Border [0 0 0]|' original.pdf > fixed.pdf
Note that this is only a problem in Acrobat. If you open this doc in the browser (Chrome, Edge, etc.), you won’t see these outlines. There are a couple of ways to solve this:
While you have the PDF open, click edit PDF, then select link → Add/Edit Web or Doc Link. Double click the link that has a box around it and change the link type from “visible rectangle” to “invisible rectangle.” (Sources: Reddit and Musli)
The TinyImage plugin could not only remove these outlines, but also compress the PDF which is often necessary when exporting from Figma as the native PDF export is uncompressed and often results in huge files.
Finally, Niklas Higi on Twitter shared a way to do this programmatically.
/Link and replace it with /Link /Border [0, 0, 0] everywhere using the find and replace text featureIf you’re comfortable with the terminal, you can also run the following command to accomplish the same thing:
sed 's|/Link|/Link /Border [0 0 0]|' original.pdf > fixed.pdf
None of two free solutions work. Any other ideas (except buying Acrobat)?
You can try some online PDF editors and/or compressors.
Hello Gleb. Could you please expand on the terminal solution, at least 3 easy step what needs to be done. Thanks a lot!
The full command is listed there, you just need to replace input and output pdf with paths to your specific PDF and to where exactly you want to save it if not in the current folder.
Thank you!!! Got it)
Hi hi, very new to terminal!
but i keep getting response : No such file or directory. I have changed the input and output names of the pdf in my command to match what the file name is and the new file name. How do i specify the paths to the file?
this is what I popped into the terminal :
sed ‘s|/Link| /Link /Border[0 ,0 ,0 ]|’ ash.pdf > terminalfix.pdf
@Gleb - Thanks so much for your solution with screenshots using Adobe Pro DC (the paid version of Adobe Reader). I easily removed the boxes around my links!
***Anyone who doesn’t have the paid Adobe Pro (just the free Adobe Reader), I was able to sign up for an Adobe Pro 7-day free trial so that I could make these .pdf edits (and then cancelled the trial before being billed).
OMG I got it to work. Ok so here is what I did. (I am on a Mac btw)
Niklas cmd did not work for me because the [0 0 0] had camas in it*
@Mitchell_Malinin great callout about the commas. By removing commas the same process works in TextEdit allowing anyone with fear of Terminal to make the same global change to their PDF’s
I have the same issue… Removing the outlines in adobe works, but I usually work with documents that have about 50 links…
Isn’t there a way or some kind of setting in figma that prevents this from happening?
This worked for me. Thanks for sharing
Hi @Mitchell_Malinin @Joel
I don’t know anything about Terminal. I’m not even confident about how to replace your sample text with my file paths. Could you please really spell it out for me? Let’s say my file is named “Resume.pdf” and is in my Downloads folder. What is the EXACT command that I need to enter? THANK YOU!
@David10 m not comfortable with terminal either so I set up the below process using TextEdit.
Removing strokes from invisible links:
· Export PDF from Figma as usual.
· Open PDF with TextEdit (free app on mac)
· Cmd-F to search for “/Link” (don’t include quotes)
· Check box in upper right “replace”
· In the replace field paste “/Link /Border [0 0 0]” without quotes.
· Click on the “all” button on the right side.
· Click on the “done” button.
· Save.
· Open file in acrobat to verify it still opens (it should)
· All links are now invisible but still present.
Hi, in my situation the third way to do this programmatically is working in half. The border around the text disappeared but the picture in my pdf don’t want to be display. Do you have any idea why is it?
Is the picture displayed before removing the borders? If not, this is not related to this issue and I would advise you to open a separate topic with your issue or search for other similar ones.
Yes, the picture was displayed before removing the borders. I did a test and open the pdf file in plain text editor (Windows Notepad) and didn’t do anything only saved the file and picture also don’t display. It looks like a problem of loading a pdf file in Windows Notepad. Do you try this solution on Windows or only Mac?
The PDF format is universal so it doesn’t matter which OS you use. However if you are experiencing issues with one method, try another one. You can also try to remove commas from the border attribute to see if it has any effect. Or try a different text editor just in case.
Thank you, I tried another text editor and download Notepad++. Now everything works properly 🙂
Thank you for sharing! Just found out about this issue today and Notepad++ is what made it work for me 😀
Guys, I found a really easy solution to this problem. There’s a free Figma plugin called Pitchdeck which can allow you to add links to frames in your design, then export in pdf format without any issues. I followed the guide of this youtube video
And it worked like magic. 👌
seriously thats it? figma cant export the most universal format without code hacking. come on guys, lets be professional
wrong, not a client ready solution. doesn’t export all pages at full resolution (very low res on screen ready 200ppi pngs) and no pdf spec before saving. its like whoever designed this plugin and figma has never made a pdf. ahhh ux/ui idiots
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
