How to embed Google Sheets in Figma presentations using Pitchdeck

Video Transcript

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

To get started. if you just open up your Figma file, go up to the little "Resources" icon up here and click on that, then search for the term "Pitchdeck" and under the "Plugins" tab, and you'll see Pitchdeck pop up. Just go ahead and click on that, and then to run the Figma plugin you can either just click on the "Run" button here or you can click on the little "More options" icon and click "Save Figma plugin" to 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" and then click on the Pitchdeck icon; that's just going to run the Figma plugin we set up a second ago.

If you're new to the Figma plugin, the way that it works is it basically takes all of the Figma frames on your page and loads them into the Figma plugin as slides, and then it uses the content layers inside of each frame as the content layers that you can add animations, links and GIFs/videos/embeds to; I'm going to show you what that looks like in a moment. I'm basically going to be adding a Google Sheet embed into this second Figma frame here, and the way I'm going to do that is pretty simple, I'm basically going to define where I want that Google Sheet embed to go. For example, in this case, I've got a little photo layer; you could use a rectangle layer, you could use a image layer, but we're basically going to be swapping out this Figma layer over here with a Google Sheets embed.

I'll show you what that looks like; if you go to the "GIFs/Videos/Embeds" tab, you'll see this little input box here that we can paste an embed URL in. If you go click on the "Supported Embeds" link, that's basically going to open up the Pitchdeck documentation in your browser and you'll get a bit of a list of all the supported types of embed links you can add, but for today I'm just going to be focusing on embedding a Google Sheets URL into the Figma presentation.

I'm going to jump into Google Sheets, I've just got a really simple spreadsheet that I got from the template section in Google Sheets, and the way we can embed this is by basically going to "File", then going down to "Share", and then clicking on the "Publish to Web" option; I'm going to click on "Publish to Web", and then you basically want to click on this "Publish" button here, and it's going to prompt you to save or publish this selection. I'm going to click "Ok" and now it's published. What this does is it basically makes your Google Sheet visible to other people on the web if you share this link, but it also allows you to copy that Google Sheet link as an embed. Under the "Link" tab, if you just click on this little input field here, and then copy that link by doing a "Command + C", or "Control + C" if you're on Windows, and then jump back into Figma.

Then all we're going to do is paste that link we just copied from Google Sheets into the Figma plugin, into this little input box here, paste that, and you can see here that it's automatically loaded in our Google Sheet that we just had in our Google Sheets browser over to the Figma plugin, and it's embedded it into our slide. Now we've basically got the whole slide as a Google Sheets embed and we can actually select this text, we can click on things, we can switch tabs and scroll around in the sheet as you'd expect. Now that we've got that embedded into our layer, to export the presentation so that we can actually present it in the browser, you just go ahead and click on the "Export Presentation" button in the top right hand side of the Figma plugin, and then click on the "Upload Web Presentation" or "Update Web Presentation" button at the bottom of the Figma plugin, click on that, and then that will upload the slides. All of the content from your Figma design is going to get uploaded, and you're going to get this link that you can use to present the presentation.

I'm going to click on this link here, you can also click on this one which is a separate URL and password, if you want the password protected link; I'm just going to grab this bottom link now which will log in automatically. I'm going to grab that, I'm going to paste it into my browser, hit "Enter", and you can see here that the presentation is loaded up. We've got all of our Figma content as we'd expect, and then on the second slide we should have our Google Sheets embed. You can see here we've got our Google Sheets embed, it's all of the content from our Google Sheet, so we've got our "timesheet", all the spreadsheet details down here. We can also click on the tabs, so if we want to load up a different tab in the Google Sheet, we can click on that and scroll through this one. This one's got some charts, if we hover over the charts you can see that we've got all the data in there, just as you would expect.

There we go; it's basically embedded the entire Google Sheet directly into our presentation that we've exported from Figma. We didn't need to import all this data into our Figma layers, we can just import the data directly from the Google Sheet link as we looked at a moment ago. That's basically it, I'll keep it pretty simple today; I just wanted to show you how to embed the Google Sheets data or Google Sheets file directly into your Figma presentations and then upload them to the Pitchdeck web app so that you can actually present them to anyone you want to show this data to.

I hope that's helpful if you've been wondering how to import or embed Google Sheets content into your Pitchdeck presentations using the Figma plugin; this is going to be a really easy way to do it, just by pasting that link in. I hope it helps you and your team if you're using spreadsheets or wanting to use Google Sheets in your Figma presentations. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.