How To Design RESPONSIVE UIs With AUTO LAYOUT and Fill Container (Figma Tutorial)

hi everyone and welcome in this video I'm going to talk about how you can design responsive UI elements using Auto layout and fill container so if you're not using this workflow when constructing and designing your UI elements I believe that you are kind of wasting your time here I have an example of a UI element that has been constructed without this feature and I'm going to show you how impractical in certain cases this actually is and how inconvenient this gets when you want to make any adjustments why don't we get straight into it so here we have a card some kind of feature card with a headline description and a call to action and you can also see that we get this edit icon with a pencil and when I want to let's say resize this when I want to make this more narrow or adjust the spacing the padding within this element what I have to do is first of all I'm gonna have to resize the parent frame and then reset size individual elements also probably reposition those and then readjust the frame size one more time so as you can see it would definitely be more convenient if these elements actually responded to the total width of this apparent element of this card frame right let's actually recreate this feature card using Auto layout and fill container and you'll be able to see just how much time this actually saves you so why don't we get started right away let me use my text tool let me use my text tool where I'm going to type in card headline so current headline with a Capital C and what we have here is SF Pro bold Bond size 34 and then we get this description so that let me actually just copy the text again text tool paste that in and it's SF Pro medium 20 and I'm going to resize this all the way down here so then I'm going to again I'm actually going to duplicate this description by using alt or option to drag this and then I'm going to use SF pro bolt 20 and I'm going to edit this text field to say button right so the this is our basis for the contents of this of this feature card so now what I'm going to do is Select this button button text go over here to select auto width and then press shift a to add an auto layout around this text and under fill on this right side I'm going to set that to Black and then also I'm going to set the font to White and make it fully opaque when it comes to padding that's 24 on the horizontal one and 16 on the vertical one which means I'm going to select this Frame again and type in 24 and 16. also rounding very important and that's 10 in this case let me just select this Frame again and set 10 over here in this Frame section right now we have the card headline we have the card description and we have the card button that we have created from scratch just so that you can see how I actually arrived at this result and now what we are going to do is recreate the icon it's going to be a bit more complex but essentially we have a frame so f tool click and drag and create one that is 144 by 144p pixels I'm going to rename this icon and set the rounding to 72 so that it's basically a circle right then the fill well that's going to be black right and also I'm going to add another fail which I'm going to edit over here to be white and then as soon as I have this new fill I'm going to go over here click on this color in this square and then go here to say radio then I'm just going to move this radial gradient over here so that we create an illusion um this basically makes this frame look as if it's a black sphere right just by using a radial gradient now let me just examine what we have here in terms of this icon we are almost there so that 36 by 38 let me select the rectangle tool and then create a rectangle that is 36 by 38. I'm going to add a stroke remember The Fill make the stroke white make the stroke also 4 pixels wide and then set the alignment of the stroke to Center I will also go over to rounded to Corner rounding with this U rectangle selected and set four all right now I'm going to select this press enter click here and then here right so that we create these new dots and then I'm going to select this corner vertex and remove that so this is what we get and I'm going to select this again and just move this few pixels downwards and this one a few pixels to the left right so you can see we have created this shape I'm also going to set this to have rounded endings and finally I'm going to create this pencil and we are done here so rectangle remove fill add stroke four pixels in white make it a bit wider press enter click here to add a new vertex then extend so that you get a pencil shape then I'm going to round that it's a bit different than the original but close enough for demo purposes right then I'm going to rotate this 45 degrees and position that precisely so that we get we get this shape I'm going group this command X select the frame command V right so we got this result basically the same now we have the icon and we are going to create a shadow for it which means drop shadow so I'm going to select this new icon drop shadow and let's examine the settings that we have here that's 20 84 64 minus 23. 20 20 84 64 minus 23. now here is the most important part where we will actually create the responsivity and I'm going to select these elements press shift a and then I'm going to press enter and I go over here to this design panel and under horizontal resizing I'm going to go to fill container this means that we now get this isn't that more convenient than doing whatever we have been doing here right all this resizing this is definitely better now let me just adjust the text alignment also spacing and then let me set the background to White and add padding right let's say 50 or 40 40 here and we get this beautiful card that responds to our resizing let me just select the button align that to the center and then also make sure this text is centered and we get this nice behavior this responsive Behavior right I'm going to select the frame again and under padding under Auto layout independent paddings I am going to increase this all the way to let's say 120 right so we get we get this extra space over here for Icon and I'm going to select the icon command X command V enable absolute position and then align that to the top move that a few pixels upwards and then make sure this is constrained to the left and top of the element and now finally let me add some rounding around 24 and adjust the rounding here check this out now when I resize this when I actually take this element and do this it responds to our resizing as opposed to here and you personally just think about how much time will you be able to save now that you actually won't have to rearrange all this stuff when designing UI elements you'll just be able to do this and that is thanks to fill container right so if this were set to fix so right now it's fixed you can see the behavior changes and this description doesn't not respect the overall residing now it is only if we set this to The Container right so for some of you this might be very basic you might have already known this but is nevertheless extremely important if you want to be designing user interfaces efficiently and you can also change paddings which means that you will be changing these paddings right you can modify these values to for example prepare a mobile version right so let's say that you will have this will be a component let's say this will be a component that will have 40 on the padding and then what you're going to do is create a variant that will be mobile this one will be desktop this one will be mobile and you're gonna decrease the padding to 20 with the padding on top as well and you're going to also resize this icon to be positioned right here let me just and now you have a component and show you you have a component where you can switch between desktop and mobile and so whichever width you choose for your element it's going to work perfectly right so you can switch between desktop and mobile of course this means that you can now have way longer descriptions this you can see how it nicely resizes all of that or you could have multiple buttons right but I'd have to modify that on the component level you now get multiple buttons I think that two is enough let's say one of these is going to have a stroke and now we get this beautiful element let me reset these changes so in general stop wasting your time and start using Auto layout with fill container to create scalable and responsive UI elements thanks for tuning in leave a like if this video helped you and I will see you in the next one

Channel: Mavi Design

Views: 8,641

Keywords:

Id: mJyhkDNCAnc

Length: 10min 45sec (645 seconds)

Published: Wed Jan 18 2023