How to embed website iFrames in Figma presentations using Pitchdeck

Video Transcript

Today, I’m going to be showing you how to embed websites as iframes in your Figma presentations using the Pitchdeck Figma plugin.

To get started, all you need to do is go to your Figma file and click on this little “Resources” icon at the top of the file. If you search for Pitchdeck under the “Plugins” tab, you’ll see Pitchdeck pop up. If you just go ahead and click on that item, you can run the Figma plugin by either clicking on this run button here or, I’d recommend, clicking on this more options icon over here and clicking “Save Figma plugin.” That’s just going to save it to your Figma plugins list for easy access later. I’ve already gone ahead and done that.

I’m going to go to my canvas and right-click anywhere, just go down to “Plugins”, then go down to “Plugins” and click on the Pitchdeck item. That’s just going to run the Figma plugin that we saved a second ago. If you’re new to the Figma plugin, the way that it works is it basically allows you to add different frames to your Figma file, and those get treated as slides. You can see here I’ve got a bunch of different frames; these have all got different content layers in them. Inside of the Figma plugin, you’ve basically got those slide layers show up on the right-hand side here, where you can add things like animations, embeds, links, and all those good things that we’d want to add into our presentations.

For today, I’m just going to be focusing on how to add websites as iframe embeds into any of your slides. We’re going to do that by creating a slide with a couple of placeholder layers. You can see here I’ve got two placeholder layers; I’ve got a placeholder layout rectangle for a small screen and a large screen. I’m going to embed a website URL into both of them. The way we can do that is we just go to our embeds tab. With the slide selected, go to the embeds tab over here in the Figma plugin, and that’s going to allow you to paste in a URL to embed into those different layers.

For today, I’m just going to be using Wikipedia as an example. If I wanted to add a Wikipedia article about data Rams, I can do that by copying the URL from my browser, and then in each of these placeholder frames, I’m just going to paste in that URL. That’s basically going to embed the link as an iframe. Don’t be too worried about the overflow that’s happening here; the reason for that is because the Figma plugin window is quite small, and it’s loading in this iframe in the small preview. It’s going to look a bit funny, or it might load up the mobile version, but we can see what that looks like on the large screen if we now export this presentation and present it in the browser.

The way we can do that is just by going into the Figma plugin header and clicking on the export button. Then, if you just make sure that the Pitchdeck presentation web URL format is selected, there’s a few formats you can select for exporting. The embeds are not going to work for things like PowerPoint files or PDFs, so if you want to use these website embeds, you’ve just got to make sure the Pitchdeck presentation option is selected. Then, you can click on the “Upload Web Presentation” or “Update Web Presentation” button here, and that’s just going to export all of the slides in your presentation to the Pitchdeck web app. We’re going to be opening up that URL in a second, and I’ll show you what that looks like now.

We’ve got our presentation ready, and you can either copy the URL down here, so this one doesn’t need a password, or you can share the password separately with the URL. Today, I’m just going to be clicking on the passwordless URL and opening that in the browser. Once that loads, you’ll be able to see that we’ve got our presentation here, as we expect. We’ve got a few different slides, but we’ve got our fourth slide, which is the website embed slide. If I click on that now, you can see that we’ve got our Wikipedia article embedded directly into the page. We’re able to basically interact with this website as if we were browsing through it on a different tab, but we’ve got it added directly into our Figma presentation. I’ve got two on mine; I’ve got a desktop and mobile version, so you can see here the mobile version of the site and the desktop version side by side.

This could be really handy if you’re presenting a website that’s in progress. Let’s say you’re an agency and you’re presenting work in progress or final live versions of a website that you’ve developed for your clients; you could compare a website for mobile and desktop next to each other in a slide and go through different pages of that website dynamically in your presentation to them. The one caveat with this is that it will only work if the website doesn’t have a cross-origin policy on it that blocks the website from being embedded in other URLs or other websites. For Wikipedia, it’s fine; for some other websites, that’ll be fine, probably for your own websites as well, it’ll be fine. But if you try to embed sites like Google, for example, that’s probably not going to work.

We can just try that now. If we try to add google.com, you can see here that it’s basically just giving us a white frame, and the reason for that is that there’s a cross-origin policy on a site like Google which basically tells other websites that if you try to load their website in through an iframe on a different domain other than Google, then it’s going to not let you do that. It might be for security reasons or privacy reasons, but in this case, Google is not going to be embeddable into your presentation, and there’s going to be quite a few websites that have that policy because they don’t want their content or their service or site embedded on different domains, so they’ll block it. If that’s the case, there’s nothing you can really do about it, unfortunately.

For your own websites or websites that you’re developing or want to share with clients that you own, this is going to be pretty simple. You just make sure that there’s no cross-origin policy that’s blocking iframe embeds, and you’ll be able to embed your links directly in there and view those websites directly in the file. As I mentioned, you can basically change this around as well. If we didn’t want a mobile version, we just wanted a larger desktop one, you can just resize your Figma frame, and now you’ve got a full-width embed. The embed is basically just the same size as whatever you decide to include your Figma file or Figma layer as, and you can now update that.

If we want to update this in our presentation, you can basically just re-upload the presentation through the Figma plugin, and once that’s done, we can just go back to our presentation and refresh it. If we jump back to our tab, refresh that, and once it loads, we can click back into our frame, and you can see down here that it’s been updated, and now we’ve just got the larger width version of the website embed . That’s looking really good. If you wanted to just do a full screen one, you could even make it the entire size of the frame, so you could make it full screen, and that would also be totally fine. I’ll just do that as a last example, and once that updates, I’ll just refresh it again. We’ll update that again, refresh it, and now we should have a full screen embed.

You can see here that the embed is totally full screen now, so that’s basically just taking up the entire size of the slide, and you can navigate that however you want. You can obviously interact with this embed as well, so we could go to different pages in the embed and click around, and that’s going to function the same way as a normal website.

So, yeah, that’s basically it. I just wanted to show you a really quick example of how to use Pitchdeck for embedding website URLs. Ideally, website URLs that you own or presenting to clients is probably the best way to go. And there’s also a whole bunch of other supported embed formats as well. There’s a bunch of official embed formats that are supported, so if you click on this little “More embeds” link in the Figma plugin, it’s going to open up the Pitchdeck documentation page, and you’ll be able to see all these different platforms that are essentially supported. You can embed things like Figma designs, Canva designs, Loom, Lottie files, Google Docs – these are all official embeds that you can add as well. Feel free to go through that list as well if you want to embed other kinds of content besides websites, as we’ve just had a look at today.

As always, thank you for watching, and we’ll be back with more Figma tutorials like this one very soon.