Hello everyone my name is Hyginus Ukeh
I'm a software developer and a UI designer I've been the industry for
several years now. Welcome to my channel Building Amazing Things. Here you will
learn how to design and build cool stuff. If you haven't subscribed to my
channel, please do so, as this way enable me to create more videos in this channel.
Alright in this video I'll show you how to create a logo like this in Figma, also
as a bonus, we are going to create some animations with our logo so relax take a
drink and let's get started. So if you are already looking at
the initial image you saw about the logo. We are going to replicate that here, so
first thing I will do is to rename this projects to be logo design, then I'll
pick a frame and that frame should be desktop. It is a nice frame. So one thing
that helps me to do my design and align my objects on my canvas - is to add it
grid to the frame. So I'm going to add a grid and that grid I will set the size to
the 65, then set the thickness of the line to be 32 percent (%), then I have a
colour for that grid I'm going to select the colour. The colour is 0F052F. So I'm
going to paste that colour right there and I have the colour. Another thing I
want to do is to change the colour of the gridline, so I will set the colour the gridline
to be white and that's okay. So next, I want to start designing my logo and
I use the pen tool to create objects on my canvas. You know pen tool is a great tool, which helps you to create nice curves and nice objects. So I'll pick the pen tool
and I'm taking the size of this logo to have three boxes, like if I'm starting, ok let's start from this point and this point of spanning three boxes to the
left for the size of the logo. This is 1, 2,3 and this is 3 boxes. Then with
the diagonal slant of the logo, I'm taking 2 boxes for it. So this is two (2)
boxes for one (1). Two (2) boxes for two (2) and sorry I have to do that again. Two boxes one, two and three. S,o I have this over here. So I am also going to span. Oh, that's not nice. So I'll do that again this is two boxes, one, two and three. So, I will click here. then I'll span to the right four boxes to create a curve, this is four and I'm creating a curve at the top. So that's it. Next, I want to continue from this
point and the good part of the pen tool is that you can continue from
any points. So I'm going to click on this point and span three boxes. Remember we're spanning horizontally two boxes, two boxes and two boxes. I get to this point, so I'm
going to join this together. Next, I'll select my bend tool to bend this
particular point. So just give this a nice bend and this is okay. So I'll click
on done, then, I'll remove the stroke and add a fill colour. I have the fill colour
already which I want to use. Which is 43D9B8. So, I'm going to add that
fill colour to this and that's the fill colour for it. So the next thing is the other
part of the logo. So, I'm still going to select my pen tool and I want to start from this point.
Yeah, directly from this point and span diagonal, two boxes down, two boxes
down, and two boxes down, and I get to this point. So remember the size was spanning
three boxes this time around to the left. Then we're spanning
horizontally two boxes to the top, two boxes to top and two bottles to the top
and get to this point. So I want to gradually fill this behind the shape and
good, have this. So what I want to do now is to remove the stroke and add a fill. I
have a fill colour which I have said it's 43D9B8. So, I added fill to this and now , click on done. So, this looks nice but this curve here needs
some adjustment. So I'll click on the Edit Object, and I will select my Move Tool, and click on the point I want to edit and let's give it a nice bend. I think I'm done. It is nice
So, next, I want to add colour to this. So to this, I want to add a fill colour
it. So I will select another colour which should give me a linear fill and actually I
want to send it to the back, so it's at the back of this and I'm going to rotate the
fill colour of this, rotate it the other way and instead of white on I'm going to choose
the background colour and move it in a little bit,
add another gradient to it and drag it up a little bit and this is OK for now.
So next, I want to move the the grid line so click on this eye tool here to remove the grid
line. So if you have this, that's nice and the fill colour looks not too quite OK. So for me, I'm going to make some small adjustment. And then drag this a little bit, like this. Ok, that's fine. So I'm going to select the two object and align it to the centre. Next, I want to add a shadow to this particular tool so click on, this
particular object, the one at the top so click on it. Click on effects to add a
shadow and now we have a lovely looking shadow so I'm going to increase
the blurriness of the shadow to 10 pixels. so, this is one part of the logo, so I'm
going to select the both and duplicate it using a command G, sorry command D. Then
I'm going to actually rotate this, rotate this the other way around. Carefully
rotate it and I think okay with this, so, drag it to the point I wanted to be and I
think this is fine for me. So I'm going to select all vector objects which I've
created and I use my command G to group and I' ll give it a name, let's say logo, then I will select my scale tool and once I select my scale tool, I will reduce it.
The scaling tool helps me not to distort the size of the shape. So
next, I want to add a text to this. Text should be, let's say 36px by size and
should be Poppins. I like using Poppins and should be bold and the colour should
be white. So I'll go ahead and say, I'm going to be using the name of my channel -
Building Amazing Things, okay So let's arrange this. So awesome, if you
have this - that's great. If you have any challenge let me know in
the comment section and let's go about the animation of this very quickly. So to
animate this we're going to use prototyping in Figma and there's a very
great tool which is called the Smart Animate and the Smart Animate works in
a way that it looks at your different components in your
canvas and notice any slight change in the component and do a smart animate towards those components. So if I select this frame, I'm going to duplicate it would
command D and I'm going to change the rotation of this to be sixty degree by
the angle and I'll do it again I'm going to change this to be 120 more 60 and I'll
duplicate again now change it to 180. I think I'm fine, I have four of these. So
smart animate will help me detect each of the changes and make sure those of
your components have the same name and the same arrangement and design and positioning.
So I'll go to my prototype then I'll start with the first frame and I'll
select interaction of after delay and l will make it to the 300ms then it should
navigate to the next frame and I'm using smart animate, so make sure you select smart animate. And I will do that for the next, that should be under After
Delay of 300ms, then it should go to the next frame, smart animate fine
then I'll select the next frame and drag it, that should be under after to delay
and and then 300ms, smart animate, fine. So to check our animation you can click
on present and let's see what we have so I'm going to set this to be fit
scale down and I use my R to run my animation. Command R on your keyboard to run so this look awesome, so go ahead and try
to replicate something like this if you have any challenge drop me a comment.
i'll be there to answer you in the comment section and put you through and let
me know what you think about the logo Let me know what you think about the
video, anything I need to modify and anything I need to add to this video. So that I'll
keep giving you the best quality and also if you have not subscribed to this
channel please do so, it will enable me to do more videos thank you and have a
nice day.
