Figma for Digital Marketing and Growth Hacking [2022]

1. 1.1 Course Intro: I'm a print. Welcome to feed more for digital marketing and growth hacking Cross. Today we're starting a journey to the world of effective production and testing of creatives and other marketing graphics. I walk in market unfilled for more than 12 years on, for a very long time, I was dreaming about tool that can automate model creation while still giving good flexibility. And there was no such a tool. Classical graphical editors aware too clumsy. And the tools like Canva been a snack and so on didn't give necessary kind of freedom. All of them where to start with their templates. And one day I bumped into Figma, and the first time I didn't realize all its power, I just thought of it as a new, fast and good web-based graphical editor. And I was happy with that. But sometime later I learned how to use it's more complex functions like auto layout constraints and components. And at that point, I realized this is C. This is the tool that I was hoping to get for years. I have created more than 3000 bonus for ion and a BTS by myself and 2020. And I'm even know the design. So you can do this as well. We will start this course with Figma basics and highlight the most important tools for us. Then we will learn automation tools like components of the layouts and constraints on examples of some random bodies. After we will create whole generic banners and moved to Google ads, Facebook ads on social media formats. We'll learn some tips, tricks and plug-ins, templates that will speed up and automate your work. Finally, we will learn how to use growth hacking world and test your hypothesis and conducted with tests and so on. So this course will give you a solid skills in design for digital marketing. As a bonus to discuss, I give you two ready to use templates for Google ads and Facebook ads. The course is divided into chapters, sections. Each section has its own theme and contains from two to about dozen of lessons. Lessons in the first sections are pretty basic and rather short. Moving forward lessons become loners or the information becomes more complicated and needs more time to describe it on a good level. Some sections have quizzes and assignments so you can test yourself and revise lessons on practice. For most of the sections, I use the single Figma file that is designed the way that you can repeat after me. And you have always some examples in prime of u, free to use it, change it, play around with any of its part because it's not short, but I suggest you to come to the end of it. And my strong advice is do all the practice. In this case, you will get the most value from your learning. One more thing, one more hint from theorem of education and of how human brain walks. If you learn new information and apply it within a week, you'll probably remember this information, turn it into your skill. If you do not do this, you will probably forget most of these in a couple of weeks, months. So the best way to get maximum of the course is if during the lesson you will create your own examples, your own images for your job, for business or for your hobby. And now let's start our cars and move to the first lessons. Good luck and I hope to see you at the end of the course. 2. 2.1 Figma Account: Let's look how to create Figma account. Actually, it's pretty easy. You just go to figma.com and as you see there is a big sign up button over here. I click it and I see some options. I can either use Google account or I can use my email. So it's obviously that if you choose to send out with a Google account, your Figma account will be connected to your Google account with your email that you use in your Google account. The other way is to use e-mail, Okay? I will use this temporary email service and I will create Figma account with these e-mail. Okay, I create, I paste to this email and I said some random password. Okay. Lawn than seven characters. Okay. Okay. My name. What kind of work do I do? I do magazine. I don't want to enjoy the Figma mailing list. But if you are new to Figma, probably you can subscribe to it. Okay. So I have to verify my account. I can go here and see the email from Figma that says verify in male. Okay, click it and where here. I have to grade my first team, for example. Okay, and now Figma, okay, and now Figma shows me these invitation to, invite other collaborators. This is made for you to create a team from scratch. And actually if you invite to many people, you will have to create a paid account. So I'm actually currently we will skip this step. And I will start with a free account. I said start to account. And my Figma asks if I want to use some templates or start a blank file, okay, I will use some template. As you see there. Some of them. I have some blank presets. Any way I will create a file now, so I will just choose this one. And as you see, my file is opened. So actually, right now I have Figma account, I can use it. I have some files over here, so this is pretty simple. I hope you will create it without any problems. 3. 2.2 Web & App: There are two ways to use Figma. You can add the US web interface or you can use Figma up. I prefer Figma up. And let's see how this works right now, are using Figma in my browser. This works fine, but if I have a lot of different tabs over here, this will be overwhelming. And sometimes it even can walk slowly because different tabs can load your computer a lot. So in this case, I prefer using Figma up. Actually I prefer using Figma app for always. This is how it looks. It's pretty similar to that we have here. Everything is on the place. But the main advantage is that it is a separate application at your desktop. And you can always open, just eat, and you will focus on Figma. So let's see where to find the application. You can type figma.com slash downloads. And there are several files over here. There are desktop apps for Mac and for Windows. There are two apps for your mobile phones for iOS and Android. And these are not graphical editors, these are preview apps. So if you work with mobile apps or mobile screens, this app will create great preview of your design right, on your smartphone. So we don't need these apps for creating awareness and for our magazine pop purposes, unless you create mobile screens and font installers, there are a lot of funds inside Figma, and if you want to manage them, you can download these installers for your fonts. But if you use desktop app, it doesn't require this. So all your fonts from figma, we'll be right there. But if you add some additional fonts into your system, this will walk like with any other program at your computer and just have to install other fonts that Figma doesn't have inside. You have to install them into a system manually. So like with any other app for at your desktop. Okay, So after you click Download up, you will get a zip file and you will install it. Okay, so I suggest you do this. It's more handy to use Figma with desktop app. 4. 3.1 Figma Basic Interface: I'm a friend since I recorded this video feed, my changed its interface illegal. So let's look what changed. There are two changes in these menus. Previously, the search was over here and it moved here. So I can search some thin and community move down here. And now I can clique it to get to the community and to look for different things, to look for files and plug-ins. Actually, all of the rest is the same. It just now is more is look smaller, cumbersome than it was before. So you can go back to your account lengthy. So this is community. And if you want to go back, you can either use this arrow or you can use this drop down and go to your account. And that's eat. The rest of the video is correct for now. So let's go and see the lesson. After you register Figma account to have access to, to walk in errors. The first one is actually your graphical editor where you create your graphics. And the second one is File Manager and settings. Let's look how to navigate between them and what's inside. So let's start with graphical editor. Right now we are in browser, and I will go and open one of my IR files, for example, this one. And now while it's opening, I switch to the Figma up at my desktop and go to the file that we will work with. So this is a graphical editor. There are a lot of menus, we will learn all of them. And this is how it looks in browser. So this is pretty similar because actually Figma up is browser itself. So this is very similar and lower. Let's look how to navigate between these two sections. These, there is a difference in an up or and in browser. So when you are working with Figma up, you have direct access to your files and settings via these top. It's always there. And when I click it, I go to the Settings and go to my files can be unity and all this stuff. And if I open some files, they just open in new tabs. So this is pretty easy and I like to use the up more because it's a little more handy. And when I go to the browser, I'm inside the file now. And now I want to go outside it. And to get to mile files or to my settings. For these, I have to click this menu and click back to files. So now I'm there, I'm back to my files and settings and everything. So there is the difference between your up and and in-browser. I think I understand why this is made this way is because when you walk in your Figma up, you walk only with Figma wide when you are in a browser. There could be a lot of other stuff. So I prefer using up because it's, I can focus on Figma there. And I suggest you to do the same. So from now I will go to Figma up and walk there. Okay, We will have a lot of different lessons in these graphical editor. So in this lesson we will cover our File Manager and the sentence. So let's go from the beginning. This is Profile tab, and there are three tabs inside IT. Settings, I have some settings. I can change anything. You can set up my profile picture. So on. I have plugins, these plugins installed in my account. And if I want to develop some plug-ins, they would be here so anyone can develop plug-ins for Figma. And if my plug-in is ready, it wouldn't go to published after I publish it. Okay, and teams, Figma as a collaborative tool. So here we see some files that accessible to other teams. New will need it if you walk with the teams actually, okay, Hair and notifications. If someone from your teams does something, you will see notifications here. And then there is a search. You can search inside Figma. Okay? So I have sound files with fema for marketing content and I can search inside files. Projects are people. This is handy if you have a big account and a lot of collaborators recent. I see the files that I used recently here. So this was the last and the NGO chronological link. Okay. I can change these and I can import a file with this button. Sometimes people applaud Figma files, not with links to Figma resources, but with the Figma file dot. And if you have this file, you can import it right here. And if you want to create a new one, you should click this plus button. You can see some deleted files over here. If you want to create a new team, you should clique these. Create new team button on the slim. And let's go and see what's inside the community tab. You can search for different ready-to-use files that were made by other people and that available for you to use. So here are two types of content. The files and the plugins. Plugins are some tools that allow you to do something extra, something that is not being built with pigment by itself, but these extension can help you to do something else. We will have a separate lesson with plugins, for example, this flag and removes background from your major so you don't have to do it manually and it works fine with many objects, with many majors. And there are a lot of different plugins over here. They are then type four is piles. So actually there are different files over here. And you can navigate to these buttons. For example, I want to bind some icons and I see a lot of different files with I can, so I don't have to create our kinsmen early. I can use these paths, find something that I like. Of course, if you want, you can create your own icons. But if you don't have a very serious project where you have to create everything from scratch. You probably can use these and you can change anything you want inside these files. And the different types of the files and design systems are very complex files, wireframes, very complex files as well. It's for building some interfaces. There are illustrations in different kind of illustrations, people, characters, by grounds, and so on. So Figma is a very powerful because of its community, because of all these files that are available to you. And this is very easy to use them in your projects. So actually this is the whole file manager and sentence interface. I think this is not so difficult. And let's move and see what's inside the graphical editor. And we will start create and Varnas soon. 5. 3.3 Canvas: The canvas is located in the middle of your screen. It is gray rectangle away. You can put all your objects. You can put your texts shapes or whatever you want. So as you see these in gray rectangle, actually you can change its color over here. You can set like this matter and obviously it's a good solution. So we can set any Karla as you want. I think we will stick with gray and Canvas is limitless. You can zoom in, zoom out and it will follow you. If you put a lot of objects over here, it will scale up. So currently we don't have a lot of them, so we will move later and you will see that you can put here whatever you want. 6. 3.4 Menu: Menu contains all the tools and comments on them. So let's look at what's inside. Sometimes it's better to use search to find some tool because not all of the tools and commons allocated in the categories, but some of them are. So let's see what do we have here? We have say, for example, we want to, I don't know. Got something. One do we see count shortcuts? The Trout's something. You see? It? It works. There are a lot of Towson comments on them. So we see a file menu, we can create something, say something added. Some of the tools are available only if you select something that's added. Of course, you have to sign something and then you can use these tools. View object, vector. You can arrange something new, you can use some plugins. We will cover plug-ins later. You'll see there are a lot of them are here, but when you start, your plug-in will be empty because fjord, you'll want to have any of them, but we will learn which of them are useful for our tasks. Notice I went to an agreed shrinks preferences and some others. So actually if you don't know where to find some tool or common, but if you are sure that shouldn't be there in Figma, you can use this search menu. And let's look at one setting that is actually very useful for us because it's very useful when you create balance. It is located in a vacuum. And it says Pixel Preview. We enabled it. Actually you can find it right here as well as you see Pixel Preview 1 x or disabled or to x, we will use one x. What does it mean? Figma is a vector editor and when you undesirable and assemble it, you see all the shapes and forms are very beautiful. But if you set pixel preview, it will be like this. Why is why it's important for us? Because when you save your banners and some of them are pretty small. For example, mobile Google banner, 300 by 50 pixels. If you put a lot of text over there, it will be like these. So let's copy it, these texts and make it. So you see it's not readable, but if you undesirable beaks preview, it's perfect. So as you see, these are very useful for us. And remember that all these settings are applied only to the file that your walk right now. So I have two files over here and they said, and we'll apply on the end to this file. 7. 3.5 Tools: There are some commonly used tools in the tool panel to panel is located over here and let's see, uh, which tools do we have? These switches between two tools are two morphs and move and scale. We will cover a scale tool later because we will use it a lot. Shortly. Scale tool allows you to scale that text. Lag. These and move tool doesn't allow you this and you see it as something else. Then we have frames. You can create some frames over here. We will cover them later as well. And frame is the main building block in Figma. And we'll use them a lot. You can do something with it. And frame contains some other objects you can put frame into other frame on the other we will see later Slice tool. If you want to make a picture of some random error, you can use these and export, you'll see on the option here to export it as an image. Usually people don't use Slice tool that much. Then we see different shapes. You can put different shapes over here, you can't change them. We will color them. If you want to place an image with these option, or you can just drag and drop images into Figma as you usually do. Then there are some tools to draw. There is a pen and pencil. And draw some curves. Change something as you wish. And if you want, you can draw something by hand. It just ordinary pencil. Let's draw something. Yeah, Wow, Beautiful. Now there is a text and we will cover it later as well because there are a lot of options and we will use all of them. Mostly all of them because we want to build beautiful banners. And you can change something. We will call it led to lay term. And here is a hand tool and a common tool. We'll cover them later as well. 8. 3.6 Options: Options area changes its content dependent on not what objects are selected right now. For example, right now, there is not any objects that I selected. So I see these menu. I can do something with the whole file duplicate and may renamed, deleted, or to do whatever. I want. These shows project where my file is located. But when I select something, it will change. For example, I select texts. You see there are some tools available over here. And if I select this image, you see it changed a label. If I select this shape, It's another one. If I select this frame, it changes as well. So you can use this menu or this option panel for quick access to some tools. For example, to create component. 9. 3.7 Layers: This panel is located on the left. When you create a component or a group, it combines objects within itself to x shapes, pictures, whatever you put there. And as you can see the layers over here. This is very useful because Figma allows you to create as many nested layers as you want and you can arrange all your objects as you want. So let's look a little how it works here. There are different layers and as you see, there are different icons of them. I can show what is inside. This is a frame icon. And where is our frame? It's over here. This is ungroup. This icon of a dashed rectangle means group that there are some objects that are grouped and you can move them as a group. You can do something with them as a group. And here we see ungroup is located inside a frame. Here we can see just an image. It's fema longer and it has icon of an image. We have some texts over here, it's team. And what do we see? We have a rectangle, and if we select some shape, it has an icon of the shape. And there are some, actually there are some other icons. Let me show you. For example, at, at this page, we can see this icon. It means that this is a duplicate or a copy of a component. And this icon means that it is a component. If we see these ICANN, we know that there is auto-layout. We will cover it later and we can find horizontal rectangles like this. This means that it is a horizontal auto-layout and this is a vector, very vertical auto layout. So as you see, Figma shows you exactly what's inside the layer. So it's very easy to find if you want to find some sin. And there is one hack. As you see, there is a big file, a lot of some objects over here, and this is pretty confusing to search and to find something here. And there is a very beautiful shortcut that I use all the time. It's Option L or Alt L at windows and it will collapse all the layers. Selected. This one. Let me show you again. For example, I'm here and I use Option L, it collapses it. And if I don't select anything and press it, it collapses everything. So it is very useful when you have a lot of objects over here. And if you rearrange some objects here, they will be arranged here as well. For example, let's put this group. Okay, let's create some new objects. And this one, this one. Let's make it, let's make it another color as well. So as you see, they are over here. And if I put it like this, the star is above the ellipse. But if I rearrange them here, they will be arranged here. So you can use it when you have some crossing items. 10. 3.8 Design Panel: This is the place where you see set and change all the properties of your objects. This menu is located on the right. Some of the options appear almost every time. Object alignment coordinates, effects stroked, and some others. And some of them depend on your selection. If you select different kinds of objects, texts, frame shapes, you will see different options over here. For example, I selected text and as you see there are some texts options, font-family, alignment, column, and some others. All these options are pretty straightforward, but some of them are predatory. Kim, they usually are in the frames, the auto-layout, and that's more for him. Yeah. Okay. And constraints. We will cover this later on, but these two options will allow us to create a lot of manners and to make it easily. And as you see, there are two more panels over here. We see the design panel and our prototype and inspect panels. Actually we don't need them, so we won't cover them at all because both these panels are needed. If you want to create a website and mobile app, and you want to convert your design into code. But two, we will create bonus or we don't need this, so we will just use the design panel. 11. 3.9 Comments and Notifications: As long as Figma is a collaborative tool, you can leave commands, food, tomato for yourself. And in place of your canvas or of your art board. And what is another name of Carl Woese lids up. It's like this. If you see this word, this means your canvas. So how to make a comment? You can use these tools and make a command for someone on just a comment. Just went. And everyone who has access to this file, we'll see this command. And if I want to mention someone particularly, I will use at as you use in all modern tools. And you can leave comments for your teammates or for yourself. But taken on that, if you live common for yourself, everybody in the file will see it as well. For example, I will leave a comment for myself, Niki, Dave se li, li's make some jokes to make these horse not so boring. 12. 3.10 Pages: You can use pages to organize a walk. The page is a separate artboards in your file. You can use them to separate some objects or buy some property. A topic, for example, you can create one page for Google banners and other page for Facebook wireless. If you create so many balanced that Figma becomes walking slowly. You can divide your artboard into separate pages and it will be faster. And as you can see in this file, in our working file, there are a lot of pages. We use Page four, separate chapter of our course. So here they are. If you click here, you see that they are switching. And if you want to create a new page, you should click this Plus and new page will arrive. You want to delete it, just right-click, duplicate it, and delete it. If you want to rename. You can do this here or just by double-clicking on its name. So as you can see, this is very useful and very handy to organize your walk into pages because for example, you want to hold some of your files on a separate pages, for example, like library here. There are just some files that I use in this course and I want them to be somewhere. So I just created a patient Library and here we are. I hope you will enjoy using pages in your projects. 13. 4.1 Figma Basics Intro: Hi my friends. In this section we will see how to use basic tools and Figma, these lessons will be longer than previous, but they are still rather basic. And if you know how to use Figma already, probably you can skip them. But if you want, you can watch them. Maybe you will learn something new. So what we will see here, we will see how to use texts layers, which options are available. We will see how to use Carlos strong shadows, opacity, all this stuff for your text, for images, for your frames. We will see what is a frame in Figma, this is a very important component. This is a building block for everything. We will see how to shapes in Figma which of them are available here? How to combine them, how to nine them, how to exclude one from another and so on. We will practice a little here and we will see how constraints works. And Figma, there's allows you to create automatical alignment of your texts at your balance. So we will move on and see everything in each separate lesson later. Let's go and learn how to use all these basic things in Figma. 14. 4.2 Text Layer: From this point we will use our walk file where you have examples and you can repeat up to me and learn how to do things. So let's move there and the first hour lesson will be about text. Here is our page fema basics, and over here is our walk in area. We will walk in these striped errors where you can find some examples. And we will walk here in darker areas. In these case, all the examples we'll be proud of us. And now let's play around with this text and see what can we have our copy? Some of them here should be okay. I will copy one of the text and see what can I do with it. As you see, it has 36 size, so I will make a copy command C, Command V or Control C, Control V at Windows. And let's see what settings do I have? I selected the text and I see that it's font, Roboto, bold. It has some of this says sediments, we will cover them and there are a lot of other settings over here. So let's change the size to be being. Now. Copy it and change its weight. Let's make it light or even thin. Okay? Alright, I'll copy these tanks and make it thromboemboli, light or regular. And I will set the spacing to, let's say 15 here probably it's something like here. All right, Can do make this text. The years. As you see, this looks more stylish. Some projects for some labels, red lines. I can change the font. Have no idea what the font is over here. Probably. It's says y-bar. Let's find it. As you see, there are a lot of fonts. Now we're here and there is. A moment with the fonts. If you walk online with your browser, you don't have to install fonts at your laptop or your desktop. But if you use Figma application, it will have some bonds inside. But if you use some fonts that are missing, you have to install them into system. And after these Figma will pick them up and you can use them. Where it can happen. For example, you the load some project file. And Figma says that you have missing fonts and Pigma will try to replace it to some another font. And you can choose to what font to change it, to replace it. But if you want to have the original font, you just have to download it. So actually it is the same in all other programs that you use fonts. You have to install the fonts at your laptop to use them. At the beginning, you can use browser version, but I suggest you to use that up. It's more handy and it will be less resourceful for your computer. Because when you open a browser, usually there are a lot of tabs over there. And when you use just a separate separate program for Figma, and it will process only your Figma files. So let's find our way. Bond. Very well. Yeah, So we're here. Now. Let's see some of the settings. Out of the weeds, out to height and fixed size. Fixed. Yeah. If you want to make texts like this, there are several ways to do this. For example, you can press enter server and several times, and here we are. That's copy and paste it. We can change, change to this end even doesn't allow me to know something. Let's see, we had our original text and we use these fixed width and we want to change it. So you see the text follows. This is pretty useful. And if you use a fixed size, is in this case, if you want to type some extra text. Now you see I typed it, but it goes below. And these blue rectangle shows actual or the border of the text layer. And now you can think that it's not important that tags goes below. But if you use some other tools, if you combine these texts with another objects, if you align them, this will, this will make a mess. So that's why I usually use fixed width or fixed height depending on what behavior I want this text to perform. Let's move on and see some of them. Sediments. Okay, let's see what do we have here? We have this sentence. It says line height to 100 and have this setting that is called paragraphs space. And what's the difference? The difference is the client height is actually a height of the line of your text with the space. And the spacing between lines is this thin. Let's set the line height to 200, One, 100. And let's say space in-between lines to send these vectors 0. And they, initially it was non-zero towards outdoor. And as you see, it's being a because we added more space over here. And this is just an example of our texts without the sentence. And here are three other texts. As you see, they have fixed size and different alignment. And bottom, middle, and top. Actually, there are a lot more other settings over here. You can make your texts striked on the line or something. You can play around with all the things. We won't cover them right now because there are a lot of them and we don't use them that much. And that's it with the most simple text settings. 15. 4.3 Fill, Color, Stroke, Shadow, Opacity: Now let's look at such options as color, feel, shadow, and others. At this point, we will apply them to text, but later we will see how to use them with different objects. So here we are. We have our text and let's see what can we do with this? It's surely, maybe let's make it laying these would be handy for us to use these one. And as you understand, we changed this from the previous Karla to these over here. Now we can set any column for want. Of course, let's stick with this one. Okay, Then how much chalk option? It makes these border. And we can make it make it like these. And her are some settings, for example, or by a city becomes transparent. And the set, and let's double-click here. These makes your border outside. These inside actually it turned everything to molec. Let's make it five. And difference outside. So here is the font itself and the black one is an inborn. But if we place it inside, all the width of the lead term becomes with the water inside it. So if he say seven, slang these set like these. Okay, Let's hear. And center is actually their centers. So if we said four pixels, modern four pixels stroke two of them go inside and all of them go outside. Obviously, what do we have here as well? Make the corners around with the settings. We can make dished. It walks like this. Let's put 20 and 20. So it's this base in and actual dashes. See in length these, you can play around with these settings. And actually these are the main sentence. Almost draw with that we might want to use. Of course, so we can change color of the stroke. Obviously. Then let's make a shadow. There. Some effects over here. And if you click the Plus button, the first and the main effect will appear, It's Drop Shadow, our children, there are four of different effects over here. Inner shadow. Let's look at a and make it more visible. Well probably it's making being able to hear here we are. Now it's more noticeable. If we want to make it more blurry, we can do these. Like these. We can use several effects and at the same time, and at the same time we can drop shadow. These saw the shadow couldn't be different. Our inner shadow is add some volume to your collaborators. And when you said to drop shadow and understand that it's enrolls above something. So it's the shadow sentence. Have seen that we can make it very. And you see that there are several shape shadows over here. And let's repeat how to make this shadow and make it. Paul. Don't know. And and and no more. 16. And Something knowing these here like this. Some of these edges, our texts is lay in higher. Some other forms, of course, you can just type font and its main text like this. By default. All the feeling is solid like this. But if you own, you can create a gradient even. We see, for example, radial one interval would be from here to there. And as you see, it goes from black to transparent. And we want this thing to be blue and not transparent. And the first indicator will be red. Thin. Similar to this. So you see in this gradient text. And if we want, we can fill it with an image. Here. We should click here and select image. By default, it pays these chairs made and we can upload our own. Let's make these image. Okay, and here are some sentence of this. Now, it fills the image with the scale option isn't available, it's a 100 percent. We can use these tile. You see the preview here. It's like mosaic. I can change the scale, for example, to these. And in this case, that decks will be like this. Or we can make it. These are the deck so mirror-like. And the screen. Let's bring him back. We can use the crop method to adjust the colors exactly as we want. Feet. You see, it doesn't look good here. I almost don't use this option. Okay, so finally we have something similar to the example. And you see the two, we can apply different effects to text. And actually you can do this with different objects as well. For example, as you see there is some shape over here would counter at stroke to eat. Again, drop shadow, and so on. 16. 4.4 Frames: You can think of a frame as a container. It can cause different other objects inside and has its own properties and appearance. So let's move here and see what we can do. And with the frames. To create frame, we can use this tool frame on just press F button. And if we click somewhere in the frame, appears, if we want to fill it. To be not transparent and just add this plus button. And by default, it fills with white collar. And by default the size of the frame is 100 by 100. So we can fill it with some other colors. I can find them here. All we come pick some colors that were previously used. I will pick this yellow. Or if you want to see the color that was used before, you can find it here and just to apply it, try to apply it here. We can put something inside the frame. For example, I selected this frame and now I will choose Text tool. I press team. And then I click inside the frame. And I will type T, tn, tn. I can place it right here. If I want, I will change the size, make it bigger like this. And as you see and the latest burn, all that text layer is inside the frame. For example, if you want to move just letter T, you have to select it over here. Or another way is to double-click it and it will go through the frame. Selection will go here. You'll see it's selected the text. And if I want to move it, I can move it with the keyboard. You'll see what's going on. I've lost it. It is because our frame has this checkbox clip content. If I uncheck this, I see what's outside the frame. If I check this, I see only what's inside. Usually, we use this set and turned on. I will paste place it back. Okay. Sounds And I typed before smear frame. Okay? This I can make bonder uses stroke to five. And if I want, I can make it transparent. I can hide this feeling or just remove it. Was better hide because if you want to unhide it later, you can do it without the same operations again. Probably you have noticed that I selected, for example, this frame. Then I pressed command C to copy it, and then press Command V to paste it. And as you see, the new layer has appeared here. And at the canvas, I see it exactly those and that place where I copied it from. So when you walk in Figma, you have to understand how this works because sometimes you want to find the object that you paste it and you can't do it. And for example, I'll copy this one and then I move to some other place like here and paste it. And in these case, as you see, it pasted it here in the middle. Because Figma understand that. Yeah, I moved from that part and pasted it somewhere where I can see it. Okay. What do we have here? We have some frame with some texts. Okay, let's create another frame. Let's make it being a thousand or I don't know, 600 to 600. And we will feel it. Now we will add some text inside. There are several ways to do this. I can either click here and paste some text and make and being. Okay. And another way is to paste it here and just drag it into the frame. And as you see on the left, the layers panel, there are some changes. I drag it over here and goes outside the frame 55. If I drag it here, it goes inside the frame 55. If I drag it here, it goes inside the frame six to one. Okay, so now we have two texts inside the frame, and I can see them here. You can put a frame into frame. Let's duplicate this one. And let's example, place this frame inside it. As you see in the layers panel, there is a frame inside a frame inside a frame because our all these big object is a frame itself. Okay. You can play around I just and this objects for you to understand how can drag it. But I think you're already, you're probably already understand it. So we can select this image and just drag it into the frame. So actually these are the bakes basics of the frame. We will use them much more in the future. We will use different settings with them. And as I said, frame is one of the most important, the crucial building blocks in Figma. Using frames, we can build anything that we want and we will definitely use them a lot to create grade biomass. 17. 4.5 Shapes: There are several shapes available in fema and we will cover all of them. So let's go and see which of them do have hair. As you see, the first one is rectangle. So I will scale or lying these and try to quote beam. There's thin or even I will create them from scratch. Okay, it's a rectangle, or if I create, it becomes a 100 by 100. But I want to make it bigger. Let's say if I said these, 250 in roles like these, but if I press this button, this means to lock ratio of the sides if I put here, so you see in those promotional Okay. I will turn it off and set it to release these yellows. Similar. I can use the fill in. What can they do to use the same color? I can selling these rectangle and copy the color. Or I can use these to raise the color from, to be the color from somewhere else. So if you want, actually, if you'll notice there is such as zoom over here when you use a color picker. So it allows you to be in the column. Well, it very precisely to use. So it shows you the whole document pixel by pixel. Okay? And the other way to use these colors that I used before, okay, I'll send these here. And now I'd like to create a rectangle. I copy this one. I like to create as career and change its size. What tells do I have? I can make it around. Okay. If I want, I can create some of the corners around. And to do this, I have to click here and you see you there for the pixels at each one of them. But if I want, for example, I want to put this rectangle to this side and I want to left corners to be a square and to be, and to write corners to me around. So this way I have to find which of these settings belong to each corner. There is a hint over here. This is the first corner, its top-left, and it goes with the around the clock. So if I want to change these to 0, and if I want to change your bottom left corner, I have to set these ones. Okay. So as I said, Okay, I'm going to attach it to the side or something like this, okay, alerts sent them back to 0. And all other options are pretty similar that we touched before. The next lens. Different lines. And I can select the Line tool and draw the line. What do we have from our set is I can set incline of the line. I'll set it to 0 to be horizontal. I will set to 90 dot will be a vertical line. Bring them back. With, you see we don't have the height because it is a line. It doesn't have HIV. It has a stroke. If I want to make it shorter, I will put 500. And if I want to make it thicker, I have to use the setting. Lead said it declared him and even until 30 to see everything. And let's see, we have a line 530. What else do we have? If I want, I can make some of the corners of the line, can be around actually not foreigners, but sides of the line. To do this, I have to double-click on the line to go into the dot editor mode. I can edit each Dada. Each point, for example, IS selling these one. And then I have to go here and make it around. So as you see there around to different sides of the line, for one to send one of them. I don't pick any side, any dot and just said squares at round. Sure that I can set arrows who will look at them a little later. And that's it. There are some Enough said Teens over here, dashes, Let's said Dan and 10. It's too will save P-V-T. Tim here. Actually, if we said it's true to one pixel, length of each dash will be equal to the length of each space. But because of the stroke, we see such. Small spaces and being dashes. So let's set it to one pixel. And as you see, now, they are the same. But when I ran this thicker, it goes like this because as you see actually the end of the line, the end of the line said in 0s here at this point. But when I add this drug, it goes further. And the same with each space. Let's way as Bayes become spaces become smaller and the dishes and become a wider along that. So if I have such a line of 30 pixels and if I want to make them equal, I have to set something like this. Actually, you can calculate exactly which parameters to sit here, but visually the, almost the same. Okay. What does do have with little lines? Let's copy paste it. Let's remove the dishes. Okay. We can set its color. Again. It doesn't say d is unsaid here in the field option. You'll see Latin happens because the line and doesn't have the feeling option. It has a stroke and I can change its color over here or make it orange. Okay, so I think we covered all the sentence I want b to each of them. It's obvious that if I want to make it to sound too thin, similar to these 1, 2 said it wrong on the loop tool. So filling these two set and make me okay. Yes. Over here and make it thicker. Main lead to I don't know if you've read a similar. Now, arrows. As you seen, arrows are, bread is similar to lands actually, it does the same object in Figma matter. For convenience, they will dig into the separate point. Then the separate tool. If we want to create an arrow, we can use these one or we can. Turn each or any align into aero. Let's do from the menu, Let's zoom down. Send these to 0. Now send these to see him. Okay. To be afraid to use, if I select some point and use this tool, I change this in-game. Yeah, Plato obvious. One, there is one downside with arrows in Figma, as for me, centered again two-line arrow. And if I want these arrow wins, sides to be bigger. I have to send this joke thicker. This case in most being about if I want to leave this job the same. And to make these being I can't do this in the figure. In this case. I have to draw it manually. Select line and to draw it. Okay, any rank these for example. But these can be that easy. And I don't like this method because it's metal and it's only in the UK. So accurate tool. These are called cold beer, these line and to make it like these. Yes. So as you see, I can do this. Actually, I changed the angle of the arrow. It's roller 45 degrees. I set it to 30. And now I can combine all these lines into one object, can use these Boolean operation union. So I unite the selection and now I can get my arrow. Okay? Alright, let's make them orange. If you want to set the color of different objects, you can select all of them as I did right now. And there is a menu selection colors. And I'm going to show about, yes, I've said feeling of some of these objects to read. Why I seed and I don't see that the canvas. But if I want to turn all black homage jokes into orange, sure. Obviously have to selling these color and change it to our orange one. Yes. And now they're the same. I think we are done with arrows. And let's move those circles. We have circles and ovals, or a here and an end and do it from this great selling this tool and send these two, let's say 300. The other way to do is these is to use a scale tool. Use scale tool. I resize it proportionally. If I use my move tool, it will go Lang these. But I think I'm happy with the size. Okay? So a role S2, curl along and award options do, or what options do I have here? Let's copy it and paste. And as you see, these wind over here, and I can differ on good Pull it. And that's happening. See them options after these dot and made this segment tool new points a bit over here. This one is for a date of dripped. And this one is the same that we didn't before. And this one allows you to do like this. So we have three different objects made from a circle. And let's do the same with the OLS. So I will copy paste these one. Okay. I'll make it or roll. Okay. And for these, I have to You see, I've pulled this into the center M nothing changed. But if I pull it against the clock, rural up. And if I want to Yes. And how to make this circle that's on this limb, do this. Who? This point over here? Yes. And we have this circle with a hole inside of it. Let's move to polygons. This is another tool that we have here. And another shape. When we create a polygon, it makes a triangle. And there are several options. Let's set it to orange. My default, it makes shape of equal with equal sides. There are several options of these as well. Sets the quantity of angles, and let's set it to m, These 1 and makes the corners around these. And as you see, I can do these with these points. I rotate this and, and, and get more and loss k. Let's distinguish this one. And if I know these, I can get some, another shape, K. And if you want to get some random shape from these, you can double-click it and pull these arms. Moment. Okay? Yes. You can do like these or you can add some origins are here we are. Actually you can do even laying the is to create such shapes. I can say that I use Polygon tool that match. What if you want to create some complex objects? Objects probably you will use these two. And the last shape that we have is as tar. Okay, let's create some Doris and can kill him down and make it smaller. And this is the quantity of angles. Let's make it like these. These, these men only 20 percent is 80 percent. So you can create any shape that you'd like. Okay, and of course you can do these here. These will change one to two of your beams, and these will make it round. So when these tool you can easily create, for example, a star eight and for your balance. So for these lead score via Let's make it the law. Yes, more sharp. And just duplicate these coupled dimes. Five-stars. And if you want to make them, stay in the line, you can select all these shapes. As you see, there are not two of them, but there are five stars over here. And you can use these tool, arrange and disturb, root and distribute horizontal space. In this case, they will know these and I can send this base in, change it. After you apply this tool. Horizontal space in Horizontal Distribute, distributional space. And you can always change for this or even is, and let's make them yellow. So it's five-star rating now. Okay, that's it. Read this torus. And now let's see how to combine different shapes using Boolean operations on Boolean groups to create different shapes of complicated structure. So for these, Let's create a rectangle and circle. Okay? And try to make something from them. So as you see you there around different shapes. Here was the difference. The first one is just two shapes, one and another. Let's copy-paste it. And another way to organize them is to group them. I can right click it. And a group of the selection, as you've seen, there is in group over here. And these objects are organized into group. The other way is to frame this selection, to make a frame of two these objects. I can right-click it and frame selection. This case, your brain. The difference between grew and frames is that frame has more settings and you can use different options like auto-layout or some others with the frames. And group is just Union, even not a union is just a group of dog objects. And let's move to union. These. And let's, you know, it to this thing's actual over D did before when we created that arrow. Now, let's do it again. I united this circle and a rectangle and as you see, there is an icon that represents its new shape. And from this point of these is a single object. All of these things contain two separate objects and I can select the circle and make it look. I can do this with all these three and we're answering, but after I enlighten them, I can do with these. White In doesn't walk and just run out of the TO unite in that if you lied at some objects, use the failing to change the color of them. Okay? And let C reach methods. Methods. Do we have to unite on to cut one from another? We have to pay intention at which of these shapes is above and which is on the dock work, which is on the bottom. When we use all these allowed the tools, for example, if I subtract from this selection, you see that ellipse is on the top. When they click it, the top element is subtracted from the bottom one. And I get this theme. It's copy paste it again. And in this case, I will change their order and do it again. And I have these one. Okay. Now, let's use these ocean. And if I want to exclude one from another, conversely, I selling them and use this tool. And I have a hole over here. As you see, there are a lot of Boolean operations that you can use with your shapes and combining all these tools and always shapes you can create, shape, whatever you want. 18. 4.6 Frames vs. Shapes: When you have to create a rectangle, you always have a choice between creating a shape or Creighton frame. As for me, I see only two options to choose. A shape, not a frame. The first one is when you know that you will use Boolean operations with your rectangle, you will extract something from wheat and so on. The second one is when you are sure that this rectangle will remain just a rectangle without any content inside of it. So if you wanted to create, for example, a bottle, but n is usually some rectangle with some text inside. So in this case, I suggest you to use a frame because you will have much more options. Using frame that are not available to the shapes. There are some of them, but the most important is probably auto-layout. And this options allows us to create all those complicated bonus and minutes. And this is one of their main building point of the whole Figma process that we use to create balance band as fast. We'll cover it later, of course. But for now, I suggest you to use frames instead of shapes if you want to create rectangles that have Sam contained inside of it. And let's see how this works in practice. So let's create something, something, some rectangles and some shapes. First tool and the rectangle. And I'll make it like these. And the second one will be frame. Approximately the same. And now I want to create a button, for example, or what is baton is a rectangle with a text on it. For example, adding this on to put it into the middle, and I will paste it here. What's the difference? The difference is that I can use several options for the frame. And one of the most important is auto layout. We will cover it later, but let's see how it works right now. So let's make a group of these two objects to use them more. Handy, m and k. And this will be from shape, and this will be a term from Ferrari. And let's send them the same color. For example. Fill it with orange or yellow, and do the same with these one. Okay, so we have two similar buttons. What the difference? The difference appears when we want to change something. For example, we want to change this text. Click here now. You see, okay, let's set these to atone with leak here now. Okay? And if we want this Martin to look good, we have to adjusted man only to do something like these. And then to know something like these. And then we'll have to find the center. And it looks like this. But when we use the frame and we use auto layout, we can just type it. And as you see in rows there, it adjusts to our text. And we don't have to do all these manipulations. Manoa, we will use this tool a lot, but just for now, I will leave you with this information. 19. 4.7 Constraints: Constraints is a set in Piedmont that allows you to control how objects that are inside the frame interrelate and the move and align with the frame borders. Let's look in practice and go to the page constraints. And here we see them. Constraints walk only for objects that are inside of the frame. For example, here is a frame. And Harris some objects in, object inside and when I select this frame that is not located and some others, and some other frame, I don't see the setup over here, but when I select something inside it, I see Constraints menu. So let's look how it works. For example, we have this image inside the frame and we have constraints left-hand top. What does it mean? It means that this image will stick to the left and top sides of the frame. If you resize the frame itself, let's look how it works. And do Lang these and image is on the same place. But if I resize to this side, image follows the borders because this is the top and the left sides. Here is the opposite. Bottom right? If I change this side here, it follows. If a here, it doesn't follow. And let's see the center. It's says center, center. This means that the object, the picture will be in the center, not looking at where the center is. So it is just in the center of the frame. And we can combine the sentence. For example, this image has a right and scientists settings. This means, and you can see these dashed blue line that shows various constraints set. So if I move this mortar, it doesn't follow. If I move this, it follows. If we do something with the vertical size, it's in the center because we have vertical centered constraint. So if I do like these, it is always in the center vertically, but it doesn't follow these side horizontally. But if I am pulled these corner, I see that this image follows me. Okay? And we have another option. It says left and right, top and bottom. If you click here, you will select left or right. If you want to set left and right, you have to press Command or Shift and click this icon and you get your left and right constraints. What does it mean? It means that if we resize the frame, the object 2 will remain the same distance between its border and the frames border. Obviously this means that the object itself will be resized, criticized if you resize their frame. So as you can see, we have the same pattern around this image. But the image itself is being resized. So these constraints set and we will use them a lot with auto-layout. When we create some complicated texts, bubbles or just place some objects at our banners. We will look at this sum and now that's it. For our constraint settings. 20. 4.8 Ways to Export Files : Let's see how download the file that we create in Figma. Figma names it export and we will go to our Google banners page and use it as an example. So when you want to export something to download your files, you have to select it and press this Export button. If you select one object, it will export. Just eat. If you sell like two of them, it will export two layers. So what options do we have? You can choose a format, we can add a suffix. For example, I created one separate version of these banners, and this is my version number 4. So in this case, I can add this suffix, for example, V4. And when I export the files, each of them will have a suffix v4. Let's save them. So we go to find and see these files with V4 suffix. And we can change a scale. What we will download. And we can use this fixed sizes, but usually I just use one x and that's it. So this is the main export options in Figma. And the alternatives are using plugins. We will cover them later. There are two plugins that allow you to compress your images. These are tiny image compression. We'll run it and it will compress our images to something smaller. And there is a plugin add compressor that is designed specifically for Google banners. Let's find it. It's at compressor. And it will show which of these banners bigger than 150 kilobytes. And it will try to compress them to fit these limit. Okay, it will load some time. And as I've said, we'll have a separate lesson about plugins where we can see how to use it. And there is also option to set output perfects have some images that are being greater than 150 kilobytes and we can compress them. This is a counter, and this shows how many of majors we can compress per month for free. So I have just compressed to files. And if I press Compress button, this counter will go up. Okay, I want to use it. It will compress the images that are bigger than 150 kilobytes. So as you see, it doesn't touch these formats. It touched only told them that way bigger. We can download our images. It creates an archive and I can download it. It's named Google ads by default. And see in this curve. And we see all our images here, and all of them are under 150 kilobytes. So if you don't exceed the limit of 500 bonus per month, you can use it for free. And there is one thing that you have to know. It won't compress all the files if they are too big. So if the source file is more than, I don't know, one megabyte, two megabytes. It won't compress it to this level. Usually, I don't face it within Google banners, but there are some advertising systems. I'm on advertising platforms where we have file size limits as well. And they allow to applaud, match big images than these. For this plugin can not do its work for the bigger images that way, 1020 times more than 150 kilobytes. But for we will balance, it usually works just fine. We have seen three different ways to export our files to plugins. And actually there's a lot more such plug-ins over there. And there is a standard way to download our majors right from fema. 21. 5.1 Autolayout in Figma: This is one of the main tools that we will use in Figma, building our balance. This is why pigment is very good for marketing, for creating a lot of balance dead who will feed different sizes, as you can imagine from its name, this function automates composing elements or objects automatically. This sets automatical layout, auto-layout, in other words, until allows keeps the space in between different objects inside the frame. In a case, when the objects themselves change their size or position, or the frame changes its size and position. This is used commonly when you have a lot of different banner sizes and you want to set, for example, text in one place and to be replaced everywhere without a break in. The banners, both outbreak in texts layers. And if you want everything to look good there. And this is the case when it's better to see. So let's move to the page Figma auto layout. Here it is. And we have some things over here. We have some components. Our basic components that we want to use for these, let's say banners. We have some logger, we have some image, and we will face texts. Well lives for 900 bucks book. Now, RK. For example, we want to create a banner of some size. This one is 600 by 600. So what do we do? We create some frame. We said it 600 to 600 will be white. As you can see, it's not exactly white because of these stripes. This is layout grid that we use to align our examples and walk in areas. And this means that when you see a little dark gray, all the objects will be darker as well. That's why this frame is not completely white. But if you move it, for example, here in the gums white. So I think you understand this. Okay, So how do make Amarna we can. Select our objects, company pays them and move them here. I'll copy, paste the text and paste it here. And if I want this button to look, but I have to organize everything by my hands. For example, line these and language these. Okay, I can do this, but if I want to resize something or a thin will want long after this. Okay? And the other way to do this is to use auto layout. Okay? I will copy paste of this frame right here, and I just need to click this icon to add auto-layout. My contain changed its size are called an LEA to a space that all these objects ache. And as you see, this frame changes its size accordingly to the space that all these objects take. What, what is it, how to use it? For example, we don't know the exact size of banner that we wanted to create. We just, I'm creating some random stuff. So let's look at the set of auto-layout. We can align objects inside auto-layout differently and we can set different padding options. For example, I use 1909, As you see, all the sides have the same pattern. I want to Luke. It's 100 and we said 90, let's say 100 and probably will have something similar to this. Now, can align this to the left. And as I see, actually as I see, these objects have a small pattern from top and bottom and bigger space between them. So I will make top and bottom padding these. And there is a setting over here that controls space in between objects. I will set it to, let's say four there. Yeah, Now it looks almost the same, but actually I have this picture finger and that's why it's little different. Now let's see what I can do. We have with auto-layout, actually, there are two icons of this frame. And for vertical and horizontal auto-layout, if we set vertical auto-layout, the icon is like this. One rectangle on the top of another. And if we use horizontal auto layout will look at it later like this. We have 22 squares, two rectangles, one close to each other. And here we have horizontal auto-layout and its icon is like this. So objects are distributed horizontally. Okay? And here are some examples that show this to you. Now, let's say that we want to make this picture bigger. As you see here, a picture just becomes bigger and nothing changes. It goes beyond the banner. But if we use auto-layout and then we decide to resize this picture. As you see these moves with us. Okay? Now, let's say we want to make fixed with these Varna. Let's make it like this. So I duplicate and, and we'll see some other options. All right, now it's 631 pixels wide and I want it to be 600. Yes. So in this case, I have to look at these options of the frame, these 100 contents or fixed, and these alignments, I will use fixed width. And as you see, these options changed. It was gray like this because the height is still automatically, is still set automatically and this is Meno. So now I can change it. I set it to 600. And now I see that my objects are closer to the right and I want them to be in the center. So I will set it up. Actually, I can't change its position because of the pardon. And if I said here, if I said this part in to maybe 80 integral, be closer to the center. So when I resized the size or the width of this frame, it left less space for the padding. And that's why I had all these objects move, they moved closer to the right side. In this case, you have to calculate which padding you can make. All there is another option, you can set it to 0, to 0. And as long as you have fixed width of the frame. Now you can do like this and all the objects became centered. But as you see, it's still different from this image where the icon and all other objects are aligned to the left. So I want to do it again. And actually I have to set some padding to make them be in the center, probably something like this. But if I change the size, you see that my frame doesn't go with me because I set a fixed width of this frame. Okay. Let's make the height fixed as well. Because usually we have some standard banner sizes. For example, we want to create a square, 1600 by 600. This case, I use these fixed setting and I set it to 600 as well. So it's, it worked but it doesn't look good. To me. I want to make space between objects, smaller. Lines, do it. I just set this one to 20. Okay, now it looks better. I want to do all these operations manually. You just understand that it's not very handy. I centered centered everything manually here. And as you understand, we already did this. If I want to center on my objects using auto-layout, I just need to press this and to center all the objects and y and they in the center, It's because of these padding. If we set it to 0, everything becomes fine. Okay? Let's see how this works with text. So we had these beautiful banner and we decided to add some text to it. And we added a what today. As you understand, if we do these using our auto-layout, everything will be okay. I will copy this one when we fixed width. We'll copy this one where we have set in HARQ contents. So we will better understand how this works. Okay, I have to add in the text. Let's say I just want to be on one line. As you understand everything scales with my text, okay, here we have fixed width, we already have seen this. And here is horizontal auto-layout example one to make a horizontal banner as well. And in this case we can use horizontal layout. Let's copy paste this frame here and install instead of this vertical auto-layout, we will apply horizontal. And here we see or goes with our banner. This text has outer width option, so we can use Enter to create new lines and that our environment becomes more beautiful. And as we see, this image has to be equal. Well, I make it smaller. And in this case, we will center on the objects vertically in the auto-layout. Comparing to this one, probably we have to pardon him towards something like this. And as you understand, I can manipulate with all these things. I can make fixed height, fixed width. So you can play around with these settings. Everything goes with it. Yes, it works. So in general, how do we use these auto-layout? You understand that all these frames are being resized. After you do something with your objects, you resize your image, your add some text, and so on. And how to use it while we have fixed banner sizes. Actually, we use these settings, not for the banner itself, because of course we have our fixed size for our burners. But when we create a banana, there is some text over there, like here. And we want to, we may want to change it. And in this case, if we use auto-layout inside this text and we use some background color, some fill in. We will scale all the texts beautiful and we will see it a little later. 22. 5.2 Nested Autolayouts: And now let's look at nested outer layouts. We used it for one frame, but actually we can combine and use auto layouts between or among different frames. So we can create more complicated structures. For example, we want to create a bundle like this, where we have these, let's say logo. We have some picture and we have the text. So we have outer layout, inside auto-layout. So this is auto layout of the text and this icon, then this frame, actually this is auto-layout. We can bring this longer Luke, like this. So it's better seen now. And all these three objects, the logger, this picture and these texts, they I used as parts of one big frame and it has its own auto-layout. Okay, let's do it by our hands. We have our icon, we have the text. Let's copy paste them, will delete this plus sign and we will make a logo from these objects. And when I pressed, press Common Z, as you see, I selected two objects and they are not in the same frame. But it's still can. Click this button. And the new frame appeared that contains two these objects. And I can create, I can set some options. For example, I want to be like these. And that's good for me and I want it to be orange or maybe yellow. I want to select the color of this column. Okay? So here we have this logo. And then we have, for example, let's copy this frame and replace a longer on. And just move over here. And it And goes inside the binary. And now the option, another thing that you have to know about auto layout. You can move the themes, the objects inside the frame. And they will be, they will switch their positions. For example, I select this text and I press up arrow. You see they changed their position because of the outer layout implemented to this frame. This works like this. And if I remove log, everything becomes looking like we wanted. And actually we had some more text over here. I'll just copy this text and paste it. Instead of that one. I just select the frame and paste the text so you see what goes on, what's going on. And I delete this one. And now it looks more similar to this burner. So you can use nested auto-layout, outer layout inside, outer layout inside auto-layout. Okay, we create violence of some, another color. So let's create something similar to all these bundles that we have here. I will copy paste this one and I will make its feeling be inlined these. Okay, I will add some border. This is stroke. And when you create bonuses, important to understand that the stroke can be kinda go beyond the banner. And in this case, make sure that you use inside option. In this case, if you said some border, it won't change the size of your whole banner when you export. It was too much. Probably it was three or four hours. Okay. I think we have Much much being gabapentin over here so we can set up, looks more similar. Now let's set another space in between the objects. Now we want our login to look like this. So as you see, the text is more centered over here. How to do it? For example, we can. Set spacing between the icon and the text will make it smaller to 30-year. And we can and write paid into 13 like this. And as I see, these, Varna is centered, so we set it almost like this. Actually, there is difference in sizes. It's because the image is of a different size. I can set it here. And these two, these banners are almost the same differences in colors. And let's add something to our logo text. For example. Type today. And as you see, everything goes with it. And now we want these today to be under the text, under the logger. So how to do this? We will take the logger text on this for 900. Okay? And we will take today text is just smaller font. Okay? And we want to combine them so I will align today to the right. Then I select both these layers and I click outer layout. So you see today goes to the left. It's standard, but I want it to be on the right. For example, I set it like these. Okay, and now I want to create a logo from it. And from there I can have this icon. I select both these objects and click Auto Layout. Again. After this, we have a new frame and we can fill into it. Let's use the same colors that at an example. And as we see, it's still not so beautiful. And the beginner, we change the. Position of our longer arcane goes here. And probably we want space in turn via NADH. So being set it to 30 or send these to you. And as you see, this icon is too small to fill the whole height, and we will just scale it. For example, in the beginning, we want to align it center vertically. But to understand that this logo is too small for us so we can just adjust it and make it being a when we make in Winger the whole logos like this. And I think we can use less space in between devs and today so we can set it. These are even to this, okay? Now it's better. And now let's add these logger to our Varna, copy-paste. Barna. And I will replace and longer pointed here, these one. And here we are. Now we can easily change some text. For example, we want to replace this today with Limited offered text. And it works fine. We don't have to do many only anything after this. And let's make this longer. No more interesting. To do this, let's make one corner of this frame around, will make top-right corner. So it will be here, say 40. Okay, so we have our longer over here. And to get you more understanding how we will walk with all this outer layouts. Here are some examples of Google Barnes. And as you see as a set, auto layout is used not for the whole banana itself like this, but it used, for example, for this text Bible. And if I change some text here, it just follows new sizes. And as you understand, I can change this text and the whole band still looks beautiful. So in general, auto-layout allows you to make your frame be adjustable and to move with your objects inside of this frame. And this is very handy to create such texts bubbles like this. This is very handy to create some buttons that follow the text and so on. So we covered the basic usage of this auto-layout and then we will use them again and again to create our beautiful balance. Hope you enjoy it. 23. 6.1 Components Intro: Components are very important in Figma. And in fact, this is one of the main reason why we walk in Figma and why we choose it for our marketing purposes because components allow us to create many and men in violence and to duplicate them, to make changes quickly, to make changes in many formats or banners. We will see how to create more than 24 months of banners in Google in couple of minutes, how to create different banners for Facebook? How to multiply them and create main imbalance for AB testing. Let's say that you created a lot of bonds. For example, 20 or 30 or 60 of them. And then your allies to the do you applauded around logo that you should upload another one? In this case, you have to spend a lot of time if you use Photoshop or something like this. But you will do it in seconds if you use Figma and just need to upload your logo into a single component. And it will apply to all of your files if you want, if you build them correctly. And now we will see how components work, and then we will see how to use them to make all those templates, to make all those files that will save you so much time. Let's go and see how to do it. 24. 6.2 Single Component: First of all, what is a competent in Figma component is some frame that has properties, color, size, some settings. And if you make a corpus of this frame, the Doppler gates have the same color, size and the others. It's obvious the difference between component with its duplicates and just a regular objects irregular frame with this cop is, is that if you change some property of the company and for example, its color, its feel, its size, its copies will apply all these changes as well. And how do we use it? For example, you made a typo and want to change the text at all your banners. And for example, you create Google banners, there are 36 pages. And if you don't use components, you have to correct this type at every single banner, so 36 times. And then you want to change somewhat to use a synonym just to change the text so you have to do it again. And if you use components, you can set it once and then reuse it multiple times at all your banners. And after that, if you make a change into a component, it will be applied to all the copies. And for example, you want to create a new set of balance. For example, we want to make AB testing, and you want to AB test, let's say the text of your balance. So you create a new file, for example. And you just change the texts and everything else is set. Or you want to change background or image, or do you balance the text of your button? You copy, you change it once and all your banners asset. So actually you create a set of bananas for AB test and maybe in five seconds sometimes. So you just have to change the text or whatever you want to change and download all your banners. That's it. And now we will go and see how this works in practice from more simple components to more complex. Let's go to the page that is named Figma components over here. And here we have some components or K. What do we have? Actually we have two ellipses. And let's core PM. Okay? And let's make a component from one of eight. Okay, there is some texts explaining how this works. I will create a component over here. And to do this, you can click this icon Create component. You can right-click the object and find where it is Create component, or use a shortcut. So what changed is you see this is an ellipse, it has these icon. And when I created a component and lips went inside the frame, so component is always a frame. And this frame has this specific icon and purple color. All its corpus have a purple color as well. So now if we make some duplicates, I copy paste this and this court has this icon. All the duplicates will have the same icon. So obviously if I have to just two ellipses over here, two circles, if I change column, this one, it won't affect anything. But if I change a color on these one, all its corpus will apply this color as well. Okay, so we can change different things. For example, we can leave this one as it is. Okay, let's make another component here. So we have one copy. Now we have this copy and we will paste it couple more times. I select these one. Sometimes where when you have a lot of components, it becomes working a little slower but still works. Okay, Let's leave these, the first one, just as it is and change something in these. I will make it bigger. I will make these one orange. I will make this one same. It runs parent. And I will draw a shadow from this one. Let's make it more visible. Okay, something like this. And now I will change the initial component and see how this changes. I applied. Here. Our first of all, I will change the color of my lips. And all its corpus. Change the colors except this one, the orange one. Because if I change some property on the copy of the company component, I tell to Figma, Hey, I want this to be a copy of a company, but I want to change something. And if I change this thing in the initial component in the original company, that it won't be applied here, but not all of them. For example, if I change the size, you see the big one is changing as well. But it still is bigger than all the other copies. If I make it almost transparent, it applies to all except the orange end game. For example, I will apply some effects over here. Let's say it will be shadow. Again. I will make it red. 2020. As you see, it was applied to all the corpus except this one because it has already its own shadow. So as you understand, there is a lot of space to create different things with all these components. And you can even change some properties, its colors and shape or whatever. Let's make some text component. I'll just copy paste this text and I'll make it component. Then I make some duplicates. Now, I will this here and do the same thing I showed to you before. I will arrange of these copies and now vertically use in spacing. Okay. I said it's 250. As you see, this is frame as well. So if I want to change the text color, I have to go inside the frame and select its text layer. This case, I can change the color to whatever I want. But if I change fill option of the frame itself. Obviously, the frame becomes white. Okay, I will make it invisible. And now I can change some things over here. For example, I will change that font size. I will change the font itself. And let's set it to something else. Okay? I don't like these. And this is prejudice similar, let's say in tone B. And this one even pumps Times New Roman. So it will look different. Okay, I will change the color and so on and understand if a change or all these properties over here, some of them will be changed and their corpus. And again, I remind you that you can use this selection color option to change the color, not going inside the frame. So I select it's called frame. And I understand that the col belongs to the text and I can change it, not go in deeper. Okay. So I can change our law. I can scale the frame is you understand everything is good and began to accept these frame that I changed all radio, where I changed the size of the radius. So the text works almost the same as anything else, except we've done to use fill option here. So so texts works like everything else. And there is another option that we should be aware of when we speak about texts components. When you create the text, the text component, you should look at which options. Set here out of width, outer height, or whatever. Because when you change the text, if, for example, let's create some copy. And we will write another text. As you see. Because of the fixed height, everything goes like this. If I use this, here's my data. And there is one more important thing when you walk with the text components. It's good practice to use auto-layout. Because when you change some text, I will create a new component. And I will use auto layout over here. For example, I want to create some longer and to use auto layout there. Ok, and let's combine these into longer using auto-layout. And let's combine these into longer using auto-layout. And now what's happen and what happens if I want to change this text? And you see him? And what happens if I want to change this text? Okay? So I think you see the difference because these component uses auto layout. So the component itself changes its size after the text. And here in this case, the change of the text is changing. As you see, the text has these being with Van, the component has the same width as it was before, because it doesn't have auto-layout, doesn't follow the text. So that's why auto-layout is so important in Figma. Let's apply it here. And as we see, everything becomes much better. So these are the most basic thing is about the components. And we will move on and see how to use them in more complicated ways. 25. 6.3 Components & Autolayout: Let's look at auto-layout and components. Once again, because this is a very important topic. Okay, So let's make a competent to use an auto layout. We have some sample text is a component. Okay. I will make a new component of it. I will teach how to do all tissue, how to do it a little later. Now I make its duplicate. I will copy this text is just some text. And I have an image. Okay? That's it. We have three objects and we want to combine them. I will copy, paste them and paste here. Now, I will frame this selection. This is a new frame now and add auto-layout to it. And let's make it competent to make it look more similar to minors. Okay. Okay. Let's frame this selection as well. Matt, without using auto layout, I just wanted to make a background color here, like this, okay? And now I want to change this text, some text sample, and I want Marx. And that's it. As you see, even if I use this option. But I want some another line of the text. Now, as you understand, as long as we don't use auto layout over here on this frame or a thin is a mess right now. And here we're, everything works fine. And as I said, we will use search logs, such components at other Varnas. So let's add, for example, finding. Let's make the film and semi-transparent and the borders corners. 250. And we could, could paste such objects into our learners. It will make a mess right now, but it could look like this. For example. If I change the text. So imagine that you have a lot of such violence like this. Let's make it a little brighter. Look at this one. This one. And make this more or less transparent. And hopes, I will put it here. And I just want to replace this picture a little bit better. So I call it this one. Actually it's not more lives, of course, but into something that we have here in these files. So I will place an image here. Okay? Okay. And let's use constraints. I will on this center vertically and see what happens if I will change the size of the image. As you see, it is still vertical over here. This is how we use constraints and this is why we use constraints. So as you see, when we combine components with auto layouts, we can create such bumbles that we use inside our burners. And everything works, okay, if we change text, it adjusts. And that's how we create a lot of banners in Figma in a couple minutes. 26. 6.4 Nested Components: Now let's look at the nested components. How do use comments inside components? So let's go here. Here we have these nested components and what do we see here? We have some icon and we want to make two versions of loggers with this icon and then to use these logos somewhere on different unbalance. In this case, if we change the icon, it will be changed in the loggers and it will be changed in all the places where are we based duplicates of these logos. So I'll copy, paste these icon. Then I will make it a component and create a duplicate of a component. Now, I will create another duplicate and I want to make these logos. Let's say that this is log as more lives forever. Okay? So I need some for AIM. I will feel it and I will paste some text inside. We'll say lives over, okay, it's inside frame six to seven. And I will apply auto-layout to it. Okay? Now I want to add some padding, let's say to be orange. Maybe 20, or even maybe less. I want this to be the same size. Okay, it looks like it is the same. And I will add a moped in from the sides. Let's say I'll set it to 14. Okay? And I want to make one corner around. I click this icon and this second one will be around o. Okay? No. I want to send the color of my logo. To do this. I click here and you use a kernel up beaker. And great. So I will just create a component from these whole logo. Let's make it component. And now I want to create another weren't a longer square or vertical one. I will use these icon. Then I and some are unknown frame. And use our total feelin. Change sets some of bursitis problem laterally all transparent. And now I will just copy paste this text. And this looks like a frame because it has auto layout. Okay, I will copy paste this text over here and I will change the layout toward vertical. Then R will use center alignment. Now I want to add more space in between these two objects and I'll probably and less space in over here main meal, it's a 230. And let's make this corners around Maine be laying these. Okay, so looks the same. And now I make these longer component and gain. If I want, I can make it a square. For example, I need a rectangle and I need a square. In this case, we'll use fixed height and width. It will be, okay. 422. Ok, and let's make this text smaller. And in this case we can make the space in between these objects and bigger. Looks, right to know. Oh, okay, Well so now we have two components of loggers and we can paste them anywhere and the bonus. And in case that we want to change this item. Okay? And we'll paste to corpus of this longest duplicates. Okay, and now I want to change a color of our palm to orange. So as you understand in gross everywhere. So the main theme from these lesson is that we can use nested components. So we can use components and sub-components inside companies. This is very handy if you want to make some complicated themes. If you want to use some small objects inside some bigger objects, so that see it with our nested components. Let's move to another lesson. 27. 6.5 Detach, Restore and Find Components: Now we have a very short lesson. Sometimes you need to break connection between copies of your company and the initial component. For example, Newgrange at a company and then you use it a couple times and somewhere, you just want these objects to be placed or whatever you want. And you don't want it to be related to the initial company that you just want to fix it and to look exactly as it is right now. So you have to break the connection between them. You can do this with a comment. It's named detach instance. So we have a component and we have eats copy. Let's make sure yes, it's copy of this component. And if I change it, of course, it will change over here. And I want this copy it to be disconnected from this components. So I just right-click it and click detach instance. As you see, It's not no more a copy of a component. So I can do I want with these one and my copy isn't affected anymore. So you can use these if you want to make some changes or you want to create a new component, for example, you have this one and you want to create another component based on these, but have to detach it first. I detach this. For example, I do this and I want to make it more rectangle. Okay, like these, and I want round corners. And now and I click create components. So I have two separated components. And I could do it only after I detached these copy from its initial component. And now let's see what happens if I have a copy of a component, but I deleted the initial component. So let's make a new component. Over here. Make it a company, then I make a duplicate. Okay, and now I delete this one. Now I want the initial component to be restored. Actually, there is an option for this. If I sell at this company and there is a button restore component, as you see, there is create a carpet. And I don't see this button and these copy because this component isn't deleted. But this company and doesn't have it's this duplicate, doesn't have its components. So that's why I can restore it. Actually it's been restored. And other thin, for example, I have this core PIM and let's make one more. And I paste it somewhere. And I have a big project and I don't remember actually where is my initial component? In these case, I can I can find the initial component by clicking this icon. It's an icon over components. So I'll click and go to main components are, I'm here. This is pretty useful. When do you cope bigger components from one page to another? This still works. But after that you're looking for the initial competent, you can find it. You just click it and go to their main component. And for example, if I delete a main component here, then they go to another page. And I want to restore component. It's been restored and my focus goes right here where the initial component is. So it's pretty useful. 28. 6.6 Component Library: One, my hint about components. When you use a lot of them, it's difficult to find where you place one component or another. So for these case, you better to use a component library or Control Panel or whatever you call it, it is someplace way you create all your components and if you need new components, you put them altogether. And in this case, if you need to change something, you always know where to go. You always know that all your initial companies, I add the place. And if you use nested components, it's a good practice that you store all your components together as well. For example, you have your smaller components organized altogether and you have some big accompany that use those small ones. And you use these bigger components somewhere at the place as well. So even if you change a small ones are bigger ions, you will have everything together and in this case, you won't suffer looking for components way you have to change something and you know exactly where they are. So let's look at some examples. We will go to the lessons that we didn't law yet. But let's take a look at this. For example, this is a panel for Google burners and this is a control panel where we have our components. And as you see all these things, these are components that use these ones. So as I said before, these small components and these are big companies that use those. For example. I'll change something here. And all the changes seen here. And he had all the bonus. And this is a good way to organize your files, your components, and to your objects cope, you will use it as well. 29. 6.7 Components Bug Fixing: There is one bug in Figma that appears when you use a lot of components with auto-layout a. So let's look at it. I will go to another file, smart banners for Google ads, and we will call this file later. But right now, I just want to show you this bug. Look at these banners. There are texts bubbles on them, and as you see, they don't look good. And if I go here and see these manners, they are, okay, but actually, these banners on the right are duplicates of these banners on the left. So this is a bug. And as you see here, I've already fix it, so it looks okay and there is a very simple fix of this bug. If for some reason Figma breaks your components with auto-layout and it's inversely that there is some mistake over here. Something is broken. You have to change these outer layouts to change something there to resize them. So Figma will recalculate everything and then we'll get to normal condition. The most simple way to do this is to change some component that is placed inside these bubbles so everything will be changed. So I go to the settings where we have the texts that go to these bubbles and I will add one space and then remove it. And so Figma recalculates all those tanks bubbles. And if we go and look at them, they should be okay now after these changes, so I go back to the banners and see that text bubbles are okay now. So I have two version with normal. Thanks bumbles. And this one is still broken. So I go back to the settings and I change a text for these variant. And, and remove space once again and go back and see what happened. So everything is okay now, so if you have such bug when you have a lot of components with auto-layout, their visual unbroken. In this case, use this tip to fix this bug and enjoy your files. 30. 7.1 Banners Intro: In this section, we will learn how to create actual bananas, will learn how to use buttons, how to create by grounds, how to add text people, how to add some objects, items into bundles, how to combine them, and how to use components, outer layouts, everything altogether in your bonus. So let's go and see how to do your work faster. 31. 7.2 Button: Buttons. We will start to learn from the first element. It's bogged down on it is your call to action element at your boundless is the element where people usually clique even it is a single image. We will look how to create banners in two ways, shapeless texts and a frame plus text already covered in these. But let's do it once again. What is about Anna baton is usually some rectangle with a text in it. So we can create a rectangle from shape or from a frame. Let's create the first one from shape. I'll just copy paste this rectangle. And copy paste these text button will say sign up today. Okay. Now I'll make it alone being him. Okay? Something like this. To make it single element, we will create a group from it. And let's make it corners around to make it more beautiful. And now it looks like a button. Okay? Now the second way is using texts frames. Okay, let's go copy paste the text. And now I will frame this selection. So I create a frame around these texts. Okay? Now I will add auto-layout, because as I've said, it's always better to have auto-layout around the text, especially when you create buttons. So we will add some fill-in, make it yellow, and we'll add that in. Okay, We will change with the problem. I'm late to learn. If 2050 or something like this. And let's make corners around again into us. Probably 20. Yeah, looks almost the same. Okay. Now let's add a stroke. I'm doing all the steps with this single element. But you will have all these. As an example. I'll add stroke and set it to, let's say five, maybe. Okay, this is a mountain. And if I want, I can make it component. So I will reuse this button multiple times. Okay, here we are. Shut. I don't like this, are in gray color of the text. It's not very conscious, so I will make it darker. Or if you want, you can make it Some of some color. For example, like these. It depends on your style, style of the project. Where you create your Mountains, for example, it wouldn't be applying these. So now we have a button that Quicken. We can reuse multiple times. And as you remember the difference between these buttons and these buttons that a maimed using shape? Okay. Let's make it more similar to ours. Okay. Did you see what happened? I have a group, not a frame. That's why when I applied a stroke, it has been applied not only to the shape but to the text as well. That's why I have to select my rectangle and stroke to eat. Because I don't want a stroke on my font. And I have to change column of my text. I will use these. Carlos select two. Okay. Looks almost the same. Lactose three? Yes. What's the difference? And let's make it component as well. The difference is that if I need to change this text today for sorry, I have to change this to auto width, but do you see what happen? So I have to select Go to make it wider. And for example, then I decided that it's bad to have this text in two lines. I have to say like this rectangle ones and gain. And I have to do something like these. This is not so. And if I have biotin, the frame, I can do anything I want and it will follow me. So this is the difference of creating buttons with shapes and with frames. I suggest you always use frames for this. 32. 7.3 Fill / Background: Back ground. And this is very important piece of your banners because these caches attention to Urbana, these sets of their color set of your banner. And let's see how to create it, to use it in multiple banners. Okay, for example, we'll have two minus 600 by six hundred and six hundred forty by 408 here. And we want to set some ground for them. To understand which size of component for background do we need? We have to look at the biggest button and that will have actually right here, these is even too big. We could create component form background smaller because our banners along that week. But I usually create it bigger because I don't know which size this will I use in the future or if I have some preset set of banners. In this case, I already know that even these is not so big. If, for example, I use Facebook minus where we have dimension of story minus as 1000, A2 by 1000. Way. Like this. So obviously, if I have a banner like these and I want to use a background, I have to create. I'm back ground component, at least 100,920 because in the other way, these ground will be too small. Okay, So this is how to choose a size for the background component. And now let's go to the beginning and create our bonus. This is six hundred and six hundred. Let's fill it with something and another one will be aligning these. Okay? And now we want to add some background to eat using a component. Okay? I will create a component with him being guessed. It will be 640. So this will be 600. Body bias and poverty are okay. And I will make IT company name ain't going around. And after that, I can copy some image over here. I'll call these image from. My prim has component and use it here. Okay, and I can scale it to fit my size like this. You can move your image inside background as you want. I will leave it like this. Okay? And now if I paste these on-ground component into my banners, I am been ground to will their corporate as well. Sente to do color k. Now let's change the background here. So look if it changes over here at the bonus. So I will go to the library page and copy another image and paste it into my background component. So as you see, everything works. And what else do we have? When I add some text or some images to my minus, like here, I probably want this background to being blurred, for example. So I can add another frame into my component, Vt. And this is and I paste it on the top. And now I can fail it and make it semi-transparent. Anki and I have some effects like here for example, and Ben ground law. And as you see this image, because a little blurry. So I can set it to 30 or maybe it's too much maybe to this. And if you want, this background becomes blurry. You can apply different effects to above-ground to do something here. But I think these are the mainly used effects when you create backgrounds. So you can use them. And let's revise once again. Usually you have some set of sizes of ones that you want to create. So you want to create manners for Google or you want to create a Facebook. And you already know the sizes of all your banners. When you know it, you pick the biggest, the biggest dimension and make background component as a square with side equal to the biggest dimension of your balance. In this case, you can use these background at all of your banners and without losing quality. Okay, that's it with backgrounds. And we will have a separate lesson about where to find beautiful burger grounds, beautiful images, patterns, and other things for your backgrounds. We'll cover it later. 33. 7.4 Item, Person: Item or person. Sometimes you want to add some item or person or both of them into your mourners. And let's look how to do it. How to create these components. We have two examples. For the future. We will create a bonus for some random using coal instrument shop. Okay, so usually these items are not that big, the bonus, so that's why I'm usually it's enough to create a component 600 by 600, actually right here would have very small bonus, not very small, but not so big. That's why we created small component for the item. But in my example, I'll created six hundred and six hundred and again. So if you have big item or an object, you can use it even in your Facebook story banners. Okay, so I created a frame and I will make it component. Alright, now, I will name it. I usually don't use slashes in the names of the files because these is used to make separate folders when you export a lot of files in Figma. We want covered this, but I just don't use slashes as a separator. I use something else like this. I mean, if you know what you're doing, if you export a lot of files and you want them to be placed in separate folders. In this case, use the slashes to download your files and to name your layers. But I will leave it like this person. And I have two images that I want to waste into my mariners, this girl and this head falls. As you see, both of these images have a transparent background. This is very important because we will use these images and the banner. So we have to have transparent background. We will have a separate lesson about plugins and other services. And some of them allow you to create images with transparent backgrounds. So if you know where to find these images, don't worry, we will cover this, will cover how to create them. And of course, you can download such measures from image search on Google or some stock images as you want. So for now, I just have these image and I will copy paste this and put it into these. Okay. Okay, I will make it smaller. And here we won't be like this now, I will make it transparent. And now I will, I will cook to paste those. And I will paste copies of these into my wireless K. Okay. Just make sure that they touch the bottom of your violence. If you know that you will probably paste people into a minus, if you paste some homage isn't don't, that are not cut it and the bottom. So in this case you can place your components in the center, whatever you want. But as you see, this doesn't look good with people. If these people are not place here in their full height or k. So we have these, I don't like this very much because it's not very contrast and these go, doesn't look good this background. So I will go here and find my, let's name this layer or layer and make it less transparent. I'll set it to 30 years now. It's better. I like it more. It became more contrast. And now, let's say that we created one set of barns and were uploaded into Google or Facebook. And now you want to create another banners and you decided to put this head fonts instead of the girl. And in this case, I copy paste this image here, and I have my item person component. I just need to make the girl layer invisible. And device is due. Like this, making some pictures invisible only if you expect that we, that you will use them later, these banners. But if you understand that you use these girl image one time and you want repeated, in this case, a better delete this layer because when you have a lot of copies of these layers, gig operates all of them and it just becomes walking slowly. For example, if you have these banners and Ukraine them over and over again, in some, at some point, you can find that your item component can ceased and 20 different images. And even if they are HIV positive, they are invisible. Figma is walking with all of them when you do anything, when you scale up, scale down, and this will significantly slow the whole process. So if you don't need these anymore and these minus you bet and delete this lab. And usually when I do this, I create a new file. So I duplicate the file and I do all the changes and the copy. In this case, I will have all of my banners at my library and I will have all of the versions. And if I want to get back to the banners with the goal, in this case, I just need to open that file and that's it. So now we know how to do it. And for this image, I will set my background back because these headphones are white and I might use or another color ramps. Or these, these, for example, these logs better. Or I just make it more transparent. Again, actually, I like you should put it probably over here for these banners. But if you don't want to change anything into your template, just use these. And these is pretty contents. Okay? So we covered how to insert different majors items, people to awareness to how to make it using components. And let's move on to the next lesson. 34. 7.5 Logo: Logo. Usually you want to put some login to your bananas to make them Brenda, soon as low cow, it's better to do it in Figma. For example, we'll already have some variant on longer, usually the race sum. If it's not, you have to create it. It is an email with a transparent background. It's better to use a sideshow majors for lawyers. And we know that in the later we will use a tool wir uns of longest. Usually, it's useful. Horizontal loggers and vertical ones. Surely this one is horizontal lower edges. So let's create a square log. Right now. To do this, let's create a frame. Let's save five hundred and five hundred. And let's feel it for now and copy paste these logs into these frame. Let's make it nice and long. And we'll put this image into this frame. That's eight feet. And k integral. And beyond learning these, you see there is some thing over here. And you can do two things. The most simple is just to cut this image, you select it. And there is a crop email tool like this and press Enter, That's it. You have your name over here. And we want to use this image, this icon as well. And these case, so we make it from being these actually can crop it time. Okay. And that's it. No, it's more. It's easier to operate. This. Okay. For example, we create such a logo. And after that, we can make transparent to remove the fill-in. Okay, so we have square or longer. And let's say we want to create a horizontal logo of an exact ratio. For example, four to one. And we will create a frame for 100 by 100 K all, let's double it. 800 and bye 200. Ok, and let's copy paste these into longer. It's over here. And let's adjust an image to fit when you size. We will make IT company and we'll name it all these and fill it for now. But align our image, okay. Now we can remove the fill and so we have our two logos and actually you can use them in their future. If you want. You can make these words into lines in a school via a log on. Obviously you have to crop these. Once again, Amen two times to have a perfect what and what sounds separate and to paste them one and above each other, one on the top of another. And as you see, when we use loggers in the oneness usually level want to have these two feet and in backgrounds. So in this case, for example, we want to create too long AS 200 by 200 and 400 by one hundred, two hundred and two hundred and four hundred bio 100. Okay, so these way just loggers. And we can use these logos inside our components. And these companies are logs as well, but this exact size. Okay. Probably I moved this icon outside of the logo. Yes. So I have to move and vec k. And now if I copy paste this logo, I will. The is I will name it longer to her and him by 200 K. And I will move these longer into my 200 by 200, OK. And now I will do it align with these. And now we'll make it competent again. So as you see, we use nested components and I will make it semi-transparent. For example, 50 percent actually know these. I will make the fetal and semi-transparent, so I don't want my logo to be transparent, I just want its background to be transparent. And I will add corner around corners. Okay, so I can use these logos, my partners. And I will do the same with a horizontal auger. I will paste my longer into here and feet, the size. After that, I will name this one. And I will make the feeling semi-transparent and I will make corners. Maybe it's too much. This is on k, k like these. And I will rename these longer to its actual size, 800 and by 200 now it's okay and I will make the horizontal logo component. So as you see right now, I have two components. All the logos that I can use at my balance, and I made semi-transparent by ground for them. So if I want to place them at some background that is noisy, where colorful or very contrast, these semi-transparent but ground saves my logo from B and not treatable. And I can put them at any minors that they loggers will be readable on them. And let's make a variant of this horizontal longer being leg these with one round corner. So this logo will fit top left corner of the banners because usually it's empty from some technical icons that added by Google or some other advertising platform. So this is the perfect place to put your logo. Okay, I will copy paste these logger. I did touch it because I want to create my new component. So now I get my corners back to 0 around. And I will make these Corona to the rain. And after that, I will rename the frame, for example, top-left. And after that, I make IT component and gain. So now I have three loggers for different situations. If I want to create another one, for example, for bottom-left corner, you know how to do it. Okay? This is how we deal with loggers. If you don't have log of the transparent background, you just have to use what you have. But sometimes it's better to create, to draw a new longer. You can do it in Figma by combining image and a font, or you can do it in Photoshop or wherever you use. So if you have loggers with transparent background, It's always better than if you don't. That's it with logos. Let's move to the next lesson. 35. 7.6 Text: Text. This is a very important text. This is where important point because Alibaba's will have text probably. So let's see how it's better to create texts at your banners. Of course, we will use components as well and we will use auto-layout. So now my suggestion is to use such texts bubbles because we, when we use them, they become universal and we can use different backgrounds, different images there, and the text will be readable at all of them. If you don't use them, it becomes pretty hard to set the text, to set the right color, to say the right transparency and the right position of the text. Because when you have a complicated background, you have to adjust a text at each banner. Avoid this. We will create these a tags bubbles that look like this and everything will be okay. So let's start. We will use a text of two paths, a headline and the description. Some of projects require more texts, some of them require less tags. But let's stick to these two components because usually it's enough to place so all your information and to avoid putting too much text to a minus. So at first we will create some texts. Thank you for being good. And we will write on the perimysium use. User. Meant more. We'll center this text, make it purple. Yes. We will make it bold. Or even Beleg. Yes, since bold and its size was so 26. Okay, Let's go on back and stick with 36. Okay, Now we will frame this selection and to layout and add ponding of rod will fill it with 50 percent transparency and make my pronouns are 20. Okay, probably this one has different options of pattern. Let's look, it's 20 and 30. So let's do the same to be empty. Okay, now they look similar. All K and let's make it a component. Did I click it? Okay, and I will name it headline. Now, I will make and description using the previous component. I will detach this instance, and I will replace the text. I will copy paste it to do it faster. Okay. That's, it. Looks the same, but the only thing we have to align text to the left. Again now it's looks similar. And we will make it component as well and we'll rename it to do is corruption. Okay, and we can use this at our environments. Okay, let's look how it goes. I copy to these learners, select two of them and move. Yes, I have two copies. Okay, and now I place duplicates of my text components into them partners. I paste in this headline and I will paste the description probably. I have to set it to, let's say 70 percent stone, but even 75. Okay, Now in the bat and let's combine these objects. I will send the headline our center, then there's corruption. Okay? I'll put along over here and make it smaller. And you see the girl is behind the text and I want to be in front of the text. So that's why I just pull this to the top to be above description. And okay, it's in front of it at my canvas. And now I will copy paste. Both these components and other burners and these banners. I will, okay, I will do the same as at my example. I will send the headline and I will put in the description to the left. And this, and it's like surely it is, Okay, I will move it coupled pixels to the left and I will bearing girl in front of the text, I k looks the same. And when you create a bonus and these texts bubbles and you embed to use constraints because if you change some texts, Let's look how it works. I have these headline centered, so it's located on the center, in the center of this banner. And I will, and it's constraints. Look at its constraints. They are left and top. Okay, So now I will, and some texts here and see what goes on. The Bible is more to the right now because it sticks to the left corner to avoid these behavior ie current. So these text and I will change constraints of these. Thanks bumble to the center. And now I will add more text here, or k. And as you see the difference between two these headlines, this one remains in the center. This one goes to the right. So that's why we have to check. And we'll have to set our constraints when we use these texts, Bible at our burners. But as you see, these, thanks bubble's still don't look good. If I add some text, I will put this here to the next line. And now you see this doesn't look good. They it's overlays these one and it doesn't look professional. Okay, two or more, these are the best practice is to use a single text bubble that contains all this text. To do this. Have to create new components on. I will use these two components. Show you how to do this. Now with these two components, okay? I will detach them. Okay? Now we have just two frames, are will remove the fill in. I will move the pardon for both of them. And now I will create a single frame that will contain two is and texts, headline and description. Actually, I can create a component right now and the frame will be created automatically. So I just create a component from them and I will name it. Text, bumble, our k. Now I just have to edit the sentence. I will add auto-layout. And now let's reduce this distance to know for the in-between them. I will feel it. I will add pardon? Center these elements certified into all let's say 30. I will send around corners to 30. And for our model it looks okay. So when we create Cij Bibles, they look much better because they are the single elements. And if we change some text, these tanks bubble looks good. No matter what, indeed we change. Okay, Let's move to the center of this longer from here. Okay. Let it be in the corner. Oh, okay. And we will set its background to semi-transparent, set to 75. And we will set constrained to this term, top and center. Okay? And I copy paste daggers bumble to here. Okay? I will make it being here. And I will use constraint left and center vertically. Our k. Now I want the girl to be in front of. And the text bubble. Now it belongs and good. And as you probably understand, if I add some texts line and my headline, understand it doesn't go from here because I'd touched the component and I should set and text over here. So as you see the text bumbles, look, okay, I just have to move and go. And these burner to be on the top of the tank bumble. So actually you can create components like this. But I suggest to do lake here in example, to have separate components for the bubbles because when we create violence of different shapes, now, we will use the same headline and the same description, but we will use several texts bubbles that we'll use them. We can see it right here. So you can see different texts bubbles like these and like this and like this. And they, I'm made of single text components. So it's better to do like I did here and the example or in other wards. And let's repeat, I will copy this text. Name its length. These. Move it here. Now I will make this text component. Now I copy paste this text. I will move it here. And I'll say it and make it component. Now, I make a duplicate of the component and paste it into my bubble. And I remove this text. Now, I duplicate my headline. I move and copy this bumble and the previous one. Okay? So now I have two separate components that I used at my text bubble. I just have to apply outer layout. I'm not sure why it had been broken for some reason. Okay. Understand. I have to apply auto-layout over here. So as you remember, I told you, uh, when you create a text that will be used somewhere else, it's always a good solution to apply auto-layout to this text. So as you see right here, when I was doing back and forth, I have forgotten to plow to layout to this layer. So right now I have the text of this size and my frame of these sides. That's why when I add another line to this text, it doesn't affect my text bubble because text bubble uses auto-layout to the frame, not to the text inside of it. So the very simple solution is just to add auto-layout to my frame. So this frame will become bigger. E two will be the same size as the text and everything will go okay at my text bubble. Okay, so here we are. And our will apply auto-layout to my descriptions. Well, actually it is applied. So when I was changing, for some reason, I broke auto-layout at my headline. So now I can call this red line again and I can description already. So we made it with a long path, but now we understand the difference of several approaches of create and this text bubbles you can use previously created objects, previously created barbells. You can detach them and make copies or you can make everything from scratch like I did here at the example. And anyway, you will create your text bubbles and don't forget to use auto-layout. And in this case, you will be okay. So that's it with using text at our bonus. And let's move to the next lesson. 36. 7.7 Whole Banner: Let's finally create our whole banners using all these companies that we created before. So let's go here and let's create five different banners for different advertising systems. The first one is six hundred and six hundred. Let's fill it. Okay. The second one is 798 by nine times GA. Another one is 970 by 251 more, 160 by six hundred and two hundred, forty by 400. Okay, so we have 51 us. Let's fill them with something. We will create a background. As you see, the biggest dimension of this banners is 970. So let's create a background of say, 1000 by 1000. So 1000 by 1000. We will fill it. And let's add an image. I will copy paste an image from these frame. I already have it, and I will paste it here. So as you understand you better to have the big, a major source of your backgrounds, to have the good quality. Rk. And I will create a component from this frame. Okay? And click OK, and let's name it the ink. Now, I copy pasted and place its copy into my minus a. Did here. Actually, I have to rename all those banners because I don't know which of them is reached. And I will do this. And this is probably 600 by 600. Oh, okay. Now I will send, will move this background into this layer. I will move this background into these layer. And now I can scale it. For example. These k copy paste it and paste it into the next runner. And I will scale it as well. Okay. Okay, so now I have all the burners filled with background. Now I create text bubbles. I will create two texts and make things bubble from them. This one, I did, this one. Now I'll make it a component and make it component. Now I create a component from Io, copy paste them because I want these components to be as sentence. And I wonder these to be a component of the text bubble. It will look like these. Ad out the layout. I will add some fill in. I'll add some part in, some corners and some binding. Okay. And I'll center. The elements of R will send this to 75 again. And as I see, I placed buttons over here because I want them to appear at my Barnabas like it is these bumbles. So that's why I will create barbel right button right now. And then I will paste it into my bumbles. So I will, okay, I will create button. Here. It is. As you can understand, this is text. Okay. I will create it from scratch to show you. Okay, SHE rope now created a text and making it white. Now I can create component from it right now. So these grades frame around my texts. It wasn't and polite. Okay. It's applied. Now I add auto-layout and some bad in. I've fielded some green color. I add stroke. Let's set it to maybe five. And let's set the stroke to white. Okay, Now let's make a round corners, probably something like these. Got k and we have to add more into the science. Mainly it was 40. It looks similar number I think it goes wider stroke. Probably it was six pixels. Okay, so now I have my Shop Now button. I can remove this one. So I have two texts. I have button and I will paste button into these tanks, the Bible. Okay, In goes on there because I have auto-layout. Maybe I will use less space to make it not so big. And I think now it's okay. But I want to create several and bumbles. So I duplicate this one. Okay, and I did die sheet. Now I make it vertical and create a component and gain. So I will name it vertical. And I call this one marble tile. Now, we will, based on this bumbles into my banners. I incorporate this one and paste it here. Make it smaller, like this. And duplicate. And I will put it here. This Barna. And don't forget to set constraints. Over here. And over here, I said to center. And probably I can paste these bumble into these Boehner. I will make it smaller. And I will use the Bumble. This tomb banners. I will use a horizontal version. Mm-hm. Okay. I put this text bubble. Should, it shouldn't be above. It's in the I put this text bubble into the band, into this vertical banners. So that's why I don't see it right here. I put it in the wrong place, so I will pull it and set right here. Okay, so now it's visible. And the other thing that we can use here is and then I know that I will put a girl and actually I don't have space for her right here. So in this case, I can make the button visible and send the text here. And I can copy-paste the button right into my banner again to be outside the text bubble. Or make it smaller and leave it here, for example. And now let's preview this banners in pixel. Preview. I said one x and set the scale to 100. So this is how these banners will look. After we download them. I am, I am okay with all these banners except this one. I think this is two pixel. The text is not readable. And that's why I want to create a separate text bubble for this banner. And I will use it on a very vertical banners. Copy paste these. I detach it. And I will change the text. So I will make the text vertical. And I will make each word from the next line here. And probably something like this here. Some sin, this and I will make this button little smaller, k. And now I make this bumble component, and I will call it very vertical. Okay, now I copy it and go to my Varner. Took paste it here. So as you see, this looks much better. The text is readable member not perfect, but readable enough for our purposes. So I just deleted this thing is bubbled from the banner. Very important notice is that since we change, changed the text in the headline and the description from this point, if I change the text here at my components, it won't be affected here. So I This texts, and as you see, it was added to these two marbles and it wasn't added right here because I changed this text before. So if I want to add these words to this text, I have to do it manually right here. Now, I bring him back. Okay, What else do we need? We need to paste girl or an item. So I will copy paste to this. Surely I will copy paste not these components and invite, I have an inverter current which we created here. It is. It is over here, yes. No, It is. Yes, over here, right? And person here. I detach it. And I create a new component from this array. Okay, Now I, I will paste and girl image into it. I copy it and paste it here and make it visible. Temporary and the fill-in. Now, I will move on. Girl told them. Okay. I think this is okay. And I make her bigger. K. Now I remove the feeling and I make it forms invisible. So this is our component that we can use, our banners. Being a smaller, well duplicated and paste wherever we want. And K, I will put it in there. But as you see, this isn't a very good quality. She is go into these burner. And I said constraints to this majors as well. I'll set this here. Here. We will set center and right here. And right here with Martin and center. Okay, and we have done last and stick it to the bottom. This is the bottom as well. Okay, so now we have majors it all out. Sizes. We have to paste logger into our bonus as well. So I will copy paste these as well, already created it and the previous lesson. So I will just use eight. I detach this instance create component from it again. And as you remember, this is that we are until the logo were created, one round corner. So I add this logger to my bass. Usually we paste the logger in small size, but to do it correctly, it's better to use 100 Zoom and Pixel Preview. In this case, when does tend if the logger is readable, because sometimes we create two small loggers and they are not readable at small sizes. So that's why we still live Pixel Preview turned on. And K will make it smaller and I will move this one. Here. I move the girl. I think it's okay. Well, that's based on all these burner. We're led smoothies ramble a little. These little space. Left side was one pixel. So I pasted logger at all. My mom. Actually we have we can upload to our advertising systems. If you want. You can just select all of them. And it should be inside, because if you do it center or outside, it will change the size of the banners. And when you upload them to Google, Facebook and other advertising platforms, you will get an error. So let's set it to four pixels, and let's set a color, for example, to our purple color. So now we have our band on the radio. And just to have to check the longest name be to move them. 12 pixels. Because I'm older now. And we didn't count it when we pasted our logos. So now I think we have are ready to download burners zone as to 100%. And I think that they are. Okay. And as you understand and stroke to this, for some reason, Let's move it. I added this stroke to these frame because it's not in these burners, so I have to move it here. Now it's inside, okay? Because if we leave some frame outside the Varna and then we try to export all these files. In this case, the frame of the band and the frame of the girl would be exploited by several separate files. And we don't want this and I want to move this longer and a little as well. Okay. I haven't selected a logger, select and just an image. Okay. Now I think we are good. And now I can select all these banners that I created and export them to expert. I have to click this. And I may export this with this button right now. And if I want, I can add some suffix, and that will be added to the end of the file names. Usually I put a version of my barns. Because when you create a lot of banners, you will have a lot of them and with, with the time, it will be difficult to orient among them. And in this case, I end this version one, version two, and it will be added to all the banners. I can choose between different formats. Really use being GIF or JPEG. And you can export your files. Okay, so we actually created our first banners, and now we will move on and see what else can we do to make our work better, faster and more efficient. 37. 7.8 Control Panel: Let's make our files look more beautiful because we added a lot of components and they don't look good. Sometimes. For example, we added them over here and now it's a mess. And we can create some beautiful and the logical control panels like this. And when you look at it, you understand that this is a headland, this is description and so on. So to do this, we will use components and outer layouts as well. Actually the we will just duplicate all our components and put them inside such frames with the titles of each point. So let's create the first one. I will create the first one and see how it looks. I will create and being frame and k to be something like these, will feel it. And now I copy paste my ground component k, and I will apply auto-layout to this frame. I'll send this to pardon, to 30. I'll send this these. And I will add some text. Set back ground. And I will end This text into, okay, into this frame. So as you see, this goes not the way that we want, so we will change the direction of auto-layout. Now, I will add these separator. It is just a line. I create a line, I set it to 0, I set it on. And now tone, maybe 10, maybe eight pixels should be probably something like these. I will add some color to it. Well, I will use this one here. Okay. I'm good with it. And I paste it into this frame as well. Now, I said the distance between the objects to name before, mainly 15. Yes, I'm selling this. And one more thing with this line, I want eight to be with around and K like this. And now I will just change the fill color. Make it yellow, maybe 20 percent, something like this. Okay. And I will add some rounded corners. So and I will change its color are the same that towards the line. And just change this color. Here we're now, I will create such components for all our forams of all our components k duplicated. Now I'll delete background and I will based my headline sign there. I will make it component. So I detach it first and then make IT component. I use hotkeys to do this fast. Okay. I will set all the backgrounds to these Carolina. 15 percent. Okay. Like this. Lungs better than that. Yellow column, set and background. And I will write and line. Okay. Now I die cheat and make a competent arms. And I will write, Enter and deaths. Corruption. Then make setting for an item. And as you see there is this dashed rectangle around the image. And that will create such as well, say one as well. I can use these one. Copy paste it. Okay, and these, I will copy this text. Okay, now I want to add surge dashed frame to understand where, where are the borders of my item or person component to component. Again, how do I do this? I know that the size of this component is 600 by 600. So I will just add another frame and put it above this and make the borders. So I have to create a frame, six hundred and six hundred. Okay, and now I will add a stroke. Say turn. I will change the color. One. And I will dashes. Long term. Yeah, something like this. And I will use this setting outside. So this means that I have my rectangle, 600 by 600 inside these borders, so it won't cover any parts of the original image. But if I paste this rectangle into this frame, it will, It won't be on the top of the image because actually it could, but in this case, it should be, it would be inside the image frame itself. So we do, it would appear and the balance would appear, the balance. In other case, we have this. So now we don't want any of these behavior. Actually, we can put it into the frame with item number one doing these, and then move it here to find the center. Like this. But as you understand, if I use this clip component, I don't see the border. Right now. It clips content. If I uncheck it, it the body is visible. And but if I paste this frame somewhere into Varna, it appears with a border. So that's why I have to create another frame that will contain both border and the item. So. I create another frame, 600 by 600 K. And I will put this frame with wander over them and move it like this. I uncheck these option. Now, I move person over here. Make it. These are like this, yes. And now we have this frame and we can move it and drag it into our menu like this. Okay, so here we are. So right now we have our item as we didn't be formed as we had it before, and we'll have a dashed border and nothing is broken. So once again, I created a component for an item or person. And then I created a separate frame with a border around these 600 by 600 square. And I put both of these layers into another frame. And I put this frame into these control. So in this case I see these beautiful menu and this is very demonstrate IV. So I will add some more controls, one for longer. And now for button. Okay, let's put a logo over here. Let's do it one more time. So I have a horizontal logo. I put it here. Then I know. And each 400 by 100, I add another frame for 100. 100. Okay. I add a stroke. One day he was before, I don't remember. Maybe I'm lying these I use this option outside and I change the color to this one. Yes. I add some white as my courses. I'll add some rounded corners over here as well. Now I will move this frame, that one. Okay? Now the feet, now they match. And now I select both of them. And our aim selection, I can dueling this. So now I have these frame that contains our logger. I will make it component and the frame with a border. So I can move this into my control. So as you see, these line is not in the place. I can select it and press up arrow at my Cambodia and in goes like this. You can use this in the frames and where you, where you use auto-layout. So it's pretty useful. Okay, and we have button, I will copy paste button, create a new one, make it that I should make it a component and paste them over here. And I will press and down arrow. Okay, we have a button. So actually we have our, all, our controls. And now I will select all these components and frame this selection. I will make visible our will and outer layout. Now this is an organized among correctly. I will send this, let's say to a T. And I will add some padding to maybe 100. Let's make it less, maybe to 60. Okay. I think it looks okay. And if we want to again set bug ground for these whole block to some image, in this case, we'll have to selling these image option. And then I'll have to choose an image, for example, we will use these one. And there are some options here. We can tile this 100 or even to a 100 percent. So it will look like this. Okay. There is one thing that I don't like over here right now is that all these shapes, this tab attention from these elements and the text is not readable so well. So what can we do? I did it here and the example, we can add blur to these elements. So I have to select all the frames inside it, its frame 96. I select all these controls. And now I add an effect on the ground floor. And I set it to, let's say 25 and just added a loss. So now it looks like a glass and all the texts are readable. Prader? Well, one more thing. When we created our components for texts, we know that we will use them for text bubbles in the future. So that's why let's create the tags bubbles. I want create them right now we already did it several times, three of them. Well, the elderly in this text, it's not that we wanted and go away. And now let's imagine that we just created these bubbles from our components. So in this case, I will frame this selection and make another control panel for them using utterly out using and in using fill-in. Let's say that we will use some gradient. We will cover these plug-ins later. Now, let's just leave it like this. So this is a separate control panel where we have some companies that use and other components like nested components. Because when we will create Varnas late, It's better to have all these text Bible in one place. It's easy to navigate. And for example, if we understand that we don't have frame, a component, a text bubble for some, for some of our banners, we can create it right here. And we know that it will go here, for example, we want to, I don't know, combine these elements with some different way. For example, we want to combine button and description and making them separate. I have to detach this text bubble at first. Now I want select about and description. I framed this selection and I create outer layout for them and I make it horizontal. For example, I want these texts barbel, I will name it isn't bumble. Horizontal to I don't know. And make IT company. So in this case I have another tanks Bible and I know where it is and know where to copy it from and everything is okay. Of course, if I use this marble from a bilayer, changed, it's bad in I will add more padding to the sides. Even now it's look not so good. But for example, I want a text here to be like this. And now as you see, it looks OK and you can use such bubble in your bonus. So let's revise the whole section. If we want to create banners, we have to know which components we will use for it. For them. We will use buttons Who will use texts, bubbles, and background images. Images with people, with objects, with our goods or something. And we combine all these objects into components, then it's a good practice to place all these components into controls, into some control panel. And like we did at these less than and after this, we'll use the components create and our bias in this case. And the end, we have all these components at one place. We can change something over here and we can create a lot, a lot of banners over there and everything is clear. So this is a good practice for you. I hope that you will enjoy it and you will use it. 38. 8.1 Google Banners Intro: And it was finally moved to Google bias. And this section we will learn how to create them, how to create Google display ads, how to create google responsive display ads wants to do Firenze, how two's them. We will learn how to avoid 20 percent of text at your banners limitation. How to create vertical ones, mumbled bananas. How to perform A B testing on your different wireless. So let's go and see how to create Google banners on practice. 39. 8.2 Google Display Ads AKA Banners: Google balance, as known as Google display ads. Let's look how to create a lot of balance using our knowledge. So at first, we will create a control panel to use all these components in our banners. Will already did it before. So we want a repeat, we will just use this control panel that I created before. And we will use all this components in these bonus. So let's start create an A-minus and low cow into ngos. We have 23 different formats here and we'll create all of them. So to do, these will make a lot of rectangles of all the necessary size. We can create the Magnolia or one after another using Frame Tool. Start and end with 200 by 200. And more than from one to another. But to make it more simple, I created preset frames and the library page, and I will copy them and paste into our work area over here. So I k Now we have all these 23 formats then named accordingly to their sizes. So we can create our minus. Okay, and first let's add the background. Will confer a component and copy this component into our parlance. In now we have all the banners field with our background. And let's add something else. We'll start with. Let's start with longer. This is longer for responsive as when these one longer or our regular display ads for our partners. And that's paste it. So now we're done with the longest and we will create actual world preview these logos to see if they look okay in our 100% to scale with the Pixel Preview. So let's say 100%. And I turned on pink some preview. And let's look at all our formats of this work here. Let's start with the smallest. Actually there's logger doesn't flow good, but maybe it is under the legal meaning. So probably this is the smallest size that we can use without losing quality, will be 24 pixel height. So probably we have to remove these logos from these two runners because if I paste these variant, it takes too much space. We don't have any place for our Word tags, Baumol or image. So I remove this longest from these banners and let's look at other formats. This one is too small as well, but I will have enough space and these banner. And probably we have enough space and these minor. So I will just make these lingo longus. And I'll think when good with all these llamas, maybe these two small as well, so I replace them with being alone us. Okay, delete. Okay, now we have all the logos and their places and we can add our text bubbles. I ended loggers first because I want to know where my logo is before I paste text bubble over there. It will be faster. Oh, this yeah, it looks okay at 100%, the text is little. It's not so mood maybe in Slido pixels. So let's try to make the font or less bold set to wrangler and see what happens at 100%. It's still not very nimble enough, so let's add some quality trust. My ambulance make it black. Okay. It's better known but still It's still not reliable enough. Okay, in this case we can scale it down a little. So we will leave this manner with on LI tags, bumble without image. And because the smaller mama isn't readable. Okay, here it is. And I will use different symbols for another Banos. Vertical marble. For a vertical bar owners, there are three of them. This one, this one. This one. We will add our horizontal mumbles to our horizontal. Formats. I'll dig these first and we use it at three formats. It's actually at four of them. Oh, okay. And now we will and the most horizontal verbal told the rest of the formats helps. I will copy these, thanks, mumble horizontal one and paste it into the formulas. And as you see, these bumbles are too big for this mobile formats. So I will leave only text without Martin or K. I will live on headline and a button, and I will make description invisible. In this case. I have space for these Bible. In other case, the homeowner one variable and actually decided to remove this logger as well because it will be better without it. And we can center our thanks bubble and it looks okay. So down with the tags, Bibles, and let's move to our young girl. And then we'll have to find the item name eight person component and paste it into all the formats, except some of them that we decided to live without this person. Right. And now we're done with base 10 person to our madness. And actually we are ready and we can download all these banners and upload them to Google ads. And let's review everything. Once again. I said 100% scale and look, if everything looks okay. Okay, the loggers little blue area, even now, but it's I think it's okay. And we can place these banners into Google ads. And probably people, we'll understand what do we want. Maybe I will make these biomarkers and being around because text is too small. Usually I tried to leave more space between borders and marble, but the text is really small, so we will occupy all the space that we have. But we won't get readable minus, okay? So looks like everything is readable. And now one more thing is setting constraints for the future. And because we created a template and we don't want to spend so much time every time that we want to create these banners and we'll create this template, then we change something and we get a new version of these banners. So to make it work, we'll have to set constraints to all our tags, bubbles, and to all our image. And our components. Actually image components are not that important. And because if you base everything correctly here at the component, and if your majors don't exceed anything, everything will be okay but tags, Bibles and definitely will change their position if we don't use our constraints. So lens and go here and set our constraints. It will be more time Center. This won't be top center. This will lead top center as well. This is tops and travels around. And then we will, we will be so K, These will be ups. And these will be pum, pum, pum, left center. These will be the left center as well. These will be left center as well. Actually, we can make it 25 and being like is. These will be top center. Is it in the center? Yes. Dope center. Top center, top center. So all the vertical formats have alignment top center because we want this bumbles to envy this center vertically. If we add Samson and these banners, and we usually use left center or right cent. So here is left, center, here is from a male left center, right center. These will be left center. So I'm just looking at a which elements I don't want to overlay with my text Baumol. For example, at these image, I don't want the girl to be overlaid with the text bubble. That's why I said, right constraint. This means that if I change some text, this space between the border of the frame and the border of the Bible will remain the same. And in this case, if I add some text, myText bumble will go to the left and it want overlay the girl. So that's why I use these constraints and these case and there is note so big difference, but we will say it comes straight from the left and because it's closer to the lager than to the girls, so we don't want it to mess with lager. K of these won't veer. Left sent. This is left sent. These will be done, say the big difference, let's set, all right, center. And it goes probably than girl. If we're overlaying girl, it won't look so good. But if we overlay with a logo, logo will be completely unreadable. So I changed my mind and I set it to left center. Okay. I send these to left, same terror as well. And these two left center as well. Okay, and my small formats, they will have a left side as well. Okay. These said kind of strange to left Santa and these ones will have because Jains center, center. Oh, okay. So now we set all the constraints for our texts bumbles and these miners, Luke perennial K, to upload them. There is one more thing that we can do. We can add some water to these banners. And actually there is some wander over here, but we can set it to 20 pixels and make it. Okay. I'll make it purple. Is it? Yes, this is the same. So we created a Warner's. Let's make it a little transparent. Okay, and set it to three to four pixels. So the body is clearly visible at all the formats. And we can use these mariners. Does it look okay here? Not so bad. I think it is. Okay. And let's export all these frames and press the X button. And let's say plays them to this folder and press Save. But Figma says me that I have Varnas with such names already in that folder. So let's pretend that this is my second version of our files. All let's actually make it the second version, Let's change something. Here. For example, I want to change my headline. I want to write BI Premium musical instrument. Well, that's their view of them burners. As I said, when I created these decks, bubble a changed a text to be vertical. And that's why the text didn't change in these marbles. So I have to change it manually. I go to my tags and bumbles and I'm looking for this one. And I will change the text malleolus, so we'll write BI, Premium musical instruments of k. Now let's review them bonus once again. Okay, so I think we are good. The only thing is that as I see, our border overlays the logger. So I want a logger to have a little more spacing in the left. So I will create it and go to my logo component. And I will make the picture a little smaller. And I will put it more to the right. Okay, I think these will be all okay. And now let's get the vector R1 by others. And now I see that my borders don't overlay logo. So I'm good with these banners. And let's export them. And this is the second version of my minors. So I will add this suffix ops V2 and export. I export this balance to the same folder as it was before for this example. But usually I create separate folders, one folder for version 1, 1 folder for version 2, and so on. But this example IS save all these files, write them. And as I said before, if I create different versions of my banners, I create separate Figma files. In this case, I will have different files of my banners at my library. And I can always go back and see what I created before. And I can reuse it, changing or duplicate. And so right now I create a duplicate of my pile. It is pretty big. That's why it takes some time to duplicate it and you have to wait for a while. Okay. So it says a Copia and if it was a file with my bonus, I would call it v2. It would say runners for Google for some project, version two. So it depends on you how to name your files. So that's eat with our Google bonus. We created all of them. And in the next lesson we will look how to use some tips at some of the formats. And then we will see the response of display ads for Google. 40. 8.3 Vertical Banners Tips: Deeps for vertical bonus. We already made a special texts bubbles for them with each word from a new line. So these bubbles slow, look at vertical four months because we can make them bigger. There are some other deeps. For example, if you have too much free space at your vertical bars, you can duplicate item or person and make it bigger and semitransparent. In this case, it will look like kind of reflection of your item and sometimes it looks good. Let me show this to you Actually, this is made at this example. So it looks like this, like kind of reflection. And to do it you just have to duplicate your person item layer, take the one that is behind, make it being like this or even vein. And there is a person. Okay? We will place it like this and make it, let's say 25 or 35, something like this. So these add some dynamic to this banners and they don't look like now there is too much free space and we didn't know how to fill it. And let's look how it works with another. For example, the head phone. For a headphone, probably we want it to be less transparent like this. Okay, So it works as well, but with the headphone and there is too much space in the center, I'm probably we want to move them a little, something like this. Actually, I can do the same with some horizontal or formats, but usually they are more busy with the content. And those periods spaces appear at vertical balance. Okay, let's set our girl back to them burners. Okay. There is a nonce and go, Let's see. This is another image. And as I've said before, You bet, delete these unused images from your components. If you just have a file for a single set of banners for a single version and always replace them. Because when you add invisible images, make them invisible. They are still processed by Figma. It slows down your file. And in our case, I just let them fall to show you how this works. Okay then, and there is one more tip for radical bonus. Sometimes the buttons on them look too small, like on these won the case. You just can move button from the text bubble example, put it separately. And I'll center it. And I will make like these little smaller like this. And I make button visible in this. So it looks okay, but the button is being when your watch you been at a 100 percent scale. So you can do the same with some of these bonus. So these are some tips for vertical banners for Google ads. 41. 8.4 Mobile Banners Tips: Deeps from above. And here are some tips form about balance as well. I call mobile bananas three formats, 320 by 100, 320 by 50, and 300 by 500. Last one is placed in mobile apps usually. So here are these four months. And what can we do with them? One option is to create less text on them already did it. So we moved the description from the texts bubbles. And now these banners are readable enough. But there is another hint that I didn't show yet. And Google allows you to applaud double sized images for these 34 months because they will look better at high-resolution displays of modern smartphones. So you actually can create double size Banos. It, they will be since family 40 by 200. Another will be 440 by 100, or 600 by 100. Okay, so you can use these three formats, but there is one important note. You can't applaud Denny's majors. Three, these images via Google Ads Editor. You probably know that we will add editor is a software that you install on your desktop to a parade, we will add some more efficiently. So you count, upload these double size the majors through these tool, you need to go to your web interface and open your ads, the app, and upload your images right there. So in this case, they will find and you will have your images of a much better resolution for modern smartphones. So these are deeps for your mobile bonus. 42. 8.5 A/B Testing: The great thing about using components in Figma is that you can combine them anyway that you want so you can create so many banners as you want. There are two main variants to braid bonus for AB testing. The first one is to call P your initial file, change something and create new virtual balance or create everything and, and get a very new variant bonds. The other way is to create a template where you can test some elements of your bananas. Right from the beginning. We will cover both these methods and let's look at them. The first one is very simple. So when you create your bananas, you just call PEA or duplicate your file. You open a new one, name it with the new version and change your bonus to whatever you want. In case you have. You filed. Hopes. And I will create, for example, of V3. I put version at the beginning of the file so it's better visible here. Okay, so I created this file and now understand that the changes that I will make the list file, I can always find them in it. This is very useful because if you reuse a one single file, it will be difficult to restore some versions that you made sometime ago. So my suggestion is when you create a different set of wireless, always create a new file for them. And you will just have a lot of files in your Figma account. But it's okay. The advantage of this method is that you can always find your file and see you what was their change something if you need. And if you change one single fine again and again, you want to able to do that. Okay? And the other way of performing A B test is to create as set of bonus with different elements right now in one template. So let's look how to do this. I will open the template for Google ads and you have a copy as well. And as you can here, there is some potential panel and there are three versions of texts. So this template is responsible for a, B, C, testing of different texts as at your bio. So you just go here the control panel and it says enter the headland a and type of LNB, enter the headlines, see. And you can write your headlines here and the job descriptions here. But the peak share will be the same for all volumes. So if you want to change something, I replace born a girl. Xing goes to all the buttons and then I have all these formats. I don't want them and run AB tests with them. The advantage of this method is that it's already preset for a bad taste. And some continental veal barns, some thin or like a text. Because it's a good way to test something on the abandoned but not the whole different bottles. Especially if you run your campaigns for a long time. My suggestion is great and very different banners at the beginning, they can be completely different to understand to which of them will work better for your audience. But when you find them, after that, it's better to create some elements of your bonus to get better results. Because if you change everything you want, be able to know what exactly brought you the results. Okay, So these are two variants, two ways to perform your AB tests. You can combine them if you want. You can create your own template, for example, with different background majors, for different variants and so on. So you can play around with this anyway. You have access to our file about Figma from academia. You have access to this file and count and see how it works. Actually, we will look at it closer at this separate less than K, create a great bonus and we will move to the next lesson. 43. 8.6 Google Responsive Banners: Responsive display ads. We came to one of the main formats of online advertising right now is responsive display ads by Google as the opposite to our original bond of display ads. And Google created a format that can be used more automatically. And they combine different sizes of images and texts to feed the best places at their inventory. And Google combines different variants of images, texts to feed the slots at the inventory. And it can look better than just these bundles because it can adapt to the side contents, to the content of the placement where we will place, places your Varnas. So for this purposes, they created responsive display ads. And what do you have to create? You can upload images with these ratios and two logos with these ratios. And you write your headlines and descriptions. And Google will combine all of it to get the best results. There is one rule that you can't put more than 20 percent of texts on these images. So texts, texts must cover less than 20% of these images, including logo on these majors. I mean that you can have as much text as you want at these logos. These are files, a separate logo files that you will upload to Google Ads as a separate files. But when you go to these images and you put your logo on these remainders, these logos count in total 20 percent limit for the whole image. So we'll have these two formats. I start, for example, with six hundred and six hundred and nine, kinda 55 by 500. Or you can double it and create, for example, one hundred, ten hundred and twenty byway in 1020 and 1, 0, 0, 0, 0, 0, 90, ten by 100. And this will be bigger files, but I will create these smaller versions and they will walk six by 600. And I will use all the components that we used before in our display ads. So are most of the background on that and paste it into my partner. Well, care which two feet? Okay. Scale tool. And I will copy all the elements as I did before. So I will just copy paste those components from here because I already scaled them and we don't have to spend time looking at how I scale all these elements. So I just copy paste them. These ion the same element that I had before. Now, there is one more thing that you should know and barges taunts if display ads is that Google doesn't allow you to use buttons on these bonus, sometimes pass moderation and unwell, but usually they don't. So that's why I made buttons invisible. And these tags, Bibles. So these buttons should puzzle moderation easily. And if I leave buttons here, probably Google will reject those images. So actually, here we have our files and we can use them in our Google ads. There are two more important things. One is how to award 20% of text tool and another is how to avoid cropping your image. And Google says that it cannot crop up to 5% of your bonus from each side. So to do the, to control this, I created such such rectangles that where 50 percent from each side. And you understand, if you put some important information into these areas and they might be cut. And to create them, you can create rectangles. So if I have these bond, 955 by 500, and you have to create a rectangle, vertical rectangle that is 50 percent of these width. Actually, I don't know how wide is it, so I will use these fields to calculate it. So I just based 955 divided by 20, so it will be 5%. And Figma calculates this for me. And I put 500 here because I know the height of my Varna is 500. Now I change the fill on from solid to image. And I'm happy with these chairs. I just change it to tile. Maybe let's set it to 75 percent and make it 35 percent of capacity. Now, I copy place too it and I put it above the bond on this one and this one. Now it can all get these rectangles and unite them. So I have these Union and have this frame where I can check if my Banos feet 5% crop them. So actually when I created this file, I understood that my lower graph was cropped. So these icon was somewhere here and I just moved it to the right. So now it's again and the logger is cropped by these 50 percent. I will just copy these union from square one and paste it or say it. Okay, it was pasted from here. Well, okay. Well, put it above. So now I see which area would be groped by Google. 44. 8.7 The 20% of the Text Rule: Google has a rule that you made just for your responsive display. Ads should contain not more than 20 percent of text. So this means that if you have an image for your responsive display ads, you have to make sure that not more than 20 percent of each area will be colored with the text. So if you have an image for responsive display ads, you have to make sure that text doesn't cover more than 20 percent of its area of a square. And let's see how to check this in Figma. And I have another task. I want to check. If I follow 20% of the text. Okay, I will paste the Boehner's and I will use the following way. I will cover each one with greed. So I will grade agreed with this. And this will be five-by-five cells. So I have to calculate how many cells covered the text. And if I want to be under 20 percent, texts should be not more than five cells. So five cells are about 20 percent of that bottleneck square. So I will create the grid at first. I will create two rectangle shapes. And as long as this is 5, 600 by 600, I know that I should have rectangles all the 120 by 121 fifth of these dimensions. The one I unite these shapes. So now I have such an image. Now I will export it as an image. Okay, I will put it to these older, actually the one that is better to name your file before expert in. It will be we'll just g, six hundred, six hundred by 600%. Chess or cage. And the exponent these files, so it will, has some understandable name and now I will create another frame, 600 by 600. Okay, I'm going to fill it or a moment, and I put these all bona into this frame on K. I feel now actually before fill in, I have to create another frame as we did at some previous lessons. I'm well, and one more frame, six hundred and six hundred and I will fill it with my transformation. We use email and sending. And I know that these should be 1 fifth of the violence. So I will get with conduit for scale because I already created it as a 5 percent of my initial Barnett. And I put these into the frame and make it semi-transparent. This. Okay, so now I can count how many cells contain texts, 123456789. So this is too much. I understand that these image contains more than 20 percent of text. So that's why I have to scale these one. I will scale blogger. And to make kid only whole, smaller. Well, actually I can't do it at this point is so I have to do it at my unknowns. Okay? And I have to scale these texts as well, probably to the science one that's now, it's 12345. It's, I think it's still more than I need, but not so much. Maybe I will make this one a little smaller and smaller as well, because I will have a name of the shop as a separate field in response. Display ads and Google there is this special field to set a company name there. So I think I'm okay with these labeled end. If I count the cells, probably it will be one, maybe two or three. Probably it will be above five full cells filled with the text. Okay, and we can do the same with this image. So first, I will create my cells. They will be 55 divided by five. And I know that it's 120. No, no, it's not a 120. It's it should be one unfounded because the heights of, because it is 10, is 500 pixels. So I'll do the same as I did before. I will create an greed for these horizontal bands as well. No, you don't mind this image. We'll rename it to its Tn by 500. We'll choose. Yes, thanks. Okay. And now I create a novel the frame and just frame your selection tool will be fast. And I create a nod that I know I will do it once again and selection. So this will be in the main page on this same size. You'll get above mine. And I, elite. Why? Just made email from them breed these tile, it was sent and to make it a percent visible. So let's count the cells. 1, 2, 3, 4, 5, 6, probably more than five in general, if it's difficult to count these cells, you can make v is to 50 percent and now there are ten by 10100, so the text should be not more than 20 cells. So you're kinda colleagues. It's 1, 4 or 7 lab for teens, 17, 20, 21, 22, 23, 24, probably about 24. So it's still more than we want. So I will now reduce the size of the barn ball LD into play with these won't be in that remain the arm of ideas that are longer and Leto as well. So probably I will feed our 20% rule if I recount the cells. Okay, So this lesson, we learned how to create a majors for google responsive ads and how to check if anything important will be cropped or could be cropped by Google. And this 50 percent at each side. And we learned how to make read, to understand if our text follows the rule of 20 percent text, all of the calls. So that seat and let's move to another lesson. 45. 8.8 Google Ads Template File Review: As a bonus of this course, and give you access to two files, to two templates that help you to create Google banners and Facebook bonus in a scale. So I sell this templates for 79, 99 each. I decided to add them to this course because anyway, I teach you how to create such thin, so I just give them to you as an examples and they're pretty good and you can use them right now. So you can create a lot of banners for your Google Ads, for your Facebook ads, even without the whole discourse because these templates already do this. But of course, we're here to learn and we had to understand how this works. And you can make some changes there and you can use and reuse these files. So let's go and see what's inside. Hope you will enjoy this files as well and probably you will modify it for your needs. Let's go to the file with Google banners and see what goes on there. So I have this file opens Madonna's from Google ads, and there are three pages over here. There is a page with instructions how to use it. And let's look at it. There is some cameras. Notice because we sell these files and so some tips how to use all of these, how to use Figma. There are several instructions, I will, several types of recovered, most of them in more deep. And there are some tips how to use this file to create the bonus. So there are some tips and some explanations. Want is gated by different areas of the files. So let's go to actual pages with our minus, there are two pages left, whiners and responsive ads. So let's go to the banners page. We have several errors. I have settings, we have bubbles, text bubbles for three versions of texts. And we have a frame with all our burners where we can look at them, check if everything is okay and download if we are okay with these banners. So let's look more closely. So we have three different headlines and three different descriptions. And we'll have one item or person will have button. We have social proofs over here, log and bind ground. So in general, we can create three sets of balanced with different texts. We have these lines that measure 500 pixels. They located here to show which width of texts will look good at bonus. As long as these texts have outer width option. Without these ruler, we don't know which width will be good and if it will be too big, for example, let's make it like this. So it exceeds 500 pixels a lot. So these mumbles for the first version become too big. And as we see these is not varying good doesn't look good. So we will marine and back. You can use this in your files as well. You just have to measure and understand which when you are able to use in your textbook marbles so that these texts bubbles and very big. So they don't exceed the banners or something like this. You can do it in. You just can make several examples and, and understand what to do with them. For example, right here, if you notice these texts is little bigger than this one. So I created these texts, then create some texts bubbles, then scaled them a little down and paste it into the banners. Then I understood that this is the maximum. With that, I can use an I understood that. I don't want to use text wider than this. And I said for hundreds, big source for as a ruler as an example. Okay, So I can use three different texts, I can use three different descriptions. And that's it. There are two social proofs over here. We didn't do them in our previous lessons, but you can do something similar to this for banners to make them look better, to convert better. So this looks in the following way. These labels and go to the Banos and add, just add some social proof to them. So you can make any components that you like. You can add social proof, you can add some comments, some reviews, or whatever you want. So you can use such file to create. For example, AB test and banners with three versions of texts. Or you can create something similar way. You will send different items or persons are way you said different backgrounds. So obviously this file uses the same background for all our parents, but you are able to create anything you want. Okay, now we're done with our display ads, with our models. Let's look at responsive display ads. What do we have here? So actually we have these. I told about these before. We test not only three tags, but we test three different backgrounds. When you use a majors for responsive display ads, it's very important which majors do you use because these are not just banners, but these are different combinations of banners and texts. And there is less text and the, on these banners, because there is a limitation of 20% of texts on them. So that's why images are more important to responsive bananas then at ordinary banners. Okay, so what else do we have here? We have three texts, three headlines and descriptions. One item or person have a logo to watermark our images. Have era with tags, bubbles. Then we'll have a special area for logos. You can add a square log, All right here, and a horizontal logo right here. And after that, you get four different versions of longus in different colors. Of course, you can change these colors if you need. So at the end, you have these amount of different images and logos and these are transparent logos. I prefer using them because they fit any template that Google uses inside it's responsive ads. We have these review that shows how Google can cut up to 50 percent from each side of your banners. And we understand that everything looks good here and our logos are not cut and our text bubbles are not caught by this 5% rectangles. So it looks like these texts. A look, okay? So you can use these templates for your banners. And you can create your own templates where you can test anything you want to. You can put anything you want. For example, you can add some components to check if your text fields 20 percent rule. Actually, when I created this file or this version of file, at first, there was no rule of 20 percent text in google. This rule was only in Facebook. So that's why this version doesn't contain check for 20 percent texts. But I added it to the next versions. But you can train yourself and do it by yourself, by yourself. So we did it at our previous lessons. Okay, so that's it. As you see when you understand wants to go on here, it doesn't look so complicated, but when you look at these for the first time, it seems a mess. It seems very complicated. But actually when you do it by yourself or when you just understand how this works, this is not so difficult and I will show you how I organized the majors over here. So this is the initial image component and you have to put your background into this frame. Then this frame cuts this image to the size of 1280 by 720. And then it creates these two variants of these background. And you actually can change some position if you need, for example, let's move this dollar sign to the center. And as you see, all these banners are affected and these background changes. After I make some changes right here, if I want, I can add some bug ground blue over here or whatever. I want to make these banners look better for me to fit my goals and all the texts and go from these texts bubbles so you can see that everything works. Okay? I made these banner with a girl on purpose to show you that you can even use several characters at your bundles, especially for these, I created two versions of each of these banners with a person or item and without them. So you can use any version of these files that you want. So I think we're done with our template file. You are free to use it. You can adjust it for your needs. So go and try it. 46. 9.1 Facebook & Instagram Banners Intro: And now we're going to learn how to create balance for Instagram and Facebook. As you know, you can place ads for Facebook and Instagram from one and the manager and their common sizes and common practices for Instagram and Facebook. So in this section, we will learn how to create all these banners. We will learn how to grade minus four stories. We will have some tips for stories. We will see how to deal with 20 percent text rule that is still walk in and Facebook, despite that, it says that these rule is gone in 2021. We still have to think about this rule. And finally, we will review how to use a bolus file with a Facebook balanced team plate. So let's go and see how to create reusable bonus on practice. 47. 9.2 Facebook and Instagram Banners: Let's see how to create biomass for Facebook and Instagram. Where the page facebook bonus. As we know, we create my list for Facebook and Instagram with the same formats, so we will name them just Facebook banners, and we understand that you can use them and Instagram as well. So what do we have here? We have a control panel, almost the same as we did for Google, bought us with some changes, some bubbles, and actually several formats. I want create a new control panel for Facebook or for this lesson, because I already created it and we did it several times. So I will just use components from these control panel. As you see, there is background with below effect. It's set to 20. Okay, I think I'm good with 2ND. And we have a headline. We have description, we have a person at a logo, have stories, arrows. This is an element, four stories. This element motivates people to swipe up the story so you'll get more results from your advertising. We will have a separate lesson how to create different kinds of these arrows. And we added some social proof to this virus. So these images, and we have two tanks, the bubbles, as you see, there is no button overhead because Facebook doesn't allow your images to have buttons on them. If you create images with buttons at and applaud them into Facebook, it can disapprove your ads or even restrict your account. So better not do that. Because Facebook has its own buttons around your images when Facebook shows you ads and we have some social proof and we have several formats over here. As you see, there are a lot of them, but there are two main options to my invariants for Facebook banners. These is store format like this and a newsfeed. You can use different majors in your news feed, but the most common is these one, SQL one. But if you want, you can use such images. For example. More horizontal or vertical, but not as symmetrical as stories. And we will focus on the main format, on the square one. If you use psi formats, you will definitely understand how to create them after these lessons. So what do we have here? Actually, we have to square four months. Why is so is because Facebook Places your ads in different placements. Some of them newsfeed, some of them are stories. And the right column in Facebook on desktop version of Facebook website when people use it from the desktop browsers. So let's see what's the difference will go to Facebook and business website. And this is how an image looks at Facebook news feed and showed for mobile. But as you see, the picture is pretty big and it will be clearly visible even if you put there some small elements. But let's choose Facebook right column. And here it is. So these is much smaller image. So if you put here little elements of texts or something, they won't be readable so well. So what will we do? We create another image with a bigger text. So as you see, this image doesn't have description on the headline and it doesn't have a logo. So let's create these minus from our components. I create a frame of 180 pixels. Square one. Fill it for now. Okay, I will copy paste my background pasted here. Okay? We will add some longer window here. Copy our horizontal logo to this corner, make sure it's pasted, okay, because I will add more to this image later. And it didn't do it here, but I will do at our lesson. Okay. I will add text bubble. This one. Make it smaller. I'll probably longer, smaller as well. I'll do it later. Okay. I will. And I add some social proof, social proof horizontal component. I paste it. And I think I'm okay with this. Before creating a component from these banner, I will rename it. So tone be Facebook. Ten hundred and eighty, two thousand eighteen. Maybe that's it. And I duplicate this one. And before making it competent because I will use the same for the right column. Now, I mean this component. Now I mean these component and the folded, I remade, rename it to right column K, make IT component. As I said, these texts wanted the visible and the right columns. So I'll just hide description and make these headline bigger. Okay, so I think I'm good with it. And let's create a story and create a frame. Size. Feel it. Go from my own background. I can put it like this or I can center. It, will use this text bubble. And the other one. Not sure about the size yet, so I'll just make it like this for now. Best person here. Let's center these and let's make them bigger. Okay, maybe even like these. Okay. And I wanted to add star 18. Social proof horizontal and place it here. Maybe I made them even the same width. There is one thing that I don't like in the star rating is, you see this is more black and this is more gray, a font color. So I will make the font of these two components lighter. It first, I will okay, can do like this, terrifying this text and use color picker to okay. We can check if it is the same color. Just seven Forty-seven. Forty-seven. Let's check its forty six forty six, forty six, almost. So we can make this text of this caliber, but actually I would make this star styles border the same color as well, so I can use selection color. I applied style here because I copied this tolerate in from another file, but I'm assuming this All right here. And I will detach in this style and rank the color. Was Forty-seven. Forty-seven, Forty-seven. So now they look the same. When you copy some elements from other files. Professional designers usually use the Styles, so you don't have just colors here, you have styles. So these was some style and it was applied to these elements. But I don't want the styles to be here anymore, so I didn't touch them and just use what I want. I want detention this style as well. So I made these social proof to look in this same style and the same colors that I used in my text is good. And once again, I didn't create these storage and from the scratch, I used it from another file that was created by some design. In this design I applied styles to these stars until all his objects. And that's why I. I've seen not just colors, I have seen styles over here, but now they look the same. But I think some of this is not centered. This one or this one. Okay? And now I'm making them the same. Okay, Now, I'm happy with these star rating at my story manner. What's left? And I will use these stars that motivate people to swipe up our story and just copy it from here. You can do different indicators if you want, not just these arrows, you can create whatever you want. So let's review once again, what did we do here? So we created three variants of banners, 14 stories, one for newsfeed and 14 right column on the Facebook website. We didn't copy these formats. You can do it by yourself if you want. In some cases, these formats look better if you have some special images that better feed to the sides. But usually I use these square format. It's more universal. And as you probably know from the last year, Facebook allows you to choose which image to put at each format, at each placement or Facebook. So you can upload this one to all the formats. Then you can apply these image two stories and then your applied this image for your right column. So in this case you will have a single add, a single ad copy that covers all the placements and all of them will look good. And if a place your ads, for example, two years ago, you know that there was only one size of images at the ad, at one ad copy, you had to create different ads for different placements and you had to create separate ad sets, for example, one ad set for, or even one campaign for story, another campaign for the News Feed. So that times you had to put corresponding images to different ad sets of campaigns, then you had to disable some placements. So you didn't want an image for news feed of the right column to appear in the stories because it won't look good. But now you have control of all these elements and you can create one single ad and applaud all these three images into these ad. So I think this is much more handy than it was before. Actually, that's it with creating our basic images from Facebook banners. In the next lesson, we will cover some more topics on that. 48. 9.3 Stories Preview: Let's see how to create for at least Dick preview for stories. So here we are. And this is a frame that we will use here. Actually we want covered how to create it in details. If you see there are a lot of different elements and we hear their names as tags. There are some elements of arrows, of some circle of dots on everything. And there are some components that I used here that you can change. So if you want, you can put your logo over here and your Instagram username. So this is a preview for Instagram. But it looks almost the same in Facebook with the little differences. So as you see, there is component over here. So as you see there is a component over here and you can change its name to whatever you want, and it will go to the preview. Instead. Name, okay? And if you want, you can change a logo over here. You just have to bind longest component and replace this image with something else. For example, I added another image and I make it visible. So from this point, these are the Kader, my faster preview. So I think this is pretty simple. Now, let's look how to use it. You just have to create a copy of your store banner sewing go here and we have forgotten to name it and make it component IN name in, from there. And name it in B. Okay, like this. And I make it component. I will duplicate it and move it here. So I have to put these Instagram user interface above this banner to understand how will it look in real life. So for this, I will create a frame that will contain both these Bonnie and duplicate and these Instagram using this. So I just framed this selection. So now I have a frame and I can duplicate this thing and paste it into this frame. So now you see I have two layers over here. I just have to make them heat size, okay? Like this. So. Now you see that these longer perfect sound doesn't look good here. And I don't think that there is a good place for these Logan, this banner. Probably if we create a square version, we can put it somewhere here or we can put it in the background, for example, something like this, but not here. Actually. Let's put it and the bird ground and see how will it look. I'm okay. I'm go to My Stories burner and I delete these longer from here. Now let's make a copy of this longer. Need these image. I want. Duplicate the component of the longer I will use. Over here. Move it outside and leave only the symbol. So I will click on this image like these and make IT management being can I put it into my K laying these? I make it didn't linger. So this is my longer and probably I want to live visible. Okay, I will move, this image, shows a write, something like this. I will add mumble over here. And let's set it to 30. Okay, I'm good with this. So as you see, we have added these component of a longer. And this looks in the same style with a longer but we don't have to put it right on the Maryland because I don't think it will move here. And let's see in the preview, I think this is OK. So now you understand how to use these story review and you will know how imbalance will look before it. Pamela's them to the Facebook Ads interface. 49. 9.4 20% of the Text Rule (2021): There is a rule and Facebook, there's allows you to put only 20 percent of texts on your image. This means that only 20 percent of the image area of its square should contain text. Actually in 2020, facebook said that this rule is not applicable. People in the market say that this rule hasn't completely gone. There were some experiments that show that still if you use a lot of text at a creatives favors book will decrease their reach. So I think that it's better to follow this rule, especially at your stories and at units Feet formats. Sometimes it's hard to avoid this rule at your right column images when you want to put some texts there and you want it to still be visible because images at the right column are pretty small. But for stories and news feed, I suggest you to follow this rule as it was before. And we have some tips and techniques how to calculate which amount of texts. And do we have one of them you have seen in the Google banners lesson and another one is right here. So let's see how to calculate this. Let's go and see if our majors follow that 20 percent of texts rule in Facebook. Okay, So we have several tools for this. Let's start from the beginning. We have some banners and we want to calculate if they are okay with 20% of texts Joule. So the first method is to create these greed and to count how many cells contain the text. So if I have a square logo and I have five-by-five grids, so it's 25 squares in total. So 20 percent is 1 fifth of them. So if I have tags on five or less careers, I'm okay with the rule. And you've the text is more than on five cells. So in this case, so we have to decrease the quantity of the text. This is not exactly how Facebook operates it. They use machine learning for these, but several years and go facebook had the same tool to understand if you image feeds, this rule and the beginning, Let's duplicate our banner. And now let's end this grid. How to do it? I have bottom square, one of these dimensions. So I want to create a little square that is 1 fifth of these length. So if this is 1000080 miles square should be our create a rectangle. I don't know, but I can calculate it right here. I just, I just put 1080 divided by five and it says me, it's 216. Okay? So I put it like this. Now, I duplicate this image. Surely this is not English yet, but we will create one. I select both of them and unite them. Now this is a single object. Now I export this as an image. I can use andrew format, but actually it's not that important because anyway, we will use it as a semi-transparent image. But for now, I will export these. And actually it's better to name it with some understandable way. For example, I used it here, will be chess 1081000080, and I export this image before using it. As you probably understand, we have to create a frame above our component and even one more frame. So now we have this frame inside a frame inside a frame, but we need another behavior. We will put it like this. So now these frames are in the same place. Envelope put these above our banner component. So this will be our chairs. Agreed on. Just read. Now I make the fill and visible and fill it with my image that I just uploaded. Okay, so now I have to set another option. It will be tile and it will be a 100 percent. So now you see that I have five-by-five grid. Now I make it semi-transparent and I count, I can count how many cells and doing half under the text. So if I count here, it's probably we can count it together one cell to 2.534. So I think there's been a follows the rule. And I can even make the tanks being a. So I can go here and scale these things, the Bible to make it bigger. And I think we are good with the row. Let's see another way, or square minus I create a duplicate of these loops. Okay, and if I have a square button, I have a more easy solution. I just have to add. Those frames, random selection. Random selection again, 30 frames. Now I fill it. And now I use the default image or fill-in. Actually, this is the chess image, so this is good for me, but as you see, it doesn't fit my size. So I have to choose Tile option. And now I need to understand which scale, scale to set. I will leave this formula for you. If your site is, for example, 1, 0, 0, 0, 0, 0, 0 and 80, you have to multiply it by 1.25 and it will be your scale. So I just on this and as you see, I have five-by-five dimension. I will make it semi-transparent. And we've unless. And now I can count how many cells are under the text as well. So I'll leave this formula to you. But these walks on the Foursquare images, because if you have this rectangle image, you will have to create these kind of cell. So let's do it. I will duplicate in these file frame selection. Frame selection. Now I'm all of these and these on top of it. And what do we have? Actually, we have to create this same thing as we did here at the first example. And now we will create a rectangle with sides with is 1000 and divide it by five. And the height is 1920 divided by five. So here it is. Now I'll make both of them single object and x pub them. So now we use it in the field in all of these name. And use option with 100 percent. Now we'll make it semi-transparent. We can name it greed. So now we can count how many cells contain the text. 123, maybe four, maybe five, sorry, I think this is okay. This manner is okay. And we have another variant of creating some object that helps us to understand if our bonus. Follow the rule. This is to create a single rectangle and to see if the text is placed in this rectangle. So let's look at the example. We have a banner on 1080 by 100 thousand 350 pixels. It's like these. And you'll have to calculate which sides of these frame do we need to track this rule? So I have to do some math over here. We know the ratio of the bond is 1080 by 1, 0, 0, 0, 3, 100, 51.25. If we name a loaner site. So B is the shorter one. So a equals b multiplied by 1.25. And from the other part, we know that the square of these rectangle, a multiplied by B shouldn't be 1 fifth of the square of our total banana. So it's these. And we have a system of equations. When we solve it, we get that a equals to 600 4 and b equals to 400, 83 approximately. And when got a rectangle, and if we check its square, it's almost the same with 1 fifth of the whole banana. So we can create these frame and we can, let's create it. Create a new frame. It is for hundreds, 38 minus 604. Now I make as stroke, let's say 20 and 21, okay, 20 is okay. And I will make it in the center of my frame. Okay? Now I want, actually I can leave these black, but I want to make it colorful like this. Make it colorful. I will use Angular fill in, and I will use other colors. So I have to add more points. And these gradient. Some thin lines. And this spectrum. So n becomes colorful, something like this. Okay, so now I have a frame to at least see probably this text. And this bond is okay because almost all of this text feeds into the banner and there is an allele left, but there is a lot of space in here. So probably this band is okay. And what else do we have? And we have different formats and we don't know which formats and which sizes of text do we have in advance? We know we'd on after we create the bonus because textbook bubbles can have different form. So let's see this example. For example, we have this very horizontal kind of tags bubble. And we understand that these frame doesn't help us to calculate it very much. So in this case, we will have to create another frame that will be more horizontal, but still will take 1 fifth of its square. When you create these frames. For several bonus, you understand that you have to calculate the size of the frame for each size of banner. And it's not that easy as you see, we have to solve this system of equations. And I don't think that you want to do it all the time. So for these, I created a Google spreadsheet that calculates these for you. Let's look how it works. Now you have this file and when you want to use it, you have to make a copy because you will have v on the axis. So I make a copy of this file. I put it in just to my drive. And the copy is created. Now I can use it. So what do I see here? I see some columns and some rows, the columns, some settings for your buyer software rectangles and the rows are for each size of violence. I created several formats for Facebook and Google banners. And you can bind calculated sides of rectangles already. And you can get your rectangle width, and height here. So if you have a banner of these size, you will have a rectangle of these sides to get a rectangle that covers 20% of these square. Let's go to the file and see how it works. For example, we will use a story. It's 483 by 859. So I will call PMI story banner here. And I will add a frame, frame, this selection. Then I copy this frame to here. And I wanted to fit my size. It's my 859. Okay. So this is the frame. What is you see the shape of this frame doesn't follow the text and it's not really that easy to understand if this text is the rule. Especially for this, I created some more columns way you can set a ratio of your rectangle end, get new proportions. For example. I want this ratio to be less vertical, so I will set it to 1. Here, 1.3. It shows it without okay. This is okay. So I have 730 on by 565. Ok. Hopes. Okay, and these feeds my text much better. And now I understand that all this text goes inside the frame. And I understand that it follows the rule of 20% of texts on the bonus. So you can easily use this file. You can set any ratio of sides of your rectangle right here and you will get your sides are rectangles. These Vanna format. I think this is pretty easy. I left you a lot more rows over here so you can play around with it and use this file. Okay? So in general, we know that Facebook has a rule of 20% of texts. Actually, facebook says that it cancels it. But As for now, even many of Facebook documents say that this rule still applies. And as people from the market say this is the rule didn't go completely. So that's why I want to check if our majors follow this rule. And it's better to do it before we upload these images into Facebook. So this one is so time-consuming and we have two options over here to do it. On. The first one is to make these and greed and to understand how many cells contain the text, we have two ways to do it, but I prefer this one because it is universal. And when we create small rectangles to use it in the shape of our BATNA square minus we'll have another one to use the standard fill in option. And to use these coefficient to understand we scaled to set for the title of this image. And we have another option to create a single frame and to visually understand if our text follows the rule. So I think you will be good with each of these variants. And you should understand that you don't have to create all these frames each time. Because for example, if you have these formats for stories or news feed or right column at Facebook, you will usually use these shapes, these sizes of banners over and over. And that means that you can create a component that will use these images, that we'll use these grids and you don't have to create it over and over. You just have to create it once and then reuse it in your files when you need it. And if you create these type of frame, probably you just have to adjust ratio of the frame and you have these Google spreadsheet to do it. So I think we're good with this rule and let's move to another less than about Facebook ads. 50. 9.5 Stories Swipe up Markers: Now let's see how to create stories markers that allow you to motivate people to swipe up your story ads. So let's go here and see our three examples. We have these one that we used before in our balance. So let's see how to create such thin. Actually this is pretty simple. There are just three United lions or different size or I just created one of these. Okay, Let's main kit online. And all these. Okay, and we will make these around as well. I select this dot and use the join option. So these looks similar, maybe it's being us, so let's make it thicker than a just copy paste it. Make it smaller. Copy-pasted. And make it smaller. Maybe even like these. So this is a little different shape. Now, I will make it white. I will add some transparency. I will add some shadow. And now they're look very similar. And some inner shadow. And I will set in a shred of two white. Okay, Now this looks similar to what we had before. If I want, I can unite these shapes and I have this arrows. Okay? Now let's move and see how to create another motivators, for example, such ground stations. Okay, and let's see how they look at Barnum. Let's look how to create it. As you see, these are pieces of circles. So I need to create an ellipse. I will say it total, let's say 100. Probable, it's not enough. I will just scale it globally to these. Now we have to create those arcs from these circles. So I have to find these. Yes, here we set it to these and I'll send these thin. Ok. Now I copy pasted and I scale it down. I will make it a little thicker. Okay, now I copy paste it and make it smaller and make it thicker. Some of these case I probably want to make this smaller to, to be closer to the inner one, then to another one probably to make it smaller again. And making these thin, they make these little thing or two. It's too thick and now it's better. So again, I can make it white, semi-transparent. I can unite these stroke. I want to move it, make it white, and make it semi-transparent. And I will add some shadow and just leave it by default. So now these things look similar, even these I'm being and I can create a component with this simple swipe up text. For these, I will just use text because I'm pulling this. I use a font or rock salt as you see. You can use it as well. And I will create these arrow. I can go here and choose an arrow and make it thicker. Okay? Now I go into edit mode and I set it to curves. These. Everyone legged this and its most simple. Okay, I just have to create frame. All these things. On our selection. I will change its color to purple. I will add some shadow. And I will change column this shadow too wide and set its transparency to 25 for obesity to 75. Okay? So now it looks like this. If you want, you can change a form of these arrow for some another that you want sample to look like this. Okay? And as you understand, you can create component from this frame and to use it at your stories. So as you understand, you can create as many of these motivators as you want. And usually they look good at your stories and they motivate people to swipe, swipe up your banners. So use them, create your own and achieved great sitars. 51. 9.6 Facebook Carousel Ads: Let's see how to create Facebook carousel ads. Actually, this is pretty easy. We just have to create several different banners. Change its elements right at each copy. For example, I have these these and these, these are just three separate components. They don't belong the trial them. And I have some products are just insert an image of the product. I add some text here and I can get my raided by that. When I create it at first, I just do length of these. I select these Barner that I created. I copy pasted Example 2 here, and I detach these component. And I make it a component and gain. So let's thing that this is our fourth file. And now I just have to change all the texts and images that I want. So as you understand, the general template stays the same, but looks very similar to this one. But if you need to change some text for another product, for another offer, you can just do it and this banner. So in general, if you need to create carousel ads, I suggest you not create very complicated templates that will allow you to create all the files together. Angela's recommend you to create components for such things as background, logo for example, these bubble background. And if you need to change texts and images, you just do it in each copy. So create as many copies as you want, but don't create some single component that will be applied to others. I think this is too complicated for carousel ads because when you create them, usually you have different products. There are different texts of Samson and from this point, you don't want to create components for everything. So you just need to create components for your background, for your logo, for these background, and that's it. And everything that is changed from one edge to another. You just said many of them. But this doesn't mean that it doesn't save you time. It saves you a lot of time comparing to create and Carousel ads in Photoshop or in Canva or whatever. Because anyway, if you want to change background, a logo, something you can use components. And even if you want to change text or images of your product, this is much easier to do in Figma then Photoshop or canvas. And finally, you have all these banners altogether and you see all of them and you can imagine how they will look at the carousel ads. Let's see it with the carousel ads, go and create them. 52. 9.7 Facebook Ads Template File Review: Let's go to the file template for our Facebook ads. I will open it in my library. So here is smart biomass for Facebook ads. And this file is similar to the Father to we used to look for Google bananas. This is some cover. These are some things how to use banner, how to use exactly this size for banners. Something is the same as for Google, something is different. So let's go at our page with a bonus. So what do we have here? We have a control panel on that uses a headlines, some description, some personal item arrows for the stories. These longus and Instagram username for stories preview. And we have text bubbles. Then we set our backgrounds. This looks similar to the settings that we had for response of display ads from Google. We set background image here. Then we said blur, if we need it, then we adjust this image, two different sizes of our Banos. And then we use these images for backgrounds, for our banners. We have story preview over here, and we have some things to avoid 20 percent of texts limitations. There are some rectangles that are grids. And I put these chess greed, semi-transparent shows grid to show the areas where partners could be not visible or could be overlaid or something, because this is only one preview for Instagram stories, but Facebook and Instagram and two phase change or rather often, and it's better to understand that these sides, this parts of the banners, are not safe to put important information there. And we can download Varnas from here. And we have another page where we have a, B, C testing and we have different images, different texts. So the previous one, we get in four different banners. So here we have four by three by three, It's 36 different banners. And we can use all of them if we want, or we can just choose which sizes we want to get for our advertising and use it. Okay, So probably this is all with the file and you can use it. You can change anything here. You can use its components to create your own templates for your own advertising. So go and try it. I'm sure you will have a great advertising. 53. 10.1 Social Media Intro: As long as you are market as you probably deal not only with advertising but with some social media. So in this section we will see how to create your profile pictures, how to grade your cover majors for different social networks, for different platforms, how to use it fast. And we will see how to design your posts for Instagram, for Pinterest or whatever in Figma. And how to save you time when you do it over and over again. So let's go and see how to walk with social media creatives, how to work with social media graphics here in Figma. 54. 10.2 Covers, Profile Pictures: Now let's look how to create cower pages, profile pages for your social profiles, okay, for this, we will create several components. This one is a main image and this one is square, a logo for your profile pictures. First of all, how to create this lager? This is very simple. We have this logo, had this logo before and just recreate it, eat. But if you see, I created all these previews and many of logos are around and they are cropped as around logos. So when I just took this logo from Google or Facebook, I don't remember. Yes, from this step, as you seem, these perfect sound is very close to the borders of this logger. And if I want to crop it to the circle, it wasn't long. Good. So these I made these longest, smaller. Let me show you these ones again. I can go to Google Banos and I get this longer. Copy it and paste it here. Now let's look how it's seen at my profile pictures as you see it's cropped so I don't like it. So special love for these. I made the longest, smaller. So I will hide. There are two longest and I did this one, I paste this one just right now, so I make it invisible again. And I have to make the logo smaller to fit our so calls in profile pictures. Okay, and I have this cover image. And as you understand and use these carbon image at all, my covers for different social networks and for some posts for social networks. And I just inserted these two, all the four months that we have. You can find some descriptions, some pictures that show you how it looks at social network. So you can understand how this works. This is for Facebook, for Instagram, Twitter, LinkedIn, and Pinterest. I didn't post hear stories, something like this because we have a separate lesson for them actually, when you create stories, usually you want to create them unique. And this page is more for updating your social network pages. You have a new logo, you just have a new of something that you want to put your cover image and you can do it right here. So if you've seen these images in LinkedIn are very wide. So in this case, I don't see the letters, I don't see the title. And probably if you use LinkedIn, you have to create a separate image for it very long. Let's do it. So I will create a separate cover, a very wide images liked for, like for LinkedIn. Actually, I don't have to make all the image why they just have to put things inside in a different composition. So I detach this instance. I'm making these longer, smaller, smaller tool. And I will paste it to my LinkedIn and do the same with the all white images. So this is how we can create a lot of different profile pictures and cover images for all the social networks. And if you change just this two or three components, you can download all the majors for your social networks, for your accounts from this file. To make it even more handy, adjust. I would make these things components and make a special place for its copies where I can download all of them. So I make each of their social network covers a component. Then I create a duplicate and just put it somewhere here. And when I need them, I just select all of them and I can easily export them if I do it from here. As you understand, I select different being a frames, but I want to select only image frames. That's why I make each of them component and I put it, It's duplicate into a separate place like this. So after you finish on this walk, you will have all your images for your social networks ready and you can easily change them if you need in a matter of minutes. 55. 10.3 Social Media Posts: Let's see how to create posts for social media. So here we have a file and we'll have some things over here. We have a library with the images that we will use for examples of outposts. And we have several loggers for different corners of the posts on the images. And we have actually hour. So we will create posts for Instagram and Pinterest for an example, M&E approach of making posts for social media in Figma is to create some basic template and then to reuse it over and over. Add in some new unique information. For example, some majors, some titles. Like here we have the same template for the product that we want to show. And when we need to promote some new product, we just add its picture, add some texts, and our post is ready. So as you see, there are several different posts that look the same, but I use different techniques when I created them. So let's look inside. As you see, this banner consists of the background emission, these yellow blob of some texts, image and lager. So when I create a new post and just copy paste the previous one and change the product, change the title and this text. If I need. What's the different between all these posts? As you see, the yellow is the farthest background of it all. And this banner, the first background is the blue one, so yellow is on the top of it. And the same here. The yellow is behind, an here the blue is behind. And what another difference? The difference is that when I used, when I created these files, I used background masking. So I use mask for the background. And if I move this background here, let me find it in goes like this. So and when I use these, I use this blob to be on the top of the background. And as you symbol, ground is on its full size. Why did they do it? And what is the difference? That difference comes if you want to put some objects like this product behind or in front of your yellow blob. So as long as this image, my yellow blob is just mask. So actually there is no blob over here. I just have a yellow background of all the banner and I use some image of it. This means that I can't bring in my image of the headphones behind the yellow background because yellow is the fairest of the ground here. And when angle here, I see that the far as background is a blue one. So yellow vector blob is in front of the blue one. And this means that I can, I can put my headphones behind. If I want. I can move it here. And as you see it game in front of our blob. So let's see how to create this balance. Let's start with the most simple one. From this one, I copy paste it. Make sure that I will make it from scratch. So I create a new frame. I will copy my blob from here. So I have this yellow blob. Put it here. And you see that there is an effect of inner shadow. When I make it right, It looks like it's in front of the background and that light falls into it. If I make it black and gray, and the effect will be the opposite like here. Okay, so I will leave it white. Okay, I put it here. I will copy my background image of it here, like this. I copy my longer, okay? And I want to copy these headline here. My vector blog isn't inside. So I put it inside my frame. Now It's home-bound and I will copy the text. And now our copper mine guitar. So this is how I create this post, and this is pretty simple. If I need to change it, I just copy, paste the whole banana and replace the product, replaced texts if I need. Now let's see how to create. These weren't when they used a mask. So I have a frame. Now I need to create a mask for this background. For this, I need to have some object that is of these shape. To make this, I will create a shape rectangle. And I will combine it with the envelope. From here. I need to move it from the frame tool. Okay, here. So now I have two shapes and I want to make a shape that I want to do this. I will honor them as liked most of them. And now I need to cut these area from our rectangle. So I will subtract selection. And now I have these shape so I can copy my background. So now I have an image that I want to mask and I have a shape that I will use to mask my image. So I'll put them together and now I have to read it. I will put my shape behind the image. And when I select both these objects, I will use this mask option. So now my image is cut with this mask. Now I can add it to my banner up to I applied mask effect. This mask group has appeared and I will use it like this. I want. So now I can set the background color of the whole frame to yellow. And now this looks almost the same. After all, our will add effect of shadow and I will set it to white along the same and I will add more capacity. So it looks okay and the yellow probably have to make it being a main week 2020. Something like this. And now I just have to add my objects over here. I will add these headphones. And the 0 member. In this case, I can't put my object. I can put my image behind the yellow blob because they LL blow is actually a background. So I just can put my headphones behind the Bloomberg round because actually it is not underground, it is an objects above my yellow background. So this is how it works. And after this, I will add these tags. I will add logger and I have this template. So as you see, there are several ways to do the same things in Figma. And if you know what you want to get, you can use either of them. And let's look to these posts. Different kind. I made two similar posts with different products. But if you look closely, you will understand the day at slightly different. So let's start with this one. It contains a logo. It contains several rectangles with different strokes. So this is actually a rectangle. So let me create the same post here. I will add the frame, and I will add some rectangles. It's. A nine to five by 774, okay, and I make two of eight corners around it like this. Then I add a wide stroke or example like this. And this is how I make my banner. I will make straw yellow. Okay, and now I made the feeling invisible. So this looks at a similar. I will add the ground, fill in the whole image and I will make destroy to be outside the banner. Now I duplicate these and I will make it wider. I will make it white, and I move it behind the previous one. So now let's look similar, maybe strokes where linger. So I'll use the sentence and I will move. Set it like this. And actually it's almost, that's almost it. I will make them a little smaller. I will add some text, copy paste it. I can use some a logo. I can copy paste it from here, or I can do it from here. Where I have my components for the longest. And we'll just paste it into my image. And I just have to add this text. And I have an image. There are different dimensions here as you see it in good time goes above the strokes and my synthesizer goes behind them. So how did they do it? I had two images. Let's take them. So when I put guitar on to my banner, obviously I just audit like this. So this is pretty easy. But when a synthesized that they're scaling down like this, and I wanted to be cut by these drugs. So I can put it like this behind the strokes. And now it looks inside the border. I probably have to make this logo smaller. This is OK. So now we have two different plates for our posts and we can change products over here. We can change texts, their names, and have new and new posts if you want to pause different products at our Instagram account. And we have Pinterest posts over here. So as you see, this is a very similar template to my Instagram. Actually, I created these templates from the Instagram posts. I just used everything like this. We're in another shape. And I had a being a background here. And let's look at these posts for social media. And let's pretend that we want to post different images with quotes of some musicians. So what do we have? I will create a new pinterest frame. I will use the same blob that I used before. I copy pasted. Should I copy paste in the whole know? Blob? I will add some color temporarily. And I want to put a majors as background. So I just have to copy my image inside the frame, scaling down. All right, it's, it fits the size. So I don't have to cut anything else. Now, I just put my envelope on the top of it, make it white again, and add some texts and add some longer. So as you see, this is pretty simple. All you need is to create this blob. And let me show you how to create this blob will have separate lesson for plugins, but I will show you this plug-in right now. Procreate and blog blobs like this. Okay. So actually I have made a post and if I want to change, something, could change the text and the picture. I have to copy, paste everything and replace the things that I need. And as I promised, let's look at the blog plugin. I want to create these randomly shaped blobs, and I have a plug-in for them. I right-click some free space, click plugins, and I'm looking for blobs plugin. So I have two settings over here. Let's make into fault. I will have blogged like this. Actually, this is pretty similar to what I need. I can resize it like this, and probably it will be okay. Then look how to create different shapes. If I add, said this ten to ten to be like this. If I set it nine to ten, it will be lying this. So you can play around with these settings and create different lobes. You set 100 integral, say that the values must be from one to ten. Okay, So this is how to create these randomly shaped blobs using Blob plug-in. Let me show you how to create such post with these effects. I will create a new frame. Monitored. By 1500. I will copy paste something from here. I will add the background image. I will add these frame. So this is just a rectangle and two texts on k. And the rectangle is filled with black and 50 percent opacity K. I will copy paste longer. And now I want to add this filters. As you see, there is some color and all the image is of this color and black and white. So actually I have to make my image black and white first and then to end these filter. So how to do this? I will make a new frame. So frame selection. And will my rain outside and then no, like this. So I have a new frame right above my background image and I will copy paste it. At first. I want to make my background black and white. To do this, I will feel my image with black, and I will click this drop icon. This allows you to select a blend mode. There are different modes over here. We won't cover all of them. You can play around with them to make image black and white. Use saturation. As you see, I set any own black, white color into all be the same. It will make it black and white. And now I want, I will name it black and white. We'll term. And now I want to add some color. So I will add some yellow. I'm going like these. And then go to Blend Mode and set it to overlay. And now it looks pretty similar to what I had before. Maybe something like this. And now if you want to create another pause to just copy paste it, you replace your background image with something that you want. I will take these one based on k, and I will put it behind the filters. Filter and I can change color if I want. Okay, so let it be like this. So as you see, the whole background changed its column, but our longest still purple because it lies above the filter layer. So actually this is how we would create posts for social media in Figma. As you see, I didn't use a lot of templates over here because usually you don't have to multiply everything in all your social networks. And even if you do, this is very hard to automate this walk on that scale That you just put one image and have a lot of different posts. Actually, I can do this like we did with the Google banners bought from my experience. Usually, I don't like this. I have some templates for all the social networks and I change everything for one social net. This is how we deal with posts for social media in Figma. Of course, if you want, you can create some template like we did for Google balance, where you change one place and in goes to all your formats. But I prefer to create posts for social media independently because usually I want to create something a little different for different social networks. But still, these templates for every single social network helped me a lot. I think you get an idea how to deal with posts for social media in Figma. And as you see, there is endless quantity of different variants that you can use for your posts. So you can go and try. And again, I think that this saves you a lot of time comparing to Photoshop or to some other editors like Canva credit or something like this. Because you have everything at one place. You can see all your previous posts of all your previous images and you can change them easily. So Figma saves you a lot of time when you create post for your social media. 56. 11.1 Plugins: Let's see how to use plugins in Figma. Plugins can save you a lot of time here because they can do some work automatically and save you a lot of time. So I have several plug-ins that I use very often and I will show how to use them to you. At first, Let's look where to find plugins. And we'll have our community page. And there are plugins over here. And if I want to find some flagging, I can browse these list or I can look for something here, for example, I want to find supplying its four icons as you see, there are a lot of them. When you have these black label, this means that you have installed this plug-in already. Sorry, I think this is pretty obvious. Let's come back here and let's look at these plug-ins that we have. The first one, remove my ground. It removes backgrounds from different images, from people, from objects and so on. So as you see, I showed you some examples how it works. And it doesn't work perfectly every time, but in lot of cases it works fine. So look at this image and what have we here? As you know, if you try to do this in Photoshop, it will be a week of work to do everything these, because if you look at this here, you see that this is transparent. So let me set some color here. So you understand, yeah, As you see, this is very good work. And how to use it. I will copy paste this image. I have to right-click it and plugins and I will find my removed and ground. Or is it a movement ground? And I have to run it. I clicked Run, it works for awhile and now I have a mesh without background. If you noticed, there is settings set API k. This means that you have to go to their website and register there and get your API key. Let's look how it works. So let's go to where their website removed dot Vg and create our account. Press in our continuum, Google News for example. These account angry with the terms and signup. Okay, and I have to go to tools and API. And the API integration. There is a button Get API key. And now I have it. So when I come back to Figma and I, let me re install this plugin. Go to Plugins, open ground, and I installed it. Okay, now I go back here and I can't use this plug-in anymore because there is no remote and ground here. So I'm going back there and install it. And gain K now shows that it's installed. Now I right-click my image ligands and there is a movement ground. I want to run it. But it doesn't allow me without API key, so I have to set it ahead. One MPI came here, maybe it works, I save it and run. Now as you see it's running and probably I will get my results. Okay, good. So as you see, you have to create an account, you have to reduce that, Remove BG. And after that you are able to get an API key. And after you insert it here, your plug-in works. There is a limitation how many images you can process per month? I don't remember exactly. Probably it's 15 or yeah, it's 50. You can use 50. They call it previews. So we can remove the ground from 50 different images here. And let's look at the result. It looks okay. And here we have communicated the message with this similar color background and her hair. And in this case, it doesn't work perfect. But it's very hard to do it from this image. And what do we have here? Actually it works, okay, but as you see, these two errors are still with the open ground. Here. It did work almost okay, but as you see, it removed these part from these shelf. And all of the images looks okay, and here we have this artifact as well. So as you see in most cases, this flag and walks very good and it saves you a lot of time. You can do most of these Walkman only in a day or in two days. Okay, Let's move to another plug-in that I use. It's a tiny image compressor. As you understand, it will compress your images. Incomplete based it. And I want to export this image. And let's look at its size. Says that it's almost two megabytes, so it's pretty much, Let's use blinding in tiny image comparison for awhile. And I want to compress my image. You can set quality and let's press compress. It will walk for a while. And now I have my file. And as you see, it saved 70% of the file size. So walk spreading would. There is a similar plug-in at compressor. It works little different and designed specially for Google ads. And that's it for this virus. And export them. When I export, I see that two of these bars are more than 150 kilobytes. And as you remember, Google allows you to upload images only up to 150 kilobytes with regular bonus. So what do I have to do? I will selling these images, right-click plugins and find my at compressor plugin. So as you see, it compresses files to 150 kilobytes. Actually can change these settings, but usually I leave it like this. Sometimes this plugin doesn't walk very well. If you have very big files, it can compress not to 150 kilobytes. In this case, you have to do it manually in some other tools, but let's compress it here and see what we have. So as you see, I save a lot of file size. And now all these four banners are okay for Google. Now I can download them to make an archive and I can download all of these form balance. Okay, let's move to where McGrath dance. I use it rather often because it creates beautiful ingredients for my frames. And this frame. And instead of using these field option and trying to create a gradient of different colors, I can just use this plug-in. I can right-click it plug-ins when gradients and satellites and angrier than that I want. Some of them are pretty beautiful. So as you see, what I can get. Very simple but very effective. Okay, we already created blobs with our plugin in the previous lessons, so we want coverage. Here. There is another warm generator, unruly Ruden. Actually, let's run this plug-in. There are a lot of settings in it. So you can play around two frames. This shame, and the main setting is this cube rainbow of euphoria. This means that you will have different kinds of shapes. So cube is for these kinds of shape. Rainbow is for these kinds of shape. And euphoria is for these kinds of shapes. Let's use it. You can set some colors and it will generate you some shapes. So as you see it's laying this, you can change this setting. Consented to. So we can play around with all the settings and create a lot of different backgrounds and so on. So as you see, there are a lot of this hints here. And this is very interesting plug-in if you need to create some banners for some regions and you can create web maps over here. And just right-click this area and click vector maps. Say I want to add Brazil selected contours and I want to get this layer. It will create a layer of a shape on Brazil laying this will take some time. Okay, we won't wait for it and understand it will create a marble Brazil over here. How to install any of these plugins? You have? Find it by its name, or you just can copy, paste this link, paste it into your browser. You will get to into Figma account and you can install this plugin, as you see it's already installed. You can just go to community and look for plugin's. Over here. There are a lot, a lot of plugins and Figma, so you can check them out. I showed you some of them that I use almost every day. They are pretty interesting. And as you see, I have a lot of plug-ins here as well. Some of them are for creating animation, for creating videos. Some of them to create some 3D objects. Some of them will just download some icons here on just flags. For example, I use flags, trends and the unjust, and select the flag that they want. I can use a rectangle or square. One example I want to add. Creation has been added somewhere. I don't see it. I'm not sure. Yes, It's over here. So this is flag. And as you see, it's made in a vector form. This means that I can scale it. Turn being size and the quality is still great day. So this is all that I wanted to say about plugins. You can search for different plugins on your own broader community. Find some articles, use different plug-ins. They will automate and save you a lot of time. 57. 12.1 Growth Board: I've learnt how to create a lot of banners in Figma, and we have learned how to create a lot of balance for every desk and in Figma. Now, let's see how to manage all of these because you can have a question. What do I have to do with all this man in the decade? Because it's very difficult to manage than when you have hundreds of different variants of your balance. So we have a tool for this, this and girls and bought. Actually, I make it in Trello and you have this template as well. If I have a link to this board, you can copy it to your boards in trial if you don't use it. This is very simple. Just create an account and you can use IT. Manager your creatives. What is here? This is Kanban or Scrum board, where we have different columns and we have different cards. And when we start our testing, when we start some hypothesis, we add it to one of these columns. And then while it gains some data while it is launched and so on, in a goes to the right to success or fail. So this is a mode to test hypothesis. What is hypothesis? Hypothesis is, for example, statement. If we add a beautiful girl to our banners and ride that we have discounts on our products. We will gain a better sitar in our advertising campaigns. So you create your balance with this girl with some discount and you test it. And while you are Testament, you move this cart from left to the right in these columns. So let's look and these columns closer. Epic. This is column for something that you don't want to test right now for some things that you want to do in the future and you don't know when. For example, you can add some card that you wanted to test, but something changed and you are not able to test it right now. So you just can put this cut into epic column ideas. This is column for ideas, all members of your team, or you buy yourself bright some ideas here in a very abstract way. For example, by honest with text, premium musical instruments convert better, something like this. Or banners with the rock girl will gain a high CTR. So it is like this. This is not a hypothesis yet. This is just an India. Then you from hypothesis from this idea. So if I had an idea bonus with the text premium musical instruments convert better, it will turn into these creatives with the text. Premium, musical instruments will increase conversion rate cr from 5.5% to 7% because they will cut those who look for cheap. So let's pretend that we have a shop of only premium musical instrumental of expensive ones. And we think that if we write premium at our balance. People who want to buy cheap musical instruments will not clique and we will not come to our website and we will have a better conversion. And I have some fields over here, description or my orthosis that the metric, its conversion rate, historical metric value is 5.5%. That means that at my previous campaigns the conversion rate was 5.5. And now I'm waiting for my AB test for my experiment to run. And then I will write, what did they get into these fields? And after these are will understand if this works or no. So at first I just form a hypothesis. All members of the team moved the hypothesis that I believed to be better to this priority column. This is for the case when you have a lot of ideas, a lot of hypotheses, and you understand it, you don't have time to test them in this sprint in this week. Usually I walk in weekly to weekly sprints. This means that I test hypothesis one week or two weeks. If these are marketing hypothesis, usually it's enough of weak to test them, invert this hypothesis are more complicated and need more data. You can run them on a two week basis, but I prefer you to start with one week. So this means that at the beginning of the week and we see at hypothesis column, and we see, for example, Bowtie of them. And we understand that it's too much and we want to test maybe Tim, and these may be 15. So put the best hypothesis to priority. Each person, each team member decides which of his hypothesis are better to test at the sprint and they add them to priority. Then you have a meeting, probably it's online and you vote. Which of these cards are better to test this week? In this sprint, you rank them. So the higher is the crowd, the more priority it gets. Some more cats can go to the next sprint. And probably when you discuss your Hypothesis during your meeting, you will add some hypothesis from these column into your current sprint. Solid say that you picked 10 hypothesis, but then you understand that you don't have enough resources to test all of them, usually just around them over here. And people who will create violence, who will set up your advertising campaigns, will pick them from this column and add to production. So when a card is in this production column, this means that someone is doing things to make it happen to run these tests, to test this hypothesis. After everything is done and the campaign is launched, card goes to data collection column and it lays here until the data is collected. The data isn't collected for some reason. For example, you stop the campaign forever. You just have to move this card probably to epic to fail or just to delete it, if you understand that you will never use it again. But usually I put them into epic and test them in the future. And finally, when you get your data collected and you put your cat either to success or to the failed column. So at our example we have Hypothesis 1 is creatives with the text premium musical instruments will increase conversion rate from 5.05 to 7% because they will cut those who look for cheap results. As you see, there are some additional fields here and you see that there is for Google, for United Kingdom, and for guitar products. Okay? And these cart is for Facebook. And these are slightly different conversion rates because as you see in this example, Facebook converts better and it's initial conversion rate was 6.3, so we want it to be 8%. Finally, we got results after each cart moved from one column to another, where see that we have conversion rate 8.4% at Google. So we see that it is bigger than 7% that we wanted. And this means that we have a successful hypothesis. And the other one got conversion rate 6.5. This is more than 6.3 that we had before, but it's not 8%. This means that we marked this hypothesis as failed one. Even if we get 7.9%, we still put it into the fail and column. So you have to understand that success and fail depends on which goals did you set. So if you had a conversion rate 5.5% and you set a goal to 50 percent, probably all of your hypothesis will fail because it's not realistic scenario. And if you put 7%, it's probably okay. So you understand that it's reasonable and you probably can get these results. But if you set your goal to 8% and you didn't, again, it doesn't mean that this hypothesis is, but this doesn't mean that your banners, your creatives, and bad, you probably can use them, but probably you want to change them and lethal to get even better results. And you can walk with them, you can leave them in campaigns, or you can even scale them up. But this just means that when you predicted your conversion rate, you didn't do it so well. Or you did it well, but humans are just not good enough. And when you get your sprints over and over, you have new and new hypothesis. You will predict better. And you will run hypothesis that actually mean something. So if you say that I want to gain conversion and 50 percent after you will, after you get in 5.5. This doesn't make sense. So these, That's why you will put such card into fail. And then next spring you understand that you won't be able to get cij be conversion rate and probably your goal, your aim will be lower, more reasonable. So this is how thins walk. And after you test your hypothesis over and over, you will get all the results here. When you have too many of them, you can create some carve of your cards and move them into another columns. And we have the last column, it's review and retrospective column. I will rename it to review hundreds with respect to what does it mean and how to use it. If we have a weekly sprint, this means that at the end of each sprint, now we have a meeting and write down which result do we have? What did we plan and what did we achieve? So our plan was to test five hypotheses, and in fact, we tested only two of them. One of them is successful, one of them successful. So our success rate is 50 percent and we have to write down insights from our sprint. What did we learn, what we use in the future? Well understood that using premium instruments in the minus delivers different results depending on advertising platform needs further testing. So it works well for Google, but not so well for Facebook. And this means that we probably have to create some more hypothesis to walk this around and to understand actually premium musical instruments. Does it make a real change in the advertising or not? So after this, you will get more and more hypothesis. You will get more and more results, and you will be able to understand what works and what doesn't work. And for example, you have a new team member and you can just show him this BAD. Show him all the successful and failed hypothesis. And you understand your marketing and your situation much, much better than if you would. Tell him this by watts. So this is a great tool to test hypothesis, to test a lot of different Varnas, determinist, a lot of different creators, and so on. This is a growth board and it is designed not only to test. Creatives. These are steps of the conversion funnel, which your leads, which are clients go through when they interact with your company. When we talk about creatives, about bananas, we are on the first or maybe on the second steps. So the first one is for awareness and metrics for these steps are reach, how many people do you reach with your advertising? These are metrics for applications, services, and so on. So if you sell something online, if you have, for example, online shop, you have these metrics for your funnel. And acquisition metrics or the step our conversion rate, cost per lead, cost per action, cost per sale bounce rate. Usually when you test your creatives, they don't affect your conversion rate that much. But they affect CTR. In a large-scale. This means that most of hypothesis of your banners will have statements. These creatives will increase CTR from 16 percent to 17 percent and so on. Sometimes when you design new pages on your creatives, filter out some of your audience or some of unnecessary audience. In this case, these creatives influence conversion rate and you can mark the steps with acquisition step, but most of you are buying us will affect only CTR. And this means that this is awareness step. There are another steps, but they are not about creatives. They are about site use searcher about product quality, about how many people go back to your servers if this is a service, how many money do you earn from each person and how your users, how your clients recommend your services to other people. So we want cover all these four steps. We will focus on these two. And as I said, when you test your creatives, usually a test sitar. So you compare one with another manners in the same advertising system with the same audience, with the same landing page. If you, for example, tests in different landing pages, you added different texts, you had a different images on your landing pages and you want to test which of them converts better. In this case, you can write down and India then to form the hypothesis, lending page with a text a will increase conversion rate from 5% to 6% because it will show our advantages in a better way than it was before. And you test this hypothesis with some AB testing tool like Google Optimize Optimizely or something like that. This is a very brief and short description overview of the growth board and the processes that lay behind it. But it's enough for you to test your bonus, to test your creatives. And one more thing about test and banners for Google. As you know, there are a lot of formats over there, especially if you touch regular display ads. And, and ideally you can run an independent hypothesis for each of the sizes. Because as you know, sometimes it happens and it happens very often that banners of one size convert better in with one text and banners of other size convert worser. So in this case, you probably want to create an independent hypothesis for age Bono size, but this will be very time-consuming and this will be not so easy to manage when you have a lot of creative. So what I suggest is to do it maybe once, twice to understand which ideas walk in if formats and what to avoid. For example, you will understand that at mumbles bonus with small formats, you don't have to put a lot of texts because it is not really well actually this is obvious, but maybe we'll have conclusion after this. If you want to measure all of your bonus independently for Google ads, you probably have to create a Google Spreadsheet or Excel file. So it would be some kind of table because it will be very difficult to manage it in this trailer. Want. So as you understand, if you have 20 balance, you will have 22 separate hypothesis. And if you have different ideas, for example, three or four, it will be a 100 of cards over here. It will be very time consuming. But after you collect all your data with all your formats, you will understand the general information, the hypothesis about premium musical instrument, successful or not. And you put these results into these bought. So I hope you will use these words to boost your marketing results. And so let's move on. 58. 12.2 Hypothesis Card: Let's look inside their God. Although hypothesis more closely as we have seen before, we have these headline. Actually it says what to do with test. And this is the statement of our hypothesis and how to use section. We have performed a lot how to write a good hypothesis, and we will cover it in a separate lesson. Now we are here. So description. You can write something here if you think that your teammates will understand better what you are going to test. If it's obvious from the title, you can skip this description. Core metric, its conversion rate or CTR. Usually additional metric can be sitar. For example, you run, for example, you run different variants of your ads. And you understand that you want to cut your audience too, cut unnecessary audience bio creatives like here. So we write a musical instruments and we understand that people who want to buy cheap instruments want to go to our website. But this means that we probably will lose our cetera. It's not crucial because if we gain conversion rate, if we stop losing money on people who don't want to buy from our shop. This means that we are okay with losing CTR. But if we lose it very dramatically, probably we have to find some compromise. This just means that we have to keep an eye on CTR as well. But our main metric for these experiments, for this hypothesis is still conversion rate as Oracle magic value. This is what we got before. Historical data screenshot example. This one shows what statistics do, did we have before? Why it's important because we will calculate statistical significance and we should understand that these value is accurate. And when we have such screenshots, it's, it makes everything more visual. Then after we receive our data, we put the values here and we'll make another screenshot and put it over here. After all, we calculate statistical significance because sometimes we get very close result and we don't understand if they are worth something or not. So in this case, we will use a calculator of statistical significance and we will see if our results are significant. Well covers the statistical significance in a separate lesson. And after the hypothesis, It's author should write conclusion, what did we get y or not, and what to do next. So for example. Like here, this creatives slightly increase conversion, but not the way we expected what to do next. I'll leave them walking and look for other creatives to boost conversion rate, for example. With this idea, this means to test different creatives with premium musical instrument to see if these statement works on no. And there is one more thing, custom fields. When you register and when you use trail and there are no custom fields in your cart. So this is a lagging power up in trailer. It is situated here custom fields. So I have custom fields like this. And I will add a new field, for example, I will set it to drop down and it will be, let's say brand. And we have some variance. For example, generic means no brand will be Gibson, be a, king, j will be yamaka and so on. So after these can use brand, an example, this is generic and advertising. I don't have any brand. And if I set this checkbox, this means that this field one will appear and the cart here, so it will be in brand generic. If I The selling this, it disappears. So this is how these power-up walks. If you want to activate it, you just go to Add Power Apps. You can add one free power up with each trial account and you have to find custom fields. And if you wanted to, you can just add it into your account. Rela allows you to add some comments to each mode so you're free to add any comments. You can mention your teammates here and so on. And if you want to add an image to your card, you have to attach it. So you have attachment. Compute. Let's add something else. For example, I would like to end this image. Now we have two images over here and as you see, became a cover of your card. But I want to make the previous image cover. So I go here and click Make cover. So now I have two different images in my card, but I can saddling the cover. We have learned how to use a hypothesis card in our growth, both in trailer. So I suggest to go and try it by yourself. 59. 12.3 Hypothesis Formulas: Let's look closer to our hypothesis statement. Here in hypothesis column, there is some template. What you have to write in your hypothesis, how you should form them. So there are two examples here. Changing something into something will increase conversion goal from 1 to another because and I ended this part where you can put your result and in this case you will see the result right from here. Don't have to click and go inside. You see that the result is 8.4 for these cut. So let's go back there and see. So what does it mean? This means that you have to write down what will you change and how you will change, how will it affect your metric? And do you have to select a metric for to test this hypothesis? And a very important part is because this means that you don't just run hypothesis to run hypothesis. You're on it. To understand something, to learn something, and you have some feelings, you have some thoughts how these changes will influence your results. If you don't put this because part, you just will test green buttons against red buttons and so on. But when you use, because you can explain, why did you form this hypothesis? Why did you write it down? And everybody will understand the main thought that lays inside this hypothesis. So this is very important. Let's look at our examples, creatives with the text premium musical instruments. So what will we change? The text? Will increase conversion rate. It is a main metric for our experiment from 5.5 to 7%. Don't write things like. So. Let's rephrase it and see the good and the bad example. For example, creatives with the text premium musical instruments will gain conversion rate 7%. Actually this formula is okay, this text is okay, but you don't understand what did you have before your experiments? So you're just right, it will gain 7% and you didn't understand, is it match or not? What level of conversion rate did you have before? So it's better to write down your previous results in this case, you understand. So that 7% is actually a good goal. And if these banners achieved this goal, it's good. But if, for example, your previous conversion was 1.5, probably your hypothesis is too optimistic and you probably have to set some low enroll. So this is very important and without because part, Let's see, it will looks the same. But Now there is no explanation. Why do we test this hypothesis? Okay, and let's go back to our current and see another formula. Creatives with something will agree increase conversion goal from actually. Our examples are made with these formulas, so we didn't write change in one to another will increase. We just have written that creatives with Samsung will increase our conversion rate. Let's make some hypothesis with this formula. For example, changing person, forum and guy or girl at the creatives with the texts musical instrument will increase conversion rate from 6.5 to 7% because our main DNS is male and girl. So this is a good one. So this is a good form. So this is a good formulation of hypothesis. Let's go back and see what cells do have here. Yes, we have some metrics, primer metrics for our manners. Ctr and CR comes click-through rate and conversion rate. And it fills that we'll have to set, we already saw them in our card and review lesson. So let's look at it once again. When you form your hypothesis, when you ride them, you have to think why this hypothesis should be true. Is there some idea behind it? If there is no, this is just destined for tests and probably you will have some results. Probably not. Usually your results are not that great for such hypothesis because it's just alloc, and usually they don't make so much difference. But when you form them in a way, when you explain why this hypothesis should work. And when you set realistic goals. In this case, your hypothesis can be true. Actually, they can be false as well, but at least you test something reasonable, you test something that makes sense. So when you write your own hypothesis, come back to this lesson, look at these two formulas and use them because if you form your hypothesis in this way, they will allow you to get results. You want to test hypothesis just because you want to test something, you will test hypothesis to get results. So this is it with this short but very important lesson. Try to write your own hypothesis, test them, and you will get great results. 60. 12.4 AAARRR Funnel Intro: Now let's look how a funnel walks. This goes beyond creative test, but let's look at it anyway. So this is the final AA, awareness acquisition, activation, retention, revenue reference. It shows how your clients go through your website, through your services, and how do they bring you money? How did the brain you value? The first step is awareness. How many people do reach? How many people do SEO advertising, acquisition? How many people visit your website and how many people take some actions there, for example, leave their contexts. Activation. This applies not to all businesses, but for example, for mobile application, this means how many people start free trial or something like this. Retention. How many people come back to your end by again? Retention. How many people come back and buy again, and how long do they stay with your business? So these works with LTV, revenue. How many people pay you? When do they start to pay you? And refer all how many people refer your business to France or to some colics. Let's go back to our board. And as you see, there are some colorful labels here. And as you see, I have marked all my cards with one of these labels. So these orange means that this is acquisition step and these metric is conversion rate, cost per lead cost, where action cost per sale bounce rate. So this means how people convert at your website or don't convert a at your website. Awareness is CTI reach and something like this. A monthly audience, daily average audience and so on. Activation, as I've said, these doesn't apply to all businesses. If you just sell something at your website, probably don't have activation step. So it can be conversion to a trial first usage, first day retention. This means that if your service is designed the way that people will use it over and over. First day retention means how many people use your servers the next day after they sign up. So this perfectly walks with mobile applications and so on. Retention is how long people stay with you, how long people stay and pay you, how many people go away? Nps score, this means how people are satisfied with the services. Revenue. This is revenue and LTV metric. And actually sometimes people use LTV here because it shows how long people pay you and referral. These are some reference metrics. How many people invite their friends, how many invites do they make, and so on. So these are six steps that describe this funnel and it's better to use them in your own growth. But in this case, you will test hypothesis not only about buying a test and B2 creative test and an advertising testing, but you will go deeper and test all aspects of your business. So this is very powerful technique. And if you have, let's say a mobile application or some as a service, probably, you will find another variant of this funnel where retention goes to the top. It's called rawr, something like this. This means that if your business is designed the way that people should come back to you over and over. And in this case, you earn money. So you have to put your retention metrics to the first place and you have to test them at first. But if we speak about creative testing, of course, these are steps, awareness and a little less, acquisition. This is just introduction to an ARR funnel. If you want to learn a deeper, you can Google there are a lot of videos, a lot of courses on this topic, probably I will create some chorus about this later, but I think this is more than enough for our creative test. And actually, if you don't use another steps and now the levels of the funnel, you just don't need to apply these labels. You can just write your hypothesis about your click-through rate, about your conversion rate if it applies. So that's it with this funnel tried to use it and I'm sure you will have a greater results. 61. 12.5 Statistical Significance: Now let's talk about statistical significance. When you perform testing of your hypothesis, this is very important to get significant results. What is significant result? This is a result when you can say with some confidence level that your result is actually true. This involves some statistics. But you don't have to do any of these. You can just use the radio statistical significance calculator. I'm giving you two links to different statistical calculators. One is at Santa Monica.com and another is at nail patella.com. I prefer the first one because here at nilpotent.com, we don't see decimals in our conversion rate. And here we see them. So usually this is why I prefer these calculator, how to use it. You perform your test in your have some results and you understand that you compare, for example, your campaign to some previous campaign that you around before. Oh, you know, both results, you know, quantity of impressions and quantity of colleagues conversions. Let's say that we test CTR. And this means that we will put our impressions here into visitors fields and we put our colleagues here into conversions because our CTR, it's like a conversion for colleagues from impressions. So let's say that we have these quantity of oppression. Some colleagues, 100 impressions, one-click operations to cliques, such as two times bigger. But as you understand, this is not enough data to say that these varying B is better than variant because This is just not enough data. What if we put 1000 and 10 and 20? Let's recalculate it. Our results are still not significant. Let's add some zeros. Okay, in this case, our result is significant. Why? Because now we have much more data than we had before. And now the difference of two times in our conversion rate. And we mean that this is Sutra, is statistically significant. When you test your hypothesis, make sure that your results are statistically significant. Just go here, put your data into these fields and see the result. There are a lot of settings and some values over here. You may not go deep and understand what does it mean and just use it as ears. You have to use two-sided hypothesis. Confidence level 95 percent is okay. So this is industry standard for hypothesis test and you can set 99 percent, but for these you, sometimes you have to get more data then for 95 percent. So this is confidence level. This is how confident you will be in the result of your experiment. Usually 95 percent is okay. And there are two, these values, power and p-value. You don't have to understand them as well. They show probability that you make a mistake when you say that the false hypothesis is true, and when you say that true hypothesis is false. So actually, these are mathematical details. You don't have to understand them, you don't have to learn them, and you just need to look at the main result. So again, if I said this is, our result is nonsignificant. So sitar is 2 times being about the result is not significant. We have to collect more data to say if the hypothesis B is better than hypothesis a. So this is how to use statistical significance. If you want, you can read some articles over here that explain how all this work. But I suggest just use the calculator and you don't have to go in those details. 62. 12.6 Growth Board Final Overview: Let's review everything that we have learned about our hypothesis testing. This is not just marketing, this as part of a growth hack and process. It will help you to achieve much better results when you just do something in marketing and don't really track your results. So this mythology of this framework is designed to understand your results and to drive better results. To think about the reasons, to think about consequences. And to understand how they connect and to understand what you have to do and how you have to do to achieve your result, to improve your metrics. Not just to test something, to test something, but to get a better results. So once again, what do we have here? We have at Trello board. If you haven't ever used Trello, I will leave you a short video that explains how to use it actually is pretty straight forward. You will have a link to this board and you will have to copy it to yourself and then you can use it. So these boards consist of different columns that contain some cards. When you have some ideas and you read them down into idea columns. All members of your DMM can do this, even if you walk along, do it the same. Maybe you don't have to put an author into each count. If you walk along. If you work with your teammates, make sure that each card, each hypothesis has its author. So there are members over here and you can add yourself. So the whole of this process is designed to give you results. And we should results. When we speak about hour and graphics, about our banners, about our advertising campaigns, we can influence on click-through rate and on conversion rate. Probably these are two main metrics that you can expect to be changed when you change your banners, when you change your ad creatives. In this case, you form your hypothesis in a way that will increase your conversion rate or increase your click-through rate. I suggest you to always write hypothesis in a positive way that they will increase your conversion. Don't write a hypothesis that will decrease your conversion rate. Because sometimes people want to write down, It's in a negative way and it's not a good way to do it better, stay in a positive direction. In this case, you will test the right things. So always think how to increase your conversion rate. Always think how to increase your click-through rate. But of course, you have to understand that you don't have to increase your click-through rate if it will, drop down your conversion rate. These happens when you write something very attractive at your banners that Catch the wrong audience or that it's just not true. So if you write that we give away free musical instruments, a lot of people will click these banners, but if you actually don't do this, so there will be no point in IIT. In other cases, make your hypothesis the way that will increase your conversion rate, that will increase your click-through rate. Okay? So you have to have a reason, you have to have some sands behind your hypothesis. So I suggest you not just to test different banners, but tried to put something after this. Because what? Because in this case, you will create much more reasonable hypothesis and probably you will get much better results with some time. You and all your team members will write down the hypothesis you have to prioritize them. And then you pick the best hypothesis. The best hypothesis mean that those hypothesis that you believe in. So if your team believes that these three hypothesis will increase our core metrics, so test them at first and leave or another for the next Prince on just for some future. After you prioritize them, take the best hypothesis into production and actually launch them. They will lay here while the data is collected. And finally, you will have successful or failed hypothesis and put them here when you have a statistically significant data. Once again, make sure that your results are significant. And there is one important thing in review and retrospective there is success rate. Don't think these as a KPI to achieve 100%. Because if you try to achieve success rate of a 100 percent, this means that you will test very weak hypothesis, even not very weak, but those that are very, very probable to be true. So in this way, you want risk and you want get good results. My view, a good success rate is from 30 to 40 percent. Usually it's even less. If you have success rate less than 5%, probably your hypothesis are too strict. If your success rate is 90 percent, this means that you, your hypothesis are too mild. So the good KPI for these metric is about 20, 50%, maybe 20, 40%, 50 is rather high. So if you are in these rates and your perfectly okay with destine your hypothesis. And there is one more thin when you test hypothesis makes sure that you test at least five but at 10 hypothesis per week or per sprint. Because if you test one hypothesis and your success rate is, let's say 15 percent. This means that you will test about 52 hypothesis. You multiply it by 15 percent. And it will be about how many seven successful hypothesis per year. And this is not a great result. But if you test, let's say, 10 hypothesis per week. And your success rate is maybe, I don't know, 25 percent. This means that you understand your business better and over time you will create a better hypothesis with more success rate that will still have a sense. Let's put it to 25, maybe even 20 percent, it's ok. So in this case, how many you will have about 100 successful hypothesis per year. This is pretty good result. Jeff Bezos, CEO and founder of Amazon, told that all the success is about massive hypothesis test. And then he said this many years ago. So probably this is a good framework for you to get much better results than you did before. I suggest you to try this mythology, to try this framework, to work with it for a while. And probably you will get much better results than you did before. 63. 13.1 Epilogue: And my friend, I'm happy to meet you at the end of the course. I hope that the course was good deal for you and that now you have some skills to do work faster. If you find this course useful. Five-star rating is appreciate it in the review session, as long as everything that is below 40 is considered as a bad result on Udemy. So if you have any questions, suggestions, or you just want to talk, feel free to drop me a line and good luck. Sincerely yours, Nikki, they've saved.