How to embed Google Docs in Figma presentations using Pitchdeck

Video Transcript

Today I’m going to be showing you how to embed a Google Doc directly into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started, if you just go to your Figma file, click on the little “Resources” icon at the top and search for “Pitchdeck”, and if you click on the result you can run that Figma plugin by either clicking on the “Run” button or clicking on the “More options” icon over here and saving it to your Figma plugins list by clicking on the button below. I’ve already done that, so I’m going to go to my canvas, I’m going to right-click anywhere, go down to “Plugins” then go down to “Saved plugins”, click on the Pitchdeck option, and that’s just going to run the Figma plugin we just set up a second ago.

If you haven’t used this Figma plugin before, the way it works is it basically takes any Figma frames that you’ve added to your page and it treats those as slides and loads them into a presentation that you can then export. I’ve got a bunch of slides, I’ve just got these set up as 1920x1080 Figma frames, and those are being used as my slides, then each of those basically have some content inside of them; just text layers, image layers, things like that. You can then add animations and links and embeds and things on them, as we’ll see in a second.

In this Figma tutorial I’m just going to be focusing on how to embed a Google Doc into one of these Figma slides or more of the slides if you want to add more, and we can do that pretty easily just by going to the slide that we want to include the Google Doc on, and then if you just create a layer, if you create like a rectangle layer or an image layer, any of those kind of shape layers, you can then replace that with a embed using the option in the “GIFs/Videos/Embeds” tab over here. If you click on that tab and then you can see that we can highlight over our layers, so we can highlight over our image layer here, and if you click on the “Supported Embeds” link, that’s going to open up the Pitchdeck documentation, and you’ll get a list of all the different link types that you can embed into your slides. For today, I’m just going to be focusing on how to embed a Google Docs URL into your presentation in Figma using this embed function.

I’m going to go over to Google Docs and I’ve just got a really basic template that I’ve pulled from the Google Docs template library, and I’ve just left that as all the blank content that it comes with, but I basically want to include this document inside of my Figma presentation that I’m designing. The way that we do that is by clicking on the little “Share” icon up here, and just making sure this is open to “Anyone with the link”; click on that and then what we need to do is go to the “File” option up in the top here, and then go down to “Share” and then if you click on the “Publish to Web” icon; click on “Publish to Web” and what this is going to allow you to do is basically publish this document to be public. That’ll allow the document to be embedded outside of Google, so if you go to the publish to web option, and then click on the “Publish” button, it’s going to ask you “Are you sure you want to publish?” it, just click “Ok”.

I’m going to click “Ok” and it’s going to give you an embed link that you can use here; this special embed link, you can click on that and then copy it with “Command + C” or “Control + C” if you’re on Windows. Copy that embed link, then go back to Figma, and as we just saw a second ago, if you go under this “Embeds” tab, go to the layer you want to embed the Google Doc in; I’m just going to embed it on this image layer here. I’m going to paste that into this field, and you’ll see here that we’ve basically got our Google Doc loaded up, and what we can do is we can now adjust this. Because we’ve got some extra content here, I’m just going to get rid of that, extend this out to be a little bit wider, and then I’m just going to reload that frame and you can see here that’s just going to make it look a little bit nicer with the embed width that we’re using with the document.

Now I’ve basically turned this entire Figma frame or this entire Figma slide inside of my presentation into a Google Doc. This is all the content from my Google Doc being loaded in, as you’d expect. To actually present this and share that Figma presentation or present that presentation with your Google Doc embed working, what you can do is you can click on the “Export Presentation” button in the top right hand side of the Figma plugin, and then you want to click on the “Upload Web Presentation” button or “Update Web Presentation” button if you’ve already created a link, as I have. I’m going to click on that now, and this is just going to upload all of the slides from Figma into the Pitchdeck web application that you can then present.

It’s just finished; we can see we’ve got our link here, you can either share the link with a separate password or you can copy this link at the bottom which basically logs into the link automatically. I’ve just copied that, I’m going to go back to my browser, I’m going to paste that in and hit “Enter”, and now the presentation is loaded. You can see that all of the content that we designed in Figma has been added, all the animations are in there as we’d expect, but if we go to our second slide which is where we added the embed, we should now see our Google Doc load up. You can see here that the Google Doc has been included, we can see all the text is selectable.

This is just a really easy way of getting your Google Doc content directly inside of your presentation that we’ve exported from Figma, and having that as an embed that you can then share around without having to duplicate all that content back into your Figma file; you can just link directly to your Google Doc embed. I think we’ll leave it there for today, I just wanted to give you a really quick Figma tutorial about how to do this if you’ve been wanting to embed content from a Google Doc into your Figma presentation using the Pitchdeck Figma plugin, this is going to be the easiest way to do it.

The one thing you might notice as well is that the scaling of the Google Doc embed is going to be different compared to the Figma preview; in the Figma preview window here, as we saw before when we scaled that up, the preview of this content is a little bit different because the size of this window here is actually much smaller. The embed itself basically stays the same size, so it’s basically much narrower in this little embed here than it would be if we’re viewing it in the browser over here, so that’s just something to keep in mind you can see here that the scale doesn’t go down; it just kind of clips the side. If you are embedding this and you’re viewing it in a larger screen, it’s basically going to match the original size of your Google Doc, but because we’re viewing it in our little preview window in the Figma plugin here and it’s basically cutting down the width, this is giving you a accurate preview of the size of the content, but the width of the content is going to be a little bit look a little bit different when you get it into the browser later, as we just saw.

I hope that’s been helpful again if you’ve been wanting to embed Google Docs content into a Figma presentation or a presentation that you’ve designed in Figma and then uploaded to the Pitchdeck app I hope this is helpful for you or your team thank you as always for watching and we’ll be back soon with more Figma tutorials like this one very soon