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