Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Create a Simple Icon with Figma Ellipse and Pen Tool

    figmaFigma

    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.

    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.