We know how to gather inspiration for our projects. 1
And now we're going to learn how to use that inspiration for our designs. 2
As I mentioned before there are 3 stages to the mimic method which is copying, remix and the final 3
stage - creating. 4
In this lesson we're going to practice first one, the copying. 5
You're going to fully recreate Figma's home page. 6
Your objective is to match their design as closely as possible pixel by pixel. 7
By doing so, you'll gain valuable hands on experience, 8
you'll practice designing very common website elements, such as navigation bars and different components. 9
And footer and all that. And do all that while you don't have to worry about colors, and typefaces, and 10
fonts, and layouts and all, 11
all the design stuff. Because you're just, you know, copying what's already there. 12
One small step at a time, just like learning how to cook or play a guitar. 13
Okay, so open the Figma file link to this video. 14
Here you'll find the screenshot of Figma's homepage. 15
It's not a full home page. 16
I have removed some of the sections to keep things simple and it might not be the current version of their 17
actual home page. 18
But that's okay. 19
We don't care about that. It's pretty simple and timeless design so it's perfect for this assignment. 20
On the right, there is a blank frame, where you will recreate this exact home page. When you work on 21
this assignment, I want you to notice all those design principles that you've learned so far. 22
Notice how are they using hierarchy and contrast, 23
how are alignments made. Notice things that you think they've done well, and those that you think might be 24
improved. With what you have 25
practised in Figma already, you know enough to complete this task. Although, I'll get things started and 26
demonstrate some of the parts. 27
First, let's prepare some guides, so we know where to align our objects. 28
It doesn't look like they're using a strict grid here on their website. Or at least I couldn't figure 29
it out, but I don't think they are. 30
So we are going to have to draw guides manually. 31
This is quite simple in Figma. In the menu search for the ruler, so you can enable it. 32
Once you click on it, you'll get this vertical and horizontal ruler on the page. To draw a horizontal 33
guide, click and drag from the horizontal ruler. And you'll get this horizontal guide which you can 34
position anywhere on the page, or on the frame. And the same thing goes for the vertical guide. 35
Now, where do we draw these guides? On this frame, 36
I have included the screenshot of the home page. 37
It's hidden now. 38
If you enable it, you can use this as your helper, when comparing your design with the original. 39
While you have this enabled draw the guides on the edges of some of their elements so you can define 40
the container where they have all their content put together. 41
That should be enough for now. To delete the guide, just select it and hit delete. 42
You can hide the screenshot now. 43
Next, let's paint the background. 44
Let's insert the hero image. 45
I have actually saved all of the image assets in this file. So you can easily insert them in your design. 46
They are inside this components Tab. Components in Figma are elements that we can create and reuse later. 47
This is a cool feature and we will talk about it more in more detail in a later lesson. 48
But for now, all you need the components for is to grab the image assets. 49
You can also find these images in the components page. 50
This is actually where Figma is grabbing their components from. 51
So if you delete something here, it's going to disappear from the components panel as well. So find the 52
hero shot and drag it onto the page. 53
The same thing you can do with every other image, including the logo. 54
Now let's insert the text. 55
The typeface that they are using is a paid font, so instead, I found a free alternative on Google fonts 56
that look sort of similar. 57
It's called Karla. 58
It's not an exact match, but a pretty decent substitute. 59
They are using a bold style for the headline. 60
Let's add the paragraph underneath. 61
It looks like it's 18 pixels in size. And a little extra on the line height. 62
Now lets add the button. 63
Buttons are just rectangles with text in it. 64
So we draw a rectangle. 65
I'm going to enable the screenshot guide to draw the rectangle over it. And just sample the color from 66
the button. 67
Their buttons have rounded corners. To do the same 68
we can change corner radius of our rectangle from the properties panel. 69
Not sure how many pixels they are using, so we're gonna have to do that by eye. 70
4 seems like a good match. 71
Lastly we need to add the button text. 72
It seems like the text size is same as the paragraph. 73
We just have to center align the text. And also align the text with a rectangle from the alignment panel. 74
Okay. 75
There is just one more thing, I'm going to show you how to do. And the rest is up to you. 76
We haven't had a chance to design a field like this yet, with the border. As usual, this is just a rectangle 77
without a fill color, but with a border. In Figma that's called a Stroke. Which you can add to any rectangle 78
from the Stroke Settings on the properties panel. 79
Remove the fill of the rectangle by clicking Minus icon on the fill, or just change it to white. 80
Changing the color of the stroke happens just like anything else. 81
And you can change the thickness from here if you need to. And that's all. 82
Now you know everything you need. 83
Oh, and one last thing. 84
This section right here has a longer text. I have included this text in the page here, so you don't have 85
to type them out manually. That's it. 86
Have fun.