Transcript for:
Foundations for Figma Lecture 2: Frames, Constraints, and Auto Layout

welcome to the foundations for figma our most in-depth figma course for beginners today we will learn how to practically use frames constraints and auto layout in your designs along with tons of tips tricks and shortcuts my name is an Meara and I teach students design and AI this is lecture two of our 10 lecture Series so without wasting any further time let's get [Music] started all right welcome to lecture 2 super super excited to discuss this part because in episode number one we had covered the basics so we understood what exactly is figma how is it useful as compared to other tools but in lecture number two we will dig deeper into the Practical aspects of why figma is so so powerful specifically for UI design so if you're here for the first time folks this is a free course on learning figma and we have a uploaded a lot of more in-depth videos on our latest learning platform called learn uiux doin now we will cover a lot of things but today we will only stick to frames and auto layout you will see anywhere I'm hovering you will always see the zoomed in icon and then if you want to see the keys that I've pressed you will see them on the top right corner right here so you'll always see what all shortcuts am I using so today's video is split into three modules in module number one we will understand the difference between groups and frames and understand why frames are so powerful because of this concept called constraints that we had briefly touched in episode one but I want to go into the deeper aspects of how constraints are really useful in module two we will learn Auto layout and have a hands-on experience of how Auto layout is useful and a lot of plugins that I regularly use and then in module three we will do practical implementation and check out Hands-On examples so let's start with module number one as to what exactly is the difference between groups and Frames now you would have obviously seen that when I select something which is inside a frame let's say I take this thing right here if I cross this out or let's say I take this Auto layout right here you will find the constraints panel that looks like this okay and in our last video I told you to just completely ignore this shape right here and understand that we have horizontal and vertical constraints now the question is when do we use horizontal and when do we use vertical and if you already know the basic I would recommend you to shift directly to module 2 where we do auto layout but let's understand horizontal constraints so folks horizontal constraints Define how a layer behaves if it is inside a frame and if I stretch the frame along the x axis for example if I press F and create a frame like this and then create a rectangle like this and keep it in the center let's make this red if I keep it this way and select this thing right here if my horizontal constraint is Center if I stretch the frame on the xaxis it will always stay in the center now if I take this again and go from Center to just say left then this part the left side of my red rectangle will be tied to the left part of my frame so if I stretch the left side it follows the left wall but on the contrary if if I stretch the right wall nothing happens similarly if I move the horizontal constraint from left to right now my right wall of this red shape is going to follow the right wall of my frame so now this time completely opposite is happening of what was happening before now what if I keep this in the center and I want this to stretch on all sides left and right in that way I will select left and right and now no matter what direction I stretch stretch in whether I stretch in from the right side or from the left side it just follows right so these ones are pretty simple right left maintains the layers position relative to the left side and then right and left to right and Center it is scale that confuses a lot of people because people keep asking me that anch what is the difference between scale and left and right so let me show you two things right here okay I will make a duplicate of this take this thing right here keep the horizontal constraint to left and right take this one and make it scale now I will be using a new feature of figma that we haven't covered yet and it's called components and it's very very easy to understand we'll have a separate lecture on how do we use components but just assume right now that if I take this thing and rename this as lnr and I will take this thing and call this as scale okay now I can select this one click on this diamond icon and create a component so you see this diamond icon right here this means that this entire frame was essentially a normal layer but now it has become a component now what do I mean by that I will explain don't worry but let me create a component of the scale as well now if I hold this component and hold the option key or the ALT key I can make a copy out of it but this is not an ordinary copy this copy is called an instance inside figma now you'll be like anch you are in introducing complicated words back to back can you tell us what exactly does this mean so folks the thing is that in my layers panel you will realize that you can see the diamond icon right here it's called lnr and on the very top you have a hollow Diamond icon which is also called lnr but the icon is different this is my instance right here if I let's go go make a change in my component instead of red if I make it blue all of my changes done inside the component are reflected in in my instance so basically no matter how many instances I make let's just say I make unlimited instances okay whatever change I make here will be reflected to the instances so the component is like a parent and instances are children and whatever changes you do on the component you can actually reflect all of them into your instances now of course we will dig deeper into the upcoming lectures as to what all things can you do but for now let's just assume that all of your instances blindly follow your components now why would I do that just to show you this one single example that in my component I will keep the width like this but in my instance I will stretch it this way okay then I will take this one right here and notice now my red one the horizontal constraint is at scale and I will take this width and scale it again now let's scale it even more to see the signal significant difference now can you see the difference between what happened when I had chosen left and right and when I had chosen scale so technically this is also scale if I were to select this thing right here you would see that this is scale I can't change any constraints so turns out in an instance you cannot change any constraints you can only do these declarations in the component but you can see that something is happening which is very very different now let's read the definition of scale written by figma help it said scale will Define the layers size and position as a percentage of the frame's dimension it will then maintain those proportions as you resize them very complicated let's read the example the frame's width is 100 pixel and if the layer's width is 70 Pixel It means that the layer width takes 70% of the parent frame correct now if I resize the frame to 200 pixel figma will resize the layer to the width of 140 pixels which is 70% of the parent frame in this case right here it doesn't care in percentages it has absolutely defined that there is an exact distance on my left side there's this exact distance on my right side and then it is just maintaining that when I choose from left to right but in terms of scale this distance is varied let's assume that my width is X X okay and I go from X to maybe 2x so this is a complete 100% change right it has doubled up so my middle thing this shape right here this will not care about what is the distance on left and right it will only care that if I'm inside let's just say the width of my inner container is y this will also go double why because it is thinking in terms of percentages and once you use this in your practical day-to-day applications you will understand how this is working out so once we have done horizontal constraint obviously now you'll have vertical constraints as well and the principles remain the same okay so in this case if I were to create a taller frame and let's just say I create a red button right here and we had taken the example of a Fab button right faab which is the floating action button and let's say I have a Navar on the top okay and let me make this green by the way in figma you have Google fonts by default and you also have X11 Colors by default so if you type in that color name there is a certain list of X11 colors if you put that then you don't have to specify the hex code I will create this component again create an instance and then if I stretch it by default nothing happens right but if I take this thing right here and choose the vertical constraint to be Bottom now this sort of follows but now you can see that it's not following on the horizontal constraint so I will take this one make this left and right take this one and make this right not left and right imagine if I had made this into left and right it would have stretched but I don't want that I want this to be pinned to the right side so the question is why do you need frames in the first place you remember I said that you can also create a group so let's just say I create a rectangle so I will have a frame right here and instead of a frame let's create a rectangle okay and let them have the same color now I will create a circular thing right here I will create a circular thing right here here now if I select both of them and do command G they're in a group but if I select any child inside a group you will realize that you have no option to add constraints it is only inside a frame that you will see this column and that is why frames are extremely extremely powerful simply because they have constraints inside of them so just as an example right here we have the iOS screen this is the setting screen and in the layers panel you can see that this one is a frame this checkbox tells you that this is a a frame and on the right side you have the same thing but this dotted Square this tells you that we have a group so on the right side we have the group let me write the group right here that's a terrible G but yeah group and this is my frame now of course you have constraints ready right if I were to take these things out and let's just say I were to stretch them okay I will take this entire thing and stretch it so you would realize that the constraints are following this pretty well it is absolutely responsive but if I were to stretch this group you would realize that some things are getting messed up of course it is falling to some extent because the stuff which is inside the frame is working pretty well too because if I were to go inside this group you realize that these are all auto layouts right now what is auto layout Auto layout is just level two of frames but in most cases when you stretch something in a group things don't respond because the children in inside a group are unaware like they have absolutely no tension about what my parent is doing in terms of like shapes and structuring also in frames you have this thing called as clip content whereas in group you don't have a concept of clip content so a group will show you everything which is inside a group as compared to a frame where you can hide things now a very cool shortcut is that if you hold the command key and then makes some changes to your frames You' realize that the children no longer follow the constraint rules so this is how you bypass constraints so basically if this was a group if I had no constraints inside my children this is how it would have responded without any constraints which is terrible right now what you can do is you can literally go to figma community and search for Joy Banks and from Joy Banks I got this file right so he has created these iOS systems and you can actually try these things out as to what all constraints they have set because the the best way to learn constraints is from seeing design files that are well prepared okay so what do I mean by that let's just say I take this one single instance out okay if I were to select this thing right here and you can see that this is a hollow Diamond which means that this is an instance I can actually detach this by selecting option command B once I do that you would realize that these are some three random lines and this is basically an auto layout and don't worry you will learn Auto layout but let's assume that auto layout is level two of frames I can obviously select this minus sign and convert this into a normal frame so now you can see this Frame button right here this has essentially become a frame and you can go between frame and groups very easily from here as well now if I were to stretch this you will realize that nothing is happening right and you can also see that you know the elements are just dead now I think they're following the left constraints but if I were to move this left and right nothing is happening okay now the fun part is that I can select any of these things let's just say I take this content right here okay and let's just create a new frame right again because I think that'll be easier for you I will take this airplane mode okay I will select on this icon right here so that my width is uniform take this thing right here bring these two together align them and keep them here and let's just have them stuck on the left side then you have a toggle and I'll keep this here now I will delete this reference and just keep this Frame right here okay and I will make a component out of it now I will make a duplicate out of it just to see if the constraints are working or not so there are no constraints right here okay if I take this toggle and make this from left to right on the horizontal axis see now it's working well now if I were to stretch this vertically maybe I want them to be in the center so I can take all of them go to my vertical constraints and go Center okay so this way I know that no matter what direction you stretch me in it will always and always work okay now this is a single level of constraint you had a frame and then you've just put children inside that and then they you know sort of following your rules but you can also have nested constraints now what do I mean by that let's assume that I create a Navar okay and I'm going to create like a very very bad looking prototype but this is just to like prove a point and let me just take this thing right here let me make this as slightly green let's just have some border area otherwi it looks very very bad and let's assume that you have three things right here that looks like this okay and then you have some icons in the center let's assume that it's like a replication of what the figma navbar is doing okay so what I've have taught you right now is that you can take these things let's tidy them up and you can make them left these two can remain in the center and these ones can remain on the right side so if I make a component you have these things right here and then these are working pretty well okay now this Navar will come inside a screen correct so if I press F and select say MacBook Air this nav bar essentially comes right here right and then you can sort of put them together and then what I can do is I can take the background of this Frame and make this gray okay now this navbar is actually a child of the Macbook airframe so I have to set constraints to this Navar as well so right now if I were to create a component of this MacBook Air okay and then give a instance out of this like this and if I stretch it you'd realize that it's not responsive at all why because in my component if I were to select my Navar I haven't added any constraints so I will again go from left to left and right and see now it is working so essentially notice what is happening I have set constraints to the atomic level inside the Navar then once I started using this Navar in a bigger screen I had to add constraints to the entire Navar itself so there are two levels of constraints one is on this level which are constraints that are respecting the MacBook airframe but then even within the component even within the Navar you have constraints on these small small objects this is called nested Framing and within nested framing you have nested constraints that is that you can keep adding frames in one another and then you can keep adding constraints without much issue now I have quite a few examples right here just to show you how people use frames right so people use use this in their input Fields they use this in the settings value and these are all like iOS examples but there's one very very important thing that you need to take care of if I duplicate this alert icon right here you would again see the word Auto layout and I'll tell you why are you seeing this again and again let me first detach it because if I don't detach it I can't make any physical changes to the instance so if you have to make any physical changes to the instances you have to detach it so once I have detached it let me just get rid of Auto layout because we haven't covered that yet I will delete all the auto layouts and I'll tell you the problem statement so let's just say this is a single line Arrow would you want this component to work in this way or technically if the alert is very very small if this is a single line thing you want the height to shrink right so right now what have we learned in frames and constraints that the children adapt when the parent changes correct using Auto layout the parent changes if the children change I'll explain it again in my frames example I said that if I Am shifting the parent then the inner children are morphing but in this case right here I am not changing the outer boundary I am actually adding more sentences and because the children are modifying themselves because the children are expanding the parent container which is the alert box it is trying to accommodate all of these inner changes now this accommodation of internal elements is not possible with constraints because constraints are actually properties of children right the child knows that okay I have to be left I have to be right but there is no constraint for the parent container so how do you educate the parent container how do you tell the parent that this is how you need to expand if your children expand and that is where where we will learn Auto layout so these are some examples by the way we have uploaded all of these Sigma files on the figma community as well for all episodes you will have all the links in description so you can obviously try these out right uh but before we enter Auto layout I want to introduce you to the concept of responsive design versus adaptive design because understanding this key difference is very very crucial uh before you start using Auto layout and Frames so folks responsive design is a word that is very commonly thrown around right and to make this more practical let's open my website so folks this is my website right here and let us see how this website responds as I shrink it uh from left to right okay so I'm shrinking the entire canvas and nothing has happened yet but as soon as I reach the ceiling can you see how the divs are sort of moving and shrinking in size can you see what's happening so the question is that if I were to take this on a very very granular level let's just say I completely shrink it to this level You' realize that all the elements are rearranging themselves to accommodate themselves in the limited space that they have so essentially the text the content it is all the same it is not like some stuff has gone away but it is just making space so that all of these things are visible okay if I were to go to say learn uiux doin right which is our free website to learn ux design if I were to shrink this You' realize that the entire UI has changed and some elements have actually disappeared so if I were to bring this back to a desktop length you'll see all of these play icons but once I shrink it Beyond a specific limit the UI icons have disappeared this is not just responsive Design This is called adaptive design now let's come back to our slides in responsive design these are the screenshots right here that I've kept from my own website so in this case you'll realize that you are essentially loading the same website on all devices whether you open it on my phone or on the desktop and it's sort of reass siing according to the viewport so the number of UI elements are the same if I were to count you know 1 2 3 4 56 six elements on the web six elements on the mobile but it's just that on the mobile it might be of a different size now if you make a change on the desktop app it is reflected on the mobile app as well because they're essentially the same component the same components is just being resized or reframed or repositioned but the thing is at some point when you have complicated products you can't have everything that is visible on the web come up on the mobile and in vice versa because mobile has a small screen you don't really have enough things to fill up on a desktop screen imagine imagine if you were to take your Instagram app and see it on your desktop and not add anything you will have so much of empty space on your desktop so you would just end up wasting a lot of valuable real estate simply because you don't know how to fill up space so the thing is that when we talk about real products not about landing pages but when we talk about real products real products need to have adaptive design now when it comes to responsive design of course you can't have every element on smaller design and it takes more time to load because all components are expected to be there whether it's desktop or for mobile but technically when we look at adaptive design so inside adaptive design I've kept a screenshot of my Twitter so this is my web version of Twitter this is twitter.com on my phone's Google Chrome and this is the Twitter app now all of these are very very different this is opened on my desktop using Google Chrome and you can obviously see that there are a lot lot of extra things okay you have this column right here you have the middle column you have you might like what's happening so many things but when I go to my Google Chrome on my phone a lot of things change they've cut away all the Clutter and they've only kept the middle part and they've sort of reduced the phone size reduced the buttons like a lot of things have changed this is the example of adaptive and not just responsive now when we go from the Chrome mobile app to the actual native app then you have more features now why is that because when you use something on your Google Chrome on your phone there's an assumption that you have slow internet and you have to load everything right you have to literally download every single thing every time you open the app but here in my native app I have already downloaded Twitter which means that I already have at least 70280 MB of Twitter's UI inbuilt in my app when that happens I can have a lot more flexibility I can have a lot of code because now my phone doesn't need to download all of that code again and again so when we talk about adaptive design the core principle is that you can afford to lose some features on mobile and most landing pages stick to responsive design but when it comes to real products they also follow adaptive design and obviously this loads faster because it only downloads what is required imagine if your phone mobile data had to download all of these extra information it would obviously consume more data but it would also take a lot more time so you need to understand the difference between a desktop web app a mobile web app so a desktop web app is very very different it is something that you open on Google Chrome as compared to an app like figma or photoshop or Adobe After Effects you have to download these apps and install them those are your native desktop apps so you have desktop native you have desktop web then in terms of mobile also so you have a web app which opens on your Google Chrome or your Safari and then you also have the native mobile apps that you download and when you build your design system you need to declare these components separately so a component library for desktop web app is different for mobile web app it's completely different people have this assumption that I can simply just you know sort of add constraints and I will have one library that satisfies all the products it doesn't work that way because even within Twitter my desktop can be this wide this wide or even this narrow so of course you need responsiveness within a specific web app as well but once you go from one device to another device then it's about adaptiveness so just to conclude when you're making components for say your Chrome app which opens on your Google Chrome on your desktop then all of your components will need to have your constraints because now you're in a specific app but if you're saying that hey now I'm also creating a version which opens on my mobile phone then responsiveness or constraints alone will not work out you need to create different components all together and how do you do that there's a different concept called variants so you have one variant for web one variant for mobile and we will cover that in the upcoming lectures but I'm just trying to set the base as to what all techniques do you need to use inside figma so constraints satisfy your needs for responsiveness but when it comes to Adaptive design you need to learn variants and components which we will learn eventually so when it comes to responsive versus adaptive UI within a device range let's just say you go from a old laptop to a big laptop to a MacBook Pro responsiveness will help you so constraints will stretch but when you shift from a device it is you learning how to make it adaptive now alone your frames alone will always help you with your responsiveness but components help you with your adaptiveness now there are three very very important articles that I want you folks to read Because I personally feel that if somebody has already explained these things in an amazing way then you don't need me to explain them so these are the three articles that you will have to read the first one is on medium and I think this is a paid medium article so uh you might have to purchase or sometimes medium gives you free articles every day then this is a free article completely on design systems.com called space grids and layouts by ier Dal and then there's another medium article called Everything thing you need to know as a UI designer about spacing and layout grids now I am not covering layout grids specifically because I learned everything from these articles and it's very difficult to sort of cover everything in 10 lectures so I've made sure that you know I can obviously guide you to resources that can fill in the gaps for you now we finally come to module two where we understand the basics of Auto layout now let's understand what exactly is auto layout okay and to understand the use case let's assume that I want want to make a button now how would I make a button I would probably make a frame okay and let's make this in blue and let's add a button that says click me okay now I can of course narrow the width right here make this rounded edges and you have your button right here and let's make this into a component now you would obviously know that if I'm making a button of course the button might look CH different but you can always have it for different purposes right you can have it for click me you can have it for delete you can also have it for buy now and if uh you have something which is way more verbos you can probably say something like create an account now the Restriction with component and instances is that I can't change a lot of these things automatically right so I would probably have to go to Every instance and then sort of you know change these widths one by one to show that create an account is there I would probably have to extend the widths like this of course my constraints are not there so I should probably make this into Center but even then you know things are not working well and I would have to probably extend the width again and again similarly if we go back to our alert example right here I would literally have to shrink the width manually for every single instance like this so I want my parent to understand that the children inside need more space this is where Auto layout comes into the picture now I will make a duplicate of this let's make this red right here let me detach it let me take this Frame and press shift a okay as soon as I do that you would have noticed that there's some change that happened right here now this is the auto layout window now let me explain you what has happened now how do I know that this is an auto because in my layers panel I can see these three lines okay I will make this into a component and this time make instances again now see what happens it is actually following my text width so if I say create an account I can type as much as I want and it will accommodate according to all the content which is inside my entire Auto layout so it sort of knows that all the content inside of me needs more space so I have to make more space for it right now if I were to go here and let's go put an icon right here if I were to scale this can you see how the boundaries are sort of adjusting let's make this wide so that it's less jarring to the eyes but this is extremely useful especially for buttons right now let's take an example right here so this is from an open-source UI Library called Untitled UI and it is available on the figma community if I were to copy this sentence and paste this again and again can you see how the entire thing is accommodating this would not have been possible if I was using frames because frames don't care about what is happening on the inside so let's understand all of the options that auto layout gives us okay and we'll cover all of these icons one by one we'll take it super super slow okay I will delete this and I will get this Frame right here okay now you would notice that I took out my instance so I can't make any changes to the auto layout so if I really want to make any modifications any physical level modifications I will have to detach it so I just detached it using option command B and for example if I'm clicking any shortcut if you don't know what I'm clicking you will always see it right here so the first two icons are to decide the axis at which you are creating your auto layout so right now I have an icon and a text by default it has created a horizontal layout if I were to select this icon right here it will create a vertical layout which means that if I duplicate these things all of these things are stacked vertically why because I have created a vertical Auto layout if I select this I will come back to a horizontal layout now there's also one more thing called wrap now what does that mean if I select on wrap you would realize that if I duplicate let's say I take this entire thing let me duplicate the behavior is almost the same okay if I select this thing right here the wrap is unselected okay let's click on wrap again and let's try to extend the width things are in the center then why exactly do we need wrap now if I shrink the width see what is happening things are essentially sort of fitting in between the constraints that I am setting on the outside but wait anch what happens if we click back on this it again shrinks to an horizontal layout and because I had Shrunk The WID things are getting cropped out okay now you would be like an this is so complicated I thought we would uh simply get that long long range of Click me click me click me when you selected horizontal layout why it has just suddenly cropped turns out that when you select any of these three layouts there's one more setting that you need to be careful of and they're not in this Auto lout panel they're actually on the top right here so can you see this thing this is is actually for my width let's say I delete this entire thing okay and let's make a copy of it again can you see this width has now become something which is called as hug if I click on this down arrow you'll have two options one is fix width one is hug contents what does that mean hug content means let me detach this hug content means that as I duplicate it will make sure that it hugs all the content and nothing is cropped but if I were to click on fixed width now my width is fixed so even if I duplicate nothing will happen so you will be like anch why exactly do we need a fixed Auto layout this is essentially acting as a frame right if you really think about it yes but it is acting like a frame in a specific access if I were to literally convert this into a vertical Auto layout can you see how my width is still fixed but I still have the other superpowers of my auto layout on the vertical axis so moving forward when we make components you will realize as to why is this even useful but think about it look at this screen right here and this is very very similar to a Twitter feed or a Facebook feed all of these components do you realize the fact that the width has to be fixed if you're making it for the iPhone this width can't be more than this right no matter what text you add it has to be fixed but you still need the superpowers of Auto layout from a vertical layout perspective so if I add a tall image you want the height to extend but you don't want the width to be uh extending so in that case you always have an option to actually fix any of these aises now if I fix my height and if I fix my width then this is essentially a frame then it's literally not useful to you at all then this is literally acting like a frame but then what is the benefit why can't I just detach this and you know simply have uh a frame withth constraints because there are more benefits to using Auto layout and we haven't covered those yet so let's come back to our Basics we understood that there are three layouts there's vertical there is horizontal and then there's wrap and then if I were to extend this thing right here you have this grid okay by default it is in the Center but if I click on align top Center then click me goes on top similarly you can align it to Any Corner you want now the fun part is that you will have this one more option that says horizontal Gap in between items now it says horizontal Gap because I've chosen horizontal layout so if I were to increase this Gap right here can you notice how there's more space in the middle but you would be wondering why is the auto layout width not expanding because I have selected fixed here if I were to go here and click on hug content and as I extend my width You' realize that the container will also change its size now if I select a vertical layout this entire icon will change to Vertical spacing if I had multiple click mes and if I go to my frame and I switch from a fixed vertical height to a hug content height now I can see everything and add as I scale you'll see that it is accommodating and I can also take it to a level where I can make it into negative spacing as well and this is very very useful when you're creating a stack of DPS let's bring it back to zero now there's one more thing which is called as horizontal padding and vertical padding now let's understand what does that mean let's take this button again and let's assume that I'm not making a button but I'm making a tag like a small label sort of a thing and what is a label if I were to show you a quick example uh right here this limited time only this is not a button this is actually a label so in that case I need very thin padding right I need it to be responsive I need it to be like real and you know accommodating but I want it to be thin so you can actually select the vertical and bottom padding in one single shot so if I were to say make this 12 pixels the padding here is just 12 pixel so how do I see this padding I can hold the option key and click anywhere on the boundaries and it'll tell me the spacing I can go here and make this also 12 but now you would be wondering that anch you are changing the left and right padding all together what if we want to change the padding individually so you click on this button right here and you will have all the individual paddings one by one so you can just change the left padding you can just change the bottom padding and you can do these things individually as well what if you want to do it equally on all four sites if you hold the option key and just click on this icon right here then you see this icon right here it says all padding and right now it is saying 12 12 6852 why is that there's a specific logic behind this numbering 12 12 68 52 basically means that this is 12 on top left this is 12 this is 68 and this is 52 so the these numbers are basically arranged in a clockwise manner if I take all of them and simply make this 12 then all the padding becomes equal but sometimes because you have a lot of line height in most cases you need to add extra padding on the left to make it visually equal so here I've made this into 24 and my vertical and bottom padding is 12 pixel so you know obviously if I were to take a quick example uh from the iOS design system if I go here and take this one right here you would realize that this is a box and all of these items are in an auto layout now why do they need to be an auto layout if I delete any of these emails I want the rest to Simply come on the top let's say I delete all of them I need all of them to stack amongst each other right now imagine if this wasn't an auto layout let's take this threads and let's delete this Auto layout if I were to delete any of these you would see empty space actually let me delete these two this is the kind of behavior that you will get so in this case right here I would ideally want all of these emails to just jump back to the top because they need to be in a row but because there's no Auto layout there's nothing that the parent knows so I can take this thread and if I were to press shift a again it will again become an auto layout and then I can increase the spacing in between them I can also make it extremely negative as well now I will be putting up this figma file in my community as well if you go to figma community and search for anchara you will be able to access this but I would strongly recommend you to sort of practice right because let's say this message bubble this is also an auto layout because you can extend it to whatever height you want but see this if I were to select this message bubble right here this is an auto layout then there's another Auto out inside of it then there's another Auto lout for the bubble and this is where we understand the entire concept of nested Auto layouts just how we did nested constraints here these people are doing nested Auto layouts now you would be saying that anch this entire hello is such a small letter and we check out the bubble Auto layout this says hug contents then why is this not hugging uh to hello what is this extra space for this happens when you have selected this icon right here if I were to make it as to Auto width then my text width would shrink and then the bubble the entire boundary would wrap around so these are small small things that you can take care of right and if you were to look at say keyboard right this is a very very important example a keyboard is extremely responsive but if I were to go inside my keyboard you will realize that inside my buttons right here these are all frames they haven't made this into an auto layout now why is that because nobody would ever delete F right they would never ever delete F they know that this is a quy keypad and this has to be in frames that is why they're not using Auto layout so you need to be very very smart in understanding when do I use Auto layout and when do I use frame and the basic logic behind this is that if you feel that the inner contents will change in width or in height and they will regularly change then you should use an auto layout but if you feel that there's going to be some rigidity to it they're going to be static or the elements are not going to change themselves in terms of physical dimensions or in terms of number in that case it has to be a very very basic frame so before we move to module 3 I have three frames in front of me okay so assume that I am creating a website where I am selling courses okay and I want to create the mobile version of it app version of it and the desktop version for it okay and let me just show you how the constraints look like okay now this is technically an incorrect design by the way because if this was a native app you would obviously have a bottom bar and if this was opened on Google Chrome then you'll have a top bar but but you know just for the sake of discussion assume that this is a native app okay and I'll make this into a component and I will stretch this so that you can just see uh how the app sort of responds okay so an iPhone can either be this much tall this much tall uh the width can sort of expand so you can see that all of these things are sort of working out together now how have I achieved this let's take all of these elements one by one let's revise all of the constraints okay this thing right here this is an info box okay now this info box itself is also a frame and within the frame all the elements inside are in Auto layout now why are they an auto layout because I might want to have a single line thing or a double line thing but you can notice that all of these things are not getting responsive why because technically I should have taken this heading let's delete all of these things and then taken this Auto layout and this and then put them to together an auto layout as well so that if I were to duplicate it would have been very very responsive now this is nested framing because I've added constraints to this and then on top of that this entire info box has its own left and right constraint so everything inside of it is in the center but when I talk about info box it is at left and right then we look at the promo button right here now I don't necessarily want the promo button to stretch to left and right so I will keep it at Center I don't want even the middle image to go you know scale itself so I would probably put it in Center as well but what would happen if I were to make this into scale this is exactly what would happen it would sort of clash and it would scale according to the percentage but I don't want that so let me keep this in Center as well then what I've done is I've basically created a rectangle at the back where I've put the same image poster a gradient and then I think there's one more layer on top of it right so there's a gradient layer from the bottom and then you you have a scrim this is called a scrim like a blanket like a dark blanket but at like a 50 60% opacity and this entire thing is at left and right so as I move away you can obviously see that this works but now obviously after a specific vid you'd have to enter iPad right like no iPhone looks like this so at that point I will switch to Adaptive design and see what is happening right here check this out check this out this is very very important why did this happen because my nested constraints are messed up so let's see what is happening right here if I were to go to my Cellular Connection and uh these things right here you would realize that it says scale okay now I can't make any changes to this because this is an instance so let me detach it okay I will go to Cellular Connection select all of these okay first of all make them normal this is how they would look normally and see what is happening right here see the behavior because they're at scale so they feel that if my mobile width is expanding then all I also need to sort of expand in width so I should probably make this into right because they don't need to scale they just have to stick to the right side I will take this again and put this on left and now they are working uh flawlessly right so this is how the behavior would work in now folks the important thing to note is that amongst iPad you have responsiveness but once I go from phone to iPad it will be a separate set of components so even in this case you have the image which is left to right and top to bottom why so that as I expand it sort of follows around right and then you have all of these things which are towards the right side because I want them to be tied to the right side so the image is also left and right this is also image right that is why you know this distance sort of Remains the Same and then you have your desktop so the elements remain the same but you know at one point this would sort of break so maybe we will add one more break point so this is called a break point where you say that you know maybe I don't want the same design maybe at some point it should just uh be different so yeah I just want to quickly uh go through how constraints would have been added for all of these three screens uh some important things to note we've already covered that you will need different components for different devices but when you're designing for web please make sure you start with the smallest canvas you have to start with a width of 1280 pixels when it comes to iOS please make sure you start from uh iPhone 8 probably because you know it's just very very simple to go from a smaller canvas to a big canvas when it comes to responsiveness but going from a big canvas to a small canvas becomes very very tough so I usually test my web designs on 1280 uh 1440 and 1920 and Beyond 1920 I don't do anything which is responsive I literally just put like white spaces on left and right and that is what I would recommend you uh to do as well so with that we finally come to module number three where I just want to like show off some very very cool plugins and the first plug plugin that I want to show off is called responsify now there are two plugins that I want to show first one I will show it in front of you but eventually you will have to check out the second plugin on your own because I want you to do some homework as well so folks the thing is that in this case you can obviously like check out the constraints and all of these things but what if I want one single frame uh being tested towards multiple sizes so right now manually if I had to check how this would look on the MacBook Pro how it would look on uh desktop all of these things I would have to sort of duplicate it and then stretch it one by one right but with responsify you all you need to do is go to this icon right here go to plugins and just type the word responsify and you will find it right here uh as soon as you install it you do command slash and type responsify and then they have all of these different devices as soon as I click on say desktop what it would do is it would test my entire design for for a generic desktop for a Macbook for a MacBook Pro for a Surface Book and for an iMac and you can do this for phones as well so let's just say I take this Frame out here and run the responsify plug-in again and probably go and do it for Android it would show me how the same pixel size would sort of get messed up if I were to make this on Google pixel and pixel XEL now there's another concept right here that we need to understand and that is of independent pixels versus dependent pixels U you know which is the concept of SP and DP but we will not cover that in this course because this course is not a ux design course this is a figma course so I would I won't get into those details but it's just a very very powerful plugin and what I would recommend you to do is to install the Untitled UI you know file or any file from figma community and like you know start playing around you know how they have created all of these things in some cases you will find instances so you can detach those instances and there's one very very important video that you have to check out on figma's YouTube channel it's called quick responsive workflows and trust me when I say this we had actually created a video back then this is around like two and a half years ago on this plugin called responsify or no responsify is what we did right now I think it was called responsive plugin and that allowed you to simulate multiple devices like it could actually allow you to have adaptive design inside figma because right now in a figma frame you can do responsiveness very easily but with these plugins you can do adaptiveness that is as you stretch from this Frame to this Frame it would automatically switch from the mobile design to the web design to the tablet design and so forth like crazy powerful stuff so this is in your homework once you do it you will just go crazy now there are uh some specific things that I want to discuss one is that this is a normal frame right but now figma has also introduced this thing called as a section and what is a section I can literally create a boundary like this and let's just say I keep these designs right here okay and you know when you are creating designs in a design team some designs are work in progress while some designs are ready to be developed so if you click on the section they have this small icon right here if you mark this then it'll be ready for depth so when your developers come to this file they will instantly know that in this section are all the final figma files so it's just a way to you know sort of quickly uh do a handoff if you have limited Pages you can organize your files using sections so now you have one more layer of organization you have sections within sections you have frames then within frames you have all of your components right another very important thing that I want to introduce is that when you are designing folks please make a component that looks like this so I call it as an header component where you have a subtext and a headline so basically what I do is anytime I'm creating my files or I'm creating like inspiration I organize all of my research right so if you were to see all of our redesign files all of our redesign videos on YouTube you would realize that an keeps everything very very organized ized so this is also a frame right it has constraints so you can always have it in different colors you know maybe white for research black for prototyping so you can make one component and then you know change the colors one by one just make sure that it is accessible and you know it's just very very helpful so I just wanted to introduce you to this practice I had also written a medium article if you go to medium and type Anmar there I've written an article that says how to organize your figma files using headers I would strongly recommend you to do that and hold space bar for by passing this we've already done that if I were to randomly sort of stretch then the constraints would follow but if I were to hold the command key it would just bypass the constraints also if you're sharing your design files instead of going to the URL you can select any frame and do command L and it will directly come uh to the top URL and then you can just do you know command C though you don't have to go to share and copy link and do all of that just do command L and command C and boom you are done right uh there's also Al the outline mode so if you press command y you will enter an outline mode and then you can see every single frame and auto layout sort of mapped out right because look at the difference if I'm not in my outline mode everything looks like it's in a single layer but once I enter outline mode then you can see that this is an auto layout this is an auto layout you know there's Auto layouts with an auto layouts so you can genuinely see the structure nested framing I've already done I would recommend you to create an annotation card for yourself so what is an annotation card it is essentially like this common card which has a dynamic height so width I keep it static but then have your DP have your name and then what you can do is you can have different colors for this uh one can be for feedback one can be for comments one can be for an important note because I'm not a very big fan of figma comments in general I really like when you know me and my team are brainstorming using these annotation cards and they will really really help you so these are the two components that I would strongly recommend you to make them on your own of course I will be releasing this on the figma community as well so you can always copy the same components but you know you will not really learn uh if you just start copying things blindly now while you are pursuing this figma course you will need a lot of inspiration for UI and web design as you practice so you know I won't waste time going through all of these URLs I've literally just compiled all of my top rated inspiration websites right here uh so you can just take a screenshot and go through them one by one I have also shortlisted four links that you can use to learn figma on your own in case you don't want to wait for our videos and you want to do these upscaling more detailed upscaling more advanced upscaling then these four websites will really really help you shortcuts. design right here is actually not just for figma but they have a list of all the crazy tools design tools in the market and they have sort of you know curated all of these shortcuts one by one so it's crazy the amount of time you can save if you use these resources properly in fact folks if you're here for the first time we have created did so many courses on ux breakdowns on designing your first app on UI redesigns you know basics of ux basics of UI have also created a course on spatial design as well so there's a lot to learn and we have compiled all of this information on this new platform of ours it's called learn .in where I will be releasing information about my meetups my community events are paid cohorts are paid mentorship plans but I personally believe that I want to First sort of set the base for beginners who don't have that much of spending capacity see I won't say that I'm some sort of a saint that doesn't want to make money and doesn't want to sell courses I want to do that it's just that when I see so many students struggling with just Basics I I've sort of realize that there's a lot of Basics to be taught for free so I would recommend you folks to you know learn these Basics from free learn uux doin has a complete road map for you know planning your ux design career from 0 to 100 uh we have a very important video on our YouTube channel called the road map video 2023 road map for a ux design career apart from our figma course we also have a 15 episode course on ux design which is foundations of ux design because right now you're learning the tool but if you want to learn the subject then you should check out the 15 episode course that we have in both Hindi and in English and all of the resources that you see will be in the description and trust me folks just to learn figma and ux you need at least six to eight months so please don't expect Miracles out of this I hope that you saw the first episode as well please make sure that you're consistent and if you feel that you've already done figma and all of your basics of ux and you want to learn case studies and you want to you know start applying for companies then we have made two very very valuable videos on writing your ux case studies these are two videos highly detailed I'm sure you will learn a lot now before we end this video it is very very important that you know your homework for the next 5 days and I will be waiting for your homework homework I will be waiting for your stories on LinkedIn post to see how many people are actually documenting their learnings first of all let me know in the comment section what I should cover next by the way let me just show you the syllabus I will be covering Styles and libraries in the next video components is in the fourth at any point if you want me to cover anything throughout the course just let me know and if there was anything that you feel wasn't covered in frames and auto layouts uh you can still mention it in the comment section and I will make sure that I cover it in the entirety of the course let me know if you want me to create more such in detail videos because to be honest uh my entire throat is so tired of talking uh I actually record videos of like 2 hours or so and we sort of edit it down to make it very crisp so it is so much of effort and hard work folks that it's just it gets too overwhelming at times but I know that students really really need this so I would really appreciate if you would just comment your feedback because when you comment YouTube gets to know that this content is working so make make sure you like this video make sure you subscribe hit the Bell icon and share it amongst your design communities and friends and please make detailed notes on notion if you don't document your learnings you will forget it please make sure you watch the quick responsive workflows video that I had recommended that video is a game changer you will go crazy when you see that 5 minute video go through at least three UI resources and try to recreate something I think now you have some understanding of you know figma in general and you would have obviously been upskilling yourself so just explore any three of these and I'm telling you you will find a lot of inspiration and document your learnings on LinkedIn and tag me I would love to see your notes I would love to see that you guys are actually making use of these homeworks and yes coming back to our syllabus we are done with the first two lectures and in lecture number three we will cover Styles and libraries which includes your color styles your type Styles uh declaring libraries so libraries are not available in the free plan so you will need the pro plan for this and if you want to get more information you can always check out learn .in I hope this lecture made sense I know I have covered a lot of things in one single video but it's very very important to you know keep these videos very very dense uh this entire course is for really really uh serious Learners uh I'm pretty sure there's a lot to learn within Auto layout because we haven't really covered detailed use cases of Auto layouts right so that is something that I'm planning to cover in the components video but again I would really really recommend if you can add in the comments about uh specific stuff that you would want me to cover because I really want to make sure that this one single series of 10 lectures becomes the top tier of figma education on the internet like I want this course to be absolutely Timeless and it is not possible until unless I get your honest feedback and looking forward to your stories I always love when you guys put in those stories and you know you tag me and I can see your notes it's very very fulfilling for me to see that so many students are learning figma and a lot of of exciting videos are in the pipeline folks I am very excited about it if you are into video editing or into Instagram script writing you can always email me or work on admin thea.com we're looking to expand our team so if you're in the content creation world and if you have really really solid experience as a designer or an editor I would love to see your work and yes with that being said I hope that you're taking care of your mind and body this is your those an mea signing out if you like this video make sure you click on like and hit the Subscribe button I regularly upload videos on ux design marketing and storytelling