Master Layout grids (Figma, Adobe XD and Sketch) | Bruno Sáez López | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Master Layout grids (Figma, Adobe XD and Sketch)

teacher avatar Bruno Sáez López, UX/UI Designer and Front-end developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (57m)
    • 1. 1 - Introduction

      1:21
    • 2. 2 - What the hell are Layout grids (Theory)

      11:05
    • 3. 3 - Bootstrap Layout grid

      14:33
    • 4. 4 - 8px grid explained (and settings in Figma)

      15:33
    • 5. 5 - 8px grid in Sketch

      8:06
    • 6. 6 - 8px grid in Adobe XD

      5:39
    • 7. 7 - Congratulations

      0:51
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

1,092

Students

--

Projects

About This Class

In this course we will see what are layout grids and how to use them consistently for our designs. No matter if it's for an app or website or even a physical product like a poster, a brochure or even our CV.

You will learn the theory behind the grids and we will see how to make the most common grids like Bootstrap (4 and 5!) and the mythical and so much talked and used 8px grid.

As well we will cover how to make proper typographic decisions in order to stay on the grid and followa proper baseline vertical rythm.

No matter the software you use we will see how to make layout grids in the most common prototyping tools like Figma, Adobe XD and Sketch.

For this course you don't need any previous knowledge on the tools or on grids.

Meet Your Teacher

Teacher Profile Image

Bruno Sáez López

UX/UI Designer and Front-end developer

Teacher

Hey, I'm Bruno!

UX/UI Designer with more than 20 years of experience currently working in a big data company making complex products simple.

Figma, Sketch and Adobe XD are my favourite tools.

I love going to the mountains and record music.

If you like my classes follow me to be updated when new content arrives!

Cheers!

 

 

 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 1 - Introduction: Hey, welcome to this new tutorial way we're going to talk about Great how to make your layer grades for digital product. Will you see a little bit off theory? About what? Our columns, Rose gutters, Martin's everything and we will see And the most used greet all over the world which are booster up grits and eight pixels. So we will call her how to do them. How? Toe Use them and I will show you how to use. I mean, figment in a sketch in. And so if you're interested in learning everything about, um, Layer Greece joined me. Toe this course. By the way, I'm gonna ux designer 20 years of experience in all kind off graphical and user centric. Um, sign. So follow me and going to this. Why now? We're course. So come on, join me and see you later. On the rest 2. 2 - What the hell are Layout grids (Theory): Hey, welcome to these course. We're going to see everything about Les upgrades. Well, they are. So when you don't know anything about re to watch yourself, what the hell are players with? Right, So what the hell are liars? Great. Well, greets are invisible instructors that allow us to make more balanced on consistent decides and therefore take less blind decisions while making any kind off product that, say, bring digital physical whatever. So they are based on verticality business. They are called columns on no resemble divisions, which usually we call them Rose. And after all those rows are pulling to a scene, that's what we called baseline. Right? So we have, like, a brief introduction about it here. We can see some greedy samples for any sense, this kind of a magazine or a newspaper So we can see here these soup divisions, vertical subdivisions here. Yeah. So in this particular case, we have 123456789 10 11 and 12 columns. All right, so these is 12 column layout, greed for this particular magazine or newspaper. And here we have, like, some Adidas advertisement where you can see they have divided the pate into through into six. The columns. So we have them here and as well they have the by the debate in three rows. Sorry, in six rows. You can see them here, right? So even if we cannot see it here in the design they are. They have bean. All most of the designs have been designed with some layout grade behind. So even if it's in BC bold, you can have some sense off order, some kind of a structure behind. So in here you can appreciate it again so that the position of the text is if it's not random. Let's say it's all adjusted to the layout grid. In this case, the destinies opposition down here in that in this part of the bait, right, for instance, in physical protests, the same as you can see here we have like, yeah, like, you know, I don't know the name of these in English, but let's say you know, wardrobe or something like that. And as you can see, it's the sign for win agreed. So they you start with the shape and then you divide vertically and horizontally. They space you half okay, so you make a consistent layout on the same thing applies to websites. As you can see, here is a very typical layout is divided by 12 columns. And as you can see, even if it's ah, it's a particle early sign here you can see that it's not thes text, for instance, is not attached to the first row. Some things are started in the first row, like the heather on this finishing as well in the Last Column, and this text starts here. Same here. Same thing supplies here. And as you can see the photo as well, it's following this this column. Okay, so let's see some concepts. So you've settle down all that stuff. The important thing. You need to know. Why making they agreed are those terms columns, rose, gutters and margins. Some people usefully rose. Don't use them. OK, so do you. Mostly are going toe work with columns gutters on Martin's. But this is kind of important. We will see later on why, but let's see some examples off these a little bit more off theory. Okay, so based on these design would have on their right, let's see, with we already know what at Coram's are. So I'm not going to explain this too much. But columns, as we have seen before, divide the compass, the ARB or debates your physical provoked everything into vertical and off the same off the same with thievy Seems all right. And as you can see between these columns, there are some spaces, okay? And those spacers are what we call gutters. Okay? Those gutters are the spacing between the columns. Okay, if you are following any kind off, let's come back toe. Yeah, has come back toe are basically if you are following any kind off greed Or, you know, there is this typical grief about a peak sales, everything. What it means is all them all the columns in the spacing on the Martine's on their separate in on the separation between the Germans are multiple off that number eight pixels is the most commonly used in the wall in the Web design and on up obligation design. If you are talking about magazines or newspapers that that size, it's different. Usually is to have pictures. Okay, 12 14. Something around that some newspapers that have super tiny typefaces they used, um, like 10 pixels with okay, but usually in digital products. What you are going to use this movie post off ate some some Some people. It's getting toe get to lower numbers in order to gain some more versatility, like they are going down to four pixels or to excess, like Google or IBM with with their Carbone designed system. They are going down because they realize they need more flexibility. And sometimes a pixels can be a little bit tight. OK, so what are back? Baselines? Baselines are mostly are horizontal divisions, and, as you can see here we have like the same is facing these kind off Bink sewn and this white . So as you can see, we have like horizontal columns. Let's put it that way. So we have, like the width of the column, which is eight weeks L. And then we have the horizontal gutter or a space between columns. In this case, rose. It's eight pixels to so Every step it's made by eight weeks is so I think is important because if you follow a super strict way of doing great, I'm like, in this case, or if you are following these in this case, there's a pixel. Great what you get. It's Ah, super roast and good vertical rhythm. So all the elements are separated by the same amount off a space, or it's a win is always is going to be like multiple fate, let's say eight or 16 or 32 or 24. And so if you make those spaces consistent, you are going to have, like a good vertical rhythm. And this is important, too, because if later on, we will see it in more detail. But it's important that if you're you are putting your typefaces with some sizes and everything, it's super important that when you said they lying height off the the order off your typography is with your phones. It's important that they are multiple a fate toe, for instance. You are sitting like a 14 pixel phone size, but the lying height should be multiple off eight. So for that case, you want to go for maybe 16 is going to be too tight. Maybe, but maybe you want to increase to 24. Why is that? We'll see later, but this is good toe. Get proper on good vertical brilliant in your designs. Okay, so Let's go with an as concept here. As I said, gutters are the spaces. Be doing your columns. Okay. The supplies applied to your rose is the spaces between your every row. So you have some is basing and others as well. Must be consistent in two sizes. Same with And if you are attacked in tow, pixel. Great. Let's say a pictures. Our son. Example. You can use it like 16 pixels for mobile the science and go for 24 32 for desktop on tablet design. Okay, so margins are the spaces that the space that are outside our our columns. Okay, so our columns, all the columns make our let's say are practical work in a space outside there. We don't work. We don't put any element. Ah, well, these have some. If you put like a hero image or something, you can go for way for sample. But the rest of your content is going to be attached to your let's say, working, sewn or your safe zone where you put your test And that place is what you are putting your columns so outside that columns the space you have empty Those are called margins. Okay for more widely sign. Usually it's between 16 picks, sells 20. Pick sells something around that. Okay, something somebody goes full with. But most of the times you're going to see yourself working with 16 pixels. They're 16. 14 dependent, depending on on on what? Your what kindof pixel read you're doing. Maybe you are working with a fight, pixel. Wait. So you go for five. So it's up to you. But remember, it's important that you leave some space on the outside, depending on your design. On this, it's work What we call margins. Okay, so this is all the fury You need to know eso now. Let's go impacted. Practice some layouts the most commonly out you are going to find out out there. Come on, let's go to winners. Listen 3. 3 - Bootstrap Layout grid: So we're going to these lesson in this lesson. We are going toe learned how to make the bootstrap layout greed. And you will say What is bootstrap and why we need to learn the bootstrap. Great. Well, actually do. You don't need to know it, but it's a good starting point to land the post robbery. Why is that? Bootstrap? It's a framework for fast development off websites in East Basin Esteem, L. CSS and JavaScript. And it has all the components you may need. We are here to come toe documentation. You will see that it has a lot of components like bottoms and everything. So this is great because, um, we can make our decides. And front end developers can code it super fast because they have already the bottoms made and the cards, the alerts and everything. And and, of course, later, later on the front end, developers can change on about these. These bottles toe our design, but they already have them made so they don't have to write all these glasses, put everything into place so they only will have to overwrite our new you I aesthetic design. Right? And then there is an important thing here in the documentation of bootstrap that it's all these kind of break points they put break points are when? When the size of the screen. So for screens bigger than 1200 pixels, you are going to be working with the container. We think, let's say a working place and off 1000 140 pixels. Okay. And let's come back to the home. I want to show you something interesting here. If we inspect the home off Bootstrap, you will see that post op obviously is built on on boost under bootstrap. And if if if I select this container here, we can see here something really in really cool, we can see the margins here as we can see in orange, then close to it here on the right. We have like it green bar, that it would be our out outside gutter that booster abuses. But we will see it later. But the important thing here that I want you to see is that we are working with an actual 100 on 1110 pixel working area. You can see it here that we have in here in the middle. We have all those values, OK? Even if they screen, it's I make it bigger. You can see that these working area is still the same on here. We have, like, a bubbling on outside, putting off 15 pizza fit big sells for its side. Okay, so now if we go toe sigma and we go here to our grades, I have prepared all the bootstrap, uh, viable greets right now. Booster up. A stable person is 4.5, but they are about to release Bootstrap five. Since this is the most common one, we are going to replicate this. Okay, this these boost wrapped for layout, but not the five. I only we live it here so you can have a look because I will serve these documents with you . So you can You can copy and paste and duplicate and do whatever you want with. OK? And later on, we will work on our eight pixels, bootstrapping their documentation, put these break points and containers and all those things. Okay, So here is the let's say, the settings that boots up put by default. And this is the settings we are going to apply toe layout here. Okay, so let's see. What is this about? So we have the boost of 44 layout settings are 12 columns by default. They got her. Remember? They got there is the space between the columns is 30 pixels, and there is some articular thing that was dropped. Us, as we have seen before here, is that it has It has a parting outside, which is the half, as you can see, is 15 and 15 with sums 30. So what it does is it takes the gutter and put one daughter on the outside on one daughter on the other outside, off there off the great. Okay. And as well we can see here. We're going just to make these one. Well, maybe we will see how many we do, but here we have the X l size. The break point for Excel is 1000. So we're going to create here like Ann Arbor off this meat abilities in created from zero. So for that, we're and going to do. It's to create on our board off. Ah, 1200. My 7 20 It's fine. The important here is the with okay. Off the arbor. More down there. He's You can precise it later, but we are more interested in the vertical division here. So let's make a couple off with angles. Here. The 1st 1 change the color here, a Swiss speak. We want the container. We're going to create the first container, which is 1140. Okay, so we have these. That and we sent her. Then we put it to you here. And then I'm going to replicate this one and what we're going to do its toe rest 30 pixels . Because remember that we have seen before is that by default, Bootstrap puts 15 pixels on the left and 15 pixels on the right outside the columns. So we don't have all these 1140 pixels for us to work. Is this less 30? Okay, so that seems to call. So we can see the difference is here, and I obvious to the center. Okay, so these is going to be let's see the color. So this is our main container on this is going to be just like that. Okay, so let me just write this down a little bit. fast here. So we have our really our or in a container miners. 15 picks is from their left off the column and minus 50 pixels from the right. So these give us 100 1000 110 big cells off. Act wild work in space. All right, so we almost have it. Now what? We need Justice Goto lion greed and have a lie. Agreed. Here in feet mark, you have to choose columns and then they count, as we have seen, he's 12 in these settings and they gather is going to be 30. Okay, so let me just increase these a little bit. Okay? So we have this part. We have our settings. Is 12 columns and 30 but he said to a stretch, I mean, if I make these frame larger, everything is going toe. As you can see, the columns a stretch this is going is this is good toe the sign. Ah, 100% percent like full with the signs or more responsively signs. But usually what you will need or what you find yourself using More than his threat. If you want to follow these bootstrap. Great. Is that you put this into center, and and now you have to enter a week for the column. Okay, so let's increase these until we reach our point. And now, if we assume mean, we see that our layer greed is perfectly online Okay to our working space. So we have already our first lying out greed. Okay. For the bootstrap, this could be the exhale size for Busta. Let's replicate. Yes, the more while, uh, the mobile boost drop designed configuration settings. Okay, I have it already here. Okay, So I'm going against going to replicate this and just like this, delete all the elements. Well, in this particular case and just going to leave, I'm just going to get rid of this and here. Yeah, we have. Like I have I have chosen a 3 60 pixels with kind off android device, but you can choose whatever you want. Just remember that the width of the column is not so important in terms off. Ah, adjusting toe a grief like on a pixel grief. Because something because of the signs are responsive. So you cannot control the with off the column so much. But it's important more than vertical space. We'll see it now. So imagine we want to have, like 15. Imagine that we have, like, a margin here, like 15 pig cells on the left and 15 15 pictures on the right, like like we said before. And it's a good practice in in the mobile devices, so we have, like, 330 boxes with here for our container. So let's are and lie agreed. That said, our columns and what we are going to do here. It's said they count to three. Here it's more free. I mean, you can just put 635 whatever you want and the margin about for being consistent with the layout off muestra, and that's going to go with three and the other. Remember, it was 30. Okay? And the marketing. Here it's 15. It's on its size. Okay, Sometimes in mobile design, I recommend toe go toe change to make a break point many equity. So you change here the values and maybe goat with 24 or even less maybe 15 or 16 depending on your own Georgie side. Let's able Strapped for here in the mobile design is a little bit more, um, more relaxed for these particular booster up for what I recommend is said they got their to 15 as well. Okay, 15 or 20 multiples of five. Boost for is more based on multiples of five. So because as you can see, if we if we throw here like a rectangle, we can see that these columns have 65 the separation is 30. So all it is multiple of five. Okay, so I recommend you to do that. And let's see here. What do you have? It's a 97 ah column. But if you want to be more precise, you can change these toe you continues the gutter and make these, I don't know, maybe 95. Or, you know, so you can play around with these inviting. You have this and what you do, it's You come here and then you try toe justice we got there. Yeah. So if you put like a gather of 22 what you get, it's a column off 95 and it's up to you in this particular case. But I have put here the default values. OK, for me, 30 pixels in mobile separation is too much, but well, it's what Bootstrap says. Okay, so we have completed our first layout for their stop and for mobile. But form a while. We're going to do something with this. Are Rose here, which is? Well, I'm not going to do it with Bootstrap. We will see how to what Rose and vertical rhythm with our customize a pixel with in the next lesson. Okay, so you have these files so you can look around and in copy all these greets. They are already here. Based us the style. So you can Yes. Copy. Paste them, Do whatever you want with them. Okay, So the union is less on. And let's talk about the eight weeks agreed. 4. 4 - 8px grid explained (and settings in Figma): Hey, welcome to this lesson in these. Listen, we're going to talk about a big sell agree and how I do it. So without delay, I'm just going toe put here, like by default. Michael Bro sitting with this 1140 by him. I don't like this sitting. I prefer to Yes, get my 100. It's more landscape, all right. Anyhow, the important thing here is that with So you are working for big screens off course, you could be get big. You could go bigger, like, I don't know, 100 1920 by you know, the default values. But I usually prefer toe work a smaller like something around that These are my default values for setting. There are boars. Okay, so let's go. And let's a Greek here. Well, more is that agreed? We are columns. Okay, So for the count, the default, remember, is 12 for this stop. And what we want here is just to center our 12 columns here and the gather. Since we are working with an eight pixel grief, we have to make a decision if we want it on 24 or 32. Okay, Let's leave it by now with 24 in the account, off the columns to 12 and we want to control the with. You might think you want to make the super perfect grief with a big says Everything is multiple a fade even the columns with its multiple off eight So we could start with 80 with is the most overused value to start. Right. And this is looking pretty good. We can see that the other is 24 with this 80. So we are on the rear in our in our working place. This is not bootstraps, so we don't need to make some were, uh, sums Rest my news. Whatever. So this would be our working compass, OK? Yeah. So let me just, uh, co pd's value here. So this is going to be our main container. If we like this with of container, we are good to work. That's how you make a lady out. You don't need toe. Stress it more. Okay, So your center, your lie out input values, which are multiples off eight. So we have it. Okay, So the columns are 80. As you can see, all the columns are 80 on the space between them is 24. OK, and now let's out our roads. Okay, so we press here in fig MMA toward another kind of great in the rose. In this particular case, we don't want 12 because 12 with would only make us to have, uh, Rose. And we will see that we were more again instead of a stretch. In this case, we want toe allying. Our separations rose on the top. Okay, And for this particular case, what we have, what we want is the space between the columns with we want them off on eight big sell height. We want to gather to be as well, eight. So now we have our column off. Eight weeks is our gather off. Eight weeks is so we have All these separations are eight weeks of separations in the count . What I usually do. It's put a huge number here, like 800. Why is that? Because you usually your when you are designing you usually are designing things bigger than that. So when you make these, when you're our board and you are making landing page, for instance, or your portfolio or designing a block or Whatever you are designing, you are probably sure need a lot off hide for days. Right? So if you're lucky if you here in grows, you just put I don't know, 200. Sorry, like, 50. What happens? It's Ah, when you are when you re size thes, you have to come back again here. Remember that we have 900 here. Yeah, You don't have the necessary Rose here. So since we want to have a lot a lot off rose here, you can go with 1000 and it's all right. So you always have room and that enough rose for it. Okay, so this is our 1st 8 weeks of perfect. Great for it. Let's make for four form. Okay, so let's remove this week we created before and let's get rid off this because we want to create their This is going to be there, a big sell form a while and what we want here, it's It's make the same thing. We did hear okay or everything in multiples of fate that's out. Agreed columns in this case, we are goingto go with color. A count of three again. Center them. Okay. Um well, in this particular case, what you can do is put it into a stretch in the margin so we can control. It is 16 peak cells in the gutter. You can play around with 6 16 as well. For 24. I would go with this thing for this. And then we have our We have our eight pixels with what happens here that, um, you know, you can design for Android more wives like these for 3 360 or you you can be designing for Let's take some other values here, like I don't know iPhone eight plus here and do kind of the same configuration. Let's do it here too tall. That's out, like agreed and then our columns. Let's say three columns. That's a six, and then our marketing is going to be 16 on our got. There is going to be 24 OK, or bring it out to 16 again. So let's see how the column with goes. So it's 50. As you can see, it's not possible. Or let's go with three so we can make like a the same design. Here. You can see it's not even its 117 so they call it the with column is not so important for really following day. Pixel grid, they pizza greed. It's more about the gutters, the space of the gutters and how you set up your rose. So in this case, we have made jacket perfect eight picks, a great, and that's perfectly fine. It works in mobile phones is not going to be not so possible to have the columns as you want them, right? Um, and that's why we have talked about it. For instance, iPhone 11 Pro X. It's 375 with So we cannot divided by eight is going to give us the Simoes and is going to make us different kind of columns. So but what we can control And that's the thing I want to point. A lot of times, even if I'm a little bit twin tins about it, it's when we create. This is the important thing to create the rose so you can put here again. The important thing here is not account. We put it into the top, the thick out we are going to increase it to 500 is good. And remember that the height here is going to be eight pixels and the gather again is going to be eight weeks is so now we have, like, a perfect greed. Even if our columns are not a picture, the column is not important. The important thing it's they got theirs and and they're these roses spacing. Let's see an example Imagine I want to say to set a photo here. And the important thing is this photo in height is going to be multiple off eight with this , which is good. And but But the important thing as well is when we are setting up a text. Ah, but the important thing here instead, off out in this kind of values I don't know what they are, what we can do. It said multiples off eight in this case, like 32. And what is going on? It's that. Let me guess of justice. If I had the Estes, you can see that this'll line. He starting here, and this line is starting there. Okay, But the most important thing is that now you can see my text resting here. Okay, you can see it, right? So now the separation Well, let's see that they're so now the separation between these elements on this is 16 and imagine. I want toe off like a text Here, let me of my marvel Loose Lord and soon generator. So we're going to bring that these 2 14 and this is going to be, like, 24 our for our copy. Let's go with our Lord and Epsom generator. So let's in a radius fixed. Okay? So sometimes you can a struggle work to position things, But with this, you don't you just put your elements here, okay? And in this element here, if you want to be super purist, what you can do and what is a good practice is to set up this text in the baseline is what is called the baseline. This where the exit, you can see it here. You can feel it right that it's the Texas sitting in our in every line, every tour spaces, it's it's eating, Okay. And this is good because because we can set, for instance, we can say, Okay, we leave like, Well, we do you like that? We can say between the text and the title is going to be 24 pixels with its been people of faith between this and this is 16. Or maybe we can say we want to say now I just what I want all the destined to the great with the same is basing. So you have 20 pixels here you have 26. Sorry. 16 picks is on the left. 16 pieces on the right and 24 picks us here and everything. Is that Justin? Perfectly fine. And these should be a jest, actually. If you know, prototyping tools usually doesn't feed perfectly their reality off. Or what you will see later on, they re sign, OK, because this should sit here and is yes, the pixel that it's getting me crazy, but it's suit ally in there, Okay, but it is going to depend on your on your on your phones. But what is important here is this value, okay? Because I can change the size of it and as you can. And as you can see, this is going to keep on be on the on the on the grief because important number is a 30 to life eight. So while human thing that the this like hate like in multiples of fate, you are good to go. So this is pretty much a pixel great and how it helps to design things. And let's me ask, Let me just make a quick design here so we can see how we see is toward with glitz toe make the system. So imagine. We have here, like three elements. So we only have to divide it here to take four columns and just there. And if you see the elements here and there on the baseline, everything is going to be organic and hop has the same space, and you can play around with your greets more if you want. Like we you know, this kind off Montreal square, the sign that it's made of cubes. But this is where it's all about. It's consistent, is keen. You don't have to make decisions If you are trying to design blindly, imagined your input and agreed on it. Let me just get rid of this. How I know we're to proceed. Some things I could put these there and put this there and is there and put this text here and try to align need by I or with tools. But this kind of random, you know, and toe Give consistency to approach. What you need is to make all this adjustment. OK, So OK, so this is pretty much the picture grip. Remember that You can change the values asked you. Please here. Imagine You want to work with it then picks agreed This value would be fine. Maybe here you can. Or five pixels rip. Then you are good here. Toe toe. Uh, here you can go with 30. You got there. Put the with multiple of five or eight or 10. Whatever greet you decide to go is good. Good for you. Okay, but remember to keep the line height. Always consistent. So let's see how to replicate this. A pixel. Greats in escape, Andi in adult x'd. If you are not interested in this in the software, you can just skip it and go to the end of the class. All right, eso see you on the next lesson. 5. 5 - 8px grid in Sketch: Hey, welcome back in these blessing. We're going to see how to make the eight weeks agreed in and escaped be some columns on on drugs. Okay, so for that we are going just to insert an r four. Or you can press a then select here at Tech Stop HD our war, and here imbues We're going to show layout. So we have, like, four columns here. And let's see how this is configured by default with it that are with off in the 160 pixels . Remember that off course we want with columns we don't want got around the outside. This is good if you are making the bootstrap layer great. But in this case, we are making just on eight because his great simple So we don't need gathers on the old set. You can see that it's moving. We want they gotta with off 24. And we would like to have, like, an 8 80 pixels for the column with what's happened here in in a sketch. When you put these values here it mont eins the total with here. So it's kind of tricky because you have toe or toe increase thes by I feel you get the values you want or you have to make. I don't know, their multiplication is outside. Okay, so you first need to know the total with you're going to get so it's not so easy to make your layer agreed here. Eso for death. What I'm going to do is he s copy this value that we have in feet my before it's 1200 2024 . So I'm just going to copy this here and now. Let's center days. And now we have these settings, right? All that we want 24 picks is for the gutter. No. Gather on the outset towards columns and calling with off 80 pixels. Press center here. So your layout, greed and your container get center and we have it. OK, now we got 1/2 hour our container. What instructor? We can see here the value. Okay. And we want us. Well, let's come back to our liar settings. We want as well there Rose set up in eight big cells. So we want the role height, the distance multiplied by the gutter height. So, in a particular case, we want there's more to play by one. So it's the same at us. Eight pieces. Okay, so you could draw the Ori sometime lines, but I find it too much. So with this setting, I feel pretty confident, okay? And we are going to go. I mean, now, everything we position here is going to be multiples off eight. And we're good to go. So this is our set up. And in case office kits is good because it creates all the needed rose. So you never run out off Rose Light can happen in figure. Okay, so let's insert another are for four or more while device. In this case, we can go with these mobile, the 320 baht before we just set up the android one. So let's go with the android. As we saw in the other lesson, it doesn't really matter. Um, which guy? Enough device You too. Because the important thing is not the column off the with important. The important thing is the gutters on the separation. Okay, so for these what we want, it's It's support our got there, remember? Do you have a the other time? We went for 16 pick sells the number of columns in this particular case is going to be three. Let's start to see what it's doing. A So you can see the total weight is too much. So what we want here it's remember, it's, um, is 36 60 minus 32 because we want, like, 16 pieces on the left and 16 pixels on the right so we can do it like that. So it gave us 328 pretty cool. And now they got their weed. We can just go with 16 and then incentive these and the coming with it's gonna gave us 93 right? So So, yeah, this is pretty much off. Our are set up, but something something. We have these gather on the outside again. We don't want it. I was wondering why so much space here, but yeah, you have to remove the gutter on the outset. We don't want it unless we are doing this bootstrap kindof design. Okay. And for the road, same thing. Yes, they got there. Kate is going to be eight. And the role height, remember in multiplies by the other hate. So in this particular case, we wanted by one So we have, like, consistent eight fixes, gathers and rose here. And yet we are good to go. So if we bushes and now elements here and sorry, because for this I don't want 24. I want 16 in there. You got Okay. So here we have our our columns and we can start to decide. Remember? Again, as we saw in the past. Listen, that the important thing here it's working with the position, all the elements separated by the same amount of space. Usually you want toe most of the times you want to separate it. The same with this distance is going to be the same as the gutter. And some other times. Maybe you want to separate it more. But keep your space is consistent. Okay? If you are separating here like 56 big cells here, it's a good practice to separate it as well. In 56 pixels or whatever you may need on, remember as well the the lying height or right. So here in the sketch, same thing, Um, you have toe put here in the line in the line Heights section and multiple fate. Okay, so for this particular I don't know. You can go with 72 and if we see it here, you can see it's almost touching the baseline. It would be like one pixel up happens. The same like stigma. Thought as you can see, is going to be toe be all sitting on the baseline and is going to give you more consistently science. So let's for Dennis Lesson, where we're going to see how to create a big sell greed in adult X'd. 6. 6 - 8px grid in Adobe XD: Hey, welcome back to the womb. Our last lesson here we are going to see how to create an a pixel reading at OPEC's de for these particle are one. I'm just going to press here, and as you can see, we have all the off by evil default templates for these and going to pick again. Andre More Wild One and us. Well, let's take Let's go for and this purse again in Select a whip, um, by default. Other X'd makes like kind of a different size for for the happen for these are boars stayed off 1000 440. They go with this. Mr. It doesn't really matter. You contended here. If you want or leave these by default, it's OK. Important thing. It's our It's our great So for viewing the great you just goto view panel and you can just press here highlighter greed or if it's off, you can come here to be you and so let out green as well. When you are selecting the frame, you can press here the greed and two will just bring that up. Okay, so let's start without are they stop the sign so for this case. I just want way Had some previous values is pretty easy to make. Here in Adobe 60 is piece of cake, I must say the gathered with we have been using 24 pixels for our separation between columns and the column with we have used 80. Okay, this is kind of a weird behavior to me, I must say, because if I'm trying to put Theis these values, it's always playing around with this with the gutter and the conduit. So you have tow calculate as well. How much? How much Martine's do you want here, right? So for me, it's kind of annoying if I want to put my very values like 24 here I want to put 80. It should, you know, respect my decisions. But this is like the important thing here. It's making me a little bit nervous. So for these what I have to do, it's calculate Bring up the calculator. So we have our these one. This is the number we want to be. Our Toby are great sitting our or our container. So we based it here and what we do, it's ah, just make these rest and on. This is going to be the orbital margin. We need toe to divide by two. So 71 is going to be our marketing here. So we need to go here 71 and now, as you can see calling with it's 80. So now it's working. All right. So you you have to bring their optic calculators kind off Messi and the reasonable point I don't really like about adopt X'd while making reads is that I cannot I cannot have both of them at the same time because because I don't exceed doesn't allow me to put like horizontal lines. Okay, so well, that's for me. Kind off a lack off a feet. Er let's go with mobile set up. OK, so for this particular case, as we know, we want 16 pixels from the outside, off margins and the gutter with Remember, we are using 16 16 as well. I don't know what So 16 okay, And the columns. You want a three, so it's pretty set up. It's pretty easy to do it here because you have to control all those settings and you're good to go. So is that we are having here the same values that we had before, But again, it's kind of annoying that I cannot set up like Rose and I have to be switching into this kind off a square and and, yeah, you have to put your square size into eight. So it's our are great, but I cannot have both off them at the same time. In this particular case, if you want toe, uh, to make your like a baseline greed honoree, sometimes you have to start to put like are like guides. Okay, so it's so so, uh, for me, something is missing here. Some important thing. If you want to use, like, a super tight, it picks it with. But this is how you make the big salary than Adobe 60. And I hope you enjoy these tutorial. So let's go to the final video And where I'm going to say congratulations to you for finishing. So see you in the next video. Thank you. 7. 7 - Congratulations: Hey there. So congratulations. You finish your layout. Course. So I hope that you have learned everything toe so you can develop your player. Great skills. So we have been covering poster upgrades and pictures. Quit. And if you like these video, I hope you follow me. So you are up today. Toe new tutorials. And if you like it, then liver review So other people can find their course more easily. And yeah, thank you for joining. And I hope you had a great experience. Thank you.