Figma Basics

[00:00:00]
>> So with that, this entire workshop is gonna be taught about Figma, inside of Figma, using Figma, right? So let's actually hop over to just kind of, we'd spent all day in this interface, right? Let's figure out what's going on. Cuz this, maybe you're all are better people than me.

[00:00:17]
But typically, what I do when I find a new tool is, I just pretend that I know what I'm doing, and then realize that I don't actually know what any of these options are, what any of these tools are. And then find myself underwater, and confused, and sad, usually before a deadline.

[00:00:33]
So let's not do that. Let's actually get the lay of the land, understand what's going on here. And that way we're coming here from a place of confidence. The middle part is easy. The middle part is my design, my user interface, my prototype, my what have you, right?

[00:00:50]
That's done. We've got a quarter of all the different kind of pieces here handled. Along the top, we have a toolbar. Here, you've got a little Figma Menu that has a whole bunch of options. We will dig into this over the course of our day together. You've got two tools for moving stuff and scaling stuff.

[00:01:10]
Moving, moves things, scaling makes things bigger and smaller. You can also make stuff big and small with the Move tool, and we'll talk about the difference in a second. Probably, the most important tool that we're gonna use today is this idea of a frame. A frame is kind of any kinda container that holds stuff, right?

[00:01:31]
It's a div, right? It's going to be the thing that has other elements within it, obviously can have a width and a height, so on and so forth, right? In the same way that you would use a div, or if you're more enlightened, a section tag or something along those lines, or the correct semantic HTML.

[00:01:48]
It is the given container for other things. So our screen when we get to prototyping, that's a frame, right? It's very tempting to just go into these other tools here and just draw rectangles. But rectangles are just squares, they don't hold things, they're not containers, they're just squares, and you will eventually be sad.

[00:02:08]
When I implemented this course page, I purposely did bad things. That's partially why it took me so long, right? It's actually a lot easier to go from a screenshot to a Figma design, but I was purposely trying to do it poorly, and the bad way so we could refactor it a little bit.

[00:02:24]
But frames are kind of the most important tool that we're gonna use. We've got a pen and a pencil that we're not going to touch. The pen and pencil for drawing vector art, which nobody wants to see me do, right? Text, that seems important. Most of our UIs have some amount of text in them.

[00:02:42]
The text lets you type. We've got this kinda hand that we can kinda move around, as well. You can always hold the space bar and move too. And then we've got some commenting features, as well. Along the top, some of these change as we're moving around. We've got the ability to make components.

[00:03:02]
Components are reusable pieces of our UI, right? The metaphor here is rather than copying and pasting the same HTML, all over the place, if you're using React, for instance, you might make a component. The word means roughly the same thing in Figma, right? Mask, again, is for creating vector art, as well as subtracting, adding those.

[00:03:22]
You can also do full on vector art in here, as well. You can, I can't, kinda thing. The tool will allow you to, again. You can see collaborators like you might in a Google Docs, or something along those lines. You can share it, so you can see everyone using it.

[00:03:38]
You can give them editor access so multiple people can work on the design at the same time. And they'll all see the latest and greatest version. You can also play through a prototype. So that's kind of everything along the top bar. Let's talk about this left side over here.

[00:03:52]
So this is, you've got a series of pages, right? As we work through the content of this course, where you can basically go in down the list of pages one by one, jumping around occasionally, but kind of as we work through each page. And then over here, we have this list of basically all of the layers on the page, right?

[00:04:11]
So this is basically everything happening on this page is kind of listed in this hierarchy, this tree-like structure, as well. If you hover over something, you can kinda see there's a rectangle. It's highlighted over here and here, as well. Assets are the reusable components. So we're gonna make a whole bunch.

[00:04:26]
Right now the only thing kind of included here is the raw materials I used to put together the course itself. And then on the right side is where the magic happens, right? This is where we can kinda tweak and adjust everything. So, for instance, if I grab this tool here and I select this frame right here, you can see I change the x and y, the width and the height, the border radii, a bunch of other things as well.

[00:04:55]
We will spend most of the day learning about everything in this right side panel, so don't fret. This is where most of the kind of adjusting and moving stuff happens, really, in one of these two views right here. But there are two other tabs in here that I just wanna kinda draw your attention to.

[00:05:11]
Prototype, so tools like Sketch, for instance, in the past, I guess it's still in the present, Sketch exists. Would allow you to do the design and you use Zeplin or something else to make a prototype that you could interact with, right? This is usually really great because some of the really best designers I've worked with will make the full prototype, put it in front of customers before I build it.

[00:05:32]
Which is usually, yeah, I like to know the thing I'm gonna build is something that people like, before I do it. I mean, I'm happy to rebuild it over, and over, and over again, as long as the paychecks keep coming. But if you start building things people don't want, the paychecks tend to stop coming.

[00:05:48]
So it allows you actually create fully interactive prototypes that you can kind of put in front of users and play around with. And then Inspect kind of is one of your very good friends for when you go to implement the design. It kinda gives you some of the high level details.

[00:06:03]
You could glean a lot of this information from kinda going through here. But this is a nice compact way to just let you see, okay, here's the width and the height of whatever I'm currently building, right? Again, the pixel width might not be the most important thing is you implement the WebView cuz it might be cool, responsive design as a thing, right?

[00:06:23]
But it gives you a sense for, at least the radii, the padding, and stuff along those lines, helps you, at least, figure out what you're looking at without saying they're counting pixels or guessing, right? There are previous tools where I have sat there and either zoomed in and tried to count the number of pixels or just tweak the CSS, look at both of them, tweak the CSS, look at both of them.

[00:06:43]
I don't wanna live like that, right? And so this panel helps you in that regard, as well. And again, it will generate some of the CSS, or if you are building for iOS or Android, it will show you the SWIFT code, as well. I don't wanna look at that ever again.

[00:06:59]
So yeah, next time you complain about CSS, just switch to one of those other tabs, it'll make you feel better about the web. And you can kinda see some of these different things here, as well. Cool, so, layers and frames and some of these kind of important pieces.

[00:07:14]
A layer is basically a thing in Figma, right? In JavaScript, we might say an object. Well, JavaScript has primitives, but everything that's not a number or Boolean or string is an object in JavaScript. So everything is basically a layer in some way, shape, or form, right? So we could go ahead and we could just, let's start with a rectangle, we could draw a rectangle.

[00:07:41]
If you just click, you'll get about 100 by 100 rectangle. You can click and drag and create a rectangle of your choosing. One quick thing is you'll notice that after I draw the rectangle, it goes back to the Move tool. If you hover over each tool here, you'll see that they have a very easy keystroke that you can press.

[00:08:03]
So if you wanna get back to the rectangle tool, that's R, the frame is F, move is V. I don't make the rules here, I just have to tell you about them. But the rectangle is R, that makes a lot of sense. So if I can just drag, and that's fun.

[00:08:20]
I can also hold Shift and drag and I will get a evenly spaced out one. If you start dragging, you're like, I actually need one that's equal, you can start just holding Shift at that moment and it will snap to one that is of equal width and height.

[00:08:34]
What happens if you hold down Option while drawing one? Let's see. You'll see that it kind of grows not just from the top and left down, but in both directions. Option on MacOS, Alt on Windows. Let's hold them both down. And you can see that it's both even and growing in every direction at the same time.

[00:08:57]
And if you started drawing in the wrong space, actually, let's go with that. You can hold the Space bar and move it around. And, yeah, some combination of all these things. And depending on how, if you're a guitar player, maybe you can hit all the keys all at once, and find new fun combinations, but that's the kind of high level there, as well.

[00:09:20]
Selecting works just like you think it might. You can delete stuff, as well. If you mess up, you can kind of change any of the properties along here also. So let's check this out. Like we said, a lot of these will give you proportion, you can hold Space, so on and so forth.

[00:09:38]
But when you have the Move tool, you can grab it, you can move it around. You'll notice some guides are trying to help you out. We're gonna talk a little bit more about alignment. If you find yourself slamming on the left or right key, to try to get stuff into the right place, let's talk cuz there are probably better ways to handle that.

[00:09:56]
And we will talk over the course of this, as well. All right, so creating a frame is basically the same as creating a rectangle. So this time we just hit the F key and we can draw this frame. And you can see this frame has a white background by default.

[00:10:11]
If you draw it inside an existing frame, however, it will be transparent. So you can draw frames, you can put frames inside of frames. You can see that when I put a frame in a frame, we get this nested structure on the sidebar, right? Rectangles will just overlap.

[00:10:26]
There's no idea of having a rectangle inside of a rectangle, it's just a shape. Other than getting started for a button or an input field, as a UI developer, you probably almost always want a frame, right? But the rectangles are there if you need to do a particular shape or if you're trying to put together some kind of logo or something along those lines.

[00:10:47]
Like I said before, you can use them to get started with buttons or input fields, or something where it is the shape of a rectangle. But you're probably gonna end up turning into a frame, eventually. All right, so, yeah, we talked about all of these different facts. So you can move stuff, as well.

[00:11:03]
So Select Layers, there's a bunch of options that you have here. You can hold Shift to select multiple things at the same time. If there's a layer inside of a layer that you need to get to, at first, you might end up with just the overall, the big box in this case.

[00:11:18]
But if I really wanted to get that text layer, double clicking will kind of drill down into the nested layers, right? So first click, if you are hovering over something, and we'll kind of see this a little bit later, but I just wanna put it in your brain now, that way when I repeat it, we've got something to hook onto.

[00:11:35]
If you're trying to select something like, okay, this frame is clear, I wanna select it, but I'm not getting it, holding Cmd will always kind of like help you. Cmd, or I guess, Ctrl on Windows, will help you get directly to whatever your mouse is over. So you can either skip the double clicking, or if you have a hard time like, hey, this thing is transparent and my mouse is kind of going through it.

[00:11:56]
You can hold Cmd and it will help you get to it a lot easier. All right, so we have a bunch of fun ways to kind of change sizes and align objects, as you saw before, like clicking and dragging. They will try to be some help here. And that'll work.

[00:12:14]
The other thing that you can do is, you can adjust these numbers. However, if you're like I'm too tired for basic arithmetic. One thing that you can do is, let's say if I wanted to move this 64 pixels, let's say 63 pixels, that way it's not as easy for me, right?

[00:12:32]
I could sit there and I could do the math in my head. I could pull out a calculator, or I can just say plus 63 and hit Enter, and it will move 63 pixels, right? Where this is also super interesting is if I have multiple things picked, you'll see it says mixed, right?

[00:12:49]
Cuz there's a lot of x's and y axes here. This will still work. It'll move everything 100 pixels. When we get to the size of something, let's say I wanna take this image, you can also go to the width, yeah, I can add numbers, I can subtract numbers, yeah.

[00:13:07]
>> Can you do percents with that or is it just pixel?
>> That was the best question ever. [LAUGH] I can also do percents with that [LAUGH], all right? So I can type in 200% to the width, and it will double the width, right? So you can kind of like most, you can do multiplication if you want, you can do division.

[00:13:25]
It all works the way you think that it works. There are some kinda tools for aligning things, as well. Like I said, you can just sit there and try to get it right. One other quick, as long as we're holding down different keys while we're doing stuff is, sometimes you're trying to get just stuff on the x-axis, right?

[00:13:47]
These trackpads are really good these days, and you're worried that you might accidentally move a pixel north or south. You can hold Shift and you'll only kind of move along one axis. Unless you really try, and it will jump to the next thing it snaps to. But it will kinda keep it straight along a given axis, as well.

[00:14:05]
You can also grab two things, and you've got these tools up here. So if let's say, I wanted them kind of on the same x-axis. I could either have them aligned in the center and they'll kind of both move, so they share the similar kinda horizontal axis. I can align them to the topmost one.

[00:14:27]
I can take these and I can align them this way, as well. One of the things Figma will try to help you with, if it can, you'll notice that if it's things like, hey, these are a bunch of objects that are almost spaced out properly, you go ahead and hit that button.

[00:14:43]
One of the things that we'll see later, but it's showing now, so I'm just gonna show you is, you have these circular dots here and these lines. These are when Figma has kind of, once you have at least three objects, it's hard to tell about even spacing with two.

[00:14:58]
With three, you can kind of figure out what the spacing should be. And once they're evenly spaced, you can kind of adjust them both. The other thing you can do is grab the circle. And if you hold Cmd or I think Ctrl on Windows, you can begin to swap them around, as well.

[00:15:13]
So, hey, this was the topmost one, I just wanna flip them. You can do that also. Yeah, and so yeah, and then there's tidy up which is, again, it tries to do both the horizontal and the vertical and just arranging everything in a way that makes sense. Will it always get it right every time?

[00:15:30]
Probably not, especially if you have things that are roughly all the same size and should have been in a grid to begin with, you'll probably get it right. Here, I've got various different images of different sizes and different layers and stuff along those lines. It did a pretty good job.

[00:15:43]
It'll get you most of the way there, and then you can kinda do the rest by hand, and kind of adjust it a little bit more manually if you need to. Some of these options are here as well, as you can see in this lovely screenshot. And you can kind of pick whichever one you wanna use.

[00:16:00]
And again, it will try to do its best. Again, with very normalized stuff, it works better. It's kinda like working with data, right? When your data is normalized, it's easier to process. The same thing kind of applies here, as well.