Getting Started with Figma Design Tools

Hi friends, Miggi from Figma here. This video is for those of you just getting started using Figma. You probably heard of Figma before. You were curious. Maybe you're considering a new design tool. Maybe you're new to design. Guess what, you're in the right place. Figma is a design platform that has a number of different tools. We have FigJam whiteboarding, we have Figma Slides, we have Figma Design, and we have DevMode which allows for developer and designer collaboration. Because of its collaborative nature, teams use Figma as a single source of truth and a place to centralize their design systems to make sure that they have consistency across their entire organization. Figma Design is the design tool where we are going to be working together to visualize our ideas as well as prototype our ideas. So let's go. Here we are in Figma's design editor. This center area is the canvas. It's used primarily to visualize all the things that you add to it. When I select an object on the canvas, you can then see over here on the right, all of the properties that you can then modify to adjust it. Here I can select this object and then I can change the color of it. The object is this shape and then the property is the color. As you begin to adjust properties such as width, height, maybe even scaling it, all of those adjustments are going to happen in the right hand panel with any object that you have selected. Speaking of the object that you may have on the canvas, Everything that lives on the canvas will have a representation here on the left in the layers. As I move through this file, I can double click on the icon of any one of these objects in this workshop, and it will take me right there. The layers panel is a way to see how all of the objects that are on the canvas are stacked up. The first thing that we're gonna cover here in Figma, this is one of my favorite things to cover. This is called the Quick Actions Menu. The Quick Actions Menu can be found up in the top left. Under the main menu, you'll notice that the shortcut key for this is Command K. This is the one shortcut key that you want to remember when you're just getting started using Figma. When I turn that on, you'll see this window pop up. And it gives me a prompt to type in any function that I may be looking for within Figma. Let's try that out. And the first function we're going to look up is the keyboard shortcuts function. Let's press command K and type in Keyboard shortcuts. When I press enter, you'll notice across the bottom here, essential keyboard shortcuts that you can use to better understand how to navigate and use Figma. Everything from shape shortcuts. To text shortcuts, to arranging objects on the canvas, you can see and look through them here. I like this tool not only because I can learn the shortcuts, but I can find other operations and features that may be inside of Figma that I might not have been aware of previously. Once again, Command K quick actions. Let's type in another action here. I'm going to type in dark mode, so that would then put my Figma interface into dark mode. I want to remain working in light mode. So let's press command K and then type in light mode. So now we are currently in light mode. If you're looking for a particular type of operation, press command K and you can type that in to see if it is available. really quick, I'm just going to adjust my interface a bit. So then that way there's a little more white space between myself and this edge here. It was kind of bugging me a little bit. You can also do that on the right hand side with the properties menu. If you need more space, you can always scale those up. How cool is that? Let's move on to the next concept here. We're going to talk about shapes in Figma. They seem pretty simple, but there is a lot more to them than that. We're going to come down here to the shapes menu in the toolbar, and you'll see the available shapes. We have rectangles, we have ellipses, we have polygons, we have stars. Let's start first with the rectangle. I'm going to draw the rectangle onto the canvas. We can select it, come over here to the properties, panel and change the fill on that rectangle. Let's make that rectangle blue by adjusting the position here in the color selector. We can adjust the hue right here as well. Make that blue. So we have this basic rectangle. You'll notice that when I select it, you have these little dots. That is the collective radius of that rectangle. So it allows you to give it rounded corners. The next shape we're going to talk about here when it click this drop down. We're going to choose the ellipse tool. The ellipse tool is going to be the O key. So when I press the O key, I can click and drag on the canvas and draw out an ellipse. Now, a few things on creating these. When I hold down the shift key, it will honor both the height and the weight and keep them in tandem. So right now I'm going to keep a perfect circle when I hold down the shift key on the canvas. If I hold down the option key, you will see that it grows from the center. So this way, as I'm placing it, I can have a bit more control. When I do so, we're also going to change the fill of this. I'm going to make this circle red. A few more things about the circle. You too will notice that it has a little dot. When you hover over that dot, that allows you to use the arc tool. When you click and drag that dot over, you'll notice you're able to cut that circle up much like you would a pie. So I'm adjusting the sweep value here. And once again, this is a property that once activated can now be adjusted over here under the appearance panel. When you have the circle selected, I'm going to click this center dot, which is the ratio. And you can see me pull up that ratio. For the arc tool. I can also adjust the start point for that as well. What is great about this is it allows you to create graphics that you might want to for a circular user interface. I think that that's pretty great. Let's cover a few more. The polygon tool. When I click and drag and hold down the shift key, it creates a nice equilateral triangle. You'll notice that there's additional bounds on this triangle. This tool too has one of those adjustments where I can select one of the edges here and increase the amount of sides that are available on this polygon. As I do so, this is now a property that is available on the right hand side. Once again, let's adjust the fill color. Of this particular shape as we are working with it. The few things that I will note here is that this bounding box allows you to better center the shapes that you create inside of other objects. So this triangle in user interfaces is often used as a play button. So by moving my cursor to the edge, holding down the shift key and rotating it, you can see I've created a play button. Now, when I use this in tandem with a circle or the ellipse tool. I'm going to press the O key, draw this out. And now we want to send this behind the triangle. If you remember, we talked about the layers panel over here on the left, you can see the ellipse is on top of that polygon. So we can just drag it above and you can see, we can control the stack order of our objects there on the left. Back to this object here if we wanted to create a play button, you'll notice that that bound, that bounding box around the triangle gives you the ability to better center those two objects. So I can drag the triangle and you'll see little red lines guide me to the correct placement of it, or I can select both of those objects. Notice I click, I drag select both of them and here I can center them both by going to the alignment panel. In the properties menu, I'm going to align the horizontal centers in the vertical centers. If I was to have a triangle that didn't have that bounding box, let's say this triangle was flattened as a graphic. So if I right click or control click, I can then choose flatten. You'll notice the shortcut key for that is command E. When I flatten it, you'll notice the bounding box is hugging the triangle. And if I were to select both of those objects and center them together, you'll notice the triangle is off to the side. This is going to be much better for generating your UI than triangles you may have found in other tools. The last shape that we're going to talk about down here is going to be the star tool. We're going to add the star once again holding down the shift and the option key the alt key if you're on windows to Drag it out from the center. Let's change that fill color. So we can see it. The star tool, as well as the other shapes has these little dots, which allow you to adjust certain properties. And once again, the properties are available over here in the right. in the appearance panel. So if you wanted to create like an AI icon or if you are going to generate stars, for ratings like for a restaurant, you can use this tool to generate them as well as adjust the radius. If you want a softer shape for that star, the next concept that we're going to talk about is vector networks. Since we just covered shapes, I'd like to mention that shapes are all vector generated. What a vector graphic is, is a graphic that is created using math. So individual points that create that shape and as such, they are scalable. You can make them large, you can make them small, and they will retain the shape. Conversely, raster graphics, which are pictures or photos, are pixel based, and they're much harder to scale up and down and retain a lot of that fidelity. Because of that scalability vectors are great for creating user interfaces. Figma has this unique ability to create vector networks and I'm going to unpack what that means. The first thing that we are going to do is come down here. We're going to choose the Pen tool. You may be familiar with the pen tool from other applications. Other. Vector applications, other design applications. And what we're going to do here is draw a simple box. I'm going to click, I'm going to hold down the shift key. Click while still holding down the shift key, click, click. And click, and that's going to close and create this box. Now you will notice that we are currently inside of this vector shape. I can select these points and freely arrange them as needed. I can also. I can turn on the bend tool, which is going to be for me, the command key control key if you're on windows, and I can click on any of those points to release those handles. If you are familiar with other vector applications and modifying Bezier handles, you will be right at home in Figma. Figma possesses this ability to create vector networks. And what that means is I can create additional points on these lines. And connect them. So what I'm doing here is I am connecting nodes that exist from those lines and I'm able to create an entire network of these nodes that are interconnected. Let's explain why this is helpful. If you were to create an arrow icon in other vector applications, you would not be able to generate another line coming from this point. In order for us to do this, you'll notice that the line is still sticking to my cursor. I can press the escape key here, hover over that center point. You'll notice the little dot that appears over the pen tool. I can click, hold down the shift key, click, and then press the escape key. Once again, and I've created. A single arrow using the vector networks. Now, if I was to press the V key, that is going to be the move tool. Then I can begin to move those points around as necessary. If I wanted to adjust this further, let's say I wanted rounded edges and a rounded corner here, I can select all of those points. Come over here to the stroke. Panel. And here are the advanced stroke settings within the advanced stroke settings. I can choose that join to be rounded. You'll see here it's sharp and here it is rounded. And I can also select these end points. So let's say if I just select this one, I can choose for it to be round. Now I can select these other points and also have those Endpoints be round as well. There's a lot of options when creating custom vector graphics. Let's say we wanted to recreate the send icon that is prominent in a lot of social media tools. I can press the P key for the pen tool. Let's click. Click, click, click, and click. Then we can select that center point and connect it to that top point. You can make adjustments by pressing the V key to adjust those as well. We can select all of those points. Once again, come on over to the advanced settings. Stroke settings and choose a rounded join so you can then make adjustments as necessary to get your icon. So that's it for vector networks. We can now move on to the next concept, which are going to be Boolean operations. Boolean operations in Figma allows you to generate unique shapes using existing shapes and vectors. Let's begin by creating a simple plus icon. I'm going to come down here, choose the rectangle tool. Let's make the first part of the plus symbol by clicking and dragging a tall rectangle. Then, let's change its fill color so we can see that a bit better. I'm going to select it. Let's duplicate it by hitting command D. So we now have a rectangle on top of itself. If I hold down the shift key, I can now rotate this to the right. We have our horizontal rectangle. I can double click and rename that. Let's just say horizontal. And then we have our vertical one. Vertical and what we want to do is to select them together so they can make a unique shape and let me explain why if I was to select both of these rectangles and change the fill and the stroke, I'm going to do that by pressing shift X and let's increase. The weight of that stroke, you will see that they have these interconnecting points, but if we create them as a union object, so I'm going to select these objects, I'm going to hold down the option key. It's the alt key on windows. Let's drag this while holding the shift key, and then I'm going to swap the fill in the stroke again by pressing shift. And X. We're going to union these objects together using a Boolean operation. The Boolean operations can be found in the top right under this little menu right here. You'll see union, subtract, intersect and exclude when I select the union option You'll notice that it now takes those two objects and makes them a singular object. If you take a look at the layers panel here on the left, you'll see the horizontal object as well as the vertical object nested inside of that union object. It becomes more obvious. Obvious when we swap the fill in the stroke with shift X that they have now been brought together at any point. If you need to make adjustments to one of the objects inside of the Boolean object, you can see how that's happening and taking place there. Let's snap it back to the middle. We can select the entire object. Come over here to the right in the design panel. Under appearance and change the rounded corners. So we can apply a corner radius and you can see how that's being applied to the graphic. We can also adjust the stroke settings. Currently they're set to the inside, but if we set them to the center or to the outside, you can see how that begins to impact the radius of that union object. I'll show you that one more time. When we go to the inside, you can see how The corner radius is being applied there. And when we set it to the outside, you can see that it's on the outset. And when we place it inside of the center, you can see that the corner radius has been applied to all of the edges at once. Union objects are great, but let's say you then want to cut out an object from a shape. I'm going to press the O key to draw out an entire circle. Let's make this circle a darker color. I'm going to select that plus symbol that we had from before. Let's swap the fill in the stroke with shift X. And. And let's change the color of it to green, because we're going to use this object to cut away from the previous one. And I mentioned previously that we can change the stack order on the left hand side here. If you want, you can just drag that above the other object. However, you can also right click, and bring this to the front. Now that it's in the front, we can move this shape down. We can align the two together and we're going to select them both. Now we're going to use a subtract Boolean operation. Come over here once again to the top right and choose subtract selection. This will subtract the top shape from the shape that's sitting beneath it and create them as one. Once again, take a look on the left hand side, you'll see the subtract, you'll see the union inside of it, and you'll see the two rectangles that created that as well as the ellipse here. Now we can change any of these properties. I think the most obvious way of demonstrating this is by pressing shift X and applying it as a stroke. And you can see how that impacts the creation of that graphic. I'm going to press shift X once again, and I think that's pretty nifty. If you also might be thinking what would be good for the intersect, if you take a look at this eyeball here, this eye is created using two circles. I'm going to draw one circle here. Let's make it a darker color. Let's hold down the option. Alt key if you're on Windows, drag this down and select them both. What we have here is the intersection between those two shapes that we want to gather when we apply the Boolean operation. Now that they're both selected, come over here to the Boolean operation menu and choose intersect selection and that's going to give us the shape that we want for the eyeball, I can then press the O key. I can draw a circle in the center. I can select them both. We can go to the Boolean operations menu, apply a subtract selection, and you can see that this is now an entire shape. Once again, I do want to highlight the way that these are nesting inside of that subtract operation. We can now add another. Circle in the center. I'm going to drag this out. I use the O key to draw the circle. We're going to put it here in the middle. I'm going to demonstrate how it's added by adding that green color. So here you can see it's quite easy for me to center it as I'm adjusting it in the middle there. I'm going to select both of those objects and apply the union selection. We have. Pulled this all together. And the last thing that we might want to do is subtract a bit of this piece right here to create the shine in the pupil. I'm going to press the O key, hold down the shift key. We're going to select it right there. We're going to select them both. Come over here to the Boolean operations menu and then choose subtract selection. We can then change that fill in its entirety. And once again, The benefit of this is when I hold down the option key or the alt key, if you're on windows, we drag this down to make a duplicate. We can swap the fill and the stroke shift X and increase the weight. And you can see we now have that outline version of those objects. At any point, you can always. Navigate into the object and make additional adjustments. So here I am selecting one of the nested ellipses that is applying that subtract operation to the union object that sits beneath it. And it gives me the opportunity to update this live or make edits. I can even make that a bit larger and you can see the output that we're getting here. here. I think that's pretty nifty. One other way that you can access this is to go into outline mode. Let's come down here by pressing command K and type in outline, and we're going to choose show outlines. The shortcut key for that is shift command O when we are in outline mode, we're going to have access to all of the shapes, you can see the darker lines kind of showing the outlines. And then we have these lighter lines, which allow us to access those shapes and move them around with more control and more access. So by going back to the outline mode, we can then turn that off and we can see how our actions applied to our graphics. That's it for Boolean operations. We are now going to talk about fills, images, and effects. Since we've already been talking about vector shapes, let's talk about adjusting their fills as well as applying effects to them. I'm going to draw out a rectangle. This rectangle here, I'm going to change its fill color. We've already been doing that. So let's talk about some of the other fields that we have available. So this is currently a solid fill. If you want to change the type of color representation, the format you could do so here. Next, let's talk about. Gradients. We can talk about linear gradients, radial gradients, angular gradients, and diamond gradients. Let's start with the basic one. You can add in additional stops for your gradients here. You can see the stops represented down here. If you want to remove one, you can , delete the gradient stop. If you want to redistribute them, you can double click on that there. So I can select those gradient stops. I can change them and you can see here I can make that color adjustment and that can also be modified directly on the canvas as well. You can see I can adjust those gradient stops there. Let's say we want to apply a radial gradient. You can see that the adjustment then changes. On the graphic itself, and you can attempt a angular gradient. Once again, you want to add an additional stop. You can change the position of it and see how that is then applied on the object itself. I think this is pretty cool. Once again, Double click on those and they will evenly distribute around the object there. The next type of fill that we have, I'm going to show you with a few more graphics. I'm going to click the rectangle tool. I'm going to hold down the option key. Alt key if you're on Windows. Drag this to the right and then press command D a few times. I'm going to select all of these objects. We're going to come over here to the fill and we are going to make them image fills. When I make them an image fill, it creates it as an image placeholder. It doesn't need to be an image placeholder, but it's something that I like to set up. We can actually set all of these as a typical color fill. and what I'm going to do is I'm going to place images directly into these shapes. All images are fills on shapes. I'm going to come down here to our quick actions tool and type in place And the place image shortcut is shift command K that will pull up the file browser, giving us the ability to pull in a number of images. So I'm gonna choose 1, 2, 3, 4, 5. I have 1, 2. Three, four, five images that is then going to load up on my cursor. So I could see my cursor right there has the number five and those images are charged up. Now, when I click on these shapes, they will. Then be populated by the images that I had there. If I click on any of these images, you'll see the image show up as a fill. If I were to click on that, I can make adjustments to the image and I Change how that image is mapped in that fill. It's currently set to fill and what that means is it will do its best to fill that shape. I can then change that to fit so it'll fit the entire image or change it to crop and changing it to crop will give me the opportunity to move the image around in that space. You can also choose tile so I can make this a much smaller Tiled image, and you can see by adjusting this percentage here, how that actually works. You're more likely to use fill or crop in that process. If you need to rotate that image, you can rotate it in that space as well. Now, if you're taking a look at Add an image and you want to quickly crop it within its given shape, hold down the option key or alt key on windows, double click on it and it will immediately set it to the crop option. You can then select that object and resize it and replace it. In that space, the one thing you want to be mindful, though, is when resizing an image that's cropped, it's going to behave differently than if it's fill. It may distort, so if you want to resize this, you can option double click on it, change it back to a fill, and then you can go back to crop and make your adjustments. Just be considerate of the type of fill you may have on your image object. Now any shape can take on an image fill. I'm going to create a few shapes here. Let's make some adjustments. Let's also take a triangle and they can all accept the same fills as these rectangles. I'm going to select this object. I'm going to copy that layer. Notice how I'm selecting just to the left of that image fill. I can hit command C select that. I can select the new object, press Command V or Control V, so Control C to copy, Command C to copy, or Control V to paste, Command V to paste. And there we go, I can, uh, Copy that fill and paste it. One other thing that you may want to consider is you can add additional layers on top of an image fill or a color fill. So we have the fill here. We have the image. We can add the plus, which creates another fill on top of it. The default is going to have this lower opacity black here, but I can change that color. I can actually increase the percentage. And then we can play with the blend mode of that layer, which will then affect the layer underneath it. So I can apply a red screen to have a more stylized image. These can be reordered. So I can always place the image above it or below it. I think that is pretty great. And I like how that works, giving me a lot of flexibility with those fills. The next thing that you want to consider is that Anytime you are creating a new object, so if I was to create another rectangle, you're going to notice that we have the default gray color, if you ever want to change the default Appearance of any new object that you create, you can select it. Let's say we change it. I create this darker gray value here. I can then go to the quick actions menu and I can type in set default. Properties. What that means is then from here on out, when I draw a new shape, it will have the properties of the object that I used to just set it. Another thing to consider is you can use the eyedropper tool to select existing colors on the canvas. When I press the I key, I can go around and I can select this red. I can hold, press the I key again. I can select this blue when selecting a color. You can change the formatting of the color. If you take a look right now, it's using the RGB color model. When I press tab, it changes the hue, saturation, lightness, and I pressed tab again, hue, saturation, brightness tab again. And you now have the hex value. This. It also works in coordination with creating color styles, color variables, which we have yet to cover, but let's say we create a color style based off of this gradient. So I take this gradient here and we're going to look for these four dots. The four dots. Allows us to create a new style. So here we're going to create a new style or variable and here we can give it a name. I'm going to call it Angular Gradients and what is it for? For now it's just for fun. These are the properties that are going to be part of this style. We can create that style. Now, when I click on the canvas, I can see that there's a local color style. This allows us to reuse that style, which I think is pretty great. Now, If we want to select it and apply it to this object, we can use the eyedropper tool. I'm going to press the I key. We can hover over here and you now see this option. If we press shift, it will then select the angular gradient style and apply it to the object. We had selected. I'll show you that one more time. I selected this object. I press the I key. We come over here. We hold the shift key and it now accepts that gradient styles can also be from images. So we can select this object. We can come over here. We can add a new style. And here is the style. We're going to call it our puppy image. What's it for? Also fun. Here are the properties. We create that style. We click on the canvas. We can see our puppy image style. We can also apply this. So if I were to click on this fill, I can just choose it right there. But let's say we're on the canvas. We're moving fast. I can select both of these objects, press the I key, come up here and we can choose either the color. Or press the I key, press the shift key, and we can choose and pick up the style from that image. That's going to be really helpful as you get more into Figma and you create color styles or color variables and you want to either reuse them or create a new one. Let's say from this image or one of these colors, what I can do is press the command and shift key when I click. So here. When I press the command and shift key, control and shift, if you're on windows, I can create a new variable color or style from the, object that I'm working from. I think that's pretty awesome. Next we're going to talk about applying effects to layers. If I go ahead and I create yet again another rectangle, what I can do is apply effects to it. Let's take this fill, let's make it blue. And what we're going to do is head down here to the effects panel, and the first effect that we have here is drop shadow. If we click on the drop down, we can see some of the other options that we have available to us. We have inner shadow, layer blur, and background blur. I'm going to start with inner shadow. I'm going to click. On this option right here, we can move the position, the XY position of that shadow, we can apply more of a blur, and we can even spread that out. Next, what we can do is add another inner shadow, and let's say in this turn, we can, apply it in the opposite direction. We could even apply a lighter value color. So as we're working here, we can apply these styles. Now, if you wanted to create a bit of dimensionality in your design, this is going to give you the opportunity to do so by generating highlights, on an object that you have here. We can also create a drop shadow. The drop shadow will be from underneath the object. We can increase the blur. We can increase the spread of the Of that and even change the color so it appears a bit more natural. Next, we also have a layer blur option. The layer blur will blur out the entire layer that you have there. So it still remains a vector shape. It just has a non destructive layer blur applied on top of it. The last thing that we're going to demonstrate here, I'm going to do so with another shape. I'm going to press the R key, we're going to draw another rectangle, and this time we're going to create a background blur effect. So if you look down here, you see the background blur. When I hover over any of these objects, you're not going to see it apply. It has to have either low opacity or a layer blend mode to then see what's behind it. I'm going to lower the opacity to about 50 percent and we're going to take that background blur, drag that value up. And you can see that you get this frosted glass effect to any object that is sitting behind it. If you want to apply this effect without any color transference to the object that sits behind it, choose a pure white fill. all Fs across the board as your hex value. Let's make it 100%. And what we're going to do is rely on the blend mode, the multiply blend mode to apply the effect. Now what we have is an invisible window pane applying the frosted glass effect. This is great for working on UI, if you want to hide an object in the background background, create a sense of depth. And it is a CSS property that is available that can be used in web design. How cool are those effects? I love working with these effects and I think that understanding the basics of them gives you a lot of opportunity for creating UI that has depth and the feeling of material. Next up, let's talk about typography. You can create type using the type tool. It's going to be down here. Whenever you have the type tool selected, any text underneath the text tool is selectable, even if it is buried down in a nested group or frame, what we're going to talk about is a few things. I'm going to select this text. I can come over to the typography panel here. I can change the font that is being applied to this text. When we go here as well, we can use this browser that allows us to select various fonts that are available. If you use the desktop version of Figma or have the font utility downloaded, you will be able to use fonts that are installed. However, if you're just getting started, you can browse through the existing Google fonts and you can even search by Variable fonts. I like using variable fonts because when you go to modify the weight or style of the font, you can apply a variable font axes. So here I can And I can adjust these values here to get more variation in the font as I'm working on it. You can always pick from the drop down, but you can also use those variable font axes when they're available using one of the variable fonts. A couple of things that I do want to talk about quickly here is there are advanced. type settings. So when you go into the details, you can make adjustments such as, having hanging punctuation for quotes. So if I was to add a quote to this paragraph, it's currently inside of the paragraph. If I want it to sit in the margin as many designers will want to see, I can turn on hanging punctuation. And it will fit outside of that box. I think that that is a really nice detail. I'm going to click here again, other details. You can adjust, you can modify the letter case, you can access other features of a given font as you move through the details in this set. You can enable stylistic alternates, you can apply disambiguation, which in this font allows you to better see the difference between a lowercase L and a uppercase I, , and just take a look at the various options you have available. I think that this is a bit of a deep cut, but it provides folks a lot more flexibility when working with type. The other thing that I do want to draw attention to here is when you're working with a text field. So let's say I press the T key. I draw out a text field and I paste some text. You want to think about the three different resizing modes For this text field, when I come over here to the right under layout with this text field selected, you'll notice that we have auto height, we have auto width and we have fixed size auto width puts the text at a very long line. It's basically just going infinitum in the wide direction. What we can do here is we can change it to auto height and maybe we want to bring down the width of our text field. One way to go between that is just by resizing it or by turning on auto height here. You'll also notice that if the bounding area is greater or less than you probably are working with a fixed size text box. If at any point you want to adjust that, you can just double click and it'll change it to auto height. Auto height is probably the use case that you want the most when you're working with a text box in Figma, but you always want to make sure that you understand the intent that you're trying to work with. So auto height will always increase the height of that text field to fit your text. That's pretty cool. Next up, let's talk about alignment and constraints. Let's say you have a number of objects here on your canvas and you want to tidy them up. When you select those objects you'll see this little icon here. I like to call it the alignment saltine. It looks like a little cracker. When I click on it Then it arranges the objects. We can see how they're spaced. We can see how they're adjusted. I can even move them around. So then that way they fit more into a grid shape. So this will allow you to better space and adjust the elements that you're working with. Even if. If one of those elements is red, if one of those elements is different, you want to move it around, you'll see how it rearranges everything. If you want to swap it one for one with another object, hold down the command key, control key if you're on Windows, and you can swap it one for one with another object. If I was to make that object blue, you can see how this works. Wherein I can just select both of these and swap them one to one. Or if I select the whole thing and I hold down the command key, I will swap the red one for the blue one. So let's say I move the blue one over there. Now when I'm holding the command key, I can swap The red for the blue, once again, you could just select objects that have that alignment. You'll see these little hover states and you can always rearrange them. I think that that's like a nice feature. It helps you keep your objects orderly. The next thing we're going to talk about is constraints. When you are resizing objects, and that's going to be the next section we're going to talk about. But when you place objects inside of a frame. So here I have a. A frame. I'm going to move this frame down here. I'm going to grab a few of these little objects and place them inside of this frame. So when I resize the frame, you see how some of these objects are moving along with it. What you can do is. You can determine how an object behaves when a frame resizes. And that term in Figma is called constraints. I'm going to select this frame. I'm then going to select one or two of the objects inside. Let's select this object here. We're going to set this to left and top because we want it to follow the left and the top, this object. We're going to set to the right and to the top, because we want to follow the right and the top, this object, we're going to set the right and the top. And the bottom, because we want it to follow the right in the bottom, this object, we're going to say the left and the bottom, and you'll see now that they will all follow in that way. Another thing that you can do here is you can tell an object to have scale constraints. And when they apply scale constraints, you will see how that object begins to scale. But if you want to But what I would recommend is instead of using scale, use left and right and top and bottom constraints. And what it'll do is it'll keep the left and the right and the top and the bottom of that object they're constrained. So as I'm resizing it, you can see that all of these objects are behaving as I've instructed them to do they're inside of this frame. They're going to have those constraint options. When I move this object outside of the frame, you're not going to see those options. They will only appear when they are inside of a container that will allow them to, determine how to move With that container. So that's alignment and constraints. Next, we're going to talk about resizing versus scaling. We've already been privy to the concept of resizing in Figma. So this is a frame and there are. Is a text object and an arrow object inside. When I resize this wide and tall, you notice that those objects stay to the left and to the top. Now, when I select this arrow, I'm going to choose a right constraint. Let's choose right. And center. So we want it to be in the middle, this object as well. We're going to have it on the left and the center. Now, when I resize this, you see, I'm resizing the frame. This is very similar to when you're resizing a window on your desktop or a web browser, we don't actually want to scale the elements inside of it, But we want to instruct them how to move with it. If you do want to scale something, what we can do instead is use the scale tool. If you look under the move tool, you'll see the scale tool. The scale tool is the K key. I'm going to press the K key and you're going to notice over on the right, the scale properties panel opens up. This allows you to type in a value to scale your object too, but you can also use the arrow on the canvas. And the shift key. So I am scaling this larger. I'm scaling it smaller. And you see that the actual dimensions and the properties of those objects are scaling up and you can see by how much you're scaling over here, as well as the anchor point of that object that you're scaling up. So right now it's scaling from the top left point and we're scaling it by a factor of two X. Then you can see the output here. It's twice as large. People often confuse resizing versus scaling and Figma. So just remember if you want to scale something, use the K key. If you're going to resize something, think about its constraints as well as the container that it may be in to better control how the object decides to resize with the parent container. Next up, we are going to talk about auto layout. So if you remember in the last two sections, we were talking about alignment of elements. With auto layout, it helps you keep your objects inside of a frame and have all of their spacing maintained. It tells the object how to behave. So here you can see, we have Vertical objects, all stacked together. We have horizontal objects and we have objects that are wrapping. So the way that this works, if I was to select these objects, you'll see the little, alignment saltine there. We have the ability to change the spacing and we have the ability to rearrange these elements. However, this is an impermanent. Option, right? It only happens in the context while you're working. If you want to create that relationship to be settled in you want to wrap them inside of an auto layout frame. We're going to use shift a, when you apply shift a, you can see auto layout has been added. And when we look over here to the right, The auto layout frame has been added and we have different options. So here I can change the direction of these objects. I can also change the spacing as well as add in additional padding. You'll notice that there's padding around these objects. And with that padding, we can apply a white fill to better see how they work. Next up, I can select the fill. I can choose one of those objects to have a different color, and I can show you how they can be easily reordered. When I press the left key, you can see the object moves left. When I press the right key, you can see the object moves right. So it is now stacked in this position. When I select that frame, I can change the direction to be a vertical layout or a horizontal layout, Or even a wrap layout when it's been applied as a wrapped layout. When I resize that window, those objects are going to do their best to wrap inside of that. This is achieved by a combination of understanding that these objects are all aligned as well as resizing properties. Resizing properties can either be hug, fill, or fixed. So right now we can see the width. Of this is a fixed width. If it is instead sets a hug contents, however, large, any of these children boxes are, it's going to impact the width of this entire object that is further demonstrated here with a button object. This is currently set inside of an auto layout frame. As I type in more words, so I say hello world, the outside frame is hugging the contents. These objects as well, I can change their resizing behavior. Right now they're all currently set to fixed width. If I instead change them to fill container, you can see that the parent container is now set to fixed. So that means that all of those objects are doing their best to fill the width of that container. If I were to change the size of one of these, then you can see that this object has fixed sizing and each of these have a fill sizing applied to them. , The reason that we're talking about this is that using auto layout is going to give you the ability to create UI that will, grow and be more flexible and be responsive in your layouts so the last thing that we're going to do today is we're going to put some of these concepts together and make what is known as a UI card using the primitives that we have and everything that we've learned thus far. I'm going to select these objects. I'm going to bring them down here and just go over what we have. So I have a rectangle. This rectangle is going to serve as our image placeholder. I have some text. This is donuts. We're making a product card. So I'm going to use donuts and a description. So this text is 24 point text. let's set it with a 28 line height. And this text is a 16 point text with a line height of 20. I can make that 24. We're going to select all of these objects and we're going to create them as an auto layout card. Here I'm going to grab this ratings frame. I'm going to move it up here. I'm going to begin to structure this as I might put it together. Then I'm going to select the donuts and the ratings so then that way they can be in their own row together and I'm going to press shift a and that's going to put them inside of an auto layout frame. I'm going to call this title and ratings and we can see that reflected here in the layers panel. Next I'm going to select. All of these objects and we're going to stack them into a vertical auto layout column with them all selected. I'm going to come over here to the layout tool. This is the "use auto layout." Once again, that is shift a. They are now in an auto layout frame. Let's rename this. UI card. Now the first thing that we want to do is we want to apply a white background to this auto layout frame. I'm going to come down here to the fill option and make a white card. I'm going to select the UI card and then also go up to the auto layout pane and apply 24 point padding. Let's do 24 padding there and we can begin to adjust things further. I'm going to select the right edge of this card and you can see how it is growing. and contracting. You notice that the donuts row isn't growing and filling so we can select it. Come over here we're going looking at the width resizing and we can set that to fill container. When we are hovering over this option, you can see its impact in the UI. So when I go fill container, you'll see those little dotted lines. with the arrows. Let's choose fill container. You see that it is now filling the container. I'm going to select the donuts, text field, and then set that to, to fill container. It's going to fill the entire container. We can select that parent once again and adjust their alignment. If we want to align them to the center, that is an option that we have. We're looking at our UI card and when I reduce the width and I increase the width, you can see how that is applying to the objects inside. Let's go to the button that we have here. Is also an object that we might want to set to fill container, but I'll show you a shortcut on how to do that. I'm going to select the button. I'm going to hold down the option key. That's the alt key on windows. Let's double click. And now it fits it full. If we take a look at the layer structure of our UI card, we have here this rectangle. That's going to be our image placeholder. We have the title and ratings, which has the Donut text in there as well as the ratings. So that is in its own row. Then you can see we have the body text. And if we add in additional text here, I'll say chocolate is my favorite. You can see that this then extends the height of that text box and that's going to be the value of auto layout in creating one of these cards. I can select the entire UI card and apply a corner radius here of let's say eight and let's select the image placeholder area and apply a corner radius of four, and then we can adjust the spacing between all of our elements here, and we could bring that down to 24. So the next thing we're going to do, we're going to add an image. I'm going to select that fill. We're going to click on the fill. We're going to go to image. We can upload from computer. We can grab one of the images that we have on the computer. And there I happen to have some figma donuts. Let's see the other ways that this card can expand when I increase The height of this, you see it grow and contract. And when I select the width of the entire card, you can see how that then impacts the content and the height of the card. So these are just a few things that you can do in Figma. Feel free to review this video and look for others that can expand upon some of the basics that we talked about here today. You can find additional Figma for EDU YouTube videos on our YouTube channel, thank you all. I hope this was helpful and as always, happy designing.

Hi friends, Miggi from Figma here. This video is for those of you just getting started using Figma. You probably heard of Figma before. You were curious. Maybe you're considering a new design tool. Maybe you're new to design. Guess what, you're in the right place. Figma is a design platform that has a number of different tools. We have FigJam whiteboarding, we have Figma Slides, we have Figma Design, and we have DevMode which allows for developer and designer collaboration. Because of its collaborative nature, teams use Figma as a single source of truth and a place to centralize their design systems to make sure that they have consistency across their entire organization. Figma Design is the design tool where we are going to be working together to visualize our ideas as well as prototype our ideas. So let's go. Here we are in Figma's design editor. This center area is the canvas. It's used primarily to visualize all the things that you add to it. When I select an object on the canvas, you can then see over here on the right, all of the properties that you can then modify to adjust it. Here I can select this object and then I can change the color of it. The object is this shape and then the property is the color. As you begin to adjust properties such as width, height, maybe even scaling it, all of those adjustments are going to happen in the right hand panel with any object that you have selected. Speaking of the object that you may have on the canvas, Everything that lives on the canvas will have a representation here on the left in the layers. As I move through this file, I can double click on the icon of any one of these objects in this workshop, and it will take me right there. The layers panel is a way to see how all of the objects that are on the canvas are stacked up. The first thing that we're gonna cover here in Figma, this is one of my favorite things to cover. This is called the Quick Actions Menu. The Quick Actions Menu can be found up in the top left. Under the main menu, you'll notice that the shortcut key for this is Command K. This is the one shortcut key that you want to remember when you're just getting started using Figma. When I turn that on, you'll see this window pop up. And it gives me a prompt to type in any function that I may be looking for within Figma. Let's try that out. And the first function we're going to look up is the keyboard shortcuts function. Let's press command K and type in Keyboard shortcuts. When I press enter, you'll notice across the bottom here, essential keyboard shortcuts that you can use to better understand how to navigate and use Figma. Everything from shape shortcuts. To text shortcuts, to arranging objects on the canvas, you can see and look through them here. I like this tool not only because I can learn the shortcuts, but I can find other operations and features that may be inside of Figma that I might not have been aware of previously. Once again, Command K quick actions. Let's type in another action here. I'm going to type in dark mode, so that would then put my Figma interface into dark mode. I want to remain working in light mode. So let's press command K and then type in light mode. So now we are currently in light mode. If you're looking for a particular type of operation, press command K and you can type that in to see if it is available. really quick, I'm just going to adjust my interface a bit. So then that way there's a little more white space between myself and this edge here. It was kind of bugging me a little bit. You can also do that on the right hand side with the properties menu. If you need more space, you can always scale those up. How cool is that? Let's move on to the next concept here. We're going to talk about shapes in Figma. They seem pretty simple, but there is a lot more to them than that. We're going to come down here to the shapes menu in the toolbar, and you'll see the available shapes. We have rectangles, we have ellipses, we have polygons, we have stars. Let's start first with the rectangle. I'm going to draw the rectangle onto the canvas. We can select it, come over here to the properties, panel and change the fill on that rectangle. Let's make that rectangle blue by adjusting the position here in the color selector. We can adjust the hue right here as well. Make that blue. So we have this basic rectangle. You'll notice that when I select it, you have these little dots. That is the collective radius of that rectangle. So it allows you to give it rounded corners. The next shape we're going to talk about here when it click this drop down. We're going to choose the ellipse tool. The ellipse tool is going to be the O key. So when I press the O key, I can click and drag on the canvas and draw out an ellipse. Now, a few things on creating these. When I hold down the shift key, it will honor both the height and the weight and keep them in tandem. So right now I'm going to keep a perfect circle when I hold down the shift key on the canvas. If I hold down the option key, you will see that it grows from the center. So this way, as I'm placing it, I can have a bit more control. When I do so, we're also going to change the fill of this. I'm going to make this circle red. A few more things about the circle. You too will notice that it has a little dot. When you hover over that dot, that allows you to use the arc tool. When you click and drag that dot over, you'll notice you're able to cut that circle up much like you would a pie. So I'm adjusting the sweep value here. And once again, this is a property that once activated can now be adjusted over here under the appearance panel. When you have the circle selected, I'm going to click this center dot, which is the ratio. And you can see me pull up that ratio. For the arc tool. I can also adjust the start point for that as well. What is great about this is it allows you to create graphics that you might want to for a circular user interface. I think that that's pretty great. Let's cover a few more. The polygon tool. When I click and drag and hold down the shift key, it creates a nice equilateral triangle. You'll notice that there's additional bounds on this triangle. This tool too has one of those adjustments where I can select one of the edges here and increase the amount of sides that are available on this polygon. As I do so, this is now a property that is available on the right hand side. Once again, let's adjust the fill color. Of this particular shape as we are working with it. The few things that I will note here is that this bounding box allows you to better center the shapes that you create inside of other objects. So this triangle in user interfaces is often used as a play button. So by moving my cursor to the edge, holding down the shift key and rotating it, you can see I've created a play button. Now, when I use this in tandem with a circle or the ellipse tool. I'm going to press the O key, draw this out. And now we want to send this behind the triangle. If you remember, we talked about the layers panel over here on the left, you can see the ellipse is on top of that polygon. So we can just drag it above and you can see, we can control the stack order of our objects there on the left. Back to this object here if we wanted to create a play button, you'll notice that that bound, that bounding box around the triangle gives you the ability to better center those two objects. So I can drag the triangle and you'll see little red lines guide me to the correct placement of it, or I can select both of those objects. Notice I click, I drag select both of them and here I can center them both by going to the alignment panel. In the properties menu, I'm going to align the horizontal centers in the vertical centers. If I was to have a triangle that didn't have that bounding box, let's say this triangle was flattened as a graphic. So if I right click or control click, I can then choose flatten. You'll notice the shortcut key for that is command E. When I flatten it, you'll notice the bounding box is hugging the triangle. And if I were to select both of those objects and center them together, you'll notice the triangle is off to the side. This is going to be much better for generating your UI than triangles you may have found in other tools. The last shape that we're going to talk about down here is going to be the star tool. We're going to add the star once again holding down the shift and the option key the alt key if you're on windows to Drag it out from the center. Let's change that fill color. So we can see it. The star tool, as well as the other shapes has these little dots, which allow you to adjust certain properties. And once again, the properties are available over here in the right. in the appearance panel. So if you wanted to create like an AI icon or if you are going to generate stars, for ratings like for a restaurant, you can use this tool to generate them as well as adjust the radius. If you want a softer shape for that star, the next concept that we're going to talk about is vector networks. Since we just covered shapes, I'd like to mention that shapes are all vector generated. What a vector graphic is, is a graphic that is created using math. So individual points that create that shape and as such, they are scalable. You can make them large, you can make them small, and they will retain the shape. Conversely, raster graphics, which are pictures or photos, are pixel based, and they're much harder to scale up and down and retain a lot of that fidelity. Because of that scalability vectors are great for creating user interfaces. Figma has this unique ability to create vector networks and I'm going to unpack what that means. The first thing that we are going to do is come down here. We're going to choose the Pen tool. You may be familiar with the pen tool from other applications. Other. Vector applications, other design applications. And what we're going to do here is draw a simple box. I'm going to click, I'm going to hold down the shift key. Click while still holding down the shift key, click, click. And click, and that's going to close and create this box. Now you will notice that we are currently inside of this vector shape. I can select these points and freely arrange them as needed. I can also. I can turn on the bend tool, which is going to be for me, the command key control key if you're on windows, and I can click on any of those points to release those handles. If you are familiar with other vector applications and modifying Bezier handles, you will be right at home in Figma. Figma possesses this ability to create vector networks. And what that means is I can create additional points on these lines. And connect them. So what I'm doing here is I am connecting nodes that exist from those lines and I'm able to create an entire network of these nodes that are interconnected. Let's explain why this is helpful. If you were to create an arrow icon in other vector applications, you would not be able to generate another line coming from this point. In order for us to do this, you'll notice that the line is still sticking to my cursor. I can press the escape key here, hover over that center point. You'll notice the little dot that appears over the pen tool. I can click, hold down the shift key, click, and then press the escape key. Once again, and I've created. A single arrow using the vector networks. Now, if I was to press the V key, that is going to be the move tool. Then I can begin to move those points around as necessary. If I wanted to adjust this further, let's say I wanted rounded edges and a rounded corner here, I can select all of those points. Come over here to the stroke. Panel. And here are the advanced stroke settings within the advanced stroke settings. I can choose that join to be rounded. You'll see here it's sharp and here it is rounded. And I can also select these end points. So let's say if I just select this one, I can choose for it to be round. Now I can select these other points and also have those Endpoints be round as well. There's a lot of options when creating custom vector graphics. Let's say we wanted to recreate the send icon that is prominent in a lot of social media tools. I can press the P key for the pen tool. Let's click. Click, click, click, and click. Then we can select that center point and connect it to that top point. You can make adjustments by pressing the V key to adjust those as well. We can select all of those points. Once again, come on over to the advanced settings. Stroke settings and choose a rounded join so you can then make adjustments as necessary to get your icon. So that's it for vector networks. We can now move on to the next concept, which are going to be Boolean operations. Boolean operations in Figma allows you to generate unique shapes using existing shapes and vectors. Let's begin by creating a simple plus icon. I'm going to come down here, choose the rectangle tool. Let's make the first part of the plus symbol by clicking and dragging a  tall rectangle. Then, let's change its fill color so we can see that a bit better. I'm going to select it. Let's duplicate it by hitting command D. So we now have a rectangle on top of itself. If I hold down the shift key, I can now rotate this to the right. We have our horizontal rectangle. I can double click and rename that. Let's just say horizontal. And then we have our vertical one. Vertical and what we want to do is to select them together so they can make a unique shape and let me explain why if I was to select both of these rectangles and change the fill and the stroke, I'm going to do that by pressing shift X and let's increase. The weight of that stroke, you will see that they have these interconnecting points, but if we create them as a union object, so I'm going to select these objects, I'm going to hold down the option key. It's the alt key on windows. Let's drag this while holding the shift key, and then I'm going to swap the fill in the stroke again by pressing shift. And X. We're going to union these objects together using a Boolean operation. The Boolean operations can be found in the top right under this little menu right here. You'll see union, subtract, intersect and exclude when I select the union option You'll notice that it now takes those two objects and makes them a singular object. If you take a look at the layers panel here on the left, you'll see the horizontal object as well as the vertical object nested inside of that union object. It becomes more obvious. Obvious when we swap the fill in the stroke with shift X that they have now been brought together at any point. If you need to make adjustments to one of the objects inside of the Boolean object, you can see how that's happening and taking place there. Let's snap it back to the middle. We can select the entire object. Come over here to the right in the design panel. Under appearance and change the rounded corners. So we can apply a corner radius and you can see how that's being applied to the graphic. We can also adjust the stroke settings. Currently they're set to the inside, but if we set them to the center or to the outside, you can see how that begins to impact the radius of that union object. I'll show you that one more time. When we go to the inside, you can see how The corner radius is being applied there. And when we set it to the outside, you can see that it's on the outset. And when we place it inside of the center, you can see that the corner radius has been applied to all of the edges at once. Union objects are great, but let's say you then want to cut out an object from a shape. I'm going to press the O key to draw out an entire circle. Let's make this circle a darker color. I'm going to select that plus symbol that we had from before. Let's swap the fill in the stroke with shift X. And. And let's change the color of it to green, because we're going to use this object to cut away from the previous one. And I mentioned previously that we can change the stack order on the left hand side here. If you want, you can just drag that above the other object. However, you can also right click, and bring this to the front. Now that it's in the front, we can move this shape down. We can align the two together and we're going to select them both. Now we're going to use a subtract Boolean operation. Come over here once again to the top right and choose subtract selection. This will subtract the top shape from the shape that's sitting beneath it and create them as one. Once again, take a look on the left hand side, you'll see the subtract, you'll see the union inside of it, and you'll see the two rectangles that created that as well as the ellipse here. Now we can change any of these properties. I think the most obvious way of demonstrating this is by pressing shift X and applying it as a stroke. And you can see how that impacts the creation of that graphic. I'm going to press shift X once again, and I think that's pretty nifty. If you also might be thinking what would be good for the intersect, if you take a look at this eyeball here, this eye is created using two circles. I'm going to draw one circle here. Let's make it a darker color. Let's hold down the option. Alt key if you're on Windows, drag this down and select them both. What we have here is the intersection between those two shapes that we want to gather when we apply the Boolean operation. Now that they're both selected, come over here to the Boolean operation menu and choose intersect selection and that's going to give us the shape that we want for the eyeball, I can then press the O key. I can draw a circle in the center. I can select them both. We can go to the Boolean operations menu, apply a subtract selection, and you can see that this is now an entire shape. Once again, I do want to highlight the way that these are nesting inside of that subtract operation. We can now add another. Circle in the center. I'm going to drag this out. I use the O key to draw the circle. We're going to put it here in the middle. I'm going to demonstrate how it's added by adding that green color. So here you can see it's quite easy for me to center it as I'm adjusting it in the middle there. I'm going to select both of those objects and apply the union selection. We have. Pulled this all together. And the last thing that we might want to do is subtract a bit of this piece right here to create the shine in the pupil. I'm going to press the O key, hold down the shift key. We're going to select it right there. We're going to select them both. Come over here to the Boolean operations menu and then choose subtract selection. We can then change that fill in its entirety. And once again, The benefit of this is when I hold down the option key or the alt key, if you're on windows, we drag this down to make a duplicate. We can swap the fill and the stroke shift X and increase the weight. And you can see we now have that outline version of those objects. At any point, you can always. Navigate into the object and make additional adjustments. So here I am selecting one of the nested ellipses that is applying that subtract operation to the union object that sits beneath it. And it gives me the opportunity to update this live or make edits. I can even make that a bit larger and you can see the output that we're getting here. here. I think that's pretty nifty. One other way that you can access this is to go into outline mode. Let's come down here by pressing command K and type in outline, and we're going to choose show outlines. The shortcut key for that is shift command O when we are in outline mode, we're going to have access to all of the shapes, you can see the darker lines kind of showing the outlines. And then we have these lighter lines, which allow us to access those shapes and move them around with more control and more access. So by going back to the outline mode, we can then turn that off and we can see how our actions applied to our graphics. That's it for Boolean operations. We are now going to talk about fills, images, and effects. Since we've already been talking about vector shapes, let's talk about adjusting their fills as well as applying effects to them. I'm going to draw out a rectangle. This rectangle here, I'm going to change its fill color. We've already been doing that. So let's talk about some of the other fields that we have available. So this is currently a solid fill. If you want to change the type of color representation, the format you could do so here. Next, let's talk about. Gradients. We can talk about linear gradients, radial gradients, angular gradients, and diamond gradients. Let's start with the basic one. You can add in additional stops for your gradients here. You can see the stops represented down here. If you want to remove one, you can  , delete the gradient stop. If you want to redistribute them, you can double click on that there. So I can select those gradient stops. I can change them and you can see here I can make that color adjustment and that can also be modified directly on the canvas as well. You can see I can adjust those gradient stops there. Let's say we want to apply a radial gradient. You can see that the adjustment then changes. On the graphic itself, and you can attempt a angular gradient. Once again, you want to add an additional stop. You can change the position of it and see how that is then applied on the object itself. I think this is pretty cool. Once again, Double click on those and they will evenly distribute around the object there. The next type of fill that we have, I'm going to show you with a few more graphics. I'm going to click the rectangle tool. I'm going to hold down the option key. Alt key if you're on Windows. Drag this to the right and then press command D a few times. I'm going to select all of these objects. We're going to come over here to the fill and we are going to make them image fills. When I make them an image fill, it creates it as an image placeholder. It doesn't need to be an image placeholder, but it's something that I like to set up. We can actually set all of these as a typical color fill. and what I'm going to do is I'm going to place images directly into these shapes. All images are fills on shapes. I'm going to come down here to our quick actions tool and type in place And the place image shortcut is shift command K that will pull up the file browser, giving us the ability to pull in a number of images. So I'm gonna choose 1, 2, 3, 4, 5. I have 1, 2. Three, four, five images that is then going to load up on my cursor. So I could see my cursor right there has the number five and those images are charged up. Now, when I click on these shapes, they will. Then be populated by the images that I had there. If I click on any of these images, you'll see the image show up as a fill. If I were to click on that, I can make adjustments to the image and I Change how that image is mapped in that fill. It's currently set to fill and what that means is it will do its best to fill that shape. I can then change that to fit so it'll fit the entire image or change it to crop and changing it to crop will give me the opportunity to move the image around in that space. You can also choose tile so I can make this a much smaller Tiled image, and you can see by adjusting this percentage here, how that actually works. You're more likely to use fill or crop in that process. If you need to rotate that image, you can rotate it in that space as well. Now, if you're taking a look at Add an image and you want to quickly crop it within its given shape, hold down the option key or alt key on windows, double click on it and it will immediately set it to the crop option. You can then select that object and resize it and replace it. In that space, the one thing you want to be mindful, though, is when resizing an image that's cropped, it's going to behave differently than if it's fill. It may distort, so if you want to resize this, you can option double click on it, change it back to a fill, and then you can go back to crop and make your adjustments. Just be considerate of the type of fill you may have on your image object. Now any shape can take on an image fill. I'm going to create a few shapes here. Let's make some adjustments. Let's also take a triangle and they can all accept the same fills as these rectangles. I'm going to select this object. I'm going to copy that layer. Notice how I'm selecting just to the left of that image fill. I can hit command C select that. I can select the new object, press Command V or Control V, so Control C to copy, Command C to copy, or Control V to paste, Command V to paste. And there we go, I can, uh, Copy that fill and paste it. One other thing that you may want to consider is you can add additional layers on top of an image fill or a color fill. So we have the fill here. We have the image. We can add the plus, which creates another fill on top of it. The default is going to have this lower opacity black here, but I can change that color. I can actually increase the percentage. And then we can play with the blend mode of that layer, which will then affect the layer underneath it. So I can apply a red screen to have a more stylized image. These can be reordered. So I can always place the image above it or below it. I think that is pretty great. And I like how that works, giving me a lot of flexibility with those fills. The next thing that you want to consider is that Anytime you are creating a new object, so if I was to create another rectangle, you're going to notice that we have the default gray color, if you ever want to change the default Appearance of any new object that you create, you can select it. Let's say we change it. I create this darker gray value here. I can then go to the quick actions menu and I can type in set default. Properties. What that means is then from here on out, when I draw a new shape, it will have the properties of the object that I used to just set it. Another thing to consider is you can use the eyedropper tool to select existing colors on the canvas. When I press the I key, I can go around and I can select this red. I can hold, press the I key again. I can select this blue when selecting a color. You can change the formatting of the color. If you take a look right now, it's using the RGB color model. When I press tab, it changes the hue, saturation, lightness, and I pressed tab again, hue, saturation, brightness tab again. And you now have the hex value. This. It also works in coordination with creating color styles, color variables, which we have yet to cover, but let's say we create a color style based off of this gradient. So I take this gradient here and we're going to look for these four dots. The four dots. Allows us to create a new style. So here we're going to create a new style or variable and here we can give it a name. I'm going to call it Angular Gradients and what is it for? For now it's just for fun. These are the properties that are going to be part of this style. We can create that style. Now, when I click on the canvas, I can see that there's a local color style. This allows us to reuse that style, which I think is pretty great. Now, If we want to select it and apply it to this object, we can use the eyedropper tool. I'm going to press the I key. We can hover over here and you now see this option. If we press shift, it will then select the angular gradient style and apply it to the object. We had selected. I'll show you that one more time. I selected this object. I press the I key. We come over here. We hold the shift key and it now accepts that gradient styles can also be from images. So we can select this object. We can come over here. We can add a new style. And here is the style. We're going to call it our puppy image. What's it for? Also fun. Here are the properties. We create that style. We click on the canvas. We can see our puppy image style. We can also apply this. So if I were to click on this fill, I can just choose it right there. But let's say we're on the canvas. We're moving fast. I can select both of these objects, press the I key, come up here and we can choose either the color. Or press the I key, press the shift key, and we can choose and pick up the style from that image. That's going to be really helpful as you get more into Figma and you create color styles or color variables and you want to either reuse them or create a new one. Let's say from this image or one of these colors, what I can do is press the command and shift key when I click. So here. When I press the command and shift key, control and shift, if you're on windows, I can create a new variable color or style from the, object that I'm working from. I think that's pretty awesome. Next we're going to talk about applying effects to layers. If I go ahead and I create yet again another rectangle, what I can do is apply effects to it. Let's take this fill, let's make it blue. And what we're going to do is head down here to the effects panel, and the first effect that we have here is drop shadow. If we click on the drop down, we can see some of the other options that we have available to us. We have inner shadow, layer blur, and background blur. I'm going to start with inner shadow. I'm going to click. On this option right here, we can move the position, the XY position of that shadow, we can apply more of a blur, and we can even spread that out. Next, what we can do is add another inner shadow, and let's say in this turn, we can, apply it in the opposite direction. We could even apply a lighter value color. So as we're working here, we can apply these styles. Now, if you wanted to create a bit of dimensionality in your design, this is going to give you the opportunity to do so by generating highlights, on an object that you have here. We can also create a drop shadow. The drop shadow will be from underneath the object. We can increase the blur. We can increase the spread of the Of that and even change the color so it appears a bit more natural. Next, we also have a layer blur option. The layer blur will blur out the entire layer that you have there. So it still remains a vector shape. It just has a non destructive layer blur applied on top of it. The last thing that we're going to demonstrate here, I'm going to do so with another shape. I'm going to press the R key, we're going to draw another rectangle, and this time we're going to create a background blur effect. So if you look down here, you see the background blur. When I hover over any of these objects, you're not going to see it apply. It has to have either low opacity or a layer blend mode to then see what's behind it. I'm going to lower the opacity to about 50 percent and we're going to take that background blur, drag that value up. And you can see that you get this frosted glass effect to any object that is sitting behind it. If you want to apply this effect without any color transference to the object that sits behind it, choose a pure white fill. all Fs across the board as your hex value. Let's make it 100%. And what we're going to do is rely on the blend mode, the multiply blend mode to apply the effect. Now what we have is an invisible window pane applying the frosted glass effect. This is great for working on UI, if you want to hide an object in the background background, create a sense of depth. And it is a CSS property that is available that can be used in web design. How cool are those effects? I love working with these effects and I think that understanding the basics of them gives you a lot of opportunity for creating UI that has depth and the feeling of material. Next up, let's talk about typography. You can create type using the type tool. It's going to be down here. Whenever you have the type tool selected, any text underneath the text tool is selectable, even if it is buried down in a nested group or frame,  what we're going to talk about is a few things. I'm going to select this text. I can come over to the typography panel here. I can change the font that is being applied to this text. When we go here as well, we can use this browser that allows us to select various fonts that are available. If you use the desktop version of Figma or have the font utility downloaded, you will be able to use fonts that are installed. However, if you're just getting started, you can browse through the existing Google fonts and you can even search by Variable fonts. I like using variable fonts because when you go to modify the weight or style of the font, you can apply a variable font axes. So here I can And I can adjust these values here to get more variation in the font as I'm working on it. You can always pick from the drop down, but you can also use those variable font axes when they're available using one of the variable fonts. A couple of things that I do want to talk about quickly here is there are advanced. type settings. So when you go into the details, you can make adjustments such as, having hanging punctuation for quotes. So if I was to add a quote to this paragraph, it's currently inside of the paragraph. If I want it to sit in the margin as many designers will want to see, I can turn on hanging punctuation. And it will fit outside of that box. I think that that is a really nice detail. I'm going to click here again, other details. You can adjust, you can modify the letter case, you can access other features of a given font as you move through the details in this set. You can enable stylistic alternates, you can apply disambiguation, which in this font allows you to better see the difference between a lowercase L and a uppercase I,  , and just take a look at the various options you have available. I think that this is a bit of a deep cut, but it provides folks a lot more flexibility when working with type. The other thing that I do want to draw attention to here is when you're working with a text field. So let's say I press the T key. I draw out a text field and I paste some text. You want to think about the three different resizing modes For this text field, when I come over here to the right under layout with this text field selected, you'll notice that we have auto height, we have auto width and we have fixed size auto width puts the text at a very long line. It's basically just going infinitum in the wide direction. What we can do here is we can change it to auto height and maybe we want to bring down the width of our text field. One way to go between that is just by resizing it or by turning on auto height here. You'll also notice that if the bounding area is greater or less than you probably are working with a fixed size text box. If at any point you want to adjust that, you can just double click and it'll change it to auto height. Auto height is probably the use case that you want the most when you're working with a text box in Figma, but you always want to make sure that you understand the intent that you're trying to work with. So auto height will always increase the height of that text field to fit your text. That's pretty cool. Next up, let's talk about alignment and constraints. Let's say you have a number of objects here on your canvas and you want to tidy them up. When you select those objects you'll see this little icon here. I like to call it the alignment saltine. It looks like a little cracker. When I click on it Then it arranges the objects. We can see how they're spaced. We can see how they're adjusted. I can even move them around. So then that way they fit more into a grid shape. So this will allow you to better space and adjust the elements that you're working with. Even if. If one of those elements is red, if one of those elements is different, you want to move it around, you'll see how it rearranges everything. If you want to swap it one for one with another object, hold down the command key, control key if you're on Windows, and you can swap it one for one with another object. If I was to make that object blue, you can see how this works. Wherein I can just select both of these and swap them one to one. Or if I select the whole thing and I hold down the command key, I will swap the red one for the blue one. So let's say I move the blue one over there. Now when I'm holding the command key, I can swap The red for the blue, once again, you could just select objects that have that alignment. You'll see these little hover states and you can always rearrange them. I think that that's like a nice feature. It helps you keep your objects orderly. The next thing we're going to talk about is constraints. When you are resizing objects, and that's going to be the next section we're going to talk about. But when you place objects inside of a frame. So here I have a. A frame. I'm going to move this frame down here. I'm going to grab a few of these little objects and place them inside of this frame. So when I resize the frame, you see how some of these objects are moving along with it. What you can do is. You can determine how an object behaves when a frame resizes. And that term in Figma is called constraints. I'm going to select this frame. I'm then going to select one or two of the objects inside. Let's select this object here. We're going to set this to left and top because we want it to follow the left and the top, this object. We're going to set to the right and to the top, because we want to follow the right and the top, this object, we're going to set the right and the top. And the bottom, because we want it to follow the right in the bottom, this object, we're going to say the left and the bottom, and you'll see now that they will all follow in that way. Another thing that you can do here is you can tell an object to have scale constraints. And when they apply scale constraints, you will see how that object begins to scale. But if you want to But what I would recommend is instead of using scale, use left and right and top and bottom constraints. And what it'll do is it'll keep the left and the right and the top and the bottom of that object they're constrained. So as I'm resizing it, you can see that all of these objects are behaving as I've instructed them to do  they're inside of this frame. They're going to have those constraint options. When I move this object outside of the frame, you're not going to see those options. They will only appear when they are inside of a container that will allow them to, determine how to move With that container. So that's alignment and constraints. Next, we're going to talk about resizing versus scaling. We've already been privy to the concept of resizing in Figma. So this is a frame and there are. Is a text object and an arrow object inside. When I resize this wide and tall, you notice that those objects stay to the left and to the top. Now, when I select this arrow, I'm going to choose a right constraint. Let's choose right. And center. So we want it to be in the middle, this object as well. We're going to have it on the left and the center. Now, when I resize this, you see, I'm resizing the frame. This is very similar to when you're resizing a  window on your desktop or a web browser, we don't actually want to scale the elements inside of it, But we want to instruct them how to move with it. If you do want to scale something, what we can do instead is use the scale tool. If you look under the move tool, you'll see the scale tool. The scale tool is the K key. I'm going to press the K key and you're going to notice over on the right, the scale properties panel opens up. This allows you to type in a value to scale your object too, but you can also use the arrow on the canvas. And the shift key. So I am scaling this larger. I'm scaling it smaller. And you see that the actual dimensions and the properties of those objects are scaling up and you can see by how much you're scaling over here, as well as the anchor point of that object that you're scaling up. So right now it's scaling from the top left point and we're scaling it by a factor of two X. Then you can see the output here. It's twice as large. People often confuse resizing versus scaling and Figma. So just remember if you want to scale something, use the K key. If you're going to resize something, think about its constraints as well as the container that it may be in to better control how the object decides to resize with the parent container. Next up, we are going to talk about auto layout. So if you remember in the last two sections, we were talking about alignment of elements. With auto layout, it helps you keep your objects inside of a frame and have all of their spacing maintained. It tells the object how to behave. So here you can see, we have Vertical objects, all stacked together. We have horizontal objects and we have objects that are wrapping. So the way that this works, if I was to select these objects, you'll see the little, alignment saltine there. We have the ability to change the spacing and we have the ability to rearrange these elements. However, this is an impermanent. Option, right? It only happens in the context while you're working. If you want to create that relationship to be settled in you want to wrap them inside of an auto layout frame. We're going to use shift a, when you apply shift a, you can see auto layout has been added. And when we look over here to the right, The auto layout frame has been added and we have different options. So here I can change the direction of these objects. I can also change the spacing  as well as add in additional padding. You'll notice that there's padding around these objects. And with that padding, we can apply a white fill to better see how they work. Next up, I can select the fill. I can choose one of those objects to have a different color, and I can show you how they can be easily reordered. When I press the left key, you can see the object moves left. When I press the right key, you can see the object moves right. So it is now stacked in this position. When I select that frame, I can change the direction to be a vertical layout or a horizontal layout, Or even a wrap layout when it's been applied as a wrapped layout. When I resize that window, those objects are going to do their best to wrap inside of that. This is achieved by a combination of understanding that these objects are all aligned as well as resizing properties. Resizing properties can either be hug, fill, or fixed. So right now we can see the width. Of this is a fixed width. If it is instead sets a hug contents, however, large, any of these children boxes are, it's going to impact the width of this entire object that is further demonstrated here with a button object. This is currently set inside of an auto layout frame. As I type in more words, so I say hello world, the outside frame is hugging the contents. These objects as well, I can change their resizing behavior. Right now they're all currently set to fixed width. If I instead change them to fill container, you can see that the parent container is now set to fixed. So that means that all of those objects are doing their best to fill the width of that container. If I were to change the size of one of these, then you can see that this object has fixed sizing and each of these have a fill sizing applied to them. , The reason that we're talking about this is that using auto layout is going to give you the ability to create UI that will,  grow and be more flexible and be responsive in your layouts so the last thing that we're going to do today is we're going to put some of these concepts together and make what is known as a UI card using the primitives that we have and everything that we've learned thus far. I'm going to select these objects. I'm going to bring them down here and just go over what we have. So I have a rectangle. This rectangle is going to serve as our image placeholder. I have some text. This is donuts. We're making a product card. So I'm going to use donuts and a description. So this text is 24 point text. let's set it with a 28 line height. And this text is a 16 point text with a line height of 20. I can make that 24. We're going to select all of these objects and we're going to create them as an auto layout card. Here I'm going to grab this ratings frame. I'm going to move it up here. I'm going to begin to structure this as I might put it together. Then I'm going to select the donuts and the ratings so then that way they can be in their own row together and I'm going to press shift a and that's going to put them inside of an auto layout frame. I'm going to call this title and ratings and we can see that reflected here in the layers panel. Next I'm going to select. All of these objects and we're going to stack them into a vertical auto layout column with them all selected. I'm going to come over here to the layout tool. This is the "use auto layout." Once again, that is shift a. They are now in an auto layout frame. Let's rename this. UI card. Now the first thing that we want to do is we want to apply a white background to this auto layout frame. I'm going to come down here to the fill option and make a white card. I'm going to select the UI card and then also go up to the auto layout pane and apply 24 point padding. Let's do 24 padding there and we can begin to adjust things further. I'm going to select the right edge of this card and you can see how it is growing. and contracting. You notice that the donuts row isn't growing and filling so we can select it. Come over here we're going looking at the width resizing and we can set that to fill container. When we are hovering over this option, you can see its impact in the UI. So when I go fill container, you'll see those little dotted lines. with the arrows. Let's choose fill container. You see that it is now filling the container. I'm going to select the donuts, text field, and then set that to, to fill container. It's going to fill the entire container. We can select that parent once again and adjust their alignment. If we want to align them to the center, that is an option that we have. We're looking at our UI card and when I reduce the width and I increase the width, you can see how that is applying to the objects inside. Let's go to the button that we have here. Is also an object that we might want to set to fill container, but I'll show you a shortcut on how to do that. I'm going to select the button. I'm going to hold down the option key. That's the alt key on windows. Let's double click. And now it fits it full. If we take a look at the layer structure of our UI card, we have here this rectangle. That's going to be our image placeholder. We have the title and ratings, which has the Donut text in there as well as the ratings. So that is in its own row. Then you can see we have the body text. And if we add in additional text here, I'll say chocolate is my favorite. You can see that this then extends the height of that text box and that's going to be the value of auto layout in creating one of these cards. I can select the entire UI card and apply a corner radius here of let's say eight and let's select the image placeholder area and apply a corner radius of four, and then we can adjust the spacing between all of our elements here, and we could bring that down to 24. So the next thing we're going to do, we're going to add an image. I'm going to select that fill. We're going to click on the fill. We're going to go to image. We can upload from computer. We can grab one of the images that we have on the computer. And there I happen to have some figma donuts. Let's see the other ways that this card can expand when I increase The height of this, you see it grow and contract. And when I select the width of the entire card, you can see how that then impacts the content and the height of the card. So these are just a few things that you can do in Figma. Feel free to review this video and look for others that can expand upon some of the basics that we talked about here today. You can find additional Figma for EDU YouTube videos on our YouTube channel, thank you all. I hope this was helpful and as always, happy designing.

Transcript for:Getting Started with Figma Design Tools

Transcript for:
Getting Started with Figma Design Tools