What's up guys and welcome to my channel
building amazing things. In today's video I'm going to be
introducing a design feature in Figma called auto layout.
Auto layout is a feature in Figma that allows you to create dynamic frames that
responds to the content. So in today's video I'm going to be
creating auto layout, nesting auto layout,
changing the direction of components in our auto layout, spacing, ordering and
aligning contents in an auto layout. Also we're going to be talking about how
to add objects or elements to an existing auto layout.
Also we're going to be talking about setting a fixed height and width to
auto layout and one of the interesting part of this
video is that we are going to be converting an
auto layout frame to a component. Also we are going to be talking about how to add
horizontal and vertical scrolls to your auto layer
that will help you to do jobs like prototyping.
So this video promises to be an interesting one make sure you watch this
video to the end. If you're new to this channel kindly hit
on the red subscribe button and the red notification bell so you get notified
when I create a new video on this channel . I'm pretty excited
to bring this feature for you. It has been a long awaited feature in Figma.
So make sure you watch this video to the end because there's a lot to learn from
this video. Let's get started. Hey I'm pretty excited you have gotten
to this section of this video. Please make sure you watch this video to
the end because of the tips I'm going to give out in this video.
So, I just have a basic setup in Figma here. I just have
this desktop frame and I've renamed this file to Figma auto layout.
So to add auto layout to an element I'm going to drop
an element on this canvas and that should be a text element. So I'll click
on the text tool and type movies. So to add auto layout just
press Shift A on the keyboard and an auto-layout is added automatically. So if
you look at the layer exponent, a frame is being added
and you have the movie element inside that frame. So one feature of this auto
layout is that it has padding around it. So if you add
auto layout to a single element, padding is being added around it but if
you have multiple elements paddings are not added
around it. So if you look at this auto layout now
you can do some changes on this auto layout you
could change the stroke, you could change the effect, you could
change the fill, you could add corner radius
to this frame which is an auto layout.So what I will do now is to add a fill to
this auto layout so I just click on the fill tool
and select the color I want to add and I just added red.
So that's awesome. You could change the corner reduce to look like a bottom, more of a button
and have radius of it. So you could go ahead to add stroke, you go go ahead to
add effect. That's how to add an auto layout in Figma. so I'll go ahead and increase the
padding of this auto layout. So I'll set it to be 30 by 30 for
example and this is it. So you can increase the
padding around your auto layout contents so I'll make
this 50 by 50. So one interesting part of this auto
layout feature is that, once I increase the content
in our auto layout, it automatically increase
the size of the auto layout keeping in mind
the same padding that was assigned to this auto layout.
So I'll try it. Movies for me So you can see that the width so this is
increased but the paddings are still kept intact to be
30 by 30. So that's an interesting feature in auto layout.
Another feature of auto layout is nesting elements in our auto layout. So I could duplicate this element
to have two elements. Basically two auto layout so I could now
select the two auto layouts and use my Shift 8 to add auto
layout to it. So you could see that an auto layout
is being added to these two buttons we have initially
and because of there are multiple elements, paddings are
not added around multiple elements. So remember I
mentioned this earlier. If you have a single element paddings are
added to a single element So if you look at this elements
in this auto layout you can see that the direction
for this element. Let me duplicate one of this element
also. You can see that the duplicating direction is done on a row basis So you could change the direction of
this from horizontal to vertical and your elements are being aligned
vertical. So that's another great feature in auto
layout so I'm going to change back this to horizontal so you could see it.
This is horizontal now if you look at the elements there are spaces within
each element. So these spacings are being arranged here.
So if you look at the spacing between items in an auto layout
so I could change this spaces to be 20, I could make it to be 10, depending on what I'm trying to achieve so I'll leave it at 70 and that
looks great at 70. So another thing you want to do
is, you want to change the ordering. So assuming I have this auto layout color,
this particular button to be let's say, Green
and I have this very one to like, say Pink
you could change the ordering. I can just click
and drag and I'm changing the order for this.
You can see I could swap each of them inside this auto layer so you can also
as well do that on the layer panel just click and drag
and arrange the contents on the auto layout's
panel you that's an awesome feature so you could see at the design
um tool here at the property bar you could switch
also auto layouts by clicking on the arrows and
that's a great tip in this video so guys as I mentioned earlier we're
going to be designing a mobile app um design for a movie app so
I've deleted everything and don't be shocked I've just deleted
what I have earlier so what I'm going to be doing now is just to click on the
frame tool and select iPhone 11 pro x so this is the frame I'm going to be
designing the movie app for so the next thing I want to do is
each movie help has a rating so I'm going to start with
the rating for my design so um ratings are usually in star and
usually 5 stars so that is a nice idea to use for
Figma auto layout so what I'm going to do now is to add the star so out of the
box I have a plugin installed call for awesome so i'll just right click go to
plugin click on photo awesome then look for the star icon this way
i don't have to design the star icon so I'm going to drag the star icon in
to my frame and um I'll set the width of this to be 24
I want my start between 4 by 24 and then let me zoom in so you can see the stuff
so i could add auto layout to this by holding my
shift and a i've added an auto layout to this star
so if you look at the vector inside I could now duplicate it
in five places awesome so now auto layer helps us to arrange
this content so if you look at it there's a duplication inside
with a spacing between the items of 10 so I could remove the horizontal spacing
here and I have five um ratings
so um I'm going to change the color the fill color of
this I'm going to select this and I think I can go with this okay I choose
this color so I can go with this as a written color so select
the rest and change the color simultaneously.
So this is um an auto layout for my rating and not all movies have or
all stars rated so i'm going to rename I'm going to change make some
adjustments here so I'm going to add some stroke here
making the stroke to be true and then remove the fake color and add
this color as a stroke so I'm also going to do that for this so
I'm going to remove the fake color at the stroke
and make the size of strips 2 then set the color to be this color.
Awesome! So we have of star rating for our movie
um app so the next thing I'm going to do now is to add a text. Now the text should
tell what um what is the movie so i have some
images here so the first movie is black rose
so I'm going to add a text to describe this movie
so what i would do now is to select my text tool and just
click anywhere on the canvas and say black rules
that's the name of the movie so I'm going to set
the style to be pump is then set it to be
um semi bold then I'm going to make the size to be 24
I think 24 is too much I'm going to set it to 20
and I'm going to reduce the opacity of the black
a little bit and that's awesome! So I have my text
of the image the next thing I want to do is um add a description
to this uh movie so what I'm going to do is to select the text tool
and make a card like this and change the settings
to let's say 14 and um change the property to like say regular
and I could just right click and use my plugin, I love using plugins.It
makes my work easier so I have a plugin
called Lorem so I'll click on Lorem and say
autogenerate. So it generates the text for me that's
awesome. So I'm going to reduce the fee color as
well and um I think this takes is too
large so I'm going to reduce it to 13 and that's awesome.
So I might also increase the height line height and i have something like
this i also want to reduce this to 12 and uh kind of increase it this way
and this is how this this looks okay so I might reduce the text
just have something nice. Okay, this looks okay. That should be
like a brief description of the movie so now
uh I'm trying to align this the Figma has agreed to that
you could say 1919 trying to align but with the feature I just mentioned earlier, will have to do this out of the box so just select
everything here and use your shift a to add
a kind of an auto layer frame to it so I'm going to rename this auto layer
frame to let's say, movie card. Sorry it doesn't know how to spell movie
movie cat that's okay so one other feature of
the auto frame um auto layout is alignment so once I select each content
of the auto layout and these are the three contents
in this movie card which is an auto layout
I could use this tool here to either set it to be: left align,
centered align, or right align. So depending on what you
want to achieve so I'm going to make this left align.
Also, you could see the spacing between these
and you could see that this auto layout has been set to vertical so if I make it
horizontal this is how it's going to look like.
so I'm going to make it vertical. So let me do some basic
um design um alignment so select my frame and I'll reduce this
sizes between them to be like say, let's say try
10. 10 is nice so I also want to reduce the sizes of this star
so I'm going to select all of them and I'll click constrain proportion and
reduce it to be 22. It's still much 20, okay 20 is fine
so um this text description is okay so next uh you want to add more
content to an auto layout. that is another tip
in this video so I have a card this way
um let's say a rectangle which I want to add into this.
So. and zooming this is the rectangle I want to add to this card
you can see once I drag this to this it doesn't get
into this uh into this frame. But for example what I want to use this card
is for the uh, image. So I could just go to my images
and just use my ctrl c copy the image that's awesome with Figma so come to
this um card and do ctrl v should
paste the image. Why is it not pasting the image? Let me do that again.
Right-click um copy and um go to the card and
make a control v, wow! So I don't know why it's not um so I'll
go to images and choose images and um
go to the desktop and um into images and select rose so that's the
image for this. So I want to drag this image to
this uh movie card and you will see it's not going in
because um this image is or this card is larger than this um
this frame so on this auto frame so what i would do is to hold my control
down and you could see this line showing where I want to place it
is it at the top of the black rose or below here so i want it to be at the top of
black rose so also so I have something like this so
uh I might want to reduce this or better still leave that away. Um, okay awesome
so we have a card for movie and um I think I want to reduce the height and
I think this height is okay so and um I kind of select the image again
so it matches well uh fill, fit. no
select fill that's okay. so I have a card for this looking
awesome right so what next I need to do is um this
the card I'll just think add I register it let's say it's
okay that's fine so that's how to add um more objects to a frame so this looks
okay. So another feature, is we could convert
this to be a component. So if you click on component, create component. I've converted this to be a component
so the essence of using component is, when there's a slight change, you can
change across board. So if I duplicate this,
I have another duplicate here so I'm actually going to take this out
of this so let's just do the duplicate outside so this is two cut. So
yeah, so the essence of making um component
is when there's a change like if I decide to change this color
uh it's going to change both here and here. So
that's just the future of using component. Maybe I'll make a video on
more about components. So now I want to change this image so I'll try
that copy again I don't know why it didn't work out but let's try it
again so I'll do my control v and then also work out so I'll try to
choose the image and choose prison break and the content
should be prison break break then I'm going to duplicate this
as well um I'm going to duplicate this as well so I'm going to make this
let's choose another image for this I'm going to choose uh queen south
oh, queen of the south so nice so the name should be
queen of the south south and um I think there's uh there's an increment
yeah so I'm going to reduce this and let's see hmm, of the south, so this is nice
so um I'm going to select all of these and um use my shift A to
make it a frame um an auto-layout frame so I'll say
list of movies and um I want to drag it into this frame
and you can see that um I want to make it
vertical scroll that's one feature in Figma.
So if you look at this right now if i should run a prototype
so just click on run prototype So let's look at it. so i won't make this scroll to
the next movie so to do that um i'll add a frame to this
list of cat movie so what I would do is um I'll right-click
and say frame selection. So this way I've added a
frame and my list of movies inside the frame
so I'll say a list of movies framed so now
I could click on click content but before I do that
um just click on clip content and I'll drag this in here
then I'll kind of drag the frame the frame so
this is on the frame so I'll kind of reduce it to get to this size of this
image of this my iPhone frame then um
what next so I'll go to prototype and set it to horizontal scroll so let's try
the prototype this time around so you could see it it's now scrollable
so that's how to add horizontal scroll so
I'll do some adjustments so I kind of adjust this this way
and now add the text at the top and call it movies
so I'm kind of doing my design and um go to the design, change the property
from pump it and um increase the size to
let's say em, 24 and I can now reduce the opacity okay, great! So um I'll add
such um icon so use my font, awesome!
font awesome so I'm looking for search so click on search
and that's my search tool so I'm going to drag
um the search tool I'm going to drag the search to inside
our my iPhone X frame and drag the search to
here so I'll select this boot and use um
center align aligned vertically centered then I'm going
to reduce the opacity as well of this to
this so cool. I will move it so that's
one great tool with um uh Figma auto layout so it's looking
awesome already. So I'm going to reduce this
movie because of this design over up here
so I'm going to drag this down a little bit
okay awesome great so next um I'm going to
duplicate this text. So that's for movies then you could see
another section that says um let's say, latest movies
and um kind of design make another design um
let's say I'll select the card um right and go this way
and um choose image for this so say go to image and choose
and I will say shooter let me try shooter for this
I'll open it. Okay then um all the text to more describe
this so i will say the text to be The shooter. so I'm also going to reduce opacity
output pressing this so I'll reduce the opacity
um this way and um reduce the size to let's say 14.
so this is another section for the movie app.
Now I'll make the opposite 80 um, no 75 okay let me check the opacity of
this 67 check that over 73
so i'm going to make this 75 and also make this
also 75 for the opacity and also change this to
75 okay, awesome! So I'm going to duplicate
this I'm going to copy this and paste it here so I'm going to copy it um and copy and
paste so here is it and I'm going to reduce the size for
this very one so I'm going to select
everything and um let's say 18 not okay 15, 15 not bad
so um set sorry um insert it this way
and um maybe more description so I'll select the text and um
what type of movie is it an action movie or drama whatever
kind of movie. So I'm also going to reduce the size to 12
and um reduce the opacity to let's say 67 okay that's
awesome! So this is another auto-layout uh feature. We could select everything and
say shiftA selected auto - layout and make it left
align select all the contents um
inside this frame and make it left align awesome. So um
I could drag this closer here and this is okay so i could select this
two and also make it auto layout shift a and i'll
select the content of this um to elements or two items in this frame
and make it to at the top okay that's fine so this auto layer i
could reduce the spacing within them i can make it
12 fine and also i want to reduce the sizes of this
stars so I'm going to select everything and let's try 15,
okay awesome so I have another set of cards looking good I could also drag this to
the top and duplicate this
and um this is okay so I could select the both of them and
also make it auto layout with my shift a then i i
want this to be a card so let me change the image and the
contents for this very one I'll duplicate: The hard
way so I'll change the text to
the hard way awesome um you could go ahead and change the rating
um of each of them so freely I have the rating
of each of them to be three so let's see how it looks like on our
mobile design awesome this is great
uh i kind of want to move this to the left a little bit okay
okay awesome so another thing we could do is um
we could add um like a kind of navigation
so um like a toolbar button so I could set my toolbar this
week and um on this frame
I might choose to make the frame um like a gray color so let me change um let me change the color of this to
black so um let's change it black
of our covers so we could see this more so i could change this um of the frame
to gray kind of gray
okay awesome so let's look at how it looks like
okay great that's awesome we're making progress so this I could change it blue am just
trying colors so we could see our design very well so I could change
this to white and um kind of add some navigations
that will help us to get to other screen in our design so
I'll just look out for using my plug. Awesome
just look out for movie um film,
movie movie movie icon so I'm trying to look out for a movie
icon so I think that should be
film don't know why I'm not getting it film okay does it
so I could drag this here so sorry this is the film frame I'll drag it
into the frame and drag it here so so so so so these are rectangles so yeah fine so drag it to the media and um I'll reduce the opacity uh snay 75
so you could add other icon and drag it to the middle,
you could add other icons let's say you want to save this
um bookmark so you could add a bookmark um icon so
I'll go to font also I look for bookmark I kind of save so um there's a bookmark
I'll drag it in as well and bring it here and
what's the size of this size of this? uh what's really happening here so the size of this was 24 so I could
also reduce this to 24 or just leave it away or increase it.
Well just whatever you want to achieve you could do that now. So maybe you want to
check a movie by calendar so we could decide to add another plugin
using font also, we could choose calendar um calendar so I could choose this
um but I want to use uh I want to use this so my calendar drag
it into the frame and um drag my calendar this way I'm sorry I like my calendar this way so I could select this tree and use my
alignment tool and align it and um fine
okay so um let me know in the comment section what
you think about this video and let me know if you have learned anything
remember to like and subscribe and comment
on this video so when I am done I could add
effects. Make this effect to be like say 30
yeah nice so there's kind of effects here
and I could then make this a frame frame selection then I'll say click content
uh click content I could then set it to this size
and um under the prototype I could set it to
vertical scroll so let's check it out yeah, exactly
vertical scroll. So you could scroll for the latest movies
so these icons are now properly arranged so I could do that
now. So what I'll do is select um both of them and try to align it properly
so looking at the design, awesome! So um we've learnt a lot
in this video and I'm so happy that you've watched
this video to the end. You've learned a lot you've learned about
auto-layout and Figma you've learnt pretty much how to add auto - layout so
please like, subscribe to this channel Share this video to your loved ones I
want to hit a thousand subscribers before the end of um this week so, please
share my videos watch to the end, like, comment in the
comment section let me know what you think about this
video let me know your challenge with this video thank you for watching
this video and see you in the next video Bye.
