Figma tutorial for beginners - auto layout & components

this is a tutorial video on figma component and  auto layout this is a simplified wireframe for   a post in the social media on the top we have  a square that represents the image of the post   and at the bottom we have the username and the  caption for the post there are many posts in a   social media app so this is what many designers  do to create that visualization for multiple posts   that is group this entire section then copy the  group paste the group multiple times then edit   it one by one to create that look this works for a  simple wireframe because there's not so much edit   that you need to make however if you are working  for a high fidelity prototype for a large scale   project this will take too much time assuming  you want to reduce the size for the caption font   you will have to do it one by one for each post  and if there's 100 post components in this design   file you will need to do it a hundred times that  is why you should use auto layout and components   these two functions often work together and that's  why i put both of them in this tutorial video   creating a component helps you to create  a structure that can be reused to do that   select the component that you want to create  right click and then select create component   you should see a purple four dots icon showing  up on the top left now we'll call this one the   main component to create a sub component simply  copy this component and paste it somewhere else   now if you make an edit to the main component for  example if we change the caption font back to 15   then this change will also reflect in the sub  component let's try to make the corner rounded   here if i change the main component the corner  will also be rounded in the sub component   but there could be issues if you didn't design  your main component right then there's not much   things you could do with the sub component here  i want to change the caption to something that's   very long and i face an issue because i cannot  really resize the text box that is because the   text box is set in a way in the main component  and you can't do much in the sub component here   that is when auto layout come in handy if we apply  the right set of auto layout to the main component   the old components will adapt to the right  size and spacing no matter how we change   the content now i'm going to rewind and let's  start from building the right main component   when you are building the main component  please include all the necessary elements   because it's going to be difficult if you want  to add element to the main component later on   so for now i will also add a profile picture  here and since caption could be very long   i'm also going to replace the caption text and  resize it so that the width is fitting the image   now auto layout cannot be applied to just random  elements so if i select all these the auto   layout button will not show up on the right side  because these elements are not placed in a frame   but there are two exceptions the first one is when  you are choosing multiple elements that share the   same spacing the second exception is when you are  only selecting two elements here we can see the   auto layout button and let's click plus figma will  create a frame for these two elements and you can   adjust the spacing and the alignment by the right  side panel we'll explain that later now you can   also use an auto layout within another auto layout  here i'm creating another layer of auto layout so   that the top section automatically aligns with  the bottom section once an element is in an auto   layout frame its size will automatically change  when you adjust it here i deleted a few lines   and the height of the entire auto layout frame  also shrink now i will add another auto layout   to align the picture and everything below the  picture here if i reduce the size of the image   the spacing between the image and everything  below the image will still remain the same   with this set of auto layout nothing will break if  someone decides to make the profile picture bigger   or to replace the text in the content so i will  create a component with this large frame select   the large frame right click and select create  component the four dots purple icon will show   up on the top left and there are two ways to  use this main component one way is to go to   the assets page on the top left and then find the  component drag it to where you want to place it   another way is to simply copy the main component  and then paste it to where you want to place it   one thing that i will also do is to clearly label  where is the main component you don't want to mix   the main component into the sub component because  sometimes you might make a mistake where you   wanted to edit a sub component but it happens to  be the main component and everything changed and   you don't know that some designers will also group  all the main components into one side of the page   and separate that side of the page to the main  design which is on the right side here now let's   say i want to design a screen that shows multiple  social media posts auto layout will also help here   first select d2 post then adjust the  vertical spacing to what you'd like it to be   then create auto layout you can also adjust the  vertical spacing after creating the auto layout   here by this field now if you want to create the  look of multiple posts just copy one of these then   press command v or control v it'll give you a  smooth look with the same spacing same thing   happens if you want to change any of the content  if i delete some lines here the spacing will also   keep the same if one day your company decided that  all the posts should have a rounded corner then   all you need to do is go to the main component  and change the corner to a rounded corner   all the sub components will change as well with  one exception though if you happen to add the   specific aspect in a sub component then that sub  component will not reflect the change of the main   component for example here i'm changing the third  post back to a sharp corner this won't influence   any other components but if i decide to adjust  the corner again for the main component and change   everything to a 5 radius corner this will now be  reflected on the third post because i've already   made the over edit on its corner radius to fix  this select this sub component right click then   choose reset all changes this will bring the sub  component back to the look of the main component   as a recap if you will be using a chunk of design  over and over again create a component so the   future style changes can be easily made across  all copies now let's talk more about auto layout   once you set a frame with auto layout you'll  see this panel so let me run you through every   single thing in this panel using the arrow can  help you to set the frame to vertical direction   versus horizontal direction the second field is  where you can change the spacing between the items   this will probably be your most used field the  third field can help you to add a horizontal   padding on the left side and the right side of  the frame and similarly the fourth field can help   you to add a vertical spacing on the top and the  bottom of the frame if you click the bottom right   icon then you can adjust the padding one by one  on the left on the top anywhere now let's take a   look at these dots if you click on any of these  you'll probably notice that nothing is changing   and that is because you didn't manually change  the size of your frame if you happen to change   the size of your frame then these changes will  occur in relation to each side of the screen   there are four additional changes that you  can make by clicking the three dot the first   one is the spacing mode if you change the  spacing mode from packed into space between   then the space between elements will automatically  adjust once you change the size of the frame   here this will change to auto and if i make  the frame bigger then the spacing between   these elements will automatically adjust and  of course you can use that grid again to adjust   where you want to stick it there are some  other things you can do with auto layout   to demonstrate it i will create two circles  with very strong outside stroke then i will set   auto layout to these circles if i click on  the three dot we can see that for the second   field strokes are set to be excluded it means  that the spacing we set will not consider how   much space does the stroke takes up so if we  set spacing to zero we can see that the two   circles are overlapping a little bit it's mainly  because their strokes are overlapping but if we   set strokes to include it in layout then we can  see the two circles perfectly stick to each other   now let's look at the third field canvas stacking  and it says last on top i'm going to set the   spacing between these circles to negative 30  and then copy and paste so that i add another   circle to it now we can see that the last circle  is appearing on top but if we change last on top   to first on top then the first one is on top  this could be useful when you are using those   profile icons for people who liked your post  there's just one more left text baseline alignment   to explain this one i copied a icon from somewhere  else and i will also add a text element now if you   create auto layout with these two elements then  it will align everything in the center this is how   the alignment changes once i make the font bigger  or smaller everything still stick in the center   now if i select the frame and then turn on text  baseline alignment it will align the icon with the   baseline of the text which is this blue line here  i'm going to change the size of the font again   and you can see that the icon will always  be aligned with the baseline of the text   i need to warn you one thing though this  feature does not work well if your icon   has extra padding here as you can see it's not  going to align well if the icon has extra padding   and that's all for auto layout if you like  this video don't forget to subscribe to my   channel and turn on all notifications  thank you so much and see you next time

Channel: Aliena Cai

Views: 35,601

Keywords: figma tutorial for beginners - auto layout, auto layout figma 2022, auto layout figma tutorial, figma tutorial, figma component properties, figma components, figma components tutorial, figma auto layout tutorial 2022, auto layout, auto layout figma, figma tutorial 2022, figma tutorial web design, figma tutorial for beginners web design, figma web design tutorial, tutorial figma, figma autolayout, learn ux design, easy web design tutorial with figma

Id: HwiHqfax7Uk

Length: 10min 55sec (655 seconds)

Published: Mon Aug 22 2022