How to Design and Animate Banner Ads in Figma | Jaz Infante | Skillshare

How to Design and Animate Banner Ads in Figma

Jaz Infante, Designer // AIGA Board Member

How to Design and Animate Banner Ads in Figma

Jaz Infante, Designer // AIGA Board Member

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (27m)
    • 1. Introduction

      1:16
    • 2. Creating Static Display Ads

      9:17
    • 3. Adding Animation

      9:37
    • 4. Exporting Your Animated Ads

      7:06
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

50

Students

--

Projects

About This Class

Figma can do a lot more than UX/UI design prototyping. Did you know it also has some really cool capabilities for designing and exporting display ads?

While this course is not a deep dive into Figma, it shows you how to use this software to design and even animate display ads entirely in Figma. I'm assuming you have a working knowledge of Figma and dive right into creating display ads. But let me know in the comments if you'd like me to do a full course on the basics of using Figma!

The plugin I'm using is called Bannerify and can be installed here: https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio

fb21d291.jpg

Meet Your Teacher

Teacher Profile Image

Jaz Infante

Designer // AIGA Board Member

Teacher

Hello, I'm Jaz! I'm a full-time visual designer and Board Member for the AIGA Los Angeles chapter. 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Introduction: Hello and welcome to my new Skillshare course, how to design banner ads in Figma. Now, I spend a lot of time as a designer making display ads. It's just where the industry is now. Everyone across every industry, whether you're selling shoes, whether you're selling software, whether it's B2B or B2C, you're going to be designing display ads. You're going to be selling your products online. And that means you need display as you need digital advertising to do that. So that means that as designers, we have to get really streamline and get really fast and effective at how we design these banner ads. So I have a course on designing these and banner snack. I have a course on designing these in Photoshop. And now I have a course on designing these in Figma is, as of a couple of months ago, I learned that you can actually start doing some pretty cool things within Figma. I spent a lot of time in Figma designing for a UI UX stuff. But now Figma has some really cool tools to design display ads as well. So we're gonna go over those today and just add another arsenal to your, to your display ad designing skills. So let's jump into it and get started. 2. Creating Static Display Ads: All right, so I'm here in Figma now I have these really simple display ads. Therefore, a case study, right, says learn how Laura's mental health benefit is changing lives or Genetech. It's really simple display ad design wise. It's not that complicated, right? We just have a download now by and the client wanted to show what the actual case study would look like. So we have the first two pages of the case study. The background effects those external kind of circles and these diagonal lines here, that's from their brand style guide. So it matches what they have going on on their website. So as this, this is their font as well. It's called Gilroy. And the colors that we're using are also their brand colors. So basically, the way that you do this in Figma is really straightforward to just, for just designing static ads like this. You, each of these is essentially its own frame. And so I have here the stem of the most common display ads though we would have. So I'm just gonna go up here and I will create a frame, right? And just really simply drag and drop, right, since now I have this frame and then appear in the top right-hand corner. I set my size two to whatever I'm looking for. So say it was a 300 by let's say three hundred, eight hundred fifty is a pretty common size. But let's say we have a 300 by 500 AD that we had to do. So I said that here. Then the same way that I do in my Photoshop course, in my banner snack course, it's really important to label and name your layers appropriately so that you can go back and find them. I always label all of my boards with the actual size of the banner ad because it makes it easy for the person that I'm delivering the addtwo to export it and send it to wherever they need to send it to. So here I will basically just kind of copy and paste my name for it. But then I would change this to 300 by 500 core. And from here, it's basically just like Photoshop. It's just like Benner snack. It's just like any other design software that you use, doesn't matter. If you're in Figma. We're doing the exact same things. I would change the fill. I'm going to change this to the background that I have on everything. So now I've got my canvas color. And if you if you already have some of your assets already laid out, you can basically just copy and paste. So I could literally take everything that I have on this banner. Just copy it, bring it over here, paste it, scale it down so that it fits onto the chemistry I'm working on. And then just reposition some of these elements so that they work on this size. So I may drag that over here. I'll make this bigger or change the font size to be a bit smaller so that it fits better on this space. Fix the letting on here. Maybe even a bit smaller. I don't like I don't like how this benefits is hangs by itself. So I'm going to have to go pretty small on this. There we go. Yes, I will basically just kinda reposition these things. Maybe scale this up a bit, right? And that's the basic gist of it. So now I've just made a completely new display ad. If you were doing this from scratch, let's say you, you didn't have any of the elements themselves. Maybe you're completely new to Figma. So as I said before, you first create your frame. And then once you have your frame, they need to start adding elements to it. So you can go in and add text, which will be one of the first thing. So you can go up here, click Text, draw your textbox, and then you start typing. If you know how to use any design software, you know how to use Figma, it says it's essentially the exact same tools, the exact same kind of layout process. So you can go in here format it left justify. You choose your font, your whole library of fonts available to you here as well. So you choose a font that is awful. Let's pick speak to you very soon. Okay? Then you would change your font size as well. And your line spacing. You have all these available to you as well, your color. You can, you have the slider here to kind of find the color that you're looking for. You can also adjust transparency on here. Once you have a color setup, it saves it to your document color so you can reuse the color. So let's say I have this this navy blue that I'm using for most of my most of my documents. I'll change this to my navy blue, right? And now we're all set awesome to add a button. One of the ways that you can do that is through creating a rectangle. Very simple. You just draw your rectangle. Choose your color. I'm going to go in and stick with my navy blue. Over here. You can change the corner radius. So as you can see in my display ads here, we actually have a slightly rounded corner. So I said that here let's go up to four corner radius, maybe five. There you go. To add text to it would be the same thing. Make your textbox wherever your CTA is. In this case it's Download Now. Now to make this a lot smaller, change the fill to wait, let's center it and then bring it down a bit bigger, right about there. Changes to bold. Awesome. So it's not that different from any other software that you use, that you've used before. For adding these images. The most simple and straightforward way is literally to just drag and drop. So if you have these images saved on your desktop, you would go to your desktop. And then just drag it into Figma and it'll automatically bring it in. There's no need to import, export or anything like that. And then so as you see once you actually have dragged and dropped that image C, you can see in your layer here that it knows it's an image. And if you need to replace that image, you select it and then write in here in your fill, you'd go to Image. If you need to change it, you have some, you have some editing features here. You could adjust the exposure, you can adjust the contrast really basic. It's not as robust as Photoshop. It, it'll, it'll suffice for some things. But if you let's say you had the client decides that they don't like the image, they want to change it, or they can choose Image. And then you just choose from any, anything that you want. Let's say, I choose this one. And it should auto populate now. And so now I have this new image in there as well. So it's pretty straightforward to design everything in Figma. As long as you know Photoshop, as long as you know any other kind of design software, thickness going to be really, really intuitive. And if you were designing static ads, you would get as far as this. And you're basically done, right? This is, this is where you stop. And you would just need to export these as static JPEG images. So we would select them all. I would go down here to export my five different layers. Let's say I'm going to save them to my desktop. And now it's done. So now if I go to my desktop, let me get out of full-screen here. Now you see all my ads here already perfectly labeled the way that they're supposed to be there, labeled using the what I named my art board. And they're all set and ready, right? And so it's that simple to design adds in Figma. But Figma also has some really cool features and plugins that you can use to take these to a whole new level besides just making them static ads. So in the next video, we're gonna go over what that plugin looks like and what it does to your display ads. So stay tuned. 3. Adding Animation: Okay, so everything I've shown you to this point is really straightforward and it's not exactly game-changing news right here. Essentially just designing art boards within Figma, which is partially would've sit there was designed to do. But the really cool thing that figma has now is the ability to actually animate these ads and export them as Gypsies and as HTML adds, the exciting part is the HTML ads. Since increasingly display ads are moving away from just being static JPEG ads and needing to be these dynamic HTML5 ads that just performed better across and just get more return on investment for those kinds of ads. So let's dive into how to do this on Figma. You'll need a plugin called banner of Phi in order to do what I'm about to show you. But if you have the plugin, essentially what you do is you go up into here, you go into plug-ins, and it's called banner of phi, banners studio. Now, better if phi is just a really cool and easy to use plugin for Figma. So as it does when, once you have it up and once you install it and then have it up and running and you click in and run it. What it does is it basically takes each of your elements on your canvas where all of the different things that you have on each of these canvases. And it lets you add animations. You don't need to do any kind of coding. You don't need to do any kind of fancy gimmicky stuff. You just tell it what thing you want to animate and when. So let's say, let's go to my, let's see, let's go to let's go to this. But, okay, so right here, I'm in my 336 by 280 AD. And by default it has this fade in animation applied to every single layer effect. So if I click here and just press play off the bat, it already has an animation. So I could literally just lift a finger and just say export HTML or export to Jeff and video and be done with it. If I wanted to start tinkering with it. Well then this is where it becomes just like the photoshops homeland animation that I covered in one of my previous courses. And the banners snack timeline animation that I also have a different course on. It's really just understanding the timeline, understanding how emotion works, and then adding in these, these animation effects. So let's say the first thing I want to turn to appear is the text that's learned how Lear as mental health benefit is changing. So I would select it and then say I want it to, to, to feed and say why it's a skill and see what that looks like. Yeah, So I like the scale in better. So I want this actually to come in first. So I'll move this little block all the way to the front. So now if I play that out again, it's the first thing that comes up. And so already I'm kind of liking that better. The next thing I want to pop up, Let's see. I want the download now by and the Lyra logo to, to pop up a bit sooner. So I'll go to my button here and let's see. I have it come up there. Yeah, like it better and I'll do the same thing with the logo, want them to pop up at the same time. So these two now are aligned at the same time. And I don't want them to fit in. Let's say you have a whole library of things that you can do it, you can get really crazy with it. This role in from the left, right, that gets a little crazy. If I want to buy into C to flicker in and see what that looks like. That's, you know, maybe that's the right move for something that you're working on. You know, you have a whole host of things that you can choose to do. But let's see, what is rotate 360. That's too much. Let's say I want to do I don't know. I kind of just like the skill in yeah, and I'll do the same thing with the viral logo. Scaling. Yeah. And now I want the the two coats images. So I have the study cover and the study page 2. Again, this is why it's really important to name all of your layers appropriately. Because when you're doing this, if you, if this is just IMG dash 66 5 or it's, you know, I stock image Baba. It gets confusing what you're actually referring to. So label everything so you always can find exactly what you're looking for. But I don't want them to fade in right away. I kinda want them to fade and after I have the text in, so let's say move this over here. And the same thing I want these to power, but at the same time, maybe just a little bit staggered. There we go. So when you play it one more time, That's a bit I don't like how it comes in too much later. So let's do that. Let's Kills a bit too delayed. And then the very last thing is I want these background things to appear at the same time in the beginning as well. I want them to fit in. Let's do a was Puffin look like yeah, I like that. Okay, so we'll change this to Puffin. There we go. Nice. Cool. And now that I'm looking at it, I don't like that the Download button and a liar button comes in before the case study. I think it should come in after the case study. So let's go ahead and change this to like and this kinda comes in right here. Okay. I think we're done, That feels good to me. So now I have two options here, I'd say, and I'll have to go through and do this for all of my display. And so I did this for my one size. And now I go through and basically just have to redo this again for all my different sizes. Like that. You could also just do, do it globally by using this quickselect layers. So let's say I do the, the text, right? So it's going to quick select all my layers, all of the texts layers, and I can change all of them to what I had in which was skill in thank you. Yeah, scaling. And so it's going to change all of them for me. All of the different ones will have, if I go in here, they'll all have scaling. And if I change the timing for it as well. So I think in my original one, Let's see. Come in early at 0. So yeah, it's, it's, it's one way to, to speed up your thing and you could actually just do it down here. So you click in it, it's scale in 30 seconds and it says, apply animations to layers. And now it's doing it globally. So you don't have to do it individually. And I can do that again for any layer. So for the button, do the same thing. I think I have it scale in and I had it skill in since my original one skill and at 1.1 seconds, let me go into 0.1, apply to five things. Let's apply it globally. So this is how to streamline your operations so that once you have more than all of, more than just one display ad right here, I have these 12345. Sometimes you're working with like 10, 15, 20 different display ad sizes. So you're not going to want to individually go through and time remap every single one of these display ads. So if you saw, if all of your layers have the same name, if you do the copy and paste. So here you start with one display ad and you copy and paste all those assets on to the next size. And then you go through, so you're essentially creating the exact same elements across all of your canvases. So then when you go into Banner, if I Studio, you can quick select your layers and you have the exact same layers working on, on every single one thing, every single one of these, these display ads. And you can do these global effects. It saves you so much time. So let's say. So now I've done that in sound, now I'm ready to export. So in this next video we'll talk about how to export these, how to add your URL links. What the next step is to take these and kind of finish them off for delivery. 4. Exporting Your Animated Ads: Now, at this point we've done the hard part. Adding the animation and setting your timing is the most time intensive and labor as part of this whole process from here, exporting is a breeze. So let's assume that we've gone through and we love, unlike our display ads, we like the animation and we're ready to export. Our first option is to export as a GIF or a video. And then when I click this and it's this brings up this dialogue. And essentially from here, you can have the banners be exploited as a GIF or a video. If you choose a GIF, you can set your infinite playback loop here. Let's say you want the animation to just load through once and then stop. You set that here. If you wanted to infinitely loop, then you need to have this selected. So this is infinitely loop, and this is not looped. If you're doing video, then you choose your frames per second. You can do as faster, as quick as you want, as you can see here. It has some settings depending on what you're doing. So if you'd recommend that if you're doing Google Ads, you should be at 40 frames per second. And then you choose your image quality. This is more relevant for Jeff's, but also for any kind of static videos that you have. Anytime static images that you have in your videos, you can choose the quality here. And after this, you would just choose Export Jeff or export MP4 and export web. And I'm not going to do this now because it takes a while to do it, to package everything up. But essentially it's as straightforward as it can't be just export and you will, you're ready to go. Now, if you export it as a HTML file file, this is where some of the magic really happens. Now if we were to do export as HTML, a different dialogue comes up. So as you can see here, we have the option to add a one pixel border to all of our banners. This is in case you have a background, if your background is white or you're worried in any way about your background, kind of matching the background of the website. And you want to make sure that it's distinguishable from the background. You can add a one pixel border and it's just going to add, as you can see in this preview, this a really simple border to all of your display ads. You can add a preload or animation to all your banners. This is essentially as if it's a very long and larger file size. You add this and it just keg adds this thing to let people know that something is loading on its end. My general rule of thumb is if you need a freeloader, your file is too big and your, if your design is too complicated, I generally don't mess with any of that. Same as with the Geoff and the video. You have the option to infinitely loop of the betters. So if you toggle this, the banners going to play through the animation that it's going to go back to the beginning and loop over again. Now sometimes you want this and sometimes you don't. So you have the option either way of having a play through once and then stay, or I'll play through once and then loop again. As far as the actual packaging of the file, you had the option to include a backup JPEG for all of your banners. I highly recommend this as a safe. Keeping in case for some reason your ad is unable to load, you have a backup static JPEG as making sure that as a way of making sure that your banners I bulletproof and it will load no matter what. You have the option here to toggle two arcs images for retina displays. This is increasingly more common as display, as kids get more and more high resolution. So it's becoming much more common practice to have Retina displays. And then you can compress your images. They generally don't compress them. But if again, you need to reduce your file size for whatever reason, yeah, the option to compress your images here and toggle the quality for them. Now, here's the most exciting feature of this plugin, the code output settings. So if you click into them, you can see here you have all of these different options for how you want to export these HTML ads. This is game-changing. This is within Figma that you can just do this with one-click in Figma. So let's say your employer or your client is doing Google ads and they will be, the HTML5 file for Google Ads is going to be different than say that HTML5 L for DoubleClick, campaign manager, for seismic, for Yandex, for admiral. Everyone uses a different platform, so the ability to export for specifically for that platform is crucial. So let's just say for this purpose, our campaign managers using DoubleClick. So we've used double-click. And now here is where you would put in the link that you want your ads to go to. So let's say my would be www.health.com. Okay. And include individuals at files for each banner? Some people depending again, you'd have to confirm with your client or your employer how they actually upload this into their campaign managers. Some of them what individual files for each individual banner ad. Some of them want just one big zip file, figure out which way they prefer. And then you do that here. So now I'm going to click Export five batters. And then we'll wait as it generates all of these banners for me. Great. And so now I can just click, download the zip file, choose where I want it to go to, and hit Save. So now if I go into my downloads folder, I have my file here with all of my individual display ads as individual fails. If I click into this index HTML folder, you'll see all of my ads collectively so I can see all of them. Make sure that everything looks like it's playing the way it's supposed to. Which is great. Let me go back to the folder. Now if we go in here, as I said, we have the individual folders. We have the index.html folder that for the individual banner, we have the images. So these are basically all of the links, all the different components of our display ads. That it's the way that you would make a package in InDesign where you have all of your links and your fonts and everything. Html works the same way. We had to have a packaged folder of all of these different assets. We have some JavaScript and CSS for styling and then our backup JPEG in case things don't load properly. And this is it. So you just created in HTML5 folder or HTML5 add in Figma without needing to know any kind of coding whatsoever.