NEW Figma 2024: Getting started the Beginner to Pro Class

1. 00 Intro Beginner+Exercise: Today, I'll guide you through the world of Figma. Let's learn how to bring our ideas alive with Figma's incredible features. We will learn everything about setup and creating basic designs, working with components to create reusable design elements. Setting up styles and variables for consistency and hierarchy across color typography, and spacing, responsive design with auto layout to adapt to different screen sizes, basic prototyping to bring your design alive, and how to share and collaborate with other designers and most importantly developers to get your design coded. We'll start from scratch by setting up our Figma account and familiarizing ourselves with the fire structure. Great. Then we'll dive into the fundamentals, such as setting up frames and nesting them, adding shapes, text, colors, and grids, creating a solid UI design. Once you're comfortable with the basics, we'll ensure your designs aren't just pretty pictures, but are also highly functional and scalable. I'll show you how to create reusable design elements with components and the variants, which are essential for modern UI design. We'll create variables and styles to define and reuse color, typography, and spacing, ensuring consistency across all projects and enabling quick changes in your design. Understanding these features and documenting them effectively is crucial for seamless communication with development. Next, we'll make our designs responsive to changing content and screen sizes, using auto layout and constraints. You'll see that with the right approach, it's much easier than you might think. Now, let's bring our designs alive and add some basic prototyping to the mix. To finish off, I'll show you how to share your design with other designers using shared team libraries. And probably one of the most important but often neglected subjects. We'll talk about how to document and share your designs for smooth communication and collaboration with development. Throughout the course, I'll address common questions such as how to choose a right screen size, when to use variables versus styles, and share valuable shortcuts, tips and tricks, and little hidden gems. I'll provide you with a Figma exercise file, enabling you to follow the bite sized video step by step alongside me. Once we mastered the essentials, we'll apply them to a real project, building a fully responsive component based podcast design ready to be used in your portfolio. I keep it short and focused, so in no time you can find out everything about Figma that you need to tackle any project. This class is right for you if you're a total beginner or switching over from any other design software. This is the course by Moon learning dot AO. 2. 02 What Is Figma? Who does the coding?: So what is Figma? In a nutshell, Figma is a user interface design software, also known as UI design software. In Figma, you can create interactive wire frames, set up advanced user interface designs, and create impressive prototypes. The great thing is that Figma works for both Mac and PC. You can use it in your web browser or wire the desktop app. Figma provides you with all the tools you need to design for web or apps, such as working with components, setting up styles and variables, tools for responsive design, as well as automated information for developers. It's really the combination of its incredible features that makes FIMAS so special and positions it as the industry leader. FIMA is Cloud based, making it the ideal choice for collaborating with other designers or sharing your designs with development. You can design with others in real time, allowing you and your team to work on the same project simultaneously to stay perfectly aligned. Okay MA is incredibly user friendly and has a gentle learning curve for beginners, but it can also be taken to very advanced levels for alignment with code and creation of complex design systems. Now, a common question I hear is, if I designed a website in Figma, how does it become a real website? Does Figma do that? Does Figma do the coding? Well, sorry, but no. Figma provides excellent tools to facilitate collaboration between design and development, such as def mode, where you can see CSS nippet, at code information, inspect components, and much more. But there's no such thing as a publish button. So you do need a skilled developer for that. Alternatively, for straightforward websites, you could use tools like Webflow or Framer, using Figma as your base to plan and set up your design. 3. SETUP: 01 Figma in the Browser vs: You can work with Figma in two ways. You can either work directly in the browser, which is what you're seeing here, or you can download the app. To download the app, go to figma.com forward slash downloads. You can then choose between the MC and the Windows version. It's really important to note that even though you work in the desktop app, Figma remains cloud based. That means that all of your files will be stored in the Cloud and not locally on your computer. And therefore, you always need Internet access to work on your Figma files. You could export and store a Figma file locally, but this is something you should really only do in an emergency, like if you would need to finish a project and you know that you will not have access to the Internet. This can cause hurdles to the collaboration with your team. Therefore, it's always best to leave everything on the Cloud as it was intended to be. Besides the desktop app, you might be interested in Figma mirror to preview your designs on your mobile or tablet. And in case you're not able to use the desktop app and will use the browser version only. I strongly recommend downloading the font installer. This will give you access to all your local fonts. This will however not be necessary when using the app. 4. SETUP: 02 The Figma file browser – Figma's home: The Figma file browser, or in other words, Figma home. When you open Figma for the first time, you're going to see something similar to this. It might be empty, or you might already have some files. This is the place where you keep your files and your teams organized. Before we create our first file, let's make sure that we understand the Figma file structure, which is a little weird in the beginning. But just play with me. First, we have teams. They can be for your own work or for collaboration. Within teams, we then have projects, which you can use to group files into different projects within a team. On the free plan, you currently get one free project. Inside a project, you can now have multiple files, either fig JEM files or design files. These files are where you would do the actual work. You can further structure them into pages. Let's get back to the real thing. Over here, you can see the team. You might be part of just one team, or you can open the drop down and you can switch between different teams that you might be invited to. You can also create your own teams, simply click on the plus button, name your team. Then you can choose if you want to invite others. We can skip this for now. You can always invite later. Choose a team plan. You can always go for starter and then later upgrade if you need any additional features. You'll then see the team you created on the top. To delete the team, just use a little drop down and choose a delete. Let's understand the team structure a little better. So inside our team, we find the projects. The word project is a little confusing. It comes from the old days of Figma. These days, a project can really be used for absolutely anything. Just see it as another sub folder and another layer of organization. You can store any files you want in there and you can name it anything. If we click on our projects, then inside of them, you find your files. Click on any file to open it, and it's going to open a new tab. You can have as many tabs open as you want. Inside of your file, on the left hand side, you can see different pages that will further structure your file. If you want to go back to your file browser, then click on a little Home icon Top left. You can see that your file remains open, and by the way, everything auto saves in Figma. A little tip, a very handy feature is that you can mark projects as well as files as favorites. Here, for example, if I take that off, you can see over here, I have my start files. I quite like actually marking all the projects relevant, and then I have a better overview over here. The same works if you click in here, we can now start this, and then you can also have important files for quick access. By the way, this is only visible for you. It's also really handy because this way, for example, if you want to move any files between projects, then you can just do that via the browser here. You can also invite others to your team, jump back to the overview and then click on the Share button. Here you can either invite via link or via e mail. Very important, make sure that you choose whether you're inviting just to view or to edit. If you choose edit, then make sure that you check the Figma pricing plan you have because this might come with additional cost per. You can always change the kind of rights and also revert rights by just clicking on the little arrow here and going to the Admin view where you can find all the settings. One last little area of interest might be the community. Sometimes you see a little globe up here or you might find the globe to explore the community down here. It moves around quite a bit. If you click on there, you enter the Figma community, and this is a really great place where you can find lots of free resources, different files, plug ins, really feel free to jump in there and have a look at what other people already built for you. 5. SETUP: 03 creating design files: Let's create a new design file in Figma. You might have noticed that in Figma, you have to choice between creating a fig Jamboard, a design file, or a slide deck. We're going to work with design files only. They're here to set up your designs. FIC Jamboards are more for brainstorming, collaboration, and ideation. The slide deck, as the name says, is for presentation. You can, however, also set up your presentation with design files only. But don't worry. We're going to get to that during this course. Let's create a new file. You can either create a new project and then have files in that project, or you can use an existing project to double click it to open, and you're now going to find at the top to create new button. We're going to go for a new design file. This has created a new file and it's opening it right away in a new tab. You can always jump back here to your dashboard, and then you can see here our new untitled file. If we want to rename it, we could do this right in the file by double clicking the name. You could also move it from here. Just use that little error, and you can then click on Move and you could move it to any other project. We can also do the same from our project. Here we have our file. We can then right click, and then you can rename it, and you can also move the file. Or you can just drag it. Remember, I like starring my projects. By starring them up here, they appear on the side bar, and this makes it much easier to move your files around. Usually, files in Figma are always shared within the file browser. However, if you ever get a download file, so a file that ends with dot fig, then in order to see it inside of your file browser, make sure that you use the import button. It's not going to work by simply double clicking it. 6. BASICS: 01 Adding frames to our file: Let's start with a base of everything in Figma. Frames. Make sure you're in a design file. This gray area you see here in the center is called a Canvas. Think of it like the surface of a table you're working on. On top of it, you'll add your designs like sheets of paper. In Figma, those sheets are called frames. You can add images, texts, and shapes to those frames to set up your designs. To create a frame, simply click on the frame symbol in the toolbar, or you can also use the shortcut F. We now open the Figma preset frame menu on the right hand side. As you can see, Figma set up most common screen sizes for you. If I click on one of them, then it's going to add the frame in that size to my Canvas. In case you're not after a specific screen size, you can also draw a frame. So let's hit F again, and then we can simply drag a frame open on our canvas. Now, the great thing is, if I select this frame and jump back to the frame drop down, I could also turn this into any of those presets. You can use a shortcut shift and to center anything on your Cvas. Two things happened. Figma added those frames to our canvas, and we can also see the frames in our left hand side layers panel. The layers panel is basically a mirror of everything that happens on the cavas. You can rename your frames. You can either click directly on the name of the frame and then simply type what you're after, or you can also click on the name in the layers panel. We always use frames and never shapes to represent our screens in Figma. Unlike traditional artboards, you can nest frames within frames in Figma, which will allow you to create more complex layouts later on. 7. BASICS: 02 A few handy shortcuts: A few handy shortcuts. In general, you find an overview of all the shortcuts if you jump to the actions menu and then search for keyboard shortcuts. You will see some marked in blue, that's the ones you already used, and the ones in white, are the ones you have not used yet. I want to show you the most important ones for now. To hide and show the UR, you can press command and backward slash. If you press shift and backward slash, then this is only going to hide at the left hand side. As soon as you select anything on your Canvas, you're going to still see all the properties on the right hand side, quite handy if you need a little bit more space. You can zoom in and out by pressing command n plus or command minus. If you press shift and zero, and you get 100% view. If you press shift and one, you get an overview of everything that's on your Canvas. If you select a specific element and press shift and two, then it's going to zoom into just that element. If you press enter, then it's going to select the direct children of that element. By pressing the space bar, you can move around the Canvas. 8. BASICS: 03 Design file overview: Let's get a quick overview of our design file before we dive deeper. Per default, you're going to have your file tab open showing your layers. There are also other taps, so we have file, assets, design, and prototyping. But let's stay in files for now and get to know that. You can see right up here, you also have something called pages, and if you click on a little plus button, and you can add an additional page. And this is basically a whole empty new Cvas. Pages can serve different purposes, and we're going to talk more about them later on. You can generally add as many pages as you wish on a paid plan, but on a free plan, you might be limited to just three. If you want to name a page, then simply double click and you can change the name, and by right clicking, you can delete a page. That's our left panel. Then in the right hand side over here, we have the properties panel. Very important is that if you click on the gray background area of your canvas, then you get an overall view of what's happening in your file. Later on, you're going to see all the styles, variables, so all the overall settings. If you select a frame or a specific element like a text or shape, then you're going to get the information about that element that you have currently selected. Up here, you can see who is in your file. You can get the present mode, so either in a different area, or you can also have an in file preview, and you also find the share button up here. All of this, we're going to get to know in more detail later on. At the bottom, you currently have your tool bar, and note these things might be moving. It used to be up here on the top before. You find all your main tools here, like frames, all the shapes, text, and so on. Note that if you hover over them, you're going to get the shortcut. This is really worth noting down because it's really going to speed up your work flow, knowing those. You also find the actions menu here. In the actions menu can search literally for anything related to your file, and you also find your I tools here. There's a section for plug in and Wichets. Again, we're going to get to know more about plug ins in a minute. Over here, you find the switch for deaf mode. We have design mode, which we're currently in, and we can toggle this if you're on a paid plan to deaf mode, and this is the area that is for your development team. If they select any element, then it will get the relevant information for code. Some of these features might be behind a paywall. This is constantly changing, so make sure you consult the FICMA pricing page and you can see what's currently available. 9. BASICS: 04 Adding shapes and colours: L et's add some content to our frames. So here I have a frame, which I called frame. Now let's add some shapes. I'm going to go on the shape tool, and I can choose between rectangle, lines, error, ellipse, and polygon, as well as star. Now, notice how behind each of those shapes, you're going to see the shortcut. I'm going to go for a rectangle. And if I would simply draw it, then it wouldn't keep the shape. So if I want a perfect square, then what I can do is I hold down shift, and I then draw. I can select it, and I can then position it and notice how Figma is going to give you helping lines. Now let's draw a circle. So if I have a look at my menu, I see that the shortcut is. So let's press O. And again, I hold down shift so I get a perfect circle, and I'm going to add a circle. Let's add another shape. I'm going to go for a polygon. This one, I'm simply going to draw like this. Now I notice that there's a little more space. In the right hand side, you can see that now it has a count of three. You could move this one up and then you could create other polygons. I'm going to leave it at a triangle for now. Let's add some color to this. I'm going to start with my circle here. Make sure that you have the shape that you're after selected. And then on the right hand side, in the properties panel, you can change a color via fill. You can either click on the color swatch and then simply pick any color, or you can also add a Hx coat, which is what I'm going to do. Now I'm going to select my triangle. This time, I'm going to use the color wheel, and I'm simply going to go for a nice orangy red. For this square here, I want to use a blue. Play with the fil menu to familiarize. You can use opacity so you can simply add any number. You could make the fill visible and unvisible, and you could even add more fils. This is however something I rarely use. If you click on this watch, you can see that here, you can also change the gradient, and we can change this into an image fill, which is something that we're going to use later on. We could also add a stroke. Now I could add this to this single element, or I can simply select all elements. Simply keep your mouse key down and select everything. I can now click on the plus button next to stroke, and you'll see that now they each got an outline. I could change the stroke to a thicker stroke, something like four. If you, for example, wanted a dotted line, and you could do this here by clicking on the three dots and change from solid to da. Just as you did with the fill, you could change the color of the stroke. 10. BASICS: 05 Manipulating elements: Let's learn about manipulating elements on the canvas. If you select any element, then you're going to see the properties in the right hand side panel. Note how different elements are going to give you different properties. In the first section, usually find the positioning for this to work, select more than one element, just hold your mouse key pressed, and you can now align them. You can see these little blue lines per default, they always point to the left and to the top of your nearest parent frame, and you can see the positioning here, so you could make that very specific just by typing in a specific number. We're going to talk more about the constraints menu later on, but you can toggle it on and off and then you can change the constraints. What the constraints do is literally they pin whatever you have selected to an area on the parent frame. If I change it from left to right and I now resize, you can see that this is now stuck to the right, and these ones here are still stuck to the left. But don't worry too much about this for now. Let's just select all of them and sent to them again. Further below, you have the Transformation tool. Let's select our square to see this better. And with this, you can rotate your elements. You can do this right here in the menu, or you can also get closer with your cursor to the element, and then you see this little changing error. Once you see that, hold your mouse pressed, and you can now also rotate right on the Canvas. And over here, you can flip elements, rotate them, and so on. Now, this part down here, the layout, this is the important part with your dimensions. If you have an element selected, let's just select our circle again, then you can see a little clip here. Currently, it's unclipped. If I would change this width to 200, and you can see it will only change one side. If I want both of them to be changed equally, just make sure you have the clip selected, and now you can change anything and it's going to be applied to both sides, really handy. The great thing about these fields is you cannot only type in numbers, but you can also use it to do some basic calculations, so anything from plus minus division and multiplication. Like with most things, anything you can do over here in the properties panel, you can also do right on the Canvas. As you get close, you can see this little error up here. You need to get close to an edge for this to work. And now if you hold shift down, then you can resize this keeping the proportions in place. A little hidden tip. If you have a circle and you hover over it, you're going to see the arc tool appear. If you keep that pressed, then you can manipulate that circle even further to your liking. Pretty cool stuff. We can also add corner radius, choose one or more elements, and then in appearance, you find the corner radius, and you can add that simultaneously to all corners, or you can also open the individual corners menu, and then you can just apply it to the corners of your liking. 11. BASICS: 06 Align, tidy up, and measure: Let's learn how to align tidy up and measure between your objects. So we're already familiar with the alignment. But another option I really like is if you select more options, then you get the tidy up feature here. If you hover over this, you're going to see these little handles, and you're also going to see these circles. So it tidied this up and it created the same distance between all of your elements. Now notice I am using my rectangle that it's still a polygon and sits inside of its shape. What I could do is now, I could select all of them, and I could change those handles and that will be the same for all of them. I could also use the properties panel to manipulate this as it's now going to give me the space between those elements as an own property. You can also select any of those shapes and then swap it out quite easily as soon as it's tidied up. Now, if we select all of them, then they're not aligned in the center yet. You can however select all of these together, move them, and then Figma is also going to show you some guiding lines to get the center of your frame. Another handy tool that I use all the time is that if you select a shape and keep pressed and hover over any other shape, then it's going to show you the distance. This works to the edge of the parent frame or any neighboring objects really, really handy. You can still move it while you have all selected, and then you will see how the distance changes to this object. 12. BASICS: 07 Adding and working with text: Let's add some text. From the toolbar, select the text tool or you can simply press t. There are two ways you can add text. You can either simply click anywhere, you want to add the text, and then you can start typing. You could also draw a text box. Let's hit T again, and I'm going to draw a text box, and I can now add the text here. It doesn't matter which approach you're going to use because you can always change it via the text menu, which is what we're going to get to know now. I'm going to keep both of them. This is going to be my headline, and I'm going to keep this one and just copy in some more dummy text, and we can use it as a copy. I can open a textbox larger simply by holding down my mouse key and dragging it. First of all, I want both of them to have the same type face. I select both and via the menu, I'm going to select a typeface. You can see that all Google fonts are pre installed if you're using the Figma app. Also, any phones that you have locally on your computer are going to show up here. I'm going to go for a Google font called Poppins. Now before I go to change the size and the width, you can see that this is a little bit all over the place. Let's tidy this up. I'm first going to go for what's going to be my headline, and I'm going to set this to auto width. That means that the text box is always going to adjust to anything that I add in here in width. My copy text, I'm going to set to fixed width and auto height. That means that it's going to take the full height in and whatever I add, it's going to adjust to this height. The last one here is fixed height and fixed width. And to be honest, I hardly ever use this. Let's select our shapes, pull them down and make some more space. So now I want to change the weight. I can do this with the second drop down, and I'm going to have my headline in bold, and I'm going to leave my copy text in regular. So obviously, I want my headline to be larger, so I can do this with the text size here. You can either type any number or you can also use your arrow keys on the keyboard to go up and down. Again, if you have shift pressed, then you're going to jump in your nug amount. I'm going to have a big hello on the top here. Now, my copy text, I'm going to have this box even larger, I'm going to keep at 16, which is the standard size for copy text. The next one here is the line height. This is a really important one. The line height is, we can see this better at our headline, this little space at the top and the bottom of your text. This is like a natural gap that we're creating. Always leave that at least at auto which corresponds to 1.5, or you could even go higher and set it to 1.7. Can calculate this, so you could say 16 is my text size, and now I am multiplying this by 1.75, and therefore, it would give me the pixel value of 28. You could also use a percentage notation, so I have 175%. If this is all new to you, then just leave it at auto for now, which is giving you a really good line height. Whatever you do, don't set it to the same size as your text or even smaller. Because what would happen is that you would lose the line height, which might be okay on a one line headline. But in your copy text or as soon as something is changed, like the textbox changes, as a browser window changes, then text is going to be squished together and we don't want that. The alignment is left center or, so pretty standard. This little tool here means that if you add more text, which direction is going to grow to. The default we have it on means that if I copy more text, let's just add more text in here, it will just be added to the bottom. Now, if you had this set to center, then what would happen is that this would grow from the center and obviously the same if you had a set to the bottom, it would grow upwards. You can also open the extended menu, and then here you find more alignment option. Please never use text align justified. I don't even know why it still exists to be honest. The ones you're probably going to use more is like Underline and things like that cases, and you find more advanced things like vertical trim, paragraph styling, and in details, even more things like certain indens, or if you have specific number positions and things like that. But most of the time, the standard menu will be just fine. Just as any other objects, you can select text and you can align it. And any change in color, you would use the film menu. And by the way, in Figma and UI design in general, text always has its own box. Headline has an own box and the copy text has its own box. You could technically have this headline inside the same box, but it's not how we set up UI design. 13. BASICS: 08 Nesting frames – The Figma superpower: Figma is really all about nesting frames. In the beginning, it might not seem so obvious why everything should be placed on a frame. This is something that you're going to understand much better once you move into more advanced features, like working with components or also layout. Let's have a look what nested frames would look like. Here you have a parent frame, and inside this parent frame, you have more frames. So you have an orange frame, a red frame, and a blue frame. You can see that in the left hand side layers panel, you can move the frames around simply by dragging them. Now inside those frames, I still have more. So if I click on my blue frame or open it via the layers panel, you can see that I have a shape, but I also have another frame that holds some text. So this would be something like a button that would again be a nested frame. If you select any frame and move it, then everything you placed inside will move with it. If you drag elements between frames. For example, let's say this shape, I drag it into the red frame, then you can see that it automatically reorganizes in the layers panel. So you don't need to worry about this. I can also simply drag an element out of the parent frame, and it will automatically create another frame on my canvas next to it. You can also draw frame. So if I hit F, I can simply draw a frame inside of here, and if I draw it over certain elements, then it's going to hold these elements. But let's go back a second to our original setup. If you have all your layers open and want to collapse them, then simply select the parent frame and hit option or old L. If you want to jump down to the next child element, then hit enter. Notice how that's going to select all the frames on the next level. If I hit enter again, it's going to go one step further and so on. With the backward slash, you can chip back to the main parent. And don't forget with old and L, you're going to collapse older layers. If you want to deep select a layer, so let's say you want this button here, then you would have to first click all your way through. What you could do is simply hold command pressed and then select the layer hereafter. This is actually the shortcut you would really need to remember because it's something you're going to use all the time. It's good practice if you already start thinking and designing the basic elements of your design with frames, and I'm going to show you how this works. However, don't get stressed if here or there, you make a little mistake or you're unsure what to use. You can always fix that later. 14. BASICS: 09 Frames vs Groups: The next question you'll probably have is why frames and not just groups in FICMA? Because in FICMA, we could simply group elements by selecting them and hitting command and G. Let's have a closer look at this. Here I have a frame, and this frame holds another blue frame and an ellipse. And here I have the same setup, but this is a group, as you can see in the layers panel. Now I can move them as a group, so this is what I'm after, and I could even place them into another frame. Let's say drawing a frame around them. Then you can see both of them sit nicely inside of this frame, whether it's minesed frame or whether it's minsted group. In the beginning, it seems like there isn't much of a difference, so why not just go for this one? It's true when I start designing, sometimes I actually use groups. They're somehow faster and easier to manage at the beginning. If I do a quick draft of something, I often start with groups. You actually don't need to worry because even if you have a group, you could always convert this into a frame later simply by using the drop down menu on the right hand side, and you could always convert any frame back into a group, if for whatever reason you wanted to. So in the beginning, don't stress yourself too much about how you need to set all of this up. It's going to come to you once you move onto the more advanced things, like auto layout design with components, as well as prototyping, where you're going to notice that you're simply going to need a frame or Figma is even going to give you a hand and convert everything into frames for you when needed. Let's still try to get in a habit of working with frames. For now, just a few basic differences that you might notice right away. The first one is if I have a frame, then you can see on the right hand side, I get this little box can tick, which is called clip content. Now, clip content is really handy, especially because we're using the frame to represent our viewpoard or our device size. Therefore, we're going to have content that overflows. This is something that later with prototyping, we might want to animate, but in the beginning, we don't want to see all of this overflow, so it's really handy that we can show and hide this. I can't do that on a group. You're also going to notice that if you want to use this as your background, let's say we're just resizing this one here, then we have exactly the same look. If we're using this, then we're missing some features. Have a look if I switch over to the frame. You'll see I'm getting much more features like layout grids and all of these different selections. Here I'm getting quite a few. I could, for example, add auto layout, something we want to do later on. If I take it off, you'll notice that Figma was nice enough to convert this into a frame for me. So rather than stressing about the right approach, I recommend just jump in, get some tractors, and once you reach the more advanced features, it's going to all fall into place. 15. BASICS: 10 Designing with nested frames: Let's set up a first design with nested frames and figma. Here's a classic example. I have a parent frame, and this is called block, which holds other frames and elements. You can see here I have my navigation, which is also a frame that holds another frame, and inside, I have some lines representing the burger menu. By the way, I can just drag this up here if I want to change the order. Next up, I have my headline, and you can see that headlines or just text as such is not placed on a separate frame unless it's like part of a card or another element. A headline, you can just place freely on your parent frame. Then I have my card here. You can see I have two cards. Again, if I wanted to change the order, simply drag that within your layers panel. Inside of my card, you can see I have a shape, which I called image, and then I have a headline, and I have some text. So Let's recreate this and in the process of building, it will become much clearer why and how I set up the different elements. Okay. Let's move this a little bit. Let's hit F, and let's add an empty screen right next to it with the same size. With shifting two, we send them right in the middle. I'm going to go through this quite fast, so feel free to just pause the video and try out different steps in your own time. The first thing I'm going to do is I'm going to press L and it activates the line tool. You can see that up here, the shortcuts. And I'm going to draw a line for my burger menu. Let's set this to 40. And what I'm going to do now is going to select this hit Shift Option or aught. And then I'm going to drag down a copy. And you can see that I can now see the direct size. If you don't have that, you can also select it and just use the tidy up tool. Now let's select all of them and I'm going to make them a bit bigger so we can see them better so two pixels. Now, the next thing you might do is go and change that into a group, so command and G would create a group. On the left hand side here, you can see a group and you can call this burger. And to be honest, for right now, that would work just fine. If you later want to change this into a frame, then you can simply select your group, and in your right hand side properties panel, you can simply switch between frames and groups. Note how the group, if I wanted some extra space is not allowing me to do that. So what I'm going to do is I'm going to turn this into a frame for now, and you can see it would show me everything if I clip, but it's going to cut off some stuff. But what we can then do is simply press command, and you can now resize this frame to your liking. Now let's finish of f navigation, simply press F. And instead of picking a frame, I'm going to draw a frame, and I'm going to draw it around the burger that I just made. You can see if I draw it around any element, then this element is going to automatically sit inside the frame, so it's going to move with this frame. Let's give the background some tint so we can see it better. I'm just using my fill and just picking a slightly darker color. Let's make sure we have a fill here as well. In case you don't have a fill, just press on plus, and it's going to give you white as a default. You can still select your burger inside here. If you press command, you can even deep select, so our strokes. But the easiest way is actually to hit enter, and that selects all child elements, and you can then use the alignment tool to center in the middle of your navigation that you just created. Next one up is some texts. Let's press t, and I can simply draw a textbox wherever I want to add this. I can add text in here, and I'm simply going to copy the text I already wrote, and I'm going to place it inside of here. Now you can see that that automatically took the styling of that text. If you wanted to change that, you could do this over here. Get in the habit of always adding auto height to your text. This will simply mean that if I am deleting some texts or if I am adding some text, that the textbox would automatically respond. Let's add the frame for our card. I simply hit F, and instead of using the preset menu, I'm going to draw this card onto my canvas. I'm going to add a base of an effect, so that's going to give a shadow to the background. Notice if you don't see anything that make sure that your frame has a fill, if it doesn't simply click on plus, and it's going to give it a whit default fill. You can also change the effect by clicking on the effect menu. I'm going to add this area for the image to my frame, so I'm going to hit r, and I'm going to draw a rectangle. If I draw it onto my frame, you can see that in the frame menu, it's automatically added to the frame. If I double click, I can change this to image. There's a lot of opinion about whether a placeholder for an image should be a frame or should be a shape. Don't worry too much about it. There's no right or wrong. Both approaches will work. You'll generally see me using shapes a little more than frames in most cases because I feel it's easier to add images to them. But in some occasions, a frame will make sense. Sometimes I even use a frame with a shape inside if I'm working with advanced animation and zoom effects. At this point, don't worry too much about it. Use what works best for you. Now let's add our headline, so I press T, so I get my text tool and I write headline. For my copy text here, I'm just going to be lazy and copy that over from my example. Now notice how this is already set at auto height, and I'm going to leave it at this. You can adjust it however you want to set up this card. I'm also going to have this headline at auto height. In general, auto width, I would use for something like buttons where I know it's not going to flow into a second line. And I'm going to rearrange them a little bit. Fantastic. Now, one thing I want to point out is notice how here we have clip content. Clip content, let's just draw another shape in here. If I had, let's say a circle, you can see that it's not going to display the full circle. If you select the parent frame, then you can see everything outside of your card. Sometimes if you don't see elements, especially if you're working with an outline of something, then make sure that your clip content is set. To make a copy of your card, simply select a card, press, alt or option, and little tip hold shift press as well. Then it will copy it just in the line below, and it won't move left and right. Here you go. Your first layout is done. 16. BASICS: 11 Re usable grids with styles: Let's create some reusable grids. Here I have my block page, and I have another detailed page if I click on this article. Now I want to add the same grid to both of them to make sure that they follow the same overall layout. To add a grid, simply select a frame. And note this works on any frame, so in this case, I'm going to select my parent frame here, representing the viewport, and on the right hand side, I'm going to click on layout grid. But default, you're going to get this pixel grid, but we don't want that. We want columns. Click on the icon and then from the dropdown, choose columns. You can change the count, so I could change this to four, and I can also set a margin. So let's try something like 24. Note how I always work with multiples of four or eight. And Dn for the Gutter, I'm going to go also for a multiple of eight or 24. Actually, let's move this up a little bit to 32. Now, there are different kinds of grids. Stretch is probably the most common one. That means that if I change the width, then it's going to stretch, so the column stretch, and the gutter and the margin stays the same. Remember, you can always go back to the original size via the menu. Now, if I go for center, then that will mean that the grid stays in the center. And I would need to figure out what width I would need in here. So you need to do a little bit of math to find out what you're after. For our design, let's stick to stretch. I could now apply the same grid to my other frame simply by going through that process again, but it's much easier and better practice to save it as a style. I'm going to select the frame where my grid is on. Then where I see the grid that I just created, click on the Styles icon. You can now click on the Plus and you can save it. I'm going to call it mobile grid. You can add some more description here and then create the style. If you click on the gray Canvas, then you're going to see this grid style saved in your overview. If you write, click, then you could also alter it or delete it. Now, if we want to apply it to any other frame, simply select that frame. And then from the grid menu, if you hover over it, you're going to see the styles icon, you can now select that grid. I can now start to align, for example, my text boxes to the grid. Notice that with things like these cards here, this is later going to be also layout. So all of this is going to work a little more automated. But for now, let's do it by hand. I can move the little back button in here, aligning with the grid. With my image, I could choose whether I want this image here to go to the edge or whether I want this to sit in the grid. If you position images on the grid, always make sure that you use the file columns, don't do anything like positioning it in the middle of a column or something like this. So for now, I'm actually going to use the full width, and then I'm going to do the same with my textboxes. Let's just make sure that they sit nicely in the grid. You can hide or show the grid either by using the right hand side menu. If you hover over it, you see the si icon, or you can use the short cut control and G. 17. BASICS: 12 Figma community and Plugins: Plug ins and the Figma community. If you come back to home, then on home, you're going to find this little globe here currently ads up at the top and right down here at the bottom. But please note this moves around quite a bit, so you might find it in other places in the future. If you click on it, then you're going to jump to the Figma community. And here you see all sorts of files. This could be presentations, design files that you can use. Some of them are free and some might be paid, but most of them are free. For example, let's say, we're looking for an icon set, then we can just search for that. And then here you see different Consets. If you like some of them, then you can go to the page, so you can browse them a little bit, so you're getting a little preview of what's happening in here, and you can then just click open in Figma and it's going to create a duplicate of that file in your FIMA account. You can also search creators. So you could, for example, search my page on the community, so just type in Kristine Valor. And then if you jump to creators here, you will get to my page. You can also use the direct link, which is figma.com forward slash, and then just use the handle, which in my case is at Moon earning. Here you can find all my resources for free and just duplicate them and play with them in your own Figma account. Another thing that we have here are the plug ins. You can either search them or up here, you have a plug in tab as well, which shows you some popular plug plugins, accessibility, and so on. Let's just have a look, what it gives us for file organization. Then you get a list of plugins. You can see how many people are currently using it, and then you could just open it in your file. You can also open plug ins right in your design file. Jump into your actions menu, and you can just search them here in the normal search or jump to plug ins and widgets, and then you can also search any topic you're interested in. I want to show you a really great plug in called HTML to Design. Once you see the plug in, then just double click it and it's going to open. What we can do with HTML to Design, we can just add a URL to any website, and then we can from a URL, create this website in Figma. So here you can see the page that it imported and you can see everything as editable. So I can, for example, pull out this navigation here, and then I can just work with that and I can go in here, I can alter all the texts and everything. So this is really great to get going with any website that you want to play with. 18. BASICS: 13 Adding images to your designs: Adding images to your designs. There are different ways to add images to your designs. You can either use a film menu and import them, you can bulk import them, you can copy existing images from your artboard. You can create them with AI, or you can use a plug in such as Unsplash. So the first option is to simply add an image via the fil menu. So select your frame or shape and then jump into fill, and then switch over to image. You can now get the option to choose an image, and you can simply select that image from your file. However, this is a little slow. So we could also bulk select those images, hit shift command or on Windows Control, and K, and you can now select multiple images at once. You'll see on your cursor, a preview of the next image to place and the number of how many images you have stored. You could add it directly on the Canvas, or you can click into any shape to place the image. You might also have the situation that you already have images in your design file that you want to reuse. Now, you don't need to export and import them. You can use them right from here. Simply select the image, hit Shift command and C, and it is going to copy a PNG, and you can simply paste this by pressing command or control and to place it into any other shape. Another option is we can also generate images with A. You can either just click on the Actions menu, and then here you find make an image or have an frame or shape selected and via the fills menu, choose image fill, swap image, and then you can also generate images here. And now simply type in what you're looking for. If you like more than one image, little tip, simply drag it on your desktop and then you can store it, and then later on, you can always use it at any other elements. The last option, and actually, my favorite one is using a plug in. Open the actions menu, click on Plug ins, and then type in Unsplash. Double click it to open, and you can either type in anything you're looking for, or you can use some of the preset categories. Most of these images are high resolution and royalty free. You can simply click on them to fill in any image or frame in your design. So Let's add an image to our design. Another plug in that works just like unsplash that I also really like is Lumi. Just go to your plugins and you can either choose Lumi or the unsplash plug in and then open it, select any shape. And then you can search the images you like here. Let's just go for this one, and you can then place it right inside of your shape. Now if we want to use the same image over here, then what we can do, we can either use the same. Well, let's say you close the plug and you don't know where you found it. Then what you can do is use your shortcut, shift command and C to copy a PNG, then select the other shape or frame, and you can now just paste it in here. If you want to change the selection of the image, then double click, and you're going to get the image menu. Here in the drop down, which is set to fill, choose crop. You can now move the image around. You can also if you get close to the edges, you can also change the size. If you hold shift, then it's going to scale proportionally. 19. BASICS: 14 Duplicating methods: In Figma, you want to be copy and pasting quite a bit. So it's a good idea to understand the different ways that you can duplicate. You can paste in the same position, multi paste, paste here, paste to replace, or duplicate. Let's start with paste in same position. Hereby we simply copy an element, placed on a frame in a certain position, and then select a new frame and paste it there. So let's select our header, press Command or Control and copy, select a new frame. And if we simply now paste it with command Control and V, it's going to paste in the exact same location. We could also do that with multiple elements, so we can choose more than just one, select a frame, and it's going to paste in exactly the same place, really handy. And the great thing is that this also works for multi paste. So we can do exactly the same and just select several frames. Let's say we want our header and our button down here to be placed on every frame in the same position, and we simply copy them, we select all the frames, and we paste, and they're going to be in exactly the same spot. If we want a different location, we can also use paste here. So we copy it as well, but then we right click and select paste here from our menu. So let's select our circle again. I copied it, and now I'm going to select where I want to place it, and I'm going to right click paste here, and it's going to be placed right in that position. Another really handy one that I used quite a bit is paste to replace. Again, you just copy the element like before, and then you press Shift command and R, or you can also use right click, and you can paste to replace an existing object. So I'm going to select the square here. I'm going to press command or control and C to copy it. I can now select any other element and simply hit shift, command, or control, and R, and it's going to be replaced. You can also select multiple elements and replace them all at once. The last one I want to show you is duplicate, you're going to see me using this all the time. To duplicate, simply select an element, press Alt and then drag out a copy. If you hold shift pressed additionally, then you're going to copy it out in the same line. Once you made one copy, you can simply hit command and D and it's going to make multiple copies with the same distance. Let's try that out. So I can select this frame, press t, and I can now just pull out an identical copy, but you can see this moves freely. If I do the same, but keep the shift key pressed as well, then I'm going to copy in exactly the same line. And once I made one duplicate, I can now hit command or control and D, and it's going to make more copies in exactly the same distance. If we select all of them, let's hit shift and two to have them all position in the center. You can see on the right hand side and the properties panel, I can adjust the gaps between them. This is because they're all with the same distance, they're tidied up, and therefore, you can adjust them and you can also switch them around using the little bubbles. 20. BASICS: 15 Drawing in Figma: You can also use FIMA for illustration and drawing. FIMA is a vector based program. If you worked with something like Illustrator before, this will be very familiar to you. It's important to note that FICMA is primarily made for UI design setup. It's not really about illustration, but you can get some pretty nice results if you want to set up things like icons, for example. You could use simply your shapes here for illustrating. If I draw a shape and if I double click on that shape, then notice how I'm getting a different menu and you can click on it, and therefore, you're going to guess these new tools. You're going to get these curves and things like that. Now, you probably want to set up your own illustration and therefore, it would make more sense to go for your pencil or your pen tool. If your experience with illustration and have things like a track pad and pens at home, then you might want to go for the pencil. He can draw freely. However, if you're working with a mouse in a more standard setup, then you probably want to go for the pent tool. The pent tool is something you're going to be really used to if you worked with illustration software before. Simply add a first spot on our canvas, and then you get a line. If you hold shift, then you get a straight line. Let's do that here. And therefore, you can then draw any icon or any illustration element that you would need. Now, if you jump out of this menu, you could still get those points again by double clicking and you can adjust them. You can also get the Bezier curves. Let's double click to go back into our illustration. If you click on here, you could then get the curves and you can manipulate them further. 21. BASICS: 16 Scaling in Figma: Scaling in Figma. The scaling tool in Figma gets overlooked quite a bit but comes in very handy at times. Here I have a vector illustration, and you can see that this is made up out of different shapes, and these shapes have a stroke that has a different weight. Sometimes it's 28 and so on. Now, if I want to enlarge that, what I could do is go to the edge until you see the little roche a here and then whole shift down to keep the proportions and now I can change the size. However, with the strokes, it just doesn't work properly, doesn't give me the right proportions. A much better way to do this would be to use a scale tool. You find the scale tool in the tool bar right next to the move tool. So make sure you take out the sub menu, and then here you see scale, or you can also use a short cut k. You'll notice that the error looks a little bit different, and then on the right hand side here you can see the scale menu. So in the scale menu, you can either add an amount, so two times the current size, for example, If you press K again, you get back in there. You can also add a specific height and width that you want this to be scaled. You can also choose the scale direction. For example, we could make it grow from the bottom left onwards. You can also scale on the Cvas as long as you're inside of the scale tool. So just select any element and then you're going to see a new error at the edge, and as you're in the scale tool, then this is now going to scale it properly. Sometimes you get stuck in the scale tool. So if you don't find all your other settings, then this is because the scale tool is still open. Just make sure that you close it right here with the x. 22. PROJECT: Introduction: Let me tell you a little bit about our course project. In the course project that spans across the entire course, we'll be working on a podcast app design, as well as a working prototype for it. At the end of each chapter in your Figma working file, you find a prompt and a link to jump into the course project. The course project is in addition to the general course. That means that it's absolutely optional. You're not going to lose out on any information if you just run through the general classes. But let me tell you a little more before you decide. When you open the course project file on the left hand side, you're going to see pages. On the first page, we have our exercises. You can see for each section of the course, we have one exercise. These exercises build upon each other and come with instructions. Make sure that you first run through the general lessons of, for example, the basics of Figma or components. And once you feel ready, jump back into the course project file and carry on with the next steps. Don't rush ahead, because it's just going to confuse you. Each of the steps comes with a suggested solution. Note that there is no such thing as a final solution in design. It's really just a suggestion. You might come up with something completely different that's just as good. But also feel free to just grab my solution and carry on from there. If you ever get stuck in the left hand side on the pages, you find the final design. This is really the polished and finished version. You also find a page for component and guides. Don't worry, you're going to learn about all of this during the course. Now let's jump back to exercises and have a look at our first part, which is the Figma basics. I try to keep those files up to date. Yours might be looking slightly different. All of the important information will be there. No worries. 23. PROJECT Part 1.1: Wireframe: In this first part here, we're prompted to build a wireframe. And you can see there is a picture of what it should look like and you get some instructions. You can really just build this in your own time as well. On the right hand side over here, you find my suggested solution. This is really a wire frame that you can click through and see exactly in the layers panel, how I set this up. You don't have to build it exactly like this, but if you ever get stuck, then just have a look or things like this. Progress bar here, that might be a little tricky to start with. Just copy it over. It's absolutely fine. The idea of these exercises is that you really jump in yourself and figure it out. But to get started with, let me guide you a little bit. I'm going to copy this first one here. And I'm going to bring it over and place it next to my wire frames that I'm going to work on. Here we go, I'm going to just place this right next to it. Let's get these ones here out of the way. Let's put this here. This might look quite complicated and a little overwhelming, but it's actually just shapes and text. This is all we did during our basic session. I'm going to start like this. I'm going to press R and I'm going to draw this background shape. Keep shift pressed so you get an even shape. This is my background picture here in the back. And I'm going to do the same again. I press R again, I'm going to create a smaller shape here. I don't want them to be the same color. You can simply click on any gray from here. You might have something saved down here. It doesn't matter which colors you use. You can also use the color picker. So you could also use the color that I am using in my example. But it's really irrelevant for wire frame. Now I'm going to add the text. So I choose my text tool from the toolbar and I'm simply going to click to where I want to place it and start typing podcast name. I'm going to duplicate this again. We did all of these in the lessons. If you don't remember how to duplicate, jump back to the lessons. It's shift and alter option. And this way I can duplicate right below in the same row. I'm going to place this here and I'm going to call this by artist. I can now select it. And then in the right hand size in the properties panel for text, I could, for example, change this to medium and also change the text size. For example, 216. If I select the text, I can also change the fill to black. This button here or this label. You can see it is simply a frame with a text inside. I'm going to hit and I'm going to draw a nested frame. Click on the plus button next to Phil, if it doesn't come with a pill. I'm now going to round the corners. I'm simply going to copy the text from a peer. Click on the frame, paste it in size and change it. Simply drag and position it. And you can see in the Layers panel that if you select the frame, anything you drag on it is automatically placed in size if you want a little shadow for the button and you can simply click on the plus next to Effects in the right inside Properties panel. And it's going to add that. Now in my example, you can see that this is all on one frame. This is all grouped together. I'm going to do the same for my new example here. I'm going to select all of these elements. Now I'm going to press Command and G. This will group it actually for wire frames. This is quite or right. I can now call this group hero. But you might want to already start thinking in frames as we know, this is Igms superpower. What you can do to convert this quickly into a frame? Jump to the right hand side properties panel and instead of group, just use a frame. You can also select elements and right click. And then you can see here frame selection and a shortcut to you could also do this in one go or simply draw another frame around it, best if you pause the video and then try this out yourself. Now I want this headline here recently played, and we can see that this is 24 and medium. So what I'm going to do is I'm going to copy this one here over Oh, and by the way, I didn't switch on my grids. Let's do this. Let's select this pair and frame. And then on the right hand side, I can see there's no grid applies, but I already created a grid style for you. Click on the little dots for Styles and just add the mobile grid. So now you can see it. I can also align my images. Now let's get this old. And this where you get the nice distance so you can measure to it. I'm going to place this headline here and I'm going to call it recently plate. I'm going to select it and I'm going to change it to medium. I want to create these little cards here. For this card, I'm actually just going to copy the one I already have. It looks like they're pretty much the same size. I'm going to drag down this name because this seems to be, this is 16. How much is this also? 16. Okay, great. So I'm just going to change it into podcast name now. I'm already going to select both of them. This time I'm going to right click and I'm going to say frame selection. It's the same if you group it and then change it via the drop down here, or you can simply draw a frame around it. It doesn't matter. What you're going to end up with is this frame. And inside this frame you have your image. You can of course, rename those and you have the podcast name. Let's call this one here card. Now we simply want to duplicate it. Let's drag out some copies. And I always keep old pressed so I can see the distances. And I'm going to select this whole group here. Let me see. Actually, yeah, these are single ones in that one. And I'm just going to copy that whole group and place it down here. And I'm also going to copy my headline. And I'm going to call this, you might like if you paused the video here again and try this out by yourself. As I said before, you might not even need the video. Maybe it's easier for you to simply have this reference and build from there. Okay, the last thing we need now is this bar down here, the tap bar. I'm going to hit F, and I'm going to draw a frame for this. Let's give this a background color. Let's click on Plus. And I'm actually just going to pick the color from my example over here. Now what I could do is I could simply add these elements. But as you can see in the tab bar here, I already set them up into subcategories, so this is going to make it easier later on when we want to add responsiveness and things like that. You don't need to do it like this, but I'm going to show you how to already set it up in those three sections. The easiest thing is to just copy your tab bar and then remember our fields up here, they can do calculations. What I'm going to do is I'm going to add divided by three. In this way I'm getting the exact amount for one of my icons that I later want to place here. Now I'm simply going to get some texts. This text here is actually much smaller. This is only 12. I'm going to change this to 12. I'm going to place this inside of here. Then I'm simply going to hit and draw a circle. So this is just a placeholder for an icon that's later going to be there. Let's get a little closer. We can use our alignment tool. Oops, actually that's not the one I wanted, but well, let's place this. Give it some more space. Now, let's call this link, or icon, or whatever you want to call this. Let's now place it inside again. I can now simply duplicate it this way. I'm getting three of these links that have exactly the right size. I'm going to call this one home. Notice this is like on the left. What I want to do, I want to jump back. I'm going to place this in the center. Let's change the alignment of the text to center. And I'm going to call this home. Actually, I'm going to give it all the space that I have available because I might have some other wording later on here so I can make sure that this has enough space. Then let's call this one. Let's call this one saved. That's it. We have our first set up of our first screen. Let's go for the second one. Well, let's actually double click this one and call it home. Now let's bring our second one over. Let's just copy this and paste it right here. What I'm going to do here, like this, is pretty much the same. I'm going to copy this over. I'm just going to get rid of these elements. I don't need them. I have this little back button. I'm just going to copy over some text. Let me This is right, Where is it back then? I have the playlist name and the podcast name here as well. I'm just going to add my layout grid again, and I'm actually just going to copy this over, place it in the middle. And I'm just going to drag it to the edges. I'll make sure if I have a longer name that there is enough space. I'm going to select it and center the text. Then I have some copy text. I'm going to be lazy here and I'm just going to grab this and place it here because I know it's just copy text. And then I have to read more. So let me make this read more. I select it and then if you want it underlined, go into little three dots in your type settings, and here you can find the underline text. If you double click, then it's just going to change from the four width to alter width if you want that, because this is a bit like a button actually. Okay, great. Now I just need to add the episodes. I'm just going to copy a square of the ones I already have over here. I'm going to make it a little smaller. As you see it doesn't have to sit in the grid because this is like an own element. Then I'm going to copy this one. I'm going to place it back to the left. Let's actually see how big this one is. It's very small, it's ten. You can either type all capitals or what. You can also do, again, jump into these extra settings and you can change it to capital letters. Then I'm going to copy this one here and place it in here. Now this one I'm going to do the same. Let me change the settings of the text so it's all on the left. And I'm going to place this below. Actually, let's have a nice distance of eight also. I'm going to copy this again. You can see here I left some more space because something might be actually longer. What I did here is I can see this is auto, this is a line height of 24. If you click on it, then you can see it. I'm going to give a size. Let me just drag this open. I'm going to give this two lines fit in near 48. If this is a little too advanced, don't worry. Just drag it open so it fits your needs. Now this is at the bottom. I don't want this. I'm going to change the direction here to set it to the top. Now I can line it a little better. Actually, let's have a look at what they have here. They have auto and 48, probably just need to get rid of this. Okay, Now I just need this little play button here. This is a rectangle. Let's go to our shapes. In our shapes, we choose a polygon. Let's draw one. And that's it. Now this obviously belongs together, so I'm going to select all of this. Actually, I'm group it this time because I want this, as you can see here, to go across the whole width. I'm going to actually hit and I'm going to draw a frame around it. Now this is an on frame, what is called episode, let's call it episode as well. Great. Now we can simply duplicate this. Note how I want some more episodes, like going down here. This is going to go for the visible area. Remember if we select a parent frame and unclip, then we can see everything that's below. So you can also do this in my example, and you can see that actually they only have two here. But yeah, everything that is larger than your frame would become visible. Very important to always remember. This last thing I need is my little bar down here. Let's simply copy this. Select the frame, and as we know it is going to paste it right in place. Great, so we're done with the second one. Okay, great. Now we only need our last one. Let's have a look. Our last one is the episode noted that this is placed on an own frame and then we simply have a square. We have text, this play bar here. It's simply a frame with another shape inside. If this is too complicated, then just copy the one that I made here. And here we have text again. Here you can see this is simply a frame with rounded corners and a little bit of a stroke. And then I placed my triangle that I created inside of here. So have a look if you can figure this out for yourself with the given solution. 24. PROJECT Part 1.2: Design Idea: As a second part of our basics, we want to bring this wire frame alive and add some images and colors. I provided you with the material. So here you have all the images. Here you also have some icons. And I'm using a gradient. You can use this. I'm going to show you in a second how, but you don't have to. You can of course also use the unsplushed black in or any other images of your liking. Okay, let's jump over here. What I'm going to do is I'm going to copy my wire frame. You can either use the solution you worked on or you can use the one I provided you with. What I'm going to do is I'm going to copy this next to my solution again. So this makes it a little easier for me to grab everything. I actually don't need the grids, so let's switch them off. I'm just going to go bit by bit. I'm going to start with my hero section here and let's actually get our images a little closer as well. And this little gradient here I'm going to use in the second. Okay, great. So I'm going to start with the first image. I'm going to grab this, I'm going to hold shift command and see this copy is a PNG. If you're still a little unsure of how to use images, then please chimp back to the video where we find the different options of how to use images. Either copy an existing image, you can also select any frame or shape. Click on Fill, then on Image, and choose an image. Or you can of course, use the unsplash plug in which we had a look at during the sessions. I'm going to copy this again, shift command, and this is my favorite option. And then I'm simply going to press command V and copy it in here. And I'm going to do this with this little one here as well. Now you can see that I want to more contrast. This is why I created this overlay here. Actually, I think in my example, it's a nicer overlay because it spans the whole size of the image. I'm going to copy that. I'm going to place it on the image here. Now I just need to go to my layers panel and I have the image background. I have this, okay, that's looking good. And I have all this on top. So I'm going to select the text. I'm just going to change this to white. That looks nice. Don't worry too much about gradients. We use them, not too much the new eye design, but if you want to have a look, then simply click on the gradient I created. And you can see that simply instead of image, you can also create gradients here. You could change the colors as well. I'm going to put my tab bar to the side and I'm going to add the rest of my images and I'm going to simply copy all of them with my nice little shortcuts. Then I want to change the background color. I'm already going to grab my text. Let me just unclip this so I grab all the text. If you hold down shift and commands on Windows control, then you can select multiple texts and deep selected. Because this is nested, let's select all of this. If not just selected one by one, same result. And I'm going to go for some white here and I'm going to do the same for the headlines. Okay, great. So now I'm going to change my background color. I'm doing this via the fill of the parent frame. Again, I'm just going to pick it from my example up here. Let's clip it again. That looks pretty good. And that's much easier than you thought, isn't it? I just need to sort out my tap bar down here. I added some icons for you. Let me have a look. The icons that we're going to lead is the house, the search, and the heart. I'm already going to copy that play button. Let's place this over here. Now let's first of all set up our navigation. This looks all fine. I'm first of all going to change the color, the background color. I'm going to also pick from my example here, Then I'm going to select all the texts and I'm going to change that to a white. I'm going to get rid of these little dots I had here. Again, always hold shift and command or control. In this way you can deep select multiple items or just go one by one if this is still too fast. Now I'm going to add little home here. I'm going to replace this with my search. And I'm going to put my button in here, great. Now I just need to select this one, because I also want this fill color to look like in my example. Okay, great, so now I can add it back in here Again, I'm simply going to copy it. And I can already paste it on here. Now let's just do the same for this one. I'm going to grab this image, paste it inside of here. I'm going to get rid of this back, and I'm going to use another icon I was provided with. I have back and down. Let's copy them as well. Let's bring them over here. And I'm going to place this on here. Actually, let's have a look in the example because you can see that I already placed this on a frame spanning the whole width is just going to make it much easier later on to handle it. I'm just going to have this invisible frame around it. Okay, great. Now I'm going to leave as it is. I'm just going to drag this out for now. I'm going to select my text. All of it have this white now, I can change the background fill again. I'm going through this quite fast. It's really just a reference for you, Take your own time, take the suggested solution and really try to figure this out in your own time. Now, I want to work on my episodes here. I have a play button that comes with the suggested icons. I'm just going to give this a background color as well, just so I can see it and handle it a little better. For now, I'm going to get rid of this triangle and I'm going to use my Play button. You can already position it nicely, don't need to. And then select the text. Then let's change the fill to white. This one here as well. Make sure we have all of it. I'm actually going to leave this as it is because then I can fill it in. I'm just going to put that aside for a moment. No place that back in here. I can now simply grab that image. I can place it into my shapes. Notice as soon as you see the frame name, then it's jumped outside of this frame. What you can do if you want to add one more but it keeps on jumping out, then simply select it. Just make a copy, just really, really slightly below. And then use it with the keys of your keyboard, this way it stays inside. Or simply reorganize it in your layers panel. Okay, now we can select the parent frame. Let's clip it again. We can place our bar back here. The easiest way is actually just to copy one that's already placed on top and paste it back here. Let me just tidy this one here up, place that nicely. We could also organize a little bit those distances we have here. Now let's go for the last one, which is our overlay. I'm going to grab the background color from here. Now notice this one is an own frame. Let's call this overlay. This holds all the information because later on, if we click on a song, this is going to just like slide in over here basically, and sit like this. For this overlay, I have a slightly, slightly lighter color. I'm going to just pick that from my example as well. Let's get rid of this one here. We're going to do the same as we did here. We have a little down button that we're going to grab. I'm already going to place a frame around it. Actually, that was a rectangle. Let's press again. We need a frame, not a rectangle. Now we can place this around and now you can see that this is placed inside nicely for the image here. I'm going to simply copy my image either from any existing design or down here from my samples. Now I can select my text, make this white here. I'm actually going to just use my Play button. I'm going to place this over here. Remember how we can scale? Do you remember it exactly? We need to press K, the Scale button. And now I can either add any value or I could scale it up. What I'm going to do is I'm going to have to twice the size or something like that. Okay, great. Last bit is here, my text. Always make sure that you jump out of the scale tool again. And now you can see your general properties panel. So we're going to change the color for this. Now I'm going to grab this little barn here. Again, if you want to deep select, press command or control. And I am now simply going to select my high light color. Let's see if this gray also, I think it's slightly lighter. Somehow, I lost my little circle. I'm just going to grab this from my example. You can also destroy a circle again, and I'm going to place this in here. Now if this is placed like this, if you ever have something like this, then this is because this frame has clipped content. So you could just unclip it. I just gave it a little more space so that my little bubble here fits perfectly. As you can see, just by using general shapes frames, filling in some images and playing with the color, we build a pretty impressive UI design. And by the way, don't get frustrated if it's not as fast as what I showed you in this video. I've been doing this for quite a while. Plus I'm recording this so I can stop and cut out pieces. And this is simply a video to help you in real life. This is simply going to take longer. So sit down, take your time and play with it. 25. COMPONENTS 01 Components and instances in Figma: Let's get to know one of Figma's most important features components. Once you start designing, you're going to notice that you're going to design the same elements over and over again. So things like my navigation and my cards. And by the way, remember, to uncryp your parent frame in order to see all the content. Now, instead of redoing those elements and trying to keep up with any changes, it's much more handy to have some sort of template, which infigma we call a component. And from that component, you can make copies Infigma we call that an instance, which you can use across your design. So let's set this up. I'm going to pull out this navigation here because I want to get right away into the habit of having my components separate from my design. In order to turn the navigation into components, simply select it, in the right hand side properties panel, click on the component symbol. Note how this is going to result in a purple outline and a component sign attached to the name. And you can see the same change in the Layers panel. Other ways to create a component would be the shortcut, Alt or Option Command and K, or simply right click and choose Create component. Now we want to use an instance, so a copy of this component in our design. There are also several ways we could do that. You can create an instance simply by copying and pasting it or which is a little faster, hold pressed and then simply pull out a copy, which you can then place inside of your design. Note how the instance also has a purple outline, but it has an empty diamond shape. Other ways to create an instance is to jump to the Assets panel, so this is right next to your Layers panel, and he'll see any component that you created in that file or later on which you connected with an external library. You can simply pull out that component and then place it onto your design. So let's get rid of our navigation from the Articles page and then replace it with our instance as well. Besides the Assets panel, you can also use the search function, jump to assets and then simply search via the name. Let's do the same for our card. And this time, I want to use a shortcut. If you ever forget about a shortcut, simply hover over the component symbol and then it's going to show you here. So in my case, this is option Command K. Now let's jump to the Assets panel where I can see my card was saved as a component and I can place it into my design. I also want to replace the other card, so let's get rid of it. And by the way, I can also just copy right from an existing instance. If you hold Shift pressed and Alt, then you'll copy right below in the same line. However, it also copies over the content from my component. So what I'll do is I usually have my component quite neutral, so I would get rid of this image here and let's replace it by clicking on plus with just a neutral fill. And then my headline, I'm also just going to call headline. So I generally try to have all my components quite neutral, and I will then fill in the information, the content in my design. So let's find out how to do that. 26. COMPONENTS: 02 Overriding instances: Let's learn what and how to overwrite in our instances. So here we have a bunch of components, and we use instances of those components in our design. You can see this by having a look at the layers panel, and you can see the empty diamond shape. If you ever want to see the original component, then in the right hand side, right next to the component name, click on Go to main component, and it will jump to the original component you used to set up this instance. So I usually leave my components quite neutral and descriptive. But in my design, I obviously want to add some content, so I want to change those gray backgrounds into images, and I want to add an headline. So for my headline, I could just double click and then overwrite this. I can do the same for my images. I can simply go to fill and then change into image and import them, or I can use my shortcut with this shift command and K, and I'm going to bulk import those images. I can now simply drop them into the shapes. I want the cloud here as well. I'm going to select that with my shortcut Shift command and C, which will copy a PNG, and I can now simply paste it into the shape here. However, there might be some elements that you actually don't want to be overwritten. For example, this back button here, I always want this to be called back. So I can simply select my component and then select the text that I want to stay fixed. In my layers panel, if I hover over this, I can see this little lock and then lock this layer. Right now, in the design, nobody would be able to click and change this text. Now, the great thing with setting up your design with components and instances is that even if you were overriding this, you could still design in your components. For example, here, we might want to change the setting a little bit. We might want to increase the size of this text, and you can see that all instances will follow. Also, some more dramatic layout changes. Let's say we want to move our menu to the left, so all instances would follow. Two small comments, you might be wondering, why is this component here, this back component set up over the whole width, why does it span the whole width and has all the space around it? You don't have to do it like this. You could also just take the text and turn that into component and that's your button. I quite like it like this. In this way, I already know that this is the distance. I just have to put it right below my navigation, and I don't need to worry about the distance between the image being the same if I create more pages. But feel free to find your own way on how to set this up for your design. The other thing you might be wondering is, what about the text? Doesn't this have to be a component as well? Well, you could set up text, like, for example, here where it makes sense where the text is a link, or this might be a intro, where you might add more details, maybe icons or something like this. You might have a set composition and turn this into a component. But just copy text, just standard text on your design like this, does not need to be a component at all. 27. COMPONENTS: 03 What to override and what not to: What you can overwrite and what you should override. Now Figma gives you a lot of options to override. You can overwrite colors, images, text, styles, opacity, effects like shadows and blurs and visibility. But just because you theoretically can overwrite, I don't recommend overriding all of these. I generally recommend to only override text and images, so anything that would come from a database. If you want other changes like a background color, then this would be a new version of that component. So I would set up another component for this. You can later combine those versions into component set with variants. We're going to cover this at a later point of the course. 28. COMPONENTS: 04 Reverting components and overrides: Reversing components and overrides. Here I have a component and an instance, and you can see that in my instance, I overrode quite a few things, like the image, the stroke, and the background. Now, what if I am not happy with this? Make sure you have the instance selected, and then in the right inside properties panel, you can see the name of the instance, and further right, you can see three little dots, the more action menu. Right inside here, you see the reset options. We could either just reset single elements, like, for example, reset the stroke, or we can also select the card and reset everything. L et's over what else we find in this menu. So what we could also do is we could jump to the main component, so that would mean we would end up over here. We could create an additional component for this. So if I would click on here, you can see that this would just be another component. When getting started, be very careful not to use this on an existing instance because what you would expect is another card component, but what it does, it packages the instance inside another component called card, so it's nesting it, and it's probably not what you're after. So unless you're really confident with components, try to stay away from it for now. We can detach the instance. Now you have to be careful with this one. Don't detach any instances if you're working in a design system. However, if you're just exploring your own design and going back and forth between things, then that is absolutely fine to use this. But what happens, let's say you only have a component and you created this by accident. Now, there is no way in the properties panel to go back to just the original state of a frame. What you can do is pull out an instance Delete the original component. Select the instance, and notice how this also gives you the option to restore a component. This is really good news if you ever delete a component by accident, then you can just click on here and it's going to restore your original component. Right now it's not what we after. What we want, we just want the original frame of this. In this case, you would now use instance, and then you would just have a simple frame again. 29. COMPONENTS: 05 Nesting components: The great thing about components in Figma is that you can also nest them. Nesting means that we can have two components and then create an instance of one component and place it into another component. Let's take this example here. I have a navigation, a sign in form, and just some standard card. I'm going to turn those three items into components. Little tip, when you have more than one element selected, in the more options drop down, you can then create multiple components at once. I can now drag out instances and use them for my design. Just going to use this navigation here and this card as an example. But notice how I'm reusing the same button in all components. So be good practice to take the button out and create an own component for the button. I will now delete the previous single buttons I was using and replace them with an instance of my button component that I just made. I can now overwrite the text, so join up here in the navigation, sign in, and subscribe for my workshop card. And as you can see, this is all reflected on the right hand side in my design. Now, let's change our main button component. A little bit, let's add some radius and change the color. As you can see, any change to the main component will be reflected across the entire design. It doesn't matter if it's nested in a component or if it's an instance of a nested component. 30. COMPONENTS: 06 Component sets with variants: Figma variants. Sometimes you might find that you need variations of a component. Here I have an example where I have a default version of a card and a hover version of a card. The only difference here is that this has a background color. So you might say, well I could simply add that background color in my instance and overwrite it, please get into the habit of not overwriting layout changes or changes in the variation. We only want to overwrite content changes like images or text. This is a new variation of this card. Therefore, it needs to be its own component so that later developers see that this is what they need to program and plan for. Now, in theory, you could use it just like this and have two separate components. But there is a nice layer of extra organization in Figma, called a component set with variants, and this allows you to group together different versions of the same component. Note how I'm using the forward slash naming convention. They're already called the same, they're called card forward slash default, and then card forward slash hover. The first thing here would be the component name, and then the second name after the forward slash, that would be the property. If I select both of these cards now, I can see in the right hand side, components combine as variants. If I click on this, then you will see that Figma creates this purple dotted outline. Now the great thing about this is, you can now simply pull out an instance. Or you could just use the assets panel as well as with any other component. It will show you the first variant. If you click on this instance, then in the right hand size property panel, you can see a little drop down. With this drop down, you can now switch between the different variants in your component set. Now this is simply called property one now. You can also click on your component set and then double click the property, and now you can call it, for example, state. You could add more variations. Let's say that you want something like a deactivated state. Just open this up a little bit and then jump here to your first or also your second variant, and you'll see this little plus sign down here. Click on it and it's going to create another one for you. Now, what we can do is I'm simply going to give this 50% opacity and I'm going to call this inactive. Now what I need to do is I need to name the state. It's automatically just called it state three, but I'm going to change this to inactive. Now, if I select my instance, you can see that in the drop down, I can now choose between the new state and the two states I created before. By the way, if you have not turned your elements into components yet, there's also a shortcut, so you can select multiple elements, and then you get a little drop down next to the component sign in your top bar. Use that drop down and select create component set. This is going to create the component set right away. Now, I did not use the correct naming convention with the forward slash. I can also do that right now, so I can name this one card. Then I go inside and then here I have my property one, and I want to call this default, and I want to have my second one called HVA. And I can click on my component set again to change this to state. Now if I get an instance, you can see that this works just as before and has my Hova and default state embedded. 31. COMPONENTS: 07 Move components to their own page 2: How can we move our components to their own page? Here I have my components and I use instances of those components in my design over here. It's okay to store your component right next to your design while you're still working on your designs. But once you're done and you know how you want to set up your components, it's time to clean up a little bit and find an own designated area for your components. There are more advanced techniques and you could store your components in external libraries. But in a small project for now, we want to just store them on their own page. So go to the top left of your file and click on the Plus button. This is going to open a new page, and you can call this page components. We can jump back to our original page, which we can also call design now. And now if we would simply copy this component, jump to the component page and paste it, then this would obviously paste an instance. So we don't want that. So how can we move it from the design page to the components page? What you need to do is, you can either use the right click, and then here you can see move to page, and then this is going to show you the page you just created, or a better technique is actually to use command and X, and this is going to cut the component. Now you can jump to the component page, and you can paste the component here. Now if we jump back to our design page, we can see that if we click on this instance here and then click on our component sign next to the instance name, it's going to bring us to the main component and it's going to jump to the new page. Great. Let's do that for the rest of the components as well. Let's select all of them, command an x to cut them, and then paste them inside of our component page. If we jump back to design, you can see that all connections are intact. By the way, sometimes you see that people add little icons in front of the name. You can simply add them by either pressing control command, and space bar, and then here you can find different icons. Here's some that I used before for design. I'd like to use something like this rainbow. For my components, there's actually if you dig quite deep inside of your emoticons, I think around here, you find a component sign or actually something that looks like a component sign, and I quite like using this one. 32. COMPONENTS: 08 Keeping components organised: Keeping components organized. Let's say you're working on your design and you created a separate page for your components. Now you have all your components over here, but right now they are in a bit of a mess. So let's make sure that we ourselves, other designers, and developers that would enter our file, understand what's going on. So let's first of all, cluster them a little bit. Over here, I have my general icons. Then I have my card. And then over here, I have my components that have to do with navigation. So you can see the header, the tab bar, nested elements, and these icons, which are only the taped bar icons. And then further on, I have my buttons. I want to create an own section for each of them. And Noe, we're using sections and not frame to store our components on. You find sections in the toolbar right next to frames, or you can simply use a shortcut shift and S, and you can then draw your sections around the clusters you created. And I can double click on the section name and I can now name it. I'm going to name this one here navigation. Let's jump over to the Assets panel and see what happened and make sure you have view subfolders enabled. I'm going to switch over to list format, so this is easier to see, and you can see that all of my components are listed just at the top layer, and you can see that it's created a folder for my navigation items. I'm going to do this for the rest of my components as well. I'm going to hit Shift S, and I'm going to draw a section around my card. I'm going to do the same for my icons, and a last one for my buttons. So now have a look at my assets panel over here. If I now rename this, so I have card, I have icons, and I have buttons. So by creating these sections, you can see that in my assets panel, I now have subfolders, and it's easier to find my components. Another thing I love about sections is that if you select the section name, you can see this little icon next to it that says ready for development. If you click on it, then you're going to see this green bubble appear. Now, if we jump over to deaf mode, so this is where your developers would view your designs, then you can see that this creates a old folder telling developments which of your components or designs are already ready for the next steps in development. So get in the habit of storing your components in their own designated area on sections, which you can then mark as ready for development. To start with, we store our components on a separate page. But if you have a pro plan or above, and you're working in a larger team, then you might also see that components are stored in a separate file, and we're using the so called shared team libraries to work with them. As our system is getting more and more advanced, you can also see that you can add more information to these sections. Don't get too stressed about it. Start small and organize on sections, and in any additional information, you can always add to those sections. 33. PROJECT Part 2: Components: If you feel uncomfortable with components, instances, and variant, then we can now jump in. The second part of our course project, we want to turn the design that we created into a component based reusable design. You can either use whatever your solution is from the first part or you can simply copy my suggested solution from up here, which is what I did for you. How I go about is I go through my design and then simply pull out the elements that I think would make sense as reusable components. Now, there is no one right or wrong, it's up to you, and you can also change this, or in the future nest items differently. But we need to start somewhere. I'm going to show you how I approach this. I went bit by bit. For example, I started with my hero section, because I'm re using this image over here. I actually took this inner part out. I selected all of this. Let me actually get a little closer here. I select the image, the text and the button, and I hit command G or right click, and turn into a frame. I am now taking this apart, you can see down here, I just called this info. So this is what I created here. Then I did the same for the other elements. I took out the top bar, then the down bar for the overlay. So this is this here. I went through it bit by bit. So this image, then I have my cards, obviously my tap my elements here. This is actually up to you how you want to set this up here. For example, I use this as one component. You might also have this as one component. And loose text, as I said, there's no right and wrong. I just find it a little more comfortable as I'm probably going to be re, using this part quite a bit. And I decided to then do the same for the play bar. So all of this control area is one component. Again, later on you could have this as a nested component. This as a nested component, it's up to you, but let's keep it simple for now. Now, in this file, I have my final solution. If you go to pages, you see the final design and you also see a component page. So here you can see all the components, how I organize them, set them up, named them, and so on. And this is what I am using in my final design. So I suggest that you're not getting confused with my components to just copy all of this over to a new file. Let's actually select my examples as well as pull out potential components I created. And let's jump to a new design file and simply paste this here. I quite like to have my background a little lighter. And by the way, you can change this. If you click on the canvas, then you can see up here on the page, you can change the color. I just find that a little more comfortable. Now, you can have your own file with your components without getting confused with the same naming. I can either select each of those individually and then turn them into components, or I can select all of them. Click on a little drop down and create multiple components. Not component set, that's something else as we know now, but multiple components. Now some of these components I am nesting, for example, the icons, I just need to clean that up because this one is not going to know that you want it to be nested. I'm just going to pull an instance up here of this one, of this one. I'm now going to replace these elements here with the nested counterparts, keeping it all nice and clean. We would do that, and for all the icons, let me have a look, for example, for our play button here. We would also replace that with an instance, and we have the same one here. So you can see already we're like re using, which is really nice, if we would change anything in that Play button. This will be the same everywhere. This one could be a scaled play button still, or you could have this as an own component, Again, up to you. Okay, now we need to set up these designs, again with the components. Now that sounds tedious, but it's actually quite fast. So let's do that. Let's get rid of this, and I'm simply going to drag our cover over here and then our info. And then I'm going to do the same here. I'm going to delete dose, and I'm going to replace them with instances. What we need to do, of course, is we need to place our images again. Also, I'll probably do this a little tidier than I am working here. Keep my distances and everything, but do that just to show you quickly. Have it like this. We need our images. Let's go back here. And we can simply copy our images to this file. We have them at hand. Because what I would do anyways, I'll probably get rid of the images in my component. Also, be careful to always grab the image and not our little gradient overlay that we made. Now, we need to add a fill back. This is indeed a little tedious. We would need to place those images again. We would, in our components, have them nice and neutral. And then in our design, we'd have to redo our images. But like this, we can pretty quickly set up our design again as you'll see any changes obviously because now this is component based will just follow and it will be really easy to keep everything updated. Then let's just grab our tab bar as well. You can see just like this, I have now my same design as a component based design. I would do the same for my other pages to work. It's fine to have everything on one page, But remember, we do want our components to be stored away under pages. Make sure that you make an own page called components. You can now send your components over there, either by selecting all of them right clicking, and going to move to page and components. Or you can cut them, which is command and x not command and copy. It must be x. And you can now paste them on here, they will keep the connections. For example, if you're clicking on here, you can now click on the little component icon and it will jump to your main component on the page. Remember, we do want to store our components on sections. Sections are up here under frames. We want to create sections, for example, 14 icons, and then place all our icons up here, then one for navigation and so on. You can go to your exercise file in Components and Guides. Here you'll get an idea of how I organize my components. By the way, I am using a little file handling system I created. You don't have to use this, but you can use this. I have like headlines and I have little bubbles here. So I can toggle whether something is on or in the making. And I also have a little sticky nodes to add comments. Also, remember that we have components sets here. I now organized our components, we create it. And I have my back bar, my over liber bar, pretty similar, so I can combine them as variants. For example, if I use them in my design, then you can see here I'm having a little drop down to topple between them. You don't have to do that. But it's nice if you have similar items and want to organize them as we discussed in our previous sessions. In the end, our design is entirely made up out of instances except maybe some text here and there. And remember in instances we can overwrite, we were overriding older image fill, so adding older images. And we can also do the same with text. We can, for example, change the name of albums here if you want these little three dots here. If something is too long, then you can do this. Let's jump back to our components. You can do this by selecting the name, and then also go to the extras. And down here you find the text that cuts off with a little dots. Remember, any change in a component, let's for example, turn this one here around, will result in a change in the instance. 34. VARIABLES: 01 Introduction to variables: Introduction to variables. A variable is a symbolic name for a piece of data. So it's like a placeholder. Let's say we have a variable x, and we assign that to the color of red. We can then use it across our design. As soon as we change our variable x to the color of blue, so we keep the variable name, but we change the variable value, then everything in our design would follow. We still use components. We have our components, but inside and around those components, there are a lot of things like spacings, different colors we're going to use. For all of this, we're going to use variables. So in short, components are reusable objects. Variables are reusable properties that we can apply to those objects. Sounds all still a bit abstract. Don't worry. Let's jump in and try it out ourselves, and it will become much, much clearer. 35. VARIABLES: 02 Working with colour variables: Working with color variables. In our design, we usually have a set palette of colors, and we want to make sure that everything in our design follows this palette. Now I my design here, you can see that I am using red, but some of the tones of red are a little bit off. What I could do is I could now select all the different elements, use my color picker, and then jump in and pick the correct color. However, that would be quite tedious. At some point, I might also want to change this red here to another color. This is also why I don't call my colors by their name, so I don't call them orange, red, and blue. I give them semantic naming, so I can always change them. So I call them primary for my brand colors, and I give them a number. This allows me enough space to, for example, add another tone between the 20 and the 50, and I have some neutrals. Here also, I could add more tones of grade between the 30 and the 90. You can also name them anything else, for example, call to action or background. Just make sure that it's semantic. Now, in order to reuse these colors, let's set them up as variables, which we can apply across our design and components. To open your variables, make sure that you click on the gray Canvas area, and then on the right hand side, you can see local variables. If you click on the icon, it will open a mode. To create a variable, click on Create variable and then choose color. Now I'm simply going to call this 120. Now I can use my shortcut to create more. I'm going to hold Shift and enter, and I'm going to call this 150, I'm going to hit shift and enter again, and I'm going to go for 80. You could also use the drop down down here to create more variables. Now, to add a value, simply click on this field here and then choose a color picker and pick your value from either the style sheet you set up or directly from your designs. Et's also create our neutrals. I'm going to have another one with 90. Then I'm going to use my shortcut again, and I'm going to go for 3010 and zero. And now I'm doing the same. I'm simply going to pick them from the style sheet that I already set up. If you hover over your variable, then on the right hand side, you see the added variable sign, and you can click on this little icon here and now you can add it add more information, and you can also scope it. Scope means that it will only be available for certain fields. Great. So now we created our variables, so now let's apply them. So I could select any element, and then via the fil menu, click on the Styles icon. This is still a little strange that we're using the Styles icon to use variables. I would expect this to be changing in the future. For now, let's click on here to open our libraries, and here you find all the variables you set up. Notice that variables have a s and styles have a circle. We can click on this and this would apply the color variable. Now, I could do this across all of my design, which again, would be quite tedious. Remember, we want to work with components, and you can see that my design is set up in instances. So let's go back here. Let's reset this fill, and let's jump to the components that I used to create this design. I place the design next to my component, so you can see this better. Usually you would have this on an own page or even an external file. So what we want to do now is we want to go through all our component and make sure that our variables are applied because you can also see some of them, like, for example, the hovest date of my button, isn't even visible in my design, yet still I want to give the information about the correct variable here. Let's just check because here we can see that currently nothing is applied. Now, we could go through these components one by one, so I could select the background here, apply a variable, then I can select the text. But there is actually quite a nice way of doing this. So just select all of this, and then you can see here the selection colors. Now I can see here I even have an old style applied, and I want to use my variables. I also have a mix of colors applied, so you can see I have different tones of red, so I want to have all of this aligned with my variables. What we're going to do is, for example, if we have an old style, then just detach this style. And now let's go bit by red. So I'm going to go this one is a white, and then I'm going to go and select a variable for each of those colors. Because I am using the selection, so this is the outline of my component set. I'm going to leave that one alone. Because I am using this selection, it's really going to get all the colors for me. And here we go. The last one, let's even out the red of our little bookmark. And now let's have a look at our design. As I select any element in my design, you can see that the variable was applied. This is this little square, you can see in the color as well as in the name. As I run through here, even like down to the deepest nesting, you can see that everything is applied correctly. There might be some elements on my cavas here, for example, this text that is not a component. What you can do is you can also select this entire frame, and then you can see some which are leftover, and we can also clean them up. If at some point you want to edit your variables, then simply click on the Canvas background, open local variables, and change your variable value. Your entire design will follow. 36. VARIABLES: 03 Organising with variable collections and groups: Organizing your variables, collection and grouping. So he can see that I have all my variables. But on my style sheet, I actually categorize them, so I have primary, I have secondary, and I have some neutrals. Now instead of having them all in this like one row, I want to add a bit of order, and I can do that with grouping. To group your variables, simply select them and then hold shift and right click, and now you get a menu and you can choose to group. You can see the group on the left, and you can double click it, and then you can name it. So I'm going to name this one primary. If I want to see all my variables again, then I just need to click on the top. I'm going to do the same for my blue. I'm going to call this one secondary. And I go back so I can see everything, and I'm going to do it for my neutrals as well, so let's select them all shift and right click, and now let's name them neutrals. Okay, so this is organizing my collection itself, but I can also have multiple collections. So what does that mean? This is a collection that hads all of my color. On the top left of your variables mode, you can see a little dropdown. If you click on that, first of all, let's rename this collection, and let's call it brand colors. Now I want to add another collection. I'm going to click on Create Collection. In this collection, I want to save my sizing. It could be spacing, this could be size of certain cards or elements. I'm simply going to call this one size. I can now add more variables here, and I'm going to go for numbers instead of colors this time. I can, for example, set up my spacing system. I could say the smallest spacing, which is eight, actually it's called a X S, and then I can create another one and I'm to call this S, and that would be 16. I could also add numbers which could be my card width, so I could call this card, and for example, have a card, let's say at 320. What sort of collections, how many and in which way you need depends purely on your setup and project. Usually, you at least need a color collection. If you want to jump back to your color collection, then you can simply go to the drop down and go back to your brand colors, and you can see and edit it here. 37. VARIABLES: 04 Size and spacing variables: Size variables. We can also work with size variables in Figma. To apply them, simply select an element, and then in the right hand side, properties panel, if you hover over the fields, you'll see a variable symbol appear wherever you can apply them. So we could add our variable for a width and also for things like radius. Now, if you just apply those sizes to any design, you'll notice that this doesn't really work because the design doesn't respond. So for this to work, you need to set up your components as also a layout component. This is something that we're going to do at a later point. So as we start adding auto layout, you'll notice that this is where the magic of variables and sizing happens. Because now as we apply our sizes, the whole card will respond. And also, we can add all the padding and margins with our variables. So that means as we set this padding and margin and then resize our components, everything will stay in place. But more about this in a bit. 38. STYLES: 05 And what about styles?: So what are styles in Figma for? You might have noticed that in Figma, you can set up variables, but you can also set up styles. In some cases, like, for example, with colors, it's almost identical to create and to consume them. So it's quite confusing to understand why we should use one or the other. Let's understand this better. We use variables for single values, so things like a color or a size. Styles, on the other hand, we use to hold several values together. Think of them like a CSS class. A variable could also be an element in a style. Let's say I created a variable called variable size S, and that holds the value of 24. I created a style called Headline Strong. Now my style is made up of several values. Just to name a few. This could be typeface, size, line height and weight. Currently, I set all of them manually. So I say size is defined as 24. What I could also do is I could use a variable here. So I can set the size to the variable size, which at the moment is also 24, so it wouldn't make a difference. However, in a more sophisticated design system, this would come in really handy because what would happen is that I would have several textiles. So let's say I have the same headline but a soft version, and I could use the same variable. Now, if at some point, I want the size to change for all of those headlines, I would only need to change my variable size S and everything would follow. There's no right or wrong. You can use no or as little variables as you need in your styles or have them all variable up as much as you need. I would recommend if you're just getting started, keep it simple because otherwise, this might be quite overwhelming. It's really something you would use in a more sophisticated design system. Other areas in Figma, where we would use styles, is, for example, effects. So any shape or any frame in a right side properties panel, you can see effects, click on plus, and then you can choose the effect. So you have things like drop, shadow, blur, and so on. You can also click on the Little Sun icon here and change any of these values. In all styles, if you hover over the input field, you see the little variable symbol appear, click on it and you could replace this with any variable that you created beforehand. Now, as soon as you like your effect, you can save it as a style. Click on the Style symbol and then click on the Plus button. You can now name your style. You can also add a description and then create the style. If you click on the gray Canvas area, then you'll see an overview of the styles that you currently have saved in this file. On any other object, you could now simply go to the Effects menu, click right on Styles, and then select the style and apply it. We've already come across grid styles. To remind you, you can apply a grid to your layout. Click on the icon to change it into a layout grid. As soon as you like your grid, you can now save it as a style. Same procedure. Click on the Styles icon, click on the plus button, name it, and save it as a style. If you click on the gray background of your Canvas, you can see all your styles in your file displayed here. You can also click on the added field to alter them. So to give you an overview in Figma currently, we have color number string and Boolean variables. And then for styles, we have grid effects typography and gradients. And again, this might change slightly over time. So if you're just getting started, you could just use them in isolation. So for example, you might want to use variables for colors, but then you might just have typography styles where you don't use any variables at all. And that would still work fine. But as you're scaling your design and become more systematic about it, like in a design system approach. You're going to notice that you might want to use variables inside of these styles so that you have reusable values. You're not going to need all variables in all styles. For example, in grids, you probably only need numbers to set your gutter and your margins, and then in something like a gradient, you're only going to use probably color variables. In typography, you're going to see more of a mix, for example, numbers to define size and line height. But you're going to have a string because this is how you would define the font family. If you're just getting started, my recommendation would be, set up your color variables. This is really a must, and you should also have typography styles. Later on, you might want to add number variables. For example, if you're working with auto layout to control your spacing, and you might want to have some grid styles as well. You can of course have effects gradients. It depends what you need for your design. But keep it simple and I would keep them separate for now. Once you feel comfortable, you can always edit your styles and then turn any fixed value into variables. 39. STYLES: 06 Typography and styles: Setting up text styles. To create a text style, select a text, and in your right hand side, text menu, you see the style symbol. Click on it. Click on plus, and you can now name the style. I'm just going to call this text style. You can add a description and create your style. I can now select any other text and via the Styles menu. I can select one of my created styles, and it will be applied. If you want to change the color, this is separate from the style, simply choose any variable you set up via the fill menu. If you want to detach a style, then simply select a text and then right next to the style name, you find the detached symbol. If you want to delete a style, click on the gray Canvas area where you find an overview of all the styles. You can dit styles here, and you can also right click and delete the style. If we're working with A designed with components, then I recommend that you always apply your style to your components. Instead of randomly picking texts and turning it into styles, it's better to have a more systematic approach. So I personally like doing this is that once I know I like my design like this, I'm going into refining it much more, I pull out a copy of all the text that I use across my design. This might be my components. If I already created some, this might be just purely from a raw design. And so I pick everything I used, and then I place it in order. So from the largest, the most prominent one to the smallest one, and this allows me to create a hierarchy. So I end up with something like this. In this way, I get a good overview. I can also combine text that's pretty similar, and I can clean it up for things like line height. I then name it accordingly. It doesn't matter what names you use. Just make sure that you have a semantic setup. I like doing it this way around, but some people prefer first creating a hierarchy and then using it on their designs. That's up to you. Once I'm happy with my setup, I can now start saving it with the given names. So once we did that for all our styles, click on the gray background area, and you can see all of them here. You could further organize them by selecting certain styles and then either right click or use the shortcut Command NG, and you can create a new folder, for example, for all your headlines. So apply the styles to my components, I simply select the text, and by the way, if you hold shift down, you can select multiple at once, and now from the drop down, apply my new styles. I can also correct little inaccuracies. For example, here, I probably want a default strong. Once I've done that for all of my text across all components, if I jump over to my design, you can see that they inherit from my component, even if they're overwritten because that only concerns the content, not the style. Any change in style would obviously reflect throughout all components and therefore all instances. 40. VARIABLES & STYLES: 07 Documenting variables and styles: Let's talk a moment about documenting the system behind our design. With our components, we need one component as a master for our instances to link back to. So we need to store each component somewhere ideally on its own page or its own file with some additional information. Now, our styles and variables don't point to a master style or variable. So we would not need any reference or overview in our file. However, I strongly recommend creating an overview anyways to give a comprehensive understanding and documentation of use. This is useful, not only for yourself, but also for other designers, and most importantly for other developers who will later build your design. So Let's have a look how to document color. For colors, the simplest way is to add a swatch of your variable color and include the name you assigned it to. We want to use semantic naming, so avoid names like orange red or blue. Instead, use descriptive names, such as primary, neutral background or anything along those lines. The numbers behind the name are there to allow you to add more variations of the color. Therefore, I would recommend using steps of 100 or steps of ten, because if you go one, two, three and want to add anything in between later on, then you don't have any space. I recommend adding an additional layer and create separate variables for your text colors, even if this color is already represented in the neutrals. It makes it easier to keep an overall control and make sure the contrast is right. You can go even further and check these colors for correct contrast against your brand colors. You can use an online tool like web aim, or you can use any plug in in Figma, something like Stark or any other for this. Spacing. Now, I also like to add some information about the spacing I use, but this does not require a lot of documentation. In most cases, you would use a spacing system of a multiple of four or eight. Eight is a magic number in web design for various reasons, including avoiding half pixels. For example, if you would use five when scaling it down, it becomes 2.5, which is not ideal. A spacing system also saves you a lot of discussion with developers, because if you're a pixel off here and there, they'll know where to round it up or down to. I usually include a simple information sheet about the eight point spacing system to my style sheets, along with an example of how to use it. I also like to set up variables accordingly. Note. In web design, we don't use the so called hard grid. Hard grid means that there would be some pixel grid in the background to align to. We don't do that. We use a so called soft grid. This means that our spacing system always works from one element to the other and also within, for example, our components. I apply the same principle to typography. I include an overview style sheet for my typography with a focus on showing the hierarchy. You can create a hierarchy randomly or use a system like a ratio. There are great online tools available for this purpose. Alternatively, you can simply jump in step eight, which works great with your spacing system. For each of the styles, I provide additional information such as the type phase, the line height, the weight, and anything else. I prefer to present this information in a chart format, but it can also be viewed in Figmus design mode or deaf mode directly, so you might opt to not even add this. Again, I would recommend using a semantic naming approach. There are no strict rules, but avoid naming after the exact style. So don't use something like Poppins 24 bold. Instead, opt for names like headline 03 or headline S. If you're designing for a responsive page, you might need to adjust your text size at given break points, and you should also add this information to your type scale. This is a more advanced topic, and I have a whole separate deep dive course on this. I have some free examples of different responsive type scales on my Figma community page for you to download. Any additional styles like gradients or shadows that you might be using. Just make sure that you also add a page with the information to your documentation. You can store this information about your styles and variables on a separate page in your file or dedicate a separate file to it and use it as an external library. In general, documenting goes from very basic to super detailed and advanced. In the end, the important part is to communicate the system you're using in the way that fits your team and your resources and budget. So start small and you can always add and improve your documentation. 41. PROJECT Part 3.1: Colour Variables: If you feel uncomfortable with variables and styles, then let's add that to our course project. Variables are still changing a lot. So you might see a different set up in your exercise file than what I'm showing on screen. I always try to keep the exercise file up to date. So also make sure to pull the latest version. What we want to do is we want to start with creating our color variables. I took out all the colors from our project for you already in these swatches, and now we only need to set it up in the right hand side. If you click on the canvas, you see local variables in here, you can open the color variables that I already created for you. If you don't see them, then there is a little switcher. You might see some helper colors that are also set up. Make sure that in the collection you're on color and then you can see the different colors to apply them. Remember, we can just have any fill. And then via the fill, we click on the Little styles. And as I said, I expect this to be changing quite a bit in the future. And then we can select any of the variables that we set up. Now remember, we created our components in a separate file, and we want to do the same with our color variants because otherwise we would just be in conflict with the ones that I already created for you in this file with a solution. Let's jump to the file where we set up our design. And remember we have our components here on a separate page. Let's just jump actually to our component page and paste our color set here. We can draw a section around it and also have this nicely organized. Let's call this color. You can also change the color of any section. I'm going to have this white instead. Doesn't matter what you use, it's just for better visibility. Now I want to create my variables and I click on local variables and there's nothing created yet. And I click on color variable. Now I can simply select the name that I gave it. Again, you can give this any name, just try to be semantic. Now select the Swatch. And with the picker, I'm picking the color from my set. Little shortcut. Hit shift and enter. This way you can quickly create multiple variables and then fill them in. I'm going to do this for you. Here are my variables. I quite like adding separate variables. Four text, you don't have to, you can also use this, but I'm going to add another color variable which I call text on dark primary. This is actually going to be just the same color as here. It's just going to be a simple white. But I quite like keeping it separate in case I want to change anything later on. I can also check if the contrast is strong enough. Here you can see I am giving this range, so that means that you can use this color on all of those neutrals. And I did check this beforehand. I'm going to create a second one which I'm going to call text on secondary. This is also, again, this is one of my neutrals right now, but this might change in the future this way. I have it nice and separate. There is one more little thing, you can scope colors. Let's actually just make this a little larger here. Then what you can do is if you hover over the color, then you can see this little edit field. And here you could say that you only want this variable to be visible when you're selecting text. I'm not going to do this for now because it's a little advanced, but just be aware that it's there. Again, variables are changing rapidly, so this might be placed somewhere else, but it will surely be found with the edit field. Now that we've created our variables, we want to apply them and very important, we do not want to apply them inside here. We don't want to add them in our design. We could add them in our design. But it makes much more sense to go to our components and apply them to our components because then all our instances will inherit this might see minus now. But if you're having hundreds of screens, then this is making a huge difference. It's actually much faster to apply them to your components. What I do is I select all of these components. And then with the selection color here, I'm simply going to fast pick all of these and change them into, um, my variable colors. I'm going to do the same here, and I can now select this. Mind you, I am working with separate colors for my text. If I do this, I would still need to select the text separately. And then I'm just changing from this one here to my text color. If this is a little too advanced, if this is a little bit overwhelming, then just go bit by bit. Select this one and apply one color. Then select the next one and apply the next one. It's really up to you. If it's too overwhelming, then just go a step back. But for now I'm going to go the fast way. I'm going to leave the gradient alone. Very important, and I'm just going to go like this this way. This is also really handy if you're designing and you're having like similar colors and you're cleaning up. Then you can just combine them here and make sure that everything is nicely set with your variables. Only if I've did that again, then I need to make sure that my text is set in the text variable. Once I'm done, I'm simply going to pick out the text. I'm going to change this text here into text on primary. I'd actually need to create another one, for this one here in the long run, a dark text, and for this one. But for now, I'm just going to leave those alone. Did I grab this one? Let me have a look. This one here is the text on secondary. You can see this is like the gray one. If we now select any of our instances, let's select this text here, for example. Then you can see that it automatically has the variable applied. We don't need to worry about the design. There are still some elements, like for example, background colors that I might have to sort out. I usually go through this and then for example, this fill, I would want to go in line with my variables. I would clean this up a little bit of, for example, this text here. Another good way to do this is let's select this frame. And then here you can see unused colors. If I click on this little target, then it's going to tell me which ones are not using variables or which ones are using this color. I can simply change them like this. Of course, any change in the variable, let's change our highlight, for example, to a red, is going to result in a change across the entire design. 42. PROJECT Part 3.2: Typography: Now, besides color variables, we also want to turn our text into styles. Again, this is currently styles. Hopefully Figma is soon going to provide us with variables for this as well. And I'll update I'm using my picking method which I discussed during the course lessons. Again, I just want to stress, make sure that you first run through all the sessions before you jump into these exercises. Otherwise they'll be very overwhelming. How they work again, let's just refresh, is that I simply pull out everything that I am using in my design. From here, I just need to copy that out. Copy and paste. I am creating these little hierarchies. I'm also using here my small text. This way I am clustering them. If we jump back to your exercise file, you can see this. That here I have all of this and I clustered it. And you can see that up here, I came up with some headlines of 24 pixels, then 16 body text, and so on, and a very small one down here. Now if you're designing freely, then you might have something where you have a 32, 34, and this is also the moment where you can group all of them. It's not always going to be that clear. It's probably going to be a little bit of cleaning up if you're deeper into a more creative project. Once I clustered them, what I did is I created title one, title two, title three, and so on, and some body texts. And I have this scale. And I now want to turn this into styles. And you can see if you click on the gray background color. I created these styles already in your exercise files, so they would be ready to use. I could simply click on here and then jump into the style section and select any of these styles. Now we want to create this same styles in your separate files. So we're going to do the same as with our components and colors. We're going to jump in here in the separate file that you created, and we're going to add our styles here. Again, we can add a section around it to keep everything nicely organized, to have this white as well for better visibility. Now I'm going to go one by one, saving these styles. I'm going to go for this one here and I'm going to click on the style button on plus I'm going to call this one title one. I can add more information where it's used for and I can create this style. Now I'm doing the same as I did with my color variables before. I am not going to apply this style in here. Figma would let me do this. And this is a little dangerous. We don't want to have that in our design. We want to have that in our components. So everything in our design follows. For my title, I would start here. I would select anything that's a title, and then I would choose the title. I would then create my title. Two, I actually prefer first creating all the styles, and then I'm running bit by bit through all my components to make sure that everything is set up. If you jump over to your design and you click on the title here, then we're getting a better price. It didn't inherit. If I click on the title here, then it did inherit What happened sometimes if we paste text in, even though we didn't mean to, we were accidentally overriding a style. What we need to do in this case is to select our instance and then reset it where the three little dots are reset all changes, and unfortunately, that also resets the overrides. I just need to put that text in here again. Now if I select, you can see that it now has the correct style. 43. AUTO LAYOUT: 01 What is auto layout?: So Let's get an idea, what is auto layout and what do we use it for? With auto layout, we can set up our designs in Figma in such a way that they correspond to changing size. This will work on things like single components, but also on groups of those components. That means that we can really use auto layout to set up anything from a button to an entire page. You'll notice that sometimes when you apply auto layout, this works really well and it is super easy. However, in other times, it will just behave in the weirdest way, and you need to understand why. This is because auto layout isn't just a button that you click. It's made up of three pillars and you need to understand each of them in depth. The first one is layout and positioning, the second one, the resizing behavior, and the third one nesting. We're going to understand each of these pillars in more detail and then bring them together as a whole, giving you total confidence to set up anything with auto layout. 44. AUTO LAYOUT: 02 Setting up auto layout frames: L et's learn how to set up an auto layout frame. With auto layout our design elements can respond to their content. So here I have a button. Without auto layout, you can see that if I change the content, then nothing would adapt. Now, if I add auto layout, which I can simply do by selecting this button, and then on the right hand side in the properties panel, on the layout, I click on the auto layout button. If I now change the text, you can see that it automatically adapts to whatever content I'm given. Let's do the same for my card. I selected. I add auto layout, and now I converted this into an auto layout frame. And you can now see if I change anything about the content, then everything will adapt, but it will still keep all its padding. Now, this padding and spacing, if you select the auto layout frame again, you can see that in the right hand side properties panel. So in the menu here, you can see that you first get something called the gap between the items. So this is all the child items. So my child items here would be my image, my headline, and my text. Let's just get this one back to its original state. And so if I would change this, then you can see that it changes the gap between these elements. If you hold shift pressed, then it's going to jump up and down your n amount. You can also adjust anything right on the cavas, or you can double click and then type in the value you're after. That works the same for your padding. Here you have your horizontal and your vertical padding. You could change this right here. In your properties panel, you can also just type in any number you're after, and you could also adjust it on the Canvas by using the handles or by simply double clicking and adding any value. With the alignment menu, you can now align your elements inside your auto layout frame. Let's just make this image smaller so you can see it better. You could align everything to the right, everything to the center, or everything to the left. This aligns the entire text box, not the text itself. If you'd like to align the text, then you still need to use the text property settings. To layout is really good at guessing the direction you're designing in. But if you ever want to change it, then you could use these errors up here, so you could change from vertical to horizontal. RAP is something that we would use if we have more auto layout elements, so nested element next to each other. It's nothing you need right now in the beginning. You can move elements in or to layout either by simply dragging them or you can use your error keys on your keyboard to go up and down. You'll see that in the layers panel, they're going to change position according to where you place them. You can also remove the auto layout feature at any time, simply select the frame, and then click again on the auto layout button. You're going to be left with just a simple frame. Besides the properties panel, you can also use a shortcut Shift and A to create an auto layout frame, and all shift and A to remove it, or you can simply use right click. The shortcut is really handy, if, for example, you only have some text, then you're not going to see the auto layout option in the properties panel, but you can hit shift and A. This is going to turn it into an auto layout frame. So if we add some fill, you can see that it added a frame around your text. If you take off auto layout, and you can see that you left with a frame and your text inside. This is also why it's called auto layout frames because it will only work with a frame. So if you apply it anything like just a text, a group, it will always convert it into a frame for you. 45. AUTO LAYOUT: 03 Auto layout components and variables: If you're using variables and set up a collection with your spacing values, then you can use them in auto layout. This is a great way to assure consistency across all different elements and components in your design. To apply them to an auto layout frame, simply select the frame and then in your auto layout menu where you find your padding and spacing values. If you hover over them, you see a little variable sign appear. Click on it and you get a drop down with all the values. You can now choose the value hereafter. You can also use it for your spacing. You just need to go apply variable via the drop down, and you can now choose any variable you'd like to apply. And you can of course, apply the same variable multiple times across different elements. You can always change the variable simply by clicking onto it and choosing another value from the list or detach it by clicking on the little clip. If you do not see that clip in some fields, then hit the back key twice. And remember, in figment, we're working with a component based approach, so it would be good practice to turn any auto layout frame that are using multiple times into a component. If we now pull out an instance, you can see that the instance will inherit any spacing values you applied with variables. As I am altering the text in the instance, these variables will stay in place. And of course, as with any other component, this would work with any other variable as well. So for example, if you would set a color variable to your component, then all instances inherit. 46. AUTO LAYOUT: 04 Resize settings: Resizing with auto layout. So we've learned that we can simply turn any element into an auto layout frame. We can adjust the spacing and the sizing and padding, and as we alter the content, then we can see that our frame corresponds. Now, it works really well like this because if we have a look again, this is a vertical auto layout frame. But what we also want this frame to do is that if we resize it, then we want our content to also respond like that. For that to work, we need to add an additional layer of auto layout, which is called resize settings. You can find the resize setting at the top of the layout box. If you have auto layout applied, this might be at the parent frame or nested frame, then you can find it inside of here. But also any element inside of an auto layout frame. If you click on it, then you're going to get the layout box with the resize settings for this element, and this is the part we're interested in. So it's really important to understand that while we apply auto layout to the parent frame, the auto layout menu determines the behavior of all child elements within that frame. So the alignment for all of these elements, the spacing for all of these elements. Now, if we want to set up how these elements should behave individually, then we need to select them and set their resizing behavior, not the resizing behavior of the overall frame. The current options we have is a fixed size, fill the container, or hug the contents. Auto Layout became really good at guessing what behavior you might want. So you might actually get away with this. For example, this image here is already set to fill the container. And this is because Auto layout detected a similar margin left and right. But I would strongly recommend that you don't rely on these presets and really try to understand once how to set up proper resizing. The resizing is usually the part where people get most confused about auto layout, but it's not that difficult. It's really just understanding it once and practicing it a little bit. The crucial part is to go step by step. You can't rush this. So go bit by bit. The first thing we're going to select is our image. Now let's go to our drop down, and let's set this to fill the container. That means that if we resize the container, it's going to, well, what it says, fill it, always respecting the padding that we said left and right. Here we're dealing with a horizontal setup, so I'm not worrying too much about the vertical setup. Still, I'm going to have this one here at a fixed height. That means that my image is always fixed at this specific height. Now I'm going to go with the next element, which is my text, and I want to do the same. I don't want this to be fixed at the size. I want this to be horizontally to fill the container. And I'm going to do the same for my copy text. I also want this to fill the container. Now with text, I don't want to fix the height because I don't know how high this is going to be if I add more text or if I resize. This is why I want this to hug. Hug is a really cute little feature. Basically, think of it like giving a hug to the vertical content. When dealing with copy text in auto layout, and hereby, I mean anything that's not a button or a link, then make sure that it's always set to auto height. Usually auto layout does it by itself. And that's already pretty much it. Let's resize our box now, and you can see that everything follows nicely. And even if I change my text. So let's add some more copy text here. You can see because this is set to auto height and Hug the box automatically expands and auto layout responds. I can still change things like my spacing and my sizing with the auto layout menu. But if I resize, then everything will behave the way it was intended to. The auto layout feature in Figma is pretty smart. So if I, for example, have a button here, I want to add, and I turn this into auto layout, then you can see it does not only automatically pick up all the spacing, but it also already gives me a suggested resize setting. Now, in a button, Hug horizontally and Hug vertically makes sense, because if I change this, so let's say change it to read more, then you can see that I want this to be hugged horizontally as well. And by the way, I can also drag one auto layout frame inside another one. Button would be nested and it will keep its resize settings. If we wanted to move it around, then what we could do is use the alignment. And we could also change its resize settings. For example, if we wanted a full size button, then we could change this to fill container and it would sit in the middle. Note, if your text is stuck to the left, then this is probably because the alignment of the button is still set to left, and you can change it to center. 47. AUTO LAYOUT: 05 The auto setting: There's one feature which is a little bit hidden, but I use it all the time. I want to make you aware of it, and it's called auto. This feature was previously called space between in Figma and is still called like this in Flexbox, so you might also hear this name being referred to. So basically, here we have our frame with three child elements. And if I resize, then you can see that I can align this now it's in the middle, I can align it to the left, but it will always keep spacing. Now, in the spacing with the dropdown, I can switch this to Auto. With Auto, the space is equally distributed between the children. Besides the drop down, you can also simply click on the handles. Now, if you type any value, then it will jump back to the original setting. Or if you double click again and you type auto, then it will jump to space between, or as we call it now auto. My favorite shortcut, simply click on the alignment menu to toggle between packed and space between, or you can also use the shortcut x while in the alignment menu. Auto is really, really handy when we want to create things like a navigation where we want to sit some elements on the left and stick others to the right. Now, the great thing is if we add more elements, it depends where we add them. So now this would be a direct child. So now we have three child elements. So if we resize, the available space is distributed between three. But if I place this inside of my nested frame here, then I get back to my original setting. A lot of the time Auto will be just the solution you were looking for. So keep it in mind. 48. AUTO LAYOUT: 06 Learn about nesting and parent child relationship: Let's understand nesting and a parent child relationship. In order to get your head around nesting in auto layout, as well as in code, by the way, it's important to understand the parent child relationship. Here you can see a card design which I set up. Now there's no auto layout applied so far. You can see that this card has clusters. This intrap here belongs together, and then we have a text and a link which belongs together. Now, if I would select this card and simply apply auto layout, then this would happen. What happened is that auto layout added the same amount of spacing between all elements. The reason for this is that auto layout looks at it like this. Our frame is the parent element, and then anything it finds right below on the first layer of hierarchy are the children. All auto layout rules are applied to all of these children. In this case, our spacing. Now if we go ahead and nest this, now I have an auto layout nested frame here, and I also nested this part. Then auto layout is going to look at the design like this. We have the nesting example frame that is still the parent, but now we only have three child elements. Now if we change our spacing, for example, then this is only going to affect the children. We still have all our layers, but they are grandchildren now. They going to follow the rule of their own parents. Depending on how you want your design to change and behave, you need to adjust this nesting. For example, let's say you want a full width image. What we need to do is we need to get rid of our padding on both sides. However, what we also want is we still want to have some margin here. What we can do now is we can select these two, create another nested auto layout, and we can now apply the margins left and right again. If we want to get rid of the top, we can also do this, set this to zero. Now you can see you have a completely different layout, which also needs its own nesting roles. This is why it's so important to get your head around nesting, and it's really just about practice. So Auto layout really isn't just about applying that little button here. It's about thinking about the general structure of your design, then applying auto layout frames where you need them, and very important, all of these auto layout frames that you nested, as well as all the layers inside of them, you need to carefully think about what resize behavior you want them to have. It's really about understanding and combining the three pillars of auto layout. 49. AUTO LAYOUT: 07 Suggest auto layout: Let's add some magic which suggests auto layout. Here I have some designs that would need some nesting if I want to turn them into auto layout. The first one pretty straightforward, so this part would be a nested auto layout, then this part, and then this is all a vertical auto layout. The second card a little more complex. This right part would need to be a vertical auto layout nesting, and then the card itself horizontal auto layout nesting. And then we have a navigation, so this right part would need to be nested. And in between the logo and this right nested part, we would need to set auto also known as space between. Now we can do all of this by hand or we can use a little trick. Let's start with the first one. If I would simply select a frame, apply auto layout, then this would happen, not nice. Also, if we have a look at the second one, definitely need some nesting here. But what we can do is right click, and then you will see under add auto layout, another option called Suggest Auto Layout. Or we can also use a shortcut Shift Control and A. So in the layers panel, you can see that Auto layout suggested nesting for us. Now, just called this frame so we can add an additional little tip, which is click on the AI menu and just rename your layers. And then you're also going to get some nice layer names for these nested elements. Now let's have a look if that works, and that looks pretty good if I'm resizing here. If we click inside here, we can see that this actually added our resizing as well. This is set to fill, and also my parent here is set to fill. If I would ever want to change this, then I can simply delete or drag these elements around my layers panel and change my nesting. Let's try the next one and let's select this card, shift control and A. I'm going to use the shortcut. Also, I'm going to rename the layers. Let's have a look. That also looks pretty nice. I can still make adjustments. Let's say I want this image to take up half of the container, then I can simply select it and change my resizing to fill the container. Like this, I have it adjusted to the way I want it to behave. Our last one, let's have a look at the navigation. Shift, control and A, our shortcut, and let's also get in the habit of renaming the layers. This is going to rename anything that I have not named before. These ones I've named before is not going to overwrite it. Let's have a look if that applied auto by itself. Yes. Perfectly, we can see that in the alignment menu here, that auto was applied. This really used to be something that was super difficult to do before we had this little feature. Make use of it. However, I would still strongly encourage you to get in the habit of understanding manual nesting as well, because at some point you want to change around things and you need to understand why things are set up a certain way. Little side note, at the time of recording this feature, this is pretty new and considering how powerful and important it is, I would expect it to move out from this little sub menu of right clicking into our main auto layout menu soon, just watch out for that. 50. AUTO LAYOUT: 08 Ignore auto layout: Ignoring auto layout. What does that mean? So here I have an auto layout frame. I want to drag this new sticker in here, and I want it to sit on top of my image. Now, if I simply drag it inside the auto layout frame, you'll notice that I cannot pull it on top of the image as it becomes part of the auto layout as soon as it enters the frame. So what I can do now is place it inside the frame, select it, and then in the properties panel, under position, you find this little icon called ignore auto layout. In previous versions, this was called absolute position. You can now freely drag your element around the auto layout frame. Little Tip, there's also a shortcut, Hold down control, and just drag it inside an auto layout frame, and then you will have ignore auto layout automatically applied. If you want to take it off, simply click on the icon again. However, as I've resized the card, you'll notice that it doesn't respond to the width anymore. This is because it's no longer part of auto layout. Therefore, resize doesn't apply. What I can do to solve this is I can select the element in a next the position of find the constraints menu, and I can stick it to the right. This only works for elements that are not auto layout. This is also great for creating things like alert bubbles. Simply drag it into your auto layout frame, ignore auto layout, and then position it where you want it. Now, per default is probably going to cut it off. Make sure that you select the parent frame, and In the auto layout menu, switch from clip content to show content. That means that it's going to show everything overflowing your frame. 51. 12 AUTO LAYOUT: 09 Fixed aspect ratio images : Now set up Aspec ratio images with Figma. Here I have an auto layout card with an image. Now just select the element that you want to apply the aspect ratio to. By the way, this also works for frames. And then right next to your sizes you see this little lock. Click on it. And if you now resize, you can see that the image keeps the aspec ratio nicely. One little downer, if you jump to deaf mode at this moment of time, but keep in mind as was just released, this is the translation we see. What we would ideally want to have is aspec ratio as we see it in CSS, but it's still early days. 52. AUTO LAYOUT: 10 Auto layout pages: We can also use nesting to set up entire auto layout pages. In my example here, I have a component set with two variants, one for mobile and one for larger screens. Here I have an instance of this component, and you can see it's already set up with auto layout. And I have a card component, which is also set up with auto layout. On the right hand side, you can see that I have a set of instances and I already added some contents, some images and headlines here. Now we want to set up a frame that holds all of this. Let's press F. We get our frame menu, and I'm going to just pick a random iPhone size. I can now add my instances to this frame, and because they're all set up with auto layout already, I don't need to worry about the details. I can now go for the bigger layout. Now I could add my cards one by one, but what I'm going to do instead is I'm going to select all of them. I'm going to hit shift and A. Now I created an auto layout frame around here and I'm going to call this card group. I can now tidy up this group. For example, let's add some spacing. What I can do now is I can add this inside of my frame. Remember, we can select the parent frame and then with clip content, we can see the full overflowing content. Let's zoom in a little bit here so we can see this better. And what I want to do, I might want to reshuffle this a bit. I can do this with going up and down with my arrow keys. Now I have my general layout, and what I want to do now is I want to add the resizing so that it behaves with my frame. Therefore, I need to turn this parent frame into an auto layout frame as well. It automatically set the parent frame to fixed and fixed, and this is just fine because I'm dealing with this pre set fixed size. So what we're going to do now is we're going to do the same as when we set up our elements like the navigation and the cars. We're going to go through it bit by bit setting up the resize settings. We don't need to worry about the cars and the navigation itself because that's already set up in the component. So I'm going to take this instance as a whole, and I'm going to say, this entire instance, please fill the container. So let's have a look if that already works. Okay, that's great. Now we're going to go for our cards. Again, I can first take the parent group, so the card group, and I can now say fill container. Now my cards inside of this group still don't know how to behave. If I select one of them, you can see that they're still fixed. Let's select all of them. Let's use our shortcut to select a card group, hit Enter, and the select all child elements at once. Now I'm going to say fill container and in height content because I don't know how this is going to resize. That's great. But I want some padding left and right. Now, I already have the padding inside of my navigation because this is a natural part of the navigation. So with my cards, I can just add it to my card group, so I select my card group, and then I'm going to add some padding. I'm using my variables. You could also add a number here left and right. Now everything is resizing correctly. If you're dealing with mobile screens, then I recommend that you use the preset menu because this way you get a more accurate representation of different screen sizes. So that works well, but I might want to add some more sizes. So let's press F again, and let's say I also want to have a desktop version. So I'm going to copy over an instance of my navigation. And I can either copy this instance right from here or I can use the small version and simply change it over in my component properties window. So for now before we add auto layout, let's just add it by hand. And you can see this is also set up with auto layout already, so we don't need to worry about this component or instance itself. I want to add my cards. I can either set this up from scratch or I can just copy them over from my mobile version. If I would just adjust them to the screen size, then this would happen. Now, this is because the auto layout is set to a vertical layout. But for this layout, we would need to change it to horizontal. You might find switching over a little confusing in the beginning. So just work from scratch. I want to adjust the margin and padding. So here you can see that in my navigation, I have a left and right padding of 48. So let's also select my card group, and let's also set the padding to the variable of 48. We can also set the height of our card group to hug the content, so it's always as high as the cards. And we could now turn the entire screen into an auto layout screen, and hereby, we can also use variables to adjust the space between. You can choose between using variables or just type these numbers. Now, because we already set the resize behavior here and copied it over, it's going to stay the same, so this is set to fill, this is set to fill, and all child elements are set to fill as well. So if I am resizing the parent, then you can see that everything resizes nicely with it. A little extra tip a bit more advanced. You can select your component and then via the width dropdown, you can choose a min and max width. Now, if I set a min width, and let's just say I set that to 260 pixels randomly for now. Then you can see that if I pull out an instant, I cannot make this any smaller than the set amount. The great thing about this is now that I can select this whole row and I can set it to wrap. Before we do this, let's have a look at the normal behavior, so it would just stop here. If we set it to wrap, what it would do now is that it would now wrap into a new row. By the way, you cannot control when your navigation, for example, would be too small. So the moment you need to switch over to the other version. This is really something you need to test by hand in Figma and document. As you can see, it's very important to first set up your components, make sure that they're responsive. And once everything is in order with your components, you can then bring them over and turn your pages into responsive pages. If you want to, this is nothing you have to do. 53. CONSTRAINTS: 11 What are constraints in Figma?: Constraints in Figma. In Figma, we have yet another feature that lets us control the behavior when resizing, it's called constraints. Select any element inside a frame, and this must be just a simple frame, not an auto layout frame. And now you'll see blue dotted lines that point to the next parent frame. These are the constraints. You can also see them in the right hand side menu under constraints. However, only on standard frames, they're not available on auto layout frames. Per default, these constraints are set to top and left. And notice how even when you have nested frames, they'll always go up to the newrest parent. So if we resize, it seems like nothing happens because they're set to left and top. However, if we change those constraints, so for example, let's set them to left, right, to this box, and then on this red dot here, I'm going to set them to bottom and right. Notice how they change and they show you which side they're pinned to, and let's set this one here to center. You can use the dropdowns, or you can simply use the icon and click on the different directions. As we pin them in their new directions and now resize, you can see that this changes their behavior, and we can set them horizontally, or we can also set them vertically. So pinning them to one side or to the bottom seems very obvious. But sometimes we get a bit confused when we talk about center, the so called left right and scale. The difference between them is that fixed simply has a fixed left and right margin. Wherever you placed it's going to keep that distance, scale has a percentage margin for wherever you placed it, and center just stays in the relative center. And the same obviously works horizontally and vertically. Little tip, sometimes you just want to resize the parent frame and ignore the constraints. In that case, hold down command, and it's just going to ignore the constraints while you keep it pressed. 54. CONSTRAINTS: 12 Constraints and grids: Constraints and grids. Instead of setting up everything with auto layout, we could simply set up our component as auto layout components. Then what we could do is use left and right to pin them to the left and right sides, and we do the same here. We can even add elements like this little bubble here and set it to the bottom and right. Now if we're resizing, then we're getting pretty much the same result, but it's much easier than setting up an auto layout frame. However, you will notice while this works really well for simple mobile setups with just one element, as soon as you add more elements, then it's just not going to work. Because the problem here is that if we're using left right, then it's going to take the full distance. It doesn't know about these other elements around. What we could do is select all of them and set them to scale. But with this, it would work, but we wouldn't keep a set distance. So we couldn't really keep our padding aligned with, for example, our navigation. Great way to deal with this is to add a grid. Because have a look, if I'm adding my left and right constraints in a grid, then it's now going to look at the nearest column because it's taking the columns as parents. And therefore, what would happen now if we select all of these cards and set them all to left and right is that they would stay in their designated columns while resizing. Now, we can do the same for our navigation up here. Let's set it to left and right. You can see that with just a few clicks, and very few complications, we're getting a responsive set up and we can test our design. Now this is really handy for just a quick test, it also works really well, if, for example, you're working with uneven numbers. Let's say you don't want to distribute everything evenly. This wouldn't work with also layout, but it works really well with a grid. However, there are also downsides to this because the grid doesn't respect any of the vertical padding, so it doesn't know the distance between here and here. If you add more elements like text, then things start flowing into one another. But this is purely a Figma problem. This is not going to be an issue in code later on. So I still like using grids for quick testing. This is, however, not a replacement for auto layout. Your components should always be set up with auto layout, but sometimes it's just much faster to quickly test them with a grid and constraints. A little tip, you can always toggle the grid on and off, either. Use the right hand side properties panel and just click on the icon, or you can also use a shortcut Control and G. If you have the grid toggled off, then all the constraints will still stay in place. 55. PROJECT Part 4: Responsive: As soon as you feel comfortable with auto layout and constraints, let's jump into our course project. Remember, there's no new information in this. This is just some additional practice to deepen your understanding of this topic. Under part four responsive, you see some instructions and also some examples where the actual responsiveness happens is however, in the components. If we jump to our component page, then to each of those component where it makes sense. For example not to my icons, they don't need auto layout, but anything that would re size have content that is reshuffling. I added auto layout and you can click through those components and also make sure that you're opening the layers. So here you can see how I nested everything. And then on the right hand side and the properties panel, you can see the auto layout settings and also don't forget about the resize settings, really open these layers so you can see where everything is Nested. Nesting is really important to get this right. And remember, responsive design is the most challenging part in Figma, So really be gentle with yourself and just use these components that I set up for you as a reference. This is one part that we're adding it to some of the components where we need it. For example, my icons would not need auto layout, they're just standard icons. Then there is another part. So if we jump into our design, now all our instances here will inherit. So you can see on the right hand side that this has all the settings from before. And you can also see that inside of here, in the layers panel, that this has the same nesting. This is all inheriting. I don't need to add that every time I use this component or an instance of it. However, when I place it in a new design, what I do need to do now need to tell it how to behave in relation to this new environment that is placed in. There are several ways you could do this. You could set up the entire frame with auto layout or you could use constraints, which is what I'm using as I find this a little easier to handle and also still gives me more flexibility in the design. For example, you can see that this instance here has constraints set to left, right, and top. And you can, for example, see the tap bar down here has left, right, and bottom. If I now select the screen and then I use my dropdown, I can now try out all different sizes of current phones. So I usually try out the smallest one. This is not a common size, but it might still be around. So I make sure that everything still fits and then I use the largest one. And I can just jump in between here and make sure that my design works well for all sizes. You could, of course, also just grab it and resize it by hand. However, I find it a little more reliable to use this drop down here with real sizes. Now let me guide you a little bit when you jump in this exercise because you would need to add this to the components that you created in your separate files that still don't have any auto layout applied. If you have not set this up, then what you can do is jump back to exercises and just grab the suggested components that I created for you in exercise two. Now you would need to copy that to a new file, turn all of them into components, and what you should do is also make sure that you're nesting those icons again, or you can just get rid of it and forget about the nesting for a minute and concentrate on auto layout. That would also be fine. You can then set up your design with those components. If that's a little fast, then jump back to this session. Jump back to our course project part two, where we talk about components. Now if you followed along all the different steps of the course project, then this is something that you should have right now. You probably have your design set up here and you also have your components, and your design is made up of instances of those components. However, right now there are no constraints applied yet. Let's first jump into our components and make sure they behave correctly. We're starting at the very beginning. I don't need to add auto layout there, just as there are. Just fine. Now our tap bar here, I do need to add auto layout. I already set up this tap bar that each of these icons here has its own frame. This is making it quite easy for me. I can simply apply auto layout. I apply auto layout to this frame. I apply it to this frame and apply it to this frame. I can now apply auto layout to the entire bar. I now simply need to hit Enter. This way I'm selecting all the nested child elements at once and I can now set that to fill container. They're just going to fill up the available space divided by three. Let's have a look if this is working. So I'm just going to pull out an instance and I'm going to resize. That. Looks fantastic. That was that. Okay, next one, our top bars here. You could actually argue and say, well, I'm just going to leave this with constraints and it would work. It would work, but as soon as I'm having a proper resizing, I quite like to have it all uniformal. Also to have all these distances here correct with auto layout. So I'm going to add auto layout to this. I'm going to bring it back to the full size. I think I have everything at 390. It actually wouldn't matter because it's responsive now, but I quite like to have that just all the same. Now, I simply tidy up so you can see here, this is already working nicely. I have left and right, I'm just going to lined at in the center, so I have to bottom left and right, all the nice spacing. Let's have a look if this is working. Yeah, that's just fine. I'm going to do the same with this one down here. I'm going to apply also a layout. You can see for example here, the spacing is a little off. I'm also going to make this 390. Again, this could be any size, it's responsive. Now, I'm going to tidy this up and also have this at 16. This way, both of them are identical with all the spacing. Okay, great, let's jump over here. Our design elements in my playlist cover. Actually, I'm going to leave this and I'm going to use constraints on here. Even though I just said I prefer having everything with auto layout. I find that to start with this would be a little tricky. It would still work with auto layout. You could select it, you could add auto layout. Then you would have to select this gradient here. You would have to position it absolute, Bring it back in, You can see it's still working. But it's getting a little tricky. Let's jump back here. What I'm going to do is I'm simply going to set this here, so the overlay, It should actually be called gradient. The gradient I'm going to set to left, right, and the image I'm also going to set to left, right. I'm actually going to do the same for top and bottom. That means that they're always going to be scaling correctly. Now this little one here, I definitely need to add some auto layout here. We first need to nest because what would happen if we just apply auto layout? It would do something like that. We don't want that, we need to nest. I actually want these two here to have their own distance. I select them, hit shift and A, then I select those shift and A. And now I can apply auto layout to the whole frame. Okay? So remember we're doing our three steps. We're first thinking about the nesting, then we're adding auto layout, and then we're resizing. Now we need to add the resize behavior. I'm going to start with this button here. That's fine as it is actually. No, let's set this actually also needs to be an auto layout element. Let's add that hug hug. That's perfect. Now this one here, I want to fill the container. I want to fill the container. Then this container, I also want to fill the container. And this one here, I'm leaving it fixed. Let's try that out. Let's just pull out an instance to make sure it works. That no, actually doesn't. This one here, we forgot that, also needs to fill the container. Let's just add some more text and see what happens. We can see that there's a little error. Okay, let's find that error. Fill the container, that's also filling the container. This is, let's just go bit by bit fill. This is said to fill, this is still said to k. Here we have the issue, fill the container. You can see if you pull out this little testing here, then that's really helpful. Another thing I probably would do is I would center this. So it would be something like this. Okay, fantastic, that's working now as well. You can see over here in your exercise file that actually this is the example I am using. So you can see first we're thinking about the nesting nest, then we're thinking about the auto layout setting. You can see actually a position, everything at the bottom, it's up to you. And then I apply the component here at the very end. It doesn't matter when you turn it into a component. You can play with those examples here as well. Let's jump back, our cover. Our cover. I do the same as here. I just leave it important. Just always grab all the elements inside and just make sure that they all have some sort of setting. You could place images right on the frame. I am using this little shape simply because this allows me to copy and paste images faster. But a shape is fine or a frame is fine. It's really up to you. This card here. This is actually really easy one, because it only has two child elements we can apply to lay out directly, no need for more nesting. The only thing I'm going to do, I'm going to set this text to fill the container. Let's just also give that a try. Let's copy some more text. And you can see, yeah, actually this has a little dots. I don't want this to go into next row. Perfect. Remember if you want that, that is in the little extra menu of your text properties, and then you find it down here. Next one up. This one needs a bit of nesting as well. And by the way, you might encounter slight differences between what I'm showing you here and how my final set up in the exercise file is. There is several ways that you could tweak this, but it should be similar. The important thing is pull out an instance, dry it out, and make sure it works. Here we first of all need some nesting, so let's grab those two, shift and eight, create an auto layout frame. Now let's add auto layout also to the parent and make sure this is all tidy. So I want this to be 16 as well. Now if we pull out an instance, you can see that this doesn't behave yet the way we want it to behave. So what I want to do is I'm taking this middle bit and I say fill container. And now this is going to take up all available space. And it's basically going to push this little button to the right, and it's still going to stay on the left. However, always make sure that you also test with more content. So here you can see that what we forgot now is to set the inner children, so I hit Enter, I get all the child elements. You can also just pick them one by one and I set them to fill container. And this one up here as well to fill container. So if you're pulling out an instance and playing a little bit with the content, you can always get a quite good result. An idea of what is happening by the way, to avoid things like this, like if this is getting too small, the overflow, this is not auto layout, this is simply our old friend clip content. Just run through the rest of the components by yourself. So just those two to finish off. Remember first we're going to nest, then add auto layout, and then resize the holy three. Once you've finished with this, I did that for you. Then let's jump back to our design. You can see if we just click on one, then you can see that they all inherited those settings. Now we just need to add our resize behavior here. I'm going bit by bit. I'm selecting this one left and right and top. Then this one in here. Actually, let me switch on my grid because I do want to position this with the grid. Remember that constraints behave with the grid. I'm also going to set this to left and right. Then here my text to make sure it's the full width of the grid left and right. I already played with this. Apparently this is also set to left and right. Now these ones here, I need to select them. And now I'm going to right click and frame the selection because I want them to. Otherwise it would stick to the grit in the background and try to rearrange themselves. Now this is just like one element that I can position left and right. I'm going to do the same with this one down here. I'm going to frame selection left and right. Obviously my bottom bar left and right, and I want this to be stuck to the bottom. Let's try out, and as always it's just about trying and fixing stuff. If it doesn't work the way you expect it to, let's look quite promising. Let's have a look at our little one. And that's also looking fine. Perfect. Let's jump back to our standard size. Just go through this bit by bit. So select all of this here, little tip, this whole overlay. You need to make sure that it's stuck to the bottom. If you're resizing, if you want to have a thick peak, then just jump to our exercise file. In final design, you can see my designs. And you can simply click in here. And you can see the way that I set up the constraints for the different instances. And yes, it's going to feel a little bit like working with chewing gum in the beginning, but trust me, you're going to get there. It's going to get easier the more you do it. 56. PROTOTYPE: 01 The Figma prototype workspace: So let's get started with some basic around the workspace when dealing with prototyping. So here we have some design setups, some for mobile, and some for desktop, and per default, we're going to be in the design tab. Next to the design tab, you find the prototyping tap. Or you can also use the shortcut to toggle between them, old or Option eight and nine. So we're going to get to know this menu here in more detail. For now, just note that if you click on the gray Canvas, then you're setting the overall prototype settings. So any device that you want to set, going to get to know more about that later, and if you want to change the background, and that's going to be in the presentation view, which we're going to have a look at in a minute. If you however select any frame on your Canvas, then you'll see that the prototyping menu here changes, and this is where we're going to be working most of the time. In here in our design file, this is where we're going to set up the design and all the behavior of our prototype. If we want to see our prototype in action, then we need to hit the little play button at the top right hand of your file. This then jumps to presentation or preview mode. Can simply use your keyboard keys to jump to the next frame, even if you have no connections set up already. Note the order that Figma uses here. This is really handy because Figma actually picks the first frame it finds and then it goes through the row of frames. If there's no more frames, then it's going to jump to the next available frame. This doesn't have to be a clear row. It could be something like this, but Figma is going to interpret this as a row and go through the frame one by one. Can also set a device for the preview. Make sure nothing is selected and click on the gray Canvas background, and then you'll see the drop down for devices in a prototyping menu. Here you can choose a device. Make sure that the device you're choosing matches the size of your frames. If we now select a screen and chimp back to presentation mode, then you can see that we now have a device around it. We can still toggle through the designs. But note that it only fits the device that you set. As soon as we go to, for example, our desktop layouts, this wouldn't work anymore. Solution for this would be to store your mobile and your desktop designs on different pages for your prototyping. By the way, we can also add videos or animated gifts to our designs. In our design mode, this would not show up, but as soon as you jump to presentation mode, you can see your videos in action. This is only a pro feature. Besides the presentation mode, you can also select single screens in Figma and then hit shift and space bar, and you'll get the in file preview. If you forget about those shortcuts, then right next to the play button, you find a little drop down, and you can also activate the inf preview and you see the different shortcuts. 57. PROTOTYPE: 02 Setting scroll behaviour: In Figma, we can set up our designs in such a way that in presentation mode, some elements are fixed and some scrollable. Let's have a look. Here I have the design of a mobile screen. I want the navigation on the top to stay fixed while the content scrolls. I have another ad button down here, which I also like to stay fixed. Let's have a look at presentation mode, how this looks right now. So I I press on the play button, I can see my prototype, and I can see that if I try scrolling it, absolutely nothing happens. So let's jump back and set this up. For scroll to actually work, we need content that is larger than the frame. Here I select the parent frame called mobile, and on the right hand side, you can see a little check box called clip content. If I uncheck this box, you can see that my card group is actually much larger than my original frame. This is really important. If you do not have content that you can clip and that will basically overflow your frame, then you cannot add scroll. You can have this checked or unchecked. It doesn't make any difference. What you need to do now is to jump into prototyping mode, so click on the prototyping tab on the top right corner, and then in overflow scrolling, choose vertical scrolling. Let's jump back into our presentation mode and see what that did. So I can now scroll the content, but as you can see, my header and my button here are not fixed. So let's go back and set this up. Choose the element, in my case, the header that you want to stay fixed, and jump into prototyping. You'll see under position the option to fix, stay in place. Notice that here on the child element, you also get the option to set the overflow behavior. So that would be the scrolling behavior within this nested frame. In this case, we don't want any behavior. We already set our vertical scroll to the parent container. Let's also fix this button down here. We're going to set this to a fixed stay in place as well. And now let's hit play and have a look what this looks like. So my parent container scrolls nicely, and all my fixed elements stay in place. If you're ever experiencing scrolling, not working, then make sure that you check three things. First of all, in your design tab, make sure that you have clipped content that is larger than the frame you're dealing with. In the prototyping menu, make sure that your overflow scrolling is set. Once you have the parent element set up, now choose the child element you want to fix in place. Go to prototyping, and then position, choose fixed stay in place. 58. PROTOTYPE: 03 Connecting screens: Linking screens in Figma is actually really straightforward. Here I have a simple example. On this home screen, I have different color shapes. Once I click on one of these color shapes, I wanted to jump to the detail page for each color. Make sure you're in prototype mode, and then select any shape, frame text, it doesn't matter. Once you hover over it, you'll see those little bubbles appearing. You can just pick any bubble. It doesn't matter which side you're selecting. Now, drag out a connector and simply attach it to the frame that you wanted to be connected with and let go. And that's it. Figma will automatically open the interaction details panel for you, and here you can further customize your interaction. You can do this right away, or if it's closed, just click on the connector or directly on the interaction in the panel, and it will open again. An interaction is always made up of a trigger, an action, and a destination. This is the top part of this panel here. On click is our trigger, then our action is Navigate two, and the destination is our frame called orange. Now I can alter trigger action and destination simply by clicking on them. I could swap the trigger from click to drag, hovering, mouse, enter, and so on. If we want to change screens, then it's usually going to be on click. I'm going to leave it at this for now. My action is Navigate two. That means we're going to jump to a new page, and this is the one you probably going to use the most. There's also back, that means you're going to jump back to the previous page. Then there is some more advanced settings you could do with variables. You can scroll to elements on the same page. You can open external links, and you can open overlays and swap them. Then the destination. I could also choose any other frame from this dropdown. However, you'll notice as you're dealing with more frames, this is a bit tedious. So I prefer simply selecting my connector and then choosing another frame simply by moving it around. Below is the animation part. So this is how are things animated and behaving once the interaction is happening. Now, this is the fancy part, the part where you set up all this magic behavior, things morphing into one another and so on. However, just a word of caution. Micro interactions are really useful. However, I recommend that you first make sure that your actual connection and your usability is working, and everything makes sense. And then later on, with your development team, you can think about what animations and interactions you would like to add. Because what sometimes just one click in Figma is actually quite difficult to set up in CSS. So just to have it a little smooth, I'm going to go for dissolve. He can set the time it takes to dissolve into another screen, and we could also choose one of the preset behaviors. Just going to leave it at ease out for now, which is pretty nice. Let's have a look at what that would look like in our preview. I'm going to select the parent frame, and I'm just going to add a mock up around it. I'm working on an iPhone 14 size. Okay, let's hit play. So here I see my home screen, and if I now click on my orange shape, I can see that it navigates to the subpage. However, if I'm clicking on back, then nothing is happening. So let's set up the other interactions as well. So let's jump back to our Figma file. Here, first of all, I'm going to connect the other two shapes. I'm simply going to drag out a connector, and you can see that Figma saved the presets that I just used for the orange one. This is really nice and helpful to speed up your work. The next thing I want to do is if I click on back, I want to jump back to Home or actually wherever I came from. I can select all of these buttons at once. If you hold down shift, you can select multiple. Now I could either drag out the connection from here or I can click on the interactions plus button in the right hand side Properties panel. Here I can set the interaction, and I'm simply going to go for back. So let's jump over to our prototype, and that's working just perfectly. 59. PROTOTYPE: 04 Dropdown menu with overlays: Let's have a look at overlays in Figma. So perfect example for overlay is a menu. So it's basically its own frame. But if we click, for example, on work, we don't want the entire frame to change to this menu, but we want the menu to appear below our navigation here. We pretty much set them up as any other connection. So let's select work. Link over to the menu. Now, on click, instead of navigate two, we choose open overlay. In the overlay menu, I can now choose the position, so center, top left, bottom, and so on, in relation to the parent frame, or I can also choose manual, which is what I would need here. I can now see this little preview of my overlay, and I can position it on the frame as I need it. I can choose that it closes automatically when someone clicks outside, so any area around here, and I could add a background for a menu that doesn't really make a lot of sense, so I leave it. As usual, I can choose my animation, so I'm going to have this also as dissolve as usual. Let's have a look what that will look like. L et's hit play, and I can see that if I click on work, my menu appears, and if I click again on work or anywhere else on the Canvas is going to disappear again. So I can now simply connect any of these sub menu here to a new screen. 60. PROTOTYPE: 05 Animation types: Different kind of animations. In prototyping, we have the option to change the kind of animation. Per default is always set to instant. Let's hit shift and space bar, and then we get our in file preview. If I click on here, you can see that I have an instant change. By the way, if you press R, then this is going to reset. Let's change from instant to dissolve. You can see I get some more options. This is the time it will take to dissolve. Then here you can see I can choose the kind of ease in, ease out, and so on. Let's click on that to have a look. You can see that I'm getting this smoother animation. Further on, you get the so called moving animations. Move in, move out, push, and so on. Let's take push, and you can see that you get a little picture with the moving animation. You can choose from where it's going to push, for example, from bottom up or from left, right, and so on. Now let's have a look. You can see that this pushes in the entire new screen. Now I want to highlight one last animation, which is Smart animate, and this is really the magic one. What Smart animate does is, it looks for layers with the same hierarchy and name between different frames or also inside of component set between different variants, and it then Smart animate, so magically animates things like color, size, position, and rotation. Let's reset our frame and have a look what Smart animate does. We can play with the speed, and you can see that we're getting these really nice smooth animations. We can also play with our triggers. I'm going to get rid of this animation. I'm actually going to select the entire frame to animate into this frame, and I'm going to say after delay of, we're going to keep it at the same smart animates. I'm going to say if I click on this image here, then it's going to smart animate over here. So let's open our preview, and you can now see it automatically animated from the first to the second screen. Let's do that again. Now, if I click on the thumbnail, then it's going to smart animate from the second screen to the third screen. The important part for this to work is that you need the same name and hierarchy level between your different screens. Now, it doesn't matter if within one hierarchy level, for example, you would move the images around or if you have an auto layout frame or a standard frame. The important part is the same name and the same hierarchy for smart animate to function. So if we have a look, then at our second screen, if we unclip the content, we can see that, for example, this text has always been here. Otherwise, it could not animate in that nicely. It would still animate, it would show up, but it wouldn't have this nice moving animation. And the same from my images, if I want them to move, then first of all, they need to keep their hierarchy, so they're still inside an image group, and they still have the same name. And then the ones that are invisible, I simply set the opacity on the second frame to zero. So you need to be quite smart about showing, hiding, and positioning your layers to get the right animation. This is why I would also recommend to keep your prototyping separate from your design. 61. PROTOTYPE: 06 Interactive components: So far, we've used animation between different frames, and now I'm going to show you one of my favorite features, interactive components. They're basically reusable animations set inside your component. As the name stays, for this to work, we need components or rather component sets with variance in side. If you're not familiar with this, a variance set is basically two components, two or more components actually, and you can see here I use the naming convention button forward slash default, button forward slash hover. They're of the same family, they're just a different state of the same thing really. Then over here on the right hand side, I can say combine as variants. The great thing about this is, if you now pull out in instance here, then you can see that within this button, both instances are just saved as different states. Across my design, I'm going to use many instances of those elements. So I can not only save the different states they have within this instance, but I can also save the behavior. So I need to be on my prototype settings. Then, for example, to save a button behavior, hover state, I want to add. I'm simply connecting my two buttons as I would do before with any other frame. Now you can see that in my menu, it says on click, or I'm going to change this to while hovering, and it has change to set. This change to here is only going to be active within component sets. Now I can use instant dsolve or Smart animate, I'm going to use smart animate as it's simply a color. Now let's have a look what this does, so that we can view this in our preview mode, I need to draw a frame, and I can now add an instance of my button to this frame. Now let's have a look. As I hover over my button, you can see that I have this behavior safety, and this is going to be the same wherever I use this button. Okay. Now I want the same for my switch here, but I want this to be dragged over here and then turn into this switch. Now, in this case, I don't want the entire switch to be activated, but I want to take this little bubble here. I want to take select this bubble, draw out an animation, and you'll see it will say on click. In this case, I want on drag, change two, and want to smart animated over here. Now, in this case, I need to return the favor. So on drag, it's going to turn back into my original state. Now what I'm going to do is I'm going to drag out an instance, place it on my frame, and let's have a look if that works. So here is my toggle, I drag it, and you can see that it changes the color with smart animate. 62. PROTOTYPE: 07 Figma Mirror – Preview on your device: Figma has a fantastic app that lets you preview your prototypes on your mobile. Go to the Figma website and the products, you find the tab downloads. Within downloads, you can either download the IOS or Android version of the app to your phone. Once you open the mobile app, you prompted to log in. For the login, just use your standard Figma login. It's actually important that you use the exact same login as you do for your working files. Otherwise, mirror is not going to work. You will then see an overview of the files on your account. However, have a look at the bottom right and click on mirror. You click on Begin mirror, this will mirror any frame that you select at this moment in your desktobb. Any prototype settings will automatically be visible here. So I love having this open while working on my mobile designs. This allows me to see and test my design in a more realistic way while designing. Just make sure that you check that the size of the frame you're designing on is actually the correct size for the mobile phone that you're using. In my case, I have a physical iPhone 14. Therefore, my screen is also set to those dimensions. O. The app will scale up and down your design. So it will look real even if you're using another size. However, this can really lead to errors when it, for example, comes to testing touch target sizes. You can also share your mobile prototypes via the link. Make sure that you copied the link from the presentation view. It will then automatically open in the Figma mobile app if installed on a phone. Again, make sure that here the size of your prototype corresponds with the physical size of the phone being used. You don't need to worry about resolution in this case because the link goes back to Figma, which takes care of that. 63. PROJECT Part 5: Prototyping: Let's turn our course project into an interactive prototype for the prototyping. Make sure that in the pages you jump to the prototyping page. Here you find as usual the exercise as well as a solution on the right. If we select the first screen in the solution, we can either hit Shift and Spacebar and open our preview. This is a really nice and quick way to run through this inside of your workspace. But it's actually probably nicer to jump into presentation mode. Just click on the play button on the top right, and then you will get your prototype display. In presentation mode, you can scrawl and you can also click on your prototype and interact with it. This is what we're going to be building. Let's first make it scrollable and fix certain elements like the tap bar. First of all, I'm going to select all the screens that had overflow content. Remember, you can unclip over here and you can see any content that goes beyond our viewpoints. We now jump to prototype here. We can set this to vertical scrawl. If we select this frame and hit Shift and Spacebar, then we get our preview. Now we can see that this does scrawl. However, it doesn't scroll far enough because it basically doesn't respect that. Down here I have this Tapa. What I need to do is I need to give it some sort of buffer, some sort of extra space. And there are several ways you could do this. You could simply draw another frame in the background that is larger, or what I did is, let me unclip this so you can see it better. I basically packaged these card groups here. I called it Card Group and put a frame around it. So what I'm going to do now is I'm going to hold down command or control on windows and I'm just going to add some extra space. This is basically just going to use up the space. Now have a look at what happens if I now scrawl again. Now it's working. This is also one of the reasons why I would always recommend to have the prototyping on a separate page because we're going to tweak quite a bit in your designs. All we need to do now is to connect them. I added some errors here. I'm going to select this thumbnail, make sure you're in prototyping, and then you see the little bubbles. And I'm now going to connect with this one. I'm going to navigate two on Tab. By the way, you might see click here or Tab, it's exactly the same. Navigate two landing page, and I actually want this to dissolve. Might probably see instant here, that's the default. I want this to dissolve. Then from here I want to open an overlay. Notice that this is a little shorter than the other frame. I want this to move in and be laid over this original design on tab. That's correct. Now we need to change this to open overlay the overlay. This is simply the name of this frame. I want it to move in from the bottom. I have a bottom center. Yeah, that's correct. I have close. When clicking outside, I added a background of 50% you can reset scrawling position. That just means it's if you go back, it's just going to go to the top here again, which is quite nice. I'm going to do two more little things. I'm going to select this one here, and I'm going to add an interaction. And I'm going to say on Tab, go back. It's going to go back wherever it came from. Because later on I might enter this from any other place. I'm going to do the same for the overlay. Just be aware that on the overlay now we want on tab. Now if we go back then it would go back to the previous frame, to this one. Because an overlay is not a real frame, it's just an overlay. So what we want to do is we want to close this overlay. Okay, so now let's have a look that's working nicely. I'm clicking on here. It's also working now. I want to open the overlay. Fantastic. Now let's close the overlay again. Great. If I click here, I go back home. I have a little extra for you here. This is quite advanced, however, if we unclip, you can see that I have horizontal material to be scrawled. Now what you can do, as I showed you before, I placed this in a new frame called Card, and I can now set this to scrawl with parent. That's correct, but horizontal. And I'm going to do the same for this one down here, Horizontal. An important part for this to work is that notice that this frame is smaller, so this frame has the size. It finishes at the edge of the parent frame. It wouldn't work if I have this to full length, you can have a look and play with this, but as I said, it's a little more advanced. Let's have a look. And that's also working really nicely. Okay, last little thing to demo in presentation mode. You also have devices here. You can see I already set this up per default, it's set to none. You can choose a device here. Now it's important that you choose the exact device of your screen size. Let's have a look. I have 390 by 844. If I go to prototyping and device, I need to choose something that is 390 by 844, phone 14. If I now press play, then you can see that I now have this device around my design. It's just working like a normal prototype, but it's embedded in this nice preview. 64. COLLABORATING: 01 Sharing and inviting others: One of the great advantages of Figma is that you can invite others to your files, teams, and projects, and collaborate in real time. If you want to share a file and simply click on the Share button, and you're going to see the share model opening. You can see who already has access to the file, and you can also see what kind of access they were given. This could be view rights or edit rights. If you're an admin, then you can also change the kind of rights in this window right here. If you want to invite others, you can do so by entering their e mail and just send an invite or copy a share link. The interesting part is this one here. It looks like right now if you invite, then people only get view rights. That is no problem because later on once they're invited, you can always change and control that via your admin settings. Now you can change that around. You can change to anyone and then you can change this to view or edit. If you click on dit, please be careful and make sure that you first check your current Figma plan because additional edit seats might come with additional costs and you don't want a big surprise once your bill comes at the end of the month. The way to control view and dit was changed quite a bit over the past month. We might also see some changes here. Just watch out and be mindful about who you give view and who you give dit rights. Then you can see here, anyone in design, it is currently one person can access this. What that means is that is our team here called Moon Team, and then we have a project called Design. Down here, you have other links, so you can only share a def mode link. If you will be working with development, that makes a lot of sense to only give them a deaf mode link. Then we have here only a prototype link. This is something I really like sharing, for example, with clients, so they don't get access to the actual file. You can publish to the community, and you can also embed the code in other pages. If you jump to deaf mode, then you could also share right from here, and this should copy a deaf mode link for you. We can choose our file, which is probably what you're going to use most, but we can also choose to share our project or our entire team. You can simply click into one of your projects and then you're also going to find a share button here, and then you can see share this project. Again, you can copy your link or send an invite. And you can go up one layer of hierarchy, and you can also share your entire team. If you share your team, again, the bit unfortunate looks different again, so you can choose between view and edit rights, and you have further options here for control. On the team level, you can also click on Admin view. So if you're the Admin, that gives you access to control all the rights from the panel. This also depends on the kind of plan you have with FIMA, so it might look a little bit different if you, for example, have an enterprise plan giving you more overview more control about controlling your team access. 65. COLLABORATING: 02 Setting up a thumbnail: Adding a thumbnail. Default, Figma gives you an overview of what's inside of your file as a thumbnail. Now you might have seen in some files that they have a nice thumbnail, stating a name and giving a little overview. Let me show you how that works. Let's jump into this design file here. Now, you can see I already set up a thumbnail. I could add a separate page and call this home and add it on here, or I can just have it together with my design. It doesn't matter. Our thumbnail is just a simple frame with a size 16 to nine. You can set this up simply by using the presentation slides from your frame menu. I then like adding things like a category. This, for example, would be a design file. Then I like adding a project name, a short description. And it's also always a good idea if you're team with many to add who is responsible or who edited this file last. Now, on the right hand side, I like editing an image, and you can really set all of this up however you like. It's just a frame, basically just another design. What I like doing is I add a little bit of info of what this looks like. Just copy some representative screens or just a representative component in here. Then I can just resize this, remember. The trick is hit K, and I'm in the scaling menu now, and now I can scale this down, and I'm just adding it to this frame to give a little more context. Once I am happy with my design, then I simply select this thumb nail, right click. In the menu, you find set as umbnail. You'll see the little thumb nail icon next to its name. If we now jump back to home, you can see that I now have my thumbnail set up. If you visit my community page at figma.com fola at Moon earning, you can see the Mo earning file labeling set and you can get a free copy. 66. COLLABORATING: 03 Shared team libraries in Figma: In FIMa, we can create shared team libraries. Shared team libraries are a way for teams to create a centralized library of design assets that can be shared and reused across multiple design projects. You could store your variables, styles and components in external libraries. So your colors, typography setup, and any components from icons buttons to cards and navigations. An update of the variable style or component in the shared team library would result in a prompt to update any design file that uses the style component or variable. You can work with one or many team libraries. It's important to note that to use a shared team library feature in Figma, you'll need a Figma pro plan or above. This means that additional costs may apply depending on the number of editors you have on your team. Please make sure that you check with the current FIMA pricing plans for more information. 67. COLLABORATING: 04 team libraries: Shared team libraries. Here I have two files, and note how right now they're just normal design files. You see that if you hover over them, you get this blue design file I can. Now, this one is called library, and here I store my components. And what I want to do is I want to turn this into a library, and then over here in my design file, I want to set up my design consuming those components from the library. So the first thing we need to do is we basically need to tell this file that it's no longer design file, but it's now a library. So let's open it. And then inside, you can see I have components here, and I also set up some basic variables. So Let's jump to the Assets panel, and then here you find the library symbol. Click on it, and you will see the current file and the option to publish. Now let's add a short description. Here you should be as specific as possible. I'm just going to add first published from now. Then we get an overview, so you can see here we have our four variables, and we could publish all of this, or we could just select certain components or variables to be published. Now let's publish, and we have successfully published our library. Now, it seems pretty much like nothing happened. But if we jump back to our home, then you can see that our icon has now turned from blue to black. An black icon, you'll see that is a library already. To consume our library, we open our design file. By the way, you can consume libraries in design files or in other library files as well. In our design file, we jump to the Assets panel. You can see we also have some presets from Figma we could play around with, but we want to browse our libraries or simply click on the library symbol again. And now via the dropdown, have a look in your team or any other team depending on where your library lives. He can see the one we just published. Let's add that to our file. Now you can see in the asset panel, we have our library, and here we can see all the different components. We can of course overwrite them and design with them just as in any other file. Now, remember, we also had some variables. If we click on local variables, we don't find them here. But let's say we just draw a shape or a frame and then via the fill menu, you will see that here, you now have a new palette where our library colors are stored. And by the way, you can also separate this. You could pull in two libraries, one for components, one for variables, and then combine them here. You would simply find all of them over here in the assets panel. As you can see, if you click on Add More, you could just add to them. Of course, if you want to remove it, same way, just click on the remove button. If you're working in a design file and you want to jump back to the original component, then you can simply select any instance, and then via the properties panel, click on the go to main component, and it's going to take you to the file where your original components live. What happens if components are updated. Let's say here, we are adding some radius, and then let's also jump into our variables. Let's just change this one here for a let's say green, just to make sure that we see the changes. Now you can see there's a little bubble in our library. So review Unpublished changes. Let's click on this and click on Publish. And you can also see where you found modifications. Now let's publish this. We should have added a description, by the way. Now if we open any file, where we use any of the elements that were changed, you will also see this little bubble appearing here. If you click on this, then you're going to get an overview of the update that happened, you can either individually update them or just go for update all. 68. COLLABORATING: 05 Moving components to external libraries: Moving components. Here we have our design and our components. Now the only place we really do not want them is on the same page. If we would just copy them and then paste them into a new page, then that would be an instance. That's not going to work. What we can do for this is either right click and move to a new page or we can press command and X. This is going to cut the components, and then we can paste it onto the new page, and then this would keep our connection. If we click here, you can see that we're landing at the page where our component is now living. Now, what happens if we want to place those components on an entirely different file and connect it back to our design? What we first need to do for this to work is jump to the assets panel and save this file, even though this is your design file as a library. Let's publish this, and important part is that the components you're about to move are published. Now we're going to create an additional file. I'm just going to call this library. I'm now going to select these components, and just as I move them to the new page, I'm going to press command and x to cut them. I'm now going to jump to the library that I just created, and I'm going to paste them. You can see there's a little alert because I called it library, but it's not a library yet because we need to publish it. It says to move basic components to this file, publish library update. Let's publish this. You can see here is my button and my card. Move to this file and you can even get some more information. Let's have a look what that says. The component will be moved. This file and instances will be connected to this file going forward. Great. That's all we want. We a bit of warning here when you both move and change the component, anyone who accepts the library update may lose override. So yeah, that's the big danger here. The overrides are not necessarily safe. Sometimes work, sometimes doesn't. But still, we need to move them, so let's click publish. Now as we jump back to our design file, Let's go here to page one. We can now see that we're also getting a little update to review here, and you can see that we moved these two components from this file. We want to update this, of course. Now's see if we're lucky, we're lucky and our overwrites are still intact. So as mentioned, sometimes this might cause your overwrites to go missing. Now we were lucky everything worked. If we jump over here to the main component, you can see that I'm jumping over to my new library file. If we jump back to our design file actually to the assets panel, you can see that this is consuming this new library, but the file itself is no longer a library because there are no components added anymore. If we jump here to our overview, let's have a look, then you can see that now this has a black icon and is our library, and our design file jump back to being a design file. 69. COLLABORATING: 07 Sharing design, components, styles, and variables: Let's have a look at what we would share. So how would we document our design, components, styles, and variables? So let me give you a quick overview of a file. Let's start with components. We either store our components on our own separate page within our design file or we store them on an entirely separate file. We can connect a separate library file with our design files, ire shared team libraries. Wherever you store your components, I recommend that you place them on sections. This will create folders in the assets panel, making it much easier to keep everything organized for you and anyone you're sharing with. You can easily rename and reorganize as your project is growing without losing connections to instances. Plus, you can also always add more information about your components to those sections. But don't stress too much about this in the beginning. Start with simply placing them onto their own section. Another benefit of sections is that you can mark them as ready for development. The same principle applies to our styles and variables. They can be stored locally in the same file. Clicking on the gray Canvas area provides you with an overview in the right hand side panel. Alternatively, you can store them in external files, connecting via shared team libraries to design files. Unlike components, there is no connection to any canvas element for styles and variables. Nevertheless, I strongly recommend creating an overview for yourself, other designers and developers. For our color variables, this would be a color style sheet. Then I add a typography hierarchy and information about common spacing and layout rules. You can also include other rules or other styles like blurs, shadows, and gradients. This not only helps convey technical information, but it also provides insights into the designs use and underlying system. As always with design, establishing a visual and functional hierarchy is crucial. Now, in addition to these guidelines, we obviously want to share our designs. For mobile design, I just use one. But for web apps and websites, I typically have two master screens. One for mobile and one for desktop. There's no set rules. Adapt that to your project needs. So this is one Figma page providing an overview of all screens. Some teams also have a page per feature. Again, absolutely up to you how to structure this. And I can also use sections to structure my designs and mark what is ready for development. If you're working with prototyping, I recommend adding another page for your prototypes or maybe even another file, as it may involve some tweaking and additional screens. By the way, I usually prototype critical work flows like sign ups and specific features rather than the entire product. You can use flows to mark the different sections in your prototype. I personally like setting aside a page in my file as a playground area for testing responsive behavior and any uncertainties. However, I only include them into my component documentation or design documentation if they're relevant. I also use some sort of file management system where I can add headlines and some additional information with bullet points. That's it. You're ready to go. 70. COLLABORATING: 08 Dev mode Sharing with development: How to share with developers using deaf mode. Please note that deaf mode is not included in the free plan. So here I have my design, which is set up of components, which are stored in another page. To enable better sharing with development, Figma has a so called deaf mode. You can toggle on deaf mode via the tool bar. You'll have the same design overview, but you'll see that your panels on the left and right slightly changed. If we select any element, then we can see that in the right hand side, we're getting information that's appropriate for development. Let's have a closer look. So first of all, we can see up here that this is a component, and we're using an instance. We could jump to the main component by clicking on the component icon. So here you can see it automatically jumped to the other page and is showing me the detailed component. We can either inspect the component or the instance. So here, for example, if I select the text, then you can see I am getting the color, in this case, the variable, the font family, size, and so on. And by the way, you can choose whether you want this information displayed in CSS, in IOS, Android, or also in RAM or pixels. This is nothing that you need to worry about, but this is something that your developers will find very handy to set up. If we further click around our component, you can see that all the little distances and spacing that we set up are nicely displayed and can simply be copied. Let's jump back to our instance for now. And you can see that also just by hovering over our instance, we're getting all this information, as well as a distance to any neighboring items. Another feature I really love is that if you select any instance that is part of a component set, you get a little button called opening playground. And in that playground, you can see the different variants of that component set. Once you start setting up even more complex components with component properties, then this is also going to display here. Another great thing is that all your assets, for example, images, or up here, you can see our little icon, are really easy to be downloaded. So you don't need to export assets separately anymore. Can see that this is automatically going to download as an SVG. If we select this image here, then you can download it a PNG, JPEC, or so on. You can also click on Export and you could even choose any other resolutions. For higher screen resolutions, you could go for two X, three X, and so on and export that in any format needed. Again, nothing that you need to worry about as a designer because now your developers have all of these tools at hand. So this is all the nitty gritty bits, and you could even a link, for example, to deaf resources. So in here, you can add a link. If you already have components setup, for example, in gup, you can connect to Tokens and so on. This is a really, really powerful space, and I highly recommend that you sit down with your development team and have a look at this. Besides that, it will also help you with the overall communication. So you can see here right now, it says ready for development, and we have nothing marked. Well, if we jump back to our design mode, then what we can do is we can draw a section around any design. So you find section in your frames menu or you can use a shortcut Shift and S. And let's say this desktop version here is already finished, but actually my mobile one I'm still working on. Drew a section around it and we can change the background color to make sure that we can see this a little better. If you hover here or click on the name, then you're going to see this little ready for development sign appearing. If you click on that, then this section and anything you place on it, now is marked as ready for development. If we jump back to deaf mode, then you can see in your left hand side, we now have everything that's ready for developers to be inspected. And then as soon as I am ready with my other frames in my design, I could simply add them to my section, and by the way, you can add as many sections as you want. So if I jump back to ready for development again, then you can now see that both of them are marked here. If I click on them, I'll zoom in and I can inspect this further. Another feature I really love is that it shows you any changes in your design. Let's jump back to our design and just change this around a little bit. Let's just say, I am changing the padding here. The space between is now larger, so something really subtle. If I go back to my death mode and I select this design, I can now see here compare changes. Let's click on that. And you can now see that some slight changes were added. So sometimes they're really subtle, and here I really like using the overlay feature. And now we can see the changes and you can see this small change in padding. If you click on it, then it will also give you more detailed information. In addition, I always recommend that you add some more information about your components and give an overview with style sheet of things like the use of color and typography hierarchy. You can share right from deaf mode simply by clicking on the share button. 71. Thank You: Well done for finishing this course. Feel free to reach out to us at Moonlearningt. We're always interested in hearing your feedback. You would also do us a great favor if you could just take a minute and leave a review right here. If you enjoy this course, then also make sure that you have a look at our additional courses at Molearn dot we cover all subjects from the very foundations of UI design through to Figma and even some code basics. Make sure you visit our website at molar dot O where you can also sign up to our newsletter.