In this tutorial, we're going to be stretching our html and css skills by building out a figma logo clone.
Why are we building a figma logo clone?
Two reasons:
- It is very easy to build. Anybody can follow along.
- It is not a very common thing to build.
Plus, it sounds like fun to be building out the logo of a really popular UI design tool, so that's what we are going to be doing.
Prerequisites
This tutorial is meant for absolute beginners. If you have been learning html and css, and have built little to no projects, then this tutorial is for you.
In order to follow along properly, I recommend that you have a substantial knowledge of flexbox and border radius in css. If you feel like you need to go through these topics before proceeding with this tutorial, you can check them out using the following links below:
Objective:
The objective of this tutorial is to help you reinforce whatever html and css you must have learnt, and to also give you a feel for what it's like to build out something using html and css (if you haven't built anything before).
How we are going to achieve the logo design:
- Firstly, we'll create our boilerplate html code with a link to our stylesheet (to add our styles later).
- Secondly, we'll create five divs to represent the five different colored shapes that make up the logo.
- Thirdly, We're going to add colors, as well as a height and a width to the shapes we've just created.
- Then finally, we're going to add the various curves for each of the shapes.
Let's get started...
Creating the Html Boilerplate
Create an index.html file in your project folder with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Figma Logo</title>
</head>
<body></body>
</html>
From the HTML above, we did the following:
- Link our HTML file to our style.css file (which will be created later) using the link tag.
- Set the title of our HTML page to "Figma Logo".
Note: Boilerplate is a term used to refer to code/sections of code that are always written the same way every time they are used. Whenever you see these types of code, they always appear the same. There may be variations of these types of code from time to time, but these variations rarely occur.
Creating the Colored Shapes
In order to create our colored shapes, we need to do the following:
- Create a div to hold our logo.
- Create three divs inside our logo div.
- Create the shape(s) in each row.
- Set the height and width of each of our shapes.
- Add the respective colors to each shape.
Create a Div to hold our Logo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Figma Logo</title>
</head>
<body>
<div class="figma-logo"></div>
</body>
</html>
Create three Divs inside our Logo Div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style2.css" />
<title>Figma Logo</title>
</head>
<body>
<div class="figma-logo">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</body>
</html>
The three divs created above has been created to represent the three rows of the figma logo. If you take a look at the figma logo, you'll see that there are three rows: the first and the second row (each containing two shapes in parallel to each other), and the last row which contains only one shape.
Create the Shape(s) in each Row
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Figma Logo</title>
</head>
<body>
<div class="figma-logo">
<div class="row">
<div class="shape first"></div>
<div class="shape second"></div>
</div>
<div class="row">
<div class="shape third"></div>
<div class="shape fourth"></div>
</div>
<div class="row">
<div class="shape fifth"></div>
</div>
</div>
</body>
</html>
Set the Height and Width of each of our Shapes
This is the part where we are going to need our css file.
Create a style.css file in your project folder and fill it with the following:
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.row {
display: flex;
}
.shape {
height: 120px;
width: 120px;
background-color: green;
}
From the above css, we did the following:
- Place the figma logo in the center of the body of the HTML page.
- Set the display property of our rows to flex.
- Set the height and width of our shapes.
- Set the background color of our shapes to green. Note: The only reason for this color is to enable us see our shapes.
Add the respective Colors to each Shape
The result we have now is this:
As you can see, it is not what we want. We want the real colors for the logo.
These are the colors of the figma logo:
- First Shape: rgb(242, 78, 30)
- Second Shape: rgb(255, 114, 98)
- Third Shape: rgb(162, 89, 255)
- Fourth Shape: rgb(25, 189, 254)
- Fifth Shape: rgb(9, 208, 131)
To include the above colors to the shapes, add the following lines of css to your css file:
.first {
background-color: rgb(242, 78, 30);
}
.second {
background-color: rgb(255, 114, 98);
}
.third {
background-color: rgb(162, 89, 255);
}
.fourth {
background-color: rgb(25, 189, 254);
}
.fifth {
background-color: rgb(9, 208, 131);
}
This is what our logo look like now:
Adding Curves to the Colored Shapes
The final thing we need to do, is add the curves to the various edges of the logo to complete everything.
To achieve this, add the following lines of css to the styles of the various shapes in the css file.
.first {
background-color: rgb(242, 78, 30);
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.second {
background-color: rgb(255, 114, 98);
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.third {
background-color: rgb(162, 89, 255);
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.fourth {
background-color: rgb(25, 189, 254);
border-radius: 50%;
}
.fifth {
background-color: rgb(9, 208, 131);
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
Final Result
If you have followed everything properly, you should have this:
Top comments (0)