Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Prototyping with Figma!
You have completed Prototyping with Figma!
Preview
Using the pen tool, it's possible to draw custom shapes and create vector graphics directly inside Figma.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The screen on the left is done, but
the screen in the middle needs some
0:00
UI to indicate that users
can edit this image, or
0:05
that edits have been applied,
such as the ability to adjust colors.
0:09
In the full application, there might be
more ways to edit beyond just colors.
0:15
So, this screen will just
serve as one example.
0:20
On the final screen,
we just need some standard iOS controls,
0:24
which we can grab from
the Facebook iOS templates,
0:29
but let's work on the image
editing screen first.
0:33
Towards the bottom of the screen, I'd
like there to be a histogram similar to
0:38
what you might see in a tool like
Photoshop or on the back of DSLR camera.
0:43
A histogram is a graph that indicates
the brightness of pixels in an image.
0:49
Usually the lighter pixels are on the left
and the darker pixels are on the right.
0:55
And the y-axis indicates how
many of those pixels there are.
1:02
We're not going to use
a real histogram but
1:08
instead we're just going to make one up,
that only very roughly matches this image.
1:11
We can do this by drawing custom shapes,
1:16
at the top of the screen in
the tool bar there is a Pen Tool.
1:21
Select it by clicking on it, or
1:28
alternatively you hit the P
key on your keyboard.
1:30
Now let's just roughly draw a shape.
1:34
And I'll start outside of the mask here,
because it will ultimately be cut off.
1:40
So at the bottom,
I'll just draw a straight line.
1:47
And each time we click, the pen tool
will add a new point to the shape,
1:52
so we're drawing the outline or
the perimeter of the shape.
1:57
So I'm just going to draw a rough
squiggly line that sort of
2:03
roughly simulates what a histogram for
this image might look like
2:07
And I'm just clicking to
drop each one of the points.
2:19
And again, I'll go slightly off screen
here to just close up the shape.
2:24
So, now that we've closed the shape,
and clicked on the last point,
2:32
you'll see that the pen tool is now
indicating I can draw a new shape,
2:37
because there's no line between the last
point where I clicked and the cursor.
2:41
If you're new to using
a drawing tool like this,
2:47
it might take you a few tries and that's
okay, it doesn't have to be perfect.
2:50
We just want a squiggly looking graph.
2:55
Right now, this shape only has
a stroke that goes around the edge,
2:59
but there's no color filling it in.
3:04
In the inspector on the right
side delete the stroke
3:06
by hitting the minus button next to it.
3:11
Then add a fill by hitting
the + button next to where
3:17
it says FILL, and
let's change the color to white,
3:22
and I'll close this color selection box.
3:27
And then let's adjust the opacity
which is this percentage here, So
3:33
that is is slightly transparent.
3:39
So right now it is 100 percent opaque,
and if we drop it something like 60 and
3:42
hit Enter, it will make
the shape slightly transparent.
3:48
So now we can still see the image, but
also see the histogram at the same time.
3:53
Next, we need to crop this, so
lets move it inside of the App group.
4:00
I'm going to select the Move Tool again,
by hitting the V key on the keyboard.
4:06
And here we have this Vector shape,
4:13
let's just rename that to Histogram,
4:17
And then we're working
on the editing screen.
4:23
So, let's open up that group,
we'll open up the App group.
4:26
And then, let's drag the histogram so
4:31
that it's inside the App group but
above the London photo.
4:35
And this will crop it off at the sides,
so if I deselect that,
4:41
you can see that it's now cropped.
4:45
I'm going to double click it again, select
it, and let's just move it down a bit.
4:48
And you can also actually use the arrow
keys, To move objects around,
4:55
so I'll just move that into place.
5:00
Click away from it, and now we have
a nice histogram, this is looking good.
5:04
Next we'll learn how to draw curved lines,
and
5:10
make some controls that users will use
to the change the colors in this image.
5:14
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up