Responsive UX/UI Design in Figma: Auto Layout, Constraints and Breakpoints (2023 latest release)

1. Promo Video: Auto-layout driving you crazy, scared about what will happen with your design in the browser, then this class is just right for you. We will learn everything about how to set up responsive designs and Figma. This is gonna be a real deep dive into constraints, auto-layout, and most important but rarely discussed breakpoints for your UI design. Combining those tools will allow you to retest and document designs and components in line with actual code settings. We will start with the Almighty auto-layout and really wrap our head around setting up truly responsive components. Let's begin from scratch and work our way up to resizing and the power of endless nesting to create more complex setups and even entire pages with auto-layout. As usual, I'll show you a little hidden treasures and a few tips and tricks along the way. We'll then look at constraints and how it is a lifesaver when it comes to combining auto layout in grids. Once we made sure we fully understand our responsive tools and Figma, we will then learn about breakpoints, how they really work under the hood in CSS, and how we can set up our design in Figma. Accordingly. This will enable us to test our responsive pages and components against real conditions and put our documentation to another level, which your developers will surely appreciate. With the course material file, you can work alongside me, overturned two 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 beginner user, really want to brush up your skills. This is a course by Moon learning dot IO. 2. 1 New Figma UI Design AUTO LAYOUT NEW SKILLSHARE OLD: Please note I have an updated version of this course available. So if you're already accessing the new Figma UI, then make sure to jump over to the new version. To find it just jump on my profile, or you can also have a look in description below. So just to be clear, this is the previous Figma UI. The new Figma UI should look something like this. The main change you'll notice is the toolbar is now at the bottom instead of the top. 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 you can also take the latest course, which has a bit of a different structure, updated videos, and it's using the latest UI. 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 FIMA 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 dropdown 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. About this course: Setting up your designs with responsive components and pages in mind is a must for any UI designer nowadays, responsive testing and Figma can save time and nerves on both sides and improve collaboration with development majorly, Figma gives us pretty amazing tools for setting up responsive design. We have the almighty auto-layout constraints, as well as grids. It's really important that you understand all of these features in detail. You might end up mainly using auto layout, but you will notice that for a quick testing, sticking to an irregular grid setup, there are very powerful ways of combining the three of them. So in the first part of this course, I really want to dive deep into each of those tools, really from the beginning to more advanced techniques. So constraints might seem really basic to you to start with. But the power is really unleashed once we carry on with more advanced Auto Layout and then get back to combining constraints into them. So this course is really about showing you what is possible and what might be the best solution for certain setups. There is no right or wrong way. It's really about what you're trying to build. So after we went through our tools in the first part of the course, we can set up pretty sweet responsive pages and components. We are, however, still stuck with one issue. The same design will not work from mobile to larger desktops with one setup, it will only work within a specific range. And this is really a topic often neglected when it comes to learning responsive design, because what we need is to set a break point. This is not an automatic feature in Figma. So this is really something we as UI designers need to understand and set up ourselves in line with code. So we will go through this in detail and really understand what those breakpoints are, how we find them, and how we can set them up and translate them into Figma. This will allow us to test and document our components and pages with the real numbers. This way, you will have a pretty good idea about the real thing. And you can really lift a conversation between design and development to another level and focus on the details. So in a nutshell, lets untangle this responsive mess and make everything nice and clear. 4. Course Material: You might want to work alongside me, so I prepared some files for you to download in the course you're taking, simply navigate to project and resources. And there you'll find all the information and the link where you can download the material. On this page, you'll find a variety of downloads. You can simply pick the cause that you're currently taking and then just click Download. And it will automatically download the file for you. To import the files you just download it. It's important that you have a Figma account. Inside your Figma account, navigate either to drafts or go to a project inside a team. Click on the Import button and you can choose which file you'd like to load. It might take a moment as they're quite large, but once you imported them, they will be on your account and you do not need to repeat this process. Inside the file. You find material to work alongside me in the videos, but I also added some instructions so you can always come back in your own time and try out and practice. I am working with Google fonts for most of my designs. So if you're working with the Figma app, then you don't need to do anything or Google fonts are preloaded automatically. If you want to work with Figma in the browser, then you just need to search the font that it's showing you as missing e.g. Poppins, I use a lot. And then you can directly download this font, install it on your computer and you're ready to go. 5. !!! PLEASE WATCH !!! New Figma UI in beta: Heads Figma has updated its user interface, and you might see a new design instead of the old one. This update is currently closed beta, so not everyone has access yet. I will update the arts and reflect the new interface once it's available to everyone. The changes are mostly visual. All the features and tools are still there, just in slightly different places or with a new L. For example, the top tool bar has moved down. The left side panel, on the other hand, has remained mostly unchanged. You can now change the name of your file here. You can still see all your pages, layers, and assets. On the right hand side, you'll notice some changes when you click into a design, but all the features are still available. If you're a beginner and find the new interface confusing, you can click on the question mark at the right bottom and temporarily switch back to the old UI. This is no influence on your design. This way you can follow along with the videos of the course using the old UI much easier until you're ready to transition to the new one. FIMA is gradually rolling out this update. If you don't have access yet, you can also request it from FIMA, but there's no guarantee, some of you might just have to be a little patient. Your team admin may also have to enable the update for you, so make sure you check this as well. Figma frequently updates the software, so expect changes and be prepared to adapt. Features may move around like this library button here has been at every possible place in the last few years. But don't worry, nothing will ever get lost, and you'll get used to be using FIMA in a much more flexible way. It has a really great focus on usability. So it's not about learning something by heart, but understanding the software as a whole. 6. Auto layout updates June 23: In June 2023, during the Figma conflict conference, a few changes to auto layout where released. Make sure you download the updated Figma exercise file. This is the best way to get a good overview which parts are new and where things were simply moved a little bit. No worries, everything really works like before some stuff or slightly moved into menu and two new features were released. So let me run you through them. Space between was moved. During the course, I will refer to a feature called space between. What this does is if we have something like this and want to adapt the space in here not only by a value, but automatically push it always to the other side. Then this used to be in the advanced menu. You now find space between if you go on the Spacing bar simply by clicking on auto. So you can see that now if we're resizing this, this is what we're getting. If you're just starting with auto layout and this is all a bit confusing, then don't worry, if you download the exercise file, then as soon as we get to this part, I have the change in the position in menu clearly labeled for you. The alternatives to this, which is by simply clicking on the on-screen handle and typing auto or any fixed value still stays the same. The other shortcut, this is clicking in the alignment menu and toggling this feature with X also remains just as before. Min and max width. Min and max is an entirely new feature. So this means if we're resizing a card like this, we can now, via our width and height fields, set a Min and max value simply by using the drop-down, we can now set a minimum as well as a maximum. And then this would be reflected as soon as we resize our card. I haven't entire video on this where we've run through this bit by bit and also have a look how we can add variables to this feature. Next one up is wrap. This means that now with auto layout, we can wrap elements. To the next line. We're gonna run through this example bit by bit. How to set up those cards. First was Min and max values. And then we add wrap. Wrap is added to the auto layout menu in the direction. So you'll find it next, Vertical, horizontal. And now the new wrap feature. Besides this Figma release variables which we can use for padding in auto layout. We can now simply select our auto layout elements. And then via the padding, we can use those spacing values that we set up and make sure that we always have the same value set in our design. We can also use them for space between simply apply variable and you can then also pick your set values. Variables are a very large topic. They're very powerful and you can do much more than simply adding, padding and Spacing with them if you're interested in variables, I have a whole separate deep dive course on this subject. You can see auto layout pretty much stayed just as before, but became this little bit more powerful 7. CONSTRAINTS: 01 What are Constraints in Figma?: What are constraints in Figma? Constraints define how the layers respond when the parent frame is resized. This allows us to control how to design looks across different screen sizes and devices. When you select an object on a frame, you can see the little dotted blue lines pointing to the edge of its parent frame. Those are the constraints. By default. They're always set to top and left. You can also see the settings in your right-hand side Properties panel under constraints. Constraints a set for horizontal positioning as well as vertical positioning. You can set the constraints either via drop-down or simply by clicking on the icon. Little tip hold Command to select both sides. You can apply constraints to any layer group or nested frame, as long as it sits within a frame. Constraints only work within frames. With the exception of auto-layout frames, you cannot add constraints to auto-layout frames except absolute positions element within them. Also note how constraints always respond to the parent frame. This must not necessarily be the main frame. So the frame that you're using to represent your screen, as you can also nest frames and Figma. The parent frame is basically the next frame up to objects inside a quarter children. 8. CONSTRAINTS: 02 Working with Horizontal and Vertical Constraints Overview: Let's have a closer look into the different kinds of constraints available. In the drop-down, we can see the following options. Horizontal constraints, left, right, left and right, center. And scale. For vertical, top, bottom, top and bottom, center and scale. Let's go through them bit by bit. Here I set up an example of a phone screen. You can see when I resize the parent frame, everything is set by default to be set to top and left. Hence, nothing happened. Now, let's say I want this menu here to stay on the right hand side. I will simply change the horizontal constraint, right? And you can see how the little blue dotted line now snaps to the right. Let's resize and you can see that's working just great. Now, designs don't only change horizontally, but also vertically. As you can see, I'm losing my plus button here. So I will set the constraints to bottom and right to fix this. Okay, So we have left, right, top, bottom cupboard, pretty straightforward stuff. It just pins it to that side of the parent frame. Now, if we want to position elements like our content in the middle, we can either use left and right, center or scale. Left and right takes the distance from the size of the object to the parent frame and keeps it at the exact same size when resizing. Scale, on the other hand, will define the layer size and position as a percentage of the frames dimensions. And it will keep the proportions, but not the exact number when resizing center, you might have guessed it just keeps the object in the relative center where you placed it on the frame in its original size. This would work exactly the same for horizontal or vertical alignment. Let's get back to our exercise. So I'm going to add a left and right constraints to my images here. And I'm going to send it the error at the very bottom. I'm going to add a center and bottom because you can mix horizontal and vertical constraints just as you need them. My text here, I'm just going to leave it the default setting of left and top. But I also want to add constraints to my status bar. Here. I'm going to add left and right to the frame of the status bar. And then I just need to make sure that to the children, meaning the time and battery, the elements within, I'm going to add different constraints. So my battery status, I want to be right and top. Now if I resize, you can see that everything works perfectly. Tip. When working with mobile designs, use the preset frame menu to jump between popular sizes that Figma pretty safe for you. Sometimes you might want to resize a frame and ignore the constraints. No problem. Simply hold down command or in Windows Control and resize. 9. CONSTRAINTS: 03 Constraints and grids: There's a bit of magic you can do with constraints and grids. Constraints themselves are pretty straightforward, especially when you have one element sitting in your design. But if we add more than one element to a row, it gets tricky. My single element here is set to left, right? If I do the same with the others, you can see from the blue dotted line that it takes the edge of the parent frame and not the other child element into account. If we resize, this would happen. We could set up some complicated work around with frames, but that won't be very messy. If I set it to scale. Yes, that will keep the elements in place. But as we learned, scale defines the layer size and position as a percentage of the frames dimension. For some designs, this might be what you are after. If you are however, want to use a specific size for your margins and distances between elements, then you can use a little trick with grids. I will add a grid to my frame. It is set to stretch and I'm going to edit 24 margin and also have a gutter of 24. You can change those numbers. Do you need Just make sure it's set to stretch. I will now change my constraints back to left and right for those elements, notice how the dotted line of my button down here, it is set to right and bottom does not point to the edge of the parent frame anymore, but to the column of my grid. If I change the constraints, you can see that now it takes the nearest column as its parents container. This is the same for my images here. They're taking those columns as the parent container. They're sitting in with left and right. So if I re-size everything, it sits nicely in the grid. You can, of course, toggle the grid on and off. You can either use the right hand side menu or simply use the shortcut Control and g. In this example, my grid is set to stretch. If I change it to center, it will become a fixed grid with a certain fixed container size in the middle. The left and the right constraints are no longer responding to this. You would need to change your constraints to center if you want to use that grid. By the way, this technique would also work for rows. And in case you don't know, you can apply multiple Crusades to one frame and Figma. So you could add rows, two columns and use them. However, as I have dynamic content and usually don't want to limit the height, I don't really use Rosetta much and simply stick to grids whenever I need them. 10. CONSTRAINTS: 05 Fix position when scrolling: You might have noticed that inside our constraints box, we have an additional box. We can activate quarter fixed position when scrolling. So as the name states, this will keep our elements in place when scrolling. It will still respect all constraints as well. However, for this to work, we first need to set up a few things. First of all, your content must extend beyond your frame. In the frame menu, you'll find the clip content field to show and hide content outside of your frame. Then make sure to select the nested frames or components that you would like to fix in place and activate fixed position. This is actually a prototyping feature. So we need to set up a few things in a prototyping menu. Select the mainframe, important, the mainframe, not the element you just fixed. And then jump to the prototyping menu that you find on the top right-hand side of your screen. Activate the scrolling. In my case, I activate vertical scrolling. By the way, you can also pick a device here. Just make sure that your frame size and the device size and matching to avoid unwanted scaling. Now simply hit the play button at the top right-hand side of your screen and you'll see that everything scrawled nicely and your fixed elements stay in place. This is really great for top and bottom navigations or floating buttons. With prototyping, which is another topic and Figma, you can add much more interactions and behavior to this as well. For now, this is a really great way to simply scroll through your designs and also do some first testing. By the way, you can also download the Figma app to your phone and live preview you design on the actual device. This is super simple and it's simply mirrors your screen directly to your phone. Make sure that your physical device that you're using to preview and you frame size in Figma are the same. 11. CONSTRAINTS: 06 Fun illustrations with constraints: Just some fun on this side. Constraints are there to make a design respond to different screen sizes. And you can also use the screen sizes to create some effects. Here I created a background grid and then edit topography, which is sitting in five grades as you can see here. And then I created a little illustration, in my case is a little monster here that is sitting across six columns. It's simply a square with rounded corners. And then I added mouth. And you can see that I set this up in pieces as some of them are set to left. This one is set to left, right. And also my eyes here, e.g. are set to center. If I now resize, you can see that this changes. Look with the different screen sizes. So you can really play with this and try out some fun things. You can then test what would happen on the mobile screen. So here I would use the same elements but change them around a little bit. So feel free to play with this example. 12. CONSTRAINTS: 07 Limitations of Constraints: There are some limitation when it comes to working with constraints. Constraints work really well as long as we're dealing with quite a straightforward setup. Once you add some more complexity to elements like more content, you will notice that you're running into a problem. Content will overlap as the padding and margins are not kept. By the way, this is a Figma issue in CSS, Those margins and padding would still be kept. However, how can we set up a more realistic design in Figma? This is where auto-layout comes in. Auto layout lets you create designs that grow and shrink with changing content. So during the next part of this course, we're going to have an in-depth look at auto-layout. We're going to see how to set up auto-layout components and even entire pages. And we're also going to have a look where it makes sense to combine Auto Layout, Grids and constraints. If at this point you little confused about when to use auto layout constraints and when to combine them, then don't worry, we're gonna go through it step-by-step. And I'm also going to give you an overview about when one or the other makes sense and where the strength and limitation of each approach lies. In general, auto layout is a little more tricky to get your head around in the beginning, but it's incredibly powerful and definitely a feature that you must understand as a UI designer. 13. AUTO LAYOUT: 01 What is auto layout?: What actually is Auto Layout. Auto layout allows you to create dynamic frames and components that respond to the size of their content. This way you can work with changing content, such as different length of text, yet always keep your layout and spacing intact. You can use auto layout on the smallest elements of your designs, such as buttons, up to larger and complex nested components. And you can even create entire pages with auto-layout. Auto-layout and that only adjust the size horizontally or vertically, but also allows you to add set padding as well as space between elements that will stay in place even when changing content or adding items. Sweet. You can align and distribute items inside the parent container with auto layout and choose in which way you want them to resize. With a few simple clicks, you can really create magic with auto-layout. But I have to be honest with you in the beginning, it's a little confusing and it seems like you're creating a layout with chewing gum that is really normal and you're gonna get used to it. So really bear with me, and let's walk through this step-by-step. 14. AUTO LAYOUT: 02 Setting up an auto layout frame: Let's set up our first auto-layout frame. Let's start with the most simple example, a button. This is basically an auto layout frame holding only one layer. But let's go step-by-step. Drew a frame and then add some text with the frame selected. Now click on the plus sign next to auto-layout from the properties panel. Note how the frame changed into an auto layout frame. You can see new symbol in the layers panel. Let's add some styling. I'm going to add a color fill for the background, some rounded corners. And I'm going to adjust the text a little bit. I can now adjust the content of the button and you can see that all my settings are kept. There are basically three ways in which you can set up an auto layout frame. First, as we just did by pressing the auto layout button in the properties panel. Second, you could choose the shortcut Shift and a, or you can simply right-click and select Auto Layout. Just as you add auto-layout to a frame, you can also remove it. You can use a Properties panel and simply click on Minus. You can use the shortcut hold, shift and a, or you can right-click and select, Remove auto-layout. 15. AUTO LAYOUT: 03 Where can I apply auto layout ? : So where can I apply auto layout? You can apply auto-layout to a frame or a selection of objects. This includes frames with existing content, groups or other selections of layers and all objects, components and components sets, new or empty frames. Text or shapes. Here are two layered will create a frame around it, but we're going to have a look at this in a minute. Let's run through them in more detail. So here I have a frame with content, and I'll simply select it and then add auto-layout. As you can see, this will pick up the padding and positioning and tidy it a little bit up if necessary. We can later always adjust those settings. If I apply auto-layout to group like I have here, then the group will be converted into a frame or to be more specific and auto layout frame. As you can see if I would remove the auto-layout now we're left with a frame. The group is gone, but that is completely fine because in Figma, we're setting up our design usually with nested frames. Anyways. You can also add auto-layout two components, and this is super handy and you're going to use this a lot. If I add auto-layout to my component that I set up here, it seems like nothing happened as the color and the symbols stay all the same. However, I can see over here in the right-hand side, Properties panel, auto-layout was Edit. Also, as soon as I change or add content, I can see that auto layout was applied. You can also apply auto layout or your variance, as they're basically just components. Just be aware to apply the auto-layout directly to your variance and not the group around them, because that was simply create an auto layout frame of all your variance. I can also apply auto layout to empty frames. If I do that, as you can see here, it seems like nothing happened. But as soon as I add content, I can see that auto layout rules apply. You can apply auto-layout a single layers like texts. However, you'll notice that if you select a tags, there will be no option in your right-hand side Properties panel to set up auto layout. This is because auto-layout only works on frames. However, if you select the text and then use the shortcut Shift a, it will create a frame around your text. You might see this a lot when people creating a quick button, because now I can change the background color and I can add some radius. 16. AUTO LAYOUT: 04 the auto layout menu: Let's have a look at everything we can deal with the Auto Layout menu. Once a frame is converted into an auto layout frame, there will be an additional set of properties in the auto layout section in your right-hand side properties panel. Let's understand what each of them does. Direction. Auto-layout frames can have two directions, horizontal or vertical. Note how the icon in the layers panel changes accordingly. You cannot have both, but you couldn't nest different auto-layout directions inside one another. More about this later. Space between. This creates, as the name states, the space between the items inside the auto-layout frame. Notice how the space is either horizontal or vertical, depending on your chosen direction. You can simply type in any number here or use the up and down keys to adjust the distance. Tip. If you're shift pressed while using the up and down keys to adjust the spacing. They will jump in the set nudging amount. So in my case this is eight because I'm using an eight point spacing system. You can change your nudge amount simply by opening the figma menu on the left-hand side. Type in Nudge and then set the value you're after. Besides the menu, you can also use the on-campus control handles. Simply drag them to adjust the spacing. If you click on the handle, you can set a specific value. If you don't want the items to be spaced but stacked, than simply use a negative value. Padding. Besides the space between items, you can also set the padding around them. Same here, you can use the menu whereby you're giving one box for horizontal and one for vertical padding. But you can also expand the menu and set individual values. Or you can adapt the padding directly on the canvas by dragging the own Canvas control handles. Tip. If you want to change horizontal or vertical at the same time, hold down Alt and drag. If you would like to change all four sides equally, simply press Shift Alt and drag more tips. You can also hold down Command and click enter your padding box in the menu. You will then get the CSS notation, alignment. With the alignment menu, you can change the positioning of the children within your auto-layout frame. 17. AUTO LAYOUT: 05 Advanced Settings: Let's have a look at the Advanced Auto Layout menu. So this is a little hidden but very powerful. Click on the three little dots in the Auto Layout menu to reveal the advanced menu. Let's go through each of them in more detail. Let's start with spacing mode. You can choose between packed and space between practices for setting. If you resize the frame, you can see that the set space between your eyes Thames is kept. Space between, on the other hand, will use all available space and create equal gaps between the direct child elements. And this will adapt automatically when resizing the frame. The great thing about this is that you can group elements together. You can either use a group nested frame or ideally another nested auto-layout frame as I did here, my example, because the auto layout frame only takes into account the nearest children, it will consider those two children. Now, this is really handy to align groups two different sides of the parent frame, like a navigations. I can always add more elements later on and they will just go in line with the set auto layout rules. Tip. You probably going to use this feature a lot. So there are two great shortcuts to know about. You can click on the alignment box and then with x toggle between space between impact. You can also click on the Canvas control handle and put a fixed value for packed and simply type auto for space between. Our next feature is stroke, include and exclude. Strokes are not calculated for when distributing space, which can make them overlap and cause confusion when it comes to development. So here you can set your stroke. Before we look at Canvas stacking, let's remember that I have space between in my auto layout and if I set that to a negative value than items will be stacked. By clicking on Canvas stacking, I can simply change the order. Note that Canvas decking does not change the actual position in the layers panel. There will be no change. If you want to change the actual position of an element, selected element and move it around to auto-layout with the up-down left-right keys. The last one is a text baseline alignment. So here I have my items, but they're all different sizes and I want them to be set all on a nice baseline. So select auto-layout frame and then you get a little preview. If you click, you can see that nicely aligned. It depends a little bit what you're after, if this makes sense in your design or not. 18. AUTO LAYOUT: 06 Auto layout resizing: Let's talk about resizing and auto-layout. This is the most powerful part of auto-layout, but also the one you might need a moment to get your head around. Previously, this feature had its own little box below the Auto Layout menu. Now you find it in a frame section. So below the width and height. The resizing basically states how the element will behave horizontally and vertically when there is a change in content or size. We have three resizing options, fixed width, the height, hug content, really cute, and full container. And you can mix them. So you could have one for height and another one for width. Let's first understand our settings in a little more detail. So let's first look at fixed. So here I'll have to auto-layout frames, one with a shape inside and one with text. So let's set the shape to fixed height and fixed width. And I'm also going to set the text to fixed height. And as you can see, it already gives me hugged for a reason here for vertical, but I'm for now setting it to fixed height. So if I re-size the parent container now, you can see that nothing happens because obviously the object is set to fixed and the same will be the case with text. So I can have the text fixed and width without any issues. But as you notice, it gave me a hug per default when it came to hide. The reason is that if I copy this text here and add more text, you can see that it does copy it, but it's not going to sit in a textbox anymore. So other elements are not going to respond to it and we don't want this. Let's see what happens if I change this to hug. I'm selecting the same text and now I'm changing the height back to hug content. And you will see that this box now hugs to text. So it uses all of the existing texts and then adds the spacing and padding around. When using hug with text, it's really important that you check your text settings as well. This should always be set on auto height, or if you're working with a horizontal layout on auto width. Now, what would happen if I change the width to hug contents as well? Let's try that. Well, that's not going to make a lot of sense in this case because it's simply going to distribute everything to Auto Width, then the box has gone to adjust. So I don't want that in this case. But e.g. if I'm setting up a button, that's a great example where I would use hub content horizontally and vertically. So as you can see, there is no one solution in really depends on what you're building and then mixing horizontal and vertical resizing settings correctly. Now, if I checked my frame over here, the shape in the middle, I don't even get the option of Hug content. The reason being that this is simply a shape, so it cannot hold anything to be hugged. Now, if I select the frame, I can set that to hug content. But it doesn't seem like much happened. If I, however, change my padding here, you'll notice that it will adapt. As soon as I would manually resize. Have a look at my resize settings. This will jump back to fixed. So if I then go back to hug, it will respect my paddling again. Let's look at our last one, a full container. Now, if I select this parent frame, there is no option fulfill container. This is because there is simply no container to look up to. So let's take the child element here and set this to fill container and feel container. Now, if I am a re-sizing the parents, you can see that it will keep the padding and use all of the available space from the given size. Let's use the same for our texts example. So I'm going to set this to phil container, and I am going to add this as a full container as well, even though, as you might guess, not the best solution. So if I resize the container, this is really great and it's going to use up all the available space and respect my padding. However, in the height, you'll notice that I'm creating empty space with text. Usually you might use fill container a lot horizontally, but we usually stick to hug content when it comes to vertical settings. It's really important that you start playing with those settings a little bit and understand what they're doing. But the best is to play with them in a real example. So let's build a car together. 19. AUTO LAYOUT: 07 Building a responsive card with auto layout resize: Let's apply our new learned resize settings to discard. First of all, I'll select the parent frame of the card and I'll apply auto layout. As you can see, Figma already tries to guess which would be the best resize settings. So in this case, hug, hug. And this is really great because e.g. if I duplicate this content and add more, you can see that this is a really working nicely. However, if I'm re-sizing, then this is not really what I'm after. So let's go through each element step-by-step. My image, I would like to re-size with the parent frame. So I'll set this to fill container. So let's see what would happen. Yeah, that's working just fine. I'm going to set my headline here to fill container as well. And now have a look what happens if I change the copy texts to feel container. And notice that right now this is the only fixed size. So this is clearly not what we're after and this is happening because this is not a size defining the width of my card, because my card, the parent container, is sent to hug, hug. So that's simply said that to fixed width for now. And now we can also have full container here. And if we resize our card, that is working the way that we intended to. Remember that when working with texts, we have to make sure that our text settings are always set to auto hide in a button where we're at hug, hug. This will be auto width, but any tags that can be longer than one line is always going to be have to be set to auto hide. This one needs to be auto hide. And this here needs to be auto hide. And as I said, Figma became really good at detecting this and already setting this up for you. But if you're ever running into any issues where the text is not really behaving with the auto-layout. Make sure to check those settings. And because we have the auto width and we have it set to hug vertically, we can just add more content. Let me just copy this and add more content here. And you can see that that works perfectly. And even if I now re-size, this is going to work fine. So let's look at our last element in our card Done button and this is set to hug, hug. And that's just perfect because hug, hug means that horizontally, it's always going to use this padding and vertically it's also going to respect that padding and our button is only going to be one line. So if I add more content here, that's just going to adapt nicely. If you would want a full width button, however, you would set it to fill container. And you can then here with the alignment center, the content with the parent frame. You can of course, still adapt all the spacing and padding. And you can also take items in and out of auto-layout. And just like this, you have a responsive card fully adapting to any content. 20. AUTO LAYOUT: 08 Auto layout components and instances: As we learned, auto-layout, also worked with components and this is a really handy. So here I have my responsive card. What I want to do now is I want to select this card and create a component. It also makes a lot of sense that this button here is an own component as I'll probably use instances in different places. I cannot create a component inside a component. So what I'll do is I'll take this button out, create a component, create an instance of this button, and put it back into my main component. Now the great thing about this is that if I select my instance of the button here, you can see that it inherits all auto-layout settings and resize settings. So e.g. if in the main component I would change the width to fixed. You can see that the instance inherits the setting. Let's set it back to hug content. In Figma, you're given the option to override auto-layout settings in your instances. So e.g. I. Could set this button to fill container. However, I strongly recommend that you keep all the auto layout settings intact and really only change e.g. the content of the button. If you would like to have a variation, e.g. a full width button or something with a different behavior, I recommend that you set up another variant. Okay, great. Let's now create an instance of the entire card. I can either just make a copy of my main component or I can use my menu here, resources, and then simply type in card and you will find the component you're after. And I'll have a copy here. You could also use the assets panel. I can now use those instances across my design so I could adapt the content. Let's just add a little more text here. Let's just add more headline. This. I'm going to keep the same. And then for the images, I will use a plugin. So I'll go plug-in and then I'm gonna put on splash, run it. So with Unsplash, you can either search a specific image or just use any of the preset categories. So I'm gonna go for interior for now, select the shape. And then you can simply select any of the images and it will fill the shape. You can of course, also use your own images and just import them into Figma. So my card itself, it's working great when resizing. However, what I want is if I would have those cards together, I want them to also respect the distance. So this is when nesting comes in, simply select both carts and then click Auto Layout and you create another auto-layout frame around those two cards. Let's understand this. This new frame that I created. If we have a look in the Layers menu, you can see that this now is the parent frame for those two auto layout card instances. And this is where a lot of confusion happens. So be aware that these cards still inherit all auto layout settings from the main component. So if I grab any of these cards and re-size it manually, you can see that this is all still in place. However, if I select the parent frame and resize it, then nothing happens. Why is that? The reason for this is that this card simply looks inside. So everything I said in this auto-layout card works with this single card. The card doesn't know where the instances are gonna be used in larger groups. This is why I need to set another resize option for each of these cards and tell it how I want it to behave with a new parent frame. So what I'll do is I'll select the parent frame, press Enter. This is a shortcut to select all child elements of a frame. And I can now set the resizing for all of them at once. And I'll go for Phil container. If I now re-size the parent frame, you can see that they're respecting the width. So by selecting the parent frame, I can now change space between. And I could also add some padding. And that will always correspond to the parent frame, not the child elements inside. If I would want to make changes here, I would use domain component. 21. AUTO LAYOUT: 09 Nesting auto layout frames Building a navigation: Let's build a responsive navigation with nested auto-layout. So here I have my different items to place inside the navigation. And here I set up a frame that is going to hold my navigation. So the first thing I'm gonna do is I'm going to turn my item here into an auto layout frame. And I'm also going to make it into a component. And I'm gonna do the same with my button. And just to have a clean design, I'm also going to turn my logo and my avatar into components. I'm going to grab this item here. I'm going to create three instances and call them blog about and contact. I am now going to add an instance of my buttons, as well as an instance of my avatar. And I'm renaming the button to subscribe. So now I'm going to select all of them and turn this by pressing Shift a into an auto layout frame. And I'm going to place the frame inside my navigation. So let me tidy this up a little bit. I'm going to change the spacing to multiple of eight. So 16, maybe it's a little small, 24. And I'm going to have a look, what will look nice. I could send it here or I could also use the text baseline alignment neck. That's not going to work with my avatar. I'm going to leave it and just use my Alignment tool here. I'll not only create an instance of my logo and also place this inside my navigation frame. So now the only thing that's missing is that I select my navigation frame, which is now my new parent frame. And I'm going to turn this into an auto layout frame on now going to tidy up any of my padding and spacing. So I want this to be a multiple of eight as well to go with my eight point spacing system. And is this position in the center? I'm just going to position all of this in the center. Now, if I resize, this, does however not going to work. Now your initial thought might be to use the resizing menu. However, there is a much better way. Remember that we're dealing with distribution. So let's use our advanced menu. Then change from packed to space between. Now it is using up all the available space when I resize. The great thing about this is also that if I take away elements or if I add elements, this is still going to work. I can even nest this further. So I could choose all my link items. And I'm going to do this over here in the layers panel because it shows a structure a little better. I could now press Shift a and create another frame. I'm gonna just going to call this links. So now I could distribute it a distance inside of those. And I can also change the distance between this nested frame. I could also take this nested group out and have it edit own items. So this way we would have three child elements again. And now my space between a still working but distributing between three children. Note that with auto-layout, there's usually not just one way you could build this. There are several ways that you could achieve this result. You might e.g. set all your spacing up here in your main components. So in your atoms, there is no right or wrong. However, consider that a little bit of padding here and a little bit of spacing here will probably be quite confusing. So I recommend that you stick to one technique and just discussing your team what works best for you. 22. AUTO LAYOUT: 10 Absolute positioning: We can absolute position other elements inside auto-layout frames. What does that mean? So here I have an auto layout frame. I want to drag this new sticker in here, and I wanted to sit on top of my image. Now, if I simply drag it inside 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 my right-hand sides frame menu, the very top there is the hidden little button called absolute position. If I click this, then I'll take it out of the auto-layout flow. I can now position it freely inside my frame. 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 recites doesn't apply. However, I will now see constraints appearing again for absolute positioned elements. So I'm going to fix this to the right-hand side and to the top. Now as I've resized, it's going to stick to the right-hand side of the frame just as I wanted to. By the way, if you want to add something like an alert bubble that goes beyond the frame, you can also do that. Add it to the frame, set it to absolute positioning. And then you might have to position it a little bit with your arrow keys so it doesn't go out of the frame. And then what do you need to do is select a parent frame and uncheck Clip content. You'll now be able to see it. And it will always move with your frame. 23. AUTO LAYOUT: 11 More complex auto layout setups: Let's understand more complex auto-layout setups. Here I set up different options for card. Let's add auto-layout to all of them to get a little more familiar with the process. As you will notice, key is to really start at the smallest element and then work your way up. Let's start with our first layout. If I were to simply apply auto-layout to the entire parent frame, then that will work. However, I would have the same distance between all child elements and I don't want that. Let me open the Layers menu so you can see this a little better. I'm going to create nested auto-layout frames here to give it more structure. So all my intro section, the headline subline and the date, I'm going to select that press Shift a. And I'm going to create a nested auto-layout frame. You can see that here the spacing is set to zero. So if i would increase that, I will get more distance. I can now already take the parent frame, add auto-layout, and you'll see that now it's working. This is a nested frame. Now you can see that the spacing only applies to the direct child elements. It's now set to 14 and I could increase that or decrease it. I want to set it to 16 to have a multiple of eight. Auto-layout picked up all my padding left, right, top and bottom automatically. And it's also sets with 14. I'm going to press Command and click into my padding options. Remember this is the shortcut for CSS notation. I add 16, and this way I can change all padding around to 16 with one-click. All I need to do now is to set the resizing options for the frame S. So far, nothing is happening. I select the image and I leave that at fixed, fixed. Then I select my nested frame. And now this is why you need to be careful. If I send this one to fill container, I select the child element. You'll see that this is still set to fixed. So it's important to select the parent, press Enter, then you get old child element at once and then set it to fill container. So I'm setting the child elements as well as this parent container now that's its own new auto-layout to fill content. I'm setting my copy text to feel content. And I'll make sure that it's set to auto highs. My link I can said to hug, hug as I'm treating it a bit like a button. And now you'll see that everything is working just great. Let's tackle our second layout. So here we need to combine horizontal with vertical auto-layout. Let's just think the structure through before we start. So this basically is what we set up before. We'll have a nested frame here. Then we create a frame around the right-hand section. And then we have this parent frame with a horizontal auto-layout frame. Let's do it. So I'm going to select my headlines here again, my intro and I'm going to press Shift a, and this becomes an auto layout frame. You should of course, always name it. Let's call this headlines. Then I'm selecting my copy texts and my link, and I'm pressing Shift a again. And I can also name this right-hand side or right. Now I'm selecting my parents frame. And as you can see now, I only have the two child elements here. So it's going to apply the horizontal layout. Let's have a look at this also layout. And you can see that this is automatically set to horizontal. So just as Figma picks up on padding and spacing and also picks up on directions. So let's clean this up and also add our resizing right away. So I am setting this here to hug content. I am setting my text to feel container and make sure it's auto height. And now I'm having my last element, which is a nested auto-layout frame. First need to go inside, select all the child elements with N to set them to fill container. And then I am selecting the parent again and also set this to full container. Now, why is this happening? This is happening because the parent frame is set to hug. I can simply resize this. Set this to fill container. And now it's gonna be correct again. I have my right-hand side all set. My image here. I wanted to leave at a fixed again. What I could do is I could change the position if I wanted to in the center or something with alignment. And now let's see what happens if I resize it and this is working. Just great. You might wonder what would happen if I set this to fill container as well, then they would share this space. So you could also have something like this. But in my case, I want to keep it at fixed. Let's set up our design here again, I have a mix of horizontal layout. So this here will be my horizontal nested frame and Vertical Auto Layout. As well as a little absolute positioned element on the top right-hand corner. Let's first select our headlines as usual, shift a to create an auto layout frame, by the way, can always use the menu. It's exactly the same. Then I select the image and my new nested frame, and I press Shift a again. And now I have only vertical child elements in my parent frame with the same distance. So I select my parent frame and turn it into an auto layout frame. So this doesn't look like what I'm after because this element here is now seen as a child element. I'm going to take this out of the frame for now and deal with that later. Okay, So let's first have a look what happened here. It took out my paddings. I'm gonna just add that. I'm going to press Command and click into my padding fields and I'm going to set this to 16 all around. So that's back again to what I want. Now I'm gonna do my usual and select here the child element of my nested frame, full container. My nested frame also wanted to fill the container. My image as usual, I'm leaving at a fixed and I'm setting this to fill container. And now let's take this one here. Let's see what happens. Yeah, it keeps the container because the parent is set to hug, but already has enough content to hug. And so let's resize now let's see if that's working. That's working just fine. The only thing I don't like is this padding here. It's also a little bit is set to, is set to three. That's way too small. Let's set it to eight. Perfect. And now I'm going to deal with my absolute positioned element. So I'm going to take this and drag it in. It's gonna be seen as a child element again until I activate the absolute position. Now it's taken out of the auto-layout flow. I can now position it wherever I want it in my frame. And remember, I can add constraints. So now if I re-size, that's working, just great little error happening here. Let's see that this nested frame I haven't said to feel container. Let's change this. Now. Everything is the way I want it to be. Again, you can hear if you select this frame, position the image so you could have it at the top, or I quite like it here in the center. That's up to you. Here, no doubt is my most complex layout. Let's have a look what's happening. So I have two main sections. There's bottom bar here and main content. The main content is again split into horizontal layout. So I'm having this side and my image. Let's start with the main contents. So let's select all the text on the right hand side shift a, and we turned it into an auto layout frame. Now I keep that selected, select my image, press Shift a again. And now I have my upper part. I'm going to call this up not the best Meaning. Then I'm going to have a look at what's happening down here with my bottom bar. So let's have a look. If we would just turn this all into auto-layout, it would think that all of those I'm trying to elements, we don't want this, so we need to do quite a bit of nesting here. So I start with my avatars here, I select all of them, press Shift a, and you can see that what happens is it positions it nicely next to one another. I don't want this, but I can stack them simply by dragging or you could also add negative spacing. You can do that to your liking. I think it was something like this. Now, you can see that this isn't this one used to be on top. So what I can do is I take the advanced menu and go to Canvas stacking. First on top. Perfect. Okay, Then these two seem to be on the left with their own distance. So let's select those two. Press Shift a, turn them into an auto layout frame. And then here I could even adapt the space. I'm just going to set this to 24 and have my multiples of eight, nice and tidy. Now I can select those two nested frames I created, and I'll create another auto-layout frame around them. Now I can position them so that they're nice, all in the middle, e.g. and I'm going to have to look what I'll do with this bar here. So I would say that this bar, I might leave at its own element, its own child element. But let me see, maybe later I added to one of my nested frames. Okay, so now I have this up here. I have, I'm going to call this bottom bar. And I'm going to have the line. Let me just put that in the position I want them to be. So now I take my parent container and turn it into an auto layout frame. That looks good. And now let's set the resize behavior. So in here I select this frame again, press Enter All the child elements to fill container. And I'm setting this here to fill container again, my image, I leave it fixed, fixed. And these container for the upper part, I'm also setting to fill a container. Let's see the main container set to hoc. I'm going to set that to fixed right now so it doesn't re-size. Now I'm going to have a look at my bottom bar. These images here. I leave them at fixed and hunk content. That's all fine. Here. How content that's looking good, her content, great. The parent frame also have content. And now what I do here is I set this to space between. And then I only need to deal with my line here that I'm going to set to fill container as well. Okay, let's have a look if that works. So my upper part and my line is working, but I forgot to set the entire bar here to fill a container. Let's resize again. Fantastic, that's working. So as you can see, as long as you have a strategic approach to auto-layout, it's not actually that difficult. Just think of it at little parts that you stick together and not one big, overwhelming design. I like using the approach that I first set up my nested frame. So first I think of the structure, then I said the resizing. And then in the end, like what I would still have to do here is I make sure that everything is a multiple of eight and respects my aid point spacing system. And of course he had also need to have a look into monastic child elements to make sure that everything is in line with my spacing system. 24. NEW! AUTO LAYOUT: Variables for spacing and padding: Using variables for padding and spacing and Figma. Let's first have a look at the collection that we're going to use for our spacing. Click on the gray Canvas background, and then you see local variables. Click on the local variable sign, and you will see your collections. You can change from any collection that you already created and you can create new collections here as well. I already created those variables for you. But if you want to create more, simply click on create variables. Then for spacing, you would use a number of variables, and you can create any other variable that you would like. You can also add variables in between, simply by dragging variables that you created around your collection. But let's delete this one here. You can do this by right clicking and then simply click on delete variable. As you can see, I'm using multiples of eight for my spacing system. Also note you can click on the edit variable, and then you could define where you want this spacing variable to be used. For now, let's just close our collection, and let's apply this spacing and padding to our card. This will only work on element setup with auto layout. Let's select our card, you can see that currently on the parent element here, no spacing is set. I could pick a variable simply by clicking into that field on the variable symbol and then choosing a variable from my drop down. However, this would add spacing around my card. Now, I don't really want this. I want this spacing here inside of my card. This part here to have the padding added. I'm going to select this nested auto layout frame. So you can see this already is a multiple of eight, but I want to use my variable, so I make sure that everything is aligned across my design. Again, I select the field. I see the variable C appear. Click on it. I can now choose my spacing block M. I'll choose that here as well, and I can also use that for spacing. Remember, we can use, which would be the space between. But I'm choosing a variable, and I'm again going for the eight, which I already set up manually before. If we set this up as a component and now pull out an instance, then you can see that if I select this nested layout in my instance, the variables are inherited from the main component. If I resize, then everything will stay in place, and my variables will set the spacing and padding for this component. If I would change the value of a variable, so let's just take my spacing block and increase the number, then any place I used this variable across my design would follow. 25. VARIABLES : Note, variables are a really, really big and powerful topic. They were introduced in late June 2023. If you're not familiar with variables, then I have a whole separate deep dive on that topic. 26. NEW! AUTO LAYOUT: Setting a minimum and maximum width: Setting up a minimum and maximum width with Figma. Here I haven't auto layout cars. Now, I can resize this card, but at some point it's gonna be too narrow. It at some point it's gonna be too large. So what I wanted to do is I want to set a minimum width like around here. And a maximum width. Let's start with a minimum width. I'm just going to re-size till the point where I think this is where it still looks good. So it will be around something like 240. So I can go over here and in the width I see a little error. I now get this drop-down and I can pick the ad minimum width. And I'm simply going to type my number in here that I want and I can change that at anytime. Now let's see what happens if I now resize. You can see that I can still go as large. But if I go smaller, you can see that once I hit this threshold, then two red lines, a PM, and I'm being stopped on resizing any further. Same for a maximum width. I think I'm going to set this around here, maybe 450. So the same procedure with a dropdown, add a max-width, I'm going to go for 450. And again, I can always change that to any other value. So now if I resize, you can see I can pull it any further, but I can change the size in-between those two sets of Min and max. And you can use them both together. Or you can simply use Min or max if you want to remove than simply select your component. And you'll see that Min and max is set here if you hover over this as well. And you can see here, remove Min and max. You could also set up variables and then use them as your Min and max values. So let's have a look. If we jump to our design, I set up a collection with a Min and a max width of 250.450. However, if I simply select the card, then go for apply variable and let's say add the min-width. Then this would be added as the min-width, like the main width of this entire card. So this would not have anything to do with Min or max. It would simply like, if I resize it, like throw out the variable that I've set here, what I would need to do is first go into add min-width, then I get a new field. And from here I can now apply my min-width. And then I do the same for max-width. I get a new field and I now apply my variable for the max width in. Now if I resize, then this is what I'm after. Now I can turn this into a component, pull out an instance, and you will see that this instance will follow the set Min and max of the main component. By the way, we use as much less however, be aware that you can also set Min and max to the height 27. NEW! AUTO LAYOUT: Auto layout wrap: Auto layout wrap. On the left here I have two components, a basic card and a newsletter card. And on the right, I have a parent frame. And inside that parents frame, I have instances of these cards. Now this parent frame here you can see set up as auto layout. And since June 2023, we don't only have Horizontal and Vertical auto layout set up if we also have wrap. So let's see what happens now as I have this set up to Horizontal. And you can see that it does resize. But at some point, this would need to jump over to the new row. Here, I can use wrap. Hi provide, just add this wrap, then nothing is going to happen because my components are still set up with auto layout and they don't know at what point I want them to break. We could change them from Phil container to a fixed width. So now they have a fixed width, if I resize still will break to the new line. But I might want this a little more fluids. I want this to be fluid and at a certain point, jumped to the next line. So what I can do is set a Min and a max width. So I'm going to add this to my main component. Let's just add a min-width of 250, and let's just add a max width as well of 450. Not a newsletter. I'm only going to add a Min width for now and see what that looks like because I quite like that to stretch. What I need to do, I need to select the parent. If I hit Enter, then I select all instances at once. And I now set it in back to fill container. Currently inheriting minmax is still a little buggy. So what I'm gonna do is I'm going to go and select all the instances again and make sure that I reset the sizes. You really only need to reset the sizes if you're experiencing some trouble. Otherwise, this is the result that you should be getting. So now, as the instances hit their minimum size, they're gonna reshuffle into the new line 28. NEW! Setting up an entire auto layout page: Let's set up an entire page with auto layout. Here I set up a basic page. It holds a navigation, as well as three instances of auto layout cards. Everything is already set up an auto layout, so my navigation is already set up to space between and responsive. My cards are also set up with auto layout. However, if I resize my parent frame, they will not be reacting. If I simply turn the parent frame into an auto layout frame, that's not going to work because then they're all gonna be distributed vertically. I need to add some structure by Nesting auto layout. First. I'm going to select all three cards, and I'm going to create an auto layout frame around them. Space between is now basically my gutter that I can adjust. Now I can use my parents frame and add auto layout. Basically, think of your design as different sections that you're joining with the final auto layout on a parent frame. Now I'm going to add the resizing. And what I like doing is going from the lowest child elements are from the center basically up to the parent frame. I am now going to select my card group and I'm going to press Enter. By pressing Enter, I'm selecting all children inside this auto layout frame. And I'm now going to change the resizing for all of those child elements to fill container horizontally. So if I select the card group again Set apparent frame, I can test this and I can see that that works nicely. So the content of this car group is responding. But if I re-size the parent frame than the cost Web itself, doesn't know yet what to do. Some also have to set the entire group to fill container. So let's understand this again. This group is set to fill container and older children inside this group are also set to fill container. Those are two different things. I'm going to set the navigation to fill container as well. And now I'm re-sizing the parent. And you can see that this is working. Now that it might auto layout frame is working. I can set up and clean up a little bit to spacing. The spacing here would be the distance between my different sections and the margin I could set with Horizontal padding. I think I'm going to go for top zero. And I just want to add a little bit of space on the bottom for my design to breathe. Update Figma introduced variables. So I could also use those variables to set my spacing values. Now I want to mention again that I could have also added this padding to my card group is really up to you. The important thing is to be consistent. It also depends a lot on what you're building. For example, this is working because my navigation, it's not going across the whole width. Let's say this navigation had a background color, then this would surely not be the ideal solution. So if I want us to work and I still want to keep the 48 of margin that I have here on the parent frame now for left and right, I first need to take this off the parents. So I'm going to set this to zero. And I'm going to set this to zero here. So now everything is full width. I'm now going to add the 48 back on the navigation. I'm going to select the entire card group and also add 48. Now let's resize to see if everything is working. And this is working just fine and am now having a full-width navigation. Soon as you have a clear idea of your sections and your resize setting and what you want to achieve. It's literally all about playing with your layout. Try it, duplicate cards and items in a row, and also take some away. And you can still change the resizing as well as your margins individually. Also trying to add some text, make sure to always nest when adding new groups. And you could even add entire sections like for example, an intro section. Make sure you keep the margins consistent. So here I would add 48 again. And then just play around with background setting, margins and Spacing. So don't set up an entire page and then try to add auto-layout everywhere. First, start with the smallest components, your navigations, your card, all your different sections work your way up until in the very end, you create the parent frame. This will keep it easy and scalable. Let's push this a little further and remember our helpers that we already learned about. Let's start with the text here. So right now we either have the choice between fill container and then it will resize with the parents. But then it might get too large at some point. If we change that and we re-size, then we have a fixed size, but then our text doesn't respond I could however, use Maya max-width to set this. So I'm going to use max-width and I'm going to set this around 900. And then I just need to make sure that I set this to fill container. Let's check if max-width still in place. Yes. And now we can see that everything stays nicely in place and if I go smaller than it will be taken with the new sizing. Now let's add some more cards. So I want to add all of these here and there just a single cards that are Same instance as the others. I just already added some content, so let's put them in here and you can see that now this is what they do. I want them to wrap in the next line. So we know that we could use our wrap feature over here and auto layout. So I set that on the parent frame. But right now nothing is happening because these cards don't have a fixed or minimum width. So what I'm gonna do is I'm going to select a parent. I hit Enter and now have all the child elements selected. So all the cards. And I can now add a min-width, and I'm just going to type that in by hand. I could also use variables for this. So have a min-width of 250, and I could also set a max width. Let's just do that of, let's say 450. So let's just move this up a little bit and let's resize. And then you can see this as working there. You're going to get this here that it doesn't always equally distribute. What you could do is you could add like a ghost card in here if you wanted to have them all equal and then you could set this to zero. You can also set up a component which you might call ghost or space SAP. But actually, I'm gonna leave it at the natural state just like this. So now we just want to add our food tab. And notice I want this food set to re-size, but I want the terms and conditions to be stuck to the right. I'm going to select this frame. And then remember, we can either type or choose also here. Or we can click inside of our alignment and simply press X to toggle between auto and the space between. So now I'm simply going to add this one in here. Let's clean this up. I want this outside of my card group. If you're making a mess, just go back. Now I'm going to drag this back in and this is what I'm after. So let's have a good look. If this is working, Let's select this bar and make sure it's set to fill. Yes. And now everything should be working so you can see my text is in place. My cards are resizing nicely and my footer is also responding to any resizing, really using all auto layout features in this small example, this might be a little overwhelming. Don't worry, just take one element at a time step-by-step 29. AUTO LAYOUT: 13 Same height for all children: Settings, same height for all elements with auto layout is actually pretty simple. Here I have four different auto-layout cards and you can see that they're all set up responsively already. Because of the different content length, they have different heights. Most of the time this will be just fine, but there might be cases where you want all of these cards to have the same height. If we would set to Cannes to fixed height, the carts will, however, not react to changing content and changing sizes anymore. So we don't really want that. What we really want is to dictate the card with the most content, the height for all the others. And there's a little trick you can use for this to work. First of all, we need to create a parent frame around this. So we select all our child elements, press Shift a, and created an auto layout frame around them. I'm going to call this parent. I'm going to give this parents and background color, and I'm going to add some padding. Now what I'm gonna do is I'm going to select the parent, press Enter to select all of my child elements. And I'm now going to set them to feel container vertically and fill container horizontally. My parent container, I now need to have set to fixed and hug. And now you can see that everything distributes nicely even when changing the size. If we would change the content, that would also automatically adapt. So it will always be adapting to the card with the most content. Key hereby is that the elements are set to fill height and the parent is set to hug. If you want some of the elements to stick to the bottom, simply select the card, go to the Advanced menu, and change to space between that works horizontally as well as vertically. 30. AUTO LAYOUT: 14 Stacking techniques: Within your design, you'll probably have sections where you have a multiple cards or similar elements that you want to stack. My example, my cards could be distributed in rows or in columns. Let's start with my first example here. All of my cards are already set up as responsive auto-layout frames. So what I'll do is I'll select all the cards in a row. And this can be as many as you want. And then create a nested auto-layout frame. So I press Shift. I'll do that for all of my rows. I'll now select the parent frame and also apply auto layout here either by pressing Shift a or via the menu. Now, all I need to do is set my resizing. I select my frame, I press enter. Now I get the rows. I'm already going to set them to fill container. I press Enter again, and now I get all the child elements are all the card within and I set them to fill container as well. Now if I resize the parent frame, all my cards are distributing nicely. Also, if I would change the content, then that will automatically adapt. And I could e.g. add more cards to a row. They would then distribute equally in that row. So I don't need to have equal amounts in all rows. If I would want my cards to have the same height, I could also do that. Press Enter, press Enter again to really get to the child elements and set the height to fill container. My second example, instead of creating rows, I want to create columns. So I select all cards in a column. And I press shift a to create an auto layout frame around it. I'll do exactly the same with my second column. Not select my parents frame. And I turn that into an auto layout frame as well. I'm just going to tidy up a bit. So in here, Let's have the distance at 40 for both of them. And I want the space between as well at 40. So if I now I just need to set my resizing now so I press enter, then I get my columns and I said them to fill container. Press Enter again. Now it gets all my child elements, all my cards, and I set them to fill container as well. If I'm resizing now, then my design will respond to columns. And it's the same here. You could simply add single cards to all of your columns. You could also add entire columns to your design. In my example, I have everything set to fill container. But what I could also do is I could select one column and I could set it to fixed width. Now I would have one fixed column and all the others being responsive. So you can really play with this. 31. AUTO LAYOUT: 15 limitations of auto layout and their solution: Auto-layout is amazing, but it also comes with a limitation. Let's investigate and let me also show you a little workaround. So here I have an auto layout frame that holds auto layout cards. And these cards are all set to fill a container. If I resize, you'll see that that works perfectly. So in these examples, we always had an equal distribution of all three cards. If I don't want this, what I could do is select one card and change it to fixed width. If I do that, then this card will stay the width that I gave it and all the others will remain fluid. And that is pretty much two option that I am given with auto-layout. So what will not work with auto layout is that I'll have a distribution like this, e.g. that I'm using up 40 per cent for one element and then distribute the rest by 20 per cent. Let me show you what this simplified example. So here I have an auto layout frame holding two images of different width. They're currently set to fixed width. If I change it to fill container, you can see that right away the images will jump to a new equal size. It doesn't matter how many images are in your row. They'll always have equal width if set to fill container. So let's say, I don't want this, I want this one to come back to its original size. So see what happens when I resize it. In my Resize menu. It's now changed from Phil to fixed automatically. So if I resize the parent frame, then it will use the entire width. However, one image will stay fixed and the other will use the remaining space. So there's no way to keep the proportions with auto layout. What I could do if I wanted a distribution like this is to take of auto-layout from my parent frame. And now I'm going to apply a grid. I'm going to columns and I'm going to add a little bit of margin. And now I can set them up to fit in the columns. And you can see that now I have an unequal distribution of 2.3. If I now set them to left and right and resize the parent frame, then they'll keep those proportions. We can of course, toggle off the grid and get this really nice effect. Let's get back to our original example. So what I did here is I took off auto layout from the main parent frame and applied a grid. Notice that all the other elements like my card and my navigation, this is all still set up with auto layout just as before. So auto-layout works inside of those elements, but around them, I now applied my constraints and I set them all to left, right, to respond to the grid. So if I resize the grid now, then inside the card auto layout this to working. However, the elements will behave with the grid. Because I'm using the grid, I can now change the amount of columns they occupy. Hereby change the distribution in my design to my liking. And this would still be working. Of course, toggle off the grid. And you get a layout like this with unequal distribution. Unfortunately, this might not be a perfect solution either. As with growing content, you might not be able to keep the horizontal spacing when removing auto-layout. This is, however Figma issue. This will not be a problem with CSS later on. 32. AUTO LAYOUT: 16 Constraints and auto layout comparison: Let's recap and compare auto-layout and constraints to understand when to use what. Auto-layout, no doubt is more powerful feature and you're probably going to use that a little more as well. We have directions, we have spacing between items, horizontal and vertical padding we can set, we can align with auto-layout. And we of course have our Resize menu plus the superpower of nesting different auto-layout and combining all of those features with constraints, we can set horizontal and vertical constraints. And we can also set a fixed elements. Note that if you want to set fixed elements in a prototype, you need to use constraints. You will not have this option with auto layout. In larger projects, you'll probably separate prototyping in a fixed size from your responsive design in another file. Anyway, so that's not really an issue. Let's recap the benefits and limitations of both of them when it comes to setting up elements like sections or entire pages. So auto-layout is perfect. If you have an equal distribution. It's not going to work well with uneven distributions because if you said all of your child elements to fill container, they'll always automatically get the same size. So that's not going to work. If you want to work with one or more elements being fixed and the other is fluid. That is no problem in auto-layout and will work just fine. Setting up your components. In auto layout is generally a really good idea and it will work most of the time. Just grade. Here we're really talking from anything from a button and an up to more nested complex elements like cards, navigations dropped down. All of that should be set up in auto-layout. You'll then be able to use those responsive auto-layout components, either inside an entire auto layout setup or inside a layout with grids and constraints. So all of these little elements here would still be auto-layout, however, sit inside a grid and use constraints. So let's have a look at that. Equal distribution will work just fine. As you can see it. You could use either approach. In this case, you'll probably want to go with the auto-layout approach if possible, because the only disadvantage you get with grids and constraints is that the horizontal spacing will not be kept. This is a Figma and not a CSS issue. If you want to use uneven distribution and work with responsiveness. And this is really a reason to go with constraints and grids. Remember that old components you're going to place on the grid are still gonna be responsive. The only limitation you're going to have is horizontal padding with growing content that is not going to be kept. If you want to combine fixed and fluid, you could still use grids and constraints by simply nesting a frame with a grid. However, it might be a little bit of a hacky solution. It really depends on what you're building inside your components, unless you have a really good reason. Why Don't use constraints only because as you can see, the margin will not be kept. So as soon as you resize, things will run into one another. Again, this is a Figma and not a CSS issue. So as you can see, it's really about what you're trying to achieve. It depends on your team that time you have the setup, you're deciding on making sure that you talk to your development team. And remember that Figma is only a tool to demonstrate what you're trying to build. You're not building the end product and it's fine if you need to document and have a conversation about some of those elements. 33. AUTO LAYOUT: 17 Fixed aspect ratio images: You might have noticed that currently there is no way to keep the aspect ratio of images in Figma. What does that mean? That means that the height and the width of this image when I resize, are not going to be scaled proportionally. That might work with some images, but sometimes you might just want to keep that size. There's a little trick you can use. Go to the community section and type in aspect ratio. You'll get an overview of several files. I personally like using this one, but probably most of them will work just fine. Double-click and then click on, get a copy. The file will now be duplicated to your Figma account. Inside the file, you find some great explanation. So if you really want to understand how all of this is working, is all explained in detail here. If you want to be lazy, just grab the aspect ratio you're after. So in my case this is 16 by nine. And then I copy it, jump back to my file. And I'm just going to paste it here for now. So if I would exchange the image and add this one as just make it a little smaller so it fits. Add this here, let's remove my coffee or actually let's leave it so you can see the difference. Then I set it to fill container as well. And now as I'm resizing, you can see that this keeps aspect ratio and this one doesn't. So what I want to do, I simply want to add this image inside of here. Let's take this out. And now let's first make sure that this has the right aspect ratio that I want. So as I'm working with 16 to nine, Let's clip it here and then put 160, and then make sure that this is set to 90. Great. You could also draw a frame set to 16 by nine and then just add the image on top. Now what I need to do, I need to export this. I'm going to export it at three times its size, JPEG and export this. Great. So now I'm going to select the image here, and I'm actually going to delete this overlay. So this is the real image. And I'm going to go choose image. And I'm going to select the image that I just exported. And now this is sitting inside of this setup and you can see this is quite a complex setup. If I now re-size, this is going to keep the aspect ratio. 34. BREAKPOINTS: 01 One design will not work for all sizes: One design will not work for all sizes. What do I mean by that? Okay, so now we set up our responsive pages and components. We are however, still stuck with one issue. The same design will not work from mobile to larger desktops. With one step. It will only work within a specific range. How can we deal with that? What we need to do is we need to set up different ranges for our design. This is what breakpoints come in. A breakpoint defines a certain point where the design may adapt. So while we still use responsive behavior between those breakpoints, we reconsidered a general layout once entering a new range. So in my example here, you could see that until break point a, I have my mobile setup, so this is my default setting. And then from break point a, I am changing the navigation and I am changing the general layout a little bit. This works until break point B. What I am then again, using the same elements, adapting delay out to work on the new screen size. That doesn't mean that everything has to adapt at a certain breakpoint. As you can see, my navigation here stays the same. While Figma officers great features to deal with responsive design, namely auto-layout constraints and grids. It currently does not give us any automation to set up breakpoints. So we need to set this up ourselves. 35. BREAKPOINTS: 02 Think of single components adapting, not entire pages!: It is important to think of components adapting not entire pages. It's really not about setting up an entire new page per breakpoint. Remember, we work with a component-based design approach. So it's really about considering at which breakpoint a component adapts. And there are different ways this could happen. Sometimes you need to change the entire component, e.g. on a smaller screen, you might have a burger menu navigation, which will change to a navigation bar with links on larger screens. Elements like cards or hero sections might need a completely different setup for smaller and larger screens. You might even decide to add or remove certain elements for smaller or larger screens entirely. However, in many cases, it's efficient to just adapt the space and element occupies. This could be the same card used across all screens. We would however, distributed differently, so different amounts of cards per row. And we could also specify the width. This could be done in percentage or a certain amount of grid columns. It really depends on how your pages setup. And of course, overall elements such as margins and paddings might be adapted as well as text size. So you can see that it's really about considering each element and each breakpoint individually. We generally want to change as little as possible and as much as necessary. Keep it simple. 36. BREAKPOINTS: 03 Breakpoints in CSS: Before we set up our breakpoints in Figma, Let's first understand how they work in CSS. In CSS, breakpoints are implemented with the so-called media queries. A media query basically says Pay browser, check the width. And if it's larger or smaller than x, then display the design or the changes I defined for you here. You can set up as many media queries as you want or need. But you'll find that most designs use around three to five. You might have heard of the term mobile first. So in short, what that means is that you set up the smallest design first, you can think of this as your base setting for the entire page. Then only if you want to adapt something, e.g. on my case, my headline on mobile, this might be a 32 or to RAM. And I want it to be larger, so it's 64 or four RAM on a larger screen. Then I would override this setting. Everything else will stay in place. So it would use the same font weight, the same line height, and so on. Only if I cancel it out in the next media query, then it's overwritten. So as you can see, this is the reason why we do not need to set up an entire design and documented at every new breakpoint. We need to document the base that we have and then any changes that will happen from there. This also doesn't necessarily mean that all your designs are setup in mobile. And then later you have a look what's going to happen. Because if your main target group is a larger screen size, then by all means designed for that one first and Figma. However, when it comes to documenting, you might want to discuss this with your development team and probably first document all your base settings and then just see what would change. 37. BREAKPOINTS: 04 Which breakpoints should I use?: Which breakpoints should you be using? If you're going to work with an existing project, then all of this is probably documented in the style guide. In larger companies, they'll probably have their own style guide page. So here's an example for decades long and this is public. They can visit this at decade lawn dot design. And it's absolutely fantastic. So you would go here to digital. And then you can see further down here, you would choose guidelines and layout. You can see which product you're working on. So in our case, that will be web guidelines. And then you can see the whole documentation here. You can see that in their case they're using a grid system and you're getting older info. And further down here, I find to info about the breakpoints they're using. You might also be told that they're using an existing system and just use a default setting. So in that case, you'll probably be given a link to the documentation. And then within that documentation, you usually find the breakpoints. So here e.g. this is Bootstrap and you can see that these are the different breakpoints and you could use these values. Here is another example for Tailwind, and you can see that the documentation will vary, but it will always be similar. So as soon as you know what you're looking for, you can see that these are the different breakpoints used. And you can also see that they're all pretty similar. If there is still absolutely no info and you can just go with whatever you want to go. Then I recommend that you use popular systems like tailwind or bootstrap and simply pick their breakpoints. That doesn't mean that you need to use the system afterwards or any other components or settings. Absolutely not with simply taking the breakpoints for now in setting up our figma design. As we already saw, breakpoints are not identical but very similar in most systems. This is because the group as many screens as possible per range. Sometimes you find this simplified as mobile, tablet, laptop and desktop. It's not really that simple because screen sizes I quiet dynamic, so don't rely on this. It's really about catching most screen sizes within those different groups. So someone that all of this research for me already. That's why I personally like to just take existing breakpoints. But if you're wondering, if you can simply set up your own, yes, theoretically, you could also define your own breakpoints. Any value would work. You could also alter breakpoints of existing system. I would have ever be a little careful with it. Rather stick with what I'm given and concentrate on my design. 38. BREAKPOINTS: 05 Setting up breakpoints in Figma: So we're loving breakpoints are ready, but we don't have breakpoints in Figma. What can we do? Well, we can set up our own. So here's the breakpoints I got from my team. What I'm gonna do now is I am creating a visual representation of the given breakpoints in Figma. This way I can see the different ranges that I'm dealing with. So basically how I do it, I start with here, you can see my base size that is here will be my default settings. And as a smallest point, I am using 320, which is d old iPhone as E. So this is old and pretty small, should really be one of the smallest sizes around. And then this is all my default and that goes up until I hit. You can see here S, which is 506, 76. So this is what this kicks in, and this is now my S range. And this will all be working until I had 768 and so on. Then the last one here would be my extra-large, which starts at 1200s. So this is the minimum width, 1,200. So here it starts at 1,200 and then anything beyond that would be in the Excel range. So our only to set this up once for my project, and now I turn this into a component and I can now use instances for testing. Sometimes I like to add some guides for easier overview, but that's really up to you. And then what I do is I copy over the elements that I intend to set up as components and now I can test them here. So usually I set up everything in auto-layout already. And now I can see until which size things are working. And when I need to adapt. In this test environment, I can test single components. I can test whole section. So like how something working in a row. Or I can also test entire pages. I usually have an own page set up for all of this and I call that responsive testing. This is really a playground for me. And once I have a clear idea about what's working and what needs to adapt at what breakpoint, I can then start documenting. 39. BREAKPOINTS: 06 Testing responsive components: Let me show you an example of how I test an actual component. We're going to take the navigation as an example. So right now I'm on my design page, and this is how I like to set up my projects. This might be completely different for your team. I like to have a one section that are called development. So this is where all my designs live. And then I have a page where all my styles and components are documented. Then I have another section, the responsive testing. This is where we're going to play with our component. And I have another one called playgrounds. So this is where I can just try out different designs and test things. And I have one called file management. So here I add things like you can see my breakpoints, headlines and older info. That's not really part of the design. So it might design page here. I usually have to screen sizes, so one for mobile and one for desktop. And I like to stick to the same sizes. So I'll have this one here, set edge 375, and my desktop set at 1,440. You might have different sizes. That is just fine. However, I like to keep them the same size as this is like my reference that I design in a later do my prototypes. And then in my responsive testing and in my components, I'm going to make sure that all the other sizes will work as well. As you can see, I set up a navigation for my mobile with a burger menu. And I know that on larger screens I want to have something with links or different navigation. So what I need to find out now and document is what's going to happen between those sizes and even beyond the size, probably nice simply copy them and paste them into my responsive testing setup. And I already set up those elements with auto-layout, you might as well just do that in here in the testing, doesn't matter. The important thing is that you have a responsive element when testing. So now you can see that I can now start testing to which size they're going to work. So you can see that the mobile one here's not a big problem because that's pretty much going to work anywhere. But this one here at some point it's going to run into the logo. Plus I want to keep a little bit of space because I might add more links. So I could get away what S is not going to work. Em, I could get away with m, but not ideal. But from L onwards it looks like a safe bet. I will probably test this out with some more menu points in an ad to my documentation, how many links you can have here. But I'm going to leave that for now. What I like to do once I know the sizes, I draw a little rectangle. And is it really just for me, for my own orientation? And I'm going to mark this with a color that I have called helper. Now I know that this one here starts to kick in at l. And so far I have my menu, my mobile menu running from excess, actually starts here from excess until n. So it's covering those three breakpoints and then only here change hits and from L and M onwards, I'm using a different design. 40. BREAKPOINTS: 07 Documenting responsive components: So once I tested my components, I now need to document them. So here I have my findings and I am now jumping into styles and components. And you can see that I already set up the navigation for you. So let's have a look at this in more detail. This is really where I keep all the master components and I'm really starting with the smallest ones to atoms. So you can see this here is the de logo and I have the different icons for open and close the links, everything here. And then you can see that here I have maya molecules, so these are combined. And this is basically the responsive master component that I will be using instances across my design. So these are the two we just test it and you might wonder why does the third one, I'm going to explain that in a second. So let's scroll down and then you can see that down here is actually where I'll have an extra section called responsive behavior. And this is why I document what we just tested. So here I simply added an instance of my component. And you can also see I added a breadcrumb and then I said that this is going to work across the breakpoint excess. You can also move it, you can see how it behaves. And then we have further down, we have our larger one. And as you can see, this design works with a grid. So I added the grid so I show how it sits in the grid. Now you might be wondering, why do we have another one for S M. The reason for this is that let me jump out here and you can see that I also have a documentation for how my grid works. And my grid changes margin at S M. So the smallest one has 24 margin. Then I go for 40 and then I go for 80. So let me jump back in my documentation here. And now you can see up here with my main components, you can see that this one here is set up with 24. Then this one is set up with a margin of 40. And this one here is set up with a margin of ATP. In CSS. This will kick in automatically, but like this, it's easier for me to reuse them across my Figma design. So this will be the same for typography. I would need to check my typography style sheet. And here you can see I have my default, so my mobile-first settings, and I need to check if anything adapt. So e.g. my H1, that would adapt at size S. And then again at size L. For my navigation, there is no change, so I don't need to worry about this. So I will create a separate component, e.g. if I'm using H1 in a hero section, I create one for mobile-first than one for size as onwards and size L. This is nothing you need in CSS later as it kicks in automatically if it's only the size changing. However, I quite like to do it like this when working in Figma. So it's very clear and I am always designing with the actual setup. So yes, this is how I like to test and document all my components. And this is not a set rule, this is just something that I liked doing. So you might also find slightly different ways of documenting this depending on your system. So let's have another look. Obviously also every component is a little different. So here you can see this one is one component that I get away with, but I am documenting how it sits in the design at different breakpoints. And I can also combine breakpoints as you see here. So I really tried to simplify this as much as possible. And here you can see that I'm using one component for mobile and then I am having another component. And again, that can sit very differently in my design, yet I always have the same component. A little tip. If you're testing things in a row like cards, then you don't want to set up an entire component for each of these rows. You just want to set up this cart and documented ones. But you know that you're going to have changing margins in your design. So what you can do is simply create that frame in the background. And then you can either use constraints. So here I set this up with 40 margin to each side. Or you can also turn this into an auto layout and then just make sure you have the 40 margin set here. In this way, you can test a single cards in the different screen sizes, but you only need to document one card. And it's the same if you're having something with a fixed width that sits in the middle. So in this card, this is just like sort of a modal window. And what I'm doing is I simply set this with constraints to center. And so I can just say, see until which screen size this is going to work. 41. BREAKPOINTS: 08 Responsive variants hack: I want to show you a little hack that I am using to organize my responsive components. First of all, I make sure that I have all atoms, so all the single elements that I'm using as their own components, I will then have instances e.g. of this logo and of the icon inside my navigations inside my components here. You can also see that this is actually not single components, but I created a components set with variance for each of the different sizes. In here. You can see that I named this navigation rays and x-rays here is my sign that are this component has more variance for different breakpoints. The variance are then named after the break points that they're serving. So this one is excess, this one is navigation S and M, and this one is navigation l and x l. I am keeping it like this because maybe at some later point I might divide this up into two. So then I would rename it in navigation L and just create another one for navigation XL. I could also call this navigation default. So if I only had this navigation for my entire page, then we'll call it navigation default. And only if at a later point I would overwrite it, I would call it a navigation and then S, M or L onwards or whatever. It doesn't matter how exactly you name it, it just needs to be very clear to anybody looking at it that you're referring to your breakpoints. This is why it's so important to also add this information about the grid system, about the breakpoints, about any margins and paddings that you're using to your documentation as well. And this also needs to be the visual documentation, not only the technical documentation. So I could just as well have set them up as single components that would also work. But why I like variant is because I can now add a property called Breakpoint. And let's see what that looks like in my design. So in my design, I now have my navigation here. And you can see that this is the sign that there is more break points available and it's called breakpoints. And with a drop-down, I could choose any other breakpoint. Let's say that I would set up a mobile design or an iPad, e.g. I can now search navigation via my resources. I just grabbed my navigation and now you can see that this is always giving me the smallest one. So it's always giving me the default is how I set it up. And now however, I am prompted that I have more break points. And then I'll go for the breakpoints that works with this width. And I can set it up, I can set left and right constraints. So turn this into an auto layout frame. And then you can see that our always have the right component for the right size with all the right settings. So I find this a really neat approach, but it makes sure that if you want to use this, if you want to turn them into variants, to discuss this with your team, if it makes sense in the system that you are using. E.g. if you have one team working only on mobile and one team only working on larger desktops or on tablet, then it will be a little annoying for them that they always have to switch. So it really depends on your team structure and also how your design system is set up. 42. NEW! BREAKPOINTS: Responsive breakpoint with variables: Let's learn how to set up responsive pages respecting breakpoints with variables and variants. So this is what we're after. We have different screens representing the ranges for our breakpoints. And within those different ranges, we're going to pull in the correct variants, as well as dynamically reshuffle the layout. When resizing. Noted a moment that I am recording this, Variables just came out in a still an open beta. So it's very likely that some of these might be changing in the near future. Let's take this step-by-step. So we're going to start with this. We just have a components set with three variants for a different navigation breakpoint, 12.3. And we have this card component. So I already set up a collection. You can take a screenshot of this and then set this up step-by-step yourself if you want to. I'm first going to show you one straight forward way to doing this. And then a little more advanced where we can actually resize our frames. So we're not going to use all of them for both. Let's first of all, start with the screen width. So what I want to do is I want to tie those frames to a certain screen width. And this means that by tying them to the screen width, I can tie them to the different modes in anything that I place on those frames can then inherit. So let's select our first frame. And then in the width, I'm going to click on the variables sign. And I'm going to have a look for my collection and simply choose screen width. Now I'm going to select the other two, and I'm also going to tie them to the screen width. But it's only gonna give me this small screen width for now. Let's just do that. And then I will show you how we can jump to the different modes. So now we have them connected to the variable. Now let's select the first one and go to Layer. And then we'll choose the collection and we want small. Nothing will change because that's the default size. But if we do the same for medium and then the same for large, now you can see that they're picking up the sizes of the mode. Let's jump back into our collection. Have a look. So we have small 390, medium, 834 and enlarge this one. If you're wondering about the sizes, all I did is I took some preset sizes from the menu and just added them there. So what I did is I chose iPhone 14 and you can see that 390. And then I just went for one tablet and then randomly picked a desktop. You can choose any other size. It's not relevant Which ones are using. Next thing I'm going to grab an instance of my variable. And let's jump back to our collection and see what I set up here. So you can see I set up my navigation and note how the name of the variable doesn't matter. I could call this anything. So I'm not calling it the same as my components said. But what does matter is the variables that I want to use and here need to have the exact name as my variables in the components set. So if I click on this, you can see navigation excess. Then the next one is S and L, and so on. And again, you can name them after the system that you're using in your team. Just make sure that whatever you call them, your reference this when you pull them in for the different modes. Okay, so let's select this instance. And then via the instance menu, you can see for hover over it, I get this little variable. I can to assign a variable. And I can now find my variable navigation. And I'm going to set this onto the instance. You set it on the instance currently not inside your components set. Let's add this on here, and I'm going to set this to fill the container. Oh yes, we forgot to actually set up our frames as auto layout. Simply select your frames and turn them into auto layout frames. Now we can select our instance of the navigation again and fill container. And now it's going to sit nicely in here. I'm also going to select my frames and I'm just going to give them a slide background color so that you can see it better. Now comes the easy part. If you move your instance across the different frames, it's going to inherit the mode that you said on the parent frame. And therefore it's gone to pick up the correct variant which you set up in your collection. So let's just put one on each frame. I'm simply going to copy that, select all frames and paste You might have some natural padding around here. You can simply select your frame and then set everything to zero. Let's add the card as well. So I'm doing the same. I'm adding an instance. So far I don't have any variants yet. So what I want to do is I want to create a group. So I want to have a few instances in one group. Let's just select this hit Shift a, and I'm creating a auto layout frame, which I'm going to call card group. And I can adjust the sizing and here I can also use my variables. And now I'm going to add this inside here. Now, what I don't like is that the padding is not really working. I could center this with alignment, but I want a fixed padding. So I'm gonna add that around this group. I want to use the same padding as I use up here in my navigation. And actually, that is different for each of my variance. If we jump into those, you can see that I am using variables to set this padding. And now what I did in my collection here you can see that I set up a variable called margin and I'm aliasing. Let's just delete this here and you can see I could set this manually to 24, but if I would change change it here, then it wouldn't be picked up. So what I can do is I can alias this click on this little icon, or simply right-click to alias. And now I am picking that spacing that I am using in my navigation as well. And I'm now going to add this to my card group. Let's select this and then I click on my left and right padding. And now I don't pick from my spacing, I am picking from my margin here, 24. And then to set it to fill container, hit Enter to get all the child elements and also set them to fill container. Great, Now let's move them over here. Actually, I want to add some margin to the top. So here I could also use my spacing or my margins. I think I might actually use my mountain from here. Let's set this one to zero to keep it all tidy. And now what I'm gonna do is I'm simply going to drag over a copy of this card group to my medium-size. Now, I don't want it like this. I want them to be wrapping around. So I could use auto layout wrap. I can already set this up here, so nothing would change. And now let's set it up here. And you can see that now they will jump into position. This will, however, only work if in your main component or on your instance individually, you set up a min-width. So you can see is set a Min width of 250, max-width of 450. And therefore they're reshuffling. So let's do it for our last frame as well as just tidy up the last padding here. And now I am pulling this over. So this is really great to show static design and have a look at different breakpoints and you can absolutely use it like this. However, there's one thing that might bug you a little bit. If you are selecting this and you're resizing, have a look up here at my variable, and as soon as I re-size, it's going to throw out the variable and I would have to set this up again. It also doesn't tell me where my breakpoints start and end. But if we have a look at our collection, then you can see that down here, I set up two more variables. One called breakpoint max and walk called breakpoint Min. And these breakpoints simply represent my breakpoints that I am going to use in CSS later on. So with the minimum value, I'm basically saying this is where my medium-size is starting and then it goes up to here. So let's apply this. Let's first take our small screen. And now I'm going to add a min-width. And then I need to press on this era again, apply a variable and then find your breakpoint Min. And then I'm also going to add a max-width. Same goes for the variable and find your breakpoint max. I'm going to do the same for the other frames. I'm going to select the frame at my breakpoint min variable, my breakpoint max variable. I'm just going to speed this up for you a little bit, and the same for our last frame. And notice how they already pick up the correct mode. This is because I already set the mode beforehand. If you don't have that, then makes sure that you select the frame and change the mode via the layers. I actually wouldn't even need a max size for my larger screen, but I'm just going to add it to have everything complete. Okay, let's have a look. So if I select this and now resize, you can see that it's going to stop at a certain point. And it's also going to stop when I reached a maximum width. Now if I go small, you can see that this doesn't sit nicely. Always make sure to sort out your alignment. And now we can try the same for our larger screen. Again, we can sort out our alignment. In this will be our small one. Now if we're working with this setup, then we actually don't need this fixed size here anymore, so we could delete this. Now let's say that we actually want another Design for one of the breakpoints. So we want our car to change in layout. I have my original card here and I have a new one called card Horizontal, and I'm going to call this one card Vertical. Let's select both of them and we can combine them as variants. And now I'm going to call this one card. And you can also name the property to your liking. Let's look at our collection. So you can see we have card and we have card Vertical and card vertical pulled in for small and medium. And then card horizontal is the variant for large. So the important thing again is this must be the exact naming. So you can also copy this and pasted in here. Sometimes it gets a little buggy. Let's jump back to our designs. Now, what you will notice is if you select your cards, hit Enter to get the child instances. And now you can see that this is not connected yet, so we need to connect all of them to our card. Same we do here. Select a group, hit Enter, and now connect all of them to our card. And let's do the same here. Hit Enter, and now we should see a change here. And let's go for the card, so it change to our Horizontal design. We can then simply overwrite your images and texts. And just like that, you have a fully responsive design, respecting your breakpoints. 43. BREAKPOINTS: 09 Breakpoints and a grids : If you're working with the responsive grid and Figma, then this might also change the different breakpoints. So there are two things you should do. Make a visual representation and really document a grid that you're given to use. So here, e.g. you can see that this is my grid for excess, then for S M, and then for breakpoint L onwards, I'm having another change. This is simply the margin that's changing here. So I am documenting all of this and I am then that's the second thing you should do, saving those grids styles. In my styles overview, you can see that I have grid access mobile than S and M and L in Excel. And in this way I can always apply this correctly to a new frame. This sounds like a lot of back and forth when working with different screen sizes. But remember, generally were only designing for mobile and then for desktop. So we're only using those two grids for now. And then later. All the testing? Yes, in all this testing here, if you're working with a grid, you need to make sure that from the different breakpoints onward, you test with a correct grid. Another way to make this even clearer is to name your styles after the break points and also add the actual numbers of the breakpoints or the range. This one I saw add a decal on design system. They're using this and I think it's really, really clear to everyone because this way, if I have a frame, I can check the size and the width. And then from the drop-down styles menu for my grids, I can simply pick the grid debt applies to that screen size. Really, really nice and tidy. 44. BREAKPOINTS: 10 Do not forget your Typography: Don't forget about your typography when testing responsive components. This is a bit of a chicken and egg situation. What comes first? Do you start with setting up your type scale and then apply it to responsive components, or do you first test you're responsive components and then decide at what breakpoint you'll want your typography to be changing. Well, that really depends on your project. If you're already working with an existing type scale, then you need to respect that. But if you're just setting up, then yes, by all means, you might play with your components and with your entire page setup and in later, just make sure that you documented and that you are having a tidy setup. And yes, it looks so nice and simple once it's finished, is actually a lot of trying and testing and compromising. And it doesn't mean that I don't need to add another size here or there at some point. Let's just run quickly through this in case you have not seen this before. So here is my mobile-first settings. So here you can see that for headlines. So I have 123, then my body tags, Links button. And you could set this up for as many or as little as you need. I have defined the weighed to size the line height and the spacing. And then I'll have a little example here. And this is then saved as a style. If I, from any break point onwards wanted to change this size, e.g. in my case for H1, then I would document this here. This could also just be a change in line hide or anything else. There are different approaches to responsive type scales. So you could use ratio approach. You could even work with clamp or with Calc. This is really just a very simple example that I want to use for now. You can see that these are all saved as styles. And then I named them in such a way that I can inside my H1, e.g. I can see I have a base style, then I have one for screen m onwards and one for screen L onwards. If I e.g. have a look at the body texts which you have here, where we have no change in styles for breakpoints that always stays 16 and the same line-height. So you can see that I simply given a base and he, I simply can choose between secondary and primary, which is the difference between regular and bold. So what would that mean for my testing? And let's jump over here. And then you can see here I'm having different cards and for the headline they use an H2. So I have my style applied here in H2 and I can see that in L there is a change. So up to here, that's all working fine. So I'm going down here and I'm finding here that this is what happens from L onwards. So here I am taking the headline and then now I need to change that to something a little off with line-height, I might need to correct what I would need to do. Now if I'm jumping over to my documentation is that I need to take this card. I also need to take this card. So I need to now set up two different cards. Again, this is really a Figma thing. I would still documented like this. I would have this card. I would have this card. And then I will also document how they sit in the different break points like that. Here is three and here I'll have to remember the little trick I showed you with using variants. So I could just name this card default. And this card, I will name L. Then I am selecting both of them and I create a components set. And I named this component said card rays. Now, if I'm working with instances, let's pull out an instance. I can now see like here the property I've named it. So let's go back in here. Let's name this property breakpoints. And now if I choose this instance, I can choose between the default card and the L Card, which the only change here would be the difference in the style for my headline. 45. BREAKPOINTS: 11 More about responsive Typography and Grids: This class is really a deep dive into responsive design with Figma. So it's really about auto-layout constraints and what touching grids. And we're touching responsive typography. But we're not going into so much general depth and no subjects. If you would like to know a little more about that, I recommend that you have a look at two other of my courses. You'll find them all here on Skillshare and simply type in moon learning. And then you'll see all of my courses. And one of them that I recommend is grids and responsive design. So here we really looking at different setups, different kinds of grids. And we're also looking at actual HTML and CSS. So you can play around with a real thing and really understand how those media queries work and really play with the real thing which is a total difference. The other course I recommend is topography in UX UI design. And here we're talking about e.g. setting up responsive topography scales. What are the different techniques and how can we deal with responsiveness at different levels? And how can we communicate that with our development team? So these two courses are really recommend to broaden your knowledge, not only in Figma, but just a general understanding of those topics in UX UI design. 46. BREAKPOINTS: 12 Breakpoint Plugin: There's also a great plug-in you can use go to Plugins and then type in breakpoints. Now, run the plugin. You'll get this little window where you can add your actual breakpoints. I'm just using some random breakpoints for now. The important thing is that all your frames are already setup in a responsive way. Ideally with auto-layout. Now, pick the frames, so you link them basically with a range corresponding to the breakpoints. And if you now resize the window that the plugin created for you, you can see a nice responsive representation of your design. It is really, really great, but also bear in mind, this is more to show like a homepage or something like this or a special feature. Because it turns everything into components and it has some tricky parts, but nevertheless, really, really great plug-in to play with. 47. Bye bye and some free stuff: 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.