2.3 Working With Frames, Shapes, and Text in Figma
In this lesson, we’ll start using the most basic (and arguably the most useful) tools in Figma: frames, shapes, and text.
1.Introduction2 lessons, 06:09
2.Getting Started With Figma6 lessons, 44:41
3.How to Use Figma as a Designer3 lessons, 50:38
4.How to Use Figma as a Developer2 lessons, 08:11
2.3 Working With Frames, Shapes, and Text in Figma
Welcome back to the course. In this lesson, we're gonna start using the most basic tools in Figma. These are frames, shapes, and text. So let's begin. Let's start with frames. And what are frames? Well, first of all, let me give you a comparison with another software that you might be familiar with, Adobe XD or Sketch. Both of these use something called artboards. And an artboard is like a big container for your design, right? You would create an artboard for an app screen, or a website, or a web page, or an icon. Well, frames are exactly the same. So I can grab the Frame tool or press F on the keyboard, and I can simply click to create a default frame, which is 100 by 100. However, I can click and drag and create a frame of custom size, or I can choose from a variety of presets. So there are presets for phones, tablets, desktops, smartwatch apps, paper, social media, and so on. So let's say I'm designing an app for a smartphone and I wanna preview it on an iPhone 8, for example, I can click iPhone 8, which is pretty handy. Now, with the frame selected, I can press Ctrl or Cmd+R, to rename it, or I can double click in here. And if we look on the right side, we can swap the orientation from portrait to landscape, just like that. And we can also do something very cool, which is resize to fit. So for example, if I were to have a rectangle in here and I do this, the frame will resize to the exact dimensions of the content. In my case, I just had a simple rectangle, so it resized to that. But if I have more, you'll see that it resizes differently. Pretty cool. With the frame selected, I can also change its size by clicking this drop-down. So let's say now I want an iPhone 11 Pro Max. So I can change that on the fly, which is pretty cool. From here I can change the x, y, these don't really matter. Width, height, you can click and change these values manually. Or you can click on the W or the H and just drag left and right to get to the desired size. You basically have the same controls like any other shape here. Next, we can add an auto layout or layout grid, these are for a future lesson. And the rest of the controls are exactly the same as the controls for any old shape. Now, frames can be nested. So I can grab the Frame tool and I can draw a frame inside of a frame. And as you can see here in the Layers panel, a frame is represented by this symbol. And I can nest frames indefinitely. If I drag a frame outside its parent frame, it's gonna be a top level frame. And I can go ahead and give it a fill, give it a border if I want to. It really depends on what we wanna do with it. So that's it for frames, basically. Now, let's move on to shapes. And in Figma, you can create the basic shapes really easily. You can go right here where it says Shape Tools, and you can choose between rectangle, or R on the keyboard. You can click and drag to create a rectangle, or you can hold down Shift while doing that, and it's gonna create a square. Next, you can create lines with L, or the Line tool. Same deal, click, drag. And if you want this to be perfectly horizontal, hold down Shift. And while holding down Shift, you can actually rotate it in increments of 45 degrees. The line by default has a stroke, it has a stroke width of one. And there are some additional options for stroke, like adding a cap, setting, how the joins are made, adding dashes, gaps, and so on. So that's the Line tool. Next, we have the Arrow tool, which is basically a line with an arrow at the end. And as you can see, let's actually make this a different color so we can see it better. The only thing different here is the fact that cap is now set to Mixed. And I can say Line Arrow or Triangle Arrow, very handy. Next, we have the Ellipse tool, or O. Same deal, click and drag to create an ellipse, or hold down Shift to create a perfect circle. Next is the Polygon tool, which can be used to draw polygons, like triangles, rhombus, pentagon, hexagon, and so on. You can basically go and change the corner count here. So three is for a triangle, four is for a rhombus, five, six. And you can even go really crazy and create something like this with 20 corners. I don't even know what this is called, but it probably has a pretty cool name. So that's how you can use the Polygon tool. We also have a Star tool that we can use to draw stars. And here you can change the count, so how many tips do you want. So this is a three point star, four point star, five, six, ten, and so on. And you can also change the depth or the angle between each star branch. And that's it for shapes, really simple to use. You can find all of them here. Of course, you can create custom shapes with the Pen tool or the Pencil tool. But we'll talk more about that in the next lesson. For now, let's talk about the Text tool. So T on the keyboard and click anywhere on your canvas to create a text. For Text, you have access to the usual controls, like alignment, positioning, size, blend mode, capacity, fill, stroke. But also you have access to typography controls, like font family, font weight, size, line height, letter spacing, paragraph spacing, you can create text boxes. So this is now currently set to auto width, but I can set it to a fixed size and I can make it bigger. And you'll see that any text that I type in in here will just move on to the next line. And now I just set auto height so that it's setting its height automatically depending on the size of the text. And here, let's actually change this fill to white so you can see it a little bit better. And you also have some advanced typography controls. If you click this little button here, you'll find options for alignment, decoration, if you want it to be underline or strikethrough. You can indent each paragraph individually, and you can also set the letter case. And you get some more advanced controls here, like, for example, how the numbers look like, whether or not you can use ligatures, and so on. So it's really simple. If you just want a standalone piece of text, then just press T, click, and type your text. If you want a text box, you can press T, click and drag, and then type your text in there. And then you can always go in here and change the properties as you see fit. All right, and that's how we can work with frames, shapes, and text. Now, Figma is an interface design tool at its core, but it's also a vector graphics editor, which means it can be used to create and edit vector graphics. And to do that, it uses something called vector networks. So let's learn more about those in the next lesson. See you there.