Transcripts
1. Figma UI UX Course Introduction: Welcome everyone to my course. I'm Aaron. I'm a UIUX designer. I will teach you how to create
UIUX design with FIGMA. So we will discuss
about what is UI, what is UX relationship
between UI and UX. At last, we will discuss
about the FIGMATol we will use to create
E-commerce UIUX design. So this is our course agenda. Let's start the course.
2. Figma Class 1 : What is UI ?: We will discuss
about what is UI. So UI fulfm User Interface. So when the user opens
your application, first, they will
see your design. What are all the
colors you are using? What are all the text
topography you are using? What is the design
you are using? That is the first they
will see. That is the UI. So you can see that
User Interface. It is the visual
interactive layer of the product like buttons, layouts, topography, colors, micro interactions that
people see and use. So design is very,
very important. If your design is not good, people will ignore
your application. Visual designs like typography, font size, font family, colors, what are all the
colors you are using, matching colors, attractive
colors you are using, iconography, icons you are
using for your applications, spacing, spacing is nothing like one space of button
to another space, how many distance you are using. That is the spacing. That
is the visual design. And interaxensH one button is interacting to
another button, how one page is interacting
to another page. That is the interaxen interaxens
like Osay transitions, feedback that guide user acons. And then responsiveness. If your design is suitable to all applications like Android, IOS, iPad, iPhone,
desktop web applications, that is the responsiveness. Your design will be response
to all other platforms. So designs that adapt to screen
sizes and input methods. Screen sizes is nothing but
for a desktop 920 pixel in thousand 80 pixel
for mobile phones, it will be 916 or one is one. That is the responsiveness
design sizes. So this is the UI. UI is nothing but it is a
design of your application. Your design must be
good and easy to use.
3. Figma Class 2 : What is UX ?: Now we will discuss
about what is UX. So UX is nothing but
interacts and experience. So you are creating a button. So if the user
selects the button, it goes to another page. So that is the interaxonsH the user experiencing
your application. User Experience, focus on the overall field effectiveness
of your application. So mostly, if you are
creating any applications, you need to research first. You need to research the users, what applications
you are creating. First, you need to
understand the user, and then their goals. What are their goals? And then pain points. Why are they are rejecting
other application? Why they need to use
your application? For that, you need to find the pain points
and then context, and then description
of your project. So first, you need
to find your users, and then you need to find
the goal of your users and why they are suffering
in the other product, why they need to change
to your product. You need to find
the pain points. So for example, in some
other applications, they are very struggling
to use the applications. But in your application,
it is very, very simple, very,
very easy to use. That is the pain point. You need to find
the pain points. And then strategy.
Strategy is nothing but you need to construct
perfect architectures, perfect goals,
perfect user flows. One page goes to next page. Next page goes to another page. The flow will be continuous. And it will be easy to navigate. That is the second strategy.
And then validation. You need to check
whether our application works properly or not. You need to test your prototypes and you need to get
the user feedbacks. And then you need to update,
upgrade your applications. So this is UX, User Experience, how they
experience your application. Basic, you need to research first and then
understand their goals, and then get the feedback and then update your
application. That's it.
4. Figma Class 3 : UI UX Relationship: We will discuss about
relationship between UI and UX. So both are combined. Without this, this
cannot be work. Without this, this
cannot be work. Without UI, without
design, UX cannot be work. Without the experience,
UI is waste. Okay. So UI is the
visual implementation, how the user sees
your application, how the user sees your design. UX is nothing but how they are
experiencing your product, whether they are struggling
or easy to use your product. And then prototyping is nothing but how you are
getting the feedback, how you are testing
your application and iterating your application. Okay, that's it. So this is the relationship,
design and experience. Your design is good, experience is good, then
your application is success.
5. Figma Class 4 : Designer's Tool: We will discuss about why
designers use Figma why they are preferring Figma
to create UIUX design. So first thing, real
time collaboration. They can collaborate with their team members,
UIUX designers. If your team contains ten
members, they can collaborate. One member can
create login page. One member can create home page, one member can create product page like that.
They can collaborate. And then component system in FICMA there is
a community page. In that you can find
a lot of templates, lot of components, lot of icons. You can use those
components for your design. So that's the second advantage. And third, interactive
prototyping. After you complete your design, you can easily
create a prototype. That's the second,
third advantage. And then fourth, there
are a lot of plugins, interactions available in Figma. So this is why users prefer
FIGMA to create UIUX design. So in the next class, we will discuss about FIGMATol and how to create a E-commerce
UIUX design in Figma.
6. Figma Class 5 : Figma Tool Community Page: Okay, now we will
discuss about how to install FICMA in our system. Then we will discuss about
how to create our first app. So for that, you need to open the official website of FICMA. Inside that, you need
to check for your OS. So I'm going to use Windows. If you are using MAC, you can download Mac. I'm using Windows. So it will start to download
o to wait for that. After that, you need to
create your account in FICMA. So you need to log in with the ICMA and then
create your account. Just wait for the installation. So just open the EXE five. Okay. You have to login
with your account. So just select your browser. Okay, now we are successfully
login with our account. So just open the desktop app, and then you have to
select Open FICMA So this is the
interface for Figma. So you can see your
account information, and then you can see
recent files community. So in communities, you can
find a lot of templates, icons for your design. For that, for example, I will saw some templates
and icons, icons. If you select icons, you can see a lot
of icons useful for your design applications. So if you are creating
any mobile applications, you can find mobile
applications. Or if you want any
specific icons like social media icons
or website icons, you can also find here
from the community. So let me check so I
will check the fast one. There are some paid. You can also use paid icons or you can also use free icons. We will check the free icons. So this is free. You
have to open Figma. This is the free one, scroll down, you
can see the icons. So I think it is not usable,
we will check another. So we will check this.
Okay. So this is usable. So you can just copy this
and then you can paste here. Okay. Likewise, you can use the specific icons
for your design. So communications, lot
of icons, ecommerce, lot of icons, Pis lot of icons, arrows, you can use a
lot of arrows here, media, you can also use the
media icons, interfaces, reload like that,
you can use EOGs, math calculations,
general components. So a lot of icons will be
present here. You can use that. This is the example for icons. We will check logging page. Okay. Logging page, Template. Okay, we will check this. I think this is image only. We cannot use any
icons from this. So you can check the templates. If you want this template, you can use for your designs. So we will check another. So these are the examples
for web page login. We will check for mobile login. Okay. So this is editable
login page template. Okay? You can edit the text. You can edit those So
this is the template. From this, you can
find the designs. You can check the designs, how they are designing
the log in page, how they are creating
the log in page. What are all the components you needed from this template? You can copy those. This is how you can use the
Community page. So that's the advantage
of community pages. You can check the templates, you can check the
icons for your design. And then you can
find the drafts, folders, resources, and trash.
7. Figma Class 6 : Figma Tools Overview: So now we will see how
to create a sample page. For that, you have
to select design. So you need to close this, and then we will change
the name, rename the Pi. E-commerce app design. Okay, we will create
ecommerce app. So first, we will check
the options available in the design page.
This is the file. What are all the files layers
present in your design? It will be present
here, and then agent. So there is an A agent you
can use for your design. And then assets, what are all
the assets you are using? Like icons, templates like that? It will be present here. And then tools, what are all the tools you want
to use for your design? It will be present here,
and then variables. If you are creating
any variables, components or like that, it will be present here. So here you can see the
designing options like Mo tool and then hand tool
hand tool scale tool, if you want to scale
anything you can use. Mostly, we will use
Motool then frames. So this is the
frames. If you want to create any IOS frames, it will be present here. For example, if I want to
create iPhone 17 design based, you to select this, then the frame will
be created here. Or if you want to remove this, you can simply Select
delete option. Okay? It will be deleted. Or if you want to create
any frame for tablet, you can use the absence like
iPad surface like that. So you can select this. If you want to create
the design for pad iPad, you can select this frame. If you want to delete, you
just select delete option. Or if you want to create any social media watch,
paper presentation, desktop desktops like frames, you can use the options. Now we will create a IOS design. You can also use Android, but I will use IOS iPhone. Also, you can check the shape. If you want to create any
rectangle shape you can use, if you want to create
any line you can use, if you want to create
any arrows you can use, if you want to create eclipse, you can use the option. You can use polygon, star, or if you want to upload
any image or video, you can use the option
here. And Pen tool. If you want to draw any sap or draw any unstructured shapes, you can use Pentool. And then text option. So if you want to type any text, if you want to type
any sentences, if you want to type any
descriptions like that, you can use the text option. And then command.
So if you want to comment your designs
to your other team, you can use the command option. Designing options in
the Figma dashboard.
8. Project Class 1 : Ecommerce Login Page: Okay, now we will discuss about how to create
a simple login page. Okay. First, we have created
a frame, IOS iPhone frame. So if you want to
reduce the corner, you can use the
option corner radius. You can see the option in
appearance, corner radius. Just select this option, then you can see corner
radius is reduced. You can see that corner
radius is reduced. If you select more option, corner radios will be reduced. But we need some values only, okay? It is enough. If you want to change
the color of your frame, you can use the
color option here. If you want red,
you can use red. If you want other colors, you can use other colors,
you can use that. Or if you want to use linear corner radius
options, radial options, or diamond based options, or angular based options, any angular Options,
you can use. So if you want to change the background to
image like that, you can use this option also. So you can say this
option right image. So you can upload the
image from your system. So you can check this, okay? So mostly we will use
the colors option. Okay. So this is how you can
change your colors. First, we will add the text. Using the text, we will add. So just type login. So if you want to
increase the size, you can use the options here. So you can change
the text style also, you can change And then if
you want to change the size, you can also change. So if you want to change the position also,
you can change. So I'm going to change
the font style. Okay. If you want to change the text color
also, you can change. So I'm going to use. So we will add some saves. For that use rectangle. If you want to change
the corner radius, you can change here. So if you want to change the color also, you
can change here. So here you can type
user name or any other. For that, we will use the text. So you have to decrease the size or you can change
the size from here. So you have to merge
the layers for that. Select those, and then you have to select
group selection. So whenever you
changes anything, it will be merged. If you want to
change the position, the two will be combined. So after that, we will
create another one. Select Control C and control, and then change the text. So use her name and password. In below, you can
create the login. Login or any other Google
pase login like that. For that icons, we
can get from here. So we will need some
navigation templates also. For that, go to home
in the community, go to community, IOS navigation. Navigation bar. IOS navigation. Okay. So just select your color. If you want white,
you can use white. If you want black, you can
use black. I will use black. So just here and then
paste here, okay? So just sell it here. So it will be present here. We will copy this
un pasted here. You need to change the position. You need to get the values here. Inside the frame, you
have to copy paste. So then you can see
the top navigation and then bottom navigation. Or if you want white colour also, you can use white colour. You can use Okay. So if you want any
social media icons, we can also search from here. I need social media icons. I will get from here or here. So if you are having Google, so if you are having
Google account, you can login from
the Google account. Or if you're having
any Facebook account, you can login from the Facebook. Or if you're having
any other platforms, you can login from
those platforms. So any other platforms if
you're having Figma account, you can log in from the Figma. Okay, so you need to
group those items. So whenever you are changing, you can change combined. You can login from
this platforms or else you can type your
username and password. This is our basic login page. So based on your
creativity only, you can create UI designs
for your applications. It all based on your creativity.
9. Project Class 2 : Homepage Design: I'm going to create
another frame. For this, just copy paste. Instead of this, you
just delete all those. Create here, and
then create here. After user logins
into the system, they will go to the homepage
of our E-commerce app. So for this, I will
change the color. Now, we will see about how
to create our homepage. So we can provide our app title. So for that, we
will use the text. This is our app title. Inside that we will
saw some products. E-commerce, we need
some products. For that, we will
create a rectangle. Rectangle frames here
one, copy paste, and here two, and copy
pasted here three, and copy pasted here four. And then copy paste here five
and copy paste here six. Okay. So inside this, you can generate the images. Ect your shape and
then go to fill, and then go to image, upload from your
computer, upload. We have successfully
added images. So our ecommerce shop is
fully based on watches. So we are selling watches. So it all based on
your creativity, how to display the images. So this is sample only. You need to use your brain and use your creativity
to create an object.
10. Projecy Class 3 : Product Page Design: So from this, if the user
buys selects any image, that image description
will be present here. For that, remove all those. So if the user
select this watch, that details will
be present here. So for that, just select this option and go to image
and upload from computer. So select the image. Now we will provide
the descriptions. For that, go to text
and then type the text. So after that, we will provide the button
for buying the watch. So for that, just create
a rectangle here, just select and change
the corner radius and then just type the text by now. Okay, just group those. So if you are changing, it will be combined.
Change the color. Okay. By now. So after the user
selects By now, they will pay the money, and then it will be
delivered to them.
11. Project Class 4 : Order Page Design: Payment success,
create another frame. Now remove those here, put here, and then
create a circle. Here, change the
color. Green color. And then you can create
after creating the eclipse, you can upload the image. Tick Mark. After the
user buys the device, the payment will be success. It will be delivered to them. So if you want to change. So before that, you
need to combine those Tick Mark and
then eclipse or that just group them That's it. So whenever you changes, it will be safe. So you can also
change the stroke. Just select the eclipse
and then go to stroke, select the color, and
then change the weight. So just change Stop w two. This one. Okay. That's it. You can also
change from here also. Inside the group, open that, select the rectangle and select the stroke and select the color, and then increase the weight. That's it. So this is our basic
E-commerce design. Okay? So first, user will log in using the user
name and password. Or else they can use their Google account or Facebook account
or FICMA account. They will log in. After that, our homepage will be present. It will display what are all the products we are
having in our store. And then if the user selects
any one of the product, it will goes to
the product page. And then we will provide the description
about the products, the price like that. And then user will
buy the product. After user selects
the BNO option, it will go to the
ByNOPage and then they will provide the bank account information
and buy the product. And then payment
will be success. So this is our basic
E-commerce design.
12. Project Class 5 : Prototype and Conclusion: Now we will discuss about
how to create prototype. Okay? So for that, just go to this
option, prototype. And then for that, first, if the user types the
username and password, it goes to the homepage on tab. So if the user selects
the login page button, it will navigate to this directly navigate
we will navigate. And then we will go
to the second page instant or dissolve. There are a lot of animations, so we will use Smart Animate, or you can use MO push
slide in and slide out. We will use Smart Animate. And then Eso es in likewise, there are a lot of
animations you can use. So if the user selects their Google account
login with them, it will go to this
second page also on tap and then navigate to the
second page, smart Animate. So after user logins, it will go to the homepage. In the homepage, we will
sew the product details. Then if any one of the
product touched by the user, it goes to the
product page on tap, navigate Smart animate
or move in likewise. So I'm going to
use Smart Animate. So you can also check for the other products
also. Okay, that's it. It goes to the product page. So after the user selects
the By now option, it goes to the BPageT page
also on tab Smart Animate. That's it. So this is
how prototype works. First, user logins. With a user NM password, it goes to the product page, or else they will use
their Google account or Facebook account or any
other social media account. They will log in
to their homepage. If the user selects any
one of the products, it will goes to
the product page. So if the user selects
the By No button, it will goes to the
B option. That's it. So we will check the animation for that you have to select
this option present. So you have to wait for this. Okay, so this is our prototype. So if the user types the
user name and password, they will go to the second page. And then if the user selects
any one of the products, it will goes to
the product page. If the user selects
the BNO button, it will goes to the BNO page. That's it. So this is
our basic prototype. So you can also use the
navigation options. So this is all UI UX is all based on your
imagination, creativity. You can also share your designs to your team or any
other platforms. For that, you can use
the share option. You can invite or copy link, copy the prototype link, or you can publish your
product to the community. So a lot of So that's it. So we have just completed our simple EIX design for
our E-commerce app in Figma. So if you like this course, please put positive review
in the command section. We will see in the next course.
Arunnachalam Shanmugaraajan
