LOGO DESIGN
In this blog 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 color for that grid I'm going to select the color.
The color is
0F052F. So I'm going to paste that color right there and I have the color.
Another thing I want to do is to change the color of the gridline, so I will
set the color 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. So 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 color.
I have the fill color already which I want to use. Which is 43D9B8. So, I'm
going to add that fill color to this and that's the fill color 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 color 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 color to this.
So to this, I want to add a fill color it. So I will select another color 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 color of this, rotate
it the other way and instead of white on I'm going to choose the background color
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 color 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 color 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 blog, anything I
need to modify and anything I need to add to this blog. So that I'll keep
giving you the best quality and also it will enable me to do more blogs thank
you and have a nice day.
0 Comments
Thank you for your response. It will help us to improve in the future.