Before we dive into design, let's first set up Figma. 1
It's going to be a quick overview. 2
I'm going to show you, just a general understanding of how the tool works, and all the important features 3
that we will need, to design websites in Figma. 4
I will teach you them and show you them, as we move through the material, and as you need 5
them, 6
not right away. So, first things first, let's download Figma, right? 7
We have two options: Mac and Windows. I'm on a Mac, but Windows App works and looks the same. 8
So even on Windows, you'll be able to follow my tutorials perfectly. 9
If you're on Linux or some other operating system, don't worry, you can use Figma directly in your browser. 10
It's that awesome, but I strongly recommend using desktop app, if you have a chance. 11
These are Font Installers, which are needed for the browser only. If you're downloading the app, 12
don't worry about this. 13
Now, let's install it. On a Mac, 14
it just needs to be moved to the Applications folder and that's all. 15
No idea how it works on Windows, but I'm sure it's not your first time installing an application, so just 16
go with a usual installation. 17
This is the initial screen, sign up with Google if you want to make it easier, or click here to sign up 18
with an e-mail. 19
Your name: Vako. 20
What kind of work you do: Design. Create Account. 21
And we're going to arrive on our home page, which is our file browser. 22
All your Figma files will show here. Figma is cloud based, so you will need internet when working 23
on it. 24
You can work offline, but only if you load the file before going offline. Then you can work with a file 25
and once you get back online, it will sync and update the file. 26
It's okay, but I wouldn't recommend doing this. Just you know, make sure you're always online, when 27
working on it. 28
Let's start by creating a new file. 29
We can do that from here or here. 30
Let's close the onboarding tutorial. 31
Now we are in the Figma editor. 32
This is where everything happens. 33
Nothing to be scared of. 34
It's quite simple. 35
Open files will show as taps. 36
Sort of like your browser, and if you want to get back to the home page to open another file, you can 37
do that from this icon right here. 38
Let's go through a toolbar here. 39
As you can see, it only has a handful of tools. 40
Nothing like what you'd get in Photoshop. 41
First one is a menu, it has a search field, which is a great way to find an option that you're looking for. 42
For example zoom. Then is a Move tool: the default tool that is selected by, most of the time. 43
It does exactly what it says, it moves objects and interacts with them. 44
The next one is the frame tool. 45
It's similar to artboard that you get in other design tools. 46
All our designs will start with a frame, depending what we are designing for. 47
We need to choose a specific size, the screen that we are designing for. 48
So either we are designing a screen for a desktop computer, a laptop, iPhone and so on. As this is 49
a web design course, we will be designing for a desktop and laptop computers. 50
We can draw it, but better option is to choose one of the preset sizes. We can choose the screen from 51
this drop down. 52
There are iPhones, Androids, Tablets we're going to choose one of the desktop screen sizes obviously. 53
You're not stuck with these dimensions, if you want to you can resize it like this. 54
Next is a shape tool. 55
When you click a tiny arrow, it will let you select any of the following shapes: rectangle, line etc. 56
Let's draw a rectangle. 57
It's the first thing selected by default. And on the frame, you draw a rectangle like this. 58
Same logic for other shapes. 59
Then we have a Pen tool. 60
Don't worry about this, for now, we won't be using it that much. 61
Next to it is a Text tool. 62
Pretty straightforward 63
and finally the comments. 64
This is for a collaboration. 65
When you send it to your client, or team members to review, they can directly comment on each element. 66
And that's all you need to know about the toolbar, for now. 67
On the right side we have the properties panel. 68
Fun thing about the properties panel is that it changes, based on an object, you have selected. 69
We select a rectangle, and we get all the properties of this particular rectangle. 70
When we select text, we get slightly different properties: 71
font, text size, so on. We will explore each of the properties later when we actually need them. 72
No need to memorize everything right now. 73
Finally, on the left side we have layers panel. 74
Every new element that we create, will show up here. 75
Now, why is it called layers. 76
And why not objects, or elements, or something like that. 77
Because they lay on top of each other. 78
And if you want to rearrange them, you just need to change the order, in the layers panel. 79
For example, if we want the purple box to go below, we just need to drag that layer and move it below 80
of the grey rectangle. 81
And if we move any of these objects outside of this frame, you will see how the layers panel 82
will update and will move the object outside of the frame, onto the general canvas. 83
That's all you need to know about Figma, for now. More features will come up in all the practice exercises 84
that we're going to do. 85
If you haven't been following along stop, pause and go ahead and do this right now. And then continue 86
with the next lesson. 87
If at any point in this course you get stuck, you know, it's new tools they sometimes update and you know, 88
different things change. And I might not be as quick updating the screens and everything. 89
Obviously I will, but you know, they are, you know, they move very fast, all these tools and they 90
update screens and user interface very quick, so I might show you something a might be all of a sudden gone. 91
Let me know I'll fix that, but if you get stuck, you can always drop me a message, or ask a question 92
in a discussion forums, either me or some other student will help you out.