How to embed Google Forms in Figma presentations using Pitchdeck

Video Transcript

Today I'm going to be showing you how to embed a Google Form 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 in the header, search for the word "Pitchdeck", and if you click on the results you'll be able to run that Figma plugin by either clicking on the "Run" button here or you can click on the "More options" icon and click on the "Save Figma plugin" option to save it to your plugins list for later. I've already saved mine to my plugins list,; I'm going to go to my canvas, I'm going to right click go down to "Plugins", go down to "Saved plugins" and then I'm going to click on the Pitchdeck option; and that's just going to run the Figma plugin that we just set up.

If you haven't used the Figma plugin before, what it allows you to do is take the Figma frames on your page and it basically loads those in as slides into the Figma plugin. It treats every Figma frame on your page as a slide and then you can basically put layers inside of those frames and those will get treated as the individual layers for each of those slides. You can add animations, links, videos and things like that, but today we're just going to be focusing on adding a Google Form.

If you want to include a Google Form into your presentation that you can capture information from people either viewing the presentation, or if you send them the link that they look at it themselves, they'll be able to fill in that form and send you some responses from the presentation directly. The way that we can do this is pretty simple; if you just go to the frame or slide that you want to include the form on, you can add a layer. I've just got a simple rectangle layer here and I'm going to embed that by going to the "GIFs/Videos/Embeds" tab over on the right hand side here, and if you click on the "Supported Embeds" link, that's going to take you to the documentation page for the Pitchdeck Figma plugin. You can see all the different supported embed links, and we can see here that we've got one for Google Forms, and that's just an example of what the form link is going to look like.

I've got a Google Form set up over here, I've just got a simple RSVP form set up in Google Forms, and I basically want to embed this form into my Figma presentation that I'm going to be presenting. The way that we do this is just by going to the "Settings" panel first in the Google Forms tabs, go down to "Responses" and just make sure that the required sign in options are turned off, we don't want it to be limited to our own organization, we want this to be accessible by anyone because we want to accept responses from people viewing the actual Google Form. I'm just going to turn those settings off and then what you can do is you can just go to your link and if you go to the "Send" option, click on "Send" and then click on the link over here, and if you click on the "Link" field and just copy that; just do a copy and then go back to Figma.

Now you can paste that link from the Google Form into the actual embed field here. I'm going to paste that in, and there we go, you can see that we've got our form added to the layer, and we can actually click on these and input answers and do all that sort of stuff. If you wanted to, you could also make this flush with the frame itself; if we increase the size of this image we could basically just make it the same size as the slide and then that way it would just be purely flush with the actual image. I'm going to refresh and there we go, you can see that we've got the top and the bottom both flush with the Google Form, so the form just scrolls entirely inside of the actual Figma frame.

I'm just going to leave it there, and we're going to upload this to the presentation URL. We can do that by exporting the presentation using the "Export Presentation" button, so I'm going to click on that, and then I've already created the link. Normally this would say "Upload Web Presentation", but I'm just going to update mine, so I'm going to click on "Update Web Presentation", and this is going to automatically upload all of the Figma slides to the Pitchdeck web app. We're going to get a link in a second that we can copy, so I'm going to copy the passwordless version, but you can also copy one with a separate password if you want to keep the link more secure; I'm just going to copy this one for now and paste it into my browser, and just hit "Enter".

Now you'll see that our presentation is going to load up; we can see all of the content that we brought in from our Figma design has been included, which is looking really good, and then we've basically got our embed slide over here. If we click on slide two, you can see here that we've basically got our Google Form embedded and we can go ahead and fill that out. I can just put my name in there, I can add these radio buttons, and then I can just hit "Submit" and that's going to automatically submit the response. That's pretty cool, because it means we can send around a presentation link and we can basically get people who are viewing the link to fill out a survey or fill out a form during their presentation, or at the end of the presentation. You can collect those responses, and you can see here that the response that I just sent directly from the presentation that we uploaded from Figma, that's gone straight from the Google Form directly into our backend. I can see the response from my presentation,so you can send this out and capture a whole bunch of data or responses from people that you want to send a presentation to, and it's just a really easy way to capture information directly from a Google Form that you've included in your presentation from Figma.

We'll leave it there for today, I just wanted to give you a really quick example of how you can embed a Google Form into your Figma presentations that are uploaded to the Pitchdeck web app. This is going to be a really easy way to do that and collect data or collect answers from the people you're sending your Figma presentations to. I hope if you've been wondering how to do this, if you've been wondering how to include forms, or Google Forms specifically, into your Figma presentations then I hope that you give this a try and I hope it's useful 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.