Designing the Figma logo: my simple way
Let’s take a look at the Figma logo, we should notice that it’s made up of combinations of several shapes that comes together to form the logo.
Mere looking at the shapes and you should notice that it comprises of rectangle and Circle (ellipse) shape which are in 40 x 40 in size (Height and Width).
First Step
First and foremost, create the first shape by clicking on the rectangle tool or press R on your Keyboard, fix the size to 40 x 40px (Height and Width), after that go through the design tab, check for the corner radius, change it from 0 to 25 top and bottom (25–0–0–25).
Change the color to #F24E1E from the Color picker.
Second Step
The Second shape looks very similar to the first one we created but it’s in a different direction.
To achieve this, duplicate the first shape or press Ctrl + D as shortcut on your Keyboard, then right-click on the duplicated shape, you will see some list that will show, then select Flip Horizontal or press Shift + H.
Now, you should have noticed a change in its direction and also make sure you let it align with the first shape, then change the color to #FF7262.
Third Step
So now, to create the third shape that will be placed below the two shapes we created above, you will duplicate the first one we created and move the duplicated shape directly below the first one in order to make it easier as it’s still the same.
Now change the color to #A259FF.
Fourth Step
Also, the fourth shape is just a circle with the same 40 x 40px size (Height and Width).
To create that, click on the ellipse tool or press O on your keyboard and make sure it’s still in 40 x 40px, change the color to #1ABCFE and move it below the second shape and after the third shape.
Last Step
Furthermore, we will be creating the last shape which will make it complete and look identical to the Figma logo.
To create this, you just need to duplicate the first shape or create a rectangle, fix it to 40 x 40px, change the corner radius to 25–0–25–25, select #0ACF83 from the color picker and then move it below the third shape.
Our final design should look like this……
We are done with creating a clone of the Figma logo. You can also check the logo I designed here.
Also, check out the resources below if you’re just starting as a designer:
Join us on Figma slack to get more updates on design and can also participate in the design challenge
To be part of the Figma Community;
Join Figma on SLACK: https://figma-africa.slack.com
TWITTER: https://twitter.com/figma_africa
INSTAGRAM: https://instagram.com/figmaafrica
