Create a Mobile, Tablet and Desktop Frame in Figma

Build Reusable Designs with Figma Components

Add a Reusable Figma Component to Multiple Frames

Create a Simple Icon with Figma Ellipse and Pen Tool

Duplicate Grouped Vectors to Create a Patterned Logo in Figma

Establish a Typography System in Figma with Text Styles

Create Figma Color Styles to Reuse Across Frames 

Reuse a Drop Shadow in Figma with Effect Styles

Prototype a Screen Transition in Figma

Export and Share Figma Frames

The Beginner's Guide to Figma

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.

Course

The Beginner's Guide to Figma

Create a Simple Icon with Figma Ellipse and Pen Tool

Share this video with your friends