How to embed Figma Prototypes in Figma presentations using Pitchdeck

Video Transcript

Today I'm going to be showing you how to embed a live Figma prototype into any element of your slides in a Figma presentation using the Pitchdeck Figma plugin.

To get started all we need to do is open up a Figma file, click on the little "Resources" icon at the top here, and if you search for the word "Pitchdeck", you'll see Pitchdeck pop up. All you need to do is click on the Pitchdeck result, and then you can run the Figma plugin by either clicking on this "Run" button here or you can click on the little "More options" icon and click on "Save Figma plugin" and that'll just make it easier to access it later. I've already saved it to my Figma plugins list, so to run the Figma plugin I'm just going to go to my Figma canvas, right click, go down to "Plugins" go down to "Saved Plugins", click on the "Pitchdeck" item, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically treats any frames on your page as a slide. I've got a bunch of different slides here and in each of those frames I've just got a bunch of text layers and content layers, and those will get treated as individual layers in your slides that you can add things like animations and links and inputs to; for today's Figma tutorial, I'm going to be focusing on how to embed a live Figma prototype. To do that, all I've done is just set up a brand new frame called "prototype Embed" (you can call it whatever you want), and inside of that frame I've just got one layer, it's just a rectangle layer called "Embed", and this is basically just going to be a placeholder layer for where we want our Figma prototype embed to go.

In this case I'm going to be embedding a different Figma file; I've got this other landing page design that I grabbed from the Figma Community and I'm going to be embedding this as a live Figma prototype in our Pitchdeck presentation. The first thing I'm going to do is just change the Figma prototype background and I'm going to change it to the same color as my presentation slides. In this case it's going to have a white background, so what I want to do is in my design or the embed that I want to include I'm just going to click on the "Prototype" tab here, then I'm going to go down to the "Background" option and I'm going to change that to white. You can just change that to whatever background color you want; in this case I'm just going to leave it to white, which matches the slide background as you can see here, the outer background border that I've got set is white, so I'm going to set the prototype background to white as well.

Then, to get the Figma prototype link all you need to do is click on the little play button here to go into present mode and this is going to load up the Figma prototype window; what we want to do is we want to click on the "Share Prototype" button, and then we want to make sure that the settings are set to "Anyone with the link", so "Anyone with the link" is selected instead of "Only people invited". I've got "Anyone with the link" and then "Can view"; I want to set that to "Can view" instead of "Can edit", as it doesn't need to have an edit permission, just "Can view". Once those two options are set, you can click on the "Copy link" icon here; click on "Copy link", that's going to copy it to our clipboard, and then we're basically ready to go.

Now I'm going to go back to my presentation design, I'm going to go to my "Prototype Embed" slide and instead of applying an animation, I'm going to go to the "Embeds" tab; I'm going to click on "Embeds" here, and that's going to give us a text area to paste an embed link. In this case I'm going to be pasting it onto this rectangle layer embed layer here that we set up, I'm going to click on the input field and paste that Figma prototype Link in that we just copied from the Figma file, and you can see here it instantly loads up the Figma prototype. We can scroll through this, we can interact with it if it has any interactivity, we can do that as we'd expect, but for today I'm just going to be mainly using it as a way to present a live Figma file inside of our presentation.

Now that we've got that set up, I'll just mention that you can use this on any layer; if you did want to apply it to a different slide you could apply it to, for example, this little rectangle layer. We've got our little image layer, you could paste it in there, and that would replace that layer with the Figma prototype as well. Obviously, that's going to be a bit smaller and it's got this overlay on it, so maybe this isn't the best slide for it, but I just wanted to show you that you can basically embed different things onto different layers in any slide, and that will work as expected; I'm just going to remove that.

Now that we've got our embed set up, all I'm going to do is now export this so we can actually present it in the browser. What we need to do is click on the "Export" button in the Figma plugin; I'm going to click "Export" make sure the format is set to "Pitchdeck Presentation (Web URL)"; I've got that selected, and then all I need to do is click on "Update Web Presentation" or "Upload Web Presentation" if you've not already uploaded one yet. I'm going to click on "Update Web Presentation", this is basically just going to quickly upload all of the images and slide data and we're going to get this message here that lets us know the presentation is ready to go.

You can either send this to your end user or customer as a separate password and URL, but in this case I'm just going to make it quick and copy the "Passwordless URL", which will automatically log into the presentation for me. I've copied that to my clipboard just by clicking this little "Copy" icon, and if I go to my browser and paste that in; I'm just going to hit "Paste" and then "Enter", and this is going to load up the presentation that we just uploaded from Figma. We can jump around here, we can load up our different slides that we created, we've got all of our animations and things like that, but of course we want to actually check out slide two in this case. I'm going to click on slide two, and this is going to now load up the live Figma prototype that we just embedded using the Figma plugin.

You can see here this is the live Figma prototype added exactly where we wanted; you can see we've got our outer kind of padding that we kept on the slide to make sure that we've got a bit of a buffer, we've set the background to the prototype as white as well which means we can basically now scale this up and down, and we can scale it without having any issues with background colors or anything coming through from the Figma prototype. That's really nice if you want to make it bigger or smaller or go full screen, the prototype is going to scale up and down with that as well.

That's basically what it looks like there, and I don't think this really has any interactivity, but this is a live Figma designl, so what we can do is if we go to our Figma landing page in the design, and we want it to change some of this content. For example, if we just jump in here and change this to; I'll just quickly change the font, so we'll just make this "Arial" for now and replace that; we can basically change this content here to be "Presentation Live Updates" here, and if we go back to our presentation you can see here that it's basically updating in real time. If I just move that over a little bit for you to see, we can see here that this is basically going to change in real time; this is 100 live from Figma embedded in your presentation. You can basically make changes to that presentation even after the link has been shared or while the presentation is happening; maybe you want to present something and make changes in Figma while you're presenting, that could be a interesting use case as well for showing off work to clients that's in progress.

That's basically it, I just wanted to show you the basics of how to embed a live Figma prototype into your presentations that are viewed in the Pitchdeck web application; this is a really easy way of going about it and it gives you a lot more flexibility to enhance what kind of content you can show in a presentation that you're sharing with clients or teammates or stakeholders as well. Let's leave it there for today, I hope that's been interesting for you if you've been wondering how to include live Figma prototypes inside your presentations this is a really, really easy way to go, especially if you're already using the Pitchdeck Figma plugin, this is just a new embed that's been added.

If you want to see what other embeds are available, you can click on this little "Supported Embeds" link in the Figma plugin, and that's just going to open up a link to the documentation and give you a whole list of examples of other services that are supported to embed into your slides as well. As I said, you can kind of jump in here and this will load up a bunch of different examples; we can see we've got Figma designs, Figma prototypes, Loom, Lottie files, Google Docs, GIFs, MP4s, SoundCloud; all these different platforms you can embed directly into the Figma plugin for your presentations.

Let's leave it there; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.