Responsive design in Figma with Breakpoints

hey friends I'm shakay and today I wanted to take my most popular reel so far that has somehow amassed uh over a million plays on just my Instagram and my Tick Tock and many more all over the place that's been reshared a million times and what I wanted to do is to take that and turn into a full video where I explain kind of what's going on a little bit about how to build these responsive layouts and using the breakpoints plugin to make these responsive designs have breakpoints and be truly responsive the way that they would be on the web so yeah without further Ado let's get into it [Music] the first thing I want to get into is how to build these responsive designs not just with the breakpoints plugin which switches the appropriate designs with the appropriate breakpoints but actually making the designs responsive so that as you resize the screen they adapt the way that you'd expect so I have three frames here my MacBook Pro 14 inch an iPad and an iPhone so these are you know three kind of like typical break points you have like a desktop a tablet and a mobile and I'm gonna build a layout that kind of is responsive in each of these and then we'll use the breakpoints plugin to link these up and turn them into a fully responsive kind of design okay so let's start here with the MacBook Pro first thing I'm going to do is hit shift a which is going to make this Frame Auto layout that's going to make it easier to make things responsive and it's going to lay them out nicely for us so I'm just going to make sure that height and width are fixed the auto layout direction is column I'll make a gap of 64. and zero padding on all sides first thing I'm going to do is I'll put a frame in here I'll make it fill container I'm going to make it a fixed height of 64 and this is going to be our nav bar I'm also going to give this Auto layout and make sure this is fixed I'll put things in the center and with this selected if I hit X it's going to change the spacing to Auto then I want 32 pixels of horizontal padding and just for good measure we'll do 16 pixels of vertical padding so for this example I'm just going to use a bunch of sort of wireframes you know just a bunch of boxes obviously in your designs you'll want these to be actual designs so I'll put a mock logo here it's literally just going to be a little circle thank you with background color that's the layout grid here we go and then I'll put another frame call this one links I'll just name these logo nav okay then our links is also going to have Auto layout so shift a and kind of Center them Auto layout direction is going to be row like if 16 pixels in between and make sure it hugs contents and hugs contents here we'll put a couple of frames just to imitate some links as you that you might have on a website with 80 height of 16 and we'll go to fill duplicate this a couple times so now we have a navigation bar it looks pretty good it looks like a knob that you might have on a website and you'll see that because I used auto layout right this is filling container and it's got spacing the auto as I resize the screen the navbar resizes the way that I would want it to so next we want to put in some content you know a main kind of body and I'm going to build sort of like a grid layout that looks something like this and we'll do that with auto layout as well just to make sure that again everything is nice and responsive so let's start with one big frame I'll call this card and I'm just going to copy these properties here so we have the radius and the background color and we have our card I'm just gonna duplicate this and make this 200 by 200 okay put these next to each other down here and then I'll select these two carts and hit shift a and this is going to be one of our rows make sure the spacing is 24 and I'll duplicate this foreign and then I'll select both of these rows hit shift a this is a column and we'll make the spacing 24 as well so it's nice and even and then finally we'll take all of these and hit shift a again this is another row with our Gap is 24 and we'll want to make it so that this card here fills container that way it's the same height as these cards over here you'll see that everything is nice and even and then for good measure I'm going to make this fill container and I'll make these fill a container as well hit enter make this fill a container and then make these cards fill containers now as we resize this everything is kind of spreading out evenly so now I'm going to take this column and I'm going to put it down here duplicate it and I'll add two more uh cards in here and then as we make it the same size you'll see that all the cards are kind of the same even size which is really nice and satisfying then I'll hit shift a on these call this a column make sure the spacing matches as well so everything is 24 and I'll duplicate this a couple times and now we have a layout here to make sure that all of these fill container so using Auto layout we now have a pretty nice and responsive uh layout now I can make it a width of a container so I'm going to just do 1040. that's just like a random value I picked and paste it in here and we now have a nice layout that looks pretty good so what we want to do now is take this layout and adapt it to tablet right so we'll make this go all the way down to about maybe here 1200 I'm just going to make this container actually a little bit smaller so I'll do 880. um imagine this is like a blog or something and we want to keep it pretty slim so from here we want to adopt this layout to tablet as I mentioned so we'll take this nav we'll copy it before we paste it in here I just want to apply Auto layout with shift a and make sure that our width is fixed and our height is fixed will make third Direction vertical we'll give this 32 pixels and zero padding and make it centered and now we can paste in the nav bar and just like before it sort of stretches the way that we wanted to then we can take our body here and paste it here and I'm going to make this fill container from here I'll also give it a horizontal padding of 32 pixels that way there's same padding on the right here as it is on the top from the nav bar and then because this is smaller it's on tablet and there's less real estate I'm just going to remove this and I'm going to make it a two column layout by just deleting these here and I'll just duplicate a couple of times click content and we now have a nice horizontal layout that stretches with our screen so I mean I'm thinking maybe we go in here and make this 32 as well just so everything is like really even everything is perfectly spaced out I take it back let's make this 16 and 16. so now there's 16 pixels between all of these cards I'll make them all a little bit taller just to make them a little bit more even there we go again this could be like a blog or a list of some sorts and then finally I'll take the snap again copy it and before I paste it apply Auto layout make sure it's centered we'll make our Gap 16 padding of zero all around make sure it's fixed width and fixed height and then if we paste the nav in here it'll look a little it's okay but it's a little bit janky and we don't really want a bunch of links on mobile usually we expect to see sort of like a hamburger menu so I'm going to take this I'm going to rename it to menu I'm going to command R to rename all of these lines I'll just rename them to line I'll make them 24 pixels wide 2 pixels tall and then I'll make the menu actually flex but vertical with a gap of four nice and we have a nice little hamburger menu icon also because we're on mobile maybe we want our nav to have less padding so go from 32 to 16. we have a nice mobile nav and then the last thing I'm going to do is take this main content and paste it in here and then we'll make it a one column layout so we can actually take all of these so we have all of our rows and I'm going to hit command shift G to ungroup them now we have a bunch of cards and we're just going to make them fill container and we'll make the height a fixed height of still 200 and then to match our spacing here of 16 pixels and because on mobile we have less real estate we'll make the horizontal padding also 16 pixels on this column make sure this is clipping content and we now have our layout for desktop tablet and mobile and of course everything is scaling nicely because we built it with auto layout and we set up the right kind of properties and constraints so now that we have our three designs for our three various breakpoints we can link them up using the breakpoint plugin so I'm going to hit command slash and open the breakpoints plugin you can see that I can create a new adaptive layout and so we're going to start from one which is the smallest and our second one is going to be 467 and now I'm going to add another breakpoint here which is going to be 767. and then I'll add the largest one which I'll make nine nine one and so what you can see is that we have this canvas here to play with and as I scale it it sort of changes in size and as I get to the second breakpoint it changes to a different style and as I go to the lowest break point it's a different one again so we now have three breakpoints to work with and now that we have these breakpoints we can start filling them in so I'll hit Plus on the largest breakpoint and select this Frame right here hit Plus on the middle break point and hit this right here and then I'll press Plus on the smallest one and make it our phone and now we can see that as we scale this uh we have a bit of an issue that we can fix now but this gets smaller and it changes to the appropriate breakpoint at the right size so when it's on mobile we have our hamburger menu and one column and then on tablet we have our two column and our links and then above that we have this layout here so the first thing I'm going to do is actually make this a little bit taller so we'll make it maybe this iPhone height which is 932 pixels so we'll do 932 and then we'll also make sure that this has an appropriate width so maybe we'll make it actually fill a container as well and we'll make the padding on the right and left 64 pixels to match the top and now as we scale it it scales us we would expect so this is just like a mundane example of how you might use this again I wanted to mostly show how you can build responsive layouts using Auto layout and how to Showcase them using this plugin here comment that I get a lot on Instagram and Tick Tock is what's the point you know why would I do this and I think this isn't necessary you could definitely show a developer and say this is the breakpoint for desktop this is the one for tablet this is for mobile built-in it's just a nice visual example if you're pressed for time you're pressed for resources don't spend time building this once you have these breakpoints it's a couple of clicks to set it up but again it's not super high priority I wouldn't prioritize it over other work but what it can do is it can help you communicate so if you want to communicate with your stakeholders or your developers especially you know less tech savvy stakeholders you can actually show them exactly what the design might look like as you go through these various breakpoints and also as you saw it can help you maybe test out the designs right so as I was stretching it you know the design wasn't quite working and I went back and I tweaked it but another use case that you might have for this is documentation so what I have here is a component pretend I'm building an app with a pokedex or you know a Pokemon team and I have this component here which has three breakpoint sizes it's got a large a medium and a small so my large break point is this kind of card with a three column layout and it doesn't scale then we have our tablet which is two columns and we have our mobile which is this kind of vertical column layout and so what I've done is very similarly I've created a frame for our playground and this frame has the component in the middle it has a badge saying what breakpoint this is and then I put a little badge saying that it's responsive I did the same for tablet so you'll see a different break point and we have that second component the medium size component and this is still in container and then the same thing with our smallest you know break point base and this SM breakpoint which actually yeah this should say SM and it's also filling my container and essentially all I had to do was open this breakpoints plugin and create a new adaptive layout that had this as the largest breakpoint this is a smaller breakpoint and this is a smaller breakpoint still so you can see here if I click into it we have our three break points and all of them have been linked to these three frames and now what I can do is in my design system documentation for example I might have you know this header up top that says this is a team card maybe you provide a description and then what you can do is show a real responsive example of how this component should behave so again at larger sizes it just kind of stays in the middle it doesn't scale and then as we go down to tablet it changes in size and it scales and then as we go down to mobile it has this one column layout that also scales again I wouldn't necessarily do this all the time especially if you don't have a lot of resources or if you're really crunching and trying to get a design system built but if you're refining things you have some time to make your design system really nice and interactive and really well documented you might want to do this go a little bit above and beyond and create something really nice so that's it I wanted to do a little bit more context again show you how this might be used and also I've turned this into a file that you can now get on my patreon so as always if you want this file or any of my previous files for tutorials and future files head over to my patreon at the link in the description and if you like this video please subscribe leave a like and maybe leave a comment letting me know how you might use this so yeah that's been it for me hope you enjoyed I hope you learned something new and until next time happy designing foreign [Music]

Channel: Sekei Design

Views: 24,299

Keywords: figma, design, product design, ux/ui, ux design, figma tutorial, interactive components, css, web development

Id: GCe3ONm23ME

Length: 14min 17sec (857 seconds)

Published: Fri Dec 02 2022