Export PowerPoint files with MP4 video embeds from Figma using Pitchdeck

Video Transcript

Today I’m going to be showing you a quick tutorial on how to export a PowerPoint file from Figma with a video player MP4 embed using the Pitchdeck Presentation Studio Figma plugin.

To get started, all we need to do is go to our Figma file and just click on this little actions icon down the bottom here. What you want to do is search for Pitchdeck.

Under the plugins tab, if you click on the Pitchdeck item, you can run the Figma plugin by either clicking on this run button down here, or I’d recommend clicking on the save icon right next to it, which will save the Figma plugin to your Figma plugins list for easy access later. I’ve already done that.

I’m going to go back to my Figma canvas, just right click anywhere, go down to plugins, then go down to saved plugins, and then click on the Pitchdeck item. That’s just going to run the Figma plugin that we saved a second ago.

If you’re new to the plugin, the way that it works is it basically takes any Figma frames in your Figma file and treats those as slides in the Figma plugin, with any child layers in each slide as an individual layer that you can add animations and video embeds and links and things like that on.

For today, I’m just going to be showing you how to embed an MP4 video and export that to a PowerPoint file and be able to play that video in your PowerPoint file directly.

The first thing we need to do is set a thumbnail. This is going to basically be the static thumbnail image that’s going to sit behind the play button in PowerPoint. I’ve basically just taken a thumbnail from this trailer over here. I’ve got this Dieter Rams documentary trailer. I’ve basically just taken a snapshot of this image here and I’ve added that to my Figma file as a regular image layer. Importantly, I’ve matched the aspect ratio of the image to the aspect ratio of the original video as well, just to make sure that all that matches up.

Now that we’ve got our video thumbnail, what we need to do is duplicate that. I’m literally just going to copy paste this layer here, and I’m going to rename this to “video embed.” We’ve got our thumbnail and we’ve got our embed. I’m just going to change the fill for that embed to something solid so we know which one’s which.

I’m just going to change this over here. You can make this whatever you want. This isn’t actually going to show up in the PowerPoint file. This is going to get replaced with a video play button, and all you’re going to see is a play button in PowerPoint. Your video thumbnail is going to be sitting behind that play button, but we need a placeholder layer here which is going to embed the video.

You can actually just make that something a bit transparent. You can do a semi-transparent sort of layer instead, but really it’s just a placeholder.

Once you’ve added that video embed placeholder, I’m just going to refresh the layers over here by clicking on the refresh button. You can now see we’ve got these two layers here. We’ve got a video embed layer and a video thumbnail layer.

Just to make that a bit easier, I’m going to remove the prefix. I’m going to call this one “video” and I’m going to call this one “thumbnail,” just so we’ve got a bit more of an easy-to-access label over here. We’ve got our thumbnail layer and our video layer sitting underneath it.

Now all we need to do is upload our MP4 file somewhere. I’d recommend using something like Dropbox. If you just go to dropbox.com and create a free account there, you’ll be able to drag and drop your MP4 video file directly into Dropbox. That’s just going to upload the video file into your Dropbox folder and allow you to copy a link to that file directly.

I’m going to click on this copy link button over here, and that’s going to generate a link for me directly to that MP4 file in Dropbox and copy it to my clipboard. I’ve just got that link copied now to my clipboard.

I’m going to go back to the Figma plugin. This time, we’re going to find the video layer. This is basically the placeholder layer we just created on top of the thumbnail. We’re going to paste that URL from Dropbox directly into there.

Once that loads up, you should see the video. You can see it playing back here as a little bit of a preview, and that’s looking really good.

Now that we’ve got that added in, I’m going to go to the export menu. We’re going to go to the top right-hand side of the Figma plugin, click on this blue export button up here, and then we want to change the default presentation option from the web URL.

This format basically uploads a sharable web presentation that you can view in the browser and share that link with anyone. But for today, because we’re going to be focusing on PowerPoint specifically, we’re going to open up that export format dropdown box, go down to presentation apps, and click on the PowerPoint option.

Now we want to change one of the settings for our PowerPoint slides options. This option down here called “Include MP4 video URL embeds,” which is currently off by default. If you leave that off, it’ll basically just export this layer here as a static image, and you won’t have the actual underlying video embed included. It’ll just be a static image.

If you do want to include any URL embeds that you’ve added pointing directly to an MP4 file, like the one we just added, you can enable that toggle before you export your PowerPoint file.

Then you just want to click on “Export for PowerPoint.” That’s going to loop through each of the frames or slides inside of your Figma file. It’s going to export all of the text as editable text. It’s going to export each of the images in all of your frames. It’s also going to download that entire video that you’ve just included and embed that directly inside of your PowerPoint file.

The video is actually going to be included in the PPTX file, and it’s not going to have to get downloaded again by PowerPoint or anything like that. As we’ll see, it’s included directly in the file.

Once that’s exported, you just want to click on the “Download your PPTX file” button here and save that to your computer. I’m going to save that to my desktop. All you need to do to open that is just double click on the file.

If you’ve got the Microsoft PowerPoint app installed, which supports the MP4 video embeds, go to your second slide or whichever slide you’ve added your video embed on. You’ll now see that we’ve got this play button. This is something that PowerPoint adds automatically. It’s this play overlay button.

You can see that it’s basically taking the underlying thumbnail that we added here and adding that into the PowerPoint file. If we go back to our PowerPoint file over here, you can see that it’s adding that in.

We can see that by the way this gets dragged and dropped. If you drag and drop that video overlay, you can see that it’s got a slight transparent tint on it at the moment. This is basically the underlying thumbnail that we added.

Now, if we play that video, click on the play button down here, that’s actually going to play the video directly in our PowerPoint file.

This is totally native to the Microsoft PowerPoint desktop app. This is something that it natively supports, and this is the easiest way to get your video embed from the Figma presentation that we added over here from the Dropbox MP4 file and export that directly out to this PowerPoint file.

I believe you can do some more modifications if you want to right-click on the video tag. You can do things like edit alt text or format the video itself. You can increase the brightness or darkness of the video. You can update things like the shape and solid lines and things like that.

For today, I’m just going to be leaving it as is. I kind of like it with the semi-transparent overlay. I think that’s actually really nice. It’s basically replicating the similar effect that we did over here when we added our little placeholder.

You may want to figure out what that looks like if you really want to get an accurate version of what that overlay transparency is. But at the end of the day, it doesn’t really matter because that’s something that PowerPoint just handles anyway.

This is again just a totally empty placeholder layer, and the only image that gets included is the one that you position directly underneath it there.

This is a purely native way of doing this. Just be mindful that this is only supported in the Microsoft PowerPoint app. It’s not supported in Google Slides, and it’s not supported in Keynote at the moment.

Just make sure you’re exporting this specifically to be used in Microsoft PowerPoint. Otherwise, the video embed itself probably isn’t going to work in many other different applications as well.

That’s basically it. I hope that’s helpful. If you’ve been wondering how to get embedded MP4 videos into your PowerPoint files, if you’re designing your slides in Figma, using the Pitchdeck presentation Figma plugin is a really easy way to go about it.

You can upload your MP4 video file to something like Dropbox or another file hosting service of your choice.

The last thing I’ll mention is again just to make sure that the aspect ratio matches up with your original video. Unfortunately, PowerPoint doesn’t support cropping or covering.

For example, if I was to resize this video layer over here and take off the aspect ratio and resize that down to a square, essentially the video would get compressed down to this little inner size. The aspect ratio itself would stay the same. It would look something like this.

If we scale that down as an aspect ratio, the output in PowerPoint would actually look like that. If you’re using a layer that’s square and the video is in this aspect ratio, it’s going to look something like that. The video is going to be contained within that larger Figma size when you go to export that to PowerPoint.

That’s just a really small reminder to make sure that if you’re exporting the videos for the PowerPoint format, you want to make sure that the aspect ratio of the embed—or the video layer in this case that we’ve named—matches up exactly with the aspect ratio of the original video, just to make sure there’s no size differences.

It’s worth being mindful that this only applies to the PowerPoint format. If you’re using the web presentation format, you can size them differently and you can have a weird aspect ratio like this, and the video will cover the video. It will actually do something like that instead of containing it like this.

Because we’re focusing on the PowerPoint files at the moment, I just wanted to flag that in case you were getting confused by using a different aspect ratio. That’s going to be the reason why—PowerPoint just sadly doesn’t support doing a fill-type cover for their video embeds.

I’ll leave it there for today. Hopefully that’s helpful and a quick way to get your MP4 videos out of Figma into a PowerPoint file that you can then play back inside of your PowerPoint presentations in a native way.

Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.