Responsive Design in Figma: Crash Course 2023

responsive design can be both tricky and overwhelming what device sizes should I use how should text and spacing change between devices and just how do I even achieve responsive Behavior inside of figma in this video we will address all of that so that when you start creating interfaces like apps or websites whatever it is you have all the knowledge you need to confidently create responsive designs inside of figma before we jump into figma let's just quickly talk a bit about responsive design responsive design allows us to give users a specific and custom experience based on the device they're using so if they come into our website on a desktop it's different than on a tablet that is different than on a mobile device and that's really how we should think about it every experience should be suited towards the device the user is using and this even means that sometimes we have to change the information or the layout depending on what screen or what device the user is using now one thing that really made responsive design click for me was to start viewing it as pixel ranges instead of static pixel values so for example if you set your tablet to 10 24 pixels and your mobile to 640 pixels that really means that your designs will have one specific look from 0 to 640 pixels it will have one specific look from 641 to 10 24 pixels and then one specific look for everything above 10 25 pixels which would then be your desktop view now if you find this confusing we will go more into it inside of figma so just stick around till then also keep in mind that the pixel ranges or the breakpoints you choose is gonna be depending on your project there is no one right pixel value or one right pixel range or one right break point you have to see what you need so for example if you go into Apple's website and then into Google's website you'll see that they use different breakpoints or different pixel values if you go into individual pages on those websites you'll see that even there we have different breakpoints and pixel values and pixel ranges so with this in mind let's jump into figma and start creating responsive designs all right everyone so we're in figma here and this tutorial is going to be divided in three steps we're going to have the first step which is about setting up our Auto layouts our constraints and our resizing and if you don't know what these things are if you don't know about the concepts then I have some videos on that in the top right the second step is going to be about defining our actual breakpoints and adding some grids and then the third step will be to update our sizes so well we have different sizes for tablet and for mobile well maybe let's see what we do in this tutorial so the first step here then setting up the auto layouts the constraints and the resizing and like I said if you don't know about the concepts check out the videos pause this one and then get back here once you're done with it but it's pretty simple so I'm gonna take this Frame which is a desktop layout and I'm gonna go into each and every one of our layers here and I'm gonna try to determine what things are or should be grouped together so the first thing I want to group is this group of links and buttons in the top right so Target that and hit shift a call this container then I'll take this logo type here and these items I'll group this call this navigation navigation I'll take these text items here I'll group these into another layout and call this just container again and then I'll actually group these two here as well so the image and the text container so I'll group that and call that container as well or maybe content to have a distinction in terms of name now if I start resizing this nothing happens yet and that's because on a layout by itself doesn't help us achieve responsiveness we need something else we need constraints so if I go into my navigation here I Target that well the first thing I want to do is an auto layout change currently we have spacing between the items here set to a fixed pixel value I want to change this to be spacing mode instead of pact which is the fixed value to be spaced between now this distance is not a hard set value now this distance is going to be automatic like this so I change the width of this parent container and everything inside will be dynamic still though if I change the size of this nothing happens that's because we need to do some stuff some other stuff on top of this so we want to go to constraints here and change from left to left and right now if I grab our desktop frame here and I start resizing now it's responsive because now this navigation container here is holding on to each side and it's going to stay responsive based on this desktop frames width just like that okay so that's the nav bar now the nav bar is responsive cool now I want to make these responsive here as well the image and the content here and if you want to you could leave those as separate entities you don't have to group them but I'm going to group them in this case so I'll grab both of these and create an auto layout out of these call it um hero content now if I change the size of desktop here nothing happens still so you would think okay but maybe then we target this hero content thing we go to constraints again change from left to left and right is not available right is not available here right now is because we have things inside of these or inside of this other layout that are set to fixed with and I'll show you or set to fixed width or hug and we need the things to be set to fill container you're going to see what I mean in just a bit so if I click on this text item here for example you can see that this is set to fixed currently the same with this one the same with image here and if we look at just the container here the container of the text this is also oh wait a second I have two let's remove one of the groups here so we just have the container the image and the hero content here as the main container so you can see that the container that encapsulates the text and the buttons here this is set to hug so this is currently hugging the content inside of it we want this whole thing to be based on the hero content with now currently it's not because this one lives its own life it's hugging the content inside which is set to fixed how do we solve that well we go into these items here we go to the resizing option we change from fixed in the horizontal resizing to fill and we do the same for this text from fixed to fill and now you can see that something happened everything just squeezed together and became super narrow here and that's because now everything inside of this hero content container is squeezing together to take up the space that is available and that reason that we have this size of a container here is because the image is still set to fixed so I'll change this to fill as well and this whole thing here the container should be fill now you can see that these two take up the same amount of space So This Is 50 this is fifty percent if I change the size of it you can see that it always takes up 50 percent of the space and that's what fill container does in these cases if I add another item here you can see takes up the spacing 33 instead so let's go back let's get rid of that and I drag it out so that it covers the full width here and now if we go to the constraints options because if I resize here again you see nothing happens that's because we have the last piece of the puzzle that always has to be set as well and that is the constraints going from left to left and right we need it to hold on to each edge here so I change it to left and right and now if I change everything here you can see how it just works beautifully so that's the way we get our responsive Behavior to work inside of figma but we're not quite yet done here we need to do a couple of other things for it to be a true responsive layout and one of the things is to Define our breakpoints and our grids and if you remember in the beginning I talked about the fact that our breakpoints aren't really just set to one static pixel value we're working within ranges so for desktop we're gonna work with a range that is from 10 25 pixels and up for tablet we're going to work from 10 24 pixels to 641 and from mobile we're going to work from 640 pixels to zero so all of these devices have their own ranges of pixels where they have the same kind of layout so for mobile within this range we're going to have the same structure for tablet within this range 10 24 to 641 we're gonna have the same layout and for anything above 10 25 we're going to have this specific desktop layout and the reason I have the 1440 pixel frame here is because that's usually the size I'm working with and this layout here is going to be the same for 2000 pixels or anything above 10 25 I just have this reference frame of 1440 because yeah that's our main Mainframe so with that in mind we have our different breakpoint values so I know that I want a value for 10 24 which is going to be tablet I know I want a value for 640 which is where the mobile begins so if I take this desktop here and I start by adding grids so I'll add a layout grid here I'll go and change from grid to columns I'll change the count from 5 to 12 that's the web standard I'll change the margin to 64. so the spacing from the sides here I'll change the gutter to be 24 pixels and here we have our first grid for the desktop looks good now usually you would add a grid maybe as the first thing where you start creating a design because you want it as guidelines but I'm just going to show you how we scale the grid for the different device sizes here so we have the desktop grid setup looks cool now we can see that it's not actually mapping correctly here this container is not really mapping so I want to map this exactly to the grid because if it's mapped to the grid when we start resizing stuff these things are actually going to stay committed to the columns they're now going to listen to The Columns when we change sizes so make sure everything is within the columns here and it looks like it is cool so then we have the first one so if I change this to 1440 again still responsive cool now duplicate this because for tablet we have a very similar similar layout I'll change this to be named tablet I'll go into the layout grid here change from 12 columns to 8. so there we have eight columns instead I'll change the margin to be 32 pixels and you can see that okay so we changed the grid but the content inside of here doesn't follow so we have to realign stuff so I'll take this I'll drag it to the side there and I'll increase the width do the same with this nav bar like that and now if we change the size it still works cool now we want this to be 10 24 and width and there we have the layout but not quite done because one thing I want to change for our tablet and this is quite common when it comes to tablet views and mobile views is that I want to Stack my content differently and this is where Auto layout once again is going to be very helpful for us so I can go into my hero content container here I can go to the auto layout settings and change to Vertical Direction instead of horizontal direction and you can see how it now Stacks vertically uh I'm not done there though I want to change this image to be in the top instead so I'll switch the order like that now it's starting to look more like the thing I want so this is my tablet view now I'll grab the tablet view duplicate that I'll go once again into my layout grid I'll change the count to four and I'll change the margin to 16 pixels so this distance here in the sides is 16 and the same with the gutter it's going to be 16. I'm gonna realign these again make sure they stick to the sides of our columns like that realign this and change the size just like that and change the whole width of this container or this Frame to 640. and now I realize I forgot something for tablet and mobile I actually want to hide those links and I want to change this to be some kind of a hamburger menu but that doesn't contain a hamburger that just says menu like this and plus Okay cool so there we have our different layouts let's call this mobile our different device sizes cool with that done with all the grids set up with our different breakpoints the last step I want to show you is when we change the sizes of stuff how do we size things differently for desktop for tablet for mobile well this is also pretty simple um of course a desktop is the main size here we're not going to change that so tablet will be the first size we change and you might be looking for some kind of a golden number here like what multiple can I use when I change the sizes I want the right answer and we don't really have the right answer this is going to be depending on your layout depending on your website you have to feel what is correct for your layout for this layout I've used the same text size for a bunch of elements so logo type here menu or the text within the button this body text and this button text all have 32 pixels in size so we're going to stay consistent we're going to have the same change in size for these so I change these to maybe 28 for tablet and then for the heading here which is the remaining thing I'll change from 96 to 72. and that's it also when it comes to changes in size for different devices maybe we want to change the spacing so I'll change the spacing between the items in here to 24. I'll change the spacing between the image and this text container to maybe be 64. I'll change the spacing between this item here the image and the um the text to the top to be maybe 32 and I think that looks fine so that's tablet okay now for mobile I'm gonna once again Target all my text sizes to share the same um text size I'm gonna go here change from 32 to maybe 24. and uh yeah that looks fine I'll change the heading here from 96 then we had 72 Maybe 56. I'm gonna change the spacing here once again so maybe 16 pixels spacing between those two maybe 40 pixels or 48. and then the spacing to the top here maybe 24 and this one to the outermost top is going to be 16 as well like we have on the sides and something like that so now we've added all the different sizes now if we look at the responsive Behavior looks good here look at the tablet looks good here as well and we'll look at the mobile and it looks good now if you want to become a real ninja in figma check out my master playlist on the topic here until the next one have a great life we'll talk soon ciao

Channel: Tim Gabe

Views: 32,911

Keywords: ui, ux, product design, ui design, ux design, figma, figma tutorial, responsive design figma, figma responsive website, responsive web design tutorial, mobile design, tablet design, desktop design, ux ui design

Id: tJCv91c6Krk

Length: 20min 46sec (1246 seconds)

Published: Fri Jan 20 2023