2.2 The Figma UI
Let’s take a quick tour of the Figma interface and familiarize ourselves with the working space. Let’s begin.
1.Introduction2 lessons, 04:26
2.Getting Started With Figma5 lessons, 37:08
3.Using Figma as a Designer3 lessons, 29:59
4.Using Figma as a Developer1 lesson, 04:27
5.Conclusion1 lesson, 02:37
2.2 The Figma UI
Hello and welcome back to this course. In this lesson we're gonna have a look at the Figma UI or user interface. Now you've already seen the initial screen in the previous lesson. This is where you can see a list of all your files. You have access to these. We can rename, delete, duplicate and you can create new files. You also have access to your teams and projects also in this sidebar here on the left. Now, the new files will open in tabs, just like this one. You can click on the plus sign and that will create the new file, or you can go back to the entire list of files. Right here, you have a menu icon that really offers links to various portions of the application and there is also an import file button that you can use to import images or sketch files. Now, let's go into this new file that we've created here. And let's start from the very top. This is what's called a search menu. You can basically search for actions. For example, zoom in and it gives you a list of results for zoom, along with the shortcuts. Or you can browse these sections individually. It's like one of those menus that you would have, well, like these, like you would have here, on the top. Except here, they are hidden inside this drop down. Next, you have access to the tools. Here, you can select move or scale tool. This is the Frame or Slice tool, many have access to your shapes, Pen tool, Text tool, and Comments. Here, you can change the name of your file by simply clicking inside it or you can hover this little drop-down icon and you have a contextual menu for the file itself. You can view the version history. You can duplicate, rename, delete and so on. You can also move files to certain projects. Here on the right, it's a little information about who is logged in. There's a share button that you can use to share this file with other people. Here, there is a present button, which will enter the prototyping presentation mode. We'll have a look at this next. This is the view settings, you can toggle on and off various things. For example, Pixel grid, Snapping to the Pixel Grid, Layout Grids and so on. This is your zoom level, we can zoom in, out using these shortcuts or various degrees of zoom. And then here it's the export. Of course, when you select certain assets you would click this and you'll be able to export it. Now on the left side, there is a panel with three tabs. The first one is for layers. So if for example, I wanted to draw a rectangle here, we will have a layer for that rectangle. The second tab is for components. So if we're gonna select a layer here, and we're gonna click this button and we're gonna create a component and that's gonna show up right here. Of course, I can publish this to a library. And in which case, it's not going to be just local, it's gonna be available to others. But for now, I don't need that. And here is the team library for Team Adi. But of course, this is a feature that is only available when we upgrade to the professional plan, I believe it was called. In here, in the middle we have the infinite canvas. If you've worked with Sketch before then you're familiar with this. Basically the canvas is infinite, you can be as wide as tall as you'd like. And you can put how many elements you want in it. On the right side, we also have a panel with three tabs, and these three tabs are design prototype and code. Design will actually change depending on what you have selected. So if I have a piece of text, that panel will fill in with stuff about text, we have text controls. If I selected a rectangle I have controls for that rectangle like fill, layer properties, positioning and so on. And actually these here on the top these three sections, the first three, are the same for pretty much anything you would select except maybe for when you don't select anything. But for text, you also have alignment options, positioning options, and layer options. You can select the type of layer that you want and also the opacity here, you can choose to toggle the visibility on and off. But when I'm outside, when I'm on the influent canvas, I can change the background if I want to. All right, I can hide it all together. I can show in exports that's what I want and I can activate the pixel preview 1x or 2x for written screens and also the pixel grid. And of course, we have the export options and pretty much anything that we select. The prototype will actually work when prototyping. We'll cover this in a future lesson. And code will work for inspecting a certain element. So if I select This text for example, gives me a list of its properties and I can switch to CSS, IOS, or Android code. And it gives me CSS code or in the case of via west swift code and so on. Very, very handy for developers. They can simply inspect certain elements and they can get their CSS right off the bat it's a really awesome collaboration tool. And that's a quick tour of the Figma UI. Now, in the next lesson, we're gonna learn how we can work with frames, shapes, and text, and that's coming up.