what is going on everyone tutorial tim here at design academy and today we're going to go over the responsive grid layouts in material design and we're going to be creating those in figma and as styles so that we can systematically reuse them across all our designs as needed and implementing them into our system so here you can see that i've taken some screenshots off of material design's website which references all of the the breakpoints so it discusses the breakpoint system here and also the breakpoints for how they design for ios devices and we'll be going over not only creating those styles and figma but before we jump into that we're going to be talking about some key concepts and stuff to apply to our mental model when creating grids and designing and some of those things being columns margins and gutters when you're creating your grid which we already know and have covered and we'll go over that again to reiterate that and ingrain that in your brain and also some ways to customize the grid whether it's horizontally or vertically customized on the grid layout on those axises and discussing what you can and can't do or at least some good best practices and not so good practices and then of course creating those styles understanding grid behavior mainly the differences between a fixed grid layout and a responsive grid layout and then discussing ui regions and what those are some examples on their web page and then what white frames are so we can go ahead and click on this resource here open the link and it will open up this responsive layout grid page on material design's website and essentially this responsive layout grid allows our designs to adapt to several screen sizes and orientations ensuring consistency across all the layouts and the general diagram describes what a responsive grid layout or just a grid layout in general it consists of and it consists of columns as you can see here and gutters which are which are this which is the spacing between columns and then the margins which are on the very far left and far right of the screen laid out in green here those are the margins and it talks in depth about columns and how the content is placed in the areas of the screen that contain columns so you'll notice that generally when you're designing on a grid layout that your designs or your components snap to these columns so as you can see here it snaps to the left and right edges of these two columns so this you could say this card takes up two columns as well as the one to the right of it and it utilizes that spacing in between and the gutters to provide that consistent spacing and so things are categorized in an organized fashion so column width is defined using percentages rather than fixed values which allows content to flexibly adapt to any screen size so you'll notice when we create up create these grids here in figma they're going to be very responsive and the number of columns displayed in the grid is determined by the breakpoint range and the breakpoint range here is specified so from zero dips to 359 dips or you could call those pixels if you're designing for the web and you can see that we have ranges all the way for mobile devices here all the way to massive screens and we'll be creating all of these and here we'll be creating all of these ios grid layouts as well and that is that for columns and here are some examples i'm on mobile at a 360 dip break point using a four column grid layout here as you can see four columns it's got scutters and margins specified as well and you can see that on a tablet at a breakpoint of 600 dips wide it uses a layout grid of eight columns so as this screen expands it goes from four columns to eight columns which also allows for more content to be implemented on that screen so you can see that this row only has two cards and then when it expands to a wider screen size which is 600 dips in this example it goes from two cards to four cards on that row and here where it discusses gutters and those are the spaces between the columns as it's highlighted here and they help separate content and those gutter widths are fixed values at each breakpoint and to better adapt to the screen size gutter width can change at different break points so wider cutters are more appropriate for larger screens as they create more white space between columns so that way uh information on the screen isn't as isn't as dense and cluttered as it can be if there are not wide enough gutters at larger screen sizes so here you can see on a s on mobile device at the break point of 360 dips this layout grid uses 16 dip gutters and on tablet on the break point 600 dips wide the layout grid uses 24 dip gutters specified here and it's using those 24 dip gutters to separate the content and now we can discuss margins which is the space between the content on the left and right edges of the screen as highlighted in green here on the left and right and these margin widths are defined as fixed values at each break point and this allows you to better adapt to the screen and the margin width can change at different break points wider margins are more appropriate for larger screens as they create more white space around the perimeter of the content as you can see here so here's an example of margins on mobile on a small device using a layout grid of 16 dip margins and then on a tablet at on a slightly larger device than mobile you'll notice that the margin increases from 16 to 24 dips here on the left and right margins and now we can go ahead and talk about the customization of the grid and ways you can customize it which allows you to meet the needs of both your product and the various device sizes you're designing for so sometimes you might need to customize gutters to have more space between content to create more to just to create more consistency uh if spacing gets too tight at times or or if there's too much spacing as you can see here in this layout grid uh it's using eight dip gutters here very tight spacing the tighter spacing may suggest images are closely related to one another so that they are perceived as a part of a collection and here you can see that this layout grid uses much larger gutters set to 32 dips to create more separation between columns and that extra space helps the album be perceived as individual entities within a collection and one thing you shouldn't do that is recommended is to not make gutters too large such as the same width as the columns too much space doesn't leave enough room for content and prevents it from appearing unified and it just looks weird all the spacing is just way too much and also you can customize margins margins can be adjusted to create more or less space between content um and the edge of the screen margins use a fixed value for each breakpoint and it gives an example of typography here text the ideal length for uh body copy is 40 to 60 characters per line so if you're going beyond that many characters per line it could be an indication of you having to add more dips to your margins increasing the margin space and don't make margins so large that there isn't sufficient room for content so you have to find that balance so here's an example on mobile on a mobile break point size uh 64 dip margins to limit the width of the content still looks proportionate but doesn't doesn't overwhelm the user whereas this is very very dense and thin just not good use of white space and too much space in the margins in that example and here we can talk about also the utilization of horizontal grids where material design layout grids can be customized for touch uis that scroll horizontally so if you're for example looking through a photo album or just scrolling on a browser on a tablet or your mobile device columns gutters and margins are laid out from left to right rather than top to bottom when you're creating a horizontal layout grid and here you can see that the margins are at the top and bottom of the horizontal grid layout and the columns here set to four columns with a 400 uh height and dip 400 dips in height which is great we got that specified and then we have the gutters as well so those same principles just a different orientation and horizontal grids can be positioned to accommodate different heights allowing space for app bars and other ui regions or other content that is fixed on the screen to begin with so you can squeeze that in there and now that we've discussed all that we're going to be talking about uh building breakpoints in figma at the very end a couple more things to cover are ui regions and essentially ui regions are a layout which is made of several ui regions such as side navigation that is fixed so ui regions are typically fixed content like the side navigation the content area and this app bar these regions can display actions content or navigation destinations and these ui regions should be consistent across devices and you'll notice that it gives you an example of that as it scales down so it starts with like a desktop layout and then a tablet layout and then a mobile layout and it talks about it it shows you how it isolates the ui regions as it scales down which is very important to increase familiarity of how this is done across devices as you scale up and down when you're designing so you can ensure that you're properly adapting to different breakpoints of different screen sizes and again i was touching upon how these ui regions are fixed you can think of them as permanent ui regions that can be displayed outside of the responsive grid as well like navigation drawer where these regions cannot be collapsed as you can see here in this example above and then we have persistent ui regions that can be be displayed upon a command such as a hamburger menu where a menu slides in when you press it and they can remain visible or they can be toggled on or off to appear disappear and when they appear they condense both content they condense both content and the grid so you'll notice that it condenses that grid once that persistent ui region is toggled on user presses it in this example and then the content gets condensed uh and which adheres to the grid which is why the content is condensed and then there's temporary ui regions which do not affect the responsive grid so this is an overlay example when it's visible they can be hidden by tapping an item in the region or any space outside the region so this temporary ui region only appears temporarily and does not affect the responsive grid and then we have this concept of white frames which are structured layouts that provide a consistent approach to layout and layering and shadows and it's a great starting point meant to be modified to meet the specific needs of a product so for example you could think of this as a template so you don't have to design the entire bare bone structure of a design you can just grab a white frame to get started where this just gives you a really good start to designing your product as opposed to building out all of this from scratch so here you can see a mobile example of a white frame which you can think of as a template where you can then go in and plug in what you need into that interface it's already built out for you from from the the bare bone structure and also a desktop example of that so now with all that being said i know that was a lot to cover we can go ahead and open up figma and start creating these these grid styles so we can start by i can grab this screenshot and we'll do a couple together and then the rest of this exercise you will be implementing these on your own as well so here we have a the first break point which is set from 0 to 359 dips i'm going to create a frame specify that the width is set to 359 which is really thin size is set to portrait and i don't really care about the height right now because this is the we're just developing the grid layout for this width not the height so i'm going to click on create style here this grid style click on that layout grid settings icon and change that to columns and you can see that it's set to four columns and the margins and gutters are set to 16 and it is going to be responsive so i'm going to set that type to stretch so i'm going to set the margin to 16 and notice that my margins have now increased there are now margins and then change the gutters to 16 as well which thicken the columns and tighten the spacing between content when we align it on this grid layout so now i have this grid layout for this breakpoint range and i can go ahead and now i can actually turn this into a style so with that this layout grid created i can click on this style icon and click on the create style and what i can do is specify that this is an extra small grid layout and i can even specify extra small at 0 to 359 dip and i can even specify i can categorize this because here you can see that we have a range of screen sizes from extra small in this column to small to medium to large so i'm going to specify this as extra small x small use the slash naming convention to categorize this and now i can go ahead and name this as as such so now it's extra small and it's the first break point from 0 to 359 dips this is what the grid will look like i can create that style i can even go and edit it and add a description and discuss that this is used for small handsets um and yeah that's all the information i really need to communicate to designers who are needing to understand what the squid layout's used for so now i have that grid layout applied now i'm going to duplicate this frame and remove this layout grid and ensure that i have this set to 360 pixels or to so i can have a frame any wide anywhere from 360 to 399 dips so i could even just change this from 359 to 360 and width or i could just increase it to 399. it doesn't matter as long as it's within that range and because since this is a fluid layout it will automatically maintain and calculate the four columns between this break point range and ensure that these margins and gutters are set 16 at all times and also four columns for this break point range so i can go ahead and create another layout grid style click on the grid settings specify the column select the columns ensure that there's four i can even change the color of this if i wanted to so i could change that to a blue and ensure that the type is set to stretch add 16 pixels or 16 dips to my margin and gutters and i now have that specified and i can go ahead and close that out and create this as another grid style under the extra small category using that slash naming convention and then from there i'm going to go ahead and specify the break point range which is 360 to 399 and i'm going to write dp so people understand that this is the format for material design which is dips density independent pixels i'm gonna create that style i now have two grid styles here and i'm gonna go ahead and create one more with you and then i'm gonna challenge you to make another one the rest by yourself so i'm going to duplicate this and detach this style create one from scratch change this to columns and here i need to specify the width anywhere from 400 dips to 479 so i'm just going to select 479 whoopsie 479 on the width now that i have 479 specified i'm going to click on my grid settings and ensure that there are four columns change the color of this grid again to another shade of blue just because i like blue and then change the margin to 16 and the gutters to 16 as well and it is set to stretch so it will be responsive and now i can turn this into a grid style and specify that this is an extra small whoops extra small grid style and then in i can specify the break point range so it's 400 dips to 479 and click create style and i can even go ahead and add a description so this one's typically used for large handsets meaning large devices large handset and then now that i have that description there i have my three styles and now i challenge you to go ahead and make the rest of these styles here from 480 dips downward and i'm gonna make pause this video and make them myself so i'll be right back alright so now that i've created all these styles you can compare what you've created with me comparing the grid styles here i have all of the formats specified here in the screenshot and all these break point ranges are clearly being reflected directly in this figma file as grid styles you can see that all these break points are split by window size so we have four extra small breakpoint sizes specified as grid sizes with the proper columns and margins and of course this is already in the exercise file for you to to view and if you didn't make them from scratch i highly recommend you do it's a great way to practice building grid styles and i can almost guarantee you that by the time you finish creating this many grid styles you'll know how to do that um and it'll be just something very very simple for you to do and you have that skill um as a designer from here on out which is very useful you'll notice like the back of your hand and as you can see here i have all these styles all the way up to the extra large size which is for any break points at the size the width of 9 1 920 pixels or wider and we have all of those examples specified here in this file and as a bonus exercise you can go ahead and even create all the ios breakpoints if you like as those are specified here and one tip is if you create a frame and you go to frames you have all sorts of formats for your iphone formats here so you could just select an iphone format and then implement a grid layout and just selecting your column layout specifying how many columns are necessary the majority of them utilize four columns for the for this compact version here or just for the the first three set of sets of iphones or the first four both in portrait and landscape you'll notice that the orientations are different so you would probably you'll need to create a grid for a horizontal landscape as well so do take that into consideration um where you'll not use columns but you'll use rows to specify your grids so that is very important take into consideration as you're building these i recommend you challenging yourself and doing that and creating those s styles as well so you could even go ahead and create that grid style and you could specify that this is an ios grid layout by providing that naming convention there using the slash to categorize them as grid styles for the ios breakpoint and then you can just specify iphone portrait and you now have that ios variant grid style so if i go in and create a frame and i go to my grid styles you'll notice that i've categorized them i have extra small grids i have small grid styles to choose from medium grid styles and large ones and the extra large and of course an ios one so you can go ahead and build those out as well which is very helpful um good exercise for you and you'll notice too some of you may have questioned why make so many grid styles if say for example all these small extra small formats all use the same amount of columns and gut margins and gutters that's a great question and since this is a responsive layout technically you don't even need to make all four of these i was solely making all four of them to replicate the preciseness of this breakpoint system in this table specified by material design so if you want to go ahead and actually consolidate these to the minimum amount of grid styles necessary you can go ahead and do that and in reality you would actually only need three grid styles you would need the extra small and the small actually you'll need three grid styles so you would need the grid style that is for these break points for these first four break points here these extra smalls with the four columns and margin and gutter set to 16 dips and then you'd have a second one for the small break point for the small tablet where the it's set to eight columns and 16 margin and gutters and then you have a third one set to a break point for large tablets where the columns are eight but the margins of gutters are set to 24 and then for every other device you would have 12 columns and 24 dip margin and gutters so essentially you only have one two three four grid styles you could consolidate those and even go in and if you consolidated them you could write a description for what breakpoints they applied to which is also a great exercise i recommend you doing that as well um and that is all i have for you today folks thanks so much for watching and i'll catch you in the next one