Video transcript
12-minute video ·
Today I’m going to be showing you a quick Figma tutorial on how you can add scrollable text areas to your HTML animated banners in Figma using the Bannerify Figma plugin. To get started, all we need to do is go to our Figma file, go to the little actions icon down here, and if you click on that and search for Bannerify, under the Figma plugins tab, if you click on the Bannerify item, you can run the Figma plugin by either clicking on this run button down here, or I’d recommend clicking on the save icon next to that. That’s going to let you run the Figma plugin from your Figma plugins list. I’ve already clicked on the save icon, so I’m just going to go to my Figma canvas, right-click anywhere, go down to plugins, and then go down to saved plugins, and click on the Bannerify item. 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 basically works is it treats any Figma frames on your current page as potential banners, which you can select in the Figma plugin here. Then it uses all of the content layers to create animatable layers in your timeline. In this case, I’m just going to load in all three of these banners on my page and click on the load check banners button. As you can see here, it’s loaded in all of the content layers. I’ve got a bunch of different content layers here in this frame, and that’s being added to the timeline in the Figma plugin. I’m not going to go through all of the animation features today in this tutorial. We’ve got some other tutorials that cover those in more detail, but basically all you do is just select the animation that you want for each layer, and then you can play around with the timings using the animation settings here.
I’ve already got a bunch of animations applied to these layers. Today, I’m going to be focusing mainly on how to add scrollable text content to your banners. Sometimes in certain industries, like education or pharmaceutical industries, they need these really long text disclaimers that need to be added to the banners, and they need to be scrollable because they’re really long. To make this really easy, the Figma plugin has a feature where you can basically turn any text layer into a scrollable area by clicking on the text layer in your banner and then going over to the typography section in Figma, going to the settings panel, and then just going down to the truncate text option right down at the bottom here. We’re going to change it from no truncation to the truncation enabled option. If I click on that, you can see here that we’ve now changed that to be a truncated text box, which means that if I expand and contract this, you can see that over here, it’s basically adding three dots at the end for that overflow. That means we can resize the text without it overflowing over the edges. This is going to determine the size of our scrollable text area. For example, if I wanted to make it this high, I could easily just position that with the truncation option on. Once we export that in a second, I’ll show you what that looks like.
Now that we’ve got the truncation option on, we just have to go to our layer with all of that text in our timeline. Go to the settings panel over here. If you open that up, you’ll see that we’ve got this option here, which is called enable scrollable HTML text, but it’s only available for those truncated layers. Because we just added this after the banners were refreshed, that wasn’t showing up. You can refresh the banners by just clicking on the refresh icon here or refreshing all of the banners in here. If you reload that and then click on the settings icon again, you’ll notice that the truncated text layer enable scrollable text option is now enabled. If I just go ahead and click on the enable scrollable text option, you can see we’ve now got this dropdown list of options where I can have it as a manually scrollable area, which means that the user has to scroll that in the HTML, which we’re going to export in a moment, or we can also automatically scroll the layer. We can either do that when the layer first comes into view, or we can actually wait until the banner has completely finished playing and then start auto-scrolling. I’m going to show you all three of these options now.
For example, if we close this off and then we click on the export to HTML button over here and then just export that as HTML in this case. You can choose different options, of course, but I’m just going to keep it simple. Because we’ve got this scrollable version, I’m going to turn off the infinite loop for all the banners. I’m just going to make that play one time. I’m going to click on the export one banner button down here at the bottom. That’s just going to export the banner that we just loaded up, and I’m going to download that to my desktop. I’m just going to click on the save button, save that to my desktop, and I’m going to unzip that. I’ve got this folder now because I’ve just unzipped the file that was downloaded from Figma. Then, I’m just going to load in this index HTML preview file into my browser. You can see over here I’ve now got this text layer which I can now scroll. This is a scrollable text layer. I can scroll through all of that disclaimer text, and it’s not taking up too much space, which is great. Of course, you can adjust that if you want to make it a bit longer or a bit shorter. It’s totally up to you. You can go ahead and customize that however you like.
I’ll just show you what the automatic options look like as well. If we go back to the layer settings, I’m just going to click on this little shortcut to open up the layer settings. We’re going to change this from manually scrollable to automatically scrolling on enter. This is going to start automatically scrolling that text as soon as the layer enters. If you look at the timeline here, it’s entering just after 1 second. It’ll automatically start scrolling after that. If I re-export the HTML, I’m just going to again click on the export banner button. I’m going to export that and download it to a zip file, a new one. Then I’m just going to open up that file and unzip the folder just here. Now, if we drag and drop that file into the browser again, you will see that this time it automatically starts scrolling the text. It’s going to automatically scroll from the top to the bottom of all of that text after it started entering the timeline. You can see it stopped out there, and it scrolled from the top to the bottom automatically. You don’t need to do anything there.
The last option I’ll go through now is just changing that one more time. We’re going to change it from auto scroll on layer enter to auto scroll on banner end. That basically means that it’s only going to start scrolling after the entire timeline, which in this case is 5 seconds. It’ll start playing after that 5-second mark. Importantly, if you’ve got the banners set to play multiple times, for example, if you set this to three, which means that it’s going to play through the timeline three times before it stops animating things, then it’s going to do that at the end of that three-tier cycle because it’s going to repeat the banner each time. In this case, again, I’m just going to keep it really simple and set that to one playthrough. I’m going to click on export banner once again, and we’re going to see what this looks like with that final option. I’m just going to save that to my desktop. I’m going to open up the zip. You can see I’m just going to get rid of these two folders so we don’t get them confused. I’ve just unzipped that, and one last time, I’m just going to drag and drop the HTML preview file into the browser. You can see it’s not scrolling. It’s waiting for that 5-second mark, and then it’s going to start scrolling. This can be really handy if you’ve got a longer banner which has to go through some multi-stage animation. Maybe you’re showing off some different information with a few different frames, and it might be a 10 to 15-second banner, and you only want that disclaimer text to start scrolling at the end. This is going to be a really good option for doing that. You want to make it auto scroll on banner end. In other cases, it’s probably just going to be easier to make it either auto-scroll when the layer shows up or the default option, which is just allowing the user to manually scroll through the disclaimer text whenever they like after it has entered the banner timeline.
That’s basically what it looks like there. I only did this for one banner, but of course, once you’ve set it up for one, you can just copy and paste those layers. In this case, I’m just going to copy it into my other frames down here. Of course, these are different sizes, so we might want to readjust that. We can change that like this. Likewise, we can grab this one again. I’m just going to change the background width and grab those two layers and finally add it to this last frame. Again, we’re probably just going to want to change the width of those just to make them fit the banner. Now, if we refresh all of the banners, I’m just going to click on the refresh all banners button up here, load all three of those frames in again. I’m just going to click on load all banners. If we load them in and scroll down to the other ones, you can see here that we’ve basically got those layers. Because we copied that original layer, which has the setting toggle already applied to it, if we scroll down here, you’ll notice that that’s already been pre-applied down here and to this one as well. That’s basically good to go, which means that if we now click on the export to HTML button one final time and then click on the export three banners button on this export section here, we’re going to download that to a zip file with all three banners now all having the scrollable text set up. I’m going to download that zip file again to my computer. Just go to my desktop again. I’m just going to delete the other folder and then open up this zip file. I’m going to drag and drop the index file into the window over here. We can see here that all three now have text. Because we enabled that setting, you can see that all of them are scrollable. We can scroll through the disclaimer text on all three independently, and that’s looking really great. Again, you can customize this to your liking. You can change the font, size, color, line height, letter spacing, and all that sort of stuff. That’s totally up to you. I just did a rough estimate of what it probably will look like with the smaller text. Of course, if you need more contrast, you can just edit the background layers as well. If you want to add a background layer to those and you want them to be a little bit more full of contrast, if we wanted them to be pure black in this case, we could just do that and then add that there. Again, you may or may not want to do this depending on your design. You can basically just export that however you like, and that’s going to automatically flow through.
I’ll show you what that looks like now. You can see this as a final example, again, just based on purely how you want to customize the design. I’ll do this one last example and then we’ll wrap up. I’m just going to save that to my desktop. This time we’re going to have it with the new background layer instead of having the nice sort of gradient fill. Now that we’ve just unzipped that, we’re just going to finally drag this last index.html file back into the browser. Load that up, and once again, you can see we’ve got the scrollable text, this time with a higher contrast solid background color. You can totally customize that however you like. I just wanted to show you there’s a little bit of flexibility there in terms of the creative side as well. That’s basically it. I hope that’s been really helpful. If you’ve been wondering how to easily add scrollable HTML text to your animated HTML banners, this is going to be a really easy way to go about it. You just have to once again enable the text truncation option in Figma down here. Just make sure that’s set to truncation enabled. That will then unlock the toggle here, so you can then enable the scrollable HTML text option. It’s totally up to you what kind of scroll style you want. This is going to allow you to do it without writing a single line of code. You don’t have to add any custom code options, which you can also do if you want to. You can add things like custom HTML, JavaScript, and CSS into your banners. Again, this is going to be a much more seamless way of doing it automatically. We’ll leave it there for today. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle