Is this the BEST Figma Plugin for Responsive Design? (Tutorial)

the breakpoints plug-in is perhaps one of the best plug-ins within figma that will help you accurately convey how a design should respond based on different screen sizes it allows you to take different artboards and your layouts essentially for different devices and along with intelligent use of constraints and resizing which is something you have to do it will show potential employers or freelancers clients or even the front-end developer exactly how this layout should respond as if it were inside an actual browser that you can kind of pull in and out and change the width so in this tutorial i'm going to show you exactly how to use that along with other considerations when it comes to responsive design and this is not a sponsored video by the way so this product it's a 15-day trial and i believe a single user's license starts at 18 and i believe that's just a one-time fee you get it free for life so i think it's a no-brainer if you're somebody who does a lot of ui work alright so make sure to subscribe as always and let's get started now wait one second i want you to check out designcourse.com which is going to be launching here in 60 days or january 4th of 2022 um if it's not launched based on the time you're watching this i want you to enter your email address because it is my new very robust ui ux design course and it's not just a course with video only there's also interactive ui tests there's also design mentorship with challenges and so much more so if you really want to level up your game and become a great ui ux designer definitely enter your email or if you're watching us at a time that it's released consider joining all right let's get started all right so the first thing you want to do is you want to make sure i'm that a each of your frames or your layouts or your artboards whatever you want to call them i are using constraints properly and resizing properly for this one if i drag this out you'll see things kind of work well in terms of just you know adapting to the size of the artboard and then second you want to make sure that when you're going from your phone layout to a tablet and then to a tablet to a large tablet or a small desktop et cetera et cetera that you're intelligently placing these uh changes at the right points so what i mean is if we take this out and we start drag it out at what point can we start to make changes based on the increasing availability of space that we have to us um so this could be a subjective idea um let me change this from scale just to left but all in all you that's a decision that you will have to make essentially so for me i'm going to say actually i'm gonna redo that change i just made i think scale works better so for me i think the uh if we're coming out from right around here we could probably start to make changes right around 600 or so that's like a small desktop to our maybe a small tablet rather and what we can do is um i'm just going to make probably a real simple change um i think what we'll do is like right around there if i drag this around 620 or so we'll duplicate this we're going to rename it tablet all right we'll go ahead and center this stuff now it could be argued that you could center it on mobile as well but either way i just kind of want to make this a little bit quicker i think this button is too large so we can just drag this in uh maybe we'll push this down increase the white space right around here and we'll leave all the rest the same down here all right then at that point we could also say all right what else can we change um when we go out from around 6 20 or so maybe around 900 yeah for sure like right around here it's just too much um and then we could probably put these in two columns because we have that available space so what we'll do is um go ahead and drag this back to around 600 and this by the way the phone we can kind of push around here there we go so we'll change this to desktop and so for this like i said around 900 we could start to make some other changes all right so for the first change i'll make is um we'll go back here we'll left align this again i will pull this in into more of like a two column layout and we'll pull this in right here now if you want to be pretty specific about your grids and all that stuff we could change this to 12 column grid maybe 80 or so pixels for the margin and then we can make sure everything's lined up here get this lined up all right and then a hamburger menu does not make sense because we have a lot of space so what i'm going to do off screen i already have just a real simple navigation created and so i'm just going to paste this in and we'll put that right around there all right and then i also have a illustration we could just kind of put this weird illustration right there and then finally we also have i we could rearrange these so i'm just going to delete those i'm going to paste one in here so this is what i mean by two columns essentially i just duplicate this one as well could take this constraint and maybe just right align it to the right all right i now let's hide the grid and here we go here's our other layout now one final layout that we can create is you know when we push this there's a lot of space between these two so we can just i you know collapse these into two columns themselves so we'll go ahead and duplicate that we'll change this from desktop simply to something like large desktop or something and we're going to pull that out we'll delete these two and then off my reference monitor monitor rather we will get these lined up where they need to be like roughly right here and then when i pull this out there we go all right so we have four different iterations here of the layout so now this is where the actual breakpoints plugin comes into play so we get break points um start a free trial it says for 15 days otherwise the unlimited license uh 18 bucks i believe for the the smallest one um or the lowest tier or whatever that is so i'm just going to click start that new adaptive layout it adds this weird artboard down here and then we have our breakpoints all ready to rock right here so um right here is obviously going to be the smallest um and then desktop right around i'm going to say like around 6 30 will be the next one so we're going to put 630 here for this so this means from 320 pixels or really it means anything under 630 pixels is going to be this phone um and then from 630 we're gonna hit plus here to what will be the desktop so from 630 to um roughly we look at the largest one roughly like right here which is 11 39 will be the desktop version so um we're going to do 6 30 to 11 we'll just say 30 right here and then finally we'll add one more and this right here um we'll be able to just adjust i we don't have to enter in anything so um let's see if we have this working properly so the first thing we'll do is click plus oh i forgot one of the things that's strange is i i believe i'm not sure if it's required to do this but it's the only way i could get it to work is to create components out of each one of these so you select the frame itself for the layout hit create component create component create and create okay so now we'll go ahead and click here we click plus we choose phone tablet and then plus here desktop we'll add one more and then select this for there so now we'll take this down all the way and now we can select it and watch what happens just like in a browser so from 320 to 360 watch once or 630 but rather it changes to our tablet it's not a huge change but it's right there 630 actually this doesn't make sense uh 6 30 is way too out there i believe we wanted to put 900 or so so let's change this um right here to 900. all right so that makes more sense not sure what that happened i must have messed something up so 900 to around 12. you can see the only change we made there is just right there now you could probably make further changes um pretty easily but what's cool is we could also um just go in there and keep iterating on these and it will automatically update this situation down here so let's say we wanted a smaller type maybe like 33 not three 33 and i don't know what happened to the opacity all right so let's say we wanted to make that change and maybe move this up so we could still iterate on these and it's going to update automatically we don't have to do anything i at all so now we come back here you'll see the smaller size of the font and it all works well so apparently also um people don't need the plug-in uh you could just hand this file and they'll be able to adjust this down here and it will still work so really really awesome stuff all right everybody i think this is an awesome plug-in and if you're a freelancer somebody who deals with uh figma and you know ui design a lot and you're dealing with clients or an employer et cetera then i think it really makes sense just to you know spend the 18 bucks to get access to this plug-in like i said at the beginning of the video this is not a sponsored video i just think it's a really helpful plugin i know i'll be buying it and i think you should definitely check it out alright so as always make sure to subscribe and i'll see you soon goodbye [Music] foreign [Music]

Channel: DesignCourse

Views: 35,210

Keywords: figma tutorial, figma design, figma breakpoints, figma breakpoints tutorial, figma responsive design, figma responsive tutorial, gary simon, designcourse

Id: 6-v__ScXc_A

Length: 11min 21sec (681 seconds)

Published: Mon Nov 08 2021