Figma Tutorial for Beginners - Bilingual Subtitles
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, First of you can get started entirely for free.
If you're trying to build an app or a website, this is the perfect tool.
When 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.
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 can click on the card in the top right hand corner, or there's also a 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 home page, 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.
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 come to?
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 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,
and I'll put down using it just for fun, and I'll that and then click on Continue.
And have I used them before, and I'll 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 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, you also 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'd like to go into first.
You have Figma and you also have Fig Jam.
We're going to using Figma throughout this video, and 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 or a stand-up.
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.
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 can 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 decide to share any of these files with others, they'll be view-only.
So 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 it as just being more personal content.
To add a new design within Drafts,
you can 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 fig jam 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 Sigma 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 can and then in an email address.
Right 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 upend.
if you need additional projects.
A project is really just a way of organizing all of your different designs.
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 have one file also very easy to add additional files.
Over 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 different ways to get to that functionality.
Once you add a file, you're not locked to having that file in this project.
You can press and hold on a 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 drop-down and right over here
Let's rename this project to the Kevin Cookie Company app or the KCC app
There 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 KCCApp.
It'll be the same as the project name.
Now that we've renamed the file I want to show you how you can get back to the file browser.
In the top left-hand corner my Let's click on this Figma drop down 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 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 we'll 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 cross hairs.
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 can 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 to 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 can 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 can press F on my keyboard and I can now insert another frame.
Or alternatively,
I can also select this frame on my layer's 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.
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 can also use the shortcut key H.
When I click on that I can now pin.
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 spacebar key together with your left mouse button and that also allows you to pan around or you could
also use two fingers on your trackpad.
many different options.
To zoom in and out you can press the control 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 trackpad or in the top right hand corner you can also adjust the zoom here and you can select for many of these
different options and.
you also have associated shortcut keys.
One 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 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.
I'll type in locations.
And the third screen, I want this to be a shopping cart.
So I'll type in cart.
No, 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 drop-down 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 already to start building out the home screen of my app.
Over 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 to 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
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 can also type in a hex code and I have other options as well.
Up on top here I can also set a gradient background.
I can select an image as the background or you can even set a video background.
I want to select an image background so here I will click on image and right down below let's choose an image.
I think this image right here will work well and 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 has 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 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 can also set it to Crop.
Then here we can set it to Tile.
So few different options.
Let's 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 arrow.
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 can 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 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 way it doesn't get distorted.
I'll 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 can also adjust things like the exposure, the contrast, saturation, all these different tools.
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, basically an outline or a border.
To add that, I click on the plus icon, and that's now added a very slight one pixel border.
Over here, I can 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 can go through and modify all of these different properties, whether it's inside inside.
outside or in the center.
If it turns out that you no longer want this effect, over here I can click on the minus sign and that removes the stroke.
Over here you can also add various effects.
For example, an inner shadow, a 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 in the left-hand different shapes and when I click on this drop-down here I can insert a
rectangle.
You 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.
Then...
And as I'm drawing it there too, we see the dimensions of this rectangle.
And 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.
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.
Now 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 looked at Now click on this and let me give it just a completely black film.
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 and I think that looks really good.
I'll close out of this.
I want to add an effect to this rectangle.
Now 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 4 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 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.
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.
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.
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?
Let's test it out.
Here I can take the rectangle and I'll move that to be the topmost layer.
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.
Great.
As you start designing, you may need to know 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 on your 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 see that there are 53.
the top of the and the beginning of the logo file.
Then here I can hover around.
Along with getting the red lines to appear, you can also have a grid appear.
Here I will select the frame.
And then over on the right hand side, you an option for layout grid.
I will 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 can also adjust the color and also the opacity of the grid.
I 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 to 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 also like 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 byte.
I now want to modify the way this text looks.
I'll press Ctrl-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 that's a little bit so.
small.
Let's try maybe 27.
I think that'll work better.
Right here I can also set the fill.
When click on this I can choose all these different colors.
I set a gradient.
Here you can also set the opacity but I think white will work well.
So 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.
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 can left align and that'll left align with the leftmost portion of the frame.
Here I can center align, right align and I have different options.
But go with center align.
and I think I want to,
why don't we pull this up just a little bit here and 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 can 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 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 Ctrl D on my keyboard to create a duplicate and there's another square.
And it let let let let a and let it a and me place it,
let's say write it about there for now and I'll press Ctrl D again and here I'll drag this over,
let's move over, a 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 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 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.
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 2 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 here, we have the option for an ellipse.
I can also press O on my keyboard.
I also like 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 see.
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 the 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 press the Shift key, and that way it'll lock it in the sensor position.
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,
and 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 all done in edit mode,
I can click on the done button, or I can press escape on my keyboard, and that now exits edit mode.
The shape of the pushpin 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, and it's coming to me.
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 the 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 all button.
check that the spacing on this side is the same as the spacing on this side.
And 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 can 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.
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 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 will 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
this selection.
I also have the shortcut key Ctrl G.
I'll click on that and that's now made a group.
I can now.
click on that and I can rename them.
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 click on that, that hides the rectangle and now I'm just left with my icon.
I'll press Ctrl and scroll that 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 has rectangle number four.
And then I'll press shift to on my keyboard so the rectangle fills the screen.
And I'll rectangle.
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 and I will 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 to 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 can press the delete key, and I can 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 see.
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.
Let's go up on top and click on Done.
And within the Move menu, let's select the Scale tool.
You can 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.
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 can 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 there.
Looking at this house, I think the edges are a little bit sharp.
I don't think they should be that sharp.
I 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 it.
So here I can adjust that and make it a lot more round.
Now, I don't know if you can tell that's a house,
but let me adjust that,
maybe one, or even here, I can 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'll select the underlying rectangle.
So these two are now selected and I'll press Ctrl G on my keyboard to group those two objects.
Here I can 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 1.
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 and 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 Iconomoon.
Let's click on this one, and over on the left-hand side, let's now open this in figure Sigma.
This now opens up the Iconomoon 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 also like 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 fit perfectly in my app.
Here 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.
Now 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 to to zoom in on this rectangle.
Next, I'll press Ctrl V and that pastes in the shopping cart icon.
Now this is currently black and all my other icons are white.
So with all these different vectors and rectangles selected,
So 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 like we did before, let's go up to this menu and then click on Scale.
Next, we can 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 in 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 these different objects, then let's press Ctrl 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 will 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 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've 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 Ctrl 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.
to update the color on the original navigation bar.
Here I will select navigation and over on the right hand side for the fill I will click
on the color icon and I'm going to click on this dropper.
And 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 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 work.
Over on the left-hand side, let's make sure that the navigation frame is selected.
Here, 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.
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
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 also
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 and about there and over here I can 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 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.
Over here I'll click on the location frame.
Here is currently selected.
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 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, 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 and 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 its scale with the design.
So, if we smaller, this navigation bar gets smaller.
gets larger or the screen size gets larger the bar will also get larger.
I'm 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 can lock it to the bottom, the top and the bottom.
the center or scale.
Let's put it so it locks to the bottom.
Now 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 icon 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 that.
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 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 what we're
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 and 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 and 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 that looks great.
Now I'll click out of the color and here I'll 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 in over here.
We'll call this St.
E Seattle flagship.
Now I don't want this to happen.
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 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 these different objects and up on top of the properties let's align left.
This will align all of the different items to the left most item.
Now I want the address to be at last.
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 we can see the spacing.
I 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 in here.
I could insert a rectangle, now 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 can pull in the card one more time just to represent what the screen would look like when we have.
components.
Let's go back into layers.
Now 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 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 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 a rectangle where I'm going to insert the image, and I can 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.
components.
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 drop-down, 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 will 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 we gotta 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 end ellipse.
And over here, let's draw an ellipse on top of this image.
And I'll place it right at about there.
So 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 Figmo what parts of an image to show or to hide.
So 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 image.
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 at that, it now applies a mask.
So this is defining one 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 card screen and a 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 little 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 can 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 film.
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.
I'll click on that and that applies the same color and also the font size to this too.
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 also select cart and over here let's set it to 26,
tab 35 and there it now appears in the same exact location as location.
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
2 and that way we focus just on the home.
To insert a button, first I want to insert some text.
I can press T on my keyboard or I can go up to the toolbar up on top and here I can click
on the text tool.
I want to place text right about here and I want it to say, let's say, order cookies.
I'll press Ctrl-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 I can 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 can insert different types of shapes.
I'll click on this drop down and here we have the option to insert a rectangle.
I could.
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 great 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 the different properties.
Let's start by setting
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.
Ooh 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 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 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 can define how it should respond.
Over on the right-hand side, let's click on the plus.
icon and here we have a of different settings.
Within Auto Layout I have a number of different settings.
As I expand the text here I can define what should happen.
Currently it's set to expand the button that underlays the text horizontally.
I can also have it wrapped to a new line or here I can have it expand vertically.
And here I can set the gap between items and I can also set the padding.
Let's adjust the padding a little bit.
Here I can drag it so I can make the button larger or here I can bring it in a little bit.
I'll bring it in.
And over here I can also adjust the vertical padding.
Right here I can also define where the text should sit within this button.
Currently it's set to align sensor.
and I like that location.
Let's now click on the text.
And 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 now.
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 connected 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 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 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.
benefit of using components.
I also want the order cookies today button to go to the shopping cart.
So over here I will select frame one for the button and then here to 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.
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.
looking really nice.
When I click on my design, you'll notice these blue rectangles.
That lets me know where I can interact with this app,
so I can click on this button, or I can click on the navigation down below.
Let's start by navigating to the location screen.
I will click on this button on the bottom navigation, and here I can see all the difference.
locations for the Kevin Cookie Company.
When I click again, I can also navigate to the shopping cart, and 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 like to share this with others
in the top right hand corner you can click on the share button and here you can type in email
addresses of other people over on the right hand side you can default find 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.
top toolbar, we can click on the Add Comment icon.
You 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 would look better.
I'll click right there and that leaves this comment icon.
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 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 save.
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 it's resolved but the button
still read 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.
really good, and I can share that out with the broader team.
Alright, you now know the basics of designing and 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.
Unlock More Features
Install the Trancy extension to unlock more features, including AI subtitles, AI word definitions, AI grammar analysis, AI speaking, etc.
Compatible with Major Video Platforms
Trancy not only provides bilingual subtitle support for platforms like YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera, but also offers AI word/sentence translation, full-text immersive translation, and other features for regular web pages. It is a true all-in-one language learning assistant.
Supports All Platform Browsers
Trancy supports all platform browsers, including iOS Safari browser extension.
Multiple Viewing Modes
Supports theater, reading, mixed, and other viewing modes for a comprehensive bilingual experience.
Multiple Practice Modes
Supports sentence dictation, oral evaluation, multiple-choice, dictation, and other practice modes.
AI Video Summary
Use OpenAI to summarize videos and quickly grasp key content.
AI Subtitles
Generate accurate and fast YouTube AI subtitles in just 3-5 minutes.
AI Word Definitions
Tap on words in the subtitles to look up definitions, with AI-powered definitions.
AI Grammar Analysis
Analyze sentence grammar to quickly understand sentence meanings and master difficult grammar points.
More Web Features
In addition to bilingual video subtitles, Trancy also provides word translation and full-text translation for web pages.