Figma Overview & Tour

[00:00:00]
>> Everything I'm gonna cover and arguably more than I'm gonna cover today is in this course website where there is everything we'll talk about and then a bunch of stuff where I wrote the content. But then some of it is kind of the extended cut is in this course website here where you can kind of follow along.

[00:00:20]
And for a lot of this stuff, if you saw me do something real quick, there might be like an animated GIF, or at least some prose kind of like explaining it. Or if you need it reinforced in another way, all of this is kind of written out as well.

[00:00:35]
But more importantly, we have this project file that we're going to work through. I'm gonna make a fork of it to try to leave the initial one into a clean state. So when someone watches this later, they kind of see exactly where we started from, not where I drew random buttons and did stuff like that.

[00:00:52]
But you can also hit open in Figma and you will get kind of your own fourth that you can follow along and play along with as well, and then see what I'm doing in my file as well. So, with that, let's take a tour of Figma as it was all about.

[00:01:12]
So mostly, like most of what's happening in Figma is kind of on three sides, right? Along the top we have this toolbar, which has a lot of the very basic tools that we might use. You'll notice that for a lot of these things, either there's a carrot and a menu, or it's a one one piece thing that has a little like letter that you can hit.

[00:01:36]
And so this is if you ever use like something like Final Cut Pro or Photoshop or some other tools, you can switch tools just by hitting K to switch to the Scale tool or vi to switch to the Move tool so on and so forth. The nice part is you can kind of see what those shortcuts are just by hovering over the things.

[00:01:56]
I will use some of the really common shortcuts. I will try not to use a lot of esoteric ones because it is a lot easier for you to follow my mouse than it is for you to magically know what like I did for muscle memory in some kind of like code to make a certain thing happen.

[00:02:17]
So generally speaking you know if for the very common things, I will say, and I will sometimes slip up because some of this is muscle memory after doing it a thousand times. But generally speaking, there are keyboard shortcuts for literally everything. So we've got the keyboard shortcuts for all of these tools.

[00:02:35]
This menu here is the Figma menu. If you are using the desktop application, you will notice that it has some striking similarities to what's going up along top here. The interesting part about Figma is that it's theoretically a web app that has a desktop app like most of the stuff on my computer these days.

[00:02:52]
It's a web app in a desktop shell. There's a really great course called by me. [LAUGH] you can totally check out how to build desktop applications. But that's a different story for a different day. There's no expectation you can do this in the browser you can do in the desktop application.

[00:03:08]
I find in my day to day life that I have whatever I was working on in desktop application, and then every random link I got sent in Slack is usually open in one of my 7000 browser to Tabs. So, if you're using a desktop app, you've got all the stuff up and along here.

[00:03:23]
If you are just in a web app, all that can also be found here as well. In the center of the toolbar, and I'm zoomed in a little bit, but you'll have a little more of a separation there. You will kind of see information about the file, where you can do stuff.

[00:03:38]
Stuff like showing the version history, publish a library if you're on a paid plan. There's some branching, which I think is very much you would see from Git except no designer has ever used it in my experience. Some other file related things. If you are on a given element, this changes to some various different, like, ability to make reusable components or some other things with that given layer.

[00:04:04]
But if you're kind of just in the regular field, then it's information about the file. And then to the right of this top toolbar here, you have information about your account, the ability to share a file. You can do a lot of stuff like you might see in, like, Google Drive, share it in view-only mode.

[00:04:18]
So on and so forth, there is a lot of like multiplayer, multiple cursors flying around. I have that disabled for all of our Saturdays. But you can also see all of that as well. And then just kind of information about your account like there's ability to chat, all that kind of fun stuff.

[00:04:35]
This is developer mode which is good gated behind a paid feature. I happen to have a paid account. It does stuff like allowing you to see some of the CSS and measurements around things as you're gonna implement it. It's nice, it's not required. A lot of what we're gonna talk about today is some of the strategies around how you can kind of like structure your designs should make a lot more of these concepts easier, right?

[00:05:04]
There's a lot of concepts that map directly to like Flexbox for instance, and if you and your design team are using those, it becomes really clear. Now grid is totally helpful to see some of the like Flexbox cheat sheets but one usually has to kind of take these as an initial inspiration, rather than there's nothing really you can always just copy and paste for most cases.

[00:05:24]
We have any libraries that we want to use from our organization, or publishing this as a library, along with prototyping, and a bunch of like zooming options. You can see as I pinch to zoom, that zoom kind of increases and decreases. All right, let's turn off dev mode.

[00:05:40]
Along the side, we have this left panel that has two major pieces is pages. So design could have multiple pages. This might be if you're doing a component library, your input fields versus your buttons, versus something else. In my case, since I'm using this as kind of the like, quote, unquote, lesson plan, agenda is broken out by the different sections that we're gonna cover.

[00:06:00]
And then towards the bottom, you can see all the different layers in a given page and navigate between them. You also have your assets, which are gonna be any kind of like shared components. Initially in the file, this will start out as empty for you. And as we create components that are reusable, you will see them here.

[00:06:18]
If your organization has a shared component library and that they've published within the org, you'll also see that shared set of components as well. Then over on the right side, this is where for a given layer that we're playing with, you'll see all the different properties that we can manipulate.

[00:06:35]
Most of the tweaking that you do will happen in this pane. And towards the end very briefly, we'll kind of take a look at the kind of prototyping interaction design piece that people a gym can use, are you to kind of create a working prototype before you go sit down and write code.

[00:06:53]
But most of our time is going to actually be focused on the like building and structure of design components before we receive them on the developer end. And that, there's a few other things. One, you'll notice if you go to the Figma menu, there's quick actions, which is one of those command palettes like you might see in VS code or something along those lines.

[00:07:15]
Where you can just search for a given menu. One thing that you'll find in there is also these keyboard shortcuts, which will be all the various keyboard shortcuts that you can learn and memorize over time. Like I said, I am gonna try my hardest to avoid too much keyboard magic because I know it's hard to follow that.

[00:07:37]
But over time, if you find yourself doing something repetitive, there is probably a keyboard shortcut to make it easier. Or sometimes it's like the difference between holding shift or command while clicking on a various part of the UI will be a shortcut, right? And some of those will find out together.

[00:07:51]
But for your use cases, there is probably something that you might see. For instance, I literally did not know about hitting double zero to change the opacity to 0% on a layer until I just left this tab open while talking to you. And obviously in the middle you have this canvas here, which is the design itself.

[00:08:12]
And we will talk a little bit in the very beginning before we get into components. Variables and responsive design and layout grids and all that fun stuff we're gonna learn how to click on things. Right it feels a little but like eating our vegetables but it's gonna be good it's gonna be a point because we'll make our lives easier as we do some of those more complicated things later in the workshop.