How to embed videos and GIFs in Figma presentations using Pitchdeck

Video Transcript

Today, I’m going to be showing you how to embed videos and animated GIFs inside of your collaborative presentation slide deck designs in Figma, and then use those as a real presentation that you can take straight out of Figma and actually present to people with those GIFs and videos in your presentation.

To see how to do this, we need to install a Figma plugin called “Pitchdeck”. If you haven’t already done that, you can do it by clicking on the Figma icon in the top left, and then going to “community” or “plugins” and in search bar if you type in the term “Pitchdeck”; underneath the plugins tab, you’ll see a result called “Pitchdeck Presentation Studio”, and if you haven’t already installed it, you’ll see a button on the right hand side that says “install” and after you’ve clicked that, it’ll look similar to mine where it’s got this little check mark, and it’ll say the word installed” next to it. Once it looks like that, you’re ready to go and you can switch back to your Figma project file.

I’m going to be using a pitch deck (or a slide deck) that I designed in Figma based on Dieter Rams’ “Ten Principles for Good Design”, and the goal for today is to turn this collaborative presentation slide deck design from Figma into a real presentation; and not only a real presentation, but a real presentation that contains GIFs (embedded GIFs) and embedded videos from YouTube and Vimeo.

To get started, we need to run the Figma plugin we just installed; if you right-click anywhere and go down to “plugins”, and then just go down to “Pitchdeck Presentation Studio” and click on that; that is going to fire up the Figma plugin that we just installed, the Pitchdeck Figma plugin. What it’s doing right now is, it’s looking through all of our frames in the left-hand side here and it’s treating each frame as an individual slide; every parent level frame will be loaded into Pitchdeck as a slide and then all of the elements inside of each frame at the top level inside of each frame will be treated as the elements inside of each slide as well.

Now that it’s loaded, you can you can see what I mean. You can notice that we’ve got our slides all loaded in as expected, they’re identical to what we have in our Figma design. You’ve probably noticed that there’s a couple of things that are different; the first thing that is different is the order of these frames; in Figma the order of these frames go from intro at the bottom to principle 10 at the top; it’s fundamentally in reverse to what we’re seeing in Pitchdeck. The reason for that is Pitchdeck automatically reverses the order of the frames because when you’re designing things in Figma typically, if you’re copy-pasting the frames, Figma will will put it next to the frame that you just copied, but in the slide order (or the frame order), it will actually insert the layer above the frame every single time. You end up with something like this where the latest frame or the last frame as at the top and the first frame is at the bottom; Pitchdeck automatically reverses it by default, just to save you the trouble of reordering the frames in Figma

Having said that, if you do need to change the order of the frames, you can do that very easily in the Pitchdeck Figma plugin just by clicking into any frame, or you don’t even have to click you can just hover over any of the drag handles to the left of any slide, click and hold that with your mous, and then just drag it up and down; and you can see there that it just reorders it. Now we can move three after four I can move that back you can move any slide around in any order and it’s worth noting that this will not affect the ordering of your Figma file, it’s just telling Pitchdeck what order you want these slides to be in when it exports a presentation deck from the Figma plugin.

Now that we’ve got that sorted out, we’ve got our order that we’re all happy with from 1 to 10 and the intro frame; you probably also notice that there’s some animations going on and these aren’t coming from your Figma design, again, these are coming from the Pitchdeck Figma plugin. The Pitchdeck Figma plugin allows you to apply animations to any of your layers on any frame, and because I’ve already designed this and I’ve run this Figma plugin before, I’ve already gone through and added all my animations to each of these elements. By default, they’ll be turned off when you first open the Figma plugin in a project, for the first time everything will be set to “no animation”; that just looks like that, nothing moves, but you can of course change that and add your own timings and your own speeds.

You can also copy paste those animations really easily just by clicking on the “copy” button and then pasting it on any of the other layers on any other frame or any other slide. The other thing that you might notice is the speaker notes section down here; I’ve covered this in another video which goes over how to do all the animations how to set up the speaker notes, but this is just a free text field and you can write anything you want here; I can write “intro to the presentation” and there may be a note to myself to “talk about Dieter Rams history” or something like that; that’s that’s really all that does, it’s just a way for you to add notes that can be used later, which aren’t audience facing, these will be used when you go to present; you’ll be able to see them as the presenter but the audience won’t. That’s available on every frame every slide, you can customize those per slide and get them later when you go to present it.

Now that we’ve covered the slide order the speaker notes, and briefly touched on the animations, what I want to talk about today is showing you how to embed GIFs and also embed videos from YouTube and Vimeo into your collaborative presentation design in Figma, that we can actually present with to an audience. To do this, we need to take our mouse over to this heading here where it says “animations”, and you can see this is actually not a heading, it’s a select box. With this select box, we can put our cursor over and this is now clickable; if I click on “animations”, we get a few more options; the default is “animations”, which is showing us all these animation settings, but the next the next option is to “Embed GIFs and YouTube or Vimeo URLs”; if I click on that one, you can see the the options here have changed; the layers are all still the same, we can still see all of our layers that we had in the animations, but the timings and animation names have been replaced with an input box for each each element. This box here as you can see by the placeholder indicating it, these are for pasting in links, and as the title says, we can paste in URLs for Vimeo, YouTube or just a GIF. I’m going to show you all three of those just to show you what they look like and how they work.

I’m just going to open up the browser and load up a few pages that I’ve already set up beforehand. These are three links that I’ve set up related to my presentation; I’ve got a YouTube video from the Dieter Rams documentary, I’ve got a Vimeo video showing the “Ten principles of good design” clip, and then I’ve also gone to Giphy and I have loaded up a a looping GIF of Dieter Rams getting angry at his engineering team. I’m going to show you how to use all of these in your presentation.

The first thing we need to do, is pick which element we want these these videos of GIFs to show up. For now, I’m just going to load it onto the Dieter Rams photo on the intro slide; if I jump to my website again; the first thing I’ll do is just copy the GIF and show you what that looks like. If I copy the GIF, you can see here this is just a link to the GIF file; that’s one we want, you want to link that links to a “dot GIF” file in the URL. If I go back to my file I’ve just copied that that URL, and if I hover over my layer which has Dieter Rams photo, click on the input and then press Command + V (or Control + V, if you’re on Windows) and if you paste that in there, you’ll see immediately the GIF has appeared; it’s embedded that GIF in place of whatever image was there before. The image from our slide up here will not be rendered, it’s just going to show this GIF; you could put a placeholder image there if you want; if you want to swap out a video or swap out a GIF later, that might be a good way to do it; you can easily easily swap that out. So, that’s the GIF, and now we can try out the other ones as well.

If I jump back to my browser, this time I’m going to use Vimeo. If I just copy this URL, and notice that I’ve just copied the URL itself, I haven’t had to go down to “share” and then go to this embed code and figure out what’s going on there; I don’t need to touch any of that, I can simply just go up here to the main URL of the video, copy that, jump back into Figma; and this time I’m going to delete the GIF. You can see when I remove it, it goes back to the usual image; I’m just going to paste in the Vimeo link that we just copied using Command + V, and you can see here I’ve got my Vimeo embed ready to go. It’s worth noting that this will play on its own once it gets into the presentation that we upload in a minute, but in the preview it’s set to just set to to do nothing, essentially, to not start. It doesn’t keep loading in and over and over and over again because every time you make a change it’ll keep trying to load it in.

The next thing we can try is the the YouTube video. After we do that, I’ll show you what it looks like once we actually export this thing. I’ve just copied again the the YouTube URL from up here, and I haven’t gone to “share” and clicked on the the embed or gone to any of this iFrame code; I don’t need that, all I need to do is simply copy this link up at the top, and I can get rid of the Vimeo link, delete that; and this time I’m going to paste in the YouTube link. Now I have the YouTube embed there, you can see that it’s loaded in and it’s matching up with the video that we expected. The other thing you can do is, it also supports short links; if you did want to grab the short link like this, you can grab that and then I’ll load that one in; that will that will work as well, if you want to use a short link or if somebody sent it to you you can paste it in. Really, whatever link from YouTube or Vimeo you find, you’ll be able to just paste that raw one in there and Pitchdeck will figure out the rest, it’ll embed it for you.

Now that we’ve got that set up, what I can do is, I can actually now export this to a presentation. I might do a couple more, just so we can see what they all look like. I’m just going to grab that GIF, and I’m just going to swap out this image with the GIF of Dieter Rams, and you can see that it’s kept the aspect ratio, it hasn’t stretched it, it’s just vertically centered it; and of course the way you could go about making sure that’s positioned the way you want it would be to create a proper placeholder. For example, I’m using square images here, and obviously this GIF is not square; what you would do if you wanted to position this more accurately is you would get the dimensions or the size roughly of this embed here, and create a placeholder frame or a placeholder rectangle in your designs, and then all you’d have to do is find that placeholder in your list of layers paste in your GIF or paste in your YouTube video or Vimeo video, and that will just work as you’d expect.

I’ll add one more; we’ve got our Vimeo link as well, so we can try all three. Again, I’m just going to copy the the Vimeo link from the URL, and I’m going to swap out this image and again you can see here that it’s just taking over. Let me just see if I might try it on this one; as you can see, you can’t actually click on it in Figma to start playing it, but once you’ll see in a second when we export it which I’ll do in a moment, you’ll be able to actually play this and it will play automatically in your presentation and then you’ll be able to control it with your mouse if you really want to.

Okay, I’m fairly happy with those three for now; what we can do is export this to a real presentation, and I’ll show you what that looks like. To do that, you just need to make sure that your export setting is set to “Pitchdeck URL”; that’s sitting underneath the “animated” group, and there’s some “static” options as well, which I won’t cover in this Figma tutorial, but if you’re interested in these these ones, I’ve created some other YouTube Figma tutorials on our YouTube channel. and if you just go to the channel you’ll be able to easily find how to export your collaborative presentations from Figma to PDF, Figma to PowerPoint, Figma to Keynote, and there’s also a Figma to Google Slides one in there as well.

For today, we’re just going to be looking at the Pitchdeck URL; so, I’ve just selected that, and because I’ve already uploaded this before, mine says “Update Presentation”, but if you haven’t uploaded one before, it’ll say “Upload Presentation”. I’m just going to click “Update Presentation” and that will update the presentation for me; what it’s doing now is it’s going through each of these frames that we’ve set up as slides, and then it’s also going through every single layer of the of the the children of those slides and it’s creating the slides for us and generating the images, generating the SVGs, creating these slide thumbnails, and then it’s basically going to upload it for us. Then it will give us a link a URL with a password that we can then use to view and present this this deck.

Now that that’s done, we can see that it’s telling us that our secure presentation link is ready, which means that we can copy or click on this secure link and also copy the password down here to get access to present the deck. I’m just going to copy the URL and take it into my Chrome window that I’ve already got open and just paste that in there, and if we jump back and grab the password I can just click on this little icon to copy the password and jump back, and then if we paste that in there the login button will become available, so I’ll click on that to login and once this loads you will see our deck as we expected it.

We’ve got the nice YouTube video that we just added into our Figma file, that’s in there now; I’ve just left the mouse untouched for a little bit and that’s why the toolbar is disappeared now, but the video is really clear, it’s I think it’s in HD video and it autoplayed straight away which is really neat. I don’t have sound on, but if you turn your volume up or if you’re using speakers for your presentation you’ll be able to hear all the audio as well, I’ve just got my computer muted at the moment. If you really need to, you can also access the timeline; you can click around and jump through the video while you’re presenting, you can pause it, you can play it, you can mute it and do all that cool stuff.

Then if I jump to my next frame; I can either do that by clicking on the little next button in my my slide controls down here, or I can simply just press the right arrow key; I’m going to do that now and it’s still focused on my on my video. If I jump back down here and click next, now we’re on slide 2, and we’ve got our GIF this is the GIF that we found on Giphy of Dieter Rams going crazy at his engineering team, and that’s just autoplaying obviously and repeating an infinite amount of times, depending on what give you’re using if your GIF is set not to repeat it won’t repeat, but obviously most GIFs tend to repeat; so, that will just keep going for as long as as long as the GIFs there.

The other thing to know is if I go backwards any video that I have embedded, it will get restarted whenever the frame changes or whenever the slide changes; if you go forward and then if you go back, that will restart the video; it won’t pause at all and just loudly start in the middle again, it’ll do that if you did need to go backwards. That’s the GIF loading in nicely, and as I was saying before the animations still gets applied to the video and the GIF, which is really nice; it’s a smooth transition in for those embedded GIFs and YouTube or Vimeo videos. The next one we just left blank, this was the the second principle of design, and we’ve just left it with the Braun juicer there, but if we go to the next frame, that’s where we’ve added our Vimeo embed.

I’m just going to go to the next frame, and there we go, it’s auto-playing our Vimeo embed; it’s really, really sharp I think this is another full HD video, and again, I’m not using my speakers; you can’t hear the audio, but this is just an embedded video with audio if you have speakers on. If you need the audio, just unmute your your television screen, or your computer, or whatever you’re presenting on, and you’ve got to hear that, but that just that just plays automatically; you don’t have to interact with it again, if you wanted to, the controls are there; if you want to engage with the mouse you can do that of course, but in this case I just want to let it run and just play in the background.

Then after that, we’ve just got our regular slides; these are all just as we expected. I’m just going through those pretty easily. I won’t deep dive into the other features of the controls down, here I’ve done a separate video on that that you can find on our YouTube channel, on our YouTube channel; if you go there and look for a 30 minute video which goes into depth about how to apply animations, and how to use the remote control, and the pointer and all that sort of stuff. That’s just a quick demo of the pointer, which does a few different little things that you can do for fun.

That’s roughly it; it’s really easy, you don’t have to do any crazy uploads with your videos, you don’t have to scour your local hard drive or anything and drag and drop images in to Figma, you can purely just link to them online and Pitchdeck will take care of the rest and embed those YouTube videos, Vimeo videos and GIFs into your presentations. I hope that’s been helpful. I don’t think that Figma natively has support for video yet; they do support GIFs, I believe, in the prototypes; but for me personally and for a lot of people I know, video is super important for doing presentations; so that’s why I wanted to add support for some video formats. There will probably be more video formats supported by the Pitchdeck Figma plugin in the future, so stay tuned to these Figma tutorials and our website for more updates. For now, these are the these are the three embeds that you can add into your Pitchdecks or your presentations that you’ve designed in Figma. I’ll close that off now and jump back into Figma.

So that’s it; that’s all you need to do. You can you can play around with this yourself, as I said before, if you want to add in some placeholders; rectangle placeholders or whatever shape you want those embeds, that’s just a really easy way of positioning and resizing them over your frame. If you want to put them in the corner or if you want to do a fullscreen one, you can just make the whole screen a rectangle inside of your slide and then when you rerun the Pitchdeck Figma plugin again, which you can do just by clicking on the right-hand side here this little pancake icon and relaunch it; you could turn that whole rectangle into a fullscreen video embed, and that would totally be cool as well.

I’ll leave you there, and until the next time, thank you as always for watching; we’ll be back very soon with more Figma tutorials just like this one.