How to upload preview links for HTML banners from Figma to Netlify using Bannerify

Video Transcript

Today I’m going to be showing you how to automatically create a preview link of your HTML banners exported from the Bannerify Figma plugin on the Netlify platform, which will let you host it as a URL that you can share around to clients or stakeholders or anyone that you want to share a preview link of your banners with.

To get started, all we need to do is click on the little “Resources” icon in your Figma file, and if you search for “Bannerify”, under the “Plugins” tab you’ll see Bannerify pop-up. If you go ahead and click on that result, you can run the Figma plugin by either clicking on this “Run” button here or you can click on this little “More options” icon, which I’d recommend, and click on “Save Figma plugin” and that will save it to your Figma plugins list for easy access.

If we go to the Figma page, right click anywhere, go down to “Plugins”, then go down to “Saved plugins”, you can then click on the “Bannerify” item and that’ll run the Figma plugin that we just set up a second ago. With this Figma tutorial I’m not going to be going through the details of how to create the banners and design them and animate them, there’s a separate YouTube Figma tutorial on the channel if you wanted to search for that one; today I’m just going to be assuming that you’ve already got some banners set up.

I’ve already got a bunch of banners set up, each of them just have a few layers of content on them; I’m just going to load those into the Figma plugin by clicking on this button here and that’s going to load in the banners that we’ve got from Figma. You can see here that I’ve already got some basic animations applied; you can see here there’s some animations on each of the layers and these are all ready to go; I’m just going to assume that you’ve already got your banners ready to export from Figma into HTML.

What we need to do now is follow the steps that you’d usually take; in this case, we’ll click on the “Export to HTML” button and that’s going to open up the normal export panel that you’d see. In this case, we’ve got our code export settings, so we can decide what platform to export it to; today, I’m just going to do HTML/CSS, you can choose different ad platforms like Google Ads, but that’s up to you. I’m just going to make this retina images and leave everything else as is just to keep it really simple.

The thing I’m going to be focusing on today is showing you how to upload the preview page, that always gets included in the Bannerify exports, up to Netlify. If we click on this little checkbox here, “Upload Preview Page URL to Netlify”, if you click on that toggle, that’s going to enable this new section that we can paste a Netlify personal access token into. What you need to do is. if you have an Netlify account, just sign into your Netlify account; if you go to netlify.com and sign into your Netlify account, or you can create a free account if you don’t have one; in this case, I’m just going to use my own one.

I’ve got my Netlify account logged in and if you click on this link here, the “personal access token” link, it’ll take you to this page. What you need to do is create a new access token; I’m going to click on “New access token” and I’m just going to call it “Bannerify”, I’m just going to add that in there so I know what this token’s being used for. Then I’m going to click “Generate token” and that’s going to generate this token here; you can copy that to your clipboard by clicking this icon, and you can also store it somewhere for later, you can store it in a password manager or something like that, somewhere safe to reuse later if you want, because you won’t be able to see this code again after you close off this window.

I’m just going to click on “Copy” and then go back to my Bannerify Figma plugin. I’m back in my Figma plugin, and I’m just going to paste in that token that we just copied into this “personal access token” box here. I’m going to paste that in and that’s going to load up the Netlify site; because it’s the first time I pasted that in for this Figma page, it’s created a Netlify domain for me which I can now change in Netlify if I want to; by default, this will be the domain name that will be used for your preview page, but if you don’t want the one that’s automatically generated by Netlify, you can just click on this “change site name” link here. If I click on that, that’s just going to open up the Netlify tab for that site; you can see here this is the site that we just created via the Figma plugin, and now if we go to the “Domain settings”, you can see down here that we’ve got our site information, and I can click on “Change site name”. I can click on that and update this, so I’m going to call it “Bannerify Preview Page Demo” and click on “Save”, and you can see here that’s just changed the name of our site.

If we want to see that reflected in the Figma plugin, we can just go into the Figma plugin and click on this little “refresh” icon, and that’s just going to refresh the Netlify site. You can see here that the page URL has been updated to the one we just changed; that’s all we need to do to set that up. Now, because we’ve still got our “Upload Preview Page” toggle enabled, when I click on the “Export Banners” button, which I’ll do now, this is going to export all of our banners to HTML, CSS, and JavaScript, export all the images automatically, everything like that; and once it’s finished, it’s also going to upload the preview to Netlify; that’s what it’s doing right now, and you can see here it’s now completed.

This is the normal option that we have whenever we export banners from Bannerify; we can either download our zip file, I can click on that, download that to my desktop for example, and if we open up that zip file you can see we’ve got this folder here and we’ve got this index.html page which is actually the preview page that we normally get. If I drop that index.html file into the browser, you can see here that this is the local copy of our preview page that we normally get, but because we enabled the preview toggle to also upload this to Netlify, you can see here that we’ve got our Netlify preview URL showing up as well. It’s telling us that we can check out those on the Netlify preview URL, if we click on that link, this is going to automatically load up the URL that we just set up in Netlify. You can see here the custom page name that we gave it, and you can see here that all of our banners are being loaded in to the preview page. You could send this link to a client, or a stakeholder, someone inside your company, or outside, and they can view that link without having to manually open that zip file and load in the preview page by dragging the HTML file in, it’ll just do it all on this page here as a hosted link.

There’s also a link here to manage the site settings, if you click on the “site settings” link, that will automatically open the Netlify panel for that site. You can see here we’ve got the deploy that was just made, that’s all the details about the deployment that was deployed from the Figma upload, and then you can also do things like change the domain settings, you can change site settings and change a whole bunch of different things in here. You can get pretty advanced with it depending on what you want do, but for the most part you probably just want to change the site name, as we did before, and you can change that again if you need to, because the site ID itself will stay the same. Even if you change the name of this, it’ll basically still link up with the site in Figma; you can change that name and that will get reflected in Figma, but the link itself will upload re-upload when you change it from Figma; that’s just something to keep in mind.

That’s basically it; I just wanted to run through that really quickly with you if you’ve been wondering how to automatically create these preview pages that are live rather than having to manually upload the exported HTML preview page somewhere, this is an easier way to go about it if you just want to automate it and use Netlify as the platform to host the preview pages on, which is a really good platform.

One thing to be really mindful of is, if you’re not seeing some of the images show up, if you’re not seeing any images or any elements aren’t showing up in the banners on the preview link, it’s potentially because you’ve got an ad blocker turned on. Sometimes with these banner ads when they’re being viewed online, the ad blockers can block some of the images or block some of the scripts and cause it not to display. If you are running into any issues with banners not showing up completely, you might just have to disable the ad blocker that you’ve got turned on for this URL and then it should be all good to go if you just click “refresh” after that.

We’ll leave it there for today; I hope that’s been helpful if you’ve been wondering how to create preview pages for your Figma banners HTML banners that you can share around if you’re using Netlify, or want to start using Netlify, it’s free to sign up just for an account, and you can basically drop in that key or that token and start creating preview pages directly from Bannerify in Figma. Thank you as always for watching and we’ll be back soon with more Figma tutorials like this one very soon.