Drawing with Shapes5:20 with Nick Pettit
Using the pen tool, it's possible to draw custom shapes and create vector graphics directly inside Figma.
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 up