Make a design responsive in Figma with constraints & auto-layout

in the last video we learned the basics of figma by copying a part of this ios app but our app is not responsive so in this video we'll go through how to use constraints in auto layout to make our app responsive on all ios devices there is a link to this file in the description in fact there are three pages prototyping in figma which is the original app made by figma and you should find it by default in your drafts folder the copy which is what we made in the last video and the responsive copy which is what we will work on today so grab the logged out frame away from the other frames to have space to work on it and before i start i want to see how it's holding on different screen sizes so i can copy it by grabbing it pressing and holding the alt key or i can copy it again by pressing command c then command v and then changing this frame to iphone 8 and this range to an iphone se but this is too slow and limiting and there is a better way to do it we're going to use a plugin called responsify that is going to create multiple screens for us automatically so select our frame go to the main menu plugins responsify and choose the kind of device that you want to have multiple screens for in our case we want to have an iphone responsify has created multiple screens for us automatically if you want to install the responsify plugin all you need to do is get back to files then go to community then type responsify in the search bar it will show you the files so choose plugins you'll find the responsify plugin install it and you will find it inside your plugin folder as you can see our design is not holding well on any of the screen sizes so i'll start by addressing the home bar selecting the home bar the first thing you can notice is these dotted lines to the top of the frame and to the left of the frame figma constrains new elements by default to the top of the frame and to the left of the frame that they are created inside so if i choose this button it also has a top and left constraint if i choose the avatar it has top and left constraints so we need to change this for the home board if we move our frame to the right it's not going to move with it because it's constrained to the left and if we move it to the bottom it's not going to move with it because it's constrained to the top so select this and let's change the constraints that are set to it by the fold so we want to stay to the bottom so let's constrain it to the bottom and we don't want it to be constrained to the left so press and hold the shift key then press on the left part and as you can see the the width of it is set to scale if the frame moves to the right it will scale with it if it moves to the left it will scale with it if it moves down it's already constrained to the bottom so it's going to move down with it next let's work on the background image again it is constrained to the left and to the top so let's try to constrain it to the right as well so i press and hold the shift key and press on the right here this is turned to left and right you can also do it from the menu here left and right and i also constrain it to the bottom so it's constrained to left and right top and bottom now to see how this is doing let's select our frame go to the main menu plugins responsify and choose iphone let's work on the avatar the avatar again is constrained to left and top so let's try to constrain it to left and bottom all i need to do is to just click on the button let's responsify it and see how it will do okay let's address the logo the logo looks fine but on the iphone as e it is a little bit out of place so select the logo if we change the constraints to let's say top left and right what's going to happen is that the logo will stretch when the width of our device changes so i think in this case it's better to constrain it to center and center so just double click on it and again responsify it to see how this is holding now the buttons are a bit problematic in the last video we've already talked about frames and auto layout because i wanted to address the very basics only it is generally better to create elements inside frames instead of rectangles an auto layout is just a frame with extra options let's look at the buttons that we currently have i will group them using command g to set one constraint for both but the group that holds the buttons has constraints the frames around the text and rectangle have constraints the rectangles also have constraints and we have to make all these work together for the buttons to become responsive now let's have a look at how buttons with auto layout frame look like i have text and i put it inside an auto layout frame by pressing shift a now there is only one frame and the text inside is no rectangle i can add fill to this frame i can add rounded corners i can also add padding using auto layout i can add individual padding if i have another button and i select them both and add auto layout to them using shift a now there's only one outer frame to set constraints on if the width of that frame changes i can select the buttons inside by pressing enter and change the resizing properties from hug contents to fill container and now they will scale with the outer frame now back to our buttons i will ungroup them select the register button add auto layout to it by pressing shift a and select the login button add auto layout to it by pressing shift a and as you can see now the buttons have the auto layout frame with text inside of it no rectangle now let's select both buttons and add auto layout to them both using shift a and now we have one frame to set constraints on with the buttons inside it the default constraints around this frame are left and top so let's change this to bottom and center but the frame is set to hung contents which means that it will only change when the objects inside of it change their size we wanted to change when the main frame around it changes its size so let's change this to fixed but we don't want it to have a fixed width so instead of center let's set it to scale and now let's see how it will do if the width of our frame increases the frame itself is increasing with it now for the buttons to follow press enter to select them both and change the resizing property from hot contents to fill container and also the alignment of the objects inside of those buttons set it to center now let's responsify our frame and see how it goes now let's grab the rest frame away to give ourselves space to work on it and before we start responsify the frame to see how it's doing and it's not doing well i'll sort by the status bar it's currently constrained to left and top so we'll also constrain it to right so when our frame changes it will stick to it the back button and the register the title are okay on every design so i will leave it as it is constrained to left and top now the keyboard i will align it to the bottom and the width i will leave it to scale now let's responsify this quickly and see how it goes this looks fine now we need to deal with the buttons first i will add auto layout to each of those select first one shift a second one shift a register button shift a and all of them broke so we need to fix them let's put these text boxes in place for some reason the button is not set automatically like in the other frame so i will delete the rectangle add a fill to the frame pull the frame in place add a padding of 17 around the items give it a corner radius of 6 and finally center the elements inside of it now let's select all 3 and add an auto layout frame around them by pressing shift a and just like the login frame we will set constraints around the outer auto layout frame and the text boxes and button will follow so let's change the constraints to left and right and top lsc the frame is scaling now let's choose the elements inside of it by pressing enter and changing their fixed width to fill container finally select our frame and responsify it and we're done with this frame for the login frame either repeat the same steps or just copy the register frame and change the title of it to login change the name of the frame to login delete the old login frame but now we have to reset the prototype links so go to the prototype menu and grab the node next to the logo to the login frame choose the login button and connect it to the login frame and we're done now if you want to check the design on an iphone se for example select all frames get back to the design menu and change the frame to iphone se then change the prototype device to an iphone se and present it sometimes the outcome of constraints in auto layout can be a bit unexpected so keep experimenting till you get the result you want you

Channel: The indieDev

Views: 16,360

Keywords: mstflotfy, mostafa lotfy, dev

Id: 4MwLRuAcek4

Length: 10min 44sec (644 seconds)

Published: Sat Jul 31 2021