How to export clickable interactive PDFs from Figma using Pitchdeck

Video Transcript

Today, I’m going to be showing you how to export a clickable interactive PDF directly from Figma using the Pitchdeck Figma plugin.

The first thing we need to do, if you haven’t already done so, is jump into the Figma Community, search for “pitchdeck”, and you’ll see a result called “Pitchdeck Presentation Studio” pop-up. If you haven’t already installed it, on the right hand side over here, there’ll be a button that says “Install”; if you click on that, you’ll see it change to say “Installed”, and once you see that you can jump back into your project and we can get started.

I’m just using a simple presentation deck design I’ve taken this from the Figmatic templates website, if you go https://www.hypermatic.com/templates/ you’ll be able to grab some free Figma presentation templates from there. I’m just using the “Wellness” template, which you can duplicate from the website if you want to follow along with this tutorial, or you can use your own deck and do it that way, of course.

The first thing we’re going to do is just right-click anywhere, go down to “Plugins” and click on “Pitchdeck Presentation Studio”; that’s just going to open up the Figma plugin that we just installed a moment ago. Now, if you if you’re new to the Pitchdeck Figma plugin, there’s some other tutorials on our YouTube channel that you can follow along with, but today we’re just going to be focusing on the URL and slide links tab in the right hand column of the Figma plugin.

The first thing to note is you can apply a link a slide link or URL link to any child of a layer of your frames. If you open up your frames panel, you can see here we’ve got all these different frames and they have different children; for example if we go down to frame six or slide six, you can see we’ve got two different elements in here; we’ve got an image and we’ve got a text panel, so what we can do if we wanted to is add a link to any of these elements through the Figma plugin. For example, if I wanted to link this image to a different slide, I can click on this drop-down list I can see a list of all of my slides in my presentation or my Figma file, and I can click on any of those to link to it. If I wanted to link to slide 13, I would just click on this option, and now that image has a link to slide 13 on it. Likewise, if I wanted to link this other panel to a website for example, I could grab the templates page that we just grabbed this file from, so I could copy that URL and I could paste it onto this frame and that would now add a link onto that frame which links off to the website we were just looking at.

You can go ahead and do this to any elements any child element of any frame that you’ve got in your file or your presentation. For example, you could link the welcome message to a different frame; we could just link that directly to the next slide, so we’re on slide two currently, which is why we can’t link to it, and we can just link that over to slide three. This would be an easy way to add calls to action or links inside of a presentation deck or an interactive PDF deck that you want to link to other frames from. For example, this little app mock up here which has got the “start” button on it, perhaps you’d like to link that to a different frame that actually has the next part of that design that you could look at. That might be on slide 14, for example, so I’m just going to click on that and I think that’s enough links to get started.

We can see what that actually looks like in a clickable interactive PDF export now. Once you’ve set up all of the links that you want to add onto your frames for your interactive PDF, you can go ahead and export it by clicking on the “Export Presentation” button in the top right hand corner of the Figma plugin, and we want to change the presentation export format by clicking on this drop-down list here and going all the way down to the bottom to the “PDF deck” option here. I’m just going to leave it as “150 dpi” quality; you can go up to “300 dpi” if you want a print resolution deck, but “150 dpi” is really good for screen. I’m just going to leave that there, you can add a password to the deck if you wanted to, but I’m just going to leave it as is for now. This vector path option you can just leave disabled for now, too. I’m going to click on “Export to PDF” and this is going to go through all the frames in my Figma slide deck and it’s going to generate a compressed clickable interactive PDF file for me, and once it’s done it’s going to ask me to download it to my computer.

It has just finished exporting the interactive PDF from Figma for me, so I can now download it by clicking on the “Download your .pdf file” button, and that’s just going to let me download it to my desktop. I’m going to click “Save”, and you can see up here we’ve actually got the file on our desktop now. I’m just going to just going to double click on that to open it up in the regular “Preview” app on Mac. I’ll just scale that down a bit so we can get a good look at it; okay, we can see here it’s exported our entire deck from Figma as a clickable interactive PDF. If I scroll down, you’ll notice that if I hover over this area here you’ll see there’s a little tool tip that says “Go to page 3”; if I click on that link, it immediately jumps me over to page three. We haven’t added any links to page three, so we can select the text and and that’s all fine, but there’s no link on this page. If you remember, we did add a couple more links; down on this frame here we added two links, so if we again hover over them you can see on the right here we’ve got a tooltip that says “Go to page 13”; I can click on that, and that immediately jumps me down to the page 13 that we linked to.

We also added another link to a website as well, so I’m just going to scroll back up to there, and if I hover over the left hand side you can see that the tooltip is different it’s saying that it’s going to link me “hypermatic.com/templates”, so I’m going to click on that and you can see there it’s opened up my browser for me from the PDF, and it’s gone to the URL that I added in the Figma plugin. I’m going to scroll down again, and I think we added one more link to the app home screen. Again, you can see here it doesn’t link outside of the app home screen design, it only links on that square or that rectangle area that we specified in the Figma plugin. If I click on the “start” button or just this entire anywhere in this image, click on that, and again it links me to that same slide in the deck with the the next screen of the app. This is a fully clickable interactive PDF; you can send this to anyone, it doesn’t really matter what software they’re opening it with, these links will be contained and they’ll be they’ll be clickable. This can be really handy if you’re putting together a presentation deck in Figma that contains a mock-up or it contains some sort of flow that people can actually click through, it can be really handy or if you just want to include links to URLs or external URLs if you’ve got some references or something in there that people can look at, that can be really handy as well.

I’m just going to close that off now, and go back to the Figma plugin. Of course, you can you can edit these links; if you reopen the Pitchdeck Figma plugin and you want to export another clickable interactive PDF from Figma, you can do that as many times as you want. All of your links will be saved, so if you click back on any of those frames, jump back to the “URL/Slide Links” tab, and you can see here those links have been carried over from the last export. We can go ahead and change those if we want, and it’s worth noting if you do want to remove any of those you can just click on the top option, which is “Link to an external URL”, and then just just make sure the the input is actually clear. If I wanted to remove the link there, I’m just going to select that text and remove it, and now that will have no link on either of those parts of the frame when you go to export your next clickable interactive PDF from Figma again. That’s just the way you can clear those links if you decide you don’t need one, or you just want to get rid of it, that’s all good as well.

The other thing I wanted to just quickly note, too, is if you do link to another slide; for example, here we’ve linked to slide 13, which is the next slide. If I go ahead and remove that slide from the deck; for example, if I uncheck that, you can see here it’s automatically removed that link from from the actual element. However, if I enable that again, it has saved it behind the scenes, but it just won’t be included. If I do strip that out now, so I’m just going to uncheck that from the entire deck, I’m going to leave that as is, and then I’m going to export another clickable interactive PDF from Figma by again clicking on the “Export Presentation” button, going down to “PDF deck”, exporting the interactive PDF, and this time it should export the PDF without that frame, and it should also not include the link on that element.

I’m just going to reopen the new clickable interactive PDF that we just exported from Figma, scroll down, and you can see down here this element which we did have a link on before is now completely static; it doesn’t have any interactivity or any links, and you can see here it has skipped over the frame that we excluded. This time it didn’t include the app mock-up that we saw last time because we unchecked it in the Pitchdeck Figma plugin; it has completely removed that from the exported interactive PDF deck, and therefore removed the link from this element because there’s nothing to link to. That’s just something worth keeping in mind if you are doing that, and just the very last thing I’ll show you, somewhat related to that as well, is the way that the the links work, too.

If you if you go back to the “URL/Slide Links” tab, and in this last example I’ll just show you show you what I mean here. For example, if you link to let’s say slide 7, so we’ve linked to slide 7 which we can see is the number there, and we’ve also got the frame title, which is important to note, in brackets. If I go ahead and now change the order of this slide, so if I make slide 7 into slide 9, for example, you can see here that it actually changes it changes the number of the slide that it’s linked to, but the name of the slide is actually kept the same. It’s just a little bit of a note in case you are moving those things around, it’s totally fine, it’ll keep those those links, but it’ll keep the link to the frame itself that you originally linked, to not the number. It’s just a small thing to note, it’s a good thing; it means it’s going to always keep those links to the actual content that you linked to, even if you go ahead and change the order of them; the content that you originally wanted to link to itself will be maintained. If you are including those frames in your into your interactive PDF export from Figma, those will be kept even if you move around the order or remove those references, they’ll all be worked out by the Pitchdeck Figma plugin.

I just wanted to do a quick Figma tutorial on this, as it’s a brand new feature that was highly requested. This has just been added to the Pitchdeck Figma plugin just this week, so I hope if you’ve been wanting to export clickable interactive PDFs from Figma or add links between slides to your to your decks and export them as clickable interactive PDFs, then you can now do it using the the Pitchdeck Figma plugin. I hope if you’ve been wanting to do this, or if you’ve been waiting for this feature to drop in the Pitchdeck Figma plugin, I’m happy to say that it’s finally here. If you do use it, I hope you have some success with it, and please stay tuned for more, because we’ll have more tutorials just like this one coming very soon. As always, thank you for watching and we’ll see you in the next one.