How to embed Vimeo videos in Figma presentations using Pitchdeck

Video Transcript

Today I’m going to be showing you how to embed Vimeo videos into your Figma presentations using the Pitchdeck Figma plugin.

To get started, if you just go to your Figma file, click on the little “Resources” icon at the top here, search for the word “Pitchdeck”, and if you click on the “Plugins” tab, you’ll see the Pitchdeck Figma plugin pop up. To run that Figma plugin, all you need to do is click on either the “Run” button here, or you can click on this little “More options” icon and then click on “Save Figma plugin” and that’ll save it to your Figma plugins list for later. I’ve already done that second step, so I’m going to right-click on my canvas, go down to “Plugins”, go down to “Saved plugins”, and then click on the Pitchdeck option; that’s just going to run the Figma plugin we set up a second ago.

If you’re new to the Figma plugin, the way that it works is you can basically create multiple Figam frames on your Figma page and those will get treated as slides in your presentation over here. Then you can add Figma content layers such as text or images, and those will also get treated as individual layers in the Figma plugin that you can add animations, links and embeds to. I’m just using 1920 by 1080 pixel full HD slides, but you can use any size that you want.

To get started all we need to do is find the Figma layer or find the Figma slide that we want to add our video to. In this case, I’m just going to add it to this first Figma slide here; it’s the “10 Principles of Good Design” slide, and instead of having this static image over here, I basically want to use a video of the “Dieter Rams” documentary trailer. If you click on the little icon over here, or the little tab that says “GIFs/Videos/Embeds”, if you click on that, that’ll basically change the context to allow you to paste in embed links. To see a list of the supported embed links you can go to the “Supported Embeds” link here, and that will just take you to this page over here which is the Pitchdeck documentation, and it’ll give you a bit of a list of some of the supported URLs you can use; but for today, as I mentioned, we’re just going to be focusing on how to embed videos from the Vimeo platform, and embed those into your Figma slides that you can then present after you’ve uploaded them from Figma.

I’ve got a little trailer here on Vimeo, and this is just the trailer for the “Dieter Rams” documentary. All you need to do is find the video on Vimeo that you want to embed into your Figma presentation, then copy the link from your browser and paste that into your Figma plugin. If we go to our Dieter Rams slide image here and just paste that into the embed field, we can see there that the video is being embedded, it’s automatically playing, we’ve got the controls turned on as well, so we can actually flick through those if we want to, change where the video plays at. You can turn that off if you want to hide them, so you can see there that we hid those controls, you get really clean playback without the controls ever popping up, but in my case I’m just going to leave the controls on to make it a bit easier to control once we upload the presentation from Figma.

Now that we’ve got our Vimeo from video embedded to our Figma layer, all we need to do to actually present it in the browser is click on the “Export Presentation” button in the top right hand side of the Figma plugin, go down to “Upload Web Presentation”, or “Update Web Presentation” in this case, because I’ve already created this link before. I’m just going to hit “Update Web Presentation” now, and this will basically automatically upload all of our slides and images from Figma, including the Vimeo embed, up to the Pitchdeck presentation web app.

It’s going to give you a link that you can use with a password, or if you don’t want to use the password, you can just use this passwordless URL here. I’m going to copy that, I’m going to go back to my browser, I’m just going to paste that in, and if we hit “Enter”, that will load up our presentation. There we go, that’s what it looks like; it’s looking really nice in our presentation, and we do have the overlapping text which works some of the time, in this case it’s probably not a good idea because there’s so much text inside of the trailer as well, but that’s more of this design decision. All of the other slides are showing up as expected; these are just static slides, they just have Figma images and Figma text content that’s being animated, but as we know our first slide has that Vimeo video embed.

That’s basically what it looks like; we can switch back into Figma now and close this off, and that’s it. All you need to do is paste in your Vimeo video link into this little embed input field in the Figma plugin, and you’ll automatically be able to include any Vimeo video that you want and have that automatically embedded into your Figma presentations that you upload to the Pitchdeck presentation app. I hope that’s been helpful if you’ve been wondering how to embed your videos from Vimeo into your presentations from Figma, this is a really quick way of doing it. As always, thank you for watching and we’ll be back soon with more Figma tutorials like this very soon.