Figma: create Responsive designs!

1. 1 - intro: Hey, in this course is going to be super fast. We are going to see how to make responsive designs inside sigma. So we will be using constraints in order to make a couple of responsive designs. So at the same time you are learning the tool and learning the skills necessary to make it responsive designs inside fema. And so it's good for your portfolio too. So I encourage you to join to the class I think is going to be super interesting and fun. By the way, I'm Bruno UX, designer with 20 years of experience. Now I'm designing big data approach. And so I encourage you to join into this course and see you on the first lesson. 2. 2 - Responsive design in figma: Hey, so let's get started and we are going to start to resign this responsive landing page I have created here, S3, AI, it's an artifice selling billions web baits. Actually, I didn't copy all of the, all of the things, but I tried to replicate these three items here, kind of a blog, news bar. And as well, I tried to replicate it. Many. These I just invented it just for the sake of the web page. In, as you can see here, we have these three screens. It d Then, as we are going to see now, it didn't take too much time to make these designs based on these one, on their desktop one. And that we could make it faster because we had applied, as you can see, the sand constraints to build this to build these interface. So later on was super-easy, yes, to make these adjustment. And it was kind of super fast. So let's get started with this and let's start design this web page in this ongoing just to name it skews here. And I'm going to just insert the frame. Remember, do yes, breast F or a. And then you can just enter preset here. And I, in this case, I am going to use MacBook Pro is the one I usually used for my designs. So it's a nice starting point. Here I have some layout grids pre-configured. In this case, I'm going to use bootstrap five x X L layout. You can see how to create these layouts in my other tutorial about layout grids, where you will learn to create Bootstrap. For Bootstrap, five layouts as well. You will learn to create a pixels perfect grids, okay, so it's just some grid to, to start my design here. It's not a, it's not a big deal. So what I did this for to create it, create a rectangle, to create a rectangle.js come here and press rectangle or two. Yes, breasts are key. Shortcut and you're good to go. And what I did is what we do here is to use the minus-plus plugin. So let's find them. A space and the space follow. So broadly here in space, yes, we have 40 here. So it sits perfectly as we want. What I usually do as well is to make another rectangle over DS1. What I usually do its boots, a field in kind of a bluish color and then drawn down verbosity to someplace I like. So I can put text over it, okay, so you can see, you can tell the difference applying this kind of mask. I like to do is this way. Maybe there's another way or in another field and then mix in and everything. But I like it to do it this way. Okay. And let's insert our i have done load the logo before. You don't have to. You can put whatever level you want. So you don't really need to put these as sect logo on it. Let's go have hearing material. Yeah, this one I guess. Let's click outside. And since these hidden black, I made it go here to image settings and then bump up this posture. Bump on top down, put the highlights up, the silos up. And well, I kind of mostly have eaten white, which is what we want here for the name. So is phi S3 AI? Yes. This is kind of a little bit of boring stuff right now. You goes, we have to set things a little bit up right now. So I guess centered there. And I'm just going to bring my menu here. The items. I don't want to bring all, all the things because I want to show you how I do it. So you can apply it into your faces. The art, as you can see, regular text layer, so no complications here. I'm just going to group this into a group called logo. So we have it there. And, and what I'm going to do is use another plugin I use a lot. It's called a quantifier, as you can see here. And you qualify as great to find icons. Remember to use usually the same kind of icon set. So don't change between different icon sets. Us. Choose an icon set and then apply it. But for this particular, I'm just going to, we need like a search, like a search icon. So I think this is this is a good one. I think so. Yes. Kicking port or drag it and justin group it so we only have the icon here. And let's change the color to white. So we have this, and as we see here in our, we have this button with the get us started. Let's see the height 48. So we are in a, an eight pixel width. So we are going to draw a rectangle with Fourier pixels. I'm going to add sound and border-radius here, like let's say ten. And let's apply on a stroke, stroke of one pixel and remove the background. And then I'm just going to copy. And this text here, and it's going to say, what was it, the exceptionally get started. All right, so this is pretty straight forward here. We're going to convert this into an Auto Layout button. So it's so it will be in kind of responsive to the desk we put on it. So for that, you can just click on, right-click and AF auto-layout or I recommend to learn the circuit is sift a and it's making weird things here. So we don't want that. I don't know what's going on. So let me just put this. Now it was the layer configuration. So remember, it's a good practice to put the rectangle and in the, up, in the layers, put the text. And now, as you can see, we have like 48 pixels height button and we can adjust here the bobbing. So since we are working with eight pixel grief somehow, so we are going to vote like 32, okay? So we just put it here, and I want to put these elements 232 pixels to, to bring up these measurements. Here. You just breast ought on, on Mac or option on, on Mac and all to invest in BC. Alright. And another thing I'm going to do it supply here. And I auto-layout to. So right-click and add another auto-layout. What he does. In this case, it's I can control the spacing of the margin and the padding and the spacing between elements, so we keep them consistent. Okay, for this, I'm going to just leave it on 32 as well. And, and now we have to again put it here, 32. Ok. We are not going to do anything else right now that say this would be nice to have it on 32 and these 232. Remember you can move, you can move in ink. If you press the arrow keys, it will move one pixel to the left, to the right, up and down. And as you press shift, it will move in increments of ten. So I, I usually do it that way. Okay, so we have our menu setup. And now we are going to bring our layout here again so we can make some, I don't know, kind of design a stylus. So this is going to have like 16. So it's, we are still on the pixel grid. I'm going to create here in taking six columns for the title. I don't remember the title actually. So I'm just going to copy it. And this typeface, hey had uses livery castle on display is a free is a free typeface. It's a free font. You can, you can just use from, you can just speak. Hearing sigma because he's made, it's from Google. Alright, so here what we want is said these not in the outer width but in auto height, okay? So, and the width is going to stay here. If we keep on writing it, it goes down. But, but, so the width is fixed, but the height is three. Okay? And now we have some text here. I'm going to copy as well. And for this, I'm just going to leave it. Begin like five columns. We could go with six columns if we want. Well, this is absolutely going to be passed away from C's columns, but this, I'm going to leave it on five. Remember, they would think it's about working with Layout is that you can position elements with all the security. You are going to align items. I'm, I'm not aligned in my menu here. I'm just leaving these 32 bobbing or spacing around these elements because I want to go this full, full, full width, full screen. When you increase the width of the window, I want to go all the way. But this part I want to stay to stick to the grief. So if this increases, the photo will increase, but this will stay at the same place. Okay, that's what we want to do. And again, if we look at the error in our design, we have here another button is called or more, which is the same as getting started. So for this, I'm going just to copy this button outside. Whoo. I'm going just to duplicate it by holding alt key or the Option key and bring it here. And the good thing about auto layout, and you can see here that these two kinds of towers or pause icon, what it means is it has the auto-layout are activated. So what was the text? Learn more. So when we change the, the text is going to be responsive to our texts are always going to be increased or decreased depending on the text. So as you can see, we write a here. These Neymar, it goes bigger, it grows bigger. So for this, I really like to apply auto-layout to, to apply like a consistent spacing for this, I'm going to use 32 as we have used on our menu. And you can see sometimes these kinds of weird behavior appears for that you just select the element. And in here you can align the items inside the auto-layout. Auto layout, you can you can align things. Yeah. We could align the it here or even changed the order as you can see. So it's a good practice to align all the elements to the left if you want it this way. And what I usually do as well is to put this into this auto-layout. Yes, dragging here, you can see that if this blue is selected and actually it's not so bad. So I'm going to leave it inside this auto-layout, okay, so I'm just going to rename this as button. And these has title. So we later on know what we have here. And this is going to be called a menu. And this is going to be the button. Ok? So we can keep things kind of in order or right? Okay, so we have our first part compared to this. And now we are going to create these elements here. So for that, I'm not going to create it kind of, I'm going to create a copy some parts. So now if we see, if we resize this, we can see that anything more. So it's good and we can make our columbus bigger. I'm just going to copy this text. This text I am using here is called regula inter intergranular to 16 pixels, and VCs inter bolt to 52 pixels. And the menu items are intergranular 14 pixels. You can play around or you can choose a typeface, feels good to you. This is just a title, nothing fancy. And let's see how this is done. I mean, let's see the structure of this. Okay, so we have a photo, we have kind of a gray border here, which actually I'm going to copy just to beat this color, these colors. And we have these date, then the title, then a little bit of a back and an arrow here. Okay, so let's come back. I'm just going to copy here as a reference. I'm not going to just put it here. I want to show you how I do it. So for this, since we have three elements we want to take for, for our item. So this will be the distribution that this is what I like to work with we with grids because it's super easy to position elements, keep consistency across different pages and everything. So if you are not used to work with the layout, I really recommend that you do it ok. So what I'm going to do here is use again the plugin, the plug-in. In this case I'm going just to boot. Military. Would Military and yeah, we have our four. All right. But I'm going just to change it for this helicopter. And I'm just going to copy the text because it can be a little bit of tedious task. Just going to put them this way. For the shake, you can see here the configuration ease into bold 16, interval 22, and interval. Then for this, for the stack, okay, so for this icon, I just came back to my loft, plug-in economy phi and sets for arrow. Right? And I think I used this one, but it doesn't matter. Yes. Instead, the one that feels good to you and it will be great. As you can see. It quantify inserts like a frame and then inserts kind of a group. So I'd usually ungroup these frame so it disappears. And I have the arrow. So let's put the arrow and in desktop, let's make this a little bit bigger, something around that. And we had before these kind of rectangle for these what I do is just create, Yeah. And every time I send it to the back, remove the insert and a stroke. I'm going just to go be with the color picker. I'm going to copy this except gray, and which is a subtle gray. And what I do is I usually put it a little bit higher so it's hidden before the photo. So you could put it like this. But you are going to have like these great big cell here which is kind of dirty. So I guess put it behind. And we almost have our our desired here, but I want to make some things before. We were letting like 32 pixels on the left. So in these elements here and between these elements as well. So I want to keep it consistent and leaf like 32-bits us here to, here we have 32, as you can see now, 32, here we have 32. And now here I want to have another 52. So it's good to o. And here we want like 32 pixels to. So I'm just going to line up these, align it to the middle, which is good. And here we want like to have like 3032 is going to be kind of two diets. So let's say 34. Well, we can, we can remember that you can put here like Samsung or yes, oppress minus n is going to, now we should have 32, so we're good to go. So we have our first car or new or so we are going to create a component of this. And this is going to be news, okay? So I'm just going to call it news. And I'm just going to bring our layout again and duplicate it. Okay? So we already have made our design. Oh, that there is this battle that we need to create. But here in this responsive design, you can see that elements are moving for those are scaling. The, the, these elements are really, they are really responsive to the same as the menu. And, but if we do it here in our new design, just remove that. And we do that here. We can see that some things are happening that we don't want to happen. So these photo is not escaping the menu. It's, we are getting it lost somehow. Well, the menu, it's kind of behaving well. What the elements down here, we can see that they are not the scaling properly. So let's fix that. Okay, so I'm not going to change these four. Oh, well, I'm I'm going to change them yet. Really quick. We open again and a splash plug-in, and let's incent some random photos. All right. So we have it here. Let me just we don't want all this light here. So what we need to, is to understand these constraints, panel. Constraints panel is what is going to make your design responsive or behave the way you want, okay? So for this particular flow, what we want this to be to the left. So we want to maintain these budding, we said before of 32 pixels and the same thing. We want to in the top for this, you just leave it like that. We spun this panel. We can see that you can pin it to the left, to the right, left and right, center or scale for this particular case, we want it like that. For the menu, what we want is instead of left, we don't want to take this huge amount of space here. What we want is to bring it to the right. So we want to maintain this space. Here. We want to maintain this space on the right and on the top. So we just put it on the right, on the top, the text, this text. We want the same thing. We want to be to the left to maintain this spacing here and to maintain to the top. Okay? And the same applies to these data, and the same applies to here. For this. If I bring it to the left and to the top, this is not going to be responsive. So in this particular case, what we want to do, it's to be need to SK. Okay? So let's see what happens now. As you can see, is kind of behaving well. These aren't moving this RNA scaling properly. The first one is a scaling as we expected, but the others don't. So we have to fix that. Let me put this again to one hundred one hundred, ten hundred, one hundred and forty. So it was our oriental. So let's see the menu and the rest of the elements, how they behave. The rest of the elements are behaving. Alright? So instead of putting here to scale, what we want to do is left and right. So it's going to take the same, it's going to lead the same spacing here than here. What we want here is to put our our car elements binded to the left and right and to the top. Okay. We could put here like a scale. But scale is going to make these elements. Let me just check if this is alright. It's not one, it's not. Yeah, but something has happened here. So let me just duplicate this again. And something important. It's that we didn't apply anything here in the constraints. And the constraints. When do you, when you change the, the upper constraint, the father, let's say the father, if you are in a group, imagine this as a group. If you change here, the center or scale or these elements, they are going to pick, what do you choose the first time? So it's kind of a tricky thing because if you apply the constraints before of these little elements, before you make your master, that parent constraints is later on is going to be like a cascade. So it is better to first apply the constraints to the group or the component and then go to the inner elements and apply their, their constraints. Okay? So for, for, for this thing, what we want is instead of a scale, we don't want to scale it. We just want that it respects. It takes this spacing here and this spacing here and respect it. Okay, so, so the same thing. What we can do here. We can see is that these white, it's been consistent and the spacing between columns is being consistent to. So this is, this is what we want in our design. And for that, instead of scaling, which is going to make like we're think like these or something like that. We want these white spaces between elements to be consistent. So for that, what did you do? 2s is left and right. So the content doesn't scale, just move. And so now we are going to go for element-by-element applying constraints. Alright? So we don't want this element to a scale. We don't want to do this, okay, when we make it bigger or Spore. Smaller. So what we want this, this, in this particular case, we want to pin it to the right because we want to keep these whitespace consistent and the bottom space consistent as well. So we apply to the bottom. So it's when we move these these R0 is going to be a stick to the right and to the bottom is going, the spacing is going to be consistent. Alright? Same thing applies to announcements. We want to keep it to the left and I'm sorry to the boron. So this whitespace is going to be consistent to same thing applies here to the title we wanted bin to the left too, maintain these boarding to visit that space and to the top. And for this date, exactly the same way. We want to pin it to the left and to the top. Okay. These we wanted pinned to the top. But we want to go left and right. We want to make it increase and decrease as you, as we can see here. And the important thing here, I have this aldehyde okay, set up. So when we, when we, when we try the responsive thing here, we can see that this is not changing. Okay? So we need to do something with this. And this is spin to the left-handed to adopt, I made a mistake here, but what we want is to maintain this pace, basing on the right and on the left. So for this particular one, you have to bring it to the left and to the right. The same thing that we did here. Okay, so now if we do this, as you can see, the text is responsive. So this is how you create it. And let's create a tablet designed for this. I'm just going to bring up this one. Kills her and delete the content. Well, so let's see how I make their responsive designs here. What I do, it's just drag and drop all the content here. And and yeah, some. And what I do is pick these three and bring it here. Ok. So do just apply this and apply that. And you just, and you see that they are almost there. You obviously have to make some changes here to bring down these texts because they are too big for this responsive as you would do if you were doing this in HTML Assisi, CSS, you would put like a maniac query or something like that. So, so the best would be a smaller, okay? So that's one part of it. And the same thing applies here. You you want to make some changes. If it does, Meredith is the way it works is not possible to make everything kind of super super responsive. I mean, yes, the image, the image, as you can see, it's been responsive. Now you, what you can do here if you want it to change it to crop. And you can move around the image if you want to position it better. But as you can see, this is taken as like, I don't know, one minute. So minis to create a responsive design, the menu, what happens in the tablet version is that it doesn't fit. So for these, what I did is just come to my beloved plug-in E quantify and insert like a menu icon. This one seems good because it costs a little bit of rounding. And yes, come here. As we have seen, ungroup it again, change the color to white. And we want to be like 32 pixels, like we have before. 32 pixels here and there. And instead of a scale, we want to position to the right. And to adopt. Because remember we want the space to be consistent. And now last part. And, well, remember that if you want to make like a, another kind of design here, I don't know what happened with this. This should be pinned to the left and right and top. So when now do this, again, it's fully responsive. And what we can do it if we want, it's bringing the tablet version and then make them mobile version. So for that, let's see what I have selected for the phone. It was it was iPhone eight plus, so it's these width 414. So we come back here. And what do we want this, just put it like that. 114. And everything is going to be the part that's got that. Be responsive, they are responsive. Alright. But remember, now we have these kind of weird layout here. So I'm just going to go with another minimal layout for yeah, that's much better. Anyway, since this is not a Facebook page, I don't want it to be so so tight. So I'm going just to change a little bit the layout for me. I'm going to detach this tab and I'm going to leave the margin to 32 pixels. Okay, so now we have our elements adapts to the great thing that's going to bump this a little bit higher so you can really see what's going on in this part. So for this one I'm going to do is just i and everything to the 32 pixel agree we have to the margin, sorry. And then just start to make these elements a little bit tinier. Okay? So and this, I'm going just to make it like super weak, so all the elements fit. I'm just going to remove these elements and copy again this one because it has like a tiny text. And now what we can do is yes, make it bigger. And and duplicate it again. And here we have some issues with the desk is kind of going over there. You just put this, bring up your n at the asteroid to your layout grid and you're good to go or maybe you want to change this to a tinier because it's too big. So you can put it around for you, something like that. And these, you can leave it on 16. So now we have our responsive design well shaped here. Another thing I really like to do, It's apply auto-layout to everything because I don't have to be thinking here, which is the spacing wherever. So if you apply an outdoor layout here, I can control that I put 32 and all the elements separation is going to be 32. Ok? So this is it, this is how you made a responsive design inside fema. And how to use in combination auto-layout to separate elements and keep consistent distances and as well. How to make these responsive elements are. Another thing I want to show you is that now since we been these elements to the bottom, we can, these elements is kind of responsive to because we can make the elements sorter and everything is going to be on, on its place. So let me just make this a little bit shorter. So remember that, that constraints work, work that way. And the other thing I wanted to show you, it's, it's what happened. If I put some constraints with a scale, which is the one we didn't see. Okay? So remember, let's say we apply it to this arrow instead of right and bottom. We applied like escape. Ok. So you can see here that since we made these, these component is smaller, the arrows are getting escape. So that's, that's why, that's what it is for the scaling constraint. But I don't recommend to use it in these kind of elements. So this the spin into a right again. And you keep the arrow without distortion in every situation. So that's it. I hope you will find that the interesting, I recommend that you replicate these design or any other you have in mind trying to, I'll put these into practice with the cards and with these menu and an error. So you keep on, keep on trying things. Okay, so I hope you enjoyed the lesson and see you on their congratulations, I am goodbye. Video. See you later. 3. 3 Congratulations: Hey, congratulations, you made it here. I hope it was fun to design these responsive design. I think you can make your own designs applying what you have learned. So you can put it in your portfolio is a boost. So I hope at the same time you have learned the skills necessary to make all, all these design and learn about this cost trainings and everything. And sometimes we have seen in this course. So I hope you like it. And if you did, please leave a review so more people can find the course. And if you are interested in more content like this, then you can just follow me so you will be updated when I upload a new video and and us stuff, right? So thank you very much for joining me and see you in next courses.