Used in this video
Pitchdeck
ピッチ
Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.
Try PitchdeckGet started today
Video Transcript
Today I'm going to be showing you how to embed YouTube videos into your Figma presentations using the Pitchdeck presentation Figma plugin.
To get started you just have to go to your Figma file, click on the "Resources" icon at the top here and then search for "Pitchdeck", and under the "Plugins" tab you'll see Pitchdeck pop up. Just go ahead and click on that, and then you can run the Figma plugin by either clicking on the "Run" button here or you can click on this little "More options" icon here and click on "Save Figma plugin" to keep it in your Saved plugins list for later.
I've already added it to my Figma plugins list, so I'm going to right-click on my canvas, I'm going to go down to "Plugins", I'm going to go down to "Saved plugins", then click on the "Pitchdeck" option, and that's just going to run the Figma plugin that we just saved a second ago.
If you haven't used the Figma plugin before, the way that it works is you basically create frames on your page and each of those Figma frames will get treated as a slide in your presentation. I'm just using 1920x1080 frames, and then I'm just adding some text layers and image layers directly inside those frames, and those get used for animations links and embeds.
Today I'm just going to be focusing on how to add YouTube embeds into your Figma presentations that you can then present using the Pitchdeck app, and I'll show you how to do that now. All you need to do is click on the "GIFs/Videos/Embeds" tab in the right hand side on the right hand of the Figma plugin, and you just need to find the layer that you want to replace the static image with your playable YouTube video embed. In this case I'm just going to use this layer here, and if you click on the "Supported Embeds" link, that'll just take you to the documentation page for Pitchdeck and you can see some examples of the different kinds of embed that it supports; but for today I'm just going to be focused on YouTube videos.
You can embed either YouTube shorts or just regular YouTube videos, today I'm just going to be doing a regular YouTube video, but if you want to embed a YouTube short you can do that as well. I'm just going to grab a trailer for the Dieter Rams documentary and I'm going to include that in my presentation by copying the URL, so I'm just going to grab the link straight from the browser, and I'm going to grab that and go back to Figma, and inside of this little input field I'm just going to paste that, and you'll see that it starts playing.
I've just toggled the controls on just so I can pause it for a moment, but you can basically leave this to auto play and loop, and if you don't want to have the controls, so you just want to have them fade away, you can turn that off as well. I'm just going to leave them on for the time being, and now that we've got our video set up all we need to do to actually present this in our presentation is to click on the "Export Presentation" button and then click on the "Upload Web Presentation", or in my case I'm going to click "Update Web Presentation" because I've already created this Pitchdeck URL. I'm going to click "Update Web Presentation", that's just going to upload all of the slides that I've designed in Figma up to the Pitchdeck application and it's going to include our YouTube embed as we'll see in a second.
You can either copy the URL with a password if you want to send those separately, or you can copy the passwordless URL, which just lets you load up the link without needing to enter a password; I'm going to grab that one, I'm going to go back to my browser, I'm going to paste in the URL and hit enter. You can see we've got our YouTube video playing in the presentation, as we expect; you can skip through this if you want, because I've got the controls turned on, you can just bounce around for the video. Because we've got our text overlaying on top of the video, that's also sitting on top; we've got two different text layers there, and obviously the YouTube video that just plays underneath it as you would expect.
Now we can switch back to Figma, and that's basically it. I just want to keep it really short today just to show you an example of embedding a YouTube video directly into your slides using the Pitchdeck Figma plugin and being able to present those slides with the playable YouTube video directly from your Figma export when you upload it to the Pitchdeck web application. I hope that's helpful if you've been wanting to know how to embed YouTube videos into your presentations using Figma, this is a really quick and easy way of doing that to present them. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.
Adam Brock
Founder of Hypermatic
The secret weapons used
in high performing teams.
World-class teams of designers, developers and copywriters use our Figma plugins to 1,000x their daily workflows.
TinyImage
タイニー
Export compressed JPG, PNG, SVG, WebP, AVIF, GIF and PDF files from Figma, reducing sizes by up to 95%.
Try TinyImageGet started today
Pitchdeck
ピッチ
Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.
Try PitchdeckGet started today
Convertify
コンバート
Export Figma to Sketch, XD, After Effects or Import XD, Illustrator, Google Docs, PDF to Figma.
Try ConvertifyGet started today
Emailify
メール
Easily create and export responsive, production ready HTML emails (eDMs) from Figma.
Try EmailifyGet started today
CopyDoc
コピー
Everything you need to easily export, import, localize and update text in your Figma designs.
Try CopyDocGet started today
Bannerify
バナー
Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.
Try BannerifyGet started today
Crypto
ロック
Securely share your Figma designs and prototypes as password protected URLs or PDF files.
Try CryptoGet started today
Favvy
ファビー
Export production ready favicons (with code) for your website or PWA from Figma in seconds.
Try FavvyGet started today
Pixelay
ピクセル
Compare and visually QA your Figma designs against real website URLs using smart overlays.
Try PixelayGet started today
HyperCrop
クロッパー
Batch crop/resize multiple images into multiple sizes with presets, smart cropping and face detection.
Try HyperCropGet started today
Commentful
コメントフル
Supercharge your Figma comments and gather external feedback from stakeholders.
Try CommentfulGet started today
Weblify (Beta)
サイト
Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click.
Try WeblifyGet started today