Create a Simple Icon with Figma Ellipse and Pen Tool
In this lesson, you will learn how to use Figma's ellipse and pen tool to draw a simple clock icon. This will show you how to create vector-based graphics for your websites and apps.
Instructor: [00:00] To get started, we're going to go ahead and select the Frame tool and create a new frame. We'll call this icons and logos. The first thing we're going to do is draw a clock icon. We're going to be using both the Pen tool and the Ellipses tool.
[00:23] First, we'll go to the top, select the rectangle, select the drop down, and then select the Ellipses tool. Hold Shift, and then click and drag until you have a circle about this size. Go over to the right menu and change the fill to white and then add a stroke.
[00:46] Let's change that to three pixels. Let's go back to the top bar, select the Pen tool, and then let's draw the hands for the clock. You can click, and it'll drop an anchor. Then click again to create a path. Then, one more time for the short hand.
[01:12] After, navigate to Done and then go over to the stroke and select three. Now, let's zoom in and make a few changes. Let's select the hands and change it so that the caps are rounded. To do this, go to the right side, select the three dots for the advanced stroke menu.
[01:32] For a cap, click the drop down and select round. For a join, let's change that to round as well. That's looking a lot better. Now that we're done, let's click and drag to select both layers, then hold control and click or right-click and select group selection. Now you'll notice on the left we have both layers grouped together. Let's call this clock icon.