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.