How to embed Google Slides in Figma presentations using Pitchdeck

Video Transcript

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

To get started, if you just go to your Figma file, click on the little "Resources" icon at the top and just search for the word "Pitchdeck", and if you click on the Pitchdeck result you can run the Figma plugin by either clicking on this "Run" button, or you can click on this little three dots "More options" icon and click on "Save Figma plugin"; that will automatically save it to your Figma plugins list for later. I've already done that, so I'm going to go to my canvas, right-click anywhere, go down to "Plugins", go down to "Saved plugins", then click on the Pitchdeck icon, and that's going to run the Figma plugin we just set up a second ago.

If you're new to the Figma plugin, the way it works is you can basically add frames to your Figma page, and each of those frames will get treated as a slide in your slide deck using the Pitchdeck Figma plugin. I'm just setting these at 1920 by 1080 pixels, and that's going to give you a full HD slide when you go to use them. Inside each of these Figma frames is just basically a bunch of content layers; you can see here that I've got a bunch of content layers inside of this Figma frame, and those can be used for adding animations, links or embeds, as we'll see in a second.

To add a Google slide deck or Google Slides into your presentation, which is a little bit meta, a presentation within a presentation, which you may want to do. You can just basically create a Figma frame with a Figma layer, and in this case I've got a rectangle layer; and I want to replace or embed my Google Slides presentation into that rectangle layer. I'll show you what I mean by that; if we click on the "GIFs/Videos/Embeds" tab over here, you can see here that we've got a couple of options and this little input field. If you click on the "Supported Embeds" link, that'll basically take you to the Pitchdeck documentation, and you can see a list of all different embed URLs that are supported in the Figma plugin. Today we're just going to be focusing on adding a Google Slides URL to your Figma presentation, and the way that we do that is basically by going to a Google Slides document that you've created; in this case, I'm just using one of the templates.

The way that we can use it in our presentation in Figma is by going to "File" in your Google Sheets file, click on "File, then go down to "Share", and now you have to just click on this "Publish to Web" option. If you click "Publish to Web", then you've got a couple of different options here; you can tell it to start the slideshow as soon as the player loads, restart after the last slide, you can change how frequently the slide automatically transitions, you can change all these different settings. Then basically you just want to click on this "Publish" button, so I'm going to click "Publish" now, and it's going to ask you "Are you sure you want to publish this selection?", and I'm going to say "Ok".

Now this is published to the web, what we can do is basically grab the publish to web link that it generates down here; this is a special link that allows you to embed Google presentations. I'm going to click on that, then I'm just going to copy it by doing a "Command + C", or "Control + C" on Windows, and then go back to my Figma file. Then in the little input field here under my "Embeds" tab, I'm just going to paste that in, and you can see here that it's automatically embedded my Google Slides presentation into my Figma presentation. It's a little bit meta, but you can see all the content is in here, you can see that we've got our little options; we can do things like turn on the laser pointer if we wanted to do that, all these kinds of neat features that are offered by Google Slides.

We want to present this to our audience, along with all of our other slides that we've designed in Figma. The way that we can do that is basically by clicking on the "Export Presentation" button; I'm going to click on that, and then what you can do is click on the "Update Web Presentation", yours might say "Upload Web Presentation" if it's the first time you're creating a presentation. I'm going to click that button now, and this is going to automatically upload all of the content from our slide deck that we've designed in Figma, including the embed of the Google Slides document that we've just added, and then it's going to give you a link that you can use.

I'm just going to copy and paste the passwordless URL; I'm going to grab that link, pop it into my browser, hit "Enter", and there we go; you can see that we've got our Figma slides added as we expect, and then we've also got our second slide here which contains our Google Slides embed, and this allows us to basically view a Google Slides document inside of our presentation that we've uploaded from Figma. We've got all of our Figma slides, but on this particular slide, we've also got our embedded Google Slides document. That allows us to go through the document inside of our presentation, so it's basically a Google Slides presentation within a Figam presentation that you can load up and automatically embed.

That's basically it, I'll leave it there. I hope this has been helpful if you've been wondering how to embed Google Slides into your Figma presentations that are exported to the Pitchdeck web application, this is a really simple way of doing it. You just follow the instructions that we just went through to make that Google Slides document public by publishing it to the web, and bringing in that Google Slides embed link directly into your Figma file; then you can upload it to the Pitchdeck web application. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.