How to add clickable URL links to Figma presentations using Pitchdeck

Video Transcript

Today, I'm going to be showing you how to add clickable links to your collaborative presentations that you've designed in Figma. These will be links that you can click while you're presenting, which will take you to external web pages, or any URLs (or links) that you want to include in your presentation.

Tto do that, we need to install a Figma plugin called "Pitchdeck". If you haven't already done that, you can go to the top left of the Figma toolbar and click on the little Figma icon, and if you go to "community" and then go to search; the search term that you want to use is "Pitchdeck", and under the plugins tab you will see a result called "Pitchdeck Presentation Studio", and if you haven't already installed it you'll see an "install" button on the right hand side that you can click, and when you click on that it'll change to look like mine, where it says "installed", and it's got a little checkmark on it; once it says "installed" you can jump back into your Figma file with a collaborative presentation slide deck design, and we can get started.

I'm just using a design that I came up with based on Dieter Rams "10 Principles for Good Design", and this is just a slide deck that I came up with and designed in Figma. The idea is that I want to take this slide deck, turn it into a real presentation and include some links in the presentation that I can click out to while I'm presenting. The first thing we need to do is start the Figma plugin that we just installed, and we can do that by right-clicking anywhere, going down to "Plugins", and then finding the "Pitchdeck Presentation Studio" name and clicking on that, and that's just going to fire up the Figma plugin that we just installed, the Pitchdeck Figma plugin. What it's going to do is, it's going to check all of our frames in the top level of our page and it's going to treat every single frame as an individual slide as part of this presentation, and it's also going to load in all of the elements from each frame and those are going to make up all the bits and pieces in each slide.

Now that that's loaded, you can see here that we've got all of our slides coming from Figma, the presentation designs look exactly the same as you would expect from the the original, and you'll also notice that these elements are coming in one after the other, and that's because Pitchdeck has loaded them up as individual parts of each slide. if you go through and and click through them, you'll see on my screen that I've got some animations applied to these elements, too. I'm not going to cover that in this Figma tutorial, but if you're interested in seeing how all the animations work that are sitting on the right hand side here, you can find another Figma tutorial on our YouTube channel, which goes for about 30 minutes and does a really deep dive on adding animations and presenting this, and showing you how it all works in depth; but for today I'm just going to be showing you how to add clickable links to your collaborative presentations in Figma, and then we can have a look at what that looks like in a browser.

To start with, I guess the first thing we need to do is get the the slide ready that we want to add a link to. Once we've done that, I'm just going to use the "intro" slide for now and the first thing you want to do is go up here on the top right hand side of the Figma plugin where it says "animations", and that's actually a select box; you can click on that, and when you click on it you'll see a few different options here; it's currently under "animations", but we want to go down to the option that says "Clickable URL links", and if you click on thatl you'll see here that the context changes from some animations and a timeline, over to some inputs. These inputs just text fields; you can you can paste text in there, and as you can see from the placeholder it's saying that it wants a URL or a website link inside of those text fields. Each of these text fields is attached to an element inside of the frame; you can see when we hover over it, this one's hovering over the photo, this one's hovering over the subtitle, and; we can attach different links to different parts of our frames. The first thing I'm going to do is just grab a link to try it out with.

If I go to Chrome, I've already actually got a link saved; this is the "10 Principles of Good Design" link where I got the images from, and I'm just going to go to my URL bar in Chrome and copy/paste this little URL; and now that I've copied that what I want to do is, I want to attach it to the photo of Dieter Rams in my presentation; now that I've got the layer selected or hovered in my Pitchdeck Figma plugin I'm just going to click on the text input, and now that's active I can paste it by using Command + V (or Control + V if you're on Windows); I'll just paste it in, and you can see there, it's pasted in the link as you'd expect. If I hover over it now, the cursor has changed to a pointer which indicates that there's a link on there; that's now on there, you don't have to click a "save" button or anything, it just attaches itself to that element.

We could also apply it to another element if we wanted to; if we wanted to add the same link to the "subtitle" or the "caption", I can paste that on there as well, and now that also is a link. If I grab another link just to add to another frame, if I switch to my next tab, I've just got a link to the Dieter Rams documentary website; this is the "Rams" documentary. Again, I'll copy that URL and jump back into Figma, and maybe this time I want to add it to my next frame; in this case I'm going to add it to the image of the radio here; again, I'm going to click on the element that I want to add a link to, click on the text input, paste it, and now that's pasted in, you can see that we've got a link there that will actually open if I click on that, but I've already got it open in my browser; I know where it goes, but if you click on that, it'll open if you just want to confirm; but it will definitely open this link here.

Now that we've got that added again, we can add this to our little caption down here as well; I'll paste that in, and now that's on the caption, we can see right there and that's really all I want to do at the moment. I mean, you could add URLs to any of these elements on any of the frames, but for now, just to show you how it works, I'm just going to leave it fairly simple with the first two, and and we can have a look at what that looks like.

To actually make this work, what we need to do is in the top right here, you'll see we've got this little select box that says "Pitchdeck URL" and that's selected by default. There's some other export formats here which are under the "static" label, such as "PDF", "PowerPoint", "Keynote" and Google Slides; this will export our collaborative presentation from Figma to those to static formats, and will not include any clickable links at the moment (in this version of the Pitchdeck Figma plugin, at least).

What you want to do is, select the top option of "Pitchdeck URL" and make sure that's selected, and then if you haven't uploaded a presentation yet, this button will say "Upload Presentation"; but because I've already done it before, it's telling me that I can update this presentation, and that will update the link for me. If I click on "Update Presentation" now, what this is going to do is, it's going to generate all of these frames for me and turn them into a slide deck and then upload all of the images all of the thumbnails, and all of the assets that I need to create a presentation for me. Once that finishes it's going to give me a URL that I can use, and then it's also going to generate a password for me to protect that URL, so it's only me who can who can access it.

We'll just wait for that to finish now. It's just going to upload all those images. I'm on Australian internet, which is slightly slower than you should expect in pretty much any other country, but it won't be won't be too much longer, and then we can jump into the browser and I'll show you exactly what it looks like once we get those animations in there; but more importantly, in this Figma tutorial you're going to see exactly what it looks like with the links functioning as well; those will work as you'd expect very shortly.

It's almost finished now, and once it wraps up you'll get a confirmation message which looks like this. It will tell you that you're secure presentation link is ready and it'll give you a link to that presentation here; you can click on that blue link or alternatively you can copy/paste the URL by clicking on this little "copy" icon. Then the password down here; I've just copied the URL, I've already got my browser open; I'm just going to jump back in there and in a new tab I'll just paste the URL and hit enter. Then in Figma, again, I'm just going to copy the password; now the password is copied to my clipboard and now I can jump back in to our collaborative presentation where it's asking for my password; I'll paste the password in that is copied from Figma from the Pitchdeck Figma plugin, and now I can click login. I'll do that now, and once you've been authenticated, it will now load in the presentation with all of the images and the animations and everything else.

There we go, we've got our presentation. If I just briefly click through it, you can see here that it's looking really good; all of the animations, all of the elements are there as expected, and it's looking really nice. We can jump around to those frames, but more importantly what we have now is, you can see when I hover over these elements where we put our links, the cursor changes to the little hand, which indicates that there's a link there. I can see in the bottom left of the window, the URL that we added into our Pitchdeck Figma plugin; if I click on that, you'll see that it opens up the link that we added; this is the link that we attached.

If I go to my second frame; again, it switches the cursor to the pointer, and now I can see in the bottom left it's going to open up the Rams documentary link. I'll click on this link now, and there we go, we've got our Rams documentary website. That's super cool, that means we can now embed clickable links on literally any element that we like inside of our collaborative presentation designed in Figma; and as long as we point it to the right place, then we can basically go to any URL that we need to from within our presentation; that's pretty cool.

There's a whole bunch of other little features down here that you've probably noticed; and I'm not going to go through them in this particular Figma tutorial, as I covered that in the other Figma tutorial I mentioned before; if you go to our YouTube channel, you'll be able to find a 30 minute Figma tutorial about creating and presenting animated pitch decks using the Pitchdeck Figma plugin, and that will go through the remote control, it will go through the cursor, it will go through fullscreen mode, and all that cool stuff. There's a new feature with numbers; which I can just show you now just toggles indicator down here in the bottom right, you can toggle that on and off and that will give you a number notification while you're actually presenting as well; that's really neat. If I leave my mouse a little bit above, you can see that the toolbar vanishes, so that's worth noting, too.

That's pretty much it; it's really simple to get these links into our collaborative presentation, all from the Figma plugin. Now that I'm pretty much done with my presentation, I'm going to exit the Pitchdeck Figma plugin. If you want to update the links, or if you want to add new links to different elements, you can simply rerun the Figma plugin by going to the right hand side of your Figma page, and in the right hand column here, underneath "Plugin" you'll see a little pancake icon with the word Pitchdeck next to it; if you click on that, that will relaunch the Pitchdeck Figma plugin without you having to go through the right-click menu, and going into "Plugins" and then finding the Pitchdeck Figma plugin, which can be annoying if you've got heaps of plugins installed; this is just a really quick way of reopening it.

I'll leave it there for today; I hope that you've been informed on how to do this now, as I know it has been a common request about how to attach links to your Figma designs for collaborative presentations; this is a feature that I think is really cool in the Pitchdeck Figma plugin. Give it a try if you've been trying to do this, and I hope it works out for you or your team. Stay tuned for our next videos, as we'll be producing many more of these Figma tutorials with tips and tricks on how to do different things in Figma. Until then; thank you, as always, for watching.