Responsive Web Design with Figma: Full Walkthrough Tutorial

hey guys perugia here and in this video i'm going to show you everything that you need to know in order to create a responsive version out of either a desktop or a mobile file in figma so by the end of the video we're going to create the tablet and mobile version of this ui design which we created in one of the previous videos if you're interested in seeing the entire tutorial i'm going to leave a link in the description but now without further ado let's jump right into the tutorial all right so we're back in our design file and now we want to basically bring it this desktop designer to the other responsive designs so the very first thing that we're gonna do and by the way the same is going to apply if you're trying to basically create a responsive version of a mobile design is we're going to go over here on the frame tool and then we're going to create another frame and as you can see we have the next frame right here i'm just going to make the background a little bit darker just so we can see these frames better i'm going to resize this to a tablet version so 768 pixels of width and we're going to rename this to tablet and i'm going to do the same thing again so i'm going to use the option alt key plus shift and as you can see the cursor is going to change and i can simply click and drag with the left mouse button and i'm going to create a duplicate of this tablet artboard now another way that you can do it is to shoot to actually use command c and command v so this is another quick way to do it and now we're going to create the mobile version which is going to be 375 pixels and we're going to double click on the name we're going to change it to mobile all right so far so good now let's use command and the left mouse button in order to bring down all of this section and i'm going to do the same also for the mobile which usually is going to be the longest version now i wanted to have some breathing room especially as i'm working through the very first elements so what i'm gonna do is essentially at this point i'm just going to drag the elements directly here and for the tablet version i'm probably going to go to make it a little better go up and as you can see we have actually for some reason i literally deleted logo so let's go back and in a tablet version what i'm going to do is i'm going to create a hamburger menu so let's use nucleo app again let's go over here let's write hamburger so that we can fit each and every one of the elements for some reason this one didn't click but let's use this one again i mean someone must must work no one works all right as you can see sometimes it's trying there we found one that works so basically we're going to have a hamburger menu in the tablet version and let's unframe this let's bring it here and the one thing i want to do is to actually add the layout grid which is going to be formed of columns now in the desktop version we usually have a 12 columns especially if you're working with bootstrap however in the tablet i like to use lesser colors less columns so basically we're going to go with something around eight and that will do the trick just make it a little bit lighter and there we go all right so far so good we have our good old columns and i'm probably going to just resize the luggage slightly better and that will do all right so far so good you could probably stretch the menu but as you can see i will need some sort of uh like uh refinements about i prefer to go with the hamburger and then we're going to have another section so let's go over here and let's uh just like this and we're going to center it as you can see text really big for tablet and by the way guys one of the biggest steps that i have for you whenever you're actually creating a responsive designs is to go ahead and test them directly in the device as you're working on them or at least at the very end since there's nothing better than seeing your design in a real life scenario so that being said i'm going to kind of like um create a version based on what i think it could work at a specific moment and i've been doing a lot of responsive design so i kind of have an eye by this point as to what the sizes are going to work and which ones aren't but again i always test them afterwards since uh that's really the most important thing because sometimes you're going to have some elements and maybe the text looks looks good in the figma file or the sketch file or the adobe xd file but then once you actually see it in the real-life device you notice that maybe it's it's too big or it's too small and you want to avoid that so let's bring this one up and we're going to bring it above just a little bit because you want you still want everything to be above the fold and there we go all right so far so good now it's time for these guys so i'm going to duplicate them and i shouldn't really bring them all at the time so as you can see the extra space now it's coming in handy so what we're gonna do here is uh we're essentially going to make these guys smaller so i'm going going to create a smaller version on this side and it's going to be useful let's go here it's deep select let's make the width smaller so let's try and see if they're going to fit and still we're having some some issues however what we can do is we can simply bring this below so we still have them technically speaking and that's going to be all good all right i think overall this is uh this is working and yup we have the right sizes by now all right now let's bring back this sub headline let's make it smaller and yeah around these lines could work well spring here and as you can see one of these titles escape that they're resizing factor if you wish let's make this one smaller let's bring it up and again i have a a sense that maybe these will need some further refinements as i test them on the tablet but for the time being i think these are these are fine let's bring this here you can kind of create a version or actually let's try and make these look well within the columns ranges and that will do all right so far so good cool i'm going to make these uh just a touch smaller again because i can kind of see already that they're not going to be perfect and there we go probably also slightly resize the icons but for the time being i think this is looking good so let's bring this one up and we're going to essentially continue with the next stage which is bringing this image and also this text so let's just copy and paste this on the side again and we're going to work our magic so i'm going to bring up the image and let's do that and let's bring this one here we're going to resize it on the go bring this one to 22 pixels let's make this one smaller not too small and for some reason this was in duplicate right 13 let's bring it up let's bring it here and i'm probably going to just make an exception to the grid because in this case i think it's going to work better um probably going to have to talk with the developer about this and we can figure out a solution so yeah sometimes that's just the way it goes and let's go over here and let's select this rectangle let's go back on this original and what i'm gonna do is i'm going to copy it bring it here and for some reason it's rectangle has been copied way below that's totally fine let's bring it here and let's lock the selection at this point we'll need to bring these elements so first element is the headline and then we're going to copy and paste these ones here these are pretty easy for the most part you just need to bring the arrows all the way to the right by the way i'm using the dip selector quite often as you can see with uh holding option and that will do all right let's bring it up and i'm probably going to reduce the width the the height since uh i don't want the height to be exaggerated on tablet devices and there we go all right let's bring this one here let's deep select again let's bring these elements all the way to the right and also let's make these titles a little bit smaller for the mobile device they think that at this point we're pretty much set all right so far so good let's reduce the size of this this element and we still need the um fuel openings button i'm just going to duplicate the dv demo since we already resized it according to the new new sizes so you all openings let's bring it up and here we go all right so far so good now it's the turn of the footer so let's uh actually let's just copy the food rectangle before and i'm going to unlock this bring it here resize it resize it over here bring it up a notch and there we go all right so far so good so probably going to just copy oops all of these guys let's bring them up and let's bring them over here one two three and four and there we go pretty much all right far so good let's copy also these elements we're going to have them on the very left we let's add the a liner in this case let's make a white let's bring the opacity down just a bit and we're pretty much good to go let's make it for tina thirteen let's bring the copyright over here all right so far so good so what we're going to do next is we're going to bring all of this text on the right on the top and let's go ahead over here and let's resize all this all right so far so good and now again guys you will need to double check on an actual tablet an actual ipad or whatever tablet you have around so usually the way i do it is i just copy a jpeg of this and then open it up in the tablet so i just send myself an email you can also use the figma app but you can also use all sorts of different apps um add it on envision send yourself a link i mean there's really is tons of ways but for the time being let's just continue with the mobile version so mobile version it's like columns we're going to go with just two columns that's what i really like to do on mobile just keeps things easy simple not yet also effective so let's go ahead over here to the hamburger menu by the way obviously if you're working on a client's project you want to keep the design file clean so you might want to just clean up the file layers and big tip is you want to have the very first art board cleaned before you actually because it's just going to make the cleaning up of all the other ones just easier you're going or you're already going to have groups stuff like that but if you actually start once you create all the mobile and tablet versions it's going to essentially take more time there's no two ways around it so keep that in mind and yeah for the time being since this is just a demo and want to borrow you with hours of cleaning up you definitely know how to do that or i also have like some other videos or multiple videos where i'll also do that but i noticed that it's just something which usually it's tedious it's boring to watch it's already as entertaining so i'm just going to leave you that on that part out if that makes sense so let's go ahead over here let's make this one smaller let's bring it here and what we're going to do is we're going to bring these elements um i was about to say one by one but we can just bring them all at once just like this and that's going to make the work easier now again you need to double check the sizes of the icons and you know all that it's going to look good for a time being i think this one's going to be fine so i'm using optional uh quite a bit as you can see probably we can make this one a little bit bigger and let's bring this below all right let's make it just that smaller that will do and let's uh bring it up a notch okay i actually forgot to change the size of the chops headline i looked it's a bit too big clearly and then now let's add that the main rectangle is going to be this one right here let's bring it over here and let's bring him down a notch or two and i'm actually going to duplicate the disguise once more and create individual mobile versions so i'm going to just select all of these icons make them a bit smaller for the mobile version just select these and we're going to bring them over here we're going to also make the text smaller all right that will do let's just select these bring them here let's also select the arrows make the smaller as you can see i'm selecting the maintain the constraints so basically this option here constraint proportions and let's make the height smaller we're also going to bring them here just all right i also want to make the stroke 1.5 and that will do all right that's pretty close and here we go all right so far so good now one more thing we want to do is to bring them up just a bit and we're also going to go ahead make this one bigger in height and let's bring this element here below and a hot phone let's bring this one up all the way up and we're also going to use this button right here i'm probably going to just make it full width since on mobile that looks pretty good probably going to do the same also over here in this one just makes it a bit more user friendly and all right that will do and this is looking pretty cool so far all right now it's time to bring the footer in this section and i'm going to make it bigger than we need let's lock it and i'm going to copy and duplicate these these two elements we're going to have the about here the portfolio and also these two elements right here let's bring this one on the side and so far so good probably going to just make these a little bit smaller and i'm going to duplicate them right here same for the copyright probably going to just locate it below and bring also the divider line and we are pretty much set all right let's uh simply grab this element here let's bring it up and there we go all right i'm going to write desktop this one and uh yeah there we go so i hope you enjoyed this tutorial uh this was actually a tutorial which has a another future surprise since this is actually going to be the base for uh next video where i'm going to show you software which is going to be really really exciting so keep an eye on that and i'll see you in the next video

Channel: Pierluigi Giglio

Views: 22,666

Keywords:

Id: mAWa21llvuA

Length: 26min 24sec (1584 seconds)

Published: Sun Mar 28 2021