Transcripts
1. Intro: Hi there. This class is going to
be about designing and simple landing page and Sigma together with
Lawdy animations. Maybe you heard about
loading animations, but they are just
animated files and make your designs
much more engaging. So make sure you enroll to
this class is very short. It's more or less
around ten to 15 min. And you're just going to
learn a lot how to use grids, how these dipole graphy, some sort of gradients, also auto-layout the
bed and as well as applying loading animations
into your Figma project. I hope to see you
in the class and yet see you in the next video.
2. What are Lottie Animations?: They quickly show you what
Lawdy animation exactly is. Maybe you never heard about it, but most likely you've
definitely seen it while interacted with from
websites or mobile apps. So I love to go to travel.com
is just a bunch of different case studies and portfolio cases that
designers upload. So I need to type
in here a lot of animations to give
you some examples. So let's e.g. click
on this first one. And on this image you can see that it's
animated, it's moving. So this is basically what
loading animation is, just some interactive
illustration that has some sort of animation. This is another example
of this illustration. So e.g. instead of having
two simple static image, you can have it animated. The benefits of having loading animations is that
they are more engaging, they are more curious, they hold the attention of your
user for longer time. So that's why specifically
in this class we are going to apply it to one
simple landing page. You do not need to use
lauded animations. If you don't want to.
It's just a nice add-on. It doesn't really
give that much of visibility from user
experience point of view, but it's just more for
the visual aesthetics and engagement for your users. So in the next
video, I'll show you exactly where to download free light animations for
your Figma design projects.
3. Library with Lottie Animations: First of all, right,
can you actually get a lot of animations
for your Figma design? So I have a very nice
suggestion for you. You are free to use it, or you are also free to Google other loading animation
that you can find a line. So creatine is a
very simple website, is with a creative.com. You can go right
here and you can basically download different
loading animations, as well as illustrations, animated icons and icons. So let's quickly click
on lot of animations. And right here we
have a bunch of different choices we can
apply to our projects. So right here you can filter either you want to see free lot of animations or maybe if
you have premium package, you can also filter by that one. So let us go back to
the old animations and I'll quickly show
you how it works. You can also browse for it
here and see different. That's a nice animation. So e.g. we have this
discover animation. If you click on it, you can also basically modify the colors
of this loading animation. So e.g. you want to make it more blue and instead of bank, you want to have it green. As an example, I really love creating is my personal
suggestion because you can get very customized lot of
animations for your projects. I love the link in the
class description where you can go and create your
account for free. So specifically for this one, we will only use one lottery
animation, but if you e.g. have some inspiration,
you are free to download more things and experiment
with your UI design.
4. Landing Page Design: Now let's go to our Figma file. And first of all, we will
create a desktop frame, as we always do
in our tutorials. Will also quickly set
up the layout grid. And it's going to be columns
with a count of 12th. And I'm just going to
set the margins on both sides for the
value of 56 pixels, Gadara between the columns, which is going to be 24 pixels. That let's actually select
the Text tool and we're going to type in our headline
or the font settings. We're going to change the font. And it's going to be
also bold font with the settings with a
size of 60 pixels. So right here it's
a bit too large, so we're going to decrease
the width of this container. And I will also
position it right here where the first
column actually begins. Now let's duplicate
this text layer with the control
plus D key shortcut. And we will immediately change
the properties to regular. And also our font size is
going to be 24 pixels. That will also change the
fill color of the stacks. And I'm just going
to also type in some stuff that I just
found randomly on line. And let's make sure that it's
also properly aligned to the first column of
our layout grid. Then we are going to
actually create our call to action buttons is
going to be two buttons, the primary and the
secondary ones. So the first one
is going to have a text which is start
building for free. I will also select
everything right here in this text layer and
click on all the way up. So we'll have it like this. Then I'm going to work
us with auto-layout, make it more responsive, because I'm going to reuse
this button a few more times. Let's click on Shift
plus a shortcut. And as you can see
in a later section, we immediately created
an auto layout. So we're going to make
sure that everything is aligned in the center. And then as well, we will have our
horizontal margins, horizontal padding with
a value of 32 pixels, and the vertical padding
with a value of 16. I also want to create the corner radius with
a value of eight. And then let's not
forget to add our fail because right now
it's all transparent. So what the plus button, which has created a solid
fill and automatically is actually white so you cannot really see
any difference. But we're going to
work with gradients. So let's select linear gradient. Our first marker is going to have this kind of blue color, and the second marker will
have something more with the purple shades of the color. Let's also make sure
that we increase the opacity of our
second marker to 100%. And I will just also quickly
modify the position of the markers and
maybe just to see it better visually how
it will look like. I will hide our layout grid so we can see it
in more details. Of course, a dark
gray with blue, purple color has a
very bad contrast. So let's actually
change it to white. And I will again slightly modify their marker's right here. We are going to activate
back our layout grid. Also make sure that everything
is properly aligned. Then we'll also have
our secondary bottle, which is actually just stacks. So get a demo. And actually to make our
buttons a bit smaller, I will change again the size of the font
to the valley of 18. You can see how will
the auto-layout everything similarly
responsive and will also create a bandwidth
with medium and the same I'm going to repeat
for this secondary button. Also, I will go
quickly to plugins. I have this plugin installed
and pigment community, and right here, I will
just search for the icon. Let's quickly and drag it
right here into our area. And I will just quickly close this plug-in
for the moment. Then I will also get the line height to the
valley of 24 pixels and aligned together
both of these elements and make sure that
the distance is eight pixels between
both of them. Let's look like group. We're going to position it
a bit closer to our button. And then I'll go
back to the icon slugging because I wanna
get a few more icons I'm going to use for
our logo and also other information when a
show in our landing page. So let's quickly search
for one icons they used earlier in some of
my previous projects. And then I also will quickly place a few more
icons to this canvas. Alright, let's just
keep this icon right here for the moment. And this one, I will
also change its color, the purple one that
I use in our button. And let's just quickly
type in some sort of logo, name, company name. I will also change the size, the value of 24, and also the vector layers
inside of my frame, I will increase
the stroke width, but the value of two. Let's just align
everything like this. And we'll also keep it a
bit closer to each other. And eventually I'll
also group it. Then let's just type
in some menu items. I will duplicate it a few
times because I'm going to have other items that I
will just quickly rename, will select all of these layers, then click on tidy up and
make sure that they are distance between each
other is 64 pixels. And with control plus g, I'm going to quickly
come up with as well. Let's align everything
to one line. And I will also make sure
that our logo is aligned with other elements right here
on the left side as well. Let's just actually put our use cases so that it is aligned to our
column as well. Alright, now I can quickly duplicate this button
will control plus D and place it right here because I would like to have
another call to action, which is third free. And then I will make sure that the container of the
stacks has fixed width because we will duplicate the bottom again and we will have another secondary button. And the text here might
be a bit shorter and I don't want make it responsibly
shrank in its way. So let's just stop here, sine n, and we are going to align
the center to the middle. And you can see
that the width of the container just remain
the same because we made it fixed. With our belt. We're going to have just simple solid fill
with a white color and we'll add some stroke with
a value of one pixel. And also our text is
going to have dark color. So ECS that we just created another button that we will
just place it right here, 24 pixels from the other one. Let's also group
this layers and make sure that they are aligned
to the last column. And we will also align
everything to the center. Alright, perfect. Now we have also this thing that we will just go right here. And I'm just going to decrease their value to 16 by 16 pixels. And each of the vectors, I want to reduce its stroke
weight to the value of one. And let's just type in some
features for this project, change it to the regular. And also our line-height
is going to be 16 pixels because the
two, it's a bit too much. Then let's just
have a distance of four pixels between each of them and select both of this
layer and hit Shift plus a to create
another auto-layout. Alright, perfect. We're going to
duplicate it twice with control plus C. And right now what is cool
with auto-layout? Because I'm going to
drag another icon right here and you can
see it immediately. Just adapt the
deposition and the same I will do
with a third well, would a third label and delete
our brush icon as well. Now we just have to change
text in both of these layers. All right, now let's just
everything to each other. Click on tidy up, and I'm just going to have
the distance between all of these three labels with
the valley up 32 pixels. We can also grab both
of these layers, grouped them as well. And then we're going to
select our headline, our body text and buttons
and dying them up as well. And basically have the value of 60 pixels between all of them. Then it will again
group it together. And basically we can just
slightly change its position. This group, this layers as well. So right now we basically have the basics of this landing page. So what I have to do
is actually go back to my creative platform and search for some animated illustrations that we're going to download. Let's actually go to the search bar and I'm
going to type in project. You can see here a
bunch of results. But what I already
used and I showed in the demo is going to
be this Ai project. Let's click by click on that. And the cool thing about
it is that you can basically modify the colors of this lottery animations in case you want to download
it as a static image, you can also click
on this option that it will just download
it like an illustration, but I want to keep it as
an animation of course. So let's just click on
one of these colors. And I will actually
go back right here and pull my button. I will just go and quickly get this purple color code and paste it right here into
the crazy animation. You can see the change is the slight change of this color. Then we will also go to
the blue color marker, copy this hex code and basically paste it instead
of the pink color. You can immediately also see this great change and
the same with our dark. I will make it a bit darker, basically something like
more of a black color. So you can also modify a
background color if you want to. Right now it's white, but I'm not going to change it at all. So let's click on Download. And right here I have
an option to download either adjacent GIF
MP4 or MP4 for free. What Glenn need
for Figma, whereas compatible is GIF file. You can also increase the set, the size to its max. It's going to be 512 pixels. I don't know what
the values are dead, but this is your Pmax.
We're going to use it. Let's get on Download. Perfect, because I
work in the browser, I can immediately grabbed this download and place it
right here into my project. We can also align it to the right side of our
call to action button. And I will also select that and basically align
everything to the centre. So right now you
might not really see this type of
animation because we just have this
lottery animation and it doesn't look like
it's moving at all. But the test set, Let's just
go to the presentation mode. And here you can
actually see that we have this
beautiful animation. So this is how we just simply
download the GIF file from crazy and paste it right here
and do your landing page. What I want to also do in this project is
to add some sort of blurred background to
make a bit more contrast between this loading
animation and my background. So I'm just going to go to another plugin that
is called blobs, and then we'll generate
a random blob. Let's just insert it. And we can basically go
right here and change his position all the way
down in our landing page, I will also change its color
to something like this. We will go to the
Effects and apply a layer blur and actually get
the value with 200 pixels, maybe a bit more. So you can see we have immediately this
blurred background. So let me just
quickly maybe modify the position of both
of these layers. And I will just quickly duplicate it again with
a control plus D me. I will remove this effect and also modify the
fill to white color. And what a shift
plus x key shortcut. We can see that we just now have a stroke outline which are
going to decrease its width. So here we'll have some
nice effect that we are going to apply into our project. I will also quickly increase
it and also increases again. So let's select both
of these blocks with the outline and align
them to the center. I will also control G with the shortcuts so we
can actually group it. And we can also play around
with his possession, maybe rotated a bit and
create some sort of contrast. Let's quickly also duplicate
our blurred block. I will also decrease it
in an exposition and modify it rotation angle. And we're going to also
grab this purple color, which I'll make it a bit lighter so it's
not so noticeable. And we'll just place
it all the way behind in our Layers panel
on this canvas. This is something
approximately that you can do easily as a landing page. And let's actually just go
back right here and see the changes that we apply
to this landing page. So this is actually how you can apply simple audit animations to your landing page or to
any other design and make it much more interesting
for your end users. So guys, make sure that you use the link under this video at a discount code to get
10% off from creating. And I hope that you enjoyed this tutorial and I hope
to see you next time.
Tetiana G, UX Designer
