Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 2

Building UI Elements with Basic Shapes

Recommended resources

Hello! Welcome back to your second Figma lesson.

In our last session, we set up our digital workspace by creating a new file and placing a mobile frame on the canvas. You should have an "iPhone 14" frame ready to go. Think of it as a prepped canvas waiting for your first brushstrokes.

Today, we'll start adding to that canvas. This lesson is all about learning to draw and arrange the basic shapes (rectangles and ellipses) that form the building blocks of almost every user interface. Your background in illustration will be a great asset here, as you're already familiar with how complex images are built from simple forms. We'll apply that same principle to create two of the most common UI elements: a button and an avatar.

Part 1: Building a Button with the Rectangle Tool

Buttons are fundamental interactive elements. In their simplest form, they are just a rectangle with some text on top. Let's start by creating the shape for our button.

The Rectangle Tool is your go-to for creating squares, rectangles, and other four-sided shapes. You can select it from the toolbar at the top of the screen, or more efficiently, by pressing the R key on your keyboard.

  1. Select your iPhone frame by clicking its name.
  2. Press the R key.
  3. Click and drag anywhere inside your frame to draw a rectangle. Don't worry about the exact size or position for now.

Customizing the Shape

A plain rectangle doesn't look much like a modern button. One of the most common ways to style a button is by rounding its corners.

The following video clip will show you how to draw a rectangle and, most importantly, how to adjust the corner radius to create that softer, more button-like appearance.

Figma UI Design Tutorial: Get Started in Just 24 Minutes!

Watch this clip from the 'Figma UI Design Tutorial' by AJ&Smart to see how to modify a rectangle's properties. Follow along in your own Figma file.

Watch from 07:45 to 09:40. Focus on how the corner radius is adjusted using both the on-canvas handles and the input field in the Design panel on the right. Notice how you can also set the radius for each corner independently.

As you saw, you have two ways to round the corners:

  • On-canvas handles: Hover over your selected rectangle and drag the small circular handles that appear inside each corner.
  • Design Panel: With the rectangle selected, find the Corner Radius field in the Design panel on the right and type in a specific value.

Go ahead and give your rectangle a corner radius of about 10.

Various button styles

As this image from the article 'How to Make a Button in Figma' shows, a simple rectangle can be quickly shaped into a functional button by adjusting its corner radius.

Part 2: Assembling the Button

Now that you have the button's container, let's assemble it into a recognizable element. This involves adding a text label. While we'll cover text styling in detail in a future module, we'll add a simple label now to complete our button.

  1. Press the T key to select the Text Tool.
  2. Click roughly in the center of your rectangle and type "Get Started".
  3. In the Design panel on the right, under the Fill section, click the color swatch and change the text color to white (#FFFFFF) to make it visible against the default gray rectangle.
  4. Drag the text layer until Figma's red "smart guides" show you it's centered within the rectangle.

This next video demonstrates creating a complete button, combining the rectangle shape with text. It's a great practical walkthrough of the process we just started.

Figma UI Design Tutorial: Get Started in Just 24 Minutes!

This clip from the same AJ&Smart video shows how to combine a shape and text to create a button. Pay attention to how the instructor sets the dimensions and centers the text.

Watch from 18:36 to 20:10. You've already done most of this, but it's helpful to see it all come together. Try to position your button near the bottom of your iPhone frame.

Test your understanding!

Great! You've made a primary "filled" button. Many apps also use a secondary, "outline" button.

How would you create a second button below your first one that has a white background, a gray border, and gray text? (Hint: Look for the Stroke option in the Design panel.)

Show answer
  1. Select your first button's rectangle and text. Duplicate them by holding Alt (or Option on Mac) and dragging them down.
  2. Select the new rectangle. In the Fill section on the right, change the color to white.
  3. Still in the Design panel, click the + icon next to Stroke to add an outline. By default, it will be black. You can change it to a light gray.
  4. Select the new text label. In the Fill section, change its color to the same gray you used for the stroke.
  5. You now have an outline button!

Part 3: Creating an Avatar with the Ellipse Tool

Another essential UI element is the user avatar, which is typically a circle.

Avatar Examples in a Design System
Avatars can be photographic, illustrative, or text-based, but they are most often contained within a circular shape. Source: Tourmaline Design System.

To create a circle, we use the Ellipse Tool.

  1. Select the Ellipse tool from the toolbar (it's in the same dropdown as the Rectangle tool) or press the O key.
  2. To draw a perfect circle instead of an oval, hold down the Shift key while you click and drag.
  3. Draw a circle with a size of about 100x100 pixels near the top of your iPhone frame. You can check and edit the dimensions in the W (width) and H (height) fields in the Design panel.

This short video clip reinforces how to create a perfect circle and set its dimensions precisely.

Figma UI Design Tutorial: Get Started in Just 24 Minutes!

Watch this final clip from the AJ&Smart video to see the Ellipse tool in action.

Watch from 10:10 to 10:55. Notice how holding the Shift key constrains the proportions to a perfect circle, and how you can type exact dimensions in the Design panel.

Right now, your avatar is a simple gray circle. This is the base shape we need. In our next lesson, we'll turn this shape into a proper profile picture.

Arranging Your Elements

You should now have an avatar shape at the top of your frame and a button at the bottom. As you move these elements around, you'll see red lines—the smart guides—appear. These help you snap your objects into alignment with the frame (e.g., centered horizontally) or in relation to other objects. Use these guides to position your avatar in the top-center of the screen and your button in the bottom-center.

We'll explore Figma's more powerful alignment tools in a later lesson, but for now, these guides are all you need.

Conclusion

Fantastic work today! You've moved from an empty canvas to a screen with recognizable UI elements.

Here are the key takeaways:

  • The Rectangle (R) and Ellipse (O) tools are used to create the foundational shapes for most UI elements.
  • You can modify shape properties like corner radius in the Design panel to change their appearance.
  • Holding the Shift key while drawing constrains a shape's proportions, allowing you to create perfect squares and circles.
  • Simple UI elements like buttons and avatars are just combinations of these basic shapes and text.

In our next lesson, we will continue building this screen by learning how to import and mask an image, transforming that gray circle you created into a realistic user avatar.