Transcripts
1. Figma Masterclass Trailer: Hello, everyone. So welcome to all of you in my full master series
zone Pigma UIUX design. So in this particular
master series, I will teach you Figma tool from the very basic level
to the advanced level. Firstly, I will teach you its basic interface
layout and features. After that, we will learn some basic things
like component, auto layout, and prototyping. I have created this
lecture series in a very systematic manner so that anyone can understand
it very easily. So no matter who comes
with which background, even if you haven't used any graphic design software
in your whole life, still you can understand
Figma with my lecture series. This master series
will start from very beginner level and it
will go up to the pro level. So you should not miss
my lecture series. I will see you in the lecture. Okay, bye bye.
2. Figma Basic Interface, Layout & Features: So now I am going to start
my Figma lecture series. So first of all,
I will teach you its basic interface and properties and also
how Figma works. Okay, so we will
discuss everything. Okay, so this is a blank space. Where you have to
create your design. Okay. So first of all, let's understand about its
tool, features, and layout. Okay. So first of all, let's discuss about some tools. Here we have move tool, frame, saps, pen
tool, text tool. Okay, so we will cover each topic one by one in
very detailed manner. Okay. Here I'm introducing
its layout first. Okay. So suppose you
are creating rectangle. So whenever you will create anything in your blank canvas, its layer will project at the left hand
side of the screen. You can see that. So I created rectangle and it is
sewing on the layer type. Okay. 1 minute. This is a layer section where
rectangle layer is sewing. Suppose I am creating ellipse, then its layer will appear at the left
section of the screen. Suppose if I will create arrow, so its layer will appear at the left hand
side of the screen. Okay. So whenever you
will create anything, its layer will appear at the left hand
side of the screen. Okay, so you have to
notice this point. Okay. Now, we have covered the tools, and we also discussed about
the left hand side panel. Okay, now let's discuss about
the right hand side panel. So whenever you will
select any object, its property will appear at the right hand
side of the screen. You can see that. I have
selected rectangle, so here we can see that all the rectangle
property is visible. Now we can change anything. Suppose if I have to change
anything in ellipse, so I will simply
click on ellipse and its property will appear at the right hand
side of the screen. Suppose if I have to
change anything in erotap, its property will appear at the right hand
side of the screen. Okay. So let's clear everything. And now I will repeat
everything that I achieve. Okay, so this is a tool tab. Suppose you are
creating rectangle, so its layer will appear at the left hand side
of the screen. This is a layer tab where all the layer
will be collected. Okay. And whenever you
have to edit any layer, you have to click
on those object. Suppose I blank NVAs, I have created
rectangle and circle. In blank nvas I have created
rectangle and circle. Then suppose I have to change
anything in rectangle, so I will simply click
on rectangle from here. And now I can adjust
all these settings. Or instead of that,
what I can do, I can select my rectangle
from the layer sexan too. This is a layer sexan. So instead of selecting
my object directly, I can simply select my rectangle layer from
the left hand side panel, and its property will appear at the right hand
side of the screen. So you have a both the method. Either you can select
your object from the here or you can select
it from the layer. Okay. This is a basic thing. Now, let's color this
circle. Red color. Okay. Okay, fine. Now, at the layer section, you will see ellipse is
about the rectangle. Ellipse is about the rectangle. That's why it is
looking like this. But what will happen if we drag our ellipse below the rectangle,
then what will happen? Let's drag ellipse
below the rectangle. Let's drag now you will see that rectangle have
covered the ellipse. This is a very basic
fundamental of design. So suppose if you have
ever used Photosop, then you are familiar with this. I think you may
familiar with this. Okay. While creating your UIUX design, maybe some elements are
not appearing properly, you have to check layer sex
sum proper arrangement. So in this screen, ellipse is not appearing because rectangle layer is about
the ellipse layer. Also the size of
the rectangle layer is much larger than the ellipse. That's why here, ellipse is not appearing. So
what do we have to do? We have to drag ellipse
above the rectangle layer. Okay? Fine. You have to
practice everything with me. Okay. So whenever I'm
creating anything here, you have to perform same
activity in your computer too. Okay? And with the
help of few lectures, I will master your Figma. I'm starting my lecture series from the very beginner layer. So if you are familiar
with some basic things, you can eskip this part. But according to me, you
should watch whole video, you should not escipe anything. I will slowly increase the
difficulty level in my course. So it is starting from the very beginner level and it will go up
to the pro level. I will see you in
the next lecture. Okay. Bye bye.
3. Properties in Figma: Now let's learn about the property sexon
inside the figma. So in order to learn
a property sexon, we have to create
anything, obviously. So let's create a
rectangle. Okay. Now, as I have already told you that whenever you have to change the property
of any object, your object must be selected. So either you are selecting your object from
the here directly, or instead of that,
what you can do, you can go on layer
section and you can select your rectangle
from the here directly. Okay. So no matter what you
are using which method, just you have to select those objects in which you
have to change anything. Okay, now, our object have
been selected properly. Now, its property, its properties are appearing
at the right hand side. Okay, so first of all, let's talk about the position. So with the help of position, you can manipulate its position by ragging your mouse like this. Just you have to
hover your mouse. You have to hover your
mouse about the X, and it will change its icon. Let's zoom it. So let's hover
my mouse arrow above the X, and it is changing its icon. Okay. Now what I can do in
order to decrease the value, I have to drag my mouse
towards the left side. In order to increase the value, I have to, uh, move my mouse towards
the right side. So let's decrease it by dragging my mouse towards the
left side. Okay. Okay. And similar for a while. But it is not so important
because you can easily, easily change the
position of your object, so it doesn't make
any sense. Okay. So let's select our object and move towards the other tools. Okay. So with the
help of rotate, you can easily
rotate your object. This is a flip. Okay. So obviously, you
will not get it here because it is rectangle. Okay. So with the help of flip opson, you can flip horizontally
and vertically. Okay. Okay. This is a dimension tab, which is most important. Okay. So from the here, you can set any dimension. So let's say 720
should be width, and height should be 1080. Okay, so this is a
vertical dimension, so you can type it manually. Okay. Simple. Now,
let's fill the color. Now, let's fill the color. So let's fill orange color. Okay. Now, here you will
see opacity Opson. Here you will see opacity Opson. So you can put it 70. So opacity means transparency. So you can decrease its value. Let's type 20. Okay. Instead of that, we have some
sort cut in our keyboard. Okay, so first of
all, let's type 100. Okay. So if you have to change the
transparency of your object, then we have some sort
cuts in our keyboard. So suppose if you have to
set your opacity to the 70%, then you have to press
seven in your keyboard. See? Okay. If you have to undo anything, you have to press
Control Z or undo. Control plus Z. Okay.
Suppose you have to set your transparency
at the 30%, then you have to press
three on your keyboard. Okay. Let's press Control
plus R for Undo. Suppose if you have to set
your transparency at 60%, then you have to press six. Similarly, if you
will click two, then it will set
transparency at the 20%. If you will press three, then it will set
transparency at the 30%. So we have some shortcuts. Okay. Bye. Now let's increase it. So this is a rectangle. Now let's move towards
another option. Here we have a corner radius. Here we have a corner radius. So what does it mean? Your SAR corner
will become radial. Okay, so So first of all,
let's activate this. Okay. So either I can put any value on corner radius
or instead of that, I can move my mouse towards the left and right, left and right. So let's put the value of T. You can see that my SAP edges have converted into
the curvature. Instead of that, here you
will see one small dot. You can easily manipulate the curvature from the here too. Okay. And you will
notice one thing that all the edges are
changing at the same time. Okay. But what if you have to change the radius of the
specific Corner. Suppose you have to change the radius of
the specific corner. You don't have to change the all corner, then
what you will do. So for that, here we have a separate option called
individual corner. So this is a option
of individual corner. Okay, so I will show
you how it works. So first of all, let's
remove the curvature. Okay. Now we have a SAP edges all over the rectangle.
So let's select it. Okay. Suppose I have to
make curvature only here. And rest parts
would remain same. Then how I will do? So first of all, I will
select rectangle and I will click on individual corner. So let's click on
individual corner. Okay. Now, here we have a four side. Here we have a four side. So this four side
sends for four corner. So suppose I have to change this corner so I
will manipulate the setting. So either I can put value directly or I can
drag my mouse left or right. Okay. So let's drag my mouse
towards the right side. You can see that I have achieved the curvature
at the specific part, and rest part
remains same. Okay. So this is how you can manipulate with
individual corner option. Okay. So now let's move forward. Here we have some option I will cover in the next lectures. Okay, this is a advanced option. With the help of I, you
can turn off the color. Or with the help
of minus button, you can remove the color. Or you can delete the color. So let's press Andrew. Okay. Now here we have
a Etroke option. So let's click on Estroke. Let's click on Estroke. And here, it will ask you
about EtrokePosision. It should be inside,
center or outside. Okay. So I think it
should be center. Okay. And let's
choose its intensity. Three. And also, here we are getting
same option of dragging my mouse like this. Okay. So this is
how a stroke works. Similarly, I have effect secon. So with the help of effect, I can provide sadoblur. We have all the options we
will cover in the next videos, and you can also
explore it by yourself. It is very simple. Okay. You can add sados behind the R object. You can give the direct
son of sados. Okay. You can provide blur effect
behind the R object. You can do anything. So this was the all
property of rectangle. But if I will
create circle here, then I will get the property
according to the circle. If I will create arrow, then I will get Properties,
according to arrows. So property totally depends upon which kind of
object you are creating. Okay? So you can
create any object, and according to your object, property will display at
the right hand side. Okay. So suppose I am creating a star. Suppose I am creating a star. So here I will see some new opson which I will not see in the
rectangle or circle. Okay. So according to SAP, you will get
different properties. Okay. So property sexon may vary with respect to
your shape or objects. Okay. So this is how
property secan works. So currently I'm teaching
you some basic things, and I will improve the
difficulty layers, the difficulty levels
from the next lectures. Okay. So, bye bye.
4. Shortcuts in Figma: Now in this particular lecture, I will discuss you about
some sort cuts in figma, which will make you
a design faster. Okay. So first of all, let's talk about how you can
copy any object in Figma. Okay. So first of all, let's talk about the
traditional way. Okay, so traditional way
is you have to write click on mouse and
you will get copy, and after that, you will
press Control plus V button. So this is how you make
the copy of any object. So this is a very
traditional way. Obviously, here we
will not use it. Okay, so let's delete. So stop copying from
the traditional way. Okay. So now we
have a two method. First method is Alt button. So in your keyboard, you should have Alt
button, Alt button. So you have to press Alt button. And with the help of
mouse left click, you have to drag your
object like this, and it will make
its endless copy. Just what you have to do, you
have to press Alt button on your keyboard and
move your Object, which you have to copy. You can copy in any direction. This is how you can make a endless copy with the
help of Alt button. Now let's talk about second way by which you can
copy the object. Second way is Control plus D. Let's select this
object and let's press Control plus D. Control
DDD, Control DD DD. Okay. So this is
how you can create the als copy with the help
of Control plus D button. Okay. Now, it is
looking so clattered, so let's zoom out. Let's zoom out without
changing the size of anything. You have to press Control
on your keyboard, and let's scroll down. Okay. So this is how you
can increase or decrease. This is how you can zoom in
or zoom out in your canvas. Its size is not
changing in real world. Okay. Only we are zooming in or zooming out with the help of control and scroll
button on mouse. So with the help
of control button and I scroll button
on your mouse, you can zoom in and zoom out. And you have to make sure
that you are practicing same thing while
watching my lecture. You have to practice everything. Okay, suppose I'm teaching
you these fundamentals. So you have to perform all of this activity at the same
time in your computer. Otherwise, you will not get my point in the next lectures. So please, uh, do some
practice with me. Okay. So let's delete it. Okay. So we have learned
about how we can copy. So we have a two method. First method is Alt plus mouse. While pressing Alt button, we have to drag our object, and this is how we can make
ends copy or instead of that, just select your object
and press Control plus B. And it will make endless copy. And for Zoom out, let's
press Control button on your keyboard and scroll
down and scroll down. Now let's learn
about how you can do multiple selection
in your project. Suppose you have to select multiple object
at the same time, then how you can do it. Okay, so with the
help of Shift key, you can easily do it. So let's press Shift
key in your keyboard, Shift key in your keyboard, and let's select those object
which you have to select. So let's select all the objects. Now you will think about that. We can do it easily by I
dragging my mouse like this, obviously, you can
do it like this. But what if we don't
have to select the star? If we will select
everything like this, then all the objects
are selected. But what if I don't have
to select the star, then how I will do it? I will simply presid
key and I will select those objects in which
I have to change anything. And here I am not
selecting star. Let's change the color so
that you can see the changes. So this is how you can select multiple object with
the help of Shift key. Also, we have another use of
Shift key inside the figma. Okay. So suppose for an example, if you will activate
rectangle tool, then you can easily
create rectangle uh, with different height
and width. Okay. But if you will use Shift
key at the same time, then it will make
it symmetrical. And now, if you will
move your mouse, it will not change. The reason behind it is
apetra have been logged. Okay. So whenever you
will use Shift key, it will guide you to create
your object symmetrical. Okay. So without Shift key, I can create
rectangle like this. But if I will use Shift key
and I will create rectangle, then it will maintain specific aspect ratio
all over the design. A, suppose I'm creating
any line like this. But with the help of shift key, what will happen if I will create any line with
the help of shift key, then either it will create
pure horizontal line, or it will create
pure vertical line. Or instead of that, it can
provide line with 45 degree, but it will not
create random line. If I will use shift key, then either it will
be pure horizontal or it will be 45 degree
or it will be vertical. But if I will not use Shift
key while creating line, then I can create line
in any direction. And once I press Shift key. It got some limitations. Okay. So suppose you have
to create straight lines straight diagrams without compromising with
the dimensions, you should use Sift key. Now let's learn
about the grouping. Suppose if you have
created some objects, some set of objects, and you have to group them. Then with the help of Control plus G, you can easily do it. Suppose if I have created
rectangle, ellipse, and atar. So at the left hand
side, layer sexon, you can see that all the layers
are individually created. Okay. But for grouping, I have to select
all the objects. Okay, so let's select
Sift, shift, shift. With the help of Shift key, I have selected all the layers you can verify from the here. All the layers are selected. Now I have to press Control plus G button on my keyboard
in order to group them. So let's press Control
plus G, sorry, Control plus G. Now group have
been created successfully. Now, if I will expand it, you can see that
inside the group, inside the group, I have
ar ellipse and rectangle. So this is how you
can group any item. Okay. So suppose you have created suppose you have created rectangle
and after that, you type something here. Okay? Oh You created design like this. And if you have to merge them, then select both the object and press Control plus G in
order to group them. Okay. Now let's talk about the specific
selection of object. Okay. So let's create one big rectangle
inside this rectangle, let's create another rectangle. Let's change. Inside
this rectangle, let's create polygon
and inside the polygon, let's create the circle. Okay, fine. Now suppose if you have to change
anything in circle. Suppose if you have to
change anything in circle, then obviously you have to
select the circle properly. Okay. Currently, all the
layers are individual. They are not grouped together. Okay. So you can
easily select circle anytime and you can change
anything in circle. Okay. But, but, but. If we group it together, that's praise Control plus G. Now group have been
created successfully. Group have been
created successfully. Now, if you have to
select the circle, then click on circle, it is not selecting right now. You have to double click
with the help of mouse, then circle will select, but it is not necessary that it will work on all the situations. Okay. So let's move towards the practical design.
This is a design. Okay. So suppose I have
to select this boy image, then it is not
selecting properly. This is square box
are selecting. Okay. So for direct selection, you have to press Control button and move your mouse
over the object. Then you can see that you can
easily select any object. Just press Control button. You can select a specific part. Suppose you have to select text. So while pressing
Control button just over the mouse over the text and click Text have been selected. If you have to select
UI UX designer. So if you will
select it normally, then it is not selecting, you can see that I'm clicking, but it is not selecting. But with the help
of Control button, I can easily select it. So with the help
of Control button, you can select
anything with mouse. Okay. So for a
specific selection, you should use Control button. Otherwise, it will
select anything. Let's do not use Control button. And suppose I have to
select on View More. So I'm clicking on View More
and it is not selecting. Instead of View More, square box have selected. So it is not accurate, right? And it is time consuming. Now, let's press Control
button and let's hover the mouse
over the view more. Now, let's click.
Simple. Okay. So with the help of Control button, you can easily select
a specific part. So in similar manner, if you have to
select the circle, then you have to
press Control button, then you can easily
select circle. Suppose if you have to
select the pyramid sap. Then without the Control button, let's try to selecting. It is not selecting properly. Now let's press
the Control button on keyboard and let's
hover the mouse. Now you can select
the trangular sap. Okay. Suppose you have to
select this radar rectangle. Then if you will do it without
pressing Control button, it will not work properly. But if you will use Control
button on your keyboard, now, you can easily
select a specific part. So for proper selection
of a specific part, you have to use Control button. And while pressing
Control button, you have to hover the
mouse over any object. So let's see how it will work. Let's press Control button. And while pressing
Control button, I'm hovering my mouse
over alludi objects, and it is asking me
to select anyone. So this is how you can select a specific part with
the help of control. So if you enjoy this lecture, then don't forget to give me good positive rating
and comment. Okay, Bee.
5. Alignment in Figma: Hello, everyone in this
particular lecture, I will teach you how can
you use alignment in Figma. Okay, so without
wasting any time, let's start our video. Okay. So suppose we
have a four element, one, two, three, and four. But these are not
properly aligned. Okay. So if we have
to align it properly, then we have to select all
the elements, obviously. Okay. And at the
right hand side, you will see alignment
Opson. Okay. So here we have different
kind of alignment option. Suppose if you have to align from the left
reference line, then it will look like this. Let's press Control plus. If you have to align them
from the horizontal center, then it will look like this. Similarly, you can
explore all the option, but commonly we will use, but commonly we will use align horizontal center
and align vertical center. Okay. So let's select
all the elements, and first of all,
make common Center. Let's click on Align
vertical center. Now you will see all
the elements are properly arranged with
common center. Okay. But if you will notice here, the gap between each
element is inconsistent. Okay. Okay. So in order to
fix this, what we have to do, here we will see whenever you will select
all the elements, here you will see
this icon, rein. Which indicates equal is passing between
all the elements. Okay. So whenever you
will click on reline, the gap between all the
elements become consistent. Okay, you can easily
change it from the here. Fine. Also, Okay. So this is how you can
make common center. Okay. Now let's create a button. So first of all, let's
create a rectangle. Now let's use text. Download. Now, this
is our button text. Let's increase the
size of button. Now what we will do, we will
merge both the elements. So instead of doing it manually, instead of doing it manually, you can also do like
this. Select the element. Now, firstly, we have to
make a vertical center. After that, we have to
select a horizontal center. It will arrange
it automatically. Okay. Similarly, if we have to create a home tab of any web, then we will create
home features, contact about this is
nothing but a text. This is nothing but a text. And here we have a rectangle. Okay, so we have to
merge them. Okay. So instead of doing everything manually,
just what we will do. Firstly, we will
select all the text, align them in common center. Okay. Now we will click on re equal line or equal
spacing. Okay. Now we will select all of
them inside this rectangle. We will select whole thing. Again, we will click on
align vertical center. Okay. Now you can see that we
have aligned them properly, so you don't have
to do manual work if you know how
to use alignment. Okay? For an example, you have created rectangle, you have created circle. Okay. You have created
another rectangle. Let's say red colour. Okay. So now what you can do
can select both the element, make common center, Okay, do like this. Make
common center. Select all the elements
make common center. Okay. So this is how you
can create anything. This is how you can play
with alignment. Okay. So if you like this lecture, then don't forget to give me a good positive rating. Bye bye.
6. What is Wireframe, Mockup & Prototype : Hello, everyone. So welcome to all of you in my full master series
on Pigma UIUX Design. In this particular lecture, I will teach you what is
wireframe mockup, and prototype. So without wasting any
time, let's start our. Okay. So here you
will see preimage, first, second, and third. Okay, so first one
is wireframe wire. Frame. So wireframe is a rough diagram of your
app or website. Okay? Whatever you are
going to create, you have to create rough
diagram of your app. Okay? Fine. Since it
is a rough diagram, that's why you don't need
to measure anything. Even you can create it with
the help of pen and paper. Basically, you have to convey your idea with the
help of rough diagram. Okay. So whenever you
will create wireframe, your other teammates can understand your
idea very easily. Okay. With the
help of wireframe, you can share your idea
with stakeholders, CEO. Okay. So you can say that wireframe is
initial phase in design. Now let's learn about
what is mockup Mk up. So mockup is a better
representation of your app. Okay. You can say that this is a advanced version of wireframe. So this is an example of mockup. This is a realistic
version of your app, and it is actually looking
better than the wireframe. Wireframe was the basic
diagram of your app. On the other hand, mockup is a more realistic
version of your app. Okay. And also here
we verson of our app. Okay. This is first one,
this is second one. So main difference is
this is poor design. This is high end design. Okay, so why it is
looking poor and why it is looking more realistic
because of fidelity. Here we will see Fdlity term. So this is low fidelity. And this design
is high fidelity. So fidelity means realism. If you design is more
inclined towards the realism, then you will say high fidelity. If your design is
less realistic, then you will say low fidelity. So this is another example of low fidelity
and high fidelity. It is looking more realistic. That's why we can say that
this is high fidelity, mockup. This is low fidelity, mockup. Now finally, we have
a last stage which is prototyping, proto typing. Prototyping or prototype. Were you will play
your whole design. Where you will play
your whole design. So let's play any design. So in prototype stage, basically what you will do, you will connect many
pages, like this. Okay. Suppose if I will
click on chat with Colin, then this page should appear. If I will click on Ambassador, then this should appear. Okay, so you can assign the relation between
all the pages. This is time taking process. Okay. Okay. So you can also play
your prototype. So let's play, and
it is loading now. Okay, guys, so in
Prototype stage, you can actually play your
website in real time. So let's click on at with Colin. Now you will see
new page appearing. Let's click on Create Account, go on signup, Verify OTP, click on View Colin profile. Okay, let's schedule
the meeting schedule, go to the scheduler. Okay. So here you
will notice that I am moving in all page with
the help of single click, this is a prototype. So I have covered everything, wireframe, mockup,
and prototype. So whenever you will
create any project. You have to create
a wireframe first, which is rough diagram. And after that,
you have to create more realistic version of your
basic design in software. And after that, you have to create more pages
and you have to link all the pages together so that you can
run it in real time. Okay, so if you
enjoyed this lecture, then don't forget to give me good positive rating
element so that I can motivate myself.
Okay. Bye bye.
7. What is Component in Figma. How to Create it: Hell Hello, everyone. So welcome to all of you in my full master series
on Pigma UIUX design. So in this particular lecture, we will learn that what is component and how
we can create it. Okay, so first of all, let's talk about its definition. So Pigma component are
reusable UI element, like button icon, and Avigan bars which means you will create your
component for a one time, and whenever you have to use it, you will simply drag
it in your design. Okay. Suppose, this is a real project. This
is a real project. And here you can see that I have used same button
multiple times. I have used same
button multiple times. So whenever you are
creating any design, so will you create each button from
the very beginning each time, you will not do that. Instead of that,
what you will do, you will create your button. You will create your
button for only one time. And after that, whenever
it is required to use, you will simply drag it. Okay, so this is
called component. So component is a
reusable element. What is reusable? Because you are creating it for a one time and you
can use it forever. Okay? So button is a good
example of component. This is a component. So I can use this button
many times in my design. So if I have to use it
in 50 different page, I can easily use it because it is a component.
This is a beauty. Okay. Now here, you have
to understand one thing. What is component and
what is instance. Okay, so you will
understand this thing. Okay. But before that. But before that, let's
create a component. Okay, go on basic Okay. Now I'm going to
create a component. First of all, let's take a
rectangle. Let's create. You can give corner radius,
you can feel color. Now you can add text
button, increase the size. Now, at the left hand side, you will see two
different layer. First layer is for text, second layer is for rectangle. Okay? Now, what we will do, we will merge both the element. So first of all, let's select the element after the
right click on it. And here you will see
create component button. So you have to click on
Create component. Okay. Now here you can see that we
have a new icon like this. This is a icon of component. This is a icon of component. Whenever you will
create component, its icon would appear like this. Okay? So I can use this component
many times in my design. Okay. So let's take a frame. Let's take a frame. Okay. And suppose I have to
use this button here. Okay. Then many of you
we'll think about that. We can copy, we can copy, and we can past it
here like this. But this is a wrong method. You don't have to do that. Instead of that, what
do you have to do? Whenever you have
to use component, you have to go on asset sexon. You have to go on asset sexon. You don't have to copy this. You don't have to copy this. You have to go on asset
sexton of your Figma. So when you will go on assets, here you will see all library. Here you will see all library.
You have to click on it. And here you will see
all the components which you have recently created. So this is my component. So what I need to do? I will click on it. And here
you will see Inset instance. Now you will listen
one term instance. So let's click on Instance. Okay. Okay. Now, you have to listen very carefully. This is called parent component. This is called parent component. And this is called instance. You can say child parent
child, parent child. Okay. So whatever change you will
do in parent component, it's reflection will
appear on instance, okay? Okay. Whatever change you will
apply in parent component, its effect will automatically apply on child component,
which is instance. Okay. So this is my parent component,
so let's select this. Okay. Suppose I'm changing
its color. Can see that. Whatever color I will
apply in parent component, Same color will
apply on child also. Whatever thing I will do here, it's reflexion will
appear here also. Why do you have any reason
why it is happening? Because this is parent component,
parent, father, parent. And this is child component. In figma, instead
of calling a child, we can say instance. This is instance. Okay. So whatever change you will
apply on parent component, it will also apply on
instance or child. Okay. But if you will
do any change in child, then it's reflexion will
not appear on parent. This is a main concept. You have to think about that. Whatever change you
will do in parent, its effect will
apply on child too. But whatever change
you will do on child, its reflexion will
not appear on parent. Okay. Okay, fine. So now let's jump to
the apartment topic. Mm. So here you will see. This is a main component. This is a main component. You can say parent. Parent component also called main component. Main component. And with the help of
parent component, you will create multiple child. With the help of parent, you
will create multiple child. And instead of calling it child, you can say it is instance. Okay. So first of all, let's clear each thing. Okay. Suppose you have
created a component. Suppose you have
created a component. So whatever component
you have created, you will call it main component. So whenever you will
create any component, you will say it is
main component. Main component also called parent component because
this is a basic one. And whenever you will use this main component
in your frame, whenever you will use it. Then you may call it instance. Okay. You can call
it child. Okay. Now, the most beautiful
pull part is. Whatever change you will
apply in main component. Is reflection will
appear here also. Okay. But whatever change
you will apply on instance, its effect will not
appear on main component. This is a main thing
which you have to learn. Okay. Okay, fine. Uh Okay. So let's delete everything. And this is a component which
we have recently created. So whenever you will create any component, you can call it. This is a main component. This is a main component. You can say parent. Can say main
component or parent, both things are same. And whenever you have to
use it in your frame, then you have to
go on asset sexan. Okay. So let's create A frame. Let's create any frame. Now, if you have to use this
component in this frame, then you will go on
asset Sexan and inside asset you will see library
and inside the library, you will see your button. So if you will click on it, then you will get child
component or parent component. You will get child component. Okay. And you can create multiple version of
your child component. Okay. So suppose we are
using it too many times. Okay. Similarly, we could
have 50 different pages where I have used this
button several times. Okay. Okay. Let's
create multiple frame. Suppose I have multiple frame, where I have used this button. Okay. Suppose I have to change the
color of button in all page, then how can I do it? I will simply go
on main component. I will simply go
on main component. And whatever change
I will do here, it's reflection will
appear here, here. Okay. So instead of changing the color of
each button individually, obviously, this was
time taking process. Instead of doing this method, what we will do, we will
simply go on main component. This is the main component. I these are child components. And whatever change
I will do here, it's the reflection
will appear here also. So let's change the text color. Let's change the text
color. You can see that. Let's apply stroke,
increase the thickness. Let's change the color button. Okay. So this is how you
can apply component. See the main advantage
of component is you don't have to create
each button every time. You will create any
component for one time and you can use it whenever
you have to use it. So this is time
saving process. Okay. Suppose if you have
website like this where you have created
50 different pages. Suppose your senior ask you to change the color
of all the buttons. Then if you will
go in manual way, then it will take whole
day to change the color. See, if you will change color of each
button individually, then it will take lots
of amount of time, maybe one day or two days. Okay. But if you have
created component, okay, then what you will do? You will go on its
parent component. Okay. This is a child component. This is a child component. Obviously, we should
have one main component. We should have one
main component. So we have to go
on main component and whatever change
we will do here, no matter what we are
changing color, text, size. Whatever change you will
do in main component, its reflection will appear
on all over the design, no matter what you have used this button in
50 page or 100 page. At this small amount of effort, you can change the property
of button in all the pages. Okay? This is the
beauty of component. And if you will not
create component, then for a very simple task, you have to do each
process manually. If you will not
create component, then I will ask you to
change the color of button, then what you will
do, you will go here, then you will change
the color and simply you will apply same
thing in all over the design. This is time taking process. Okay. So instead of doing that, just create a component, go on asset, and use whatever
component you want to use. Okay. And with the
help of component, you can edit your whole
design at a few clicks. Okay. So I hope you
enjoyed this lecture. So if you got any
help by the studio, then you can give me a good
positive rating and comment.
8. Variables in Figma: Hello, everyone. So
welcome to all of you in my full master series
on Figma UIUX design. So in this particular lecture, we will learn that
what is variable in Figma and how we can
create it very easily. In a previous lecture, we have already covered
that what is component. So component was a reusable
element like button. Why it is reusable? Because we will invest our time and effort for only
one time and after that, whenever it is required to use, we can easily dragon drop. That's why it is called
reusable element. Okay? So button is
a best example. Button is a best
example of component, so that is component. But what will be variable? If I will create different
variation of this button. See, this is my component. This is my component. If I will create, it's different variation
on the basis of color text, shape and size. Okay. If I will create different
variation of this button, that is called variable. Okay, I think you got my point. So now let's understand how
we can create it very easily. So first of all,
you have to go on blank and was and
you have to make a tangle give corner radius, pal color, and add
a stroke effect. Now, let's add a text button, button. Okay. Okay, fine. So I haven't created
component yet. Text text and button, both are separate here. Okay? I haven't converted
it into the component. Okay. First of all, what I will do, I will create
its different variation. So I will select both
the layer properly, and after that, I
will make duplicate. So with the help of old button, you can easily copy button. Okay. Now, I have to create
a different variation. We have to create a
different variation. So let's say if I have
a dark red color, then other variations would
be light red color. Okay. So this is my second button. Let's make it light. Okay. Similarly, let's change the color of button
to green. Okay? And I will copy same color code into the Fest here. Now let's make a
lighter version of it. I think you are
getting my point. Actually, what I'm doing, I am creating primary button. This is my primary button. And here I am creating
my secondary button. So secondary button is
denoted by light color. Primary button is
denoted by target. Okay. You can create a different variation on the
basis of different text, different shape,
different size. Okay. So here I am creating
different variation of component on the
basis of color only. Okay, here I am creating
here I am creating varion here I am creating variation on
the basis of color. Okay. You can create a
different variation of component on the basis of
size, shape also. Okay. Let's go here, select it. Put blue colour, put blue color, copy its color code, and paste it in second one. And make it light.
Make it light. Okay. So currently, we
have a darker verson, darker person, and
lighter verson, now we have to convert each
element into the component. Okay. Now, here you
have to pay attention. Firstly, we will cover
button and text like this. After that, we will
create component. Okay. So whenever you will convert two element into
the single component, you will see this icon here. Okay? Now let's select button and
text of second element. Now at the left hand section, you can see that text
element have been selected. And rectangle have been
selected properly. Okay. So whatever element
you are selecting, you have to verify that you
are selecting correct layer. Otherwise, you may do mistake. Okay. So whenever you
will select any element, you have to verify from
the left side panel. You are selecting proper
element or not. Okay? So let's convert both the
element into the component. Similar thing we have to
do here, read component. Create component. Create Create component. Okay. Now you can see that we have
a six different component. We have a six different
component here. Now we have to rename them
in smart manner, okay. So you have to follow any
sequence while renaming. Okay. So for an example, this is my component one, this is my component one. So I will double click on text, and now I can rename it. But before renaming,
you must understand that the fundamental
of renaming. So now I will teach you that how you have to
rename your comput. Okay. So it should
be like button. You have to pay
attention here, okay? Button button, slash. Mm button, slash, red, slash active. Okay, so you have to
rename like this. Okay. So now let's
understand what is this. So slash means folder. Whenever you will use slash, Pigma will predict that it
is a different property. Okay. So slash is a folder. Slash is a folder. So firstly, you have
to type button. At the second place,
you have to type color. At the third place, you have to type active
or inactive status. Okay, so let's explore it very practically so that you will understand
it very easily. Okay, so we have to
follow the same order. We have to follow
the same order. Button, then red,
which is color, and after that, status,
active or inactive. Okay, so we have to
follow the same sequence. Okay. So first of all, let's rename this component one. Okay. Now let's type. Let's type button. Active. Okay, because this
is a activist. Okay. Similarly, I
have to copy this, and I will go on second button and its name should be button, red and inactive because light color stands
for inactivist it. Okay. You can also type
disable or enable. You can also type on or off instead of
active or inactive. It is not necessary
that you have to use active text or inactive. Instead of active or inactive, instead of active or inactive, what you can do, you can
use off you can use enable. You can use disable
so here you are free. You can use anything.
But whatever sequence you assigned in first button, you have to follow same sequence
in all over the button. Otherwise, it will not work. Okay? Even you don't have
to do a spelling mistake. Okay? You don't have to
do a spelling mistake. Otherwise, it will make sure that uh it
should be consistent. So here you can see that button. Red Active. Okay. And here you
will see button, slash red inactive. Okay. Fine. Same thing you have
to do with other buttons like if I will go
on component three, then I have to rename button, then green, then active. Okay, fine. Let's
copy, same thing. Go on component four, rename it like button, green button, button, green, and inactive
inactivist Same thing you have to do with
component five. Button, blue, and active. Copy same text, and paste
it in component six. Button, blue, and
inactive. Fine. So I have created I have created six different components
with proper renaming. Okay. Now, if you have done it very correctly,
then what will happen? You have to select
all the component, and if you have
performed it very well, then you will see Opson like, then you will see Opson like. Combine as a variant. Combine as a variant. Okay. So you have to click
on Combine as variant. Fine. Click on
combine as variant. Now, all the components
are converted into the single big component. Okay. Now, here we
have a best part. Property one property two. So if you have done all
the activity properly, then finally we will
get property one, Property one and property two. Have you remembered that we have added slash icon while renaming? Okay. So it was for property. So first property
stands for color. Second property stands
for active or inactive. Okay. So now, the thing is suppose
I have to use component. Okay. This is a new frame where I have to use a component which I
have created recently. Then firstly, I will
go on asset sexon. Firstly, I will go
on asset sexon. So let's go on asset. Inside asset, here I will see here I will see all the components which
I have created recently. So this is a component. Let's click on it.
Inside instance. Okay. So this is a button
which I have created recently. Okay. But the beautyul part was here I'm getting property
one and Property two. Okay. So property one
stands for color, so I can switch into the
any color green, blue. Okay. And suppose I have to get a lighter version of blue color. Then I will go on blue color, and in property two, I will go on in activist. Okay. So whenever you will
use slash icon in renaming. Okay, it will convert
into the property. Okay, suppose you are renaming your button like button, button, slash button, slash, red, slash. Light. Okay. Then what will
happen? This would be your first property and this would be your
second property. So whenever you will
use slash icon, it will consider it like it
is a different property. So here what we
have done actually, we have renamed
this like button. Color, active. Okay. So in the place
of active or inactive, you can use words like enable or disable on or of
okay, light or dark. So you can use anything. Okay. Instead of button,
you can type anything. Instead of button, you
can type component card. You can type anything. So this was our sequence, button, color, and active. So here what is
happening actually. Color is a first property and active or inactive
state is second property. So at the right hand
side of the screen, you will see both the things. Suppose if you have
created a set of components in which you have
assigned multiple property, then here you will see
multiple property sun. Since we have divided
into the two part only, color and active
or inactive state, that's why here we have a
property one and property two. And if you will create
your button like this button button slash size different size,
different text. Okay. So what will happen? Inside the button folder, you will get first property about the darker mode
or lighter mode. Second property about
the different size. Third property about
the different text. Okay. So this is a
beauty of variation. Now I can use any
variation like this. Okay, fine. So
this was a varion. Similarly, you can create
variation for different sets. Like, for an example, um, if you want to create four different sun
of this red button, like 100% red, and
hundred percent red, 80% red. 60% d. Actually, I'm talking about the different sets of
particular button. Okay. So you can easily do it
with the help of variables. So I hope you enjoyed
this lecture. And if you got any
help by the studio, then you can give me
good positive rating. Okay. And if you want to learn
Figma personally with me, one on one live class, then what you can do, you can
contact me in, Instagram, UX through a sir UX professor. So we can discuss everything
one on one about Figma. If you are interested to learn, then you can contact me. Okay. So I hope you enjoyed
this lecture. Hey, Bob.
9. What is Design system ?: Hello, everyone. So welcome to all of you in my full master series
on Figma UIUX design. So in this particular lecture, we will learn that what is design system and how
you can use it in Figma. Okay. So without
wasting any time, let's jump to the
main definition. Okay? This is a definition. Design System are
comprehensive collection of reusable component. Okay. It is a
reusable component. It is a collection of
reusable components. So in previous lectures, I already covered that
what is component, how you can use it, what is
the importance of component. I have covered everything
in previous lectures. So with the help of
design system definition, you can understand one thing, which is component is also
part of design system. If big circle is design system, Then small circle is component. Component is also part
of design system, which means button which
you have created in previous lectures is also
part of design system. Okay. And it is a
reusable element. It is a reusable
element. Reusable. Why? Because you will invest your effort and time
for only first time. And after that, whenever
it is required to use, you can easily drag any
element or component. You don't have to create
it multiple times. You don't have to create it
from the very beginning. Simply, you can create a collection of reusable element and whenever it is required, you can easily drag and drop. Okay. So this is
a design system. Okay? So why design
system is important? Design system is important
for consistency. Suppose if you have a brand, suppose for an example, this is a website. Now, I'm asking you what
is the brand color? What is the primary color of the website What is
the brand identity? So you will say, these blue color
is brand identity. You will say this. This blue
color is brand identity. Okay. If I ask you what is the primary
color of Instagram, then you will say it is little
bit like pink color pink and if I will ask you what is the
primary color of YouTube, then you will say red and black. Okay? If I will ask you what
is the primary color weiter. So you will say blue and white. Okay. So with the help of color, you can make a
consistent design. Okay? So for proper consistency, we will use design system. Okay? So we create design
system on the basis of color, text, size, layout,
guideline, and component. Okay. And as I have
already told you that design system is most
important for branding. Okay? Because each brand has its own unique color
called brand color. Okay. So for proper branding, we should use design
system in whole design. Okay. If you will
see this website, then you will see this blue
color in all over the page. In all over the page, you will see same color. Okay. With the help of this color, we are maintaining consistency, and consistency is most
important while creating UIUX. Okay? This is a core
principle of UIUX. Consistency is a key. Okay. Design System is
a predefined template, predefined temp where you
have created it for one time, you can use it whenever it
is required to use. Okay. Okay, fine. Now the question arises that why design system so important? Suppose I am a CO, CEO of a company. Suppose I am a CEO
of a company and I assigned task to my employees that you have to create
hotel app design. You have to create
a app for hotel. Okay. Then I assigned task to
multiple UIUX designer. Okay. Then suppose I assigned Mm She's Katy, suppose. She's Katie. Okay.
So I assigned work for Katie that she has
to create sign in page. Similarly, I assigned one task to Rahul that you have to
create Home is screen. Okay, so I hired two
different UIUX designer and both the designers are
working on same project. Both the designers are
working on same project. Okay. Then Katty created
this sign in page. Okay. And Rahul
created this homepage. But if you will notice that
there is no consistency. In terms of color, icon, typography, there
are no consistency. So how both the design will
relate with same project, how it will relate
with same project. If you will not maintain consistency on the
basis of color, text, iconography, then whatever
page you will create, all the page will look different
than the previous one. Okay. This is a wrong process. That's why here we will use design system for
proper consistency. Okay. So this is how
design system look like. You will create set of
text in different size. I you will create a color which you will
commonly use in your design. Okay. You will create
pattern like this. Okay. So this is how
design system look like. Now, without wasting any time, let's create a design system. So first of all,
let's take a frame. Okay. So first of all, let's create a design
system for color. What I will do, I will create
a rectangle like this. I'll make a copy. Okay.
So let's enter the color. Dark green. Okay, so
let's type black color. Let's copy same color. Copy same color, paste
it in second one. Make it a little bit more
little bit brighter. Make it a little
bit bright. Okay. Now I will copy same code. Paste it here. Reduce
the transparency. So I have created
multiple sets here. Okay? So this is how you
can create a design system. This is my primary color. Suppose this is
my primary color. Okay. Similarly, I can
create secondary color. Okay. Let's peel
another color red. And let's copy its color code. Okay. So I have created
multiple sets of red. Okay. So this is my primary
color, this is my secondary. Okay. So I have explained you how you can rename your component in
previous lectures. Similarly, you have to
do it same process here. Okay. So first of all, let's click on F one. Okay. And here you
will see four dots. Apply style and variables, click on it and click
on Plus button. Okay. Now, you can do rename like we have already performed in
component lecture. Okay. So let's type one. Let's type Black one. Okay. So I type here Black slash one. So whenever I will
use this slash, it will divide into
the folder. Okay. So similarly, I will do
rename like Black, one, black, two, black,
three, black, four. So if I will not use slash icon between X and number,
then what will happen? All the color will
visible individually. But if I will add slash key like this, then what will happen? I will get Black
and inside black, I will get all the variesens. So this would be
very systematic. So don't worry about that
if you don't understand it. I will show you practically. Okay. So first of all, let's rename first button, Black one. I have renamed this. Okay. Click on Creative Style. So first style has been created successfully, you can see here. Okay. Now, click on second
button, go on four dot. Click on Plus button.
New Style in variable, and paste name lack slash two. Creative style. Okay.
Now go on third one. Add Plus button. Lack slash three. Go on four dot plus x four. Okay. Fine. Similarly, you have to
do four red color, too. Okay, so click on red color, go on four icon. Okay. And see, I have already
created red one, red, two, red three. Okay. So first of all, let's las button. Red one. Red less one. F dot plus icon, red two, create style. Red three. Rates less four. Okay. Now, suppose you have
to use this color. Okay. Then what you will do? Suppose I have created this
frame and inside this frame, I created a circle. Okay. So suppose I have
to apply this color. Okay. So I will not use pill. I will not use fill option to
feel color. This is wrong. So whenever you will
create design system, you have to put color like this. First of all, you will select those objects in which
you have to feel color, I selected the circle. Now I will go on four dot, and here you will
see here you will see whatever you have created. Dot. Here you will see the
systematic order. As I have already told you that, I am renaming it like this. Red one, red plus
two, red, plus three. So it will look like
there is a folder, red, and inside red,
one, two, three. Similarly for black, I will
get black, one, two, three. This is a systematic process. So suppose I have to fill
color on red circle. So I will click on
circle and go on apply style and
variables. Scroll down. And here you will see
black folder, red folder. Okay, so let's put a black two. So this is how you can feel. And if you want to delete it, so you can delete
it from the here. Okay. Suppose I created
another circle here. I have to feel color
on this circle, so I will go on four dot Suppose I have to fill
red color red, too. So this is a main folder, red, and inside red, we have
a one, two, three, four. Okay. So whenever you will use slash icon in your renaming, it will divide it as a property. So this is how you
can use it. Okay. Instead of that,
what you can do? You can do rename like this. You can do rename like this. Primary lack one primary lack and so on. You can do name like this. So whenever you will
use this slash key, it will consider it as a
two different property. First property is for black and second
properties for number. Okay. Also, you can
do name like this. Primary primary, Black dark. So you can do rename
like this also. Okay, dark, darkest,
lightest, light. Okay. So whenever
you will use icon, slash key, it will divide it
into the different property. You can do rename like
primary colos red, secondary colos Black. Okay. So you are free to rename. Okay. So just you
have to think about that no matter which kind
of sequence you are using, but it should be consistent in all over the design system. So I have created design
system for colors. Okay. Similarly, you have to use design system for
text, typography. Okay, so let's expand the frame. Okay. Now let's create design
system for text. So first of all, let's
type here heading. Heading. Okay. So here you can see
that currently, quanti style is pop
ins, regular 36. Okay. Now you can copy this and
you can reduce it to the 32, then copy this 24. 20. Okay, or you can
type paragraph. Okay. So this is your typography. Okay. And in a single design, you don't have to use more
than two different fontistyle. I'm saying that you
don't have to use more than two funtistyle
in each design. In each design, you have to use maximum two different
kind of font tist. In your single design, it should not consist more
than two different font. This is a design fundamental. So I have created
four different size. Okay. Also, you can
change its thickness. Okay? So I have created four
different verson very randomly. So you can assign how
you can assign it. Again, you will go on four dot. First of all, let's
select that text, go on four dot and add on
plus icon creative style. Here you can type anything. So let's say heading one. Let's say heading one
is our first text. Then go on Edding two. Adding three. Adding four. So suppose I have to use this. Okay, so I have created
four different typography. Okay. So suppose
I have to use it. So I will go on this frame. Here, I will take kit. Okay. Now, if I have to apply any of these design
system, then how can I? First of all, I will
double click on my Name and after that, from the here, I
can choose anyone. Heading one, Heading two, Heading three, heading
four, paragraph. Okay, so this is how you
can use design system. Okay. So when you will create this when
you will create this. Suppose you are creating
website like this. You are creating
website like this. Then what you will do, you will create your design
system for color first. You will create a
rectangle or circle. This is only for
reference. Okay. And what you will do, you
will copy this color. Okay. So this is
my design system. Okay. So I have created design
system for this website. Okay. So whenever I have
to apply this color, simply I will click on those element and I can
fill color from the here. Okay. So this is a
beauty of design system. Similar thing you
can do with text. So basically, it is a
predefined template. It is a predefined temple. Here you can see
that I have used this particular color
in all over the design, in all over the design. That's why for reference, I created a design system, and in order to
make consistency, I will use same color. Okay. So this is how you can create your own design system. Okay. I hope you enjoyed
this lecture. Bye bye.
10. Autolayout in Figma ( part 1 ): Hello, everyone. So
welcome to all of you in my full Master series
on IgMaUIUX design. So in this particular lecture, we will learn that
what is auto layout. Okay. So without
wasting any time, let's start our video. Okay, so first of all, let's discuss about
its definition. Okay, so Auto layout is a design feature
that automatically adjust an element
within a frame. So there is a frame which consist lots of
amount of element. So whenever you will decrease or increase
the size of frame, the elements which are inside that frame will automatically
adjust its posison. Okay, for an example, for an example, let's
take a practical project. Okay. This is a frame. Okay. This is a frame, which
consists of many elements. Okay, so this is a frame. This whole body is a frame. And inside that frame, we have many elements
like this, this, this. So frame consist
of many elements. Okay. So whenever you will increase or decrease the size of frame, its element will automatically
adjust its position. For an example, if I'm
decreasing the width of frame, then you can see that
image is adjusting its size automatically on
the basis of frame width. So this is called autoyout. So in autoout in autoaout
we have a frame. Otoeut is a design feature
that automatically adjust and align with
element within a frame. Okay, so for an example, let's take a container. Let's take a container. Okay. So this
container is a frame. Suppose this
container is a frame, and container consists water. It consists of water.
It is a container. Okay, so let's say
container is your frame, and water is your element. Okay. So just imagine one thing. This is your container. This is your container,
which consist water. Okay. So what will happen if I will increase the width of
container? What will happen? Obviously, if I will increase
the width of container, then water will adjust
in all over the space. Okay, here I have mentioned
four reference point, one, two, three, four, which is nothing but a medium to show you how auto
layout works. Okay. So if you have extra space, obviously, you will occupy that. Okay? Suppose you are traveling with your four friends in bus. Okay, suppose you are traveling
in bus with four friends. So suppose if you
have a limited seat, then you will adjust
in a very small place. Okay. But whenever you
will get extra space, you will occupy whole
space, okay? Okay. So this is a frame. If I will increase
the width of frame, element will adjust
according to the frame size. Okay. Let's take another
example. This is a button. This is a button.
Okay. This is a frame. This is a frame, and
inside that frame, we have a element, right? We have a frame, and
inside that frame, we have a element. So now, what will happen when I will increase or
decrease the size of frame, its element will auto adjust itself according
to the frame size. Okay. Now you will notice one thing that it is maintaining
its position. So if I will increase
the height of fame, again, element is
maintaining its position. So this is called auto layout. So auto layout is
a best feature of gma which allows element to adjust its position
according to the frame size. Whenever frame size will change, its element will automatically
change its position. Okay? So, uh, whenever we
have to design any app. Okay, then we will not create
separate design for mobile, separate design for desktop, separate design for tablet. Okay? As you know that, we have multiple frames. If you click on frame, then here you will see. We have a frame for tablet, desktop, tablet,
desktop, and phone. Okay. So with the help of
Autoayout, what you can do, you can create your
design and you can optimize it for
different size. You can optimize
desktop app design for tablet view for phone view. Okay. So this is a
beauty of Autoeyout. Now let's learn
how we can do it. Okay. So first of all, I will explain you
it's property. Okay. After that, we will
apply auto layout effect. But before that, we should
understand it's property. Okay. So here we have two thing. Can you see this blue
line this blue rectangle? This is called frame. And inside that, we
have a element. Okay. So whenever I will increase or decrease
the size of frame, its element will adjust its
position and size also. Okay. So let's increase the and you can see that it is
maintaining its position. It is maintaining
center position. Okay. Now, you have to
look towards this side. Here you will get
icon like this. Can see that? This is a different pogison
of element within a frame. Okay. So here you will see
here you will see a small box. Here you will see a small box. Can you see this? Okay. And my English is a little bit poor because
English is not the tongue. Okay. But you should
focus on my knowledge. Okay? You don't have to judge my English speaking skill
because English is not. Okay. So here you can see that Black dot
represents element, and red box represents Frame. Okay. Fine. So whenever you will
select your frame, whenever you will
select your frame, you will see alignment option. So if I will click
on top corner, then you will notice
that you'll notice that its position have
been changed. Okay. So with the help of alignment, you can change its position. Okay. So this was a alignment
option. This was a alignment. So if you will
make it in center, then what will happen if you will increase or decrease
the size of frame. So it will make its
position in center anyhow. Okay. If you will make it
towards the left Pogison, then it will make
it left pogison. If you will click on right, then it will maintain
right pogison. Okay. So whenever you
will create button, you have to make it
in center, Okay? It is Similarly, we have a frame for
the students icon. Okay. So if I will
click on top left, then elements will move
towards the top left corner, top center, top right, center, middle right,
middle, middle left. Okay. So this is how you
can assign its center. Okay. Okay, fine. Now, whenever you will apply auto layout in more than two elements,
then what will happen? Here you will see gap. Here you will see gap. Okay. Actually, when I
will hover my mouse, sorry, then you
will see this gap. Can you see this purple line? Can you see this purple
line? This is called gap. This is a gap between
each element. Okay. So where you will
find it, this is a gap. This is a gap. Okay. So suppose you are
increasing it from here, then also, you will see same
change will appear here. Okay. So you have
both the option. Either you can change the value from here or instead of that, you can change the
value from the here. Both the things are same. Okay. And uh you have to pay attention here because
suppose I type here 50. That means whenever I will increase or decrease
the size of frame, it will not change its gap. Okay, Gap will be 50, no matter what, I'm increasing or decreasing
the width of frame. Okay, Gap is not a Okay. So if I will decrease
it too much, then it is not working. But if I will click on Hit and type Auto and hit
the Enter button. Now what will happen? Is element will adjust
according to the frame size. Right? Is element will adjust
according to the film size. Fine. So you have
both the option. So if you are going to put the value of gap
between each element, so you have both the option. Either you can enter any value. So if you will enter
any value like 50, then it will make
consistent distance of 50, no matter what you are increasing or decreasing
the frame size. It will keep distance 50. Okay. And you have another option, which is set the gap
to the auto. Okay. So when you will set
your gap to the auto, then it will
automatically adjust its distance between
other elements. Okay. So let's
repeat same thing. So first of all,
what you have to do, you have to select a frame. And after that, if you will
hover between this gap, then you will see these
purple hatching lines, which is representing the
gap between each element. This is a gap between
each elements. Now you have both the option. Either you can
enter a fixed value or you can set it to the auto. Currently it is in auto. Currently, our gap
is set in auto, which means if I will increase
the width of my frame, then gap will also increase. If I will decrease
the width of frame, then gap will also decrease. If I will enter any
fixed value like 40. Then it will ask you to
align them properly. I am aligning it in center. Now, if I will decrease or increase the width,
AP is consistent. Here, AP is consistent,
40, 40, 40. So you have both the option. Either you can put any fixed value or you
can set it to the auto. So I have explained
both these scenarios.
11. Autolayout in Figma ( part 2 ): So guys, um, so this is a frame, and here we have assigned
the gap to the auto, which means whenever we will increase or
decrease the frame size, Gap will auto adjust itself. Okay, according to
the frame size. So if I will increase
the frame size, then gap will also increase. If I will decrease
the frame size, gap will also decrease. Okay. But there should
be a limit, right? For an example, if I will
increase frame width too much, then you will notice one thing, which is all the elements have been merged together
and it is looking ugly. This will spoil
your whole design. Okay, so you have to apply. You have to apply minimum
width and maximum width. You have to restrict
your design dimension. You have to restrict
your design dimension like maximum and minimum. Okay. Basically, you are limiting
your design flexibility. Okay? This is maximum limit, and this is minimum limit. I think you are
getting my point. Okay, so if I will
decrease the frame width. Okay. Now here, I have to
apply minimum width limit. Then what I will do, currently, our width is 1508. So I will copy that limit. Okay. And since we have
to apply width limit, that's why I will go on width. Suppose I have to
apply height limit, then I will go on height. Here we have to apply
limit on width. That's why I will go on
width, let's drop down. And here we have a
add minimum width, add minimum width value here. Okay. So here you can see that I have added
minimum width of frame. So from the nu,
what will happen. Whenever I will decrease
the frame width, it will decrease 1508. Okay. After that, I can't
decrease the width of frame because I have
restricted, okay? And same thing you have
to apply for maximum. Okay, I I will decrease, sorry, if I will increase
the width of frame, then there is no limit, I can expand it
according to my need. But it is necessary that I should assign
maximum limit to. Okay? If I assigned
minimum width, then I should also
assign maximum limit. Okay. So suppose this
is my maximum limit. Then what I will do our
current width is 1961. I will copy this drop down. And here you will see
add maximum width. Okay, so put the value. Okay. Now what will happen? It will increase or decrease within a maximum
and minimum limit. Are you able to understand
what I'm trying to? I have assigned maximum
limit and minimum limit, which should not cross. Okay, I have assigned
minimum limit. I have assigned maximum limit, it should not be cross. Okay. Fine. Full. Okay. I think you
got my point, right? So let's decrease the gap. Okay. Let's make it in center. So I have assigned gap 55. Since I have allotted a gap 1 minute, Okay. Since I have allotted
a gap of 55, which means this gap is 55. I have assigned that no matter what I am increasing the frame or
decreasing the frame. Okay, it will keep
maintaining 55 gap. Okay. From here, you can change also. Okay, fine. Now here you will see
option of padding. You can see that. This
blue line is padding. Padding is a distance between your frame
and your element. For an example, C. This is called padding. This is called padding. This is horizontal padding. Similarly, we would
have vertical padding. Okay, so this is a
horizontal padding. So this is your element. And this is your frame. So padding is a distance between padding is a distance between element and frame. Okay. Similarly, you can assign
padding like this. Okay. Now let's explore another thing. Here we have different layout
like horizontal layout, vertical layout, so you can
change your layout like this. Okay? Fine. Okay. Now, we have
another frame here. We have another frame. As I have already told you
that, frame consist elements. Okay. Frame consist element. This blue line, I have added a stroke effect so that
you can see frame. This blue line
represents the frame. This blue line
represents the frame, and inside that frame,
we have a two element. First element is image, second element is text. Now, let's understand about
the properties of element. We have already learned
the property of frame. Now we will learn the
property of element. So first of all, let's
select the image. Let's select the image. Okay? So I width sexon you
will see pill pill container. So what does it means? Pill container act like a water. Pill container, act like water. This is the best example
of fill container. This is a frame which
consists of water. This is a frame which
consists of water. So if I will increase
the width of frame, then water will spread
in all over the frame. Okay. If you will
give extra space, then it will occupy. Okay. Here you can see. I increase the width of frame. So its elements are adjusting
according to the size. So same thing applies here. If I will click on this image, and I will go on width
section and inside width, if I will click on
field container, then what will happen? And see, you have to
remember one thing which is Peel container is a
property of a element. Okay, and element will behave
according to the frame. You have to remember this thing. Well container is a
property of element. This image, this
image is a element. Here we have applied
pill container. Feel container. Weld
container acts like water. Okay. So field container
is a property of element. In the place of element,
it could be anything. It could be image or text. Anything which is inside
a frame called element. So you will see field container
in element, not in frame. Okay, so wheel container is a
property of element, right? And element will behave
according to the frame. Okay. So I have applied field
container effect on this image. I have applied field container
effect on this image. Okay. So when it will behave? If I will do any
change with frame. Okay. So if I will decrease or
increase the size of frame, then its element will auto
adjust its size and position. Okay. This is a beauty
of a fill container. So let's repeat same thing. Okay. Let's repeat same thing. You have to watch this
particular lecture more than three times
three to five times, because this is a
little bit confusing. So this blue line
represents the frame. Okay. And I have added a blue stroke effect
in frame to show you. Okay? Otherwise, frame
will not look like this. Okay. Inside that frame, we have two elements. First element is image, and second element is text. Okay. So first of all, we are talking about this image. Okay. So when we
click on this image, then at the width section, we apply field container effect. Okay. So field container is
a property of a element, which will adjust according
to the frame size. If you will decrease
the size of frame, element size will also decrease. If you will increase
the size of frame, element size will also increase. Field container is a
property of a element, which is totally
depends upon the frame. So I frame will increase,
element will increase. If frame size will decrease, element size will decrease. Let's demonstrate this if
I will decrease frame. So you can see that its
size is changing now. Okay? Fine. Same thing you can
apply on height also. Let's click on image. And if I will apply field container on height,
then what will happen? If I will increase the height, then its image will auto adjust according
to the free space. If I will reduce the height, then you can see that
image height also reduced. If I will increase
the height of frame, then you can see
that elements height is also increasing according
to the frame height. Okay. So here you have a
will container option. So if you will click
on image and go here, here you have a fixed width. So here you have two
different option, field container and fixed width. Suppose we have explored
the field container, right? So let's click on fixed width. And let's adjust
the width. Okay. So fixed width means, obviously, it will not change. It will not change. If I will decrease or
increase the size of frame, width is not changing, right? Width is not changing. If I will increase the height, then image is adjusting itself because if you will click on image and
go on height Sexton, currently it is selected
in field container, which means it will adjust its height according
to the frame height. So if you will fix its
height like this, now, no matter what you are
increasing or decreasing it, its height is not changing. So you have a two option.
You have a two option. We are talking about element. We are talking
about element size. Okay. So when you will
click on any element, no matter what you are
clicking on image, icon, text. Okay. Whenever you will
click on any element, you have two option in width and height, width and height. You will see this option
in width and height both. Okay. What option you will see? Will container. Feel container and fix. So when you will assign field container property,
then what will happen? If you will increase
the size of frame, element size will also increase. If you will decrease
the size of frame, element size will also decrease. But if you will select
fixed width or height, then it will not change its height and width
according to the frame. Okay. I think you
got my point. Okay. So I have covered the basic
things about the auto layout. Basically, I explained the
property of auto layout. Okay. And also, we have one thing
which I should teach you, which is 1 minute. Okay, so if I will
click on text, if I will click on text, I'm selecting another element. So here we have a field
container option, and hug content is a new option. So I have already explained
the field container. I have already explained
the fix width. Here we have hug content. So what will happen?
First of all, let's adjust the width. Okay. So I have assigned
the hug container. So whenever you will
assign HGA container, it will lock its position. Now, if you will increase, if you will increase or decrease the width of your frame,
it will not move. Basically, it will say, I will not move from here. Okay, I will lock its position. So this is called a hug content. Okay. This is
called Hug content, which can be apply on text. Okay. Okay, fine. Let's select the text. Let's select the hug content. Let's decrease the width. Okay. Now, if I will decrease
or increase the width. Text position have been logged. Okay, it is not changing
according to Okay. So I have covered everything. Firstly, I covered everything
related to the frame. Frame consist many elements. Okay, frame consist
many elements. And whenever you have to change anything related
to the alignment, you have to click on frame. Okay. After that, I explained to
you all property of elements. So in elements, we have a re property fix
field container. And ug. Okay. So if you will click on Fix, then no matter what you
will change your frame, width or height, it will fix. If you will use field container, then it will auto adjust its size according
to the frame size. If you will click
on Hug content, then element will lock
its position and it will not move no matter what you are increasing or
decreasing the frame size. Okay. So I have
covered everything. And in the next lecture, I will teach you how
to apply autolayout. Okay? I have covered the basic
property of auto layout, and in the next video, I will teach you how to apply
autolayout in your design. Okay? If you got any
help by this video, then you can give me a
good positive rating and comment so that I
can motivate myself.
12. How to Create Responsive UI/UX website Design in Figma ?: Hello, everyone. So welcome to all of you in my full master series
on Figma UIUX design. So in this particular lecture, we will learn how can we create full responsive design
with the help of Figma while using
AutoeoutFeature. Okay. So without
wasting any time, let's start our video. Firstly, we will replicate
this website, okay? We are using this
page as a reference, and we will try to
replicate this page. Okay, so first of
all, let's take a dextoFrame where we will
replicate our design. Okay. So first of all, let's create a tab. Okay. Let's create a tab. So first of all, let's take
a text tool and type home. After that, with the help
of Control plus D button, you can duplicate this
and you can take courses, community contact and about us. Now, you have to select all of them and you can change
its property from here. You can make it aligned
properly, okay? Align them properly. And with the help of
these three line, what you can do, you can provide a equal gap between each text. So make sure to click on that. Now finally, we
have a equal gap. Finally, we have a equal gap. Now let's click on that. And here we have
autoayout option. So click on that. With
the help of auto layout, you can make it responsive. Okay? Now, at the
right hand side, you will get its property. Okay? And this is called frame. So this is a frame one, and you can rename
this like tab. Okay? For easy navigation,
you can rename it. At the left hand side, you can see that we have
a new layer called tab. Okay. Now at the right hand side of the screen, we
have a property. So with the help of
alignment, what you can do, you can align your element
with respect to your frame. So you can align them
properly in center. Okay. Now let's increase the height Okay. So here you have a alignment. So if you will click
on top left corner, it will move towards
the top left corner. If you will click on
top right corner, then it will move towards
the top right corner. So this is how you
can align them. If you will click on
top, bottom, sorry, bottom right corner, then it will move towards the
bottom right corner. So if you are going
to create a tab, then it should be
in center, okay? Now, here we have a horizontal padding and vertical padding, so this is a gap between
your frame and text element. Okay? So you have to
assign them properly. This is a gap between
your frame and element. Okay, now let's decrease
the size, okay? Now let's talk about the gap. From here, you can manipulate
the setting of gap. Either you can enter a fixed
value or you can enter auto. So let's select auto. If you will select auto instead of fixed value,
then what will happen? Gap will vary according
to the frame size. If you will increase
your frame size, gap will also increase. If you will decrease frame size, then gap will also decrease. Okay. So so similarly, if you will enter any fixed value instead
of putting it auto, if you enter any fixed value, then it will maintain same
gap between each text. Okay? So you can use both the things
according to your need. So suppose you can type 50, 40, then it will
maintain same gap. Now, in order to fill color, you have to go on First of all, you have to select your frame
and you have to go on feel. And from here, you can
choose your primary color. So I will use blue
color as primary color. Now let's change the text. So for a specific selection, you have to use Control button, and for multiple selection, you have to use Sift button, which means you have to use
both the button together. Okay, Sift control
and mouse click. With the help of
this combination, you can select all text. Now select whole elements
and make them component. So this is called
parent component. And whenever we will use it, it will call child components. So I will go on asset section, and here I will get my parent instance instance
means child component. Now I will adjust
its size, okay. Let's adjust it here. This is my parent component. This is my parent component, and this is my child component. So whatever I will do
in parent component, it's reflection will
appear on child component. If I will change the
color of parent, then it will reflect
on child also. Now let's create the
logo of website. So let's take a
name I school Hub. You can change the
property of text. You can increase the size. You can change the
thickness of each text. You can change the text color. So let's select school and
apply our theme color. So in order to apply that, you have to go on four dot
and you can apply like this. Now, I will download one logo, which I will attach
with my logo. Basically, I have to attach
that logo with Ikolhub. You can create your
own logo like this, so we will merge
both the elements. Let's align them properly. Now, let's align them properly. Now select all the element
and apply auto layout. So with the help of autoayout, you can easily change the
position of your two elements. Like this, you can
change your position. Now let's rename this logo. And if you want to
create a component, then also you can create
a component of your logo so that you can use it whenever
it is required to use. So let's place our logo. Now it's time to create
a banner of our website. So I'm creating banner
with the Alpha rectangle. Now, let's upload
image from here. Let's select any image. I think I should use this image. Okay. It is looking nice. Now, let's increase
the height of our frame so that
people can scroll it. Now we have to create
other elements, too. Like we have to create
this image rectangle. I have to create this one, apply for fall spring. Okay. So let's try to
replicate this website. So I have created
many rectangles, big rectangle, small rectangle, and super small rectangle, and I am merging
these two elements as a group so that it
will move together. Okay. Let's adjust its position, align them properly, and we have to write a text like
apply for fall spring. So I will type
something different. Let's type explorers. You can change the
setting of text You can decrease or
increase your thickness. Let's align them and let's
adjust its position. But before that, we
should apply auto layout. Now, let's adjust its position. Now we will select both the elements and we
will create it as a group. Okay? Now here we
can upload image, but before that, we
can duplicate it because we need this
element three times. Now what I will do, I will apply auto layout effect between
these three elements, but before that,
let's align them properly and create
a consistent gap. Okay? And you can
round your corner. Since we have selected
all the three components, that's why if we will
change the corner radius, it will change at the same time. Now select all the elements. And again, we will
apply auto layout. Now, if you will type
here any fixed value, then it will be fixed. Now let's create a heading. Start your UX journey with us. And now we will
arrange it properly, and I will select
all the element, and I will apply autoeu effect between
all of these elements. You have to make
sure that autolaout is applied correctly. Now you can manipulate
its distance. Fine. I have created this frame. Okay? Now let's drag image
and place it like this. Again, we will
apply auto layout. Basically, what I'm doing here, I'm applying auto layout
in a small element. After that, we are merging it
with another element, okay? Okay now let's drag
it in our frame. Now we have to upload image. I will go on image
and video inside Rectangle tool and I will select multiple image
with Control button. With the help of Control button, you can select multiple
image and you can drop your image with the
help of left click of mouse. It is super easy. Now let's type connect with our
current students. Let's adjust it and let's
create a paragraph. Here I'm skipping this video because this is a
repetitive process. Okay? If I will not
skip some area, then this video would
be very lengthy. Now, apply autoayout.
So basically, you have to divide your website into several parts,
and after that, you have to merge all parts
into the big auto layout. So basically, you have to divide your website
in small groups. You have to apply autolyou in those small groups,
and after that, you have to merge all the small groups
with the help of auteut. Okay. Now, let's select connect
with our current student, and from the width section, we have to select
a field container. So with the help of
field container, what you can do, it
will act like a water. So we have a frame, and inside that frame
we have a water. So if you will increase
the width of frame, then what will
happen Water width will also increase with
respect to container width. Similar thing work
with our website also. So connect with our
students is a text element, and it is currently
inside the frame. So I have selected the field
container property in text. Okay, so it will
work like water. If I will decrease
the width of frame, then it will also decrease. Similarly, you have to
select your paragraph, and again, you have to
apply field container. Now, it will adjust its position according
to the frame size. If you will decrease
your frame size, then also it will decrease. And from here, you
can adjust the gap. You can change value from here. Okay. Now it's time to create a different sexon of our
website like profile sexon. Okay. So let's try
to replicate this. Let's create a rectangle,
bigger one rectangle. Make a corner radius. Now select a white color. Create a small square
box for profile, create a smooth corner,
align them properly. Now let's create another
rectangle over here. And we will use primary color
to fill this rectangle. So blue color was
our primary color. Now I will adjust
this like this. Okay? So select a square box and make it in
front of our frame. Select, bring to front. So if you will click
on bring to front, then it would be top layer. Now let's type a
text profile name. So I'm typing my name Ankit Now, I have downloaded
a on profile icon. For icon, you can
use plugin also. You can adjust it. Now I
will apply autoayout effect between these two things Ankit and that icon, apply
autoeout effect. So basically, you have to apply autoayout in a small element, and after that, you have to
merge it with big elements. Similarly, let's create
a UIUX designer text. I will align them properly. Similarly, let's type
online align them properly. Now we can apply auto layout effect
between these elements. So select all the elements
and apply autoyout. Select all the elements
and apply autoayout. So I have deleted a online text because
it was looking ugly. Now I am creating the button
called hat with Ankit. So I am downloading
PNG image of chat. You can also use plugin. Let's decrease the size. Select the text and icon, make it align properly, and apply Auto layout. Now increase the frame size, and you can convert
them into the button. You don't need a rectangle here. You can convert your frame
into the button like this. If you will feel
color on your frame, then it will convert on button. Now let's change the text color. Adjust it properly. Now, I will select
whole element, and I will apply Autoout, but it is looking ugly. So what I will do, I will
remove Autoot and after that, I will merge these two
element as a group. Now I will apply Autoout. Okay. So sometime if you
are getting any trouble, then you have to try to convert any two
element as a group, and after that, you
can apply autoout. Okay. So let's replicate them. So whenever you are facing any difficulty while
creating Autoeout, then you have to smartly group any two element
and after that, you have to apply Autoayout. Now let's upload all image. With the help of Control button, you can select multiple images and you can easily
drop it like this. Now select our frame
and apply Autoaout. But you can see that it is not responding according
to our need. Then what we will
do, we will drag our all component like this. Since it is responding
according to our need, that's why we don't need
a white frame anymore. We can convert this frame
into the white frame. Just select your frame and you can feel your color like this. You can feel white color. You don't need a white frame. Okay? Let's adjust the text. Now let's drag our logo
inside our new frame. Let's adjust it. So, guys, you can see that it
is working fine. So finally, we have
created a responsive page. Okay, guys, if you
enjoy this lecture, then don't forget to give
me good positive rating and comments so that I can motivate
myself. Okay, bye bye.
Ankit Shrivastava
