Responsive Web Design Has Never Been This Easy | Figma Breakpoints

when you're designing responsive websites you need to see how they respond to the device size or the browser width and you used to have to wait for code to do that but now we can do that right inside of our design tool using an amazing plugin inside of figma called breakpoints all right we have figma open i have three very simple layouts a three two and one column layout and in figma i've actually created a little bit of a responsive nature simply by scaling the objects inside as the artboard stretches so it's already a little bit responsive but now what we actually need it to do is become adaptive because once this three column layout starts to get a little too tight it becomes really unpleasing to the eye i'd rather flip over to this two column layout how do we do that well we have the breakpoints plug-in open right here we're simply going to come and give ourselves a little space above and hit an adaptive layout a new adaptive layout now you can see this is going to be our new layout we can give it a little bit more height if we want to why don't we move that up just give ourselves a little bit more room to work with and then what we're going to do is if we see our little breakpoints plug-in over here it's we need to add some breakpoints inside of this we could actually do it uh for vertical as well but we're just gonna stick to horizontal for now let's add two more break points now the reason we're adding two more break points is because it's provided now three potential screens that fit in between these break points and that's how break points work we say hey in between this point and this point do this thing and that's exactly what our plugin is allowing us to do so really really simply we're just going to come in here and set the sizes here like 5 18 for the bottom one they're for the very smallest one 9 58 for the second one let's do 1604 for the third one and then let's just do 1920 so that'll be kind of like the max width so now what are we going to do we're going to select the screen that we'd like to load up our very left screen that's the smallest one horizontally from 518 to 957 all we do is select the arcboard boom it pops it right in we're going to do the next one this is going to be the horizontal layout for 958 through 1278 select the frame boom and we do it to the last one as well and now we have this responsive artboard up top now what's really cool is we can actually just kind of move this to the side you can see that we have right on top the break points are listed in the actual diagram here and we can literally grab this it's been turned into a component and stretch it out and you'll see when it crosses that top dot boom it moves into that two or that two column layout and it'll continue to go on and on and on but boom just like that we are just cruising away now you know what would be really really cool is if i created one more artboard like this let's call this 1920 like so and everything inside we actually want all of our elements right we want to just group these together and we want it to stay in the center now when our artboard extends everything will stay still okay so let's go back to our layout here let's add another one and let's select this artboard so check it out now we're able to expand and move over so we can kind of expand this thing it's going to stay center because we don't always want everything to stretch all the way across the canvas but now as we get down into that 1920 land it's responsive and then it adapts to the two column and it adapts to the one column and this whole thing is beautiful so now we can create multiple layouts and we can show our clients our stakeholders how things will actually adapt and respond i hope you enjoyed the video if you did make sure to leave a thumbs up subscribe to the channel hit that little bell notification icon so you know when other videos like this one come out check the description below for a link to the breakpoints plugin inside the figma community and i hope you're having an amazing week designing amazing things making amazing things and crushing your responsive designs see in the next one

Channel: Jesse Showalter

Views: 52,984

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design, responsive web design, media queries responsive web design, figma breakpoints, figma breakpoints plugin, figma responsive design breakpoints, figma tutorial, figma tutorial for beginners, figma auto layout, figma web design, figma components, figma prototype tutorial, figma to webflow

Id: gsVwThzYwv8

Length: 3min 54sec (234 seconds)

Published: Fri Jun 17 2022