Self-hosting your Figma presentation on a custom domain using Pitchdeck

Video Transcript

Today I’m going to be showing you a quick tutorial on how to export your web presentations from the Pitchdeck Figma plugin to a custom HTML file that you can then host on your own server or custom domain name.

To get started, all we’re going to do is open up our Figma file, go down to the little actions icon down the bottom here, and if you click on that and search for Pitchdeck, and under the Plugins tab, if you click on the Pitchdeck item, you can either run the Figma plugin by clicking on this little save icon down here, or you can click on this run button here to run the Figma plugin right away.

I’ve already clicked on the save icon, which is why it says “remove” there. If you just click on save, you’ll be able to then go to your Figma canvas, just right-click anywhere, go down to Plugins > Saved plugins, and click on the Pitchdeck item. And that’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it basically takes any frames in your Figma page and treats those as slides. And you can see it’s automatically loading those in. And we’ve just got some simple text and image layers in there. And I’ve already preset some animations onto those slide layers. But you can also do things like embed videos and iframes and all those sorts of things that you’ll get some more idea of if you click on this documentation link here.

And you can also do things like link to website URLs or link to other slides. And that’s going to be exported as a web presentation, which we’re going to be looking at today.

To export the presentation when you’re happy with it, all you need to do is click on this little blue export button in the Figma plugin. I’m going to click on that now.

Just make sure that the presentation export format is set to Pitchdeck presentation web URL. You can also export it to things like PowerPoint files or a PDF, but today we’re going to be looking at the web presentation format, which is going to include all of these animations that we set on the slides.

I’m just going to click on the export button. Make sure that option is selected. You can also customize the login login page if you want to do that. I’m just going to change that to a different pattern. And then what you want to do is just customize these to your liking.

Just in the interest of time, I’m just going to turn off image compression. And then I’m going to click on upload web presentation. And what that’s going to do is it’s basically going to go through each of the slides in your Figma file here. And it’s going to upload those slides to the Pitchdeck web presentation format.

Once that finishes up in a moment, we’re going to get a link to view that presentation in our browser without needing a Figma account or anything like that.

Usually when you upload this, as is the case now, it’s going to upload that to the Pitchdeck presentation URL and that’s going to be on the Hypermatic domain. But if you want to embed that into your own domain, I’m going to show you how to do that in just a second.

You can see that the presentation’s just been exported. As I mentioned, you can see that it automatically uploads it to pitchdeck.hypermatic.com. You can just take that right away and you could basically load that up into your browser.

We could just load that up now and that would show the presentation as expected. That’s basically good to go if you just want to use the default URL here and that will work just as you’d expect.

However, if you’d prefer to host this presentation on your own domain or host it on your own server somewhere, you can now do that by clicking on this little thing at the bottom that says “Get Embed Code (Self-Hosted)”.

If you click on that, it’s going to expand this little window here. And you can see it’s telling us we can get our self-hosted iframe HTML page code below. This code here is basically that code.

If we take a look at that, I’m just going to copy that to my clipboard and go to the code editor here. And you can see that it’s basically populated our HTML page title with the title of our Figma file here. And then it’s basically populated this special embed link down here into this script. And that’s going to automatically load up the presentation in this HTML file wherever we decide to put it.

The quickest way to grab that is just to click on the “Download HTML File”, which I’m going to do here. I’m just going to click on that button and save it to my desktop.

If we open that up, you can see I’m just going to open up a new tab and drag that in. And if we open that up, you can see that the presentation has loaded up.

This is just being loaded from my desktop, but what we really want to do is host this somewhere. In the documentation link down here, if you click on that “Similar Platforms” link, you’ll be directed to the Pitchdeck documentation. And there’s a few different platforms here just as suggestions for some platforms you might consider dragging and dropping that HTML file to.

I’ll just do a couple as a quick example at the moment. If we open up TinyHost, this is one that you can use. For example, I’ve just created a free account just to show you how it works. All I’m going to do is click on this “Upload File” button here while I’m logged into the TinyHost site. I’m just going to drag and drop the HTML file that we just exported a moment ago into this little drop zone area here.

You can customize that link name if you like. For example, we could call this “dieter-rams-presentation” and that would be my URL there. If you’ve got the paid plan, you can also add custom domains as well. In this case, I’m just using the free one to show you how it works.

I’m going to click on “Publish Now”. And that should be pretty quick because it’s just a single HTML file. You can see it’s just finished creating that. If I click on this “View Site” button now, that’s going to open up a brand new tab.

Because I’m on the free plan, I’m just going to dismiss this suggestion bar. You can see it’s got this little bar at the bottom. You can get rid of that if you just upgrade to the paid one. You’ll notice that the presentation is loading as expected.

If we grab our password from our Figma plugin here and paste that in, click on “Login”, that will automatically load up the presentation as we’d expect. That’s looking really good. Again, it’s on this different domain now.

As I mentioned, if you want to add a custom domain, you can click on this link “Custom Domain” button. That’s just going to ask you to upgrade if you want to do that. You don’t have to, obviously. But that’s just one option.

As I mentioned, there’s a bunch of platforms you can do this for. I’ve just listed a few here that might be useful. There’s another one called Netlify or Netlify Drop. This one allows you to drag and drop a folder.

To show you how this one works, it’s basically the same. I’m just going to go to my desktop. Because this one requires a folder, I’m just going to add this one and just call it “presentation”. You can call it whatever you like. It doesn’t really matter.

I’m just going to drag and drop my index.html file that we downloaded from the Figma plugin into that folder. That’s now going to allow me to drag and drop it. I’ll show you what happens if I just drop the file. It’ll tell me that it wants a folder containing an index.html file.

That’s basically why that’s being put into a folder. If you just drag and drop that folder with the file in it like this, that will work as expected. It’s a bit strange that it doesn’t just handle the file on its own, but I guess it’s expecting a folder potentially of assets.

In this case, it’s just the one file, so that’s why it looks like that. That’s basically done. I’ve already got a free Netlify account, which I’d recommend you do. It’s automatically taken me to the dashboard in Netlify and it’s just deployed that.

If I click on this link here again, we’ll get a new link. This one’s the Netlify link. You’ll notice this one doesn’t have a bar at the bottom or anything like that. As I mentioned, all of these services are quite different, so you can pick which one makes sense for you.

In this case, I’ve used Netlify as the example. Again, we’ve got this custom URL. With Netlify, you can also add a domain. All you have to do is step two here, which says “Set up a custom domain”.

If you already own a domain name or you want to buy a domain, you can do that through here. That will allow you to link up your custom domain to this Netlify site and that will allow you to change this domain here to your own custom domain. That’s an extra step that you can do if you want to. It’s totally up to you.

All of these services here will give you an option to link up a custom domain name. You can have your own company name or portfolio site name, whatever you like, associated with the custom domain. But yeah, that’s basically going to let you do that.

The other thing you can do is enable auto login. If you click on this little toggle here and enable auto login and then re-download your HTML file—just click on that, download it to your desktop again—that means you’ll just have to re-upload the file.

For example, you can see here in this previous example, the URL didn’t include an auto login parameter. But if we look at our new HTML file that we just downloaded, you’ll notice that it’s got a token built in, which will automatically log in for you.

If we open up this file here in our browser, it’s going to automatically log in for us, and the user doesn’t have to put in a password. If you prefer to do that, you can enable the auto login toggle here just by clicking on “Enable Auto Login” before you export your HTML.

Then, if you just re-upload that to your document or your domain, that’s going to allow you to automatically log in. If we re-upload that file into here—for example, this is my new one here with the auto login—I’m just re-uploading it, in this case, into my TinyHost site.

I’m just going to click on “Publish”, and I’m just going to say “Replace”. I’m going to replace this existing URL with the new file, and that’s going to automatically re-upload this new index.html file and it’s going to let me have that auto login there.

The same is true if you’re customizing the theming. For example, if you’re changing the login theme and you’re changing these kinds of settings here, that’s also going to change what the link is—the embed link.

If you are making any changes to the login page customizations, you’ll just have to make those changes, hit “Update Presentation”, and then re-download the index.html file and just re-upload that to your service, whichever one you decide to use. That’s going to let you do that.

We just re-uploaded the passwordless one. I’m just going to click on “View Site”, and this should now automatically log us in. As you can see here—again, I’m just going to dismiss this free tier thing—you can update that if you want to get rid of that banner, in this case.

There we go. This is the auto login version, and that’s working really nicely as well.

Yeah, that’s basically it. I just wanted to run through a couple of examples of how you can self-host the index.html HTML file that you can now download from the Figma plugin. That’s going to allow you to automatically host the Pitchdeck web presentation on your own domain or whatever kind of server that you have access to.

Again, if you’ve got a dev team or a technical team, they’re going to be much better placed to help you with this. But yeah, it’s pretty simple. It’s just a single HTML file. It’ll work literally anywhere. You just have to put that on a server somewhere, hook up a custom domain if you’d prefer to do that, and you’ll be good to go.

I hope that’s helpful. If you’ve been wondering how to self-host your own Pitchdeck web presentations that you’ve exported from Figma, this is now available in the Figma plugin. Please feel free to give it a try, and I hope that helps with your presentation workflow.

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