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 Loom videos into your Figma presentations using the Pitchdeck presentation Figma plugin.
The first thing to do to get started is just go up to the "Resources" icon in your Figma file, then click on that and search for the word "Pitchdeck", click on the Pitchdeck result, and to run the Figma plugin you can just click on the "Run" button here or you can click on this three dots "More options" icon and click "Save Figma plugin" and that will automatically add it to your Saved plugins list. I've already done that, so I'm just going to right-click anywhere on my page, go down to "Plugins", go down to "Saved plugins", and then just click on the "Pitchdeck Presentation Studio" Figma plugin link; that's just going to run the Figma plugin we just set up a second ago.
If you haven't used the Figma plugin before, the way it works is it basically looks at your Figma page and it treats every Figma frame as a different slide. I've got a bunch of different frames on the page all set to 1920 by 1080 pixels, and inside of those Figma frames I've got a few different Figma layers set up. We've basically got a few different layers; we've got text layers, image layers, all that sort of stuff, and then basically it treats each of those Figma layers as a layer in your in your slides; we can add animations to these slides, we can do all sorts of things in there. I'm just going to show you today how to add a Loom embed into any of these Figma slide layers, and it's really easy; we're just going to go to the Figma slide that we want to add the Loom embed to, and you basically want to have a layer that you want to insert that Loom video into, where you want to embed it.
I want to embed the Loom video into this Figma frame in this layer, and all we need to do is click on the "GIFs/Videos/Embeds" tab over on the right hand side of the Figma plugin, and you'll see that it will basically show you some input fields. You've got some input fields here that you can paste a link into, and if you click on this "Supported Embeds" link, it takes you to the Pitchdeck documentation page and just gives you a bit of an overview of some example embed links that it supports. Today we're going to be embedding a Loom video, and all we need to do is basically copy a Loom video link into the Figma plugin. I've got a Loom video over here that has a share link, someone has shared this; if you've got a Loom video that you've created or someone sent to you, you can grab that share link from Loom, copy that to your clipboard and then go back to Figma and paste that Loom embed link or Loom share link into the input field just like this.
We're just going to paste that in, and you can see that it automatically loads up the Loom embed player. If we were to click on that play button, that's going to play, and you can skip through that as you'd expect. That's basically a Loom embed that's live, and you can actually use that however you normally would use a Loom video in the browser. That's all you need to do you, just paste in the Loom link into your Figma embed input here, and then to export the presentation to actually present it, all you need to do is click on the "Export Presentation" button over here. I'm going to click on that and I've already set up the link previously, but if you're doing it for the first time, you'll see an "Upload" button. Now I'm just going to click on the "Update" button, so I'm going to click on that "Update" button and that's going to export the Figma slides to a special URL that I can use. It's password protected by default; you can either send a URL and a password separately, or if you just want it to load up straight away, you can copy this passwordless URL and that will automatically log in.
I'm going to copy that one, I'm going to go back to my browser, paste in that link and load it up. Once the presentation loadsm you'll see here that we've got our Figma slides, and if I go to the second slide you'll be able to see that we've got our Loom embed loading up. Again, I can click on that play button in the Loom embed, and you can see now I can skip through this Loom video as you'd expect. That's just a really simple way of embedding a Loom video or Loom embed into your Figma presentations that you can then present using the Pitchdeck presentation Figma plugin. You can add as many Loom videos as you want, if you want to have different ones on different slides, it's just a matter of copying and pasting your Loom share embeds or Loom share links into the Pitchdeck Figma plugin's input fields just over here, and that'll basically load up any Loom presentation or any Loom video that you want to include inside of your presentation Figma frames.
I'll leave it there for today, I just wanted to keep it really simple just to show you how to embed those Loom links into your Figma presentation layers using the Pitchdeck Figma plugin; that's going to be a really easy way to automatically include Loom videos into those Figma presentations. 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