Figma for Education: Learning Auto layout

we're gonna hold off just a few minutes as you all join but I do want you all to uh use the Q a button when you have questions make sure that you set your chat to everyone and remember that by joining this live stream and by interacting on the chat that you are abiding by our code of conduct so in some be console one another and please you know refrain from over sharing some of those uh LinkedIn links so please do not share any links in the chat just communicate and share with one another so as you all are joining let us know where you're coming in from I'm gonna open up my chat right now I myself am coming in from Rochester New York the Great Lake Region of the US uh so we have a lot of folks here I love seeing this chat go on we got Australia we got Zurich we got Toronto we got New York Israel Denmark Spain gone oh man we have so many of you joining us today yeah it's a pleasure to have you my name is Mickey I'm going to be your host today as we go through the figma for education learning Auto layout today's session is going to be a primer on auto layout mostly for beginners but there's gonna be some tips and tricks in there that everyone can benefit from so in just a few minutes we're gonna get started so so great to see y'all it's okay you know it happens sometimes but let us know where you're joining in from once again make sure you set your chat to everybody if you have questions during the session today we will be answering questions after the presentation make sure you use that q a button make sure that when you're chatting you said it so everyone could so everyone can see what it is that you're saying and once again you know just be kind and you know don't share a lot of extraneous links in the chat and we'll be good uh so as you all are hopping in uh Alex on my team is gonna be sharing bring out a link so we're going to be working with this file so the file that I am working on today where we're going to be talking about Auto layout we're going to be going through all things Auto layout this whole deck that we have here is already located on the figma.com education Community page so if you go to figma.com education you're going to be able to duplicate this figma for edu learning Auto layout file so this is the file that we're going to be working from today you can go here you can get a copy I can actually see y'all duplicating this live is about 64 65 66 of y'all duplicating that right now so this is the file that we're going to be working with today uh this is a community file and it draws largely upon the uh Auto layout playground file that already exists in community this was a file that I had the app opportunity to work on so it's a little close to my heart there so uh thank you all from joining we got people from Argentina what else do we have we got Brooklyn we got Indiana we got Brazil we got Portugal in the house we got South Africa house thank you all for taking the time to to join us as we are learning together so once again my name is Miggy this is figma for edu learning Auto layout February 2023 okay so uh I believe it is about some we can get started let me introduce uh so myself my name is Miggy I'm a designer advocate for Education here at figma I'm joined by Alex and Lauren uh both uh uh on the education scene here at figma I can be reached at McGee figma.com my Twitter handle is at Miggy on Instagram on instamiggy on Tick Tock Professor figma so here let me just take a little actual photo booth photos so you know that I am not AI generated there we go so this is using the photo booth widget in figma and just a little fun to do that there so a quick reminder that figma and fig Jam are free for students and Educators uh you get the full Suite of professional plan features free as long as you are a student or an educator so there's a few steps in that process you're going to sign up for figma you're going to verify your education status you can verify your education status at figma.com education there you can get verified you'll be asked some basic questions like what school are you attending or teaching at and how you will primarily be using figma once you do so you can create an education team you can check out our help docs on how to create an education team but once you're verified you have to create an education team your starter teams won't automatically be carried over and then you can head on over to figma.com community to use Community templates to either learn new things about figma get templates to learn from and or widgets and plugins to enhance enhance your working experience so once again those three steps sign up get verified and set up your team so I'm gonna cover some very basic Basics here in figma today so the first thing I'm going to show you up here this is the figma interface that I'm presenting from so I can hide that UI I can show it there I am in figma right now this top area right here is the figma toolbar you can click on that figma logo to dig into many more of those features that you have available this first one that I'm going to show you the quick actions menu is a very impactful feature in that it will give you the opportunity to search for other things in figma and help you learn shortcuts as you begin your experience in figma so here what I'm going to do is trigger that quick actions menu and use it to pull up the keyboard shortcuts panel so I'm going to hit command P control P if you're on Windows and it's also command forward slash or control forward slash the control P is for those of you that have a different keyboard layout and might not be able to access that forward slash so I'm just going to go ahead and do that now let's hit command p and you'll see this menu pop up this menu allows you to type in commands that you want to access in figma especially if you can't remember the tons of keyboard shortcuts available so what I'm going to do is type in here keyboard shortcuts as soon as I type in the letters k-e-y I'm going to see that keyboard shortcuts Pane and when I press enter I can now look through all of these keyboard shortcuts available to me this was one of the ways that I was able to learn figma when I was first teaching at the Rochester Institute of Technology and getting started up with figma I wanted to see what tools I had available to me and how I can navigate that space and it really helped me understand what kind of features that were in figma one other thing for those of you joining us internationally if you go to layout you can come over here and actually swap the keyboard layout for your keyboard shortcuts so let's say if you have a Spanish style keyboard then the keyboard shortcuts will be remapped to associate best with your keyboard so I'm glad for those of you that are joining us that may look at the keyboard shortcuts panel say hey this isn't for me if you go to layout you can make it better represent for yourself so I'm just going to go ahead and set that back to um let's see where's English I already lost track of my own there we go uh us QWERTY that's me okay so I'm going to close that out and so once again the keyboard keyboard shortcuts pane is going to give you a lot of options a few other things here in that first page there are some follow-up resources if you haven't used auto layout before ever tried it out there are some YouTube videos that you can use in supplemental to this live stream that can also help you get started on auto layout all right cool so if you're just joining us make sure you check the chat uh Alex is linking a link to the file that we are currently in uh you can duplicate this file and follow along on your own and or you could just watch the presentation for what it is feel free to ask questions in the Q a panel um and make sure you're sending your chat to everyone so we're going to begin now Auto layout is basically frames in figma that give you the ability to Auto organize your content it's really great for lists cards like if you're designing a website or a mobile experience presentations and making tables what Auto layout is is basically just a frame that helps you organize things now I would love for you to begin to understand why Auto layout is helpful by explaining the problem first so here I have a card that you might see in something like Instagram so the way that this is designed there might be a card above it below it and you're going to have some text there as you're designing this if I was to copy and paste and add more text this text kind of moves out of that frame right if I didn't clip my frame and and nothing else moves with it if I decided that I wanted to let's say expand the size of this image everything overlaps so as a designer I would need to go in here and manually move everything down right and that can get painful over time every time you want to make a little tweak and you're trying to make these adjustments right without Auto layout it's very difficult to do so basically what we're trying to do here is think of ways so you can be more effective in a workflow so what Auto layout does is in that case it's going to give you the ability to structure that content in a way that can expand and move the way that you would expect it to that is very similar to how it may be developed for the web so here if I show you that same card but with auto layout applied this card is now going to be responsive I can resize that card and the content is going to move with it so that's going to save me a lot of time as I'm designing things out and there's two ways that auto layout is going to do this and we're going to discuss these two ways but I like thinking of it as these two main ways either the content is going to respond the container is going to respond to the content size so here as I add more content right the container itself gets bigger right so the container responds to the content size or the content can respond to the container size so if the container gets smaller or moves left and right the constant kind of adjusts to it so in this case as I add more content it gets larger and here as I increase the size of the container everything else is attempting to fill that space so with that in mind and thinking about how this might be helpful let's start off with the very basic basics so here what I'm going to do is I'm going to use these shortcuts here to walk you through the creation of a very simple Auto layout frame so up here this is just a representation of what your frames may look like in the layers panel on the left so if I look over here on the left when I select this button you'll see that there's this little icon here this is the auto layout icon and it's representing the everything inside of this Auto layout frame is being Auto aligned or is being adjusted and it's using the size and the scope of its contents to scale it this Frame here is just a generic frame that isn't doing that so this Frame is just basically resizing itself and only using what is known as constraints but we're not really going to get into constraints just yet so what we want to do is we want to create a button that grows with size so if I was to change this button you know hello I am a button what's taking place here is that this Auto layout frame is hugging its contents so here's a button and here is a text box inside of that and as this text box gets bigger the surrounding frame grows to respond to those contents okay so here if I was to type that same thing this text grows and that frame that's outside of it does nothing so what we're going to do is we're going to make these two become an auto layout frame so what I can do let's call this let's say button right here I'm just going to type that text in here I'm going to select this Frame and that text and I'm going to press shift a and by pressing shift a right it's going to convert or create an auto layout frame so now you'll see here that I have a button and it has Auto layout properties so if I hit undo you I click on this Frame you'll notice over here on the right says Auto layout there's a little plus when I click on that plus it's then going to create this Auto layout panel and this Auto layout panel is going to have a bunch of options so I can pad this and I can shape it and what's cool about this is that as I add that text I can expand this so hello I am a button and I saw somebody there in the comments said that they didn't know how to remove auto layout with a shortcut so let's say yeah I if I change my mind and I don't want this to be an auto layout frame I can remove auto layout using option shift a with that frame selected right so I can press option shift a and now it removes Auto layout so once again when you look at your layers panel this will be the difference between a regular frame and an auto layout frame okay and so here quickly I'm going to make a simple letter avatar from scratch so y'all can see how this works so I'm going to do three things I'm going to draw a rectangle and I'm going to press the T key and draw on a letter A so here we go I have a text object and I have a rectangle here now I'm going to draw a circle and over here I'm going to draw a rectangle but I'm going to round out those Corners so it makes it a circle so one thing about Auto layout in figma is that even if you just draw a rectangle and try to create auto layout from those two objects if I press shift a Big Mo will try to do its best to understand what you're trying to do and it will make this an auto layout object that letter a is going to be censored and we're going to have here some padding values to adjust it so if I have that same letter a and I drag it over here into this circle let's move it on top of that Circle and if I try to shift a you'll see that what it's instead trying to do is try to make it two objects in succession right so it's not exactly what we want to do Sigma is not going to recognize that Circle as a frame so here this is our rectangle that we rounded off the corners when I press shift a it will now treat that as an auto layout so as I begin to type and expand that frame once again some of the properties that you can change are going to be over here located in that auto layout panel and I'm going to show you throughout this presentation how best to work with that auto layout panel but here we're going to start focusing on the padding as well as the spacing and what that means so if you have more than one element so right now this here these are all auto layout buttons so this is button one let's call this button two and let's call this button three so if I take these three objects each one of them is an auto layout frame but let's say I now want to Nest them together right I want to create a navigation let's say I want to create site navigation so I can select all three of those and press shift a and that will put them into an auto layout frame I will show you that one more time so I have object one I have object two I have object three let's select them all and press shift a now you'll notice based off of what figma thinks it's trying to do it will either make them all in one horizontal line right let me undo and if it thinks I'm trying to make them vertical when I press shift a it will align them all vertically okay so what uh figma's trying to do is do its best to understand what you're trying to accomplish so let's make this one horizontal let's select them all press shift a and I'm going to select all these three over here and press shift a now when I look over here at the right at my auto layout panel I can change the direction so I can set this to a vertical direction of buttons or I can set this to a horizontal Direction of buttons likewise I can do the same here I can make that horizontal or I can make that vertical another thing that I can begin to modify with my my frame here and it's really good if you come over here and name these things I have it named this so let's just call this you know let's say button navigation navigation and let's name this one to you know uh item navigation so you'll notice that these are arranged and you'll notice that these icons over here look a little bit different and that's because the auto layout icon will represent the way that your layout is set up so you'll notice that these are all aligned going horizontally aligned to the bottom and these are all aligned centered vertically going vertically okay so it's important to note those differences right there okay so I got that little screenshot okay so a few other things here when you have these objects and they're arranged in this way I can select one of those buttons right I can double click so I click and I click again and I select an object in there and now I can rearrange how they're in there so I can move button one all the way to the right I can move it to the left and I'm doing so with my keyboard shortcuts just my left arrow and my right arrow so I can select button two and I can move that left and right so if I'm working with a lot of content let's say here I want to make a mobile layout and I have these three cards I can select them I can press shift a I can adjust the spacing between them now this spacing value when I hover over you can actually see and adjust it right on the canvas if I hold down the shift key it will actually go by a larger nudge value so right here it's going by values of eight because I I have my nudge value set to 8. so what's cool about this is once again if I need to reorder this I can select that middle item and I can move it up or I can move it down right I can select this item I can move it up and I can move it down and once again one of the True Values of this is that if I need to make adjustments to my content here like if I was to just copy and paste this text right I can make adjustments and I can scale this right and I can make those adjustments really easily and you'll notice that everything else will follow in suit because it's all fitting within that alignment right so it's basically saying I'm aligning these three items vertically and I'm spacing in between them so whatever the height is of that middle object it's going to push out the objects on either side of it okay so once again just a recap spacing between items if I have one two let me make these a little bit darker so it's easier for you to see uh say let's make them blue so if I have one two three items I select them I press shift a and I hover over I can change that spacing right there on the canvas so that spacing value right there I can also click on it and I could type the value right there on the canvas the spacing between my items so I could set that as a nice even value okay so even here we can adjust those spacing values to be negative so I can have a bunch of objects in an auto layout frame and say hey I would actually prefer that they stack on top of each other so here I can adjust that value now you might know notice that these are scaling here from the center uh what that is is because this Frame is inside of this Frame here it's using its constraints so you'll see these little blue dotted lines right and it's basically saying from the center if I have that instead from the left and the Bottom now when I adjust those values they're going to adjust to the left if I select that object again and I change those constraints let me just highlight that screenshot in the middle so you know what it is that I'm talking about if I highlight those constraints instead to be from the right and the Bottom now you'll see when I adjust my spacing it's adjusting from the right so those constraints can only be kind of given to that object as long as it's in a frame so right now it's in this Frame so I'm able to adjust those values and in this case I wanted it you know centered out perfectly right so I want this centered so now they're dragging from that Center Point okay cool so I see a question can I still adjust spacing independently or they always be together so right now spacing is all of the objects in the auto layout frame if you want to have two objects space together right I can come in here and I can select both of these objects in my frame and I can have them be in their own Auto layout so I can press shift a and then this way they will have their own spacing and they'll have their own spacing right there right so then these are are kind of spaced but then as a whole right these objects are spaced so if you want you can put objects together to have their own independent spacing but what you will have independent control over is going to be padding right so with padding what you're going to be able to do is actually control the outside of the frame and you can do so independently so spacing is going to be unified between all of the objects in an auto layout frame but padding is going to be on that outset so here let's pad some objects so right here I have an auto layout frame and you'll notice these padding values are right here you have your horizontal padding and you have your vertical padding so here if I select I'm adjusting the padding on the outside that is horizontal and I have my vertical padding that goes right here all of these layouts are currently if you go to figma.com slash at education you can download it Alex is also sharing the file so yes you have access right now you can go ahead you could grab this file so here with this selected you can see I can expand that outside and there and there's a few cool ways to kind of adjust these values if I want to I can select this object right here and just control that bottom padding so I'm adjusting that bottom padding I can adjust the top padding I could adjust the left padding and I could adjust that right padding and you'll see how those values surface over here in the panel if you click on Independent paddings then you will get each value as its own field and there's other ways too that you can adjust this I can command click or control click on Windows over here to basically edit all of those values at once so I can have them grow in and out so there's actually a lot of ways that you can interact with this panel that work for you so let's say if I wanted all of my paddings to be the same I could just type in 80 and now you can see 80 on the top right bottom left so someone's asking they don't understand how padding works I'll I'll demonstrate that for you I'll actually go back just a little bit the way that padding works is let's say if you're making this like little button or this icon and you need to uh give that more Breathing Room more space I can add in like a padding value of 80 right or I can bring that down uh so let's say I can add in a pattern value of 20. so the padding is that outside it's the the space that's around that frame and if you're familiar with web development and if you're familiar with the Box model what that padding is doing is just adding that space around that object so if you're working with uh let's take a look at one of these cards that I have here I'm going to move this over to the padding section if I want to adjust that padding I can command click right here and put in like a value of 80 and in this case it pushes the content in but it gives me more padding value around that card cool so once again if you want to adjust on the canvas you can hold down the ALT key and it'll control both the top and bottom padding and it'll control the left and right padding or if you hold alts and shift it'll control them all together so there's a number of different ways that you can adjust those padding values okay so right now I just have a very simple we're gonna from scratch make a bulleted list I feel that this was possibly the first thing that I made with auto layout and it's really going to help you understand some of these Concepts in a way that um will really work for you so we're gonna make a simple custom bulleted list using some of the concepts that we've already discussed thus far so I'm going to begin by pressing the o key I'm going to draw out a simple shape so let's make this shape be about a value of 48 by 48. I'll show you that one more time if you don't know the shortcut key or the o key isn't working for you all of the shapes can actually be found up here so let's say if you wanted to create a fun polygon shape to serve as your bullet I can easily do that let's say I want a pentagon to be my bullet let's go ahead and do that we're all about having fun here so let's make a fun little Pentagon and that's going to be my bullet for today now what I'm going to do is add some text to go along with this to be in the bulleted list so I'm just going to call this bullet bullets list item one okay and what I'm going to do let's make this just a little bit smaller and move that there I'm going to select both of these objects all right so I'm going to select both of these objects and press shift a right and the one thing that I want you to recognize too I I put this here as a reminder for myself when you're working with text and figma or when you're working with text layout in general you have to be very intentional about how that text is being uh how that text box behaves so right now when I select this text box right here and I look over here to the right there's actually three different modes that this text box can be so Auto width will have this text box just go in perpetuity in a constant wide space so it won't carry over and fit a a predefined width right so that's one way you can have your bullet list item but what I want to do is I want to select this bullet list item and I want this text to grow out vertically once it hits that predefined width so what I'm going to do here I'm going to select this and I am going to choose Auto height so now when I set auto height whenever I fill in my text here let's say this you know this is my uh bullet list item you'll see that as I type in text it's fitting to that exact width and that's okay that's what I want that's how I want it to behave so we have our Auto layout object we have our single bullet list item right it's looking good to go and now what I'm going to do is I want to make this reusable so I'm going to create this as a component so up here you'll see with this Auto layout frame selected these four diamonds and what that's going to do is make it into a component if you're wondering what a component is it's basically an element that you want to reuse again and again so I've already introduced you to these cards that I've been using those are component instances they are the duplicates instances of those components so basically if I make any changes here you know I say bullets list item all of these will uh uh will update oh I see a lot of talk about undo uh command Z or control Z is going to be your undo so if you need to undo something just hit command Z or control Z if you're on Windows there we go Okay cool so here we now have these three bullet list items and what I'm gonna do is Select them all I'm going to select them all and then I'm going to press shift a and what that just did was it wrapped another Auto layout object around that so once again I can adjust my my padding in between uh I'm sorry my spacing in between and I can adjust those out and I can now replace that content so this is you know item one this is item two and this is item three and if I want to I can move that up and down and I can change other values around this I already see some people talking about duplicating if you want to duplicate and you're using Auto layout the best way to do so is with command D or Ctrl D on windows so if I hit command D it'll start adding items to my list and you will see that the list will continue to grow and populate with those items so I can select that first item and I can hit command D and it will populate and expand with those items so once again this is my bullet list item I can go in here and I can make like some adjustments on this and because these are all instances of that component they're all going to follow suit except for where we've overridden them and that's going to be with the text so how do we combine both horizontally organized objects in Auto layout um we already are so this list item has two horizontally it's it's basically horizontally arranged objects right so that are now vertically arranged so you're going to have one set that is horizontal right and then you're going to have another set and it's just a row it's just a column so you're going to have a row of items As One auto layout and then you're gonna have a column of those rows so once again we covered the breaking the of the auto layout content I'll show you that once more I'm going to copy these shortcuts and I will bring it over here so to break your auto layout content let's say you want to break out of this right you can remove auto layout right so uh alt shift a right and then that will take it down to a frame right and then if you want to break out of that one more time you can hit command shift G and then that will break it out of that frame uh you can also just hit command shift G to go straight back into just those objects that will undo it and once again if you're on Windows it's going to be Ctrl shift G so I'll show you that one more time all of these objects are individual Auto layout rows I can select them press shift a right they're now all spaced together if if I want to break out of that I can hit uh commit con command shift G control shift G if you're on Windows and they're now all individual objects cool so hopefully this is helpful we're going to move on to our next concept which is resizing so right now we showed you how to make an auto layout object shift a is that shortcut an auto layout frame is just that it's a frame and it's going to take objects and either arrange them as a column or a row so you're going to have a column of objects or you can have a row of objects you can have a row of columns or you can have a column of rows as your layouts become a little bit more complex but now we're going to start talking about resizing so we're going to be thinking about how objects are going to resize with auto layout and one of the main purposes of that is so you can now start thinking about responsive content and that's going to be content that grows you know depending on its environment or its environment begins to change itself so right now this is a series of Auto layout objects let me take I'm going to just copy this from up above so you can see this like left and right basically what's taking place here is that you have here an object you have here an auto layout row and then you have a text field right and so all of these work inside of this Auto layout frame to expand or not you'll notice that I started to fill this out and you'll see that it's not following and that has to do with setting the resize behaviors there are three types of resize behaviors and we're going to cover all of them in great detail so you will just boom you're like I got this there's hug contents so that's when you are looking and resizing to the contents that you have if you think about the button growing with the text that frame is set to hug contents and it's like getting a little bit of a hug fixed is a fixed size so that's a size that you determine you set the width and the height to be explicitly that size when something is set to fixed right it's defined it's the defining frame it's the defining values that you're using and then fill container fill container will grow to expand that space so right here this is using a combination of them all and we're going to cover those in just a moment here but the one thing that I'll show you to fix this right you see this is a fixed height and because this is a fixed height it's not growing or scaling the text so I can change this over here from fixed height to hug contents and what that's doing is it's looking inside and saying oh hey there's this much content I should be this tall so we have these objects expanding that that size okay so these are the use cases right right here we have container response to the content size so the container is the auto layout frame so the frame that is creating this card its height is currently set to hug contents its width is currently set to a fixed width so that means that this card I am adjusting the width and the constants inside expand to fill it however the height is different the more that goes inside of here right I just added a whole other paragraph and it's going to grow to fill right I can click on this image and I can make that larger and that means that this container at least its height is expanding to fill the three objects that are inside of it so there's just an image or like a placeholder image it's just a rectangle you know there's this text that is set with auto height so that means if I type in more text this is more text here as that text grows it impacts the other objects so this is just one two three so this is the same thing as just one two three I select them I press shift a let's add in a fill background color so you can see that and let's add some padding because I know some of you are wondering why do we have padding and so you can see the outside of all those objects give them some breathing room and here right as I expand this rectangle it's making the whole thing grow usually when I'm making Auto layout objects I like to make little wireframes so I understand how I want something to behave typically this is going to be the case that you're going to be building for you'll note too that this Auto layout frame is set to hug both horizontally and vertically and because it's horizontally hugging what I can do is click on that one in the inside and just make that grow okay so right now this is a container that's going to grow to fit the objects that are inside I'm also going to take a quick moment to note over here the sensor uh the alignment panel the alignment panel shows you how objects are going to be aligned within there so they're either left aligned or they're right aligned and we'll show you how that's going to come into play as you move on but once again just having these little wireframed examples of how you want your content to to grow to to respond helps you understand how you're going to construct it uh fairly easily so once again this content is going to grow this Frame is going to grow with this content now there's going to be instances where you want the inside content to respond to the container size so here as I grow this container right you'll see that that the text is either hiding and we have little ellipses here to show that there's more text and you'll see that is filling the space and basically what's taking place here let's draw out those three rectangles again and create our own little Auto layout activity over here I'm going to select those press shift a let's give it a fill background of blue so we can see it and uh let's add in some padding so you can see that so here we go one two three objects and what I'm going to do is I'm going to select those objects and right now you see that they're set to fixed height and width If instead I want them to fill the container up so hug contents looks at the insides and it's the nested items within and it snaps to it here where the contents and we're looking at the parent frame we are the nested objects and we're looking above and we want to fill that space so I'm going to set that to fill and that's a fill and what that's going to do is as I res resize this container those objects inside they're going to grow to fill that space so each one of these is now growing to fill that space so here when I select this you'll see that they're expanding both horizontally and vertically and this right here you'll notice that this text is actually going to an ellipsis so this text field is using a very special behavior and what that special behavior is is uh basically truncating the text if there's not enough space for it so when you select that text field what you're going to do is hold down the ALT key or the option key and it will change that text to truncate text and that's uh uh I'll have that again in a later slide so just to to review hug contents it looks at the items inside of the auto layout frame and it's trying to to snap down to them it'll grow and shrink down with the items that are inside fixed sizes are sizes that you set specifically so you determine like I want this width and then items that are on the inside can then fill so that fit that size so fixed size you're setting that value so if I was to set this object you see those numbers underneath that says that those are fixed if I put this into an auto layout frame you'll see that this Frame is set to hug in both directions once I resize that you will then see a fixed value so when you select an object the object is going to tell you what is it relying on a fixed size will show its actual numbers but a hugged or a fill will see hugger fill so like let's say I now set this to fill container you'll see that it's horizontal Dimension is set to fill while it's a vertical Dimension is set to uh fixed okay and likewise fill container when you have an auto layout frame when you set an object to fill a container it will try to grow to fill that space okay so here we go if I was to draw these three items I put them inside of an auto layout frame I select one two three I press shift a let's give ourselves some padding there let's take a look at what that padding looks like the second that I go from hug right so it's hug hug the second that I expand that size that horizontal value is now fixed and now these three items inside can now be set to fill container so they will now grow to fill that fixed space okay all right cool and someone mentioned something about text so yeah if I have text as long as that text is set uh I can option click to truncate it so if that text is filling the container when I bring that down in size that text field if it sets a truncate text if it's not set you'll see the text flow out but if you hold down the option key and click it it will then truncate so likewise here I have items that are nested inside of an auto layout frame so as I'm expanding this size each of these are set to fill in both directions if I change the vertical resizing instead the hug contents it will hug all of the pieces that are inside if I set that to fill it will grow to fill as well as its own internal pieces that are inside of there so just a couple quick resizing shortcuts this is an auto layout frame and it has these objects inside let's say I want this Frame to hug its contents I can double click the uh the edge double click horizontal there we go I double click the edge and I double click the edge I'll show you that one more time so here if I want one of the dimensions to hug the content that's inside here I just double click and I double click and once again let me expand that out so this Frame is set to fixed contents so it's fixed and fixed but now I want it to hug so I just double click and I double click and it's now hugging the contents here we have these three objects and let's say I want them to fill this space so here's our Auto layout frame our Auto layout frame is set to a fixed width value and it's hugging vertically so what I can do is I can come in here and I can option or ALT key double click and it will now fill that space I'm also going to take this opportunity to show you one more behavior that we're going to come across in the next section so now when I select these items you'll notice the alignment panel if I adjust the alignment panel I can determine how those elements inside of those buttons are arranged right so if I choose the bottom sensor alignment the arrows and everything that's not where we want them to be if I choose sensor alignment okay that's good and close but let's say I want them to expand to either side so with this alignment button selected I'm going to press the X key and the X key is changing what is known as the spacing mode right so spacing mode we're spaced between so what that's doing when I press that X key with this window it's spacing everything out so that makes this much easier to be responsive so we have these three items in this list and we have this spacing that exists between them and what that value is is an auto value so that means it's basically pushing them out as much as they can be so now when I hit command D oops if I select this I hit command D I can add a another element if I if I screw something up and I and I scale this down and I want this to fill once again option double click it'll fill and if I need to adjust that at all I press the X key and that will will grow and move all right next let's talk about the alignment spacing we were just talking about the alignment panel let's get into it so these are the items in an auto layout frame right and you see how they're they're basically moving about and once again our favorite X key which shoots them in in either direction basically Auto filling the space in between right even when I click there and the spacing you'll see that that value sets Auto so I'm going to press the X key one more time I can change this to being a horizontal direction right and we can see how these items are existing within that auto layout frame I can press the X key to expand them out but we also have some fun shortcut keys that you can adjust so if you click the alignment tool and use your arrow keys right so up and down and X you can adjust those elements I could press the right key the left key X right key and there's also wasd we'll put them onto those corners so up down left right there's also some hidden gems there if you want to have text Baseline alignment so this is yes someone was mentioning flexbox uh figma is very much in alignment with flexbox still adding new properties all the time but one thing that we do have is text Baseline alignment and what this means is that if you have a bunch of objects here and you want them to align to the Baseline of the text it's this line that's right here you can go in here and you can press the letter b and what that's going to do is it's going to align the text items so you'll notice that the alignment widget kind of changes and this centers the the Baseline alignment and then what I can do here is I can remove that and if this is a little bit wider when you press the b key you can choose it to be left aligned or right aligned right and then I can remove that text alignment so right now everything is vertically centered but let's say if I want them to have the same Baseline I just drew in a little Baseline there I can select that and press B and you'll see that now everything is along that Baseline the reason you might want to have that is you have a bunch of titles that you want to all be in alignment together so if you have cards that have like a header title they might be of different sizes that's going to get that aligned together the red line the way that I pulled that up I press shift R shows shift R is going to bring up the rulers and then I can draw that in and then it's going to be there cool thing about the ruler is they can either be Global to your document or they could be local to a frame and as you adjust them you'll see the values over here will change to help you get a sense of where that value is so when I'm hovering over this sensor line here you'll see it's 168 when I go out it's a much higher value because it's a much larger canvas and I can just select it and press delete and have that code so once again press shift R and you draw in a rule helps me draw a little rule alignments and then press shift R again it hides away shift R comes back shift R hides away so canvas stacking canvas stacking as well what's great is it let's say you have a whole bunch of objects let me throw a big stroke on this one let me uh let's make this a circle and let's have a few of them one two three four five uh let's make this red so we can see that what I can do is when I make them into an auto layout I'm going to select these objects press shift a they're in an auto layout let's say they're overlapping one another so let's say you're creating a bunch of avatars that are that are showing everybody's faces one after the other uh so here we go I'll take a I'll make myself an an avatar and I'm going to grab Alex's Avatar I'm just pasting these images into those shapes there you go so I got me Alex and Lauren let's say we want to be at the front of this list if you come over here to the Advanced Auto layout there is this canvas stacking option where you can set the First on top and it'll rearrange how that canvas how those are going to be stacked so I pasted the images with command V so they were in my um uh clipboard so if I was to let's say you want to paste this image onto something else you can come over here you can select the fill of that image command C control C if you're on Windows select another object and then paste with command V or control V on windows so images are nothing more than fills on objects so if I was to create a circle here and hit paste right then my uh my photo is just a fill on this shape and we'll grow with it uh so how do you make those little boxes up here are all of the different shapes so if you want to draw a rectangle if you want to draw a polygon if you want to draw a star all of those objects are there and once again like if you want to place images in here I can hit command P that's the quick menu type in the word Place go to place image and I can pull a bunch of images from here and I can just click where I want those images to go so once again images uh oh yeah the dark border so one other fun shortcut to show you all today I can select this Frame and when I press return it will select all of the nested Auto layout objects so once again I select this Frame and then I press return it selects all of those individual Auto layout objects inside and now I can reduce that abysmal stroke that I just created so I can select the auto layout frame I can expand those out and here on the canvas you want to make sure that you name things appropriately so this way you don't get these wild frame numbers so let's just say like avatar row there you go so um return is return to backspace and keyboard uh no just return or enter it's the enter key okay thank you Alex so Alex just let me know via cursor chat you know you can hit the forward slash key or right click and say cursor chat then I got 15 minutes left all right so um canvas stacking oh 15 minutes canvas stacking right here uh once again just there uh once again you pull up the advanced panel and you could put the First on top text truncation we already covered this uh so basically here this is the shortcut key that you need to know click on the text field that you want to truncate come over here to the fixed size and hold down either the option key or the ALT key and then that will truncate the text so then this way as this card resizes the text will will get a little bit hidden with the ellipses now another place if you forget that you can always click in here into the uh um sorry you can always click into the uh Auto layout let me see text I always forget where it is now here we go yeah resize it here truncate text will always be the fourth option under the type panel so here we go it's either there or the fourth option in the type panel let's pull that up resizing truncate text all right so um last thing I'm going to cover here is this absolute positioning I'm going to have some questions that that y'all have been asking and I will answer those absolute position though is absolutely essential when working with auto layout and I'm going to show you why let's say I have a bunch of objects in my my layout right so I have losing my voice there a little bit so let's say I have one object two object three object right and I press shift a I make it into an auto layout now let's say I have like a a notification icon or something that's going to stick outside of the auto layout but I still want it to be part of that auto layout so I go to drop this in and it's not where I want it to be I'm like wait no I want it to be in the corner I want it right there and I go to move it and I can't now you can use uh absolute positioning which is taken directly from uh front Ed development code it's taken from CSS we can select that object and if you come up here you will see this absolute position option right it's going to be these little frames that little plus size right there I'm going to take a screen capture of it there it is that's absolute position so when I turn that on you will see that it's no longer part of the flow I can move it where I want to go it's still part of this whole frame but I choose where I want it to reside so even as I move things around it always keeps its location so this Auto position item is really important now let's say if it's if I want it to be be exist at the bottom so I can select that object let's see uh and I'm going to move it uh let's make sure that's absolute positioned and I want it to be at the bottom of everything right so now if I'm adding new stuff you'll notice it doesn't move with everything else so if I select it right and this is where constraints come into play again I'm going to choose that this object has sensor and bottom constraints so I want it to exist in the sensor and the bottom and so now when I hit duplicate right it's always gonna it's always gonna follow the bottom of my container so constraints will show up only when an object is inside of a frame so Sarah just asked I don't always see constraints how do you get that option the constraints will show up when an object enters a frame so an auto layout is a frame and this object is inside of that frame so that constraint is telling that object how to behave inside of that frame so if I were to press the F key and draw a frame here and uh let's say I just bring this object into this Frame when I resize that frame I want this object to follow the the right and the bottom so when I select it you see it says let's say right and bottom so now when I resize this it's always following the right and the bottom if I say instead you know let's follow you know the left and bottom say left and bottom as I resize this it's always going to follow the left and the bottom so constraints will only show up the second I take this out of that frame you're not going to see constraints anymore once I put it back inside of the frame it has them okay cool and uh I would say like lastly I'll just cover this one section right here uh these objects um as I am adjusting this Auto layout frame here so if I adjust these values press the X key and reduce the spacing right each of these have their own Auto layout frame and their own absolute positions to the top right so if you want to have you'll notice in here the icon the other thing that I wanted to highlight is that you'll notice that an object in your layers panel is absolutely positioned because it has these little frames around it so here's the auto layout right here is an icon and then this is my absolutely positioned element that I can choose where I want it to to live and move and even as I I scale that right it's going to move and rotate to the uh to that top right side and that's because it's constraints are set to right and top Okay cool so uh that's all that we have for today but I'm gonna answer some questions that we have here how do we set a nudge value this is a fantastic question you set your nudge value if you hit command P or control p on Windows to bring up the quick menu we talked about the quick menu in the introduction I can set type in nudge amount and the nudge amount right here your small nudge I have sets of 0.5 but it can be a value of one so when you move an object with your arrow key up down left right it'll only go by one if you want to move it in a larger value that's your big nudge and that's when you hold down the shift key so if I set my big nudge to be 20 and I draw a rectangle my small nudge will move it by one but then if I hold down the shift key it'll now move by 20. and if I want to change my nudge value command P control p on Windows and I click on nudge amount so type in nudge and I can reset that value back to eight so that was a fantastic question so you can't make an auto layout with anything but a rectangle you can make Auto layouts out of frames so right now if I draw a frame and I draw uh like a circle oops and I draw a circle inside of it I press shift a it's making an auto layout from the frame the thing is is that sometimes people will draw a rectangle and they want to make an auto layout of that rectangle and what figma does is like oh I think I know what you're trying to do so I'm going to make it into a frame for you so I'm going to make it into an auto layout frame so yes you don't even need a frame to make Auto layout it will automatically convert it for you so if I just had a bunch of circles so if I have one Circle two Circle three Circle Four Circle and I want to make them Auto layout I press shift a and now they're all in that auto layout but basically what's taking place here is that you're making that frame now if you want to like let's say if I add in some padding values and I give it a a background color I can round those Corners out so you see here I'm adjusting the round corners so now as I add more of these their radius matches those circles right so that's how you can get this kind of like cool pill looking thing and if I delete something out you see it moves it there from the right so great question um so when I copy a card set constraints disappear constraints will disappear if they're no longer inside of a frame so in order to see the constraints place the object into either a regular frame with the F key or into an auto layout frame with shift a uh so how can I make responsive design product cards with auto layout uh that's a much more uh targeted question I mean there's a lot more here but basically uh if you go in here and let's say let's go to our main component right here's my product card let me bring this down here so I made this component the way that this is constructed you'll see that there's an auto layout and it's vertical there's one two three four but then within here there's other Auto layouts like this is a row right this is three items that are put together this row has another item on this side and there's space between and then this is the last item so what you do is you make a grouping of Auto layout elements that work together in a way that's meaningful and the way to really do that is just to wireframe it and put it together feel free to deconstruct the examples that I have in this document how do you organize your layers the way that I organize my layers normally I do a bit of work first and then what I do is I take a look at my layers I begin to name things and structure them the way that it best fits I try not to create too many frames um but I try not to uh over um and try not to have too many loose items so items that belong together either exist as a component or an auto layout frame as I begin to put those together uh what I would typically do is just try to reconstruct it and think about how you're going to communicate those layers to somebody else that you may be working with so for the time being you know naming is hard right structuring things is hard but it's all about working with people and how they understand and how they work so oftentimes the way I might structure things would be the way that a front-end developer might expect them to to work so then that way we can work in the file and communicate together uh where can I find figma Basics check out youtube.com slash at figma so youtube.com figma uh there's tons of videos that are there that can get you started also check out um the playground files at figma.com figma so the entire Auto layout playground file you can duplicate it there if there are any updates that come to Auto layout they will be made in the playground file so if you're looking uh to to get a little bit better with that also I wanted to highlight in this file there's a bunch of Auto layout shortcuts so if you want to learn Auto layout shortcuts uh this key right here if you're Windows based that's going to be the ALT key and if you see this key the command key that's going to uh sub out with control so if you're ever uh questioning what your keyboard shortcuts are always go command um p and type in keyboard shortcuts and the keyboard shortcuts will be delivered to you on the system the operating system that you're on so if you're opening this up with a Chromebook you will see Chromebook specific shortcuts here catered specifically for you okay we will be sending out a copy of this video within the next a week or so so check your inbox make sure that it doesn't get delivered to spam so once this becomes available we will send this out for your email as long as you've been registered for the event uh so what is the Ford Diamond thing to bind all of them that is a component so a component is that four Diamond icon a component is something that you use to make a reusable element once you make a component they then show up here in the assets panel uh then you can just kind of reuse them at will and you can override those properties so if I have these three components you know if I wanted to change them up I can place images in the mall let's see place an image place an image place an image and I can begin to override that text so components are really important for elements that you're going to reuse so when you start talking about design designers make these components to help build their and design their products faster in teams so then this way we're not guessing you know what is the source of Truth so this is a component the easiest way to build a very simple component let's make a button component right now I'm going to press the T key I'm going to type in the word button let's make that text a little bit larger and then that text field when I press shift a is going to put it into an auto layout frame let's call this our button components right this Auto layout frame let's give it a fill color let's give it that background color there we go and now this button component that we have here we can adjust the padding we can select it we can adjust the corner radius and now we're ready to make this into a component we select it we come up here and now that it's a component you'll see it in our library and I can just drag out a bunch of instances the cool thing about this is if I make any adjustments to this main component with the Four Diamonds then all of its instances will follow suit so if I make the text a little bit bigger those will be bigger so I could say button one and but in two uh whatever it could be click here right and if as I make adjustments to the main component those changes will be reflected in all of those instances and you'll note that the instances have a little Hollow diamond so we have our four filled in diamonds that's the main one and then we have the instance and that is our last question that is that's it for today thank you all so much for joining it's been a pleasure to have you you will receive the recording in about a week or so feel free to check out figma.com education if you are a teacher student and you want to get pro teams for free also check out thefigma.com education we have tons of templates here so if you're looking for fig Jam you want to make a syllabus if you want to see some of the template files from our previous workshops such as prototyping and animation basics give that a shout out uh thank you all thank you Alex thank you Lauren for joining in on the call and being amazing and helping out in the chat um once again thank you all for for spending this time with us around the globe wherever you are you're much appreciated uh and as always you can reach out to education figma.com or find me on these socials take care and have a wonderful day evening or morning

Channel: Figma

Views: 52,673

Keywords: figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, Figma tutorial, tutorial, Auto layout, Figma for edu, education, workshop, livestream, figma livestream, product:figma_design, audience:student, language:english, format:standard, produced_by:figma_for_edu, theme:basics, event:none, series:figma_for_edu, type:feature_tutorial, level:beginner, primary_feature:auto_layout, secondary_feature:

Id: PGYCZbP3xH4

Length: 73min 39sec (4419 seconds)

Published: Fri Feb 24 2023