Hi everyone, Kevin here. In this video, we’re going to learn how to use Figma. Figma is a powerful and collaborative design tool that helps you create, prototype, and collaborate on interface designs. And best of all, you can get started entirely for free. If you’re trying to build an app or a website, this is the perfect tool. When I worked at Microsoft, we used Figma all the time to design our software products. We’ll start by getting Figma, then we’ll kick off our first project, add Frames, create and edit shapes, add and format text, place images and masks, work with layers, add components and constraints, make a prototype, and preview what we design, and then finally share with others. Now, I know that might sound like a lot, but we’ll walk through all of this step by step. By the end of this video, you’ll be well on your way to designing in Figma. Let’s check this out. To get Figma, head to the following website. You could click on the card in the top right-hand corner or there’s also a link down below in the description. This is an affiliate link, meaning I make money if you decide to purchase Figma. However, it doesn’t cost you anything extra and it supports making content like this entirely for free on this channel. On the homepage, click on the button that says, get started. Once you finish creating your account, you’ll land here in the Figma first run flow. First off, Figma wants to know your name. This is important as you collaborate with others. This is the name that others will see and don’t worry with any of these settings, you can always go in and modify these later. For now, I’ll type in my name and then let’s click on continue. Next, it asks what type of work you do. Here you could specify that and then click on continue. Describe your work, I’ll put down freelancer and then continue. And who do you usually collaborate with? I’ll put down teammates, but feel free to specify whichever one applies to you. Then click on continue. On this next screen, you can now invite people to collaborate with you on your various design projects. And here too, you can always come in later and you can invite others to work on your projects. And that’s what I’ll do, so I’ll leave these all blank for now and then click on continue. Then they would like to know what brings you to Figma today. I’ll put down using it just for fun. I’ll select that and then click on continue. And have I used them before? I’ll put down no, it’s my first time. Exactly what you want to hear from your instructor. Then right down below, I’ll click on continue. And lastly, you can also choose which plan you would like to use. You have two different options, there’s starter and there’s also professional. In this video, we’re going to use starter. This is entirely free and it covers all of the essential functionality of Figma. However, if you want say unlimited projects or files or version history or additional capabilities, it may be worth considering professional. Again, I’ll select starter and then down at the very bottom, I’ll click on continue. This now brings us to the last screen of the first run flow. And here you can decide what product you would like to go into first. You have Figma and you also have Fig Jam. We’re going to be using Figma throughout this video and this is the design and prototyping tool. But there is also another product called Fig Jam. And it’s worth knowing just a little bit about this. This is an online whiteboarding tool where teams can come together, say to collaborate on a brainstorming session, a kickoff or a standup. So, you do have that available as well. I would like to start in the main file browser first. So rather than selecting one of these options here, down at the very bottom, let’s click on the text that says skip. This drops us into the main Figma file browser. And next time you sign in, this is the screen that you’ll land on. This is where you can create new files and projects and also get back to the files that you care about. Over on the left-hand side, you’ll see that we’re currently in the recent view. You can also see that up on top. And down below, you can see all of our recent files. Now we haven’t actually created any of our own files yet. These are all pre-populated to help you get started using Figma. Right up on top, you have a few different menus that you can use to filter this view. This is especially helpful as you start getting lots of different files in your recent view. Over on the right-hand side, you can also adjust the view. That way you could just choose whichever view you prefer. Over on the left-hand side, let’s now click into drafts. And this is only available to you. If you decide to share any of these files with others, they’ll be view only. So only you can edit these. This is a good place to say sketch out different ideas that maybe you’re not ready to share yet. Think of it as just being more personal content. To add a new design within drafts, you could simply hover over drafts. And over here on the right-hand side, you’ll see a plus icon. And here you can add a new design file or a new FigJam file. You could even import files from your computer. As you hover over any file within any of these views, in the top right-hand corner, you’ll notice that there’s a star icon. This allows you to add that file to your favorites. So here, let’s hover over Figma basics, click on the favorite icon, and over on the left-hand side, you’ll now see that it shows up under favorite files. To remove it, simply do the same thing. Click on the star again, and that’ll remove it from favorites. Over on the left-hand side navigation, we also have a category called Teams. And any files that you place within a team and a project is available to anyone else who’s part of that team. So, Teams is where you go to collaborate, while Drafts is where you place your personal files. Down below, let’s click into Admins Team. And to add people to your team, let’s say there are other people who you want to work with on designs, in the top right-hand corner, you could click on Invite and then enter in an email address. Right now, I’ll click on the X icon. Down in the bottom left-hand corner, if you’d like to add additional Teams, you can click on this text here that says Create New Team. Within this team, you’ll notice that there’s one project. With a free account, you can add up to one project. So that may be a reason to upgrade if you need additional projects. A project is really just a way of organizing all of your different designs. So think of it this way. Maybe we’re pulling together a website for the Kevin Cookie Company. That may be its own project. And maybe we’re also pulling together an app for the Kevin Cookie Company. And that’ll have a number of associated designs. We may decide that we should create another project for that. Right here, I see my team project. And I also see that there’s one file within this project. I can also double click on this, and that’ll drop me into the project view. Over on the left-hand side, here I can see that I’m currently in this team project, which is part of this team. Within this project, I currently have one file, but it’s also very easy to add additional files. Over on the left-hand side, with this project selected, I can click on the plus icon, and I can now add a new file. In the top right-hand corner, here too, I can also add a new file. So, there are a few different ways to get to that functionality. Once you add a file, you’re not locked to having that file in this specific project. You can press and hold on a file, and you can move it to, let’s say, a different project, or maybe you want to move it to drafts, work on it some there, or maybe you want to take a draft and then move it down to your project. You can very easily do that. Today, I want to pull together an app for the Kevin Cookie Company, and I’ll use this project to do that. Right up on top, I’ll click on this carrot dropdown, and right over here, let’s rename this project to the Kevin Cookie Company app, or the KCC app. Here, I’ll rename the project, and I now need a file that I’m going to use to design this app. So, in the top right-hand corner, I’ll click on Design File. This drops us into the Figma Editor, and right up on top, you’ll see a toolbar. Over on the left-hand side, we have a pane. Then we have the editing canvas, and this is where we’ll pull together our design, and over on the right-hand side, we have another pane, and as we walk through this, we’ll look at what all of this different functionality does. But first, let’s rename the file. Up on top, I can see my project name, and over on the right-hand side, I can see the file name. It’s currently untitled, and that’s not very helpful. So let’s click on that, and I’m going to call it KCC app. It’ll be the same as the project name. Now that we’ve renamed the file, I want to show you how you could get back to the file browser. In the top left-hand corner, let’s click on this Figma dropdown for the main menu, and right up on top, we have the option to go back to files. When I click on that, that brings us back to that file browser view, and down below, we now see the KCC app. If I jump into Recents, here too, we also see that as one of our recent files. Let’s jump back into the canvas by double-clicking on this file. I’d now like to start pulling together my design, but before I can do that, I need to insert some type of container or frame where I can place all of my different UI or user interface elements. Other applications refer to this as an artboard. Right up on the top toolbar, over on the left-hand side, we have this menu. Let’s click on this, and you’ll see that there are a few different options within this menu, and the first one is called a frame. That’s exactly what I need. With this menu exposed, over on the right-hand side, you’ll also notice that all of these different items have an associated shortcut key. These are well worth learning, and will make you so much more productive and fast within Figma. Here, I will select Frame. With Frame selected, I can now draw a frame on my canvas. There you see the crosshairs. I can press and hold with my mouse, and here we’ll draw a frame, and I’ll place it right there. As you draw the frame, down at the very bottom, you’ll also notice the dimensions of your frame. This is 288 by 434. Here, if I take one of the corner handles, I could adjust it, and you’ll notice that the dimensions change. Over on the right-hand side, within this pane, you’ll see that I’m currently in the Design view, and down below, here you’ll notice all of the different dimensions for my frame. Now, one way you could adjust is simply drag using your mouse, or if you need very specific dimensions, you can also type them in directly in here. Let’s say I want a width of, let’s say 400. I could type that in, press Enter, and that automatically adjusts my frame to be 400 pixels wide. I need this design to be for the iPhone Pro Max. I’m designing an app to work specifically with that device. Of course, I could try to adjust the dimensions to get it to match that device size, but I’m not even exactly sure what the dimensions are. So, I want to remove this frame. To remove it, over on the left-hand side, we’ll see that I’ve now added a layer called Frame 1. I could select that and then press the Delete key, and that removes that frame. Let’s now test out using that shortcut key. I’ll press F on my keyboard, and you’ll notice that launches into frame mode. Now, again, I could draw my frame on the canvas, or over on the right-hand side, here I have all these different default sizes for all these different device types. Again, I’m designing an app for the iPhone Pro Max, and here I see the very top option is for the Pro Max, and here I see the dimensions for that device. I’ll click on that, and that inserts a frame directly onto my canvas. That was a lot easier. Now that I’ve inserted my frame, I would like to include some additional frames for other screens within my app. Now, of course, I could press F on my keyboard, and I can now insert another frame, or alternatively, I can also select this frame on my layers list, and I’ll press Ctrl C, and then Ctrl V, and that pastes a copy. Alternatively, here, I’ll select this frame, and I can press Ctrl D, and that makes a duplicate of this frame. Now, you can even create a frame within a frame, let’s say for a menu or maybe navigation. Now that we’ve inserted all these different frames, you may be wondering, how do you move around the canvas? Up on the top toolbar, you can use the hand tool, or you could also use the shortcut key H. When I click on that, I can now pan around the canvas. Although there are also many other ways to pan around, here, I’ll switch to a different tool, and you can also press the middle mouse button on your mouse, that allows you to move around. You can press the space bar key together with your left mouse button, and that also allows you to pan around, or you could also use two fingers on your track pad, many different options. To zoom in and out, you can press the Ctrl key on your keyboard, and then move your mouse wheel out to zoom out, or in to scroll in. You can also pinch on your track pad, or in the top right-hand corner, you can also adjust the zoom here, then you could select from many of these different options, and you also have associated shortcut keys. One of my favorites, you can zoom all of the content to fit by pressing Shift together with one. I’ll click out of the menu, and let’s press Shift together with one, and that now fits all of the frames on the screen. Over on the left-hand side, you’ll now see that I have three different frames as part of my design, but the name iPhone 14 and 15 Pro Max 1, 2, and 3 isn’t really that descriptive, and especially once I start building these out, I want a name that better reflects what’s within this frame. Now, I want this first frame here to be my home screen. To rename this layer, I’ll simply double-click on this, and that highlights the text, and here I’ll type in home screen. For the second screen, I would like this to show all the different locations of the Kevin Cookie Company, and I’ll type in locations, and for the third screen, I want this to be a shopping cart, so I’ll type in cart. Now, it’s really easy to rename these different screens to make it clear what type of content is contained within. All of these different frames currently live on page number one, but you can also add additional pages. I’ll click on this dropdown, and we are also planning a tablet app, and I think it makes sense to keep all those frames separate. Over here, I’ll click on page number one, and here I’ll rename this to phone. Right up on top, I’ll click on the plus icon, and let me add another page for tablet, and here I can click out of that. Right up on top, when I click on phone, here I can see all of the associated frames, and down below, if I click on tablet, I don’t yet have any frames. Right up on top, let’s shift into phone, and here, I’ll minimize this view. You can also move your different frames between all the different pages. For example, if I want to move cart, I can right-click on that, and here’s the option to move the page, and I can move it over to tablet. Now, I don’t need to move it, so here, I’ll click out of that, but it’s nice to know that you can move content around all of your different pages. Basically, gives you more options for organizing all of your different frames, and also content. I’m now all ready to start building out the home screen of my app. Over on the left-hand side, I’ll click on the home screen, and that frame is currently selected. A neat little shortcut key, you can press shift two, and that’ll focus on the selection. Remember, shift one focuses on, or fits, all the different frames on the screen, and then shift two will focus on the selection. That’s a good little shortcut key to have in your toolbox. I want to start by adding a background to the home screen. Over on the left-hand side, in layers, I currently have the home screen selected, and all the way over on the right-hand side, I have the design pane open. This allows me to modify the different design properties. Earlier, we went through and we modified the dimensions. If we look down a little bit more, I have the option for fill, and this will allow me to define what the background should be for this frame. When I click on this option here, I can choose a color background. Here, it’s just a solid color background, and over here, I have different colors to choose from. I can even set the opacity. Right over here, I could also type in a hex code, and I have other options as well. Up on top here, I could also set a gradient background. I could select an image as the background, or you could even set a video background. I want to select an image background. So here, I’ll click on image, and right down below, let’s choose an image. I think this image right here will work well. It’s a picture of our factory at the Kevin Cookie Company. I’ll double click on that, and that’s now selected this image. This is now inserted the image onto the home screen, but it’s not the exact portion of the image that I want to use. Currently, it’s set to fill, but I do also have other options. I could set it to fit. There, it fits it in, but I have a lot of blank space on the top and on the bottom. I’ll click on this. I could also set it to crop, and here, we could set it to tile. So a few different options. Let’s go back to fill, but now let’s shift it to crop. And I’ll use the control button on my keyboard and scroll my mouse wheel back, and here, I see the full image and the area of the image that it’s using. Now, I want the boat to be centered right in the middle, so here, I’ll move it over. I could even adjust the size of the image. Here, if I click in the corner, I can make the image larger, or here, I’ll make it taller or wider. But you’ll notice that the proportions or the aspect ratio is a little bit off when I drag the corner. If you press the shift key, that will maintain the proportions. So that way, it doesn’t get distorted. I’ll make it a little larger, and then let’s position it right here so the boat’s in the center. I think this looks good. I’ll come over here and stick with crop. Down below, I could also adjust things like the exposure, the contrast, saturation, all these different tools. But I think this looks good for now. So up on top, I’ll click on the X. Now that I’ve added a background, also, over on the right-hand side in the design pane, you can add a stroke, or basically an outline or a border. To add that, I simply click on the plus icon, and that’s now added a very slight one-pixel border. Over here, I could adjust the properties of that stroke. For example, if I want to make it a little bit thicker, I’ll click here with my mouse and then drag over, and that’ll increase the size. It’s a fairly thick border. I don’t know if that looks so good. Over here, we could also adjust things like where it shows up. Is it just the top? Is it just the bottom? So again, you could go through and modify all of these different properties, whether it’s inside, outside, or in the center. If it turns out that you no longer want this effect, over here, I could click on the minus sign, and that removes the stroke. Over here, you could also add various effects. For example, an inner shadow, a drop shadow, a blur. But I don’t need that, so here, I’ll click on the minus, and that removes that effect. Overall, I really like this image, but it’s a little bit bright, and it’ll be hard to read text and also to see the logo sitting on top of this background. So, I think ideally I could blur it out or maybe add a little bit of darkened color on top of it. To do that, I’m going to use a rectangle. Up on the top toolbar, over on the left-hand side, here, we have different shapes, and when I click on this dropdown, here, I can insert a rectangle. You have a line, arrow, ellipse, polygon, and other shapes as well. I want to insert a rectangle. You can also use the shortcut key R. Here, I’ll click on rectangle, and my icon now changes to the rectangle tool. Over here, I can now draw a rectangle, and as I’m drawing it, there too, we also see the dimensions of this rectangle, and I’ll place it right here. Now, you’ll notice this rectangle is not currently in a frame. You can draw shapes and place objects outside of the frame. Basically, what that means is anything that sits outside of the frame will sit as its own layer. However, I can take this rectangle, and here, I can drag it onto the home screen. Now, one neat thing is as I drag it over this frame, you’ll notice these different guidelines that appear to help me place this shape. Here, it’s perfectly centered. However, I can move it down, keep it in the center, or here, I can move it up in the center. So, it really helps with placing objects. When I release it, you’ll notice that the frame adopted this rectangle. Over on the left-hand side, under layers, now we see the home screen, and the rectangle now lives within the home screen. Here, if I pull the rectangle out, there, it falls out of this frame, and it’s now its own layer again. And over here, I’ll drag it back in. I now want to adjust some of the properties of this rectangle. I’ll go up to the corner, and let me adjust the dimensions, so it fills up the entire frame. And right there, it now fills the entire frame. With this rectangle selected, over on the right-hand side, I have all of the different design properties, just like we saw with frames. If I look down a little bit, here’s the fill. I’ll click on this, and let me give it just a completely black fill. And for the opacity, I’ll set it to, let’s say, 30%. So, that way, it just darkens the image just a little bit. I think that looks really good. I’ll close out of this. I want to add an effect to this rectangle. Down below, I’ll click on this plus icon next to effects. And within this dropdown, let’s go with a background blur. That’ll blur whatever’s underneath this rectangle. So there, it blurs out the background. Over here, I can now click on the background blur. And if I click on this icon, that opens up the effect settings. So, if I want to adjust the intensity of the blur. But I actually think four works fairly well, so I’ll stick with that value and then close out of this. That’s looking really nice for the home screen background. Next, I want to add the logo for the Kevin Cookie Company to the home screen of the app. To add a logo, up on the top toolbar, over on the left-hand side, where we selected the rectangle, let’s click on the shape tools menu. And down at the bottom, we have the option to place an image slash video. Let’s click on that. And here I have all of my different assets for the Kevin Cookie Company. And there’s the logo. I’ll click on that and I now have my logo file selected. I can now choose where I want to place this image file. I’ll place it on the sign to start. And that now places my logo. But to be fair, it’s fairly large. So, let me make sure that just the logo is selected and here I’ll drag it over and let’s adjust the size. Now again, when I adjust it, I want it to adjust, but also to keep the proportions. To do that, let’s press the shift key. And here I can adjust the size while also maintaining the proportions. I think that size will work well. And over here, I’ll drag it up so it sits right here in the app, right near the top. I think that’s pretty good. If we look over on the left-hand side, the layer or the logo is currently sitting on its own, but I want it to be part of the home screen frame. So over here, I’ll select this image file and let me drag it down so it sits under the home screen. And you’ll see that the logo is currently the topmost layer. So, what if we were to put the rectangle above the logo? Well, let’s test it out. Here I can take the rectangle and I’ll move that to be the topmost layer. And now you see that black 30% opacity sitting on top of the logo and you also see the blur affecting the logo. That’s because this layer is above the logo layer, but I don’t want a blur and a darkened effect on the logo. So over here, I’ll take this and move it to the topmost layer and there it now sits on top. I think this looks great. As you start designing, you may need to know, well, how much space is between this logo file and the edge of the phone? This is especially important if say you’re working with the dev team and they need to know these specific distances. You can press the Alt key under keyboard and then hover over the gap between different elements and that’ll tell you the specific number of pixels. This produces what’s called red lines. Right up on top, I can see that there are 53 pixels between the top of the phone and the beginning of the logo file. And here I can hover around. Along with getting the red lines to appear, you can also have a grid appear. Here I’ll select the frame. And then over on the right-hand side, you have an option for layout grid. I’ll click on the plus icon and this inserts a grid with 10 pixels. Here we see it overlaid on top of the frame. Over on the right-hand side, you can also configure the different settings related to this grid. If I click on this, here I can adjust the size of the grid. So, let’s go with, let’s say 20 to see how that looks. There I have a 20-pixel grid. You could also adjust the color and also the opacity of the grid. I’ll close out of this and I don’t think I need a grid for now. So over here, I’ll click on the minus icon and that removes the grid. Next, I would like to include some text on the home screen of the app that includes our tagline. Before we do that though, I’ll press the shift two key just to zoom in on the home screen. Up above on the toolbar, we have the text tool. You can also press the key T on your keyboard. I’ll select this. I can now choose where I want to place my text. I’ll click right here on my frame and then I’ll type in our tagline, deliciousness in every bite. I now want to modify the way this text looks. I’ll press control A to select all of my text. Then with this object selected, over on the right hand side, I have all of the different design properties for the text. If I scroll down just a little bit, here I can adjust the size of the text. Currently it’s set to 12 and I think it’s a little bit small. Let’s try maybe 27. I think that’ll work better. Right down here, I can also set the fill. When I click on this, I can choose all these different colors. I can set a gradient. Here you could also set the opacity, but I think white will work well. So, I’ll close out of this. Right down here, I also want to add an effect. I think maybe a drop shadow would look good. I’ll click on that and here’s drop shadow. And when I click that, that helps the text stand out just a little bit more. Still, with the text selected, here I’ll scroll up and I can also align it on my frame. So, I could left align and that’ll left align with the leftmost portion of the frame. Here I could center a line, right align and I have different options. But let’s go with center align. And I think I want to, why don’t we pull this up just a little bit. Here, I’ll pull it up right there so it sits under the logo and I think that looks good for the tagline. Now that I’ve included the tagline, I would like to include navigation at the bottom of my app. And to do that, we’re going to insert a frame. If you remember from earlier, the shortcut key for inserting a frame is F and there that changes my cursor to the frame tool. You’ll also see that it’s selected up above on the toolbar. With this selected, let’s now drag a frame on the bottom. And I want it to be about, let’s say 50 pixels tall. And here I’ll drag it to the edge and over here, I’ll make sure it’s on the other edge. Now I want to move this navigation bar all the way to the bottom. So here I’ll click in here and I can now move it down to the bottom of my app. I think that’s a good position. Over on the left-hand side, you can now see that I’ve added a new frame within the home screen. I’ll click on frame one and let’s rename this to navigation just so it’s clear what this is. I’ll select the navigation frame and then let’s press shift two and that’ll zoom in on this new frame that we’ve included. Over on the right-hand side with the navigation frame selected, I want to set a color for this navigation frame. Over here, I’ll click on fill, click on the plus icon. And for now, let’s set it to black. I could always come in and I can change this later. Next, I want to insert three squares within this frame. This will help me lay out where the buttons for the navigation will go. I’ll press the R key on my keyboard and that sets it to a rectangle. And over here, first, let me press the shift key to make sure I get a perfect square and let me make it about 45 pixels tall and also wide. And over here, let’s center it right in the middle of this frame. There I get that guideline that tells me this is the center. I’ll press control D on my keyboard to create a duplicate and there’s another square. And let me place it, let’s say write it about there for now. And I’ll press control D again. And here I’ll drag this over. Let’s move over, pan over. And I’ll place this here. Now, I’m not sure if the spacing is quite right. So, I’ll select this square, then press the shift key to select another object and the shift key again to select this one. Now up on top, I can click on this icon and I can distribute the horizontal spacing. And when I click on that, that distributes them. Now let me select all of these and make sure that all of them are centered. That’s right in the center and they’re all distributed evenly. I think this is looking good. Now that I’ve inserted all of my different rectangles, we have containers for the different icons. And this is by no means a comprehensive or in-depth look at how you make icons. You can go super deep on this topic, but I just want to show some of the fundamental functionality that you have available within Figma. I want to start by adding the location icon to my navigation. And I think a good place to place that would be right here on the center rectangle. Here, I’ll make sure to select this rectangle by double clicking on it. Then I’ll press shift two to zoom in on this rectangle. Now I have plenty of space to build out this icon. To represent the location, I want to design a location pin. To build that out, let’s go up to the top toolbar and here let’s click on all of the different shapes. And right here, we have the option for an ellipse. I can also press O on my keyboard. I’ll select that that, and then I’ll press the shift key so that way I get a perfect circle. And let me make it maybe smaller like this. Let’s make it about that size. And over here, I’m going to place it right in the center. I think that’s a good position. To edit this shape, simply double click on it, and here it shows all the different points that I can edit related to this shape. Now I want it to be a pin. So, I’m going to take this point at the bottom and here I can drag it down. So, there I can start adjusting the ellipse. Now I want it to go straight down. So, I’ll press the shift key. And that way it’ll lock it in the center position. And let me bring it right down towards the bottom. Now it’s not much of a pin with these curved edges at the bottom. With these handles that stick out, I can adjust the curve. Here if I take one of these handles, here I can make the curve larger. Or here I can make it smaller. Now I want it to be just a hard edge down at the bottom. So here I’ll pull it in right towards the center and there I get that nice straight edge. Over here, I’ll select this side as well. And here I can pull it in and there too, I get that nice hard edge. I’m currently in edit mode. That’s where you can see all these points around the shape. And up on top on the toolbar, it changes to show edit mode. Once I’m all done in edit mode, I could click on the done button or I could press escape on my keyboard and that now exits edit mode. The shape of the push pin or the location pin looks good, but I do want to set a color and I think white will work well. So, with this ellipse selected, over on the right hand side, I’ll click on the fill and let me set this to white. All right, it’s coming together. I now need to punch a hole into this location pin and we’re going to use another ellipse to do that. Up on the top toolbar, let’s click on these shapes again and let’s go down to ellipse. And over here, I’ll press the shift key to get a perfect circle and let me draw it so maybe nine by nine. I think that might work well. And let me position it here in the center. I can press the alt key to check that the spacing on this side is the same as the spacing on this side. Then it looks like they’re both six, so that’s perfect. So, I want to punch this out from this shape underneath. So, I’ll press the shift key on this shape as well. So right now, I have both of these ellipses selected. Right up on top, I have different controls. I can combine the two different selections. I could subtract a selection, intersect, exclude, and even flatten. Now I want to subtract my first circle from the bottom ellipse. So here I’ll click on subtract and that’s now placed a hole into my location pin. Now, if I move it around, you’ll notice that there is a hole in this shape. Overall, I think this icon looks really nice, but I think I would actually prefer just to have a stroke or a border around this location pin and no fill. With this pin selected, over on the right-hand side with all the properties here, I could remove the fill and then I could add a stroke. But that’ll take a few steps to do. Instead, I can swap the fill and the stroke simply by pressing shift X on my keyboard. I’ll make sure that the location pin is selected and let’s try this, shift X, and that swaps the two. I think that looks really nice. Now I want to take my location pin and I want to group it together with this rectangle. That way, if I move this object, it’ll move both the rectangle and the location pin. I’ll make sure to select both the pin and the rectangle and then I can right-click. And right here, there’s the option to group the selection. I also have the shortcut key, control G. I’ll click on that and that’s now made a group. I can now click on that and I can rename that. Here, I’ll call that location. I can still expand the group to see all the items that sit within that group. Now, I don’t think I need this rectangle anymore. I only needed the rectangle to help me form my icon. So over here, I’ll click on the rectangle and with this item selected, over on the right-hand side, I have this eye icon. When I click on that, that hides the rectangle and now I’m just left with my icon. I’ll press control and scroll out with my mouse wheel and there, I now have the first icon on my navigation bar. And to be fair, I think that looks pretty good. Next, I want to add a home icon to the navigation bar and we’re going to use a different set of tools to make this. I’ll press my middle mouse button to pan over to the leftmost rectangle. There it is. I’ll select the rectangle. Here, let’s click into this one. It’s rectangle number four. And then I’ll press shift two on my keyboard so the rectangle fills the screen. And now we have plenty of space to design this next icon. To build the home icon, we’re going to use something called the pen tool. Up on the top toolbar, right over here, let’s click on this menu and here we have the pen tool. You can also use the shortcut key P. I’ll select that and we’re going to build a house to represent home. I’ll place the pen tool right in the center of the rectangle and then I’ll click my mouse. And that puts down the first point of the pen tool. Now I can draw this line anywhere. Now I want this to be the roof of a house. I’ll press the shift key and that way I get a nice 45-degree line for the roof. And let’s come right down to about this point. I’ll place it there and that now fills in the stroke or the line. Now I could continue building my house from here or I could press the escape key and let me go back up to the top so I could build the other side of the roof. I want it to be nice and symmetrical. I’ll click right here on this point and here I’ll press the shift key again and I’ll go down to the same line. There I get that nice red guideline that lets me know that it’s now at the same point and there I’ll place it. If I make a mistake placing my point, I could press the delete key and I could simply do that again. So that’s one way you could get rid of a point that you don’t want. And here I’ll place the other edge of the roof there. Now I’ll go over, let’s say maybe five rectangles for the under portion of the roof. I’ll go right to about there and let’s bring the house down to about that point. I’ll press escape again. Let’s go over here and let’s count over five. One, two, three, four, five. And here I’ll go down to the bottom and over here I’ll connect the points. So now I have all the points of this vector icon making up my house. If you want to move some of the points that you’ve already drawn, up on top, you can click into this menu and select the move tool. Now I can select a point and here we can now move it to a new position. But actually, the position I had was fine. I’ll press control Z to undo and there I have my house again. Overall, this house looks good, but it’s just a little bit small. The rectangle is a lot larger than the house. Let’s go up on top and click on done. And within the move menu, let’s select the scale tool. You could also press the shortcut key K. And over here, I can now scale the object by clicking on these handles and adjusting the size. But there it’s not centering it. So let me click on control Z to undo. You can press the alt key on your keyboard and then you can also scale it and that will scale the icon from the center. So that way I keep it nice and centered. That’s a good position. Right up on top, let’s go back to the move tool. And I want to move the house down a little bit within this rectangle. Now I could pull it down with my mouse or you could also use your keyboard to nudge an object. With this object or this vector selected, I’ll press the down key on my keyboard and now I can move the position. I like that spot right there. Looking at this house, I think the edges are a little bit sharp. I don’t think they should be that sharp. I mean this is for a cookie company app. I’ll double click on it and that brings me back into edit mode. Over on the right-hand side, I have these various properties for the vector icon that I just pulled together. And right here, I can adjust the corner radius. So here I can adjust that and make it a lot more round. Now, I don’t know if you could tell that’s a house, but let me adjust that maybe one or even here, I could type in, let’s say 0.5 and that gives me these nice round edges. That looks a lot better. Also, on the fill over on the right hand side, I can make it a little bit thicker. So, let’s make it right at about there. I think that thickness looks good. And let me also adjust the color to white. This is looking great. Let’s now group this similar to what we did with our location icon. Here I have vector one selected or the house and I also like the underlying rectangle. So, these two are now selected and I’ll press control G on my keyboard to group those two objects. Here I could expand the group. Now right over here, let’s rename this to home just so it’s clear what this is. And with rectangle four, I no longer need that background rectangle. Over here, I’ll click on the eye icon and that now hides that rectangle. Let’s now press shift one on the keyboard and we can see the overall app. Now this is looking good, but you’ll notice that the stroke on the house is a lot thicker than on the location icon. Let’s make a quick adjustment. Over here, I’ll click on location and let’s open this up. Here I have all the different shapes that make it up. Over on the right-hand side, let’s adjust the stroke. Here, I’ll make that a little bit thicker. So maybe we’ll go with two and maybe I adjust the house so it’s a little bit lower. Here I’ll select the vector and let’s adjust that down. Maybe we go with, let’s say two as well. So now we have our two icons. For the third icon, I want this to go to our shopping cart, but instead of having us design this icon, let’s see what we could find in the community. One of the great things about Figma is they have a very active community where other members pull together assets that you can leverage in your projects. To get to the Figma community in the top left-hand corner, let’s click on the Figma menu and right here, let’s go back to files. Down in the bottom left-hand corner of the file browser, let’s click on the button that says explore community. This opens up the Figma community. And again, here you’ll find a wide variety of different free and paid templates, plugins, and also UI kits that you can leverage in your different projects. And here you’ll see a few examples. Now I have a specific template in mind that I would like to use and it’s called Iconamoon. Let’s click on this one and over on the left-hand side, let’s now open this in Figma. This now opens up the Iconamoon template. And here we see all the different icons that we can leverage. In the top left-hand corner, we see all these different pages that are part of this file. For example, if you want thin icons, you can click on that or lights or here’s bold. I want regular, so I’ll select this page and right in the center, I see all the different e-commerce icons. I’ll press control on my keyboard and scroll my mouse wheel in. And right over here, I see an icon with a shopping cart. This will fit perfectly in my app. Here, I’ll double click on this. And over on the left-hand side, here I can see the icon frame. Let me expand that. And right here, it looks like it’s made up of a vector and then also two rectangles for the wheels. Here, I’ll select the two rectangles by pressing shift and also the vector. I’ll select those three items and press control C on my keyboard. I’ve now copied those different items. Up on top, let’s click back into the Figma menu and go back to files. Let’s now go back to the file that we’ve been working on. Down on the left-hand side, I’ll click into the KCC app and here’s the KCC app. Let’s double click on that. I’ll now select the rectangle down below where I would like to place the shopping cart icon. And then I’ll press shift two to zoom in on this rectangle. Next, I’ll press control V and that pastes in the shopping cart icon. Now, this is currently black and all my other icons are white. So, with all of these different vectors and rectangles selected, over on the right-hand side, let’s go to stroke. And over here, I’ll set it to white and then I can close this out. Also, I wanted to fill the rectangle. So just like we did before, let’s go up to this menu and then click on scale. Next, we could press the alt key while dragging these handles to scale from the center. Here, I’ll press alt and then drag it up. And here, I’ll fill the rectangle, let’s say right to about there. Right over in this menu, let’s go back to move and here I could reposition it within this rectangle. I think that’s a really good spot. I now want to move all of these different items over on the left-hand side into the navigation frame. Currently, they’re sitting outside of that frame. So here, I’ll drag all of them down and let me position them within navigation. And I also want to group them with this rectangle. So, I’ll select all of these different objects and then let’s press control G and that’ll group these different items. Now, I can double click on that and here I can give this group a name. I’ll call it cart and hit enter. And now I have that group. I can now expand this group selection. Let me select the rectangle and here I can hide that underlying rectangle. Now again, the nice thing about grouping is all of these different objects are now tied together. So here, if I move the overall group, that’ll move the wheels along with the upper portion of the shopping cart. Right now, let’s press shift one and that’ll zoom out. And let me actually focus just on this first frame. So here, I see all of my different icons. Now, this one’s a little bit thicker. So let me select the cart and let’s adjust the stroke just a little bit. Let’s set it to two so it matches the other icons. I think this is looking really solid now. Now that I finished adding my navigation bar to the home screen, I would also like to include the navigation on some of my other screens. So over here, I’ll click on navigation and let’s press control D to make a duplicate of this navigation. Now I could pull it over and I’ll place it within the locations screen. However, there’s a problem with doing it that way. I want to update the color on the original navigation bar. Here, I’ll select navigation and over on the right-hand side for the fill, I’ll click on the color icon and I’m going to click on this dropper and I want to use maybe a dark brown color from the logo just so that color carries over in other places throughout the app, maybe right at about there. And over here, I could also adjust the opacity so it’s slightly see-through. Let me actually go with a slightly lighter shade. Let’s go right at about there and then also adjust the opacity. Now, one thing you’ll notice is that new color and the opacity does not carry through to my other navigation bars throughout the app. And ideally, I want to be able to make a change here and have that carry through everywhere else. For now, let’s select this navigation in the locations frame and then press the delete key to remove it. Over on the left-hand side, let’s make sure that the navigation frame is selected. I can see that it’s my current selection. And we’re going to turn this into a component. That way, any change that I make to the original component will carry through or flow through to all of the other instances of that component. Up on the top toolbar, we have an icon here that says create component. You also have a shortcut key. I’ll click on this and this is now turned navigation into a component. You’ll notice that the color has changed to purple indicating that this is now a component. Up on top, let’s now click into the assets tab. And here I can see all of the assets associated with my project. And you’ll notice now that I have a section titled local components. And there’s the navigation bar that we created. Over here, I can now select this navigation bar and I can drag and drop it into my locations frame. I’ll put it right here and let’s drag it to the very bottom. Now, one of the neat things is, here I’ll select the original navigation bar on the home screen. And I don’t know if I’m really digging this brown color. I think it might be nice with, let’s say a light green from the logo. So over here with this item selected, let’s go back to layers and let’s select navigation. Then over on the right-hand side, let’s scroll down and here for the fill, let’s click on that and let’s go with this dropper tool. And over here, let’s select this green color. Let’s say right at about there. And over here, I could also set the opacity. So, let’s bring it down to maybe about 80%. Here, I can now close it out and look at that. The new color from the home screen navigation carries over to the locations navigation. That’s one of the big benefits of using components. Any changes you make to the original component will also carry through throughout your entire design. Now, one of the neat things, if I decide to make any, say changes to the components on the location screen, that will not flow back to the home screen. It’ll only affect this individual instance. We’ve been putting so much work into this app so far that I think it would be nice to use this same design on multiple device types with different screen sizes. So, let’s test it out to see if maybe it’ll work on a different device screen size. Over here, I’ll click on the location frame. Here, it’s currently selected. And right down here, I’ll click on these handles to adjust the size. But you’ll notice that the navigation bar is just locked in this position. It’s locked over on the left-hand side and also the top of its position. So, as I pull it down, it does not adjust. So, let’s delete the navigation on the location screen for now. And instead, let’s focus on the navigation on the home screen. To make our design responsive, so it scales on different device screen sizes, we need to use something called constraints. And constraints tell Figma how layers should respond when you resize the frame. This helps you control how your designs look across different screen sizes and also devices. Over on the left-hand side, let’s click on the navigation. And right here, we see that it’s selected. Over on the right-hand side, we have all the different properties. And right here, there’s a section for constraints. This tells Figma how to adjust as you scale the size. Now currently, it’s set to lock it to the left and also lock it to the top position that it’s currently in. And again, we saw the problem of that. Here if I expand the frame, it’s stuck to the left and also stuck to the top. So, we need to modify this behavior. I’ll click back into navigation. So, with the constraints, let’s see what the different options are. Currently, it’s locked to the left. I could also lock it to the right. Or here, we could have the bar locked to both the left and to the right. We could place it in the center while maintaining its size, or we could simply have it scale with the design. So, if it gets smaller, this navigation bar gets smaller. If the design gets larger or the screen size gets larger, the bar will also get larger. I’m not sure if I like that either. But let’s try locking it to the left side and over to the right-hand side. So, let’s test this out. Here, when I click on the home screen, and now if we expand the size, you’ll see that the bar is locked to the left side and to the right side. So, we’re making progress, but it doesn’t stick to the bottom. So, let’s select navigation again. And then over on the right-hand side, we have our constraints. And right underneath, we also have the option right here for top. So, when I click on that, this is defining what should happen in the vertical space. Now currently, it’s locking to its topmost position, but here I could lock it to the bottom, the top and the bottom, the center or scale. Let’s put it so it locks to the bottom. I’ll click on that. And here we have a visual representing what’s happening. Right over here, I’ll click on the home screen. And now when I expand, look at that. The bar is locked to both the left side, the right side, and the bottom of the screen. And so now it’s scaling. You’ll notice that the icons aren’t quite right yet, so we’ll have to make some adjustments to the constraints for the icons. Let’s now adjust the constraints for the different icons. And let’s start with the leftmost icon or the home icon. Over here, I’ll click on home. And on the right-hand side in the design pane, here we see the current constraints. I want it to lock to the left-hand side of the screen. And currently it’s set to left, but right now it’s set to top. I want it to go and lock to the bottom along with the bar. So here I’ll click on this menu and let’s select bottom. So here it’ll lock to this side and also the bottom. Next, let’s click on the location pin. And I want this to always stay in the center. So over here in this menu, instead of locking it to the left, let’s click on this and let’s lock it to the center position. And here too, let’s also lock it to the bottom. And lastly, let’s click on the cart. And here I want this to lock to the right-hand side so it maintains this distance to the right and it also stays locked to the bottom. So, I’ll click on this and let’s lock it over here to the right and also to the bottom. Now let’s test out what happens when we adjust the frame size. Here I’ll click on the home screen frame. And now when I adjust the size, look at that, the icons maintain their position. The house is locked to the left and there we see it locked to the left and they’re all locked to the bottom. This is exactly the behavior that I want. And this design is now being responsive where we could use it on different device types and the navigation bar would continue to work and also look good. I’m now going to select the navigation bar on the bottom. I’ll press control D to duplicate it. Over here, I’ll now drag it over to the location screen. And over here, I can also place the navigation on the cart and here that’s inserting the component onto these different screens. Now when I take the locations and I adjust the size, you’ll notice that all of those constraints carry through. Here I’ll select the cart. When I adjust the size of the frame, there too, all of those constraints hold. I’ll press shift one to focus on all of our different screens. Next, I want to start building out the locations screen of the app. To do that, first I want to insert some text that lets people know where they are within the app. Here I’ll click on text and let me click up on top and here I’ll type in, let’s say, locations. Over here, I can now move the text. Let’s place it right there. And I want to make some modifications to this text. Over on the right-hand side, here I have all of my different properties. Let’s go with, let’s say, size 36. And for the fill, here I’ll click the dropper and let me select this red from the logo of the Kevin Cookie Company. Let me go a little bit brighter. Let’s go with this one right there. I think that looks great. Now I’ll click out of the color and here I will adjust the locations so it lines up right there. Now I also want to build out a card that’ll represent some of the location information. Let’s insert some more text and over here, we’ll call this the, say, the Seattle flagship. Now I don’t want this text to be as large. So here, let’s move this over, but let’s adjust the font size. With all of this text selected, I’ll go down and let’s adjust this to maybe font size, let’s say 15. Now I want it to be a heavier font. So, let’s click over here and let’s go with maybe semi bold. I think that looks good. And I’ll leave that there for now. And next, I also want to insert some additional text where I list out the address for this location. Now that I’ve typed in this text, I don’t want it to have the same font weight as the title of this location. So over here, I’ll select all of this text and let’s select maybe a regular weight. I think that’ll work well. I’ll position that here and let me pull this over so it sits to the left of locations. Now, of course, these aren’t lined up right now. So let me select all of these different objects and up on top of the properties, let’s align left. This will align all of the different items to the leftmost item. Now I want the address to be a little bit closer to the title of the store. I’ll select that text and then using the arrow keys on my keyboard, here I can nudge it up. So, there we can see the spacing. I think that’s a good amount of spacing. Next, I also want to insert an image of the store location, but I don’t want to insert the image just yet. Right up on top, I’ll go to insert shapes and here I can insert a rectangle. I’ll select rectangle and let’s draw it so the store location image will be right here in that space. And again, I’ll select all these different objects and let’s align them to the left. That way they all line up over here. And I think this looks pretty good for a card. Now I would like to reuse this location card, especially if we have multiple locations that we’re featuring for the Kevin Cookie Company. And just like we did with the navigation bar on the bottom, we can turn this card into a component so we can reuse it in different places. To do that, here I’ll select all the different items that make up this location. And up on top, let’s click on this to create a component. And over on the left-hand side, we can now give this component a name and I’ll call this location card. I now want to add more of these location cards to the location screen. So right up on top, let’s click on assets and this will show us all of the different components within this file. And here we have locations. I’ll click on this card and let me pull this over and let’s place it right to about there. Now I can also pull in another copy of it and let’s place it right at about there and we’ll modify the spacing later. And over here, I could pull in the card one more time just to represent what the screen would look like when we have all of these different components. Let’s go back into layers. Now one thing you’ll notice is this card is overlaying the bottom navigation. I want the navigation on top. So, I’ll take the navigation. Currently it’s the bottom most layer within this frame. So here I’ll take the navigation and let’s move it up to the top and now it sits on top of this card. I can now select all of the cards that I just inserted by pressing the shift key on my keyboard and then left clicking on each one of these cards. And you’ll notice I have these different icons on here. If I click on this flat line in between the cards, I can adjust the spacing between these different cards. Here I can expand the spacing or here I can contract it. So let me place it right at about there. I think this is a good amount of spacing to have between those cards, but it’s really easy to modify it if maybe you want to tweak it and see what it looks like if maybe things are just a little bit closer. Looking at this design, I think there’s actually a little bit too much space between the address and then the image area. I like to pull this in. Now the great news is because I made this a component, I can make modifications to just the original component and that’ll flow through to all of the different instances. Here I’ll select the rectangle where I’m going to insert the image and I could use my keyboard now to nudge it up. And as I nudge it up, look at that, it nudges it up for all of the different instances of that component. So again, if you’re reusing different elements of your design in many different places, it’s well worth using components. It’ll make your life so much easier. Now that I’ve inserted all these different placeholder rectangles for a photo of the location, let’s go through and now add photos to each one of these rectangles. And it actually turns out it’s really easy to do. Up on the top toolbar, let’s click on this dropdown and here we have the option to place images and videos. I’ll click on this and this opens up all of my different Kevin Cookie Company assets. And here I’ll use all of these images that I’ve selected. Then I’ll click on open. And right now, you’ll see my cursor with a four icon next to it. I can now place these images. And here I could preview the first image that I’ll place. This is one of our locations or the storefronts. I could click in this rectangle and that fills that image into all the rectangles. I’ll click on the second one, the third one, and the fourth one. So, it’s super easy to then swap in an actual image into your design if say you have placeholder images. Looking at this card, I think it would actually be nice to just show a circle of the image so it matches what a cookie looks like. I mean, we got to stick to the cookie theme. And I think a really nice way to do that is to use a mask in Figma. To insert a mask right up on top, let’s go to the ellipse tool. Over here, I’ll click on shapes and here’s the option for an ellipse. And over here, let’s draw an ellipse on top of this image. And I’ll place it right at about there. So, I want to show this portion of the image. Right up on top, we have the option to turn this ellipse into a mask. Again, this tells Figma what parts of an image to show or to hide. So, I’ll use this as a mask. But currently that hasn’t actually done anything. If we look over on the left-hand side at our layers, here we see the ellipse with a line going up. So, it’s applying the mask to anything above it. But currently there’s nothing above the ellipse. That’s the topmost layer. I want the ellipse mask to apply to the rectangle which is currently sitting under the ellipse. So, let’s take the ellipse and move it under the rectangle. So now it’s taking that mask and applying it to everything above. And look at that, it now applies a mask. So, this is defining what area of this rectangle should be visible. And it’s just that place right there. The location screen is looking fairly solid now. And I want to build out a little bit of the cart screen. And a good place to start is by adding the title. So, I’ll go up to the text and let’s click right here and I’ll type in cart. But one problem you’ll notice is this text here does not match the text on the location screen. Now, of course, I could take this text and I could copy and paste it over into cart. But then what if I update the color or the size or something else on this location screen? It won’t flow through to all the other places. We saw the benefit of components and how you can make a change in one place and have it flow through to others. With text and also colors, you could do the same thing. But instead of using a component, we’re going to use something called styles. So, let’s create a style. You can create both text and also color styles. Here I’ll click on locations. And over on the right-hand side, here we see all the different text settings. Here we see the font size. I’ll click on these four dots. And I can click on this plus icon to create a style. I’ll click on that and now I could give it a name. I’ll call it screen title and then click on create style. Right down here, I can also set up a style for the fill. I’ll click on the four dots. And right over here, I can now add a style. Let’s click on that. And over here, I see existing properties for this text. And for the name here too, I’ll also call it screen title. And down below, let’s create the style. And here I’ll close out of it. So now I’ve saved both the color and also the font size. Let’s now click on cart and I’ll select all of that text. Let’s now go over to the right-hand side and click on the four dots. And here I see my existing style. I’ll click on that and that adjusts the font size to match locations. Down here with the fill, let’s also click on the four dots. And here I see the color for screen title. I’ll click on that and that applies the same color and also the font size to this text. Next, I also want to align this text so it appears in the same location as locations. I can click on locations. And here I can see the X and also the Y value, 26 and 35. I’ll select cart and over here, let’s set it to 26, tab over 35. And there it now appears in the same exact location as locations. Looking over at the left-hand side at the home screen, it looks just a little bit empty. And I think it might be helpful to include some type of button on the home screen that directs viewers over into the cart. Let’s click on the home screen over on the left-hand side in the layers panel. And then let’s press shift two and that way we focus just on the home screen. To insert a button, first I want to insert some text. I could press T on my keyboard or I could go up to the toolbar up on top and then here I could click on the text tool. I want to place text right at about here and I want it to say, let’s say order cookies. I’ll press control A to select the text and over on the right-hand side, I have all the text properties. Let me set it to, let’s say 20. I think that’s better. And here I could select the text and let’s put it, let’s say right in the center right over there. Now for it to be a button, I also need to include a background behind this text. So, let’s go right up to the top where we could insert different types of shapes. I’ll click on this dropdown and here we have the option to insert a rectangle. I could also press R and over here I’ll draw a rectangle in back of this text or at least right now on top of this text. Over on the left-hand side, to ensure that the text appears on top of this rectangle, I need to adjust the layers. Here we see that the rectangle is currently on top of the text. So, let’s take the text and here I can move it up to the topmost layer and now we see it sit on top of the background for the button. I now want to format the button. I mean, I don’t think a gray button like this would get that much engagement. So over on the left-hand side, I have the rectangle selected and over on the right-hand side in the pane, here I have all of the different properties. Let’s start by setting the fill color. Here I’ll click on this gray color and let’s use the dropper tool and maybe I’ll pull in this light red color. Let’s go a little lighter than that. Maybe right at about there. Oh, that looks nice for the button. Over here, I’ll close out of the color. Next, I also want to round the edges of this button. Right now, it’s just a nice rectangle, but I would like to curve those edges. So here again, I’ll click on the rectangle. Over on the right-hand side here, I could adjust the corner radius. So, let’s drag that over in there. You see the edges of the button curving a little bit. I think that looks good at just at about nine and down below, I’ll also click into effects and here I can add a drop shadow under the button. That looks great so far. On second thought, you know, I actually think it would be better if it says order cookies today. I think that would get more people to click on it. So over here, I’ll click into the text and let’s type in today. But you’ll notice one problem. The text now extends beyond the button. Of course, I could click into the rectangle and I could expand the rectangle to fit the text, but that’s going to be a pain. I’d rather connect the text to the rectangle. So, let’s get rid of the today text. Over on the left-hand side, let’s select the rectangle and also select the text by clicking the shift key and then clicking on both of those layers. Over on the right-hand side within the pane, you’ll see a new option for something called auto layout. This will allow us to expand the text or add additional text and the underlying rectangle will expand to fit whatever text we decide to add and we can define how it should respond. Over on the right-hand side, let’s click on the plus icon and here we have a number of different settings. Within auto layout, I have a number of different settings. As I expand the text here, I could define what should happen. Currently it’s set to expand the button that underlays the text horizontally. I could also have it wrapped to a new line or here I could have it expand vertically. And over here, I could set the gap between items and I could also set the padding. Let’s adjust the padding a little bit. Here I could drag it so I can make the button larger or here I could bring it in a little bit. I’ll bring it in. And over here, I could also adjust the vertical padding. Right here, I could also define where the text should sit within this button. Currently it’s set to align center and I like that location. Let’s now click on the text and over here, I’ll now add that new word. Let’s type in today and look at that. The frame now for this button expands to fit all of that text. In fact, if we look over at the left-hand side under layers, you’ll notice that it turns the button into a frame. So, the container is a frame and then that frame includes text that says order cookies today. So, the rectangle has been converted into a frame. In the top right-hand corner, let’s now center the button. Over here, I’ll click on center. And now let’s use the arrow key on the keyboard to nudge it up just a little bit. I think that’s a great spot. That looks perfect. I think this app is now in a fairly good spot and I’m ready to share this out with the team so they can start providing me with some feedback before I invest more time into building this out. But I think it would be helpful to turn this into a prototype so they could click on the different buttons and see all the different screens. To turn this into a prototype, here let’s click into the home screen and over on the right-hand side in the right pane, let’s click on prototype. And here we can now turn this into a prototype. A prototype allows people to interact with your design. Right at the very top, I can define a flow starting point for this prototype. And I want the home screen to be the starting point. Over here, I’ll click on the plus icon. And this is now defining this screen as the start point. That’s exactly what I want. Now I want to make sure that the navigation navigates to the different screens throughout the app. So over on the left-hand side, first I’ll click on the home button. And if someone clicks on the home button, I want it to bring the person to this home screen. So, as I hover over, you’ll see this plus icon. I could define where this button should link. So here I’ll click on the plus button and I want it to go to the home screen. So over here, I’ll release right there with that frame. So here, when someone taps that button, it’ll now scroll to this main view. Here, I’ll close out of that. Next, I want the location button to go to the locations screen. I’ll select location. And over here, there too, I also see that circle with the plus icon. I’ll click on this and I’ll connect it to the location screen and then I’ll release. So, this way on tap, it’ll navigate to the location screen. I also have other settings within this screen. For example, when someone clicks on locations, it’ll instantly move to the location screen. But here, if I click on the dropdown, I could also animate it. Maybe I want it to dissolve, move in, move out. So, you have different options. But for now, I will leave it set to instant. And over here, I’ll close out of this. Lastly, I also want the shopping cart to go to the cart screen. Over here, I’ll click on the plus icon and then I’ll drag it over and connect it to the cart screen. Over here, let’s make sure it connects and then I’ll release. And here too, I have all those same settings. But for now, I’m just going to stick with a simple example and I’ll close out of this. Now, one of the beautiful things is because I’m using components, if I click on the navigation bar on any of the subsequent screens, these will also navigate to the appropriate locations. So that’s yet another benefit of using components. I also want the order cookies today button to go to the shopping cart. So over here, I’ll select frame one for the button. And then here too, I also get that circle icon. I’ll click on that and let me drag it over to the cart screen and then release. This way, if someone clicks on this button, that will navigate to the cart screen. I think all of my different buttons and also flows are now in place. To test out my prototype, in the top right hand corner, let’s click on the play icon. This now opens up a prototype of my app design. And look at that, you’ll see my design now sits in an iPhone frame. That’s looking really nice. When I click up my design, you’ll notice these blue rectangles. That lets me know where I can interact with this app. So, I could click on this button or I could click on the navigation down below. Let’s start by navigating to the location screen. I’ll click on this button on the bottom navigation. And here I can see all the different locations for the Kevin Cookie Company. When I click again, I can also navigate to the shopping cart. I’ll click on this icon and this shows me the cart. I haven’t put anything in the cart yet, but we’ll have to build out this page. Up on top, I have various options. Over here, I can view all the different flows and I could jump back to the beginning of flow number one. When I click on this icon, I can leave feedback on the flow. Over on the right hand side, I also have various options that I can configure. Once I’m ready to share this prototype with others, maybe I’m ready for feedback, I can click on share prototype and I can invite other people to view this prototype. Once I’m all done interacting with this prototype, I can close out of this tab. Back now within the main editor, anyone on your team can come into this and start working on this design with you. However, if you would like to share this with others, in the top right-hand corner, you can click on the share button and here you could type in email addresses of other people. Over on the right hand side, you can define their permissions. Should they be able to edit, just view, or just view the prototypes? And over here, you can see everyone who already has access to your file. Now, I don’t need to share it with anyone right now, so over here, I’ll click on the X icon. Once other teammates come in, they may have feedback on the design. Up on the top toolbar, we can click on the add comment icon. You can also press C on your keyboard. And over here, I can now place a comment anywhere on these designs. So maybe with this button, instead of red, maybe green would look better. I’ll click right there and that leaves this comment icon and I can now type in my comment. Let’s say make this button green. And I have other tools down below that I can add. Here, I’ll send that through. And over on the right-hand side, we now see a pane that shows all the different comments on this canvas. Right up on top, you have different filter controls and you could also sort which types of comments you want to see. Now, right up on top, once you start working on comments, here you can click into it and you can reply so you can have a conversation related to the comments. And once you resolve it, you can click on this button to mark as resolved, but the button’s still red, so I haven’t resolved it. Another way you can share your designs with others is to export the designs. Over on the left-hand side, for instance, I can click on the home screen, so that’s currently active. And up on top, I can click on the Figma menu and right down here under file, we have the option to export. You can also export to PDF. And when I click on that, you can define what you would like to export. So, let’s just export the home screen and then I’ll click on export. And this gives me a PNG showing the home screen. That looks really good. And I can share that out with the broader team. All right, you now know the basics of designing in Figma and hopefully you start pulling together some incredible designs. And even better, we now have a beautiful designed app for the Kevin Cookie Company. To watch more videos like this one, please consider subscribing and I’ll see you in the next video.