Responsive Design with Auto Layout and Constraints in Figma

in this video i'm going to walk you through how to apply auto layout and constraints to improve your design's responsiveness this is the second video of my figma series on the google homepage if you are new to figma then you may want to check out my previous video which includes a review of all the fundamentals and basics that do you need to know about figma before getting to this point if you are new to my channel and you want to see how far i'm going to be taking this design in the upcoming videos then make sure to hit the subscribe button because you're going to get that and a whole lot more i would appreciate it a lot so let's dive right into it this is the same file that i left you with last time you see now it includes a start and end for the basics that we did in the previous video in this video we're going to be covering responsiveness and auto layout and as you can see we have a start and end for this as well and the start for this section is actually the end of course of the previous video which includes this design that we did that included us if you were watching that video you know includes a a top navigation on the top it includes a center area with the google logo the search box two buttons and a little text to switch languages and in the bottom it includes a footer area with two rows if i were to move this around on the right side and i would do that by putting my mouse over the edge here and just going a little bit like that you can see this does not respond well to responsiveness it does not respond well to the change in width and if you were to go to the actual google home page and you were to try that out you would see that the behavior is actually a little different so there's a couple things that are happening here first of all the top nav is resizing the two sides as i'm moving this also the center area is staying centered up to a certain point and even when i get down all the way here the search bar itself is changing its width and then you can see also a little bit of an animation here in the footer as i am going from this point to that point and in this video we're going to be talking just a little bit about breakpoints what they are how to capture them and then how to design accordingly to provide a breakpoint compatible responsiveness so going back to the start page here and responsiveness and auto layout this is where we're going to be starting off today and we want to get all the way to this end page here that as you can see includes a couple of frames for the different breakpoints so breaking this into three parts again as last time uh let's start talking about this top navigation here and as we're going to go through these we're also going to be improving our layer structure because this is going to introduce very important improvements and how we are sorting out our figma file so that when we're making changes in the future things are a lot more doable and faster so we're going to do a bit of that as well so if you'll recall we have here our about and store now this is the first place where we may want to introduce a little bit of organization i'm going to multi-select these two and if you want to introduce an auto layout you can just hover over here to the plus where it says auto layout with these two selected or i can use my keyboard shortcut shift a now when i do that you will see that says auto layout added this these two layers here just became part of a parent called frame 4 and i can change this to left nav links now if you've got a little bit of a coding experience auto layout is essentially flex from css it allows you to define the relationship in terms of spacing and positioning between different layers of your design and so the relationship that we've defined for these two particular items is i want to have a 16 pixel spacing between the items so if i were to for example grab this layer and i want to duplicate it so i can do command c command v let's say i can do this and that and you will see that as i add that layer automatically the next one that is going to be placed inside this container maintains that relationship ongoingly and there's a couple things you can check out here but we're going to essentially explore them hands-on throughout this design but you could say you got you got some auto layout properties if you have the parent container selected and you can see for example you can change the direction of the auto layout so is it a horizontal auto layout or is it a vertical auto layout so you can see that here the same six to 16 pixel spacing is preserved following that vertical axis so you can change that you can change for example what spacing you want to be in between the items instead of 16 it could be for example 40. now you see that it applies that accordingly and then here you've got some more properties that are attributed to padding and padding has to do with the spacing around the layers around the objects that you are dealing with so if i were to add here an 8 you can see that now the parent layer is a little bit bigger because now it's not just the layers it's also a little bit of spacing that the layer has to respect you can go a little bit more in depth about auto layout by clicking on this icon here if you don't want to have eight pixel across all the different sites you've got top bottom left and right and in this case we've applied a to all the sides i could change this to say for example 4 and 4 and i can change the way that this spacing is applied the way the auto layout works i can modify the relationship of the inner elements uh through this grid over here so we're gonna be able to do a little bit of hands-on across different points of the design where we're gonna be applying these concepts so don't worry about these too much right now for the sake of this area here we're good to go all we want to do is set up that relationship so we've got 16 pixels if ever in the future google is going to introduce a link here all you got to do is do this and then that consistency will be preserved now that we talked about that let's go to our right side and you see here there is uh two links as well we've got our grid and we've got here our user profile so same thing here what i'm going to do is i'm going to select these two i'm going to do my keyboard shortcut shift a frame four i'm going to change this to right nav links there we go and i'm going to introduce also a constraint not just auto layout but the positioning of the element with respect to its parent container in this case the screen so you can see here that the constraint is set to left and top we want this to actually be constrained around the top and the right side of the screen so as i am resizing later on it's going to get sticky to those to those sides so i'm going to change this just by clicking on this one over here and now it should be constrained to the right side of the screen now we're going to do the same thing here i'm going to grab this one this one we already constrained top and right this one as well perfect and you may wonder why i used auto layout here and not across all the elements that is because we do not actually have a consistent spacing between the elements between these two we have 16 between this and that we got 20 and then we have 16 again so what i'm going to do instead is i'm going to unify these two i'm going to call this area user and you see here what it did it automatically aligned everything inside the container to the top left and that relationship is dictated by that icon that i showed you earlier here in auto layout it's regarding the alignment and the padding so with regards to the alignment you have to think about okay how do i want the positioning of these elements to be placed within the layer and in this case you just want to make sure that things are centered horizontally so if anything it would be something like this and boom we've got our expected positioning there awesome now that we only have one spacing in between we can actually auto layout these if we want to you could just frame it as well if you want since auto layout is also most helpful if you are planning to expand that layer through added elements in this case we don't have much of that going on but we're gonna do it anyway so i'm just gonna do my shift a and c did the same thing so i have to go here i have to align it horizontally and now we've got the result that we expected now in terms of in terms of the the constraint of this we have to go back up here to constraints and resizing and make sure this is set to top right so as we are changing the screen with it's going to adapt accordingly so that looks pretty good if i were to add a new text here you see it is added to the left and that is due to the way that we've defined these constraints and auto layout so we are almost good to go now let's just double check that our layer management here looks pretty good so i'm going to call this top nav right area just to be clear and i'm going to grab these two and i'm going to do a shortcut for framing and that shortcut is on mac it's command alt g and now you see it creates a frame for so i'm going to call this top nav and i'm going to change the constraints in this case to left and right because in this case the screen could be moved either to the left or through the right now if i resize this screen you should see that this works beautifully next area we want to cover is that center area with the logo and the search and the button so let's get right to it i personally like to do the constraining of all the elements even before i group them it just helps keep the layers organized even though the the constraint that matters in the end is that of the outermost layer with respect to the screen but i personally like to do this anyway so i'm going to just set this logo up to center i'm going to set this one up to center and by center in this case it means that as i'm going to resize my screen it's going to stay centered with the same width property moving around as i am resizing so that's that's the intended behavior that we want here and if you're ever wondering what the intended behavior is you can always think about okay what is the expected result that i want to get to and you can see here that it's just being continuously placed in the center as i move this around so going back to figma now here's a good a good placement here to do some auto layout for the buttons so i'm going to auto layout this and then i'm going to keep this centered this is applying a 12 spacing in between we don't have to think much about the alignment here but i'm just going to keep it center center so in the future if i may want to add a third button it's going to preserve that nice alignment with respect to the screen but in this case doesn't seem like google is going to do that anytime soon nor are we so let's just keep it as it is and that's going to be fine we're going to call these buttons now this is logo this is search let's change this maybe to search box so it's a bit more explanatory of what we've got going on and we can keep this just as it is now we have to look at the spacing between elements to try to understand how we're going to group these together so here we have a 24 pixel difference here we have a 32 and here we have a 56 so it does not seem like a very good candidate to do any kind of auto layout here because actually our spacing is not that consistent in any way so all i'm going to do is i'm going to multi select these and i'm going to do command all g remember for that shortcut this is a very very useful shortcut going to be framing things a lot on figma so command alt g that's how you make some frames really fast so i'm going to change this to center area and now as i mentioned even if we apply constraints to the inner elements of of this layer the outermost constraint is what matters with respect to the next parent layer so if i resize this you will notice that this is not actually moving even though we made those constraint changes earlier so what we want to actually do is make sure that this one that we just created is also respecting that center constraint so now if i move this voila looking good we have one more area to cover that is the bottom section footer with the two rows and there's a couple things we can do here so i'm just going to change this frame two to row we're going to call this footer row one and i realize that actually from my last video i did not put the text layer inside that row so we're going to do that right now just by dragging it in so just drag it from the left side and into your into your upper layer here so now the text is inside the row number one so that looks good and now i want to make sure that this with respect to the footer it's just left center so that looks pretty good and now what we can do is we can take the links and we can apply auto layout here we're going to call this nav links left and we're going to come here and we're going to call these nav links right and in this case same as we did in the top we want to apply constrain on the right and in this case also with respect to the center center one is not so important but if you want to be pixel perfect in this case we can go ahead with that and now what we can do is i can multi-select all of these and just individually have them be a left and right constrain so we would theoretically already have our result looking good right i'm gonna call this by the way footer row two and we're gonna call these what they are dividers okay so just for the sake of cleanliness because we have these two nicely organized i'm gonna also group these and we can actually auto layout these and that this will actually come handy for later so i'm gonna auto layout them and i'm gonna call it uh footer and now i'm going to make sure that this is actually left and right and we cannot do that yet because we have to double check that the inner layers of this auto layout are following a certain pattern here of fill container so width set to fix for footer and now i think i can actually do my left and right there we go because these were not following that fill container and they had a fixed width the outer layer could not give me the option of setting that left and right so we had to go inside and sort that out and now the last thing i could do here is set this to a bottom constraint so if i were to resize the top area sorry not the top here if i were to resize from the bottom area uh of the screen it would also give me a nice resizing repositioning here of the footer now if you go to the actual google home page there's a little bit more of a fanciness going on at a certain point the logo is also doing some funny animation we're not going to get into that level of detail in this video but we can tackle it later on through animation for the sake of where we are right now this is looking pretty good now the second part of this whole process is the breakpoints a breakpoint is essentially uh a a point in the in the width of the screen where the design patterns that you previously had don't behave very well with the new adjustment in the width if we go to the google home page we can see that as we resize the screen there is a certain point in the width that the footer items are being placed one on top of the other for that second row so that's what we're going to do right now and then there's a second breakpoint which is actually here as you can see the search box itself is also adjusting based on that responsiveness so it's actually changing the width of the search box as you go to the sides and it's keeping a a width that is with respect to those two so we're going to actually cover those two break points in our figma design now sigma at this point in time does not have a native support uh for breakpoint design so what we're going to do is we're going to create two additional frames for two different screens where we account for the change in breakpoint so when we would theoretically hand this over to the engineers they would be able to tell okay the designer wants a certain repositioning and alignment of the elements when the design reaches this pixel value of width adjustment so what i'm going to do is i'm going to copy paste this whole screen so now we have google and google side by side and what i'm going to do is and i've checked this out before so we can save the maths but essentially you can you can go back to that google.com and see where exactly that breakpoint is taking place and in this case we have 808 and 648 so i'm just going to change this to google 808bp so it's clear what the value of that breakpoint is and i'm going to change the width of this screen to 808 so this means that once the design reaches this point going further narrower with the screen i want a repositioning of the elements and in this case what we are seeing here is that what used to be the left nav links now are placed underneath and the right nav links in place right on top so that's what we're going to do right here what i'm going to do is i'm going to increase the height of this 2x so as you can see actually how we define these constraints it's making these move a little bit more up or down so just for the sake of having this be the same i'm gonna put them like that and now i can change this exactly to 80. and here's here's why i mentioned earlier that it would be helpful to set an auto layout for that further area because as you can see as we are increasing the height of footer row 2 everything else that sits above within that auto layout is moving responsively and that is incredibly helpful because we can resize the footer row without having to do any edits on the other two layers or in this case three the two dividers and footer row one so now that we've got the spacing figured out we want to change the repositioning of these two so nav links left is now going to be centered and i'm going to use my tools here on the top of the design sidebar here and i'm going to align horizontal centers and i'm going to place this 12 pixels from the bottom of the screen and now this one is also going to be centered so i'm going to center that out and i'm going to also use the tool to place in between so now we've got what we wanted let's double check this is the end result that we were looking for now i'm pretty sure we may want to even consider let's see how google handles that okay now google actually keeps the spacing here to be double with respect to that so we're going to keep it at 24. that's fine and then we could also do just a little bit of uh consistency here and keep this also centered why not so i'm just going to change this to top and i'm going to change it to center and that should give us the expected result that we were looking for so now if i resize this you can see that everything stays in place neat so the last breakpoint we have to cover in this video is the point where our search box has to resize based on the width and that breakpoint as we discussed earlier is 648 bp so as i did earlier i'm going to grab this and i'm going to change the title just to be super super clear 648 bp there we go and i'm going to change the width of the screen to 648 now if we're looking at this piece over here we already got that outer outermost layer here and what we want to do essentially is as we go lower that outermost layer is going to shrink and with that shrink we're going to also shrink the search box that is contained inside so the way to do that is change the constraint here from center to left and right so now even though you see that nothing is changing actually the outermost layer is doing the work the problem is that we've defined the outermost layer constraint but we haven't constrained the ones inside so we're going to command z that to go back to our previous state and now we're going to look at these internally and this is why i mentioned that i like to do those constraints of the individual elements early on so we can avoid situations like these in the future and things are a little bit clearer as the design gets more complex but as you can see the center is no longer relevant so i'm going to change the search box to be left and right with respect to its parent layer i'm going to change the button also well right now it's already centered as we wanted it and this is on the left i'm going to change this to center so now if i do this oh there's still something that's going on oh yes we haven't actually done the bits inside so this one should be search center and the microphone you see here it's left top we should actually put this right center that should be everything we need right yes okay so as you can see beyond this break point we are changing also the width of our search box as intended and if we take a little bit of a zoom out i'm going to remove these from the side i'm gonna zoom to selection you can see that we've got our three breakpoints with responsiveness thanks to figma's auto layout and constraints so that's it for today we've covered layer structure auto layout and constraints to make the design that we had at hand responsive to different screen widths if you are interested in seeing how we're going to be taking this design to the next level through more techniques and practices make sure to stay tuned hit subscribe for the upcoming videos we have a lot more to cover to make this design pixel perfect and deliverable stay safe and see you next time

Channel: Javier Alaves

Views: 51,987

Keywords: figma auto layout, figma, responsive design, responsive web design, figma constraints, figma constraints responsive, figma auto layout constraints, ux design, ui design, auto layout, interface design, figma constraints explained, figma constraints and resizing, product design, figma design, figma web design tutorial, figma responsive web design tutorial, figma tutorial 2020

Id: l47WcSwK1M0

Length: 27min 3sec (1623 seconds)

Published: Wed Dec 23 2020