Responsive Design in Figma Deep Dive: Figma Auto Layout, Constraints, Breakpoints & Modes (2024)

1. Intoduction: Auto layout, driving you crazy. Scared of what will happen to design in the browser. And then this class it's just right for you. We'll learn everything about how to set up responsive designs and figma. This is going to be a real deep dive into auto layout constraints and most important, but realy discussed how to deal with break points, ranging from a traditional setup to leveraging variables and modes. T. Understanding and combining these tools will help you to set up components, design patterns, and entire pages that align with code settings. We'll start with the mighty auto layout and really wrap our head around setting up truly responsive components. We'll begin from scratch and work our way up to resizing, and the power of endless nesting, creating more complex elements and even entire pages with auto layout. As usual, I'll show you hidden treasures and a few tips and tricks along the way. C. We'll then look at constraints and how they are life saver when it comes to combining auto layout in grids. Once we make sure we understand these fundamentals of responsive design in Figma, let's learn about break points, how they really work under the hood in CSS, and how we can set up our Figma designs accordingly. This will range from more traditional setups to advanced features like using mode to automate design changes, and scaling typography across different screen sizes. With the course material file, you can work alongside me or return to exercises with detailed instructions in your own time. This class is right for you if you have basic knowledge of Figma or if you're an advanced Bigma user and want to brush up your skills. This is a course by Moon learning dot IO. 2. UI Version & Course Material: Heads up Figma has updated its user interface and you might see a new design instead of the old one. The changes are mostly visual. All the features and tools are still there, just in slightly different places or with a new look. In case of emergency, you're always able to jump back to the previous UI, click on a little question mark bottom right, and here you can see, go back to previous UI. Currently, not everybody is automatically getting access to the new UI. Figma is unfortunately rolling this out quite randomly. Therefore, you'll find two versions of this course. The old version with the old UI in the archive or this course right here that you're currently in, which has a bit of a different structure, updated videos, and is using the latest UI. So as soon as you get access to the latest UI, please make sure that use the updated version. Please make sure that you also get the correct course files. You can see them clearly marked, one for the old course, and one for the new course. They're different in structure, so it's very important that you get the correct file, so you can follow along all the videos. You find all info end links in the description below. Also note that FIPMA is very dynamic. This UI, as we see it today, will definitely change over the next year. This will probably be small changes like a drop down, being a checkbox. The little floating side bars might be stuck to the side. The general structure will stay the same, but you will have a slight difference for sure when watching the videos. Nothing to worry about, everything should still be in its place and be clear for you to access and being used. 3. AUTO LAYOUT: 01 What is auto layout?: 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. 4. AUTO LAYOUT: 02 Setting up auto layout frames: Let's learn how to set up an auto layout frame. With auto layout our design elements can respond to their content. 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. 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. 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 press, 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. If you apply it anything like just a text, a group, it will always convert it into a frame for you. 5. AUTO LAYOUT: 03 The auto layout menu: Let's take a closer look at the auto layout menu to understand it fully. This is what it currently looks like. It's important to understand that Figma is very dynamic and constantly iterating and improving. So what you see on the screen right now might look slightly different in a few months. Features and buttons can move in and out of sub menus and around the properties panel. So you need to get used to this. It's crucial to understand the features themselves, as it will help you to know what to look for. I will provide you with any updated videos for major changes. So watch out for those. Figma also allows you to revert to previous interfaces at times. Click on the question mark at the bottom right to switch between UI versions. By default, you'll see the simplified version of the menu. If you're just getting started, you might want to see some labels. You can add them by clicking on the error next to the view percentage at the top and select property labels. Before we go through the menu, let's remember, auto layout is made up of three pillars, general layout and positioning, resize behavior, and nesting. Throughout the course, we'll learn about each of these pillars in detail, giving you a rounded and structured understanding of this feature, which I'll promise will make your layout life so much easier. To my personal dislike, the menu starts with the resizing, which is our second pillar. We'll look at this in more detail later as it is a trickiest part, so ignore that one for now. It basically shows you the size of an element, in point, or its set behavior. The middle section is about the general auto layout and positioning, which is what we usually refer to as the auto layout menu. Let's concentrate on this one for now. To start with, we have the direction options, so horizontal or vertical, and a third option called wrap, which allows us to wrap elements into a new line of resizing. This is also a more advanced feature, and we're going to explore that in more detail as well later on. With alignment, we can align elements within a frame. Note that this applies to all children the same. With Gap, we can define the gap between the direct children. Little tip in any of these fields, if you select the fields, hold down shift and then use your up and down keys, then it's going to jump in your set Ng amount. In my case, this is set to eight. Per default is usually set to ten. You can change it, simply click on the Figma menu on actions, and then search for Ng. And then you could set your big notch 28. You can also find a notch menu via the AI search. Down here, we have the padding. We can set padding either top and bottom together or open the extended menu for individual settings. A little tip, if you hold command and click into any field, you can use the CSS notation for top, right, bottom, and left. Any spacing or padding values that you can set in the menu, can also set directly on the canvas. You'll notice the little handles. You can either drag them or double click and type in any number. Little tip for the padding. If you want to select both sides, then hold down old. If you want to select all four, hold old and shift. The last item is the show or clip content box. This is more of a general layout setting than auto layout specific. It determines whether you want to show any item that grows beyond the frame. This is going to be quite relevant for prototyping. 6. AUTO LAYOUT: 04 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. 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 it 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, Aalto will be just the solution you were looking for. So keep it in mind. 7. AUTO LAYOUT: 05 Advanced auto layout menu: D advanced settings menu. There's one little icon we've been ignoring until now, which is D advanced settings. Select any auto layout frame. Then if we click on this, you can see that we have settings for strokes, canvas decking, and a line text baseline currently. Let's quickly run through dose. I'm going to start with the first one, which is the strokes, and you can see per default that is excluded. If we hover over our padding here, you can see that I currently have 32 padding, and you can see that I have my stroke set to 16, so it's taking up half of my padding. I can simply changes here, include in layout, and now you can see that my padding is fully used and my stroke is outside of this auto layout frame setting. Our next one up is our stacking. Let's have a look at this one. If we select elements, then it's important to understand that the spacing can also be negative. With the advanced setting, we could now change the stacking order, so we can have last on top or first on top. And our last one to look at is our baseline setting. So here I'm going to select this sub menu. So my items, you can see how they're set up, so I have my NAF items and my button. You can see that currently, they are aligned. I can also align them to the center, but sometimes it might not align to this baseline that you're looking for. So what you can do is select the align to baseline, and in a little preview window, you can already see it, and it's going to lightly align to baseline. This is also something you might want to use if you're having a button with an Con, for example, and you want to align this with the text. So these are settings that you're not going to use too often, which is why they tucked away in this little sub menu. 8. AUTO LAYOUT: 06 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. 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 resize settings 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. Even if I change my text. 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. 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. 9. AUTO LAYOUT: 07 Vertical resizing tips: Some vertical resizing tips you might like. In designs like these, you might want to have all the car serve the same height. You might be tempted to solve this manually. However, this is not going to be a really good solution because as soon as you're resizing, and this is not going to work anymore. There's a much easier way to do this. What you need to do is select all the child elements, and by the way, there's a nice little shortcut, select the parent container, hit enter, and then you're going to have selected all the direct children at once. And now we're going to go to the vertical resize setting and set this to fill the container. And here we go. Now, this is always going to fill the container. This is really nice because we always have the card with the most content dictating the height for this. This is because the parent container is set to hug and all of the children are set to fill. Another thing you might want to do that sometimes you want to have something like a button or a specific bar at the bottom of your card no matter what the size. Now we can also do this with our horizontal setting. All we need to do is we need to switch from a fixed amount to auto. Remember, we have our shortcut in the alignment menu, just double click. You can always adjust the individual padding. Let's see here at the bottom, you could just go up a little bit, or of course, also at the top. This is really up to you how you want to set this up. You'll see now as we're resizing, everything stays in place. A lot of the time we use our horizontal resizing, but we forget a little bit about the power of vertical resizing as well. So make sure to consider this. 10. 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. 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 to 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. 11. AUTO LAYOUT: 09 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. Of course, as with any other component, this would work with any other variable as well. For example, if you would set a color variable to your component, then all instances inherit. 12. AUTO LAYOUT: 10 Setting min and max values: Setting minimum and maximum values. When resizing our design, sometimes we don't want to go below or beyond a certain point like in this card. I don't want it to be any smaller than this. What we can do and for this to work, you need to have your element set up as an auto layout frame is that in the resize settings, we now find this little drop down, and here we can go to add a min width. I can now either define it just by typing in a number or use a little drop down here. I could apply a variable if I would have set up one beforehand. Or I'm going to just use set to the current width. Now I'm going to also add a max width, and you can use both of them or just one of them, however you need it. Again, I'm going to click on the little drop down here, add a max width, and in this case, I'm just going to type in the number 500. You can now see that if I'm resizing, it's not going to let me resize below or beyond this point. In this example, it wouldn't make much sense, but in case you needed for another design, you can of course also set a min and max height. You can apply them in a max to the parent frame, but you can also apply it to any element within your auto layout frame. For example, I don't want this text to grow any larger. I'm going to select it, and I'm going to add a max value, and I'm going to set it to the current width, and now note how this text is still set to fill container. As I resize, it's going to grow nicely. However, it's going to reach a certain threshold and it's going to stop growing and stay nice and readable. 13. AUTO LAYOUT: 11 Auto layout wrap: Wrapping elements between lines. Here I have an auto layout frame that holds instances of the card and a newsletter element. They're currently all set to a fixed size. Now, we've learned about horizontal and vertical positioning. But there's a third one called Ap. If I select Ap on an auto layout frame, I can now resize and the elements will flow into the next line as soon as there's not sufficient available space. With the help of the alignment menu, we can choose how they do this. So we can either center them, set them to the left or the right, or one of my favorites, double click, and now we have this set to Auto, and therefore, they're going to use up all the available space. Now, this will either work with fixed elements, and we could, for example, set this card here to fill the container. Let's see what happens now if we resize. Let's take off the auto, and we can now see as we're resizing and it jumps to a new line that this is taking up the entire width. However, what we can see here is that this doesn't work properly because it's just going to squash this too much. So we can combine this really well with min and max setting. What we're going to do is we're going to set this in the main component, so all the instances inherit. I'm going to select this here, and I'm now going to use the drop down and add a min width and I'm going to set it to the current width, and I'm not going to set a max width for now. If I am resizing now, you can see that now as it jumps up to the top row, it's going to keep a perfect size, but as it goes into the next line, it's going to use up the full space. And we can combine that just as we needed. We could do the same with this card here at a min value, we're going to use the current size, and then a max value, let's say around this size. Now what we need to do is this is still set to a fixed value. Let's select all of these cards and set them to fill the container. Now as we resize, you can see that they're nicely resizing with their own min and max settings. 14. 12 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. 15. AUTO LAYOUT: 13 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 intra part 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. 16. AUTO LAYOUT: 14 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, 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. Then we have a navigation, so this right part would need to be nested. And I between the logo and this right nested part, we would need to set auto also know nest 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 ad auto layout, another option called Suggest Auto Layout. Or we can also use a shortcut Shift Control and A. In the layers panel, you can see that also layout suggested nesting for us. Now, I 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. 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. So 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, 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'venamed 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, so watch out for that. 17. AUTO LAYOUT: 15 Some magic with tables: Some magic with tables. Auto layout also comes in really handy when you want to build things like a responsive table. So you can see here I set up a row. This is simply an auto layout frame, and this is currently set to a fix width, and then vertically to hug. And then inside, I have all my different columns, and they are set up to fill the container and hug, and just the first one, which is a number, I set this to a fixed size. Because I would set this to fill, then it would just take up too much space. What I want to do now is I'm going to drag out a second one. I'm going to keep this first one and I'm actually going to select the parent frame it Enter. Remember this selects all child elements, and I'm just going to make those bold. Then in here, I want to fill in all the contents. You can either fill this in by hand or I'm just going to use the Figma AI, and by the way, I'm recording this when this just came out, so it's probably going to look slightly different by the time you watch this and just select the frame you want content to be filled in and I'm just going to tell it, make up some content. Now I'm just going to drag out a copy. What you can also do is once you have one copy hit command N D, and that's going to copy more in the same distance. Now I'm selecting all my rows and I hit Shift A again to nest this inside of an auto layout frame. Because what I can do now is it's going to give me this magic little handle. I can either select the frame and then go here and click on Replace Content to have this filled in. Or I can just drag open the handles, I can create as many rows as I need, and it's just going to fill in that content for me, which is really great. Now I'm just going to connect it with my naming up here and I'm going to select both of them. It shift A again. Let's have a look if my auto layout works. Yes, this works perfectly. In case it doesn't work, then just make sure that you select the parent frame, hit enter, and have a look that this is all set to fill. This must be set to fill, and this must also be set to fill. This is how you can create a table pretty quickly with Figma auto layout and some AI. 18. AUTO LAYOUT: 16 More advanced setup examples: Let's practice the more advanced nesting and resizing. Here I have a set of more advanced layouts, and I really want to run through them in more detail. I want to show you on one hand, how I would nest them by hand, because I think it's very important that you understand the general concept of how to think about auto layout and nesting. And then we're also going to run Figmas automatic way of nesting, and we can also compare the results. I'm going to run through this quite fast. The idea is that you have a look at what I do, pause it, and then jump to your exercise file. It's really about doing this yourself and getting the hang of it, because auto layout, especially when it comes to resize behavior and nesting is all about practice. Okay, so let's start with our first card here. So I'm going to pull out a copy. And first of all, this is quite straightforward. So this here would be one unit, so I select this and hit Shift A. And I think that's pretty much it. And I'm going to select a parent frame, and I can hit Shift A or use the menu to apply auto layout. So let's have a look at the behavior. That's looking pretty good already. Auto layout really became fantastic at suggesting behavior. I can have a look. This here for me is more like a button, so I'll probably set this to Huck to content, but otherwise, everything works fine. If it wouldn't, then make sure to select an nested frame, have a look if it's set at fill, use a shortcut enter to get all the children, and then have a look that they're also set to fill. Now, let's try out the same, and let's just use our original one. I track out another copy. What I'm going to do here is I am now going to right click and I'm going to more options, suggest or to lay out, or just use the shortcut. And let's have a look, and this actually gave us exactly the same result. So yes, we could absolutely use a shortcut here. Let's go to our next card. This is a little more complex. So we have different directions. First of all, we have this section over here that is a vertical auto layout and then the card itself is horizontal. So first of all, I'm going to select those headlines here again, shift and A, and then all of this shift and A. Now I can add auto layout to the entire card. Again, either the shortcut or the menu. Let's have a look how this behavior. Is working and that's really not picking up right now. What we have to do, we have to tell this whole first frame to fill the container. By the way, there's a nal shortcut. If you just drag it to the end, you can see the these little signs here appearing and it's now automatically set to fill. Then we're also going to do this to these chart elements, that's set to fill already, hit enter, make sure everything is set to fill. This is set to fill, and this here, I prefer having this set to hug. This didn't pick up. Just going to do that again, and now this is working. Now, remember, you could reposition this image here with the alignment menu, and if you would set this two fill as well. Then we will get something like this. That's not really what I'm after. So what I want is actually the original position. Okay, that looks great. Now let's try again with our auto suggest. I'm pulling this down here, and I'm going to use a shortcut this time, or to suggest, and let's have a look what we got. That actually looks quite fine. In this case, actually the better solution it already picked up on all the settings. Again, I'm just tidying up small little stuff like I prefer having this set to hug. Nothing dramatic, if you don't. Next one. This one has a top part and then a bottom part. Again, I'm first selecting the headlines shift A, and then I'm combining it with the shift A. Now I can apply auto layout to the whole card. Watch what happens to this little marker up here. So this is not working. It doesn't really know what to do with it. I'm just going to drag it out and let's actually just fix the padding again. For some reason, this set itself to wrap. We don't want this, we want this to be actually a horizontal also layout. I'm going to add some more margin here. Tightly this one up as well. Now let's have a look. Again, not working as expected, so I'll go through it bit by bit. I want this one here to fill the container, fill the container, and this part here as well. It's really about selecting or everything bit by bit. We can fix the spacing here. We can also set this one. Yeah, as I said, usually, if you pull it out to the end, it should pick up fiel container automatically. Sometimes it doesn't work, then you just have to use a drop down. This one, again, I want this to hug, so let's have a look, so this is working. Now what we want to happen is we want to drag this one back in here. Remember, we can use our magic little ignore auto layout, or we can also automatically do that, hold down the control key, and it's automatically going to have that setup and we can now place it inside of here. Don't forget your constraints. And we should now be able to resize this. Perfect. Now let's try our auto suggests. Again, I'm pulling out the original right click suggest auto layout. And this is looking pretty good. Let's just ignore our little marker for now. That's looking all right. No perfect, but pretty good. Let's take the marker out and if we drag it back in, we can use our ignore order layout, position it, same as before. Don't forget your constraints. By the way, if you want This frame to go over it, make sure that you have clip content set. Now let's just have a look how this is set up, fill container, fill container, created an extra little container around here as we did before, and fill. Yeah, this is actually giving us quite a good solution. Only thing I don't like, this is not pushing down. Let's just have a look at this here, we have the source of the error. This needs to be set to hug the content. It's going to respond whatever happens here. Still not happening. Let's go inside of here as well. Hug the content. And now you can see it is working. And this is why auto Sugest is fantastic, but also try to practice nesting and setting resize behavior by yourself a little bit because these little errors are going to happen and you need to understand why they happen. You're only going to understand that if you nested and resized by hand before. Okay, Let's go with our last one. This one here. And let's have a look. This one is a little more to nest. First of all, let's go bit by bit. We have this part, and we're nesting this together with the image. Always see how nicely the direction is already picked up by water layout. Then we're going to worry about this part down here. I'm going to select the little a tiles first. We're going to sort this out in a minute. And these two, I also need to sort out. This one I'm actually going to leave because it seems like it has the same distance here and here, so it can be an own child element. Let's sort out these, and you can see that they're stacked in the wrong order, so we can go on the advanced setting, and we can just change the stacking. Now we're going to turn those two into an auto layout frame as well. Let's enter in it in the middle and look how nicely auto layout already noticed that we have this big distance here, and it's really helping us even though we're nesting by hand to set up auto. So Let's just add auto layout to the parent frame as well. Now let's have a look how our resizing is working. It looks pretty good, except up here, let's have a look what happens here, set to fill the container. Then this one here, this is where the error happened. We also want this to fill the container, and we just need to get the parent again, and this is currently set to Auto, so we have to take this away, and we're going to add a nice little gap in here. Let's have a look now, and that's looking great. Let's have a look what Auto suggest would give us. Let's take the same card, shift, control and A. You can see that it nested. Let's just resize and see what happened. That's actually giving me a pretty decent result. Just down here, you can see this didn't pick up, Let's see inside, we need to center this to make it a nicer and then set it to fill the container. In case you just watched me do this and you completely overwhelmed. That is normal. What you need to do is jump in these exercises and really play around with it and get your head around structuring nesting and resizing. Get going. 19. AUTO LAYOUT: 17 Auto layout pages: Creating entire auto layout pages. Because of the power of nesting and the parent child relationship, we can use auto layout starting from the smallest element like a button to creating our components, organizing them in groups up to entire pages. Now, so far, we've been looking at smaller elements, things like a card and a navigation. This is for a reason. I would generally advise you that even if you start designing freely, which I absolutely encourage, that at some point when you start tiding up your file that you think and organize everything into components. And then make sure that you first set up your auto layout inside of these components. I did this here for you. Let me just show you, if I pull out an instance, you see that it inherits all the settings, and you can see that this is already working really well with auto layout, the same here. You can always jump to your exercise file to get a better look of the setup. Let's now create our parent frame. I hit F and I'm just going to select any preset frame. By the way, you can also draw this. The size doesn't really matter because we're going to resize anyways. Now I can simply drag on instances of my assets. In a larger project, you would obviously find those assets in your assets panel right here. Now, you could already apply auto layout to the parent frame and then to sort out everything as you go along. I personally prefer leaving it like this because it gives me the freedom to really move my instances around this frame freely, and I feel I just have much more freedom when it comes to designing like this. But once you have a finished page, we can now turn this into an auto layout frame, or by the way, you can also just leave it as a static page, that is also fine in most cases because all your responsive behavior is already embedded in your components. This is something you should discuss with your development team if it's actually worth setting up the entire page again in auto layout. But just for the practice, we're going to do this. Now, we could either hit auto layout over here and then sort it out manually, or which is what I'm going to do, I'm going to right click and use my suggest auto layout. Again, remember shortcut Control, Shift and A. Let's have a closer look. What happened. Well, if we resize, then we can see that some elements are working perfectly fine. For example, my navigation and here my interratext and my footer, because they're quite simple elements. Now, if we have a look at my cards, I was lucky and this was actually picked up pretty well. I noticed that I probably want this to wrap. When I position it here at the top. And that's actually really nice. I just need to clean up a little bit. In this case, what I need to do is I also want to say margin left and right, so I'm going to set this up here and a little trick, what you can do is you could use this is my gap. Here is my padding. You could use variables to do this. I use those variables already in my components. You can see my padding is set up with variables. So my navigation, all of this has the same variables used when it comes to padding. So if I want to change the padding, I could just set also up a separate padding variable for this, and then I have to change it once, and I don't have to worry about doing all of this manually. Don't have to, just a little tip on the side. And otherwise, I quite like the look of this. I could play around with these cards. For example, I could set them to the center, or I could double click, and then they would distribute evenly. So if we resize, it would look like this. Now, with this example, we were quite lucky in this work quite well. But you're going to notice that with suggest auto layout, sometimes you're not going to be that lucky and you're going to get some weird behavior as soon as you have elements that are not as simple as just a straightforward auto layout that needs fill. So if we're let's say we're having a bit of a mess here and we want to do it again, then what you can always do is just drag out this part of auto layout, and then you can just sort it out outside of your auto layout frame. So what I could do, I could have these cards, and I could just quickly rebuild all of this. Just get rid of this. Select them. And now I could just drag them back into the auto layout frame. Another little tip, if you have something that is larger than your auto layout frame, you're not going to see that magic little positioner we just had, press command, and then you're going to force position it. It's going to set it to fill the container. Again, you'll notice we probably have to clean it up a little bit, set it back to fill the container, but we have it in here. Then again, I'm going to add my variable for the padding. I would have the same setup, but you have more control of it. It's quite difficult to sort out stuff inside of a page with all of these layers in nesting. Always feel free to drag out an element, especially if you have composition, do that aside and drag it back in for better control. Now I'm just going to clean this up a little bit. Let's run the re layers. We could generate a images, but I actually have some from another file that I want to use. I'm going to use one of my favorite shortcuts with is shift Command N C and that copies a PNG, and I'm quickly going to fill them in here. Now let's just go for the very last touch. I also want to alter the content a little bit. I'm going to tell her to make up some workshop names and just a short intratext. This is the sort of behavior you would get, and that is absolutely fine. And we now have our cards at a fixed size. Remember, you could also always use min and max values. We would apply that to the main component. All instances would inherit. I'm going to add a min. I'm just going to pick some random numbers here. Always change that later. I'm going to use 300 min and let's say 450 max. You can see nothing happened over here. That is because these cards are still set up with a fixed width. Select the frame that holds all the cards hit enter, then you get all the individual cards and now set all of these cards to fill the container. They're going to fill but not beyond their max value, and this is why RAP in this case would still be working. If you want to get rid of this again, then select this container, hit Enter again, switch back to fixed width, and in your component, remove min and max. Now what you need to do because you basically overrode the width setting, select all the cards again by hitting Enter and via the properties panel, you can now with three little dots, choose reset and reset size. Now you have the original size of the component again. 20. AUTO LAYOUT: 18 Auto layout and CSS flexbox: Auto layout in CSS Flexbox. Now there are probably a few things that you don't like about the behavior when you get to set up more designs with auto layout. One of the things might be that if we're resizing, you might want to have the same amount of cards. We can play with min and max values and setting it to fill container, but you're not going to get this grid like feeling. The reason for this is that if we have a look at our design and jump to def mode, then you can see that this is all set up with something called flex. This is because auto layout basically represents flex box. If you are a developer, then that makes a lot of sense. If you're a designer, then you might have never heard of Flexbox. You don't need to know about Flexbox, but it is quite handy to understand it a little bit because it is the reason that auto layout behaves the way it behaves. In CSS, we use Flexbox to position elements. Flexbox is a so called one dimensional layout approach. That means that it's going to put your elements one after the other. Think of it like beats on a string. If you alter any elements, so if it gets smaller or larger, then this is adjusted accordingly, which is great for a lot of stuff. But what Flexbox does not let you do is to put your elements into some grid. In CSS, we would use something called a CSS grid, which is a two dimensional layout approach. Nine Figma, we currently don't have that. We do have a more rigid g rid approach in FIMMA, and I'm going to talk about that in a minute. But in the real life or in the real browser these days, probably the developers are going to use CSS rid and they have much more possibilities for the overall page setup than you have in Figma. So this is really just a very general brief overview. These topics of CSS layout, flex box, and grid are obviously much more complex, and there's a lot of sub tools and things to understand around them. Now, as a designer, you don't need to set this up. You don't need to be an expert on it, but I would strongly recommend that you have a look into the general understanding of modern CSS layout. You don't have to, but it's going to give you a huge advantage. So definitely keep on working with auto layout in Figma, but also make sure to always be in close contact with your developers, make them aware of this, and then some things might just be tested much better in the browser when it comes to the overall layout of your page. During this course, we're going to jump back into Figma. However, in your working material, I added some links if you want to read up further on this topic. I also have a separate deep dive on mole dot IO into modern CSS layout. You find all the links in your working file. 21. AUTO LAYOUT: 19 Slot components with auto layout: Creating slot components with auto layout. What a slot component basically is is a component where you have some placeholder and can then slot in different content. This is often used in code. We don't have a slot feature as such, but we can pretty much build it with components and auto layout. Here I have an auto layout card and you can see I have a slot inside of here. If I just delete this, then all I do is I create an instance from this slot component, I drag it inside of here, and I make sure that it's set to fill the container and hug the contents. However high that content is, it will be hugged. Now you can see besides the slot, I have other components layout, one and layout two that could be slotted inside of here. All I need to do now is to create an instance of the slot component, and I can now double click, select a slot, and then by instant swapping, I can just slot in any of my other designs. Little tip, bit more advanced, select a slot. Now we're going to set a property. Click on the three little dots. Go to apply instance swap property. Create property, and you can now see here you get this menu, so I'm just going to call this slot. And down here, you can now choose preferred values. From my menu, you can see that I have a lot of components. I'm going to choose the two options that I set up for this card. Now if I select the instance, you can see that I have a little drop down with slot, and I only get the right options to be swapped in. This is really handy that everybody uses to correct setup. 22. CONSTRAINTS: 01 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. 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 nearest parent. So I resize, it seems like nothing happens because they're set to left and top. However, if we change those constraints, 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. Let's set this one here to center. You can use the drop downs, 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. 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. 23. CONSTRAINTS: 02 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 this 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, and 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 to 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 the shortcut Control and G. If you have the grid toggled off, then all the constraints will still stay in place. 24. CONSTRAINTS: 03 Quick intro to grids in Figma: A quick intro into Figma grids. Let me show you how to set up grids in Figma, which you can later reuse as well. Here is a frame, just click on any frame, and then you're going to see the layout grid setting here in the right hand side properties panel. Click on plus to add a grid. The first thing you're going to get is this eight pixel grid. Now we don't want this. What we want is to click on that little lichen and switch this over to a column grid. We can now adjust our columns in here. The number of columns we want, we can set a margin on either side, and we can also adjust the gutter. The way this grid behaves is that in this case, because it's set to stretch, the columns will always adjust, so they will make up the available space, the amount of columns minus the margin and the gutter. You also have other options. You can set the grid to the left and to the right, to be honest, something I never really use, or you can set it to c. If you set it to center in that case, you would need to define the width of your columns, and if you re size, then the margin is what would take up the rest of the available space. Now, the way in which you need to set up your grade depends on either a system you're using. If you're using something like bootstrap, then you're going to find that in the documentation. You might also have a custom grid, so here you can see this is decadence custom grid, and you can see they give you the definition. If you have a star guide and you're using a certain traditional fixed grid setting, have a look in your sty guide, and you can reproduce the grid in Figma. Now, if we're happy with this grid, we might want to reuse this on other frames. What we can do is just select the frame and then under layout grid, click on the Little Apply Styles icon, and then you can click on Plus, and I'm just going to call this one test for now and we can now create a style. If I now have any other frame, I'm just going to draw another frame here on my Cvas. You can now see that if I select this frame and I hover over layout grid, then I can click on the styles and I can now re use the grid that I just created. If I would want to change anything about that grid, I just click on the gray Canvas area. I get an overview of all my grid styles, and I can now edit this here. A little tip, so everybody in your team will know which grid style to use. You can see here that you can give it any name, so I use T shirt sizes. But then I add in brackets behind it for which size this grid applies. So let's say I have two frames here. I can see this frame is 390, and I can now simply choose my grid style, and I know this is smaller than this size here. And again, it totally depends on how your grid is defined whatever sizes for break points you have set up here. If I select this larger one here the same, I can just go to my grid styles, and I know this one is larger. You see here, it's 1,500, it's larger than 993, so this would be the correct grid. Now, this is the case if you're using an overall grid for your designs, which is the most common way to use them. But you might also use sub grid for sections. Because you apply them to frames, this is really great in Figma. You can just set up any grid, and of course, later save it as a style for a frame which you position on your parent frame. And therefore, you can just set up the distribution that you need for each of those little subsections. 25. BREAKPOINTS: 01 Introducing CSS breakpoints: Setting up your designs with auto layout, you're going to notice that this works great for a certain range, but it's not going to work for all screen sizes from mobile to larger desktop. This is where break points come in. They are specific points or rather thresholds or changes occur. This way, websites can adjust their layout and styles to fit different screen sizes. To create break points in CSS, we use something called a media query. The at media query rule is a way to apply certain styles to web page only if specific conditions are met. In this case, the condition is a minimum width of 768 pixels. So anything inside the curly brackets will only be applied when the viewport has a size of 768 or more. Let's have a look at this in CSS. So you can see here I have a headline and some copy texts as well as two images. In our HML, this is an H one, the headline, the copy text is P, and then here we have our images with the image tag. Now, in the CSS, you can see that I set the text to have the size of one RM, then a little larger for the headline, and I set the images to occupy the entire available space. These are my base styles. Now as I scroll down, you can see that I added immediate query. As I hit 400, let's just make this larger down here. You can see the size, so you can see as I hit 400, then this changes in layout. What happens here is that everything inside the brackets become active. I have a new background color, the H one is larger, and the images change the occupation of space. I go even larger, you can see the second media query hitting. You can see down here, again, I added a background color, so this becomes visible, and I also change the H one to become even larger. 26. BREAKPOINTS: CONSTRAINTS:02 Breakpoints in Figma: How can we deal with breakpoints and figma? Because at this moment of time, we have no feature dealing with this, we have to solve this manually. When dealing with a classic column based responsive design, this is not too tricky to set up. All we do is we check our great documentation. Remember this might be documented in your design system or a framework. With the given information, we can set up the frame with grids in Figma quite easily. So if a bootstrap, this would look something like this if we would build out all our break points. We can add our components, and remember, those need to be set up with auto layout in Figma, and we can then make them sit and behave with the columns using constraints. We cannot control the vertical spacing like this, but we get quite a good idea of what happens in general. Now, to design every screen for all these versions will be quite tedious. So what we can do is to just pick some master sizes. I usually just pick a mobile size and a desk W. But depending on your project, you might just need one in between as well. In most cases, it will be quite logic about how the others will adapt. But as we have all of the frame set up anyways, we could just quickly jump over and test specific scenarios. We don't need to rebuild the entire page. We can just test the sections that we're bit unsure about. A, a bit tedious, but actually not too tricky when it comes to setting up responsive designs in Figma. So this might seem like a huge advantage from a design point of view that you have all this control. But remember, in the end, the product doesn't live in Figma. It's not about an easy setup. It's about the end product in the browser and how it behaves and comes alive there. So, these days, you don't strictly need this grid in the background anymore. At least it doesn't have to be such a rigid system like bootstrap or similar. You can also more freely define this. It's very important that you discuss this with your development team first. Now, remember, when we set up our designs with auto layout, then we've learned that this reflects Flexbox. Most of the time, these designs reshuffle perfectly by themselves, but sometimes they might also be in need of break points. For example. We might have a change in layout. So for example, the overall grid arrangement might be changing. A single component might change. So this is something like a navigation, Burger two link menu, a footer might be changing or a hero section as well. It's probably going to look quite different on different sizes, and our hypography needs adjustment across different viewpoards. So as already discussed, our auto layout, representing flex box, reshuffles really nicely. In case we want to change the overall layout, let's say that we have a side bar that we need to remove at a certain threshold. Then what we can do is we can set up two different frames for those scenarios. I like adding some visual information that clearly shows from where to where we would be using this frame, a little tip to any auto layout frame. We can also add a min or a max width, so we can stop it from going beyond or below a certain threshold. This is usually used in our components, but we can also use it for the parent frame representing the viewpoard. Have a look how these cards reshuffle when I resize. Now, this is the behavior of ex box as these cards also have a min and a max value. If I wanted them to be nicely aligned, then I could set this up with CSS grid. Now, if we want to show a CSS grid layout change, we can currently not test this in Figma. We would revert to a static design of our pages, showing the different key screens and figuring out the transitions between them together with development in the browser. We can always add more stages if needed for better communication. Also, remember, we don't always need to deal with the entire page. We can break this down into chunks of layout sections and established patterns. When it comes to single components responding to individual breakpoints, what I like doing is creating a component set and then have the different versions as variants. Because our Figma components are set up with auto layout, we can test this pretty well and define our breakpoint. Then like naming my property breakpoint, and the values, I call smaller than and larger than or in between certain values. This way, anyone working with an instance always knows which one to choose. There are more advanced techniques using variables and modes. I'll run through them bit by bit. We could use Boolean variables for our navigation, showing and hiding the elements depending on the frame that I drag it onto, and we can even swap instances by using variables and modes. This, however, is quite an advanced setup, so you and your team need to be quite solid with working with variables in mode. 27. BREAKPOINTS: 03 Modes and screen sizes a quick intro: Let me give you an overview of how modes work in Figma and how we can leverage them to create different screen sizes. Click on the gray Canvas area, and you're going to see local variables in the right hand side properties panel. Click on open variables, and you're going to see your setup collections. So as an example, I'm going to use this color collection here, so you can see I have different color setup, and currently, they're just called values. Now, right next to this, I have a little plus button, and if I click on here, I can add an additional mode. You can call these modes anything. I'm going to call it light and dark in my case. For my dark mode, I'm going to leave all my brand colors as they are, and I'm just going to switch around my base colors. This one here is a white now, and what was white is going to be black. Once we created those variables, it's important that we bind them to our design. We could just select any color and then in our fil menu, we see the variables and styles icon, and we can then see all our variables we created and just apply it here. A little tip, what you can do instead is select the entire frame and via selection colors, you can just bulk select all of those. This is super handy because it also helps you that you're not missing any variables. Very important, also make sure that this frame with a white background also needs to be set up with a variable from this collection. Now if we select our item, then you can see next to appearance, there's a little switch, and we can now toggle this between light and dark. If I switch to dark mode, then my dark mode colors will apply. Per default is a set to auto. We can do the same with our frame, and we could even toggle entire pages. The part we're however interested is the inheriting. Right now, this frame is set to dark mode. My item, I am leaving at auto. This is really important. Don't set it to any other mode, leave it at auto. Now, if I drag it into any frame, it's going to inherit the mode set to the frame. And just as we altered between light and dark, we can also use modes to alter between different sizes that we set. So here I have another collection that I made. I set up a size variable, which I'm going to use for this button text, color. I'm also going to use that in different modes for this button. And I also have some texts, which I'm going to use in the button. And I'm going to create an additional one, which is going to be a number, and I'm going to call that box. And I want the box to be 300 white on a small screen and 600 white on a large screen. And note this is all set up with auto layout. And we can of course turn them into components as well as they would always inherit any variables we set. Now we need to bind these designs to the variables that we created. Let me start with the button size. I use the size drop down. Here I see the variable, and I can now use the size variable I created. Little tip, you can also scope variables. So for example, here, I can set this up. If I click on this little edit field here, get the scoping, and I can now either show it for everything, or like in this case, I only want to show this for the font size. Now the size I have here is going to be the width of my box. So here I have the scoping, and I would only want to show this for width and height. And you can see, depending on the variable I use, I get a different scoping field. Let's finish this off. We also want our text. For the text in typography, you have this little button here and you now see the button text. For the color, hereby I need to delete the variable I used before, and via the variables menu, you can now see in libraries if you scroll down the one we created. But we could improve my naming here. For the box width, we simply selected a box, and then via the width drop down, you also see apply variables, and now we get our box width. Note how only the box shows up because we scoped this. Now all I need to do is to set the mode for those frames. Let's just look at our collection again, small and large. If I select this parent frame, and you see I have no way to switch. This is because there's currently no element that holds a variable on that frame. You'll see as soon as I just track anything on here, I now get the switch. I'm going to tell this one to be small mode and my larger one here to be the large mode. So I I drag this one in, I want an instance, you can see that this changes really nicely depending on the set mode, and I have the same here with my box. So here is a width of 300, and as as soon as I jump over here, it is now changing to the given width. So Ms are a great way to adjust design elements and components to different screen sizes. However, bear in mind, they look very magic, but sometimes they're also a bit of an cle, and it's just easier to do it by hand. But that you need to figure out depending on your design and your team setup. 28. BREAKPOINTS: 04 Binding variants to modes: Binding variance to modes. What we can also do with modes is to pick which variant inside of a component set we want to use for a specific frame. Here I have a navigation with two versions. I want this one to be used on mobile and this one here for larger screens and the same with the cards. What we need to do is we need to bind these different variants to different modes. We need to start by setting up a collection for this. I'm setting up a new collection with the name responsive example. In this collection, I'm creating a string variable, and I'm going to call it NAF to start with the navigation. Now the name of the variable you're creating doesn't matter. What is very important is the value. This value needs to be the exact name of the variant that you want to bind to it. So if we click on here, you can see that this is called S, and the other one is called M, and I use the same naming convention in the card, so this is S, and the other card is called M. Here I'm going to say bind to S, and I'm going to create another mode where I'm going to bind to M. Now let's also rename those modes. I'm going to call one mobile and one desktop. I'm going to also add the same for our card. Now we have all the logic set up in our collection, but we also need to tell those elements that this is happening. You would probably expect to bind your variant to this variable. However, this is a little strange. We actually bind the instance to the variable. Select any instance, and then in the right hand side properties panel, if you hover over your instance name, you see a little variable sign. Click on that and you can now find variable that you just created, and we're going to bind this one to our navigation, and we're going to do the same for our card. Now, if we drag our instance on here, then nothing much happens. This is because the parent frame doesn't know about the mode yet either. Now notice that currently Figma is set up in such a way that if I have no variable set on those frames. If I have no element that holds a variable on the frame, then there's no switch showing. Now notice as soon as I add this, you're going to see when you select the parent frame, this switch here appearing. Here we have our responsive example. This is mobile. And here we don't see the switch yet. So let's just pull an instance over here as well. And now you can see the switch because we find this two a variable. And now we can change this two desktop. And you can see, just like this, our new version is automatically appearing. So if I would drag between those screens, then you can see that it's always going to pick the right version for me. And now that we have the mode set up, this should also automatically work with our card. So you can see here we have our card S, and if we pull it over here, it's automatically switching over to the other version. This does take a minute to get your head around, but you can use it in so many different places. Try experimenting with it. Here's another little example, so you can see it's not only bound to the different variants, you can also add color and different sizing, and then you're going to get something like this. 29. BREAKPOINTS: 05 Hide and show with booleans: Hiding and showing elements with Booleans. Boolean variables are quite a hidden feature, but you can set up little magic tricks like this. First, I set up a collection with two modes. In my example, I use one for smaller and a larger screen, and then boolean variables. One for a burger menu. I want to show on a smaller screen and switch off for larger one, and the other way around for a Lnx menu. Now I set up my component and I package all elements in there. So the Berger menu as well as the Link menu. Now let's just connect everything. So I'm selecting the Berger and here comes the weird bit. If you want to connect it to a Boolean value. In appearance, you have to right click on the I can very it and I. But unfortunately, this is where it's located at this moment of time. Here you can see the variable that you created for the Berger Boolean. Let's click that. Nothing is going to happen. That's what we expect. Now, if we select the menu and we do the same, then this is going to disappear because per default, it's going to show us the setting of the first mode. What we can do now, pull out instances, so we're going to place one instance here, and then we're going to place another instance on our mobile frame. Just before I do that, let me show you that right now, have no mode switch. And as soon as I add an instant that is bound to a variable, you can see that now if I select a parent frame, we can see our switch. So let's switch this one to our mobile version, and then let's switch this one here to our larger version. And you can see that automatically, it's going to switch the bullions on and off depending on where I place them. It's really impressive to use this way of working. However, let's have a look how this is set up. Just be aware that all it does is that it's going to show and hide layers. There is a danger of someone just not understanding this way of working and switching this back on. Also make sure to check with development that this is making sense for everybody to understand this component. Sometimes it makes more sense to have two variants, one with the berg and one with the links, so everybody knows what variations are currently in design. Little tip on the side. You can see here that we have given sizes. This is smaller than 500 and larger than 500 in this case. What we can do is via the width drop down. I can add a max width here to the small one of 500, and I'm going to do the same for the large one. I'm going to go in this case to a min width of 500. Now I can test this. Here you can see this works actually quite fine because it's probably going to go down to 320 or something that's all good. And then the larger one, however, if I resize, then you can see that this is not going to work in the design, and therefore, this is really great to try it out like this. We know that this one here, we probably need to redefine at what size this Links menu is going to jump in. 30. BREAKPOINTS: 06 Responsive typography with modes: With the help of modes, we can also automate responsive typography across different screen sizes. For this approach to work, we have to combine text styles with variables and modes. So here is a simplified type scale that I would like to use, and you can see that I already created some styles, so all of these here are created already, and I'm going to create a display together with you. So select the text, and then on Typography, click on the Apply Styles, plus, and we're going to call this one Display one. If we click on the great background area, you can see the style was created, and I can just drag it into my folder here. I created called responsive Typography example. Now, in my design, it's very important that I apply those styles. Make sure that every text element you use is tied to a style. If you're using components, then you just need to do that once in your components and all instances will inherit. If we wanted our text size to adjust from size S to M and L, what we could do is simply create another type scale for M and L and save that as separate styles. And you can absolutely still set your design up like this. However, with the help of variables and modes, you can automate these changes. Rather than creating separate styles, what we're going to do is within our existing textile. We're going to use a variable on the size and with modes, we can tell this variable how to change depending on the mode set on the parent that we're going to drag the design on. What we need to do is we need to create a variable collection. Let's click on Create New collection, and I'm going to call this typography. Now we can either create all of this by hand or little tip, we can use a plug in. Select the frame where you have all your textiles displayed. Then have a look in the plug ins and search for the variablese text styles. Run this plug in. Now you can choose the collections. I'm going to choose typography, the one I just created. You can also choose which parts you would like to set up as variables. Click Create. And that's it. Now, if we jump back to our variable collection, you can see that this filled in the font size, the font weight and the font family for me. If we have a look at our styles, then we can see that if we use this plug in, the great thing is that all the variables are already connected within our styles, which is really handy. If you set up a collection manually, then you need to jump into your styles and also connect all of the variables manually via the dropdown. Really important, otherwise, this will not work. So now we have all of this set up. However, we have not added any information yet about how the size should change depending on the screens. So what we need to do is let's go back to our collection and we need to add some modes. Now, I don't like the naming of this. It's going to be quite confusing, so I'm just going to clean this up a little bit. So I'm just going to rename them with T shirt sizes. Now I'm going to add my modes, and I'm going to call S. This is my default M and L. I'm also just going to reorder them simply by dragging them. Now I'm going to change the sizes on M. I'm just going to increase my size a little bit, size as well. I'm doing this just randomly in a design system, that would obviously go a lot of thought into how these sizes would change. Now we only need to tell this one that is mod M and this one that's mode L. Let's drag our elements on here with our design. I'm going to set this up for S, and this one here is going to be and now have a look how the new sizes kick in. This one over here is going to be L. Then once I have that set, let's just delete this. The mode is going to stay on there. If I drag anything on here, the typography is always going to be correct. A little tip. You can of course, also use multiple modes. So right now I have the s set, but I also have light and dark mode, so I could also switch this to dark mode. Another little tip, if you, for example, working with an IOS and an Android designer need to change font family, then you can also use modes and simply change the font family like this. 31. Some free stuff to say goodbye: Well done for finishing this course, feel free to reach out to me at Mo earning Do Tao. I'm always interested in hearing your feedback. You'd also do me a great favor in leaving a review right here. Ab you enjoyed this course, and also make sure that you have a look at Moon learning DotaO. We can find plenty of additional material as well as courses. With M membership, you can access all of my videos, so anything from U XUI basics, plenty on FEMA, plenty of deep dives as well, and also a section about CSS N UI fundamentals. So we're going to discuss what happens when UI design meets code, concerning layout, typography, color, and any other relevant subjects. On Mo learning, you can also find a paywall free link to all of my recent articles, as well as a resource page where I try to keep you up to date to the latest cool stuff happening in the world of UX UI Design. If you prefer a real life event, have a look at the workshop and talk section, I'm frequently speaking at conferences as well as giving online workshops all around the subjects of UX UI Design and sol preneurship. Make sure to subscribe to my newsletter to stay up to date. So see you soon on Moearn dot IO.