How to embed Figma designs in Figma presentations using Pitchdeck

Video Transcript

Today I'm going to be showing you how to embed live Figma designs into your Figma presentations using the Pitchdeck Figma plugin.

All we need to do to get started is just open up your Figma file go to the "Resources" icon in the top here and then just search for the word "Pitchdeck" and click on the results, and you'll be able to run the Figma plugin by either clicking on this "Run" button here, or you can click on the "More options" icon and save that to your Figma plugins by clicking on the link down here.

I've already done that, so I'm just going to right click on my page, I'm going to go down to "Plugins", I'm going to go down to "Saved plugins" and then click on the Pitchdeck Figma plugin, and that's just going to load up the Figma plugin we just set up a second ago.

If you're new to the Figma plugin, the way it works is it basically treats each Figma frame on your page as an individual slide in your presentation, and each of the layers inside of those slides are basically treated as the individual layers for each slide as you can see here. These kind of map up one to one with your slide layers here, and that's basically the way to set up your slides. I've just set up an extra slide over here where I want to have my Figma file or Figma design embedded inside of my presentation; you can see this layer here I've got set up I basically want to insert a live Figma design that I can browse around and demonstrate inside of the deck using a live embed.

It's really easy to do this all we need to do is click on the "GIFs/Videos/Embeds" tab over here in the right hand side of the Figma plugin, and that's just going to switch the context from animations over to this input field here. If you click on the "Supported Embeds" link over in the side of the Figma plugin that's going to open up the documentation for the Figma plugin, and it's going to give you all the different examples of embed links that you can actually paste into that field. There's quite a few, but for today we're just going to be focusing on embedding Figma designs.

The way we do that is just by going over to our Figma file and we're going to get a bit meta today and embed the live Figma design link for the file that we're actually in, and the file that the presentation is being created from. All I'm going to do is I'm going to go ahead and click on the "Share" button in the top right hand corner of the Figma file, click on that, and then I'm going to click on the "Copy link" button here copy that to my clipboard. Just make sure that the "Anyone with the link" setting is set to "Can view"; make sure that's set, and then now that we've got our link copied by clicking on the "Copy link" button, we can go back to our Figma plugin, go to the embed input field here for the layer that we want to embed it to, and then just paste that in there.

If you paste in that link, you'll see that our Figma file or Figma embed has now been loaded up inside of the presentation; we can actually Zoom around and present the design from our Figma file inside of our presentation that we're creating from Figma. In this case we're getting a little bit meta because it's exactly the same file, but you can imagine that this Figma file is a totally different file that's related to the presentation that you're giving, and you might want to present that in a live way inside of your presentation without having to create multiple Figma files to then create separate presentation.

The way that we can now present this in the browser is we just click on the "Export Presentation" button in the top right hand side of the Figma plugin, and I've already created a link, so if you haven't done that it will say "Upload Presentation"; I'm just going to click on "Update Presentation"; I'm going to click on that and that's going to upload our slides from Figma up to the web presentation link, including our live Figma design embed that we just added to the presentation.This is going to give you two different options, you can either share the link with a separate password, or you can copy this passwordless URL which basically creates a URL that automatically logs in without a password.

I've already got that loaded up in my browser, so I'm going to go ahead and click on that and I'll just refresh the page. You can see here that we've got our normal slides; we've got our slides with the images from Figma, the content from Figma, all added in there, but if we go to our second slide the one we added the Figma live design embed to, you can see here that our whole Figma file Figma design is available to navigate the same way that we would do in Figma; you can zoom in, you can zoom out you can move around, you can even go full screen if you want to. If you want to go to the actual Figma file you can click on that link at the bottom and that will open up your Figma file in the browser as well.

This is just a really cool way of embedding a live Figma design, so if we make updates in Figma, for example, we might change this to "Nine"; we'll update that, and you can see here that it's actually automatically updating the content on the fly; this is a live embed of your design. Once again, we'll just change that back and that will automatically update it here. That's pretty cool if you want to include a live Figma design embed into your presentations; you can actually present work in progress or different Figma file content that's live inside the browser without having to create multiple Figma URLs, you can do it from the Pitchdeck presentation Figma plugin web app.

That's what it looks like there, and I hope that's been helpful if you've been wondering how to embed live Figma designs into your Figma presentations, as a bit of a meta presentation, this is going to be a really easy way to do it using the Pitchdeck Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.