Create a Simple Icon with Figma Ellipse and Pen Tool

Joe Previte
InstructorJoe Previte
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

egghead
egghead
~ 7 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today