Bug: Exporting to PDF adds a random box around my links

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:

10 Likes

This happens to me too. Has it been solved?

1 Like

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:

1.

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)

2.

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.

3.

Finally, Niklas Higi on Twitter shared a way to do this programmatically.

  • Open the PDF file in any plain text editor
  • Search for every occurrence of /Link and replace it with /Link /Border [0, 0, 0] everywhere using the find and replace text feature
  • Save the file

If 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

7 Likes

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.

1 Like

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).

1 Like

OMG I got it to work. Ok so here is what I did. (I am on a Mac btw)

  1. I downloaded the pdf and it saved do my downloads folder
  2. CD into the downloads directory (folder) in terminal
  3. Since the pdf is in the downloads folder I just ran the cmd
  • sed ‘s|/Link|/Link /Border [0 0 0]|’ Resume.pdf > fixed.pdf

Niklas cmd did not work for me because the [0 0 0] had camas in it*

3 Likes

@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

1 Like

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?

5 Likes

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!

1 Like

@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.

14 Likes

Brilliant! This worked. Thank you!!

1 Like

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?