FD4B: Create your avatar using shapes and fills

Lesson overview

In this lesson, we’ll learn about a few fundamental layer types in Figma Design and use them to build the hero for the landing page of our portfolio website. A hero is a large section at the top of a webpage, typically used to draw attention, convey a message, or prompt an action.

We’ll start by building an avatar using a shape with an image fill, then use text layers to add our name and a brief description to welcome visitors to our portfolio. You’ll need a photo for the avatar, so make sure you have one ready to go on your computer before moving on.

Create your avatar

We'll create the avatar using a shape layer and an image fill. Before you start designing, make sure you're on the Explorations page of your file.

Add an ellipse to the canvas

There are six shape tools in Figma Design: rectangle, line, arrow, ellipse, polygon, and star. We want our avatar to be in a circular shape, so we’ll use the Ellipse tool.

1. Select the Ellipse tool from the toolbar or press O on your keyboard. 
2. Click anywhere on the canvas to place an ellipse. Notice how the right sidebar changed and now has some properties for us to edit.
3. In the Layout section, you can see that the ellipse's dimensions are set to 100 X 100. Let's resize it by typing 90 in the Width and Height fields and pressing Enter to apply the change.

Change the ellipse's fill

When you add a shape to the canvas, you're actually adding an outline of that shape, also called a vector network. By default, Figma fills the shape's outline with a solid grey color.

We can change a layer's fill using the Fills section in the right sidebar. Fills can be solid colors, gradients, images, animated GIFs, and videos (available on paid plans only).

Layers can have more than one fill. This allows you to customize your layers, such as placing gradients over an image. To add additional fills, click the plus in the Fills section. You can click and drag fills to reorder them, or click the minus to remove them.

Since we want to include a profile picture for our avatar, we'll change the ellipses fill to an image.

1. Select the ellipse.
2. In the Fill section, click on the swatch to open the color picker.
3. Select Image.
4. Click Upload from computer.
5. Choose an image from your computer.
6. Click Open.

The image will replace ellipse's default grey fill. You can then use the image settings to adjust attributes like exposure, contrast, and temperature.

Check your knowledge