1
00:00:00,036 --> 00:00:06,056
>> Figma is a vector design
tool that runs in the browser.

2
00:00:06,056 --> 00:00:15,386
Use Figma to brainstorm ideas,
iterate on designs, create prototypes,

3
00:00:15,466 --> 00:00:18,196
and get feedback at any stage
of the creative process.

4
00:00:18,896 --> 00:00:23,736
In this beginner's course, we're going to take
you through the key stages of designing an app

5
00:00:23,736 --> 00:00:27,936
in Figma, from the initial wireframes
to an interactive prototype.

6
00:00:28,276 --> 00:00:31,196
We'll cover the basics, and
introduce more powerful features

7
00:00:31,196 --> 00:00:34,326
like auto layout, components, and prototyping.

8
00:00:34,326 --> 00:00:38,386
There's something for everyone, whether
you're new to design or new to Figma.

9
00:00:38,936 --> 00:00:42,616
We won't cover all these features in
depth, but we'll provide you with resources

10
00:00:42,646 --> 00:00:45,986
to continue your Figma education.

11
00:00:48,096 --> 00:00:52,666
Sign up for a free Figma account at figma.com.

12
00:00:52,666 --> 00:00:57,796
With the Figma account, you can create teams,
shared workspaces, or you can collaborate

13
00:00:57,796 --> 00:01:00,246
on files and organize them in projects.

14
00:01:00,956 --> 00:01:04,426
Choose from a free starter team
or a paid professional team.

15
00:01:04,786 --> 00:01:08,066
If you are a student or educator,
you can get access to all

16
00:01:08,066 --> 00:01:10,036
of Figma's professional features for free.

17
00:01:10,076 --> 00:01:15,936
Visit figma.com/education/apply
to verify your education account.

18
00:01:15,936 --> 00:01:24,606
Once you've created your team, you
can invite members to collaborate.

19
00:01:24,606 --> 00:01:29,096
This will give them access to all
the projects and files in your team.

20
00:01:29,096 --> 00:01:31,806
You can choose what level of
access each team member has.

21
00:01:32,156 --> 00:01:35,236
Learn more about creating
teams and inviting members

22
00:01:35,446 --> 00:01:40,566
by searching Teams in the Figma Help Center.

23
00:01:40,656 --> 00:01:43,536
We're pretty sure we've got
the next million-dollar idea:

24
00:01:43,606 --> 00:01:45,566
a social media app for pets.

25
00:01:46,566 --> 00:01:50,586
We want some feedback on the general layout
before we start exploring specific elements

26
00:01:50,586 --> 00:01:51,366
of our design.

27
00:01:51,816 --> 00:01:54,576
Wireframes are simplified
designs that are devoid

28
00:01:54,576 --> 00:01:57,906
of any style, like color, type, or imagery.

29
00:01:58,456 --> 00:02:02,216
They allow us to map out user flows and
explore different ways we structure our app

30
00:02:02,476 --> 00:02:06,026
without having to design any
elements or add any content.

31
00:02:06,726 --> 00:02:12,186
We start our journey in the Figma editor.

32
00:02:12,276 --> 00:02:15,206
The canvas is the backdrop
for all of your designs.

33
00:02:15,506 --> 00:02:19,366
It's where you'll add all the
frames, shape, text, and images.

34
00:02:19,566 --> 00:02:22,866
There are no bounds to your
creativity, but you should know

35
00:02:22,866 --> 00:02:27,616
that the canvas extends approximately
65,000 points in each direction.

36
00:02:28,036 --> 00:02:36,246
With the great expanse that is the canvas,
we need something to put our designs in.

37
00:02:36,246 --> 00:02:36,856
Enter frames.

38
00:02:36,856 --> 00:02:41,616
Frames are the containers we place
our shape, text, and image layers in.

39
00:02:41,616 --> 00:02:46,636
You can think of each frame in the
canvas as a single screen of your design.

40
00:02:46,636 --> 00:02:49,886
The toolbar contains the tools
we need for creating layers.

41
00:02:50,386 --> 00:02:52,116
Select the Frame tool in the toolbar.

42
00:02:53,186 --> 00:02:58,456
Frame presets in the sidebar on the right let
us create frames with specific dimensions.

43
00:02:58,456 --> 00:03:04,066
We know that we're making a mobile app, so
we'll select Google Pixel 2XL from the presets.

44
00:03:04,956 --> 00:03:06,736
Two exciting things just happened.

45
00:03:07,156 --> 00:03:11,536
Figma added a frame to our canvas and the
sidebar on the left is no longer empty.

46
00:03:11,536 --> 00:03:15,636
Everything that we add to the canvas
will also be added to the Layers panel.

47
00:03:15,636 --> 00:03:26,526
Let's right click on this
frame and name it to Home.

48
00:03:26,526 --> 00:03:31,356
To explore more of the canvas, we can use
two fingers on a trackpad or the scroll

49
00:03:31,356 --> 00:03:33,136
on the mouse wheel to pan around.

50
00:03:33,136 --> 00:03:38,466
We can also press and hold the
space bar and click and drag to pan.

51
00:03:38,466 --> 00:03:40,566
Let's zoom out so we can see the entire frame.

52
00:03:40,566 --> 00:03:46,296
If you're using the trackpad, you can also
use the pinch gestures to zoom in and out.

53
00:03:46,296 --> 00:03:51,206
You can also use shortcuts like Command
Plus and Command Minus to zoom in or out.

54
00:03:51,206 --> 00:03:55,406
For granular control, adjust the zoom
level in your view settings up here.

55
00:03:55,406 --> 00:04:02,136
Now, we're ready to add some
layers to our frame.

56
00:04:02,136 --> 00:04:06,436
As this is a wireframe, we're going to keep
it basic and use shapes like rectangles

57
00:04:06,436 --> 00:04:10,806
and ellipses to represent more
complex aspects of our designs.

58
00:04:10,936 --> 00:04:14,896
We'll select the rectangle tool to create
an image for a post on our app's home page.

59
00:04:14,966 --> 00:04:19,056
Just like frames, every layer
in the canvas has dimensions.

60
00:04:19,176 --> 00:04:23,276
We can adjust a layer's position and
dimensions at the top of the right side bar.

61
00:04:24,016 --> 00:04:27,496
We want our rectangle to take up most
of the horizontal space in our frame,

62
00:04:27,796 --> 00:04:36,216
so let's make the width of our
rectangle 380, and a height of 300.

63
00:04:36,216 --> 00:04:41,086
If we look in the layers panel again, we can
see that our rectangle is within our home frame.

64
00:04:41,326 --> 00:04:44,176
Some layers, like frames,
can contain other layers.

65
00:04:44,756 --> 00:04:48,696
If we move our rectangle outside of the
frame, the layers panel updates, too.

66
00:04:48,696 --> 00:04:52,056
We're going to place our
rectangle back inside of our frame.

67
00:04:52,056 --> 00:04:55,226
Figma will help us snap the
position of the rectangle

68
00:04:55,226 --> 00:05:01,396
to align it to the center of the frame.

69
00:05:01,396 --> 00:05:06,606
Cool. Now we're going to create a shape that
represents a user's profile picture or avatar.

70
00:05:06,606 --> 00:05:10,166
Select the Ellipse tool on the menu
and click to start drawing the ellipse.

71
00:05:10,246 --> 00:05:14,446
If you hold down Shift as we drag,
we can create a perfect circle.

72
00:05:15,176 --> 00:05:18,726
We'll release to create the avatar
with dimensions of around 30 by 30.

73
00:05:19,156 --> 00:05:22,096
Holding Shift can strain the
proportions of our ellipse.

74
00:05:22,546 --> 00:05:26,186
If we update one value in the right-side
bar, the other will update, too.

75
00:05:26,826 --> 00:05:29,616
We can click into the width
field and use the arrow keys

76
00:05:29,616 --> 00:05:31,706
to nudge the ellipse's dimensions to 30.

77
00:05:32,496 --> 00:05:34,736
Some fields in Figma accept equations.

78
00:05:34,736 --> 00:05:38,636
We can use equations to resize
layers by adding, subtracting,

79
00:05:38,766 --> 00:05:41,866
multiplying, or dividing the existing value.

80
00:05:42,426 --> 00:05:50,316
Let's add plus 10 to the field to set
the dimensions of our circle to 40.

81
00:05:50,416 --> 00:05:53,436
Basic shapes support both
fill and stroke properties.

82
00:05:54,076 --> 00:05:57,886
We can see these in the right sidebar
when we select both of our layers.

83
00:05:57,886 --> 00:06:03,576
By default, our layers have a fill of
grey, but you can choose another color.

84
00:06:03,576 --> 00:06:08,456
Enter a hex code in the field or click
the Swatch to open the color picker.

85
00:06:08,456 --> 00:06:11,896
We can select colors from the
Palette, or apply other fills

86
00:06:11,896 --> 00:06:15,076
like gradients, images, and even animated gifs.

87
00:06:15,076 --> 00:06:19,746
We can also remove the fill entirely
by clicking the minus button.

88
00:06:19,746 --> 00:06:24,816
We want our wireframes to appear like
outlines instead of solid shapes.

89
00:06:25,276 --> 00:06:27,636
We can do this by adding a stroke.

90
00:06:27,746 --> 00:06:30,136
Strokes are outlines or borders around layers.

91
00:06:31,046 --> 00:06:38,556
We've learned to align layers to their frames,
but we can also align objects to each other.

92
00:06:39,356 --> 00:06:41,996
Let's use the alignment tools
to align the layers to the left.

93
00:06:42,166 --> 00:06:47,206
As our avatar layer is smaller, Figma
will align it to the larger image layer.

94
00:06:47,326 --> 00:06:50,206
Now, we need a username to go with our avatar.

95
00:06:50,576 --> 00:06:55,776
Select the Text tool, click a spot on the
canvas next to our avatar, and type in name.

96
00:06:55,896 --> 00:06:58,916
We'll cover adjusting text
properties later in the series.

97
00:06:59,846 --> 00:07:03,416
We want our text layer to align
to the center of our avatar.

98
00:07:03,416 --> 00:07:08,206
Drag over multiple layers to select them
all at once and click Align Vertical Center.

99
00:07:08,266 --> 00:07:11,866
If we want to make small
adjustments to a layer's position,

100
00:07:12,146 --> 00:07:15,406
we can use our arrow keys to
nudge objects on the canvas.

101
00:07:15,496 --> 00:07:19,396
Looks good to me.

102
00:07:20,726 --> 00:07:25,446
Users will want to engage with each other
by commenting, liking, and saving posts.

103
00:07:25,446 --> 00:07:30,556
Let's press R to select the Rectangle tool
and create some icons for these actions.

104
00:07:30,556 --> 00:07:34,996
We'll use Shift again to constrain the
proportions and create a perfect square.

105
00:07:35,116 --> 00:07:38,236
Let's aim for dimensions of 32 by 32.

106
00:07:38,236 --> 00:07:43,526
Instead of drawing three separate
squares, we can copy the original layer.

107
00:07:43,526 --> 00:07:45,866
There are a few ways to copy layers.

108
00:07:46,096 --> 00:07:50,966
Hold down Alt or Option and click and
drag on our layers to duplicate it

109
00:07:51,056 --> 00:07:57,506
or press Command D. Figma will maintain
the same distance between objects.

110
00:07:57,506 --> 00:08:02,496
If we want to change the uniform spacing
between them, we can select our layers

111
00:08:02,496 --> 00:08:05,576
and update the horizontal
spacing in the right sidebar.

112
00:08:06,036 --> 00:08:07,626
We'll need some text below our image.

113
00:08:08,116 --> 00:08:09,896
Let's add that.

114
00:08:09,896 --> 00:08:15,436
All these layers make up a single post.

115
00:08:15,496 --> 00:08:20,566
We want to be sure these objects stay together.

116
00:08:20,626 --> 00:08:22,986
There are two ways we can group layers.

117
00:08:23,166 --> 00:08:27,406
We can use the keyboard shortcut, Command
G, to create a group out of these layers.

118
00:08:28,026 --> 00:08:29,866
Groups allow us to move a collection of layers

119
00:08:29,866 --> 00:08:32,826
around without having to
select each individual layer.

120
00:08:32,966 --> 00:08:36,386
We can use Groups or Frames
to organize our Layers panel.

121
00:08:37,266 --> 00:08:41,486
While Frames and Groups look similarly in the
Layers panel, they are fundamentally different.

122
00:08:41,486 --> 00:08:45,756
Groups are the sum of their parts
and have no properties of their own.

123
00:08:45,756 --> 00:08:50,796
We can use Groups to organize our layers
or apply properties to layers in bulk.

124
00:08:50,796 --> 00:08:53,756
Frames, on the other hand, can have
their own dimensions and properties,

125
00:08:53,756 --> 00:08:56,246
some of which can affect the layers within them.

126
00:08:56,246 --> 00:08:59,596
We'll learn more about frames and
their properties later in this series.

127
00:08:59,596 --> 00:09:04,126
From the right sidebar, we can
convert our group into a frame.

128
00:09:04,696 --> 00:09:09,956
Then we'll copy this frame using the keyboard
shortcut to create a second post for our feed.

129
00:09:10,746 --> 00:09:19,676
We'll move the other post below
the other post in the frame.

130
00:09:19,676 --> 00:09:21,076
The feed is starting to take shape,

131
00:09:21,076 --> 00:09:24,576
but we're missing some crucial
elements to make it look like an app.

132
00:09:24,806 --> 00:09:29,166
We need a status bar and a navigation
menu to move between pages in our app.

133
00:09:29,306 --> 00:09:33,046
We could make these elements using
shapes, or we could rely on components

134
00:09:33,046 --> 00:09:34,846
and libraries to speed up the process.

135
00:09:35,206 --> 00:09:37,646
Components are the building
blocks of our designs.

136
00:09:38,136 --> 00:09:40,876
They can be basic UI elements
like buttons or icons,

137
00:09:40,876 --> 00:09:43,906
or more elaborate compositions
like toolbars and menus.

138
00:09:44,706 --> 00:09:47,206
Libraries are collections
of components and styles.

139
00:09:47,746 --> 00:09:53,656
You can use libraries in Figma to create,
share, and use components across your files.

140
00:09:53,716 --> 00:09:55,356
You might have heard of a design system.

141
00:09:55,836 --> 00:09:58,946
Design systems combine component
libraries with standards

142
00:09:58,946 --> 00:10:01,526
and guidelines for implementing them in code.

143
00:10:01,526 --> 00:10:04,076
They're a single source of truth
for designers and developers

144
00:10:04,296 --> 00:10:06,856
and help to create consistency at scale.

145
00:10:07,106 --> 00:10:09,936
Let's look for a component
library in the Figma community.

146
00:10:09,936 --> 00:10:13,646
The Figma community is a space
where creators can share resources

147
00:10:13,646 --> 00:10:15,716
in the form of design files and plugins.

148
00:10:15,716 --> 00:10:18,386
We're going to use this wireframe UI kit,

149
00:10:18,386 --> 00:10:20,976
so we'll duplicate the file
and add it to our drafts.

150
00:10:22,146 --> 00:10:25,956
We could copy components from this file
and paste them into our wireframes.

151
00:10:26,496 --> 00:10:29,296
We're going to publish these
components to a library instead

152
00:10:29,686 --> 00:10:31,196
to make them available to our team.

153
00:10:31,806 --> 00:10:34,636
We'll open the file in the
editor and click the arrow next

154
00:10:34,636 --> 00:10:37,816
to the file name and select Move to Project.

155
00:10:37,816 --> 00:10:42,236
As components can only be published in a team,
we'll move this to a project in our team.

156
00:10:42,436 --> 00:10:47,856
Now, we can go to the same menu and
select Publish Components and Styles.

157
00:10:48,006 --> 00:10:52,416
We can enter a description of our library
and press Publish to share it to our team.

158
00:10:52,906 --> 00:10:56,296
Back in our original file, we
can now access that library

159
00:10:56,526 --> 00:10:58,906
in the Assets panel of the left sidebar.

160
00:10:58,906 --> 00:11:01,306
Click the book icon to open the library's modal.

161
00:11:01,306 --> 00:11:04,646
Toggle the switch to enable
the wireframe in our file.

162
00:11:05,176 --> 00:11:06,646
Let's resize the left sidebar.

163
00:11:06,646 --> 00:11:11,976
Hover over the edge until the cursor
appears, then click and drag to resize.

164
00:11:12,496 --> 00:11:16,776
Okay, we need components to represent
the status bar at the top of the screen,

165
00:11:16,776 --> 00:11:20,756
and a floating action button,
or FAB, at the bottom.

166
00:11:20,756 --> 00:11:22,506
This generic status bar is perfect.

167
00:11:22,506 --> 00:11:26,066
To add this component to our file,
we can click on the component

168
00:11:26,066 --> 00:11:29,446
in the assets panel and drag it onto the canvas.

169
00:11:29,446 --> 00:11:33,166
We'll position the status bar near the
top of the frame and release to place.

170
00:11:33,286 --> 00:11:36,186
We'll align to the top and left.

171
00:11:36,296 --> 00:11:41,226
Let's repeat this process for the FAB and place
it in the bottom and the right of the frame.

172
00:11:41,226 --> 00:11:48,076
Now, we have copies of these
components known as instances.

173
00:11:48,076 --> 00:11:52,356
Instances are connected to the main
component they originated from.

174
00:11:52,866 --> 00:11:55,046
If you make a change to the main component,

175
00:11:55,046 --> 00:11:58,256
Figma will also apply those
changes to any instances.

176
00:11:58,506 --> 00:12:02,046
This saves you from having to manually
update every instance when you want

177
00:12:02,046 --> 00:12:07,426
to change properties of your component.

178
00:12:07,426 --> 00:12:10,776
Our eventual application will need
to adapt to different screen sizes.

179
00:12:11,036 --> 00:12:14,886
If we want to resize our frame
now, our components don't change.

180
00:12:15,636 --> 00:12:20,316
We can make sure they respond to
different frame sizes using constraints.

181
00:12:20,316 --> 00:12:23,946
At the moment, our constraints are
set to the top and left by default.

182
00:12:24,446 --> 00:12:27,246
We want the status bar to take
up the full width of the frame,

183
00:12:27,246 --> 00:12:30,086
so we'll keep the vertical constraints at top

184
00:12:30,196 --> 00:12:32,706
and set our horizontal constraints
to left and right.

185
00:12:33,416 --> 00:12:36,266
We'll set the constraints for
the fab at the bottom and right.

186
00:12:36,266 --> 00:12:41,886
Now, when we resize our frame, the components
will respond according to their constraints.

187
00:12:41,886 --> 00:12:48,686
Our app is starting to come together.

188
00:12:48,766 --> 00:12:51,116
Let's create a frame for our menu.

189
00:12:51,296 --> 00:12:53,926
Select the frame in the toolbar
or press the F key.

190
00:12:53,926 --> 00:12:57,956
We'll add another Google Pixel
2XL preset to the canvas.

191
00:12:58,446 --> 00:13:01,496
Let's add some text layers
for each page in our app.

192
00:13:01,496 --> 00:13:05,366
Press T to select the text tool and
click to create a new text layer.

193
00:13:05,896 --> 00:13:08,016
We'll type in menu item for now.

194
00:13:08,106 --> 00:13:13,366
We want all our text layers to be the
same width, so we'll set the width to 200.

195
00:13:13,366 --> 00:13:15,876
We'll also increase the font size to 20.

196
00:13:16,016 --> 00:13:21,816
Let's duplicate this layer to create four
more menu items, one for each page in our app.

197
00:13:21,816 --> 00:13:25,826
Hold down Alt slash Option, then
click and drag to duplicate.

198
00:13:25,986 --> 00:13:29,156
Then, use the duplicate shortcut.

199
00:13:29,586 --> 00:13:34,116
Let's copy the status bar in Fab from
our home page to complete our menu page.

200
00:13:34,286 --> 00:13:39,656
We'll Click to select the status bar, hold
down Shift, then Click to select the Fab.

201
00:13:40,086 --> 00:13:44,186
We'll then use the shortcut Command
C to copy them to our clipboard.

202
00:13:44,286 --> 00:13:47,276
Select our menu frame and
press Command V to paste.

203
00:13:47,316 --> 00:13:50,486
Figma pastes them in the
same position as this frame.

204
00:13:51,136 --> 00:13:58,166
Nice. I think there are some other
ways we could lay out this menu page,

205
00:13:58,166 --> 00:14:00,096
so let's explore some different approaches.

206
00:14:00,096 --> 00:14:10,826
Okay, we have a few designs here, but I'm
not quite sure which approach to take.

207
00:14:10,826 --> 00:14:14,756
We could set up a design critique and
schedule some time on the calendar,

208
00:14:14,756 --> 00:14:18,136
but I wonder if anyone on the
team is around to help me choose.

209
00:14:18,236 --> 00:14:20,946
We'll click the Share button in the toolbar.

210
00:14:20,946 --> 00:14:26,626
As we've already invited everyone on our team,
we don't have to invite them to every file.

211
00:14:27,326 --> 00:14:30,376
We'll click Copy Link and drop
the link in our team channel.

212
00:14:30,376 --> 00:14:35,496
Our team has some existing sticky note
components which we love to use for feedback.

213
00:14:36,226 --> 00:14:39,716
I'll enable that library in this file
while I'm waiting for our team to arrive.

214
00:14:40,886 --> 00:14:44,146
Our team members avatars are
showing up in the toolbar.

215
00:14:44,146 --> 00:14:53,336
To jump to their location on the canvas, we can
click on their avatar to enter observation mode.

216
00:14:53,336 --> 00:14:56,396
It sounds like our team loved the
simplicity of our first design,

217
00:14:56,396 --> 00:14:59,456
but thought that a back button
would be better than our fab.

218
00:15:00,366 --> 00:15:03,776
Someone suggested the menu could be
underneath the rest of our content.

219
00:15:03,776 --> 00:15:05,576
I like that idea.

220
00:15:05,696 --> 00:15:10,706
Another person pointed out that the center
text makes it hard for users to scan quickly.

221
00:15:11,066 --> 00:15:13,006
That's a great point.

222
00:15:13,476 --> 00:15:17,646
It looks like fellow design intern Daniel
is creating a new version of the menu,

223
00:15:17,776 --> 00:15:20,946
which incorporates some elements
of each of our designs.

224
00:15:20,946 --> 00:15:23,526
This looks awesome and everyone's
on the same page.

225
00:15:23,586 --> 00:15:27,906
I'm glad we got some feedback on
our wireframes before we invested

226
00:15:27,906 --> 00:15:30,326
in some higher fidelity designs.

227
00:15:30,326 --> 00:15:32,456
Now, we know which direction to go in.

228
00:15:32,456 --> 00:15:37,336
We'll see you in our next video where we
explore color, typography and imagery.