Video transcript
42-minute video ·
Today we’re going to be looking at how to design, animate and finally export banner designs from Figma directly to HTML (including a number of advertising platforms).
The first thing we’re going to do if you haven’t already done so, is install a Figma plugin called Bannerify. You can do that by going to the Figma icon up in the top left, clicking on “Community” and searching for “Bannerify”. You can see it’s popped up with two different results, so we’ve got our “Plugins” tab, which is the Figma plugin itself; so I’ve already got this installed but if you don’t have it installed, you can just click on the “Install” button and that will install it for you.
The other result which we’ll come back to in a second is under the “Files” tab. This is a example design that I’ve published on the Figma Community files area, and what you can do is you can actually click on this and duplicate it to your own Figma files, and what that’s going to do is give you a really easy quick start just to play around with the Figma plugin and see how it works without actually spending some time designing some banners for yourselves. I’ve got that duplicated over here and you can see we’ve got a bunch of banners already set up. So, if I right-click and go to “Plugins” you’ll see I’ve got “Bannerify” just here. I’m going to click on that and once that loads you’re going to see a few different things on your screen; so I’ll just go through each part of the UI one by one.
The first thing you’ll probably notice is if you scroll through, you can see previews on the right-hand side of all of the banners that we can actually see in a Figma file, so what Bannerify is doing is it’s actually going through every frame in your project or in your page and it’s treating every top-level frame as a new banner design. So, on the left here you can see if I expand out a couple of these frames I’ve named them to represent some of the commonly used sizes for banner ads and you can see each one’s just a regular frame in Figma, and inside of that frame you’ve got just regular layers as well; so we’ve got some text layers, we’ve got an image layer and we’ve got a another frame which has auto-layout on it to do our buttons. So that’s just a frame with some text in it and then it’s got auto-layout applied onto it. You can see that here it’s got auto-layout on there so if you want to remove that you could, but for now I’ve just left that on to make it easier to update.
You can see here in every group or in every frame this is a list of all the layers inside of each frame so these are these are representing exactly what we can see over here in our Figma layers so anything that’s added inside these frames will show up in the timeline here and you can see the layer names over here. The large rectangle layer over here that represents this layer in our file over here this slide rectangle so that’s that’s kind of a visual breakdown of of how all the layers look when they get loaded into Bannerify automatically. The second thing you’ll notice is the animation timeline here, so because I’ve duplicated this from another project I’ve already set some animation styles on it so Bannerify will remember animations that you’ve applied to your layers in Figma; so when you relaunch it, all of these animation styles will actually be saved and you can you can rerun it again.
These timelines actually affect how fast and how long the animations will wait to actually start playing, and you can preview what they look like by just clicking on the “play” button over here so if you click on the play button for any of the banners, you’ll get a real-time preview of what that animation actually looks like when it gets played back. The other cool thing is it’ll automatically update the animation on the fly as you change certain timings, so if I increase this you can see it’s reflecting the change immediately in the preview and likewise if I click on this “loop” toggle; enabling that will ensure that the animation just keeps going over and over and over again even after the timeline’s finished.
The other thing you’ll notice is on the left-hand side just next to the layer name is a drop down for animation styles. At the moment this one has a fade-in-left on it, but I can quite easily change that to coming from the bottom; so if I click on that you can see here it’s coming up from the bottom instead. I can move that back here so I can make both those things happen at the same time I can fade-in from the right I can do a rotation if I wanted to; that’s out of control, but you might want something like that. There are many, many animations that are already configured for you and they categorized by the type of animation; these are all “entrances” so these are all animations that will help an element to enter into the frame, and if you wanted to do an exit you can also do that too. I can apply an exit onto this onto this element here and that will actually take it out of the frame in an animated way and then there are a few other ones as well. We can do a scale-up, so this will kind of scale-up an element, and then we’ve got another category for attention-seekers; so you might want to draw some attention to one of your elements in the in the creative. For example, this heartbeat animation I can kind of click that on and now that element is just going to do a little bit of a pulsing animation on a loop because I’ve just set it to “loop”; but there are many many different animations that you can try out. This one’s kind of a jello sort of one, I can increase the speed to make it a little bit more impactful, slow it down a bit; so there’s many different animations and it really just depends on your creative and and what kind of feel you’re going for with the animation style.
You might be thinking it’s pretty annoying to go through and and change a select box every single time when you want to change an animation, and I completely agree, so there’s a few things that we can do to make the the selection and updating process of animations much easier so the first one would be just by simply doing a multi-select. I can actually click on any layers from any of the frames and you can see down here it’s it’s selecting all those layers for me and I can do a bulk animation and apply to all the layers I’ve just selected. For example, I can also de-select them, so I’m just going to get rid of some of these layers now. For example, if I wanted to change the first two layers of this frame to have a certain animation or the first three I can just select those three layers and then down here I’ve got the same animation options; in this case I’m just going to do this flip-in animation and I’m just going to change that actually to be a rotation so you get a little bit of a preview down here of that, and you can adjust the speed beforehand and when you’re happy with it you can just click on “apply animation” to (in this case) three layers.
So, I’m going to click that button and what that’s doing is: it’s applying our animation that we just set to those three layers, so you can see here it has applied the rotation animation to those three layers, but also the timings that we set for those animations as well. So now all these are the same timing and the same animation, and if we play that back you can see they’re all coming in at the same time another way we can go about doing this which can be helpful if you want to do it for an entire banner would be just to click on the select box at the top of the banner and that will select the layers that are inside of that particular banner so you could do this for multiple and and do that quite easily and just apply one style to every single thing every single banner if you wanted to; but in this case I don’t want to do that, but that is an option.
Another way that you can target layers is by using this drop-down in the top. This “quick select layer names” drop-down if you open that up we can see that we can actually select layers based on their type and name so it categorizes a by the type so got frames rectangles and text and then each layer name will be grouped based on that naming being similar. In this case, if I wanted to select all of the background images, I can simply click on this match a background rectangle, click on that and you can see here it’s pre-selected all of those layers based on that name. What that now means is I can apply an animation specifically just to that type of layer or that layer name, so in this case I might change it to a fade-in and you can see down here I’ve just kind of configured that and get a bit of a preview of what it’s going to look like, and when I’m happy with that I’m just going to click “Apply to 11 layers”. I’m going to do that now and you’ll see it update in real-time, so it’s just shifted it to be a delay of 0.6 seconds as a fade-in and you can see all of the layers have just been updated. If we replay that now, I’ve got our animations and now we’ve got to fade-in instead of the scale-up animation that we had previously, so that’s a really easy way to target specific layers as long as you’ve named them to be the same and as long as they’re the right group that you want you can very easily switch between those and target them so it’s a really quick way of making updates and a really nice way to apply a bunch of animations after you’ve sort of played around with it in the preview window in real time, so I really like doing it that way.
There’s also another feature that we haven’t covered yet, which is these two magic settings: so we’ve got “magic delay” and we’ve got “magic speed”. The other way you could think about this is by calling it something like “lazy mode”, so if you’re if you’ve been handed a design or you’ve been tasked with doing a design of a bunch of banners and you’re on a crazy deadline and you don’t have time to really finesse all the animations the way that you would usually really like to, this is a nice way to create some animation offset without having to manually go through and do it yourself. What I mean by that; it’s probably easier if I just show you; so if you click on the “magic delay” select box, you’ll get a bunch of options for offsets so in this case I’m going to click on 0.4 seconds magic delay and you’ll see what happens when I click that now. I’m just going to click that and you can see the whole timeline has just completely shifted as far as the delays go, so we selected 0.4 seconds and so what that’s done is it’s actually added 0.4 seconds to every layer in a cascading manner, so you can see on the right-hand side all those animations are now cascading in terms of when they start the playback and this gets applied to every single banner in your creative.
That’s a really easy way to make updates to all of your banners at the same time without having to manually add all those different offsets if all you really want is a simple cascade so that’s back down to a little bit less and we can just keep changing and do a happy with it so this is a slightly quicker one okay we can even quicker so we might be happy with that and then the other side is kind of what you would expect as well. In this case the magic speed will change all of the layers to have exactly the same speed, so what I’m going to do is I want to change it to make everything have 0.7 second speed, so I’m going to click that and you can see all the layers are now have exactly the same speed so that’s that’s a pretty nice way of easily creating cascading animations without very much effort at all. These kind of work independently of each other, so if you did want to have different delays over here, just some sort of crazy delays with different speeds, so if I wanted to set this if I want to set the same speed on all of these layers but keep all the offsets that I’ve already manually set I can still change the speed and the offsets won’t be affected. So, if I change that to 0.5 you can see it’s pulled back to where all my offsets already were so it’s not going to mess those up unless I specifically override the delay, so it can be pretty nice if you just want to play around with speeds or play around with delays, but you’ve already kind of got your speeds or delays sorted and you just want to kind of automate the other one so that’s a really nice way of doing that.
What I’m going to do is I’m just going to change all of these to be similar, so I’m going to quickly go through and show you how I can just quickly make all these banners look good with that much effort. In this case, I’m going to use a fade-in-bottom for all of my brand names and I really want that to come in first, so I’m just going to change that and apply it so all my brand names are now fade in bottom I can see that over here that’s pretty nice and then if I go to the brand characters that’s going to let me pick another animation so in this case I’m going to do the same thing and do a fade-in-bottom, and I’m not going to be too worried about the delay because I think I’m going to cascade those up myself in a second using the magic delays, then I’ll do the tagline and again we’ll do a fade-in-bottom. What I’m going to do, is I’m going to set all of these to a 0.4 second delay let’s see how that looks; so, it’s probably slightly too slow, so I’m just going to speed it up a little bit. I’m fairly happy with that, but the one thing I’m not happy with is the background, so I’m going to just change the background to take much longer to fade-in completely. I’m just going do a fade-in and I’ll see what that looks like. Okay, so that’s just been applied you can just see it applying the timeline and I think that’s better now that we’ve slowed down the fade-in a little bit.
So, now that I’ve shown you how to do the animation there’s probably one more thing I’ll show you before we export the banners. You can see over here; I’ll use a bigger one actually so you can see; over here we’ve got all of our layout from Figma and so this one is for the square layer, so if I jump to that here and you’ll notice if I make a change in my Figma frame you’re probably wondering why is it still looking like that in the preview, and that’s a good question to ask; and the answer is you have to refresh the data if you want to get that position updated in here; or add any layers or change any layers in Figma after you’ve opened Bannerify. So it’s very simple, you just click on this little “refresh” button up here and you’ll see in a second the new preview is loaded with the text in the brand new spot that’s coming from over here, and we can see it here just in the corner where it should be. So that’s perfectly perfectly normal to do that if you do need to make a bunch of changes and see those reflected in the Bannerify preview you can simply click on that “refresh” icon and you will see those pop right up.
I’m actually just going to leave that there for now just to kind of demo of what that’s going to look like in a second, so once you’re happy with your banners and the animations in them you can click on this big blue button up here which says “Export Banners to HTML”; so I’m just going to click on that and you’ll see this panel pop out up the top here. We’ve got a little bit of a pseudo preview of roughly how the banners going to be exported or the preview page. Bannerify creates a custom preview page which basically loads in all of the exported banners to a single page that you can review and play all the animations on at once. This is really helpful if you’re sharing a link around internally or sharing a link with one of your clients or you just want to get someone else’s eyes over it for approval and so Bannerify will generate this automatically.
We get a few options here: one of the options is to use “dark mode”, so this will change the background of the page to be in a dark mode setting, by default it’s just the same gray as the Figma background. The other option we have which is sometimes the requirement for banners is just adding a black border to all of the banners so this is something that you can do if the creative or the brief requires you to add a black border, which is sometimes does. The other thing you can do is add a little preloader animation, so you can see these little animating spinners here, this is an optional setting which will show that spinner in place of just a blank square if you want to have a little pre-loading state while all the images are loading.
Finally, there’s a setting for compressing your images, so depending on the use case for your banners, sometimes certain advertising providers have a certain limit that they impose on file sizes so if you do need to get your image sizes down to get under that limit you can play around with the image compression, which is built into Bannerify, and this will really help to reduce the image sizes that you would usually get directly from Figma. It will take slightly longer not much longer but it will take a little bit longer if you do decide to compress them so I’m just going to leave that off for now and I’m just going to leave all the other settings as default.
The second thing that you probably noticed is this export format select box. By defaultd this is set to “Vanilla HTML/CSS” and what that means is it’s not loading in any code for a third-party advertising platform like these options here, so this can be really useful if you just want to put a banner up on your your own website or one of your clients websites but not necessarily link them to an advertising campaign or advertising platform it can also just be useful if you want to prototype an animation or interaction and display it as a banner and sort of send that around up with that in one of your prototypes or something like that; so the Vanilla HTML/CSS option is really good if you just want to get a bunch of code and use it however you want without any extra code specifically for advertising platforms. In this case, I’m just going to use HTML. The other option that you get with that is to put a URL in there; so if you don’t put your role in there the banner won’t have any links, it won’t have any redirect on it, it’ll just be a plain “div and if you do put a link in there, that div will be rendered as an “anchor” tag with an “href” in it, so if someone clicks on it, it’ll take them to whatever website or URL you wanted to put in here. In this case, I’m just gonna leave that off as well.
When you’ve configured all these settings, the final step is just to click on this blue button down here, which says “Export 11 banners”. So I’m going to click that now; so now it’s doing its thing behind the scenes, and in about one second you’ll see a .zip file pop-up which you can save. So that’s up here, and by default it’s just the the format that you’ve exported and then today’s date with the timestamp, and you can change that name if you want, to but for now I’m just going to leave that as as is. I’ll just hit “Save”, and if I jump to my desktop you can see this is a .zip file it has just generated for me. I’m going to double click on that, open up that folder and the first thing you’ll notice is there’s all these different folders which have the same layer names as we can see over here in Figma in the left hand side. The other thing it has done is prefix all of those layer names with the dimensions from each of those frames, so if we jump into one of these you can see there’s a few files in here they all look like that so all the structures are exactly the same.
If we just go through these files really quickly: so it automatically generates a backup JPG for all of your banners, so this can be very handy especially for the advertising platforms, but you may just want that JPG export as well for other reasons. Then the “images” folder; this is providing us with all of the individual layers and images that we’ll need. Text is rendered as SVG, so that’s to keep the file size down to a really low number, so it’s like two kilobytes for this one, and also have super super sharp quality regardless of what kind of screen you’re rendering it on compared to PNG, but the PNG looks looks pretty good as well and the file size is pretty low if you’re just using it for things like buttons.
But the key thing that we want to look at at the moment is just a quick snapshot of how everything kind of turned out in the render so I’m just going to click on this “index.html” file that was in the root of the folder we just unzipped. If I click on that you can see here this is all of the banners that we just exported from Figma, so if I resize, you’ll see that this page is completely responsive; it will automatically figure out the best place to put the banners, so you have a really nice preview page and I can keep keep dragging that out. The other neat thing is this little “play” button up here, so if you wanted to replay those animations over and over again you can just keep clicking that button and you’ll see those all play in sync, which can be really nice if you just want to get a overall view of how everything looks and interacts together this can also be handy if you know that there are certain banners that are going to sort of interact with each other in some way from an animation standpoint, sometimes you might have multiple placements on the same page and they kind of play off each other or something like that depending on your creative.
So you can just keep replaying it, and of course if you’re not happy with any of the animations you can just jump back into Figma update the animations or the positioning and re-export it just as we did a second ago. You can see here in this square frame up here (the 250x250), it has reflected the change that we just made while Bannerify was running, so that’s this change down here that you can see just in that top right position. So that’s the other really neat thing, is that typically if you’re not doing this automatically when there are these positioning or sizing or animation changes usually you know a developer or somebody building the banners will have to re-save all of these assets from Figma and re-calculate all the positioning by going to the code tab over here and kind of figuring out all the different offsets manually and then updating the code once again, with Bannerify, that’s no longer an issue. It’s really nice to just be able to reduce that feedback loop to zero and just keep iterating on creative and iterating on animation really easily.
There are a few small things I just wanted to point out as well before I move on to a fresh canvas to show you what that looks like. So, if we rerun Bannerify for a second, there’s a couple of things to note. The first thing is that all of the export settings are kind of preset if you don’t certain the export settings on your layers so what I mean by that is if I click on the “Book Now” button or any of the the “Book Now” buttons, you can see down here I’ve got a an export setting of “PNG” at “2x”. Because this frame has a transparent background on it, I really do want that as a PNG, but by default the Bannerify is set to basically fall back to saving things out as a 2x JPG if any layer doesn’t have an export setting on it, and that’s more just to be on the safe side if if everything was made to be a 2x PNG or a PNG, the image sizes would get very big very quickly and oftentimes there’s no transparency or there’s no reason to need that PNG; so that’s the reason why it defaults to a JPG. It is worth noting if you do have any transparency on any of your layers image layers, you just want to go ahead and set the export setting to PNG at whatever resolution you require and then you text layers as I mentioned before will automatically get saved out as SVGs, so you don’t have to worry too much about that.
So I’ll quickly re-export these in dark mode with image compression as well just to show you a little bit of a different setting. What I might do is just set that to like 75 or 85 and I’m actually just going to leave the rest the same just so we can compare sizes. I’m just going to export that again and we should be able to save this zip in a second; as I mentioned before the compression setting will take slightly longer because it has to go through every single image and compress them, but you can see it’s already finished and the image savings that you get is definitely worth the extra time. I’m just going to open up the brand new .zip, and before I do that, the thing you’ll notice here is how the .zip archive size has gone down from 3.2 megabytes to 831 kilobytes and that’s completely due to the fact that we just enabled image compression and set it at level 85 in this case. If you need to get that down even more you could add even more aggressive compression, but even compression at a higher level like an 85 to 95 will really get that image size down for all of your banners, so I think it’s definitely worthwhile.
If you open this up, I’m just going to re-open the “index.html” preview page and now you can see we’ve got dark mode enabled as well, and because we’re running this locally you might not be able to see the image loader for very long, but you sort of get a glimpse of it in the background there as well. Once again the play button can just be clicked infinitely, and you can just keep watching those animations. So that’s what dark mode looks like, I think it looks pretty cool depending on your creative, and also helps to simulate if your target website is darker or lighter, but also depending on what kind of creative you’re using the dark mode can look kind of nice as well; compared to the the light one this kind of looks much nicer I would say, so that’s that’s what dark mode looks like that’s what the loading looks like. That’s just the infinite kind of refreshing that you can see, and the positioning update I made on the square has been rendered now, so in the first one we moved the text up here but in the second one I reverted the text to be back down here and you can see straight away it’s it’s moved without me having to rewrite any code which is super nice and that’ll of course apply to animations as well it’ll just keep updating it depending on whatever you’ve updated into Figma.
That’s that’s roughly what that looks like, so I’ll just close that off so this was obviously using the the file that I already designed as an example which you’re more than welcome to use and grab from the Figma Community files if you just want to have a bit of a play around with it as I have just been doing, but the most likely outcome is you’re going to want to do this from scratch so I’m just going to give you a quick demo of what that looks like if you’re running the Figma plugin from scratch. This is a completely blank Figma page and I’m just going to re-run Bannerify here, and you can see this is a completely different state to what we’re used to seeing from the last couple of times we run it. The reason this is showing up is that document is completely blank, we have no frames so far, so it gives us a couple of options: one is to look at the example file that we were just looking at, so if you click on that it’ll link you straight to opening that Figma file that we were just working in.
The other option is it’ll quickly scaffold out a bunch of the most popular sort of sizes for banner ads and you can pick and choose which of these you actually would like to use, so you can turn them on and off. In this case I might just get rid of the smaller ones in my case so now I’m left with nine, so you can see here it’s kind of telling you how many it’s going to create and when you’re happy with that you can just click on “Create nine empty frames” and it’s immediately added those to our Figma file. You can see down here it just created all these brand new fresh frames for us to design things in and it’s named them set all the correct dimensions and they’re ready to go, and the Figma UI the Bannerify UI has changed to reflect that as well, so it’s loaded in all of the blank previews these are all have nothing in them at the moment and the kind of prompt here as well is now asking you to add some layers to to these different frames, so we can we can totally do that and now.
You can basically just design it as if you were designing anything, so you design your normal layers; we’ll do a text layer and I’ll just put put a little bit of a “hello world” in there (way too big), so we can throw them in there, I might design an image, so just using the Unsplash plugin; I don’t know what this is, but I’ll just use it anyway. I’ll just drop that in there; okay, so this is a very meaningless banner, but I’m just going to re-run Bannerify with that and you can see it in here; it has picked up on my brand new creative (which I’m very proud of) and what it’s done is by default it applies a simple fade-in animation and cascades that to 0.3 seconds with the speed of 0.5, so that’s basically mimicking what we were looking at before with the magic speeds. It essentially defaults to a few magic speeds for any new creative that you want to roll out, so that’s just a really nice way to have some animation to serve as a starting point, but of course that can be that can be changed, so we might want to do something a little bit different. We could do a puff-in, so we might want to make that a little bit longer, and this is working exactly the same way as we were just playing around with the other other banner campaign.
You can just keep messing about with these and it really just depends on the creative and the brand or the style that you’re trying to go for, so we could do something a bit wacky here; maybe the jello one again; well this one that’s a bit crazy; you can loop that; we probably don’t want to do that version, but that’s a rough idea of how it could look. Same thing if I need to update the layer position, I can just update it here, “refresh”, and you can see that come in there now. In this case, I’m actually just gonna get rid of all the other frames; oops, wrong way; so, I’ve just got rid of all the other frames and I’m going to refresh this one. I’ve decided all I want is the medium rectangle, so I’m just going to hit “Export” and it’s exactly the same process; I’m going to compress the image, Vanilla HTML/CSS and actually I’m going to make this one a DoubleClick one I’m going to save that.
So, it’s very quick, with just one banner, it takes less than a second. Once again, I can click on that to see my preview pop right up. It’s probably worth noting as well you can of course open up the “index.html” file for each banner, so if I open up that one, you can see that come in quite nicely just on its own.
You might also notice this tab that we’ve just opened with the preview page, you’ll notice it says “Page 1” compared to our other one, which had this other title much more relevant to our campaign. If you do want to change that title, all you need to do is go to your page up here in Figma, double click on that and change the page name. I’ve just re-run that for you to show you what that’s going to look like, so I’m just going to export that, save it and there we go; you can see it’s got “Hello World” there instead of “Page 1”, so that’s what that looks like.
The other thing you can do to relaunch Bannerify if you don’t want to continually go to “Plugins” is this new feature that Figma has just released, which Bannerify has included. So, it’s clicking on this little bear icon over here (the Bannerify icon); just click on that and it will relaunch Bannerify for you, so you don’t have to keep opening the Figma plugin. That will only show up after you’ve already manually run the Figma plugin once, but once you’ve already used it in your file or in your Figma page, this will be available to you to keep re-running the Bannerify Figma plugin very easily.
So, that’s an overview of pretty much everything you need to know to animate and export production ready HTML banners directly from Figma. If this is something that you do very often, I hope that having the ability to re-generate HTML and CSS within a couple of seconds is going to be really helpful to your workflow; that’s the reason that it exists, to solve that problem, so I hope that you enjoy using it and I look forward to doing another Figma tutorial once I have more to share about Bannerify and other Figma plugins.
Pro Bundle