0:00:00.036,0:00:06.056
>> Figma is a vector design[br]tool that runs in the browser.

0:00:06.056,0:00:15.386
Use Figma to brainstorm ideas,[br]iterate on designs, create prototypes,

0:00:15.466,0:00:18.196
and get feedback at any stage[br]of the creative process.

0:00:18.896,0:00:23.736
In this beginner's course, we're going to take[br]you through the key stages of designing an app

0:00:23.736,0:00:27.936
in Figma, from the initial wireframes[br]to an interactive prototype.

0:00:28.276,0:00:31.196
We'll cover the basics, and[br]introduce more powerful features

0:00:31.196,0:00:34.326
like auto layout, components, and prototyping.

0:00:34.326,0:00:38.386
There's something for everyone, whether[br]you're new to design or new to Figma.

0:00:38.936,0:00:42.616
We won't cover all these features in[br]depth, but we'll provide you with resources

0:00:42.646,0:00:45.986
to continue your Figma education.

0:00:48.096,0:00:52.666
Sign up for a free Figma account at figma.com.

0:00:52.666,0:00:57.796
With the Figma account, you can create teams,[br]shared workspaces, or you can collaborate

0:00:57.796,0:01:00.246
on files and organize them in projects.

0:01:00.956,0:01:04.426
Choose from a free starter team[br]or a paid professional team.

0:01:04.786,0:01:08.066
If you are a student or educator,[br]you can get access to all

0:01:08.066,0:01:10.036
of Figma's professional features for free.

0:01:10.076,0:01:15.936
Visit figma.com/education/apply[br]to verify your education account.

0:01:15.936,0:01:24.606
Once you've created your team, you[br]can invite members to collaborate.

0:01:24.606,0:01:29.096
This will give them access to all[br]the projects and files in your team.

0:01:29.096,0:01:31.806
You can choose what level of[br]access each team member has.

0:01:32.156,0:01:35.236
Learn more about creating[br]teams and inviting members

0:01:35.446,0:01:40.566
by searching Teams in the Figma Help Center.

0:01:40.656,0:01:43.536
We're pretty sure we've got[br]the next million-dollar idea:

0:01:43.606,0:01:45.566
a social media app for pets.

0:01:46.566,0:01:50.586
We want some feedback on the general layout[br]before we start exploring specific elements

0:01:50.586,0:01:51.366
of our design.

0:01:51.816,0:01:54.576
Wireframes are simplified[br]designs that are devoid

0:01:54.576,0:01:57.906
of any style, like color, type, or imagery.

0:01:58.456,0:02:02.216
They allow us to map out user flows and[br]explore different ways we structure our app

0:02:02.476,0:02:06.026
without having to design any[br]elements or add any content.

0:02:06.726,0:02:12.186
We start our journey in the Figma editor.

0:02:12.276,0:02:15.206
The canvas is the backdrop[br]for all of your designs.

0:02:15.506,0:02:19.366
It's where you'll add all the[br]frames, shape, text, and images.

0:02:19.566,0:02:22.866
There are no bounds to your[br]creativity, but you should know

0:02:22.866,0:02:27.616
that the canvas extends approximately[br]65,000 points in each direction.

0:02:28.036,0:02:36.246
With the great expanse that is the canvas,[br]we need something to put our designs in.

0:02:36.246,0:02:36.856
Enter frames.

0:02:36.856,0:02:41.616
Frames are the containers we place[br]our shape, text, and image layers in.

0:02:41.616,0:02:46.636
You can think of each frame in the[br]canvas as a single screen of your design.

0:02:46.636,0:02:49.886
The toolbar contains the tools[br]we need for creating layers.

0:02:50.386,0:02:52.116
Select the Frame tool in the toolbar.

0:02:53.186,0:02:58.456
Frame presets in the sidebar on the right let[br]us create frames with specific dimensions.

0:02:58.456,0:03:04.066
We know that we're making a mobile app, so[br]we'll select Google Pixel 2XL from the presets.

0:03:04.956,0:03:06.736
Two exciting things just happened.

0:03:07.156,0:03:11.536
Figma added a frame to our canvas and the[br]sidebar on the left is no longer empty.

0:03:11.536,0:03:15.636
Everything that we add to the canvas[br]will also be added to the Layers panel.

0:03:15.636,0:03:26.526
Let's right click on this[br]frame and name it to Home.

0:03:26.526,0:03:31.356
To explore more of the canvas, we can use[br]two fingers on a trackpad or the scroll

0:03:31.356,0:03:33.136
on the mouse wheel to pan around.

0:03:33.136,0:03:38.466
We can also press and hold the[br]space bar and click and drag to pan.

0:03:38.466,0:03:40.566
Let's zoom out so we can see the entire frame.

0:03:40.566,0:03:46.296
If you're using the trackpad, you can also[br]use the pinch gestures to zoom in and out.

0:03:46.296,0:03:51.206
You can also use shortcuts like Command[br]Plus and Command Minus to zoom in or out.

0:03:51.206,0:03:55.406
For granular control, adjust the zoom[br]level in your view settings up here.

0:03:55.406,0:04:02.136
Now, we're ready to add some[br]layers to our frame.

0:04:02.136,0:04:06.436
As this is a wireframe, we're going to keep[br]it basic and use shapes like rectangles

0:04:06.436,0:04:10.806
and ellipses to represent more[br]complex aspects of our designs.

0:04:10.936,0:04:14.896
We'll select the rectangle tool to create[br]an image for a post on our app's home page.

0:04:14.966,0:04:19.056
Just like frames, every layer[br]in the canvas has dimensions.

0:04:19.176,0:04:23.276
We can adjust a layer's position and[br]dimensions at the top of the right side bar.

0:04:24.016,0:04:27.496
We want our rectangle to take up most[br]of the horizontal space in our frame,

0:04:27.796,0:04:36.216
so let's make the width of our[br]rectangle 380, and a height of 300.

0:04:36.216,0:04:41.086
If we look in the layers panel again, we can[br]see that our rectangle is within our home frame.

0:04:41.326,0:04:44.176
Some layers, like frames,[br]can contain other layers.

0:04:44.756,0:04:48.696
If we move our rectangle outside of the[br]frame, the layers panel updates, too.

0:04:48.696,0:04:52.056
We're going to place our[br]rectangle back inside of our frame.

0:04:52.056,0:04:55.226
Figma will help us snap the[br]position of the rectangle

0:04:55.226,0:05:01.396
to align it to the center of the frame.

0:05:01.396,0:05:06.606
Cool. Now we're going to create a shape that[br]represents a user's profile picture or avatar.

0:05:06.606,0:05:10.166
Select the Ellipse tool on the menu[br]and click to start drawing the ellipse.

0:05:10.246,0:05:14.446
If you hold down Shift as we drag,[br]we can create a perfect circle.

0:05:15.176,0:05:18.726
We'll release to create the avatar[br]with dimensions of around 30 by 30.

0:05:19.156,0:05:22.096
Holding Shift can strain the[br]proportions of our ellipse.

0:05:22.546,0:05:26.186
If we update one value in the right-side[br]bar, the other will update, too.

0:05:26.826,0:05:29.616
We can click into the width[br]field and use the arrow keys

0:05:29.616,0:05:31.706
to nudge the ellipse's dimensions to 30.

0:05:32.496,0:05:34.736
Some fields in Figma accept equations.

0:05:34.736,0:05:38.636
We can use equations to resize[br]layers by adding, subtracting,

0:05:38.766,0:05:41.866
multiplying, or dividing the existing value.

0:05:42.426,0:05:50.316
Let's add plus 10 to the field to set[br]the dimensions of our circle to 40.

0:05:50.416,0:05:53.436
Basic shapes support both[br]fill and stroke properties.

0:05:54.076,0:05:57.886
We can see these in the right sidebar[br]when we select both of our layers.

0:05:57.886,0:06:03.576
By default, our layers have a fill of[br]grey, but you can choose another color.

0:06:03.576,0:06:08.456
Enter a hex code in the field or click[br]the Swatch to open the color picker.

0:06:08.456,0:06:11.896
We can select colors from the[br]Palette, or apply other fills

0:06:11.896,0:06:15.076
like gradients, images, and even animated gifs.

0:06:15.076,0:06:19.746
We can also remove the fill entirely[br]by clicking the minus button.

0:06:19.746,0:06:24.816
We want our wireframes to appear like[br]outlines instead of solid shapes.

0:06:25.276,0:06:27.636
We can do this by adding a stroke.

0:06:27.746,0:06:30.136
Strokes are outlines or borders around layers.

0:06:31.046,0:06:38.556
We've learned to align layers to their frames,[br]but we can also align objects to each other.

0:06:39.356,0:06:41.996
Let's use the alignment tools[br]to align the layers to the left.

0:06:42.166,0:06:47.206
As our avatar layer is smaller, Figma[br]will align it to the larger image layer.

0:06:47.326,0:06:50.206
Now, we need a username to go with our avatar.

0:06:50.576,0:06:55.776
Select the Text tool, click a spot on the[br]canvas next to our avatar, and type in name.

0:06:55.896,0:06:58.916
We'll cover adjusting text[br]properties later in the series.

0:06:59.846,0:07:03.416
We want our text layer to align[br]to the center of our avatar.

0:07:03.416,0:07:08.206
Drag over multiple layers to select them[br]all at once and click Align Vertical Center.

0:07:08.266,0:07:11.866
If we want to make small[br]adjustments to a layer's position,

0:07:12.146,0:07:15.406
we can use our arrow keys to[br]nudge objects on the canvas.

0:07:15.496,0:07:19.396
Looks good to me.

0:07:20.726,0:07:25.446
Users will want to engage with each other[br]by commenting, liking, and saving posts.

0:07:25.446,0:07:30.556
Let's press R to select the Rectangle tool[br]and create some icons for these actions.

0:07:30.556,0:07:34.996
We'll use Shift again to constrain the[br]proportions and create a perfect square.

0:07:35.116,0:07:38.236
Let's aim for dimensions of 32 by 32.

0:07:38.236,0:07:43.526
Instead of drawing three separate[br]squares, we can copy the original layer.

0:07:43.526,0:07:45.866
There are a few ways to copy layers.

0:07:46.096,0:07:50.966
Hold down Alt or Option and click and[br]drag on our layers to duplicate it

0:07:51.056,0:07:57.506
or press Command D. Figma will maintain[br]the same distance between objects.

0:07:57.506,0:08:02.496
If we want to change the uniform spacing[br]between them, we can select our layers

0:08:02.496,0:08:05.576
and update the horizontal[br]spacing in the right sidebar.

0:08:06.036,0:08:07.626
We'll need some text below our image.

0:08:08.116,0:08:09.896
Let's add that.

0:08:09.896,0:08:15.436
All these layers make up a single post.

0:08:15.496,0:08:20.566
We want to be sure these objects stay together.

0:08:20.626,0:08:22.986
There are two ways we can group layers.

0:08:23.166,0:08:27.406
We can use the keyboard shortcut, Command[br]G, to create a group out of these layers.

0:08:28.026,0:08:29.866
Groups allow us to move a collection of layers

0:08:29.866,0:08:32.826
around without having to[br]select each individual layer.

0:08:32.966,0:08:36.386
We can use Groups or Frames[br]to organize our Layers panel.

0:08:37.266,0:08:41.486
While Frames and Groups look similarly in the[br]Layers panel, they are fundamentally different.

0:08:41.486,0:08:45.756
Groups are the sum of their parts[br]and have no properties of their own.

0:08:45.756,0:08:50.796
We can use Groups to organize our layers[br]or apply properties to layers in bulk.

0:08:50.796,0:08:53.756
Frames, on the other hand, can have[br]their own dimensions and properties,

0:08:53.756,0:08:56.246
some of which can affect the layers within them.

0:08:56.246,0:08:59.596
We'll learn more about frames and[br]their properties later in this series.

0:08:59.596,0:09:04.126
From the right sidebar, we can[br]convert our group into a frame.

0:09:04.696,0:09:09.956
Then we'll copy this frame using the keyboard[br]shortcut to create a second post for our feed.

0:09:10.746,0:09:19.676
We'll move the other post below[br]the other post in the frame.

0:09:19.676,0:09:21.076
The feed is starting to take shape,

0:09:21.076,0:09:24.576
but we're missing some crucial[br]elements to make it look like an app.

0:09:24.806,0:09:29.166
We need a status bar and a navigation[br]menu to move between pages in our app.

0:09:29.306,0:09:33.046
We could make these elements using[br]shapes, or we could rely on components

0:09:33.046,0:09:34.846
and libraries to speed up the process.

0:09:35.206,0:09:37.646
Components are the building[br]blocks of our designs.

0:09:38.136,0:09:40.876
They can be basic UI elements[br]like buttons or icons,

0:09:40.876,0:09:43.906
or more elaborate compositions[br]like toolbars and menus.

0:09:44.706,0:09:47.206
Libraries are collections[br]of components and styles.

0:09:47.746,0:09:53.656
You can use libraries in Figma to create,[br]share, and use components across your files.

0:09:53.716,0:09:55.356
You might have heard of a design system.

0:09:55.836,0:09:58.946
Design systems combine component[br]libraries with standards

0:09:58.946,0:10:01.526
and guidelines for implementing them in code.

0:10:01.526,0:10:04.076
They're a single source of truth[br]for designers and developers

0:10:04.296,0:10:06.856
and help to create consistency at scale.

0:10:07.106,0:10:09.936
Let's look for a component[br]library in the Figma community.

0:10:09.936,0:10:13.646
The Figma community is a space[br]where creators can share resources

0:10:13.646,0:10:15.716
in the form of design files and plugins.

0:10:15.716,0:10:18.386
We're going to use this wireframe UI kit,

0:10:18.386,0:10:20.976
so we'll duplicate the file[br]and add it to our drafts.

0:10:22.146,0:10:25.956
We could copy components from this file[br]and paste them into our wireframes.

0:10:26.496,0:10:29.296
We're going to publish these[br]components to a library instead

0:10:29.686,0:10:31.196
to make them available to our team.

0:10:31.806,0:10:34.636
We'll open the file in the[br]editor and click the arrow next

0:10:34.636,0:10:37.816
to the file name and select Move to Project.

0:10:37.816,0:10:42.236
As components can only be published in a team,[br]we'll move this to a project in our team.

0:10:42.436,0:10:47.856
Now, we can go to the same menu and[br]select Publish Components and Styles.

0:10:48.006,0:10:52.416
We can enter a description of our library[br]and press Publish to share it to our team.

0:10:52.906,0:10:56.296
Back in our original file, we[br]can now access that library

0:10:56.526,0:10:58.906
in the Assets panel of the left sidebar.

0:10:58.906,0:11:01.306
Click the book icon to open the library's modal.

0:11:01.306,0:11:04.646
Toggle the switch to enable[br]the wireframe in our file.

0:11:05.176,0:11:06.646
Let's resize the left sidebar.

0:11:06.646,0:11:11.976
Hover over the edge until the cursor[br]appears, then click and drag to resize.

0:11:12.496,0:11:16.776
Okay, we need components to represent[br]the status bar at the top of the screen,

0:11:16.776,0:11:20.756
and a floating action button,[br]or FAB, at the bottom.

0:11:20.756,0:11:22.506
This generic status bar is perfect.

0:11:22.506,0:11:26.066
To add this component to our file,[br]we can click on the component

0:11:26.066,0:11:29.446
in the assets panel and drag it onto the canvas.

0:11:29.446,0:11:33.166
We'll position the status bar near the[br]top of the frame and release to place.

0:11:33.286,0:11:36.186
We'll align to the top and left.

0:11:36.296,0:11:41.226
Let's repeat this process for the FAB and place[br]it in the bottom and the right of the frame.

0:11:41.226,0:11:48.076
Now, we have copies of these[br]components known as instances.

0:11:48.076,0:11:52.356
Instances are connected to the main[br]component they originated from.

0:11:52.866,0:11:55.046
If you make a change to the main component,

0:11:55.046,0:11:58.256
Figma will also apply those[br]changes to any instances.

0:11:58.506,0:12:02.046
This saves you from having to manually[br]update every instance when you want

0:12:02.046,0:12:07.426
to change properties of your component.

0:12:07.426,0:12:10.776
Our eventual application will need[br]to adapt to different screen sizes.

0:12:11.036,0:12:14.886
If we want to resize our frame[br]now, our components don't change.

0:12:15.636,0:12:20.316
We can make sure they respond to[br]different frame sizes using constraints.

0:12:20.316,0:12:23.946
At the moment, our constraints are[br]set to the top and left by default.

0:12:24.446,0:12:27.246
We want the status bar to take[br]up the full width of the frame,

0:12:27.246,0:12:30.086
so we'll keep the vertical constraints at top

0:12:30.196,0:12:32.706
and set our horizontal constraints[br]to left and right.

0:12:33.416,0:12:36.266
We'll set the constraints for[br]the fab at the bottom and right.

0:12:36.266,0:12:41.886
Now, when we resize our frame, the components[br]will respond according to their constraints.

0:12:41.886,0:12:48.686
Our app is starting to come together.

0:12:48.766,0:12:51.116
Let's create a frame for our menu.

0:12:51.296,0:12:53.926
Select the frame in the toolbar[br]or press the F key.

0:12:53.926,0:12:57.956
We'll add another Google Pixel[br]2XL preset to the canvas.

0:12:58.446,0:13:01.496
Let's add some text layers[br]for each page in our app.

0:13:01.496,0:13:05.366
Press T to select the text tool and[br]click to create a new text layer.

0:13:05.896,0:13:08.016
We'll type in menu item for now.

0:13:08.106,0:13:13.366
We want all our text layers to be the[br]same width, so we'll set the width to 200.

0:13:13.366,0:13:15.876
We'll also increase the font size to 20.

0:13:16.016,0:13:21.816
Let's duplicate this layer to create four[br]more menu items, one for each page in our app.

0:13:21.816,0:13:25.826
Hold down Alt slash Option, then[br]click and drag to duplicate.

0:13:25.986,0:13:29.156
Then, use the duplicate shortcut.

0:13:29.586,0:13:34.116
Let's copy the status bar in Fab from[br]our home page to complete our menu page.

0:13:34.286,0:13:39.656
We'll Click to select the status bar, hold[br]down Shift, then Click to select the Fab.

0:13:40.086,0:13:44.186
We'll then use the shortcut Command[br]C to copy them to our clipboard.

0:13:44.286,0:13:47.276
Select our menu frame and[br]press Command V to paste.

0:13:47.316,0:13:50.486
Figma pastes them in the[br]same position as this frame.

0:13:51.136,0:13:58.166
Nice. I think there are some other[br]ways we could lay out this menu page,

0:13:58.166,0:14:00.096
so let's explore some different approaches.

0:14:00.096,0:14:10.826
Okay, we have a few designs here, but I'm[br]not quite sure which approach to take.

0:14:10.826,0:14:14.756
We could set up a design critique and[br]schedule some time on the calendar,

0:14:14.756,0:14:18.136
but I wonder if anyone on the[br]team is around to help me choose.

0:14:18.236,0:14:20.946
We'll click the Share button in the toolbar.

0:14:20.946,0:14:26.626
As we've already invited everyone on our team,[br]we don't have to invite them to every file.

0:14:27.326,0:14:30.376
We'll click Copy Link and drop[br]the link in our team channel.

0:14:30.376,0:14:35.496
Our team has some existing sticky note[br]components which we love to use for feedback.

0:14:36.226,0:14:39.716
I'll enable that library in this file[br]while I'm waiting for our team to arrive.

0:14:40.886,0:14:44.146
Our team members avatars are[br]showing up in the toolbar.

0:14:44.146,0:14:53.336
To jump to their location on the canvas, we can[br]click on their avatar to enter observation mode.

0:14:53.336,0:14:56.396
It sounds like our team loved the[br]simplicity of our first design,

0:14:56.396,0:14:59.456
but thought that a back button[br]would be better than our fab.

0:15:00.366,0:15:03.776
Someone suggested the menu could be[br]underneath the rest of our content.

0:15:03.776,0:15:05.576
I like that idea.

0:15:05.696,0:15:10.706
Another person pointed out that the center[br]text makes it hard for users to scan quickly.

0:15:11.066,0:15:13.006
That's a great point.

0:15:13.476,0:15:17.646
It looks like fellow design intern Daniel[br]is creating a new version of the menu,

0:15:17.776,0:15:20.946
which incorporates some elements[br]of each of our designs.

0:15:20.946,0:15:23.526
This looks awesome and everyone's[br]on the same page.

0:15:23.586,0:15:27.906
I'm glad we got some feedback on[br]our wireframes before we invested

0:15:27.906,0:15:30.326
in some higher fidelity designs.

0:15:30.326,0:15:32.456
Now, we know which direction to go in.

0:15:32.456,0:15:37.336
We'll see you in our next video where we[br]explore color, typography and imagery.